@nuralyui/timepicker 0.1.5 → 0.1.6
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/bundle.js +38 -1603
- package/package.json +1 -1
- package/timepicker.component.d.ts +0 -2
- package/timepicker.component.js +0 -3
- package/timepicker.component.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,1596 +1,31 @@
|
|
|
1
|
-
import{css as
|
|
2
|
-
/*
|
|
3
|
-
* Host element base styles
|
|
4
|
-
* Container for the input component with flexible layout
|
|
5
|
-
*/
|
|
6
|
-
:host {
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-direction: column;
|
|
9
|
-
font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/*
|
|
13
|
-
* Base input wrapper and input element styles
|
|
14
|
-
* Background applied to wrapper to cover entire container including addons
|
|
15
|
-
* Uses theme CSS custom properties for comprehensive theming support
|
|
16
|
-
*/
|
|
17
|
-
.input-wrapper {
|
|
18
|
-
background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
#input-container > input {
|
|
23
|
-
background-color: transparent;
|
|
24
|
-
border: var(--nuraly-input-border, none);
|
|
25
|
-
outline: var(--nuraly-input-outline, none);
|
|
26
|
-
flex: 1;
|
|
27
|
-
min-width: 0;
|
|
28
|
-
width: 100%;
|
|
29
|
-
|
|
30
|
-
/* Typography from theme */
|
|
31
|
-
font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
|
|
32
|
-
font-size: var(--nuraly-font-size-input, 14px);
|
|
33
|
-
color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));
|
|
34
|
-
|
|
35
|
-
/* Padding from theme */
|
|
36
|
-
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/*
|
|
40
|
-
* Disabled state styles for wrapper and input
|
|
41
|
-
* Applied when input is disabled - removes interactivity and applies muted colors
|
|
42
|
-
*/
|
|
43
|
-
:host([disabled]) .input-wrapper {
|
|
44
|
-
background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host([disabled]) #input-container > input {
|
|
48
|
-
background-color: transparent;
|
|
49
|
-
cursor: var(--nuraly-cursor-disabled, not-allowed);
|
|
50
|
-
color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/*
|
|
54
|
-
* Icon base styles
|
|
55
|
-
* Common styling for all icons within the input component
|
|
56
|
-
* Provides comprehensive CSS variable override system
|
|
57
|
-
*/
|
|
58
|
-
nr-icon {
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
|
|
62
|
-
/* Global icon color override - applies to all icons in input */
|
|
63
|
-
--nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));
|
|
64
|
-
|
|
65
|
-
/* Size override for input icons */
|
|
66
|
-
--nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));
|
|
67
|
-
|
|
68
|
-
/* Interactive state overrides */
|
|
69
|
-
--nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));
|
|
70
|
-
--nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));
|
|
71
|
-
--nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/*
|
|
75
|
-
* Placeholder styling
|
|
76
|
-
* Customizable placeholder text appearance
|
|
77
|
-
*/
|
|
78
|
-
::placeholder {
|
|
79
|
-
color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));
|
|
80
|
-
font-size: var(--nuraly-font-size-input-placeholder, 14px);
|
|
81
|
-
font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/*
|
|
85
|
-
* Disabled placeholder styling
|
|
86
|
-
* Applied when input is disabled
|
|
87
|
-
*/
|
|
88
|
-
:host([disabled]) ::placeholder {
|
|
89
|
-
color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* ========================================
|
|
93
|
-
* ICON VARIANTS AND STATES
|
|
94
|
-
* ======================================== */
|
|
95
|
-
|
|
96
|
-
/* Warning state icon */
|
|
97
|
-
#warning-icon {
|
|
98
|
-
--nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/* Error state icon */
|
|
102
|
-
#error-icon {
|
|
103
|
-
--nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/* Calendar input type icon */
|
|
107
|
-
#calendar-icon {
|
|
108
|
-
--nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/* Password toggle icon */
|
|
112
|
-
#password-icon {
|
|
113
|
-
padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));
|
|
114
|
-
padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));
|
|
115
|
-
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
116
|
-
--nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Copy functionality icon */
|
|
120
|
-
#copy-icon {
|
|
121
|
-
padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));
|
|
122
|
-
--nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);
|
|
123
|
-
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/* Clear functionality icon */
|
|
127
|
-
#clear-icon {
|
|
128
|
-
padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));
|
|
129
|
-
--nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);
|
|
130
|
-
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/*
|
|
134
|
-
* Number input increment/decrement icons container
|
|
135
|
-
* Positioned absolutely for overlay on input
|
|
136
|
-
*/
|
|
137
|
-
#number-icons {
|
|
138
|
-
display: flex;
|
|
139
|
-
justify-content: space-between;
|
|
140
|
-
align-items: center;
|
|
141
|
-
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
142
|
-
position: absolute;
|
|
143
|
-
right: 0;
|
|
144
|
-
top: 0;
|
|
145
|
-
height: 100%;
|
|
146
|
-
width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));
|
|
147
|
-
padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* Individual number icons styling */
|
|
151
|
-
#number-icons nr-icon {
|
|
152
|
-
--nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);
|
|
153
|
-
padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));
|
|
154
|
-
padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));
|
|
155
|
-
width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));
|
|
156
|
-
height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/* Number icons separator styling */
|
|
160
|
-
#icons-separator {
|
|
161
|
-
color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));
|
|
162
|
-
padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));
|
|
163
|
-
padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));
|
|
164
|
-
padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
/*
|
|
168
|
-
* Disabled state for all icons
|
|
169
|
-
* Applied when input is disabled - reduces opacity and disables interaction
|
|
170
|
-
*/
|
|
171
|
-
:host([disabled]) #password-icon,
|
|
172
|
-
:host([disabled]) #error-icon,
|
|
173
|
-
:host([disabled]) #warning-icon,
|
|
174
|
-
:host([disabled]) #number-icons,
|
|
175
|
-
:host([disabled]) #calendar-icon,
|
|
176
|
-
:host([disabled]) #copy-icon,
|
|
177
|
-
:host([disabled]) #clear-icon {
|
|
178
|
-
opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/* Disabled icons cursor override */
|
|
182
|
-
:host([disabled]) #password-icon,
|
|
183
|
-
:host([disabled]) #number-icons,
|
|
184
|
-
:host([disabled]) #copy-icon,
|
|
185
|
-
:host([disabled]) #clear-icon {
|
|
186
|
-
cursor: not-allowed;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
/* ========================================
|
|
190
|
-
* INPUT CONTAINER STYLES
|
|
191
|
-
* ======================================== */
|
|
192
|
-
|
|
193
|
-
/*
|
|
194
|
-
* Input wrapper - contains addons and input container
|
|
195
|
-
* Provides horizontal layout for addon before/after elements
|
|
196
|
-
*/
|
|
197
|
-
.input-wrapper {
|
|
198
|
-
display: flex;
|
|
199
|
-
align-items: stretch;
|
|
200
|
-
width: 100%;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/*
|
|
204
|
-
* Addon before element - content before input (outside borders)
|
|
205
|
-
* Styled to visually connect with input
|
|
206
|
-
*/
|
|
207
|
-
.input-addon-before {
|
|
208
|
-
background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
|
|
209
|
-
border: var(--nuraly-input-border, var(--nuraly-border));
|
|
210
|
-
border-right: none;
|
|
211
|
-
border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
212
|
-
border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
213
|
-
padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
|
|
214
|
-
display: flex;
|
|
215
|
-
align-items: center;
|
|
216
|
-
color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
|
|
217
|
-
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
218
|
-
white-space: nowrap;
|
|
219
|
-
min-width: 0; /* Allow shrinking */
|
|
220
|
-
flex-shrink: 0; /* Prevent shrinking */
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/*
|
|
224
|
-
* Addon after element - content after input (outside borders)
|
|
225
|
-
* Styled to visually connect with input
|
|
226
|
-
*/
|
|
227
|
-
.input-addon-after {
|
|
228
|
-
background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
|
|
229
|
-
border: var(--nuraly-input-border, var(--nuraly-border));
|
|
230
|
-
border-left: none;
|
|
231
|
-
border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
232
|
-
border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
233
|
-
padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
|
|
234
|
-
display: flex;
|
|
235
|
-
align-items: center;
|
|
236
|
-
color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
|
|
237
|
-
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
238
|
-
white-space: nowrap;
|
|
239
|
-
min-width: 0; /* Allow shrinking */
|
|
240
|
-
flex-shrink: 0; /* Prevent shrinking */
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
/*
|
|
244
|
-
* Input container border radius adjustments when addons are present
|
|
245
|
-
* Removes border radius on sides where addons are attached
|
|
246
|
-
*/
|
|
247
|
-
.input-wrapper:has(.input-addon-before) #input-container {
|
|
248
|
-
border-top-left-radius: 0;
|
|
249
|
-
border-bottom-left-radius: 0;
|
|
250
|
-
border-left: none;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.input-wrapper:has(.input-addon-after) #input-container {
|
|
254
|
-
border-top-right-radius: 0;
|
|
255
|
-
border-bottom-right-radius: 0;
|
|
256
|
-
border-right: none;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
/*
|
|
260
|
-
* Main input container element
|
|
261
|
-
* Uses theme CSS custom properties for comprehensive border and layout control
|
|
262
|
-
*/
|
|
263
|
-
#input-container {
|
|
264
|
-
/* Default outlined style */
|
|
265
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);
|
|
266
|
-
border-radius: var(--nuraly-border-radius-input, 6px);
|
|
267
|
-
|
|
268
|
-
/* Background and text styling */
|
|
269
|
-
background-color: var(--nuraly-color-input-background, #ffffff);
|
|
270
|
-
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));
|
|
271
|
-
font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
|
|
272
|
-
font-size: var(--nuraly-font-size-input, 14px);
|
|
273
|
-
|
|
274
|
-
/* Layout */
|
|
275
|
-
display: flex;
|
|
276
|
-
position: relative;
|
|
277
|
-
flex: 1; /* Take available space in wrapper */
|
|
278
|
-
min-width: 0; /* Allow shrinking below content size */
|
|
279
|
-
|
|
280
|
-
/* Transitions for smooth theme changes */
|
|
281
|
-
transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
/* Carbon Design System override - Carbon specific styles */
|
|
285
|
-
html[data-theme^="carbon"] nr-input #input-container,
|
|
286
|
-
body[data-theme^="carbon"] nr-input #input-container,
|
|
287
|
-
[data-theme^="carbon"] nr-input #input-container,
|
|
288
|
-
.input-wrapper[data-theme^="carbon"] #input-container {
|
|
289
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
|
|
290
|
-
border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
|
|
291
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
292
|
-
background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
|
|
293
|
-
color: var(--nuraly-color-input-text, #161616) !important;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
/* Default theme override - Default specific styles */
|
|
297
|
-
html[data-theme^="default"] nr-input #input-container,
|
|
298
|
-
body[data-theme^="default"] nr-input #input-container,
|
|
299
|
-
[data-theme^="default"] nr-input #input-container,
|
|
300
|
-
.input-wrapper[data-theme^="default"] #input-container {
|
|
301
|
-
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
|
|
302
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
303
|
-
background-color: var(--nuraly-color-input-background, #ffffff) !important;
|
|
304
|
-
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
/* Carbon input element padding override */
|
|
308
|
-
html[data-theme^="carbon"] nr-input #input-container > input,
|
|
309
|
-
body[data-theme^="carbon"] nr-input #input-container > input,
|
|
310
|
-
[data-theme^="carbon"] nr-input #input-container > input,
|
|
311
|
-
.input-wrapper[data-theme^="carbon"] #input-container > input {
|
|
312
|
-
padding: 7px 16px !important;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
/* Default input element padding override */
|
|
316
|
-
html[data-theme^="default"] nr-input #input-container > input,
|
|
317
|
-
body[data-theme^="default"] nr-input #input-container > input,
|
|
318
|
-
[data-theme^="default"] nr-input #input-container > input,
|
|
319
|
-
.input-wrapper[data-theme^="default"] #input-container > input {
|
|
320
|
-
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
/* Focus state for input container */
|
|
324
|
-
#input-container:focus-within {
|
|
325
|
-
border-color: var(--nuraly-color-input-border-focus, #1890ff);
|
|
326
|
-
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
|
|
327
|
-
outline: none;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
/* Carbon focus override */
|
|
331
|
-
html[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
332
|
-
body[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
333
|
-
[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
334
|
-
.input-wrapper[data-theme^="carbon"] #input-container:focus-within {
|
|
335
|
-
border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
|
|
336
|
-
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
337
|
-
box-shadow: var(--nuraly-shadow-input-focus, none) !important;
|
|
338
|
-
outline: none !important;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/* Default focus override */
|
|
342
|
-
html[data-theme^="default"] nr-input #input-container:focus-within,
|
|
343
|
-
body[data-theme^="default"] nr-input #input-container:focus-within,
|
|
344
|
-
[data-theme^="default"] nr-input #input-container:focus-within,
|
|
345
|
-
.input-wrapper[data-theme^="default"] #input-container:focus-within {
|
|
346
|
-
border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
|
|
347
|
-
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
348
|
-
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
|
|
349
|
-
outline: none !important;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
/*
|
|
353
|
-
* Disabled container styles
|
|
354
|
-
* Applied when input is disabled
|
|
355
|
-
*/
|
|
356
|
-
:host([disabled]) #input-container {
|
|
357
|
-
background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);
|
|
358
|
-
border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);
|
|
359
|
-
color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));
|
|
360
|
-
cursor: not-allowed;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/* ========================================
|
|
364
|
-
* INPUT VARIANT STYLES
|
|
365
|
-
* ======================================== */
|
|
366
|
-
|
|
367
|
-
/*
|
|
368
|
-
* Outlined variant - full border around input
|
|
369
|
-
* Default: light border, focus: blue border
|
|
370
|
-
*/
|
|
371
|
-
:host([variant='outlined']) #input-container {
|
|
372
|
-
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
|
|
373
|
-
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
|
|
374
|
-
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
:host([variant='outlined']) .input-wrapper {
|
|
378
|
-
background-color: transparent;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
:host([variant='outlined']:not([state='error'])) #input-container:focus-within {
|
|
382
|
-
border: var(--nuraly-input-outlined-focus-border, var(--nuraly-outlined-focus-border));
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
/*
|
|
386
|
-
* Filled variant - background with bottom border only
|
|
387
|
-
* Subtle background with bottom border indication
|
|
388
|
-
*/
|
|
389
|
-
:host([variant='filled']) #input-container {
|
|
390
|
-
background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
|
|
391
|
-
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
|
|
392
|
-
border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
|
|
393
|
-
border-top: none;
|
|
394
|
-
border-left: none;
|
|
395
|
-
border-right: none;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
:host([variant='filled']) .input-wrapper {
|
|
399
|
-
background-color: transparent;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
:host([variant='filled']:not([state='error'])) #input-container:focus-within {
|
|
403
|
-
border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));
|
|
404
|
-
border-top: none;
|
|
405
|
-
border-left: none;
|
|
406
|
-
border-right: none;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
/*
|
|
410
|
-
* Borderless variant - no borders, focus with outline
|
|
411
|
-
* Clean appearance with focus indication via outline
|
|
412
|
-
*/
|
|
413
|
-
:host([variant='borderless']) #input-container {
|
|
414
|
-
background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));
|
|
415
|
-
border: none;
|
|
416
|
-
border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
:host([variant='borderless']) .input-wrapper {
|
|
420
|
-
background-color: transparent;
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
:host([variant='borderless']:not([state='error'])) #input-container:focus-within {
|
|
424
|
-
outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));
|
|
425
|
-
border: none;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
/*
|
|
429
|
-
* Underlined variant - bottom border only (default/current behavior)
|
|
430
|
-
* Maintains existing behavior as default
|
|
431
|
-
*/
|
|
432
|
-
:host([variant='underlined']) #input-container {
|
|
433
|
-
border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));
|
|
434
|
-
border-top: none;
|
|
435
|
-
border-left: none;
|
|
436
|
-
border-right: none;
|
|
437
|
-
border-radius: 0;
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
:host([variant='underlined']:not([state='error'])) #input-container:focus-within {
|
|
441
|
-
border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));
|
|
442
|
-
border-top: none;
|
|
443
|
-
border-left: none;
|
|
444
|
-
border-right: none;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
/* ========================================
|
|
448
|
-
* INPUT ELEMENT STYLES
|
|
449
|
-
* ======================================== */
|
|
450
|
-
|
|
451
|
-
/*
|
|
452
|
-
* Base input element styling
|
|
453
|
-
* Full width with no default borders, using container for styling
|
|
454
|
-
*/
|
|
455
|
-
input {
|
|
456
|
-
width: 100%;
|
|
457
|
-
border: none;
|
|
458
|
-
outline: none;
|
|
459
|
-
color: var(--nuraly-input-text-color, var(--nuraly-text-color));
|
|
460
|
-
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
461
|
-
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
/* Remove default number input spinners */
|
|
465
|
-
/* Chrome, Safari, Edge, Opera */
|
|
466
|
-
input::-webkit-outer-spin-button,
|
|
467
|
-
input::-webkit-inner-spin-button {
|
|
468
|
-
-webkit-appearance: none;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
/* Firefox */
|
|
472
|
-
input[type='number'] {
|
|
473
|
-
-moz-appearance: textfield;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
/* ========================================
|
|
477
|
-
* STATE STYLES
|
|
478
|
-
* ======================================== */
|
|
479
|
-
|
|
480
|
-
/*
|
|
481
|
-
* Error state styling - works with all variants
|
|
482
|
-
* Applied when state='error' and not disabled
|
|
483
|
-
*/
|
|
484
|
-
:host(:not([disabled])[state='error']) #input-container {
|
|
485
|
-
border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
486
|
-
outline: none !important;
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
/* Override variant-specific error state styling */
|
|
490
|
-
:host([variant='borderless'][state='error']) #input-container {
|
|
491
|
-
border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
492
|
-
outline: none !important;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
:host([variant='underlined'][state='error']) #input-container,
|
|
496
|
-
:host([variant='filled'][state='error']) #input-container {
|
|
497
|
-
border-top: none !important;
|
|
498
|
-
border-left: none !important;
|
|
499
|
-
border-right: none !important;
|
|
500
|
-
border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
/*
|
|
504
|
-
* Number input icon positioning adjustments for error/warning states
|
|
505
|
-
* When validation states are present, adjust icon positioning
|
|
506
|
-
*/
|
|
507
|
-
:host([state='error']) input[type='number'] ~ #number-icons,
|
|
508
|
-
:host([state='warning']) input[type='number'] ~ #number-icons {
|
|
509
|
-
position: static;
|
|
510
|
-
padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
/* ========================================
|
|
514
|
-
* SLOTTED CONTENT STYLES
|
|
515
|
-
* ======================================== */
|
|
516
|
-
|
|
517
|
-
/*
|
|
518
|
-
* Label slot styling
|
|
519
|
-
* Applied to slotted label elements
|
|
520
|
-
*/
|
|
521
|
-
::slotted([slot='label']) {
|
|
522
|
-
color: var(--nuraly-input-label-color, var(--nuraly-label-color));
|
|
523
|
-
font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));
|
|
524
|
-
padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));
|
|
525
|
-
}
|
|
526
|
-
|
|
527
|
-
/*
|
|
528
|
-
* Helper text slot styling
|
|
529
|
-
* Applied to slotted helper text elements
|
|
530
|
-
*/
|
|
531
|
-
::slotted([slot='helper-text']) {
|
|
532
|
-
color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));
|
|
533
|
-
font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));
|
|
534
|
-
padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));
|
|
535
|
-
|
|
536
|
-
/* Prevent text overflow and ensure proper wrapping without affecting parent width */
|
|
537
|
-
word-wrap: break-word;
|
|
538
|
-
word-break: break-word;
|
|
539
|
-
overflow-wrap: break-word;
|
|
540
|
-
hyphens: auto;
|
|
541
|
-
white-space: normal;
|
|
542
|
-
max-width: 100%;
|
|
543
|
-
width: 0;
|
|
544
|
-
min-width: 100%;
|
|
545
|
-
box-sizing: border-box;
|
|
546
|
-
line-height: 1.4;
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
/*
|
|
550
|
-
* State-specific helper text colors
|
|
551
|
-
* Override helper text color based on validation state
|
|
552
|
-
*/
|
|
553
|
-
:host([state='error']) ::slotted([slot='helper-text']) {
|
|
554
|
-
color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
:host([state='warning']) ::slotted([slot='helper-text']) {
|
|
558
|
-
color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
/*
|
|
562
|
-
* Disabled state for slotted content
|
|
563
|
-
* Applied when input is disabled
|
|
564
|
-
*/
|
|
565
|
-
:host([disabled]) ::slotted([slot='helper-text']) {
|
|
566
|
-
color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
:host([disabled]) ::slotted([slot='label']) {
|
|
570
|
-
color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
/*
|
|
574
|
-
* Input prefix wrapper styling
|
|
575
|
-
* Centers the prefix content vertically and horizontally
|
|
576
|
-
*/
|
|
577
|
-
.input-prefix {
|
|
578
|
-
display: flex;
|
|
579
|
-
align-items: center;
|
|
580
|
-
justify-content: center;
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
/*
|
|
584
|
-
* Prefix slot styling
|
|
585
|
-
* Applied to slotted prefix content (icons, text, etc.)
|
|
586
|
-
*/
|
|
587
|
-
::slotted([slot='prefix']) {
|
|
588
|
-
display: flex;
|
|
589
|
-
align-items: center;
|
|
590
|
-
padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));
|
|
591
|
-
color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));
|
|
592
|
-
font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));
|
|
593
|
-
flex-shrink: 0;
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
/*
|
|
597
|
-
* Input suffix wrapper styling
|
|
598
|
-
* Centers the suffix content vertically and horizontally
|
|
599
|
-
*/
|
|
600
|
-
.input-suffix {
|
|
601
|
-
display: flex;
|
|
602
|
-
align-items: center;
|
|
603
|
-
justify-content: center;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
/*
|
|
607
|
-
* Suffix slot styling
|
|
608
|
-
* Applied to slotted suffix content (icons, text, etc.)
|
|
609
|
-
*/
|
|
610
|
-
::slotted([slot='suffix']) {
|
|
611
|
-
display: flex;
|
|
612
|
-
align-items: center;
|
|
613
|
-
padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));
|
|
614
|
-
color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));
|
|
615
|
-
font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));
|
|
616
|
-
flex-shrink: 0;
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
/*
|
|
620
|
-
* Disabled state for prefix and suffix slots
|
|
621
|
-
* Applied when input is disabled
|
|
622
|
-
*/
|
|
623
|
-
:host([disabled]) ::slotted([slot='prefix']),
|
|
624
|
-
:host([disabled]) ::slotted([slot='suffix']) {
|
|
625
|
-
opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
|
|
626
|
-
color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));
|
|
627
|
-
}
|
|
628
|
-
`,t`
|
|
629
|
-
/* ========================================
|
|
630
|
-
* SIZE VARIATIONS
|
|
631
|
-
* ======================================== */
|
|
632
|
-
|
|
633
|
-
/* Large input size variant */
|
|
634
|
-
div[data-size='large'] {
|
|
635
|
-
padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));
|
|
636
|
-
padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));
|
|
637
|
-
padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));
|
|
638
|
-
padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
/* Medium input size variant (default) */
|
|
642
|
-
div[data-size='medium'] {
|
|
643
|
-
padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));
|
|
644
|
-
padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));
|
|
645
|
-
padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));
|
|
646
|
-
padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
/* Small input size variant */
|
|
650
|
-
div[data-size='small'] {
|
|
651
|
-
padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));
|
|
652
|
-
padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));
|
|
653
|
-
padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));
|
|
654
|
-
padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
/* Carbon Design System - Size-specific padding overrides */
|
|
658
|
-
html[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
659
|
-
body[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
660
|
-
[data-theme^="carbon"] div[data-size='medium'] {
|
|
661
|
-
padding: 4px 8px !important;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
/*
|
|
665
|
-
* Character count display
|
|
666
|
-
* Shows character count and limit information
|
|
667
|
-
*/
|
|
668
|
-
.character-count {
|
|
669
|
-
font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));
|
|
670
|
-
color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));
|
|
671
|
-
text-align: right;
|
|
672
|
-
margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));
|
|
673
|
-
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
/* Character count over limit styling */
|
|
677
|
-
.character-count[data-over-limit] {
|
|
678
|
-
color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
/* ========================================
|
|
682
|
-
* VALIDATION MESSAGE STYLES
|
|
683
|
-
* ======================================== */
|
|
684
|
-
|
|
685
|
-
/*
|
|
686
|
-
* Base validation message styling
|
|
687
|
-
* Common styles for error and warning messages
|
|
688
|
-
*/
|
|
689
|
-
.validation-message {
|
|
690
|
-
font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));
|
|
691
|
-
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
692
|
-
margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));
|
|
693
|
-
padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));
|
|
694
|
-
|
|
695
|
-
/* Prevent text overflow and ensure proper wrapping without affecting parent width */
|
|
696
|
-
word-wrap: break-word;
|
|
697
|
-
word-break: break-word;
|
|
698
|
-
overflow-wrap: break-word;
|
|
699
|
-
hyphens: auto;
|
|
700
|
-
white-space: normal;
|
|
701
|
-
max-width: 100%;
|
|
702
|
-
width: 0;
|
|
703
|
-
min-width: 100%;
|
|
704
|
-
box-sizing: border-box;
|
|
705
|
-
line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
/*
|
|
709
|
-
* Error validation message styling
|
|
710
|
-
* Applied when validation message has error class
|
|
711
|
-
*/
|
|
712
|
-
.validation-message.error {
|
|
713
|
-
color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));
|
|
714
|
-
}
|
|
715
|
-
|
|
716
|
-
/*
|
|
717
|
-
* Warning validation message styling
|
|
718
|
-
* Applied when validation message has warning class
|
|
719
|
-
*/
|
|
720
|
-
.validation-message.warning {
|
|
721
|
-
color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
/*
|
|
725
|
-
* Disabled state for validation messages
|
|
726
|
-
* Applied when input is disabled
|
|
727
|
-
*/
|
|
728
|
-
:host([disabled]) .validation-message {
|
|
729
|
-
opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));
|
|
730
|
-
color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));
|
|
731
|
-
}
|
|
732
|
-
|
|
733
|
-
/*
|
|
734
|
-
* Validation icon styles
|
|
735
|
-
* Base styles for validation feedback icons
|
|
736
|
-
*/
|
|
737
|
-
.validation-icon {
|
|
738
|
-
width: 16px;
|
|
739
|
-
height: 16px;
|
|
740
|
-
display: inline-flex;
|
|
741
|
-
align-items: center;
|
|
742
|
-
justify-content: center;
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
/*
|
|
746
|
-
* Loading validation icon with hourglass animation
|
|
747
|
-
* Applied when async validation is in progress
|
|
748
|
-
*/
|
|
749
|
-
.validation-icon.validation-loading {
|
|
750
|
-
color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));
|
|
751
|
-
animation: validation-hourglass 2s ease-in-out infinite;
|
|
752
|
-
transform-origin: center;
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
/*
|
|
756
|
-
* Error validation icon styling
|
|
757
|
-
* Applied when validation fails
|
|
758
|
-
*/
|
|
759
|
-
.validation-icon.validation-error {
|
|
760
|
-
color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
/*
|
|
764
|
-
* Warning validation icon styling
|
|
765
|
-
* Applied when validation has warnings
|
|
766
|
-
*/
|
|
767
|
-
.validation-icon.validation-warning {
|
|
768
|
-
color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
/*
|
|
772
|
-
* Success validation icon styling
|
|
773
|
-
* Applied when validation passes
|
|
774
|
-
*/
|
|
775
|
-
.validation-icon.validation-success {
|
|
776
|
-
color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));
|
|
777
|
-
}
|
|
778
|
-
|
|
779
|
-
/*
|
|
780
|
-
* Hourglass animation for validation loading
|
|
781
|
-
* Gentle pulsing effect without rotation for clean appearance
|
|
782
|
-
*/
|
|
783
|
-
@keyframes validation-hourglass {
|
|
784
|
-
0% {
|
|
785
|
-
opacity: 0.7;
|
|
786
|
-
transform: scale(1);
|
|
787
|
-
}
|
|
788
|
-
25% {
|
|
789
|
-
opacity: 1;
|
|
790
|
-
transform: scale(1.03);
|
|
791
|
-
}
|
|
792
|
-
50% {
|
|
793
|
-
opacity: 0.8;
|
|
794
|
-
transform: scale(1);
|
|
795
|
-
}
|
|
796
|
-
75% {
|
|
797
|
-
opacity: 1;
|
|
798
|
-
transform: scale(1.03);
|
|
799
|
-
}
|
|
800
|
-
100% {
|
|
801
|
-
opacity: 0.7;
|
|
802
|
-
transform: scale(1);
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
|
|
806
|
-
/*
|
|
807
|
-
* Alternative pulse animation option
|
|
808
|
-
* Uncomment this and change animation above to use pulse instead of hourglass
|
|
809
|
-
*/
|
|
810
|
-
/*
|
|
811
|
-
@keyframes validation-pulse {
|
|
812
|
-
0%, 100% {
|
|
813
|
-
opacity: 1;
|
|
814
|
-
transform: scale(1);
|
|
815
|
-
}
|
|
816
|
-
50% {
|
|
817
|
-
opacity: 0.7;
|
|
818
|
-
transform: scale(1.1);
|
|
819
|
-
}
|
|
820
|
-
}
|
|
821
|
-
*/
|
|
822
|
-
`],p={EMAIL:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,URL:/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,PHONE:/^[\+]?[1-9][\d]{0,15}$/,PASSWORD_STRONG:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,ALPHANUMERIC:/^[a-zA-Z0-9]+$/,NUMERIC:/^\d+$/,ALPHA:/^[a-zA-Z]+$/,USERNAME:/^[a-zA-Z0-9_-]{3,16}$/,HEX_COLOR:/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,IPV4:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,CREDIT_CARD:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/},h=t=>({required:!0,message:t||"This field is required"}),m=t=>({type:"email",pattern:p.EMAIL,message:t||"Please enter a valid email address"}),b=t=>({type:"url",pattern:p.URL,message:t||"Please enter a valid URL"}),v=(t,r)=>({maxLength:t,message:r||`Maximum length is ${t} characters`}),y=(t,r)=>({type:"number",min:t,message:r||`Minimum value is ${t}`}),g=(t,r)=>({type:"number",max:t,message:r||`Maximum value is ${t}`});
|
|
823
|
-
/**
|
|
824
|
-
* @license
|
|
825
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
826
|
-
* SPDX-License-Identifier: MIT
|
|
827
|
-
*/
|
|
828
|
-
class f{static validateNumericProperties(t,r,e,i){"number"===t&&(r&&isNaN(Number(r))&&console.warn(`Invalid min value: "${r}" is not a valid number`),e&&isNaN(Number(e))&&console.warn(`Invalid max value: "${e}" is not a valid number`),i&&isNaN(Number(i))&&console.warn(`Invalid step value: "${i}" is not a valid number`),r&&e&&Number(r)>=Number(e)&&console.warn(`Invalid range: min value (${r}) should be less than max value (${e})`))}static preventNonNumericInput(t,r){const e=t.key,i=t.target,o=i.value,n=i.selectionStart||0;if(!(t.ctrlKey||t.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e)||/^\d$/.test(e))){if("."===e||","===e){if(!(o.includes(".")||o.includes(",")))return}if("-"===e){const t=o.includes("-"),e=!r||Number(r)<0;if(!t&&0===n&&e)return}if("+"===e){if(!o.includes("+")&&0===n)return}t.preventDefault()}}static validateNumericValue(t,r,e){const i=[];if(!t)return{isValid:!0,warnings:i};const o=Number(t);return isNaN(o)?{isValid:!1,warnings:[`Invalid numeric value: "${t}"`]}:(r&&o<Number(r)&&i.push(`Value ${o} is below minimum ${r}`),e&&o>Number(e)&&i.push(`Value ${o} is above maximum ${e}`),{isValid:!0,warnings:i})}}
|
|
829
|
-
/**
|
|
830
|
-
* @license
|
|
831
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
832
|
-
* SPDX-License-Identifier: MIT
|
|
833
|
-
*/class k{static renderPrefix(){return r`
|
|
834
|
-
<div class="input-prefix">
|
|
835
|
-
<slot name="prefix"></slot>
|
|
836
|
-
</div>
|
|
837
|
-
`}static renderSuffix(){return r`
|
|
838
|
-
<div class="input-suffix">
|
|
839
|
-
<slot name="suffix"></slot>
|
|
840
|
-
</div>
|
|
841
|
-
`}static renderAddonBefore(t,i){return t?r`
|
|
842
|
-
<div class="input-addon-before">
|
|
843
|
-
<slot name="addon-before" @slotchange=${i}></slot>
|
|
844
|
-
</div>
|
|
845
|
-
`:e}static renderAddonAfter(t,i){return t?r`
|
|
846
|
-
<div class="input-addon-after">
|
|
847
|
-
<slot name="addon-after" @slotchange=${i}></slot>
|
|
848
|
-
</div>
|
|
849
|
-
`:e}static renderCopyIcon(t,i,o,n,a){return t?r`<nr-icon
|
|
850
|
-
name="copy"
|
|
851
|
-
type="regular"
|
|
852
|
-
id="copy-icon"
|
|
853
|
-
role="button"
|
|
854
|
-
aria-label="Copy input value"
|
|
855
|
-
tabindex="0"
|
|
856
|
-
@click=${i||o?e:n}
|
|
857
|
-
@keydown=${a}
|
|
858
|
-
></nr-icon>`:e}static renderClearIcon(t,i,o,n,a,s){return!t||!i||o||n?e:r`<nr-icon
|
|
859
|
-
name="times-circle"
|
|
860
|
-
type="regular"
|
|
861
|
-
id="clear-icon"
|
|
862
|
-
role="button"
|
|
863
|
-
aria-label="Clear input value"
|
|
864
|
-
tabindex="0"
|
|
865
|
-
@click=${a}
|
|
866
|
-
@keydown=${s}
|
|
867
|
-
></nr-icon>`}static renderStateIcon(t){switch(t){case"warning":return r`<nr-icon name="warning" id="warning-icon"></nr-icon>`;case"error":return r`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;default:return e}}static renderCalendarIcon(t,i){return"default"!==t||"calendar"!==i?e:r`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`}static renderPasswordIcon(t,i,o,n,a,s){return"password"!==t?e:"text"===i?r`<nr-icon
|
|
868
|
-
name="eye-slash"
|
|
869
|
-
type="regular"
|
|
870
|
-
id="password-icon"
|
|
871
|
-
role="button"
|
|
872
|
-
aria-label="Hide password"
|
|
873
|
-
tabindex="0"
|
|
874
|
-
@click=${o||n?e:a}
|
|
875
|
-
@keydown=${s}
|
|
876
|
-
></nr-icon>`:r`<nr-icon
|
|
877
|
-
name="eye"
|
|
878
|
-
type="regular"
|
|
879
|
-
id="password-icon"
|
|
880
|
-
role="button"
|
|
881
|
-
aria-label="Show password"
|
|
882
|
-
tabindex="0"
|
|
883
|
-
@click=${o||n?e:a}
|
|
884
|
-
@keydown=${s}
|
|
885
|
-
></nr-icon>`}static renderNumberIcons(t,i,o,n,a,s,l){return"number"!==t?e:r`
|
|
886
|
-
<div id="number-icons">
|
|
887
|
-
${"default"!==i?r`<span id="icons-separator">|</span>`:e}
|
|
888
|
-
<nr-icon
|
|
889
|
-
name="minus"
|
|
890
|
-
aria-label="Decrease value"
|
|
891
|
-
role="button"
|
|
892
|
-
tabindex="0"
|
|
893
|
-
@click=${o||n?e:s}
|
|
894
|
-
@keydown=${l}
|
|
895
|
-
></nr-icon>
|
|
896
|
-
<span id="icons-separator">|</span>
|
|
897
|
-
<nr-icon
|
|
898
|
-
name="plus"
|
|
899
|
-
aria-label="Increase value"
|
|
900
|
-
role="button"
|
|
901
|
-
tabindex="0"
|
|
902
|
-
@click=${o||n?e:a}
|
|
903
|
-
@keydown=${l}
|
|
904
|
-
></nr-icon>
|
|
905
|
-
</div>
|
|
906
|
-
`}}
|
|
1
|
+
import{css as e,LitElement as i,html as t,nothing as r}from"lit";import{property as o,state as a,customElement as c}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";import{SharedDropdownController as s}from"@nuralyui/common/controllers";
|
|
907
2
|
/**
|
|
908
3
|
* @license
|
|
909
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
910
5
|
* SPDX-License-Identifier: MIT
|
|
911
|
-
*/
|
|
6
|
+
*/var p,m,u,d,h,k,b,v;!function(e){e.TwentyFourHour="24h",e.TwelveHour="12h"}(p||(p={})),function(e){e.Hours="hours",e.Minutes="minutes",e.Seconds="seconds"}(m||(m={})),function(e){e.Small="small",e.Medium="medium",e.Large="large"}(u||(u={})),function(e){e.Default="default",e.Outlined="outlined",e.Filled="filled"}(d||(d={})),function(e){e.Default="default",e.Error="error",e.Warning="warning",e.Success="success"}(h||(h={})),function(e){e.Bottom="bottom",e.Top="top",e.Auto="auto"}(k||(k={})),function(e){e[e.One=1]="One",e[e.Five=5]="Five",e[e.Ten=10]="Ten",e[e.Fifteen=15]="Fifteen",e[e.Thirty=30]="Thirty"}(b||(b={})),function(e){e.AM="AM",e.PM="PM"}(v||(v={}));const y={[p.TwentyFourHour]:"HH:mm",[p.TwelveHour]:"hh:mm A"},f={[p.TwentyFourHour]:"HH:mm:ss",[p.TwelveHour]:"hh:mm:ss A"},g={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},_={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},x={hours:0,minutes:0,seconds:0,period:v.AM},w={format:p.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},T="HH:mm",S="HH:mm:ss",$="hh:mm A",M="hh:mm:ss A",C="time-input-field",E="time-picker-clock-container",O={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},H={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},z={HOURS:b.One,MINUTES:b.One,SECONDS:b.One},I={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},A={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
|
|
912
7
|
/**
|
|
913
8
|
* @license
|
|
914
9
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
915
10
|
* SPDX-License-Identifier: MIT
|
|
916
11
|
*/
|
|
12
|
+
class N{static createTimeValue(e,i,t=0,r){return{hours:Math.max(0,Math.min(e,23)),minutes:Math.max(0,Math.min(i,59)),seconds:Math.max(0,Math.min(t,59)),period:r}}static parseTimeString(e,i=p.TwentyFourHour){if(!(null==e?void 0:e.trim()))return null;const t=e.trim().toUpperCase();return i===p.TwelveHour?this.parse12HourTime(t):this.parse24HourTime(t)}static parse24HourTime(e){const i=e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!i)return null;const t=parseInt(i[1],10),r=parseInt(i[2],10),o=i[3]?parseInt(i[3],10):0;return this.isValidTime24(t,r,o)?this.createTimeValue(t,r,o):null}static parse12HourTime(e){const i=e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);if(!i)return null;let t=parseInt(i[1],10);const r=parseInt(i[2],10),o=i[3]?parseInt(i[3],10):0,a=i[4];return this.isValidTime12(t,r,o)?(a===v.PM&&12!==t?t+=12:a===v.AM&&12===t&&(t=0),this.createTimeValue(t,r,o,a)):null}static formatTimeValue(e,i=p.TwentyFourHour,t=!1){return e?i===p.TwelveHour?this.format12HourTime(e,t):this.format24HourTime(e,t):""}static format24HourTime(e,i){const t=e.hours.toString().padStart(2,"0"),r=e.minutes.toString().padStart(2,"0");if(i){return`${t}:${r}:${e.seconds.toString().padStart(2,"0")}`}return`${t}:${r}`}static format12HourTime(e,i){let t=e.hours;const r=e.minutes.toString().padStart(2,"0"),o=t>=12?v.PM:v.AM;0===t?t=12:t>12&&(t-=12);const a=t.toString();if(i){return`${a}:${r}:${e.seconds.toString().padStart(2,"0")} ${o}`}return`${a}:${r} ${o}`}static getCurrentTime(){const e=new Date;return this.createTimeValue(e.getHours(),e.getMinutes(),e.getSeconds())}static compareTime(e,i){return 3600*e.hours+60*e.minutes+e.seconds-(3600*i.hours+60*i.minutes+i.seconds)}static isTimeEqual(e,i){return 0===this.compareTime(e,i)}static isValidTime24(e,i,t=0){return e>=H.MIN_HOUR_24&&e<=H.MAX_HOUR_24&&i>=H.MIN_MINUTE&&i<=H.MAX_MINUTE&&t>=H.MIN_SECOND&&t<=H.MAX_SECOND}static isValidTime12(e,i,t=0){return e>=H.MIN_HOUR_12&&e<=H.MAX_HOUR_12&&i>=H.MIN_MINUTE&&i<=H.MAX_MINUTE&&t>=H.MIN_SECOND&&t<=H.MAX_SECOND}static addTime(e,i,t,r=0){let o=3600*e.hours+60*e.minutes+e.seconds;o+=3600*i+60*t+r,o=(o%86400+86400)%86400;const a=Math.floor(o/3600),c=Math.floor(o%3600/60),l=o%60;return this.createTimeValue(a,c,l)}static generateTimeOptions(e=15,i=p.TwentyFourHour,t=!1){const r=[];for(let o=0;o<24;o++)for(let a=0;a<60;a+=e){const e=this.createTimeValue(o,a,0),c=this.formatTimeValue(e,i,t);r.push({value:c,label:c})}return r}static roundToInterval(e,i){const t=60*e.hours+e.minutes,r=Math.round(t/i)*i,o=Math.floor(r/60)%24,a=r%60;return this.createTimeValue(o,a,e.seconds)}static isTimeInRange(e,i,t){return!(i&&this.compareTime(e,i)<0)&&!(t&&this.compareTime(e,t)>0)}static dateToTimeValue(e){return this.createTimeValue(e.getHours(),e.getMinutes(),e.getSeconds())}static timeValueToDate(e,i){const t=i?new Date(i):new Date;return t.setHours(e.hours,e.minutes,e.seconds,0),t}}
|
|
917
13
|
/**
|
|
918
14
|
* @license
|
|
919
15
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
920
16
|
* SPDX-License-Identifier: MIT
|
|
921
|
-
*/
|
|
922
|
-
class ${constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(t){return this._host.dispatchEvent(t)}handleError(t,r){console.error(`[InputController:${r}]`,t),this.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t,context:r,controller:this.constructor.name},bubbles:!0,composed:!0}))}}
|
|
17
|
+
*/class D{constructor(e){this.host=e,this.selectedTime=null}selectTime(e){if(!this.host.validateTime(e))return;const i=this.selectedTime;this.selectedTime=Object.assign({},e),this.dispatchTimeChangeEvent(e,i),this.host.requestUpdate()}getSelectedTime(){return this.selectedTime?Object.assign({},this.selectedTime):null}clearSelection(){const e=this.selectedTime;this.selectedTime=null,e&&(this.dispatchTimeChangeEvent(null,e),this.host.requestUpdate())}isTimeSelected(e){return!!this.selectedTime&&N.isTimeEqual(e,this.selectedTime)}setTimeInternal(e){this.selectedTime=e?Object.assign({},e):null}updateTime(e){if(this.selectedTime)this.selectedTime=Object.assign(Object.assign({},this.selectedTime),e);else{const i=N.getCurrentTime();this.selectedTime=Object.assign(Object.assign({},i),e)}this.host.validateTime(this.selectedTime)&&(this.dispatchTimeChangeEvent(this.selectedTime,null),this.host.requestUpdate())}incrementTime(e,i=1){let t;switch(this.selectedTime||(this.selectedTime=N.getCurrentTime()),e){case"hours":t=N.addTime(this.selectedTime,i,0,0);break;case"minutes":t=N.addTime(this.selectedTime,0,i,0);break;case"seconds":t=N.addTime(this.selectedTime,0,0,i);break;default:return}this.selectTime(t)}decrementTime(e,i=1){this.incrementTime(e,-i)}setTimeFromString(e){const i=this.host.getConfig(),t=N.parseTimeString(e,i.format);return!(!t||!this.host.validateTime(t))&&(this.selectTime(t),!0)}getFormattedTime(){return this.selectedTime?this.host.formatTime(this.selectedTime):""}dispatchTimeChangeEvent(e,i){const t=this.host;if(!t.dispatchEvent)return;const r={value:e?this.host.formatTime(e):"",timeValue:e,previousValue:i?this.host.formatTime(i):"",previousTimeValue:i},o=new CustomEvent(_.TIME_CHANGE,{detail:r,bubbles:!0,composed:!0});t.dispatchEvent(o)}reset(){this.clearSelection()}setToCurrentTime(){const e=N.getCurrentTime();this.selectTime(e)}roundToInterval(e){if(!this.selectedTime)return;const i=N.roundToInterval(this.selectedTime,e);this.selectTime(i)}}
|
|
923
18
|
/**
|
|
924
19
|
* @license
|
|
925
20
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
926
21
|
* SPDX-License-Identifier: MIT
|
|
927
|
-
*/
|
|
22
|
+
*/class j{constructor(e){this.host=e,this.constraints={}}setConstraints(e){this.constraints=Object.assign({},e)}getConstraints(){return Object.assign({},this.constraints)}validateConstraints(e){return this.isTimeInBounds(e)&&!this.isTimeDisabled(e)&&this.isTimeEnabled(e)}isTimeInBounds(e){let i=null,t=null;if(this.constraints.minTime){const e=this.host.getConfig();i=N.parseTimeString(this.constraints.minTime,e.format)}if(this.constraints.maxTime){const e=this.host.getConfig();t=N.parseTimeString(this.constraints.maxTime,e.format)}return N.isTimeInRange(e,i,t)}isTimeDisabled(e){if(!this.constraints.disabledTimes||0===this.constraints.disabledTimes.length)return!1;const i=this.host.formatTime(e);return this.constraints.disabledTimes.includes(i)}isTimeEnabled(e){if(!this.constraints.enabledTimes||0===this.constraints.enabledTimes.length)return!0;const i=this.host.formatTime(e);return this.constraints.enabledTimes.includes(i)}getValidationMessage(e){return this.isTimeInBounds(e)?this.isTimeDisabled(e)?"This time is not available":this.isTimeEnabled(e)?"":"This time is not in the allowed time range":this.getBoundsValidationMessage(e)}getBoundsValidationMessage(e){const i=this.host.getConfig();let t="";if(this.constraints.minTime&&this.constraints.maxTime)t=`Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;else if(this.constraints.minTime){const r=N.parseTimeString(this.constraints.minTime,i.format);r&&N.compareTime(e,r)<0&&(t=`Time must be after ${this.constraints.minTime}`)}else if(this.constraints.maxTime){const r=N.parseTimeString(this.constraints.maxTime,i.format);r&&N.compareTime(e,r)>0&&(t=`Time must be before ${this.constraints.maxTime}`)}return t}validateTimeFormat(e){const i=this.host.getConfig();return null!==N.parseTimeString(e,i.format)}getValidationResult(e){const i=[];return this.isTimeInBounds(e)||i.push(this.getBoundsValidationMessage(e)),this.isTimeDisabled(e)&&i.push("This time is disabled"),this.isTimeEnabled(e)||i.push("This time is not in the allowed range"),{isValid:0===i.length,message:i.length>0?i[0]:"",errors:i}}findNearestValidTime(e){if(this.validateConstraints(e))return e;for(let i=1;i<=60;i++){const t=N.addTime(e,0,i,0);if(this.validateConstraints(t))return t;const r=N.addTime(e,0,-i,0);if(this.validateConstraints(r))return r}return null}isCurrentSelectionValid(){const e=this.host.getCurrentTime();return this.validateConstraints(e)}setMinTime(e){this.constraints.minTime=e||void 0}setMaxTime(e){this.constraints.maxTime=e||void 0}setDisabledTimes(e){this.constraints.disabledTimes=[...e]}setEnabledTimes(e){this.constraints.enabledTimes=[...e]}clearConstraints(){this.constraints={}}}
|
|
928
23
|
/**
|
|
929
24
|
* @license
|
|
930
25
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
931
26
|
* SPDX-License-Identifier: MIT
|
|
932
|
-
*/var z=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};class E extends ${constructor(t){super(t),this.stateController=new T(this._host)}get validationHost(){return this._host}get isValid(){return this.stateController.isValid}get validationMessage(){return this.stateController.validationMessage}get validationState(){return this.stateController.validationState}get validationResult(){return this.stateController.validationResult}get isValidating(){return this.stateController.isValidating}hostConnected(){this.setupValidationRules()}hostUpdated(){}setupValidationRules(){const t=[],r=this.validationHost;"email"===r.type&&t.push(m()),"url"===r.type&&t.push(b()),r.required&&t.push(h(r.label?`${r.label} is required`:void 0)),r.maxLength&&t.push(v(r.maxLength)),"number"===r.type&&(void 0!==r.min&&t.push(y(Number(r.min))),void 0!==r.max&&t.push(g(Number(r.max))));const e=r.rules||[],i=[...t.filter((t=>!e.some((r=>this.isSameRuleType(t,r))))),...e];JSON.stringify(r.rules)!==JSON.stringify(i)&&(r.rules=i,this.requestUpdate())}validate(){try{this.stateController.setValidationState(S.Pending),this.stateController.setValidating(!0),this.dispatchValidationEvent();if(this.hasAsyncValidators())return this.performAsyncValidation(this.validationHost.value),!0;const t=this.performDetailedValidation(this.validationHost.value);return this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):t.hasWarning&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):this.setValidationResult(!0,"",S.Valid),this.stateController.setValidating(!1),this.updateHostValidationState(),t.isValid}catch(t){return this.handleError(t,"validate"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Validation error occurred",S.Invalid),this.updateHostValidationState(),!1}}validateOnChange(){this.stateController.shouldValidateOnChange()&&this.stateController.debounceValidation((()=>{this.validate()}))}validateOnBlur(){this.stateController.shouldValidateOnBlur()&&(this.stateController.clearDebounceTimer(),this.validate())}addRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=[...r,t],this.requestUpdate()}removeRule(t){const r=this.validationHost.rules||[];this.validationHost.rules=r.filter((r=>!t(r))),this.requestUpdate()}clearRules(){this.validationHost.rules=[],this.reset()}hasAsyncValidators(){return(this.validationHost.rules||[]).some((t=>t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator)))}isValidatorAsync(t){const r=t.toString();return r.includes("Promise")||r.includes("async")||r.includes("setTimeout")||r.includes("new Promise")}performAsyncValidation(t){return z(this,void 0,void 0,(function*(){try{this.stateController.setValidating(!0),this.updateHostValidationState();const r=[],e=[],i=this.validationHost.rules||[];for(const o of i)if(!(o.asyncValidator||o.validator&&this.isValidatorAsync(o.validator))){const i=this.validateRule(o,t);i.isValid||(o.warningOnly&&this.validationHost.allowWarnings?e.push(i.message):r.push(i.message))}if(r.length>0)return this.stateController.setValidationResult({isValid:!1,errors:r,warnings:e,hasError:!0,hasWarning:e.length>0,errorMessage:r[0],warningMessage:e[0]}),this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid),this.stateController.setValidating(!1),void this.updateHostValidationState();for(const o of i)if(o.asyncValidator||o.validator&&this.isValidatorAsync(o.validator))try{yield this.validateAsyncRule(o,t)}catch(t){const i=t.message||o.message||"Validation failed";o.warningOnly&&this.validationHost.allowWarnings?e.push(i):r.push(i)}const o=r.length>0,n=e.length>0;this.stateController.setValidationResult({isValid:!o,errors:r,warnings:e,hasError:o,hasWarning:n,errorMessage:r[0],warningMessage:e[0]}),o?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):n&&this.validationHost.allowWarnings?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):this.setValidationResult(!0,"",S.Valid),this.stateController.setValidating(!1),this.updateHostValidationState()}catch(t){this.handleError(t,"performAsyncValidation"),this.stateController.setValidating(!1),this.setValidationResult(!1,"Async validation error occurred",S.Invalid),this.updateHostValidationState()}}))}validateAsyncRule(t,r){return z(this,void 0,void 0,(function*(){if(t.asyncValidator)yield t.asyncValidator(t,r);else if(t.validator){const e=t.validator(t,r);e&&"object"==typeof e&&"then"in e&&(yield e)}}))}reset(){this.stateController.setValidationResult({isValid:!0,errors:[],warnings:[],hasError:!1,hasWarning:!1}),this.stateController.setValidationState(S.Pristine),this.stateController.setValidating(!1),this.updateHostValidationState(),this.dispatchValidationEvent()}getValidationStatus(){return{isValid:this.stateController.validationResult.isValid,isValidating:this.stateController.isValidating,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult}}setValidationStatus(t){this.stateController.setValidationResult(t),t.hasError?this.setValidationResult(!1,this.stateController.validationMessage,S.Invalid):t.hasWarning?this.setValidationResult(!0,this.stateController.validationMessage,S.Warning):t.isValid?this.setValidationResult(!0,"",S.Valid):this.setValidationResult(!0,"",S.Pristine),this.updateHostValidationState()}performDetailedValidation(t){const r=[],e=[],i=this.validationHost.rules||[];for(const o of i){const i=this.validateRule(o,t);i.isValid||(o.warningOnly&&this.validationHost.allowWarnings?e.push(i.message):r.push(i.message))}const o=r.length>0;return{isValid:!o,errors:r,warnings:e,hasError:o,hasWarning:e.length>0,errorMessage:r[0],warningMessage:e[0]}}validateRule(t,r){if(t.asyncValidator||t.validator&&this.isValidatorAsync(t.validator))return{isValid:!0,message:""};const e=t.transform?t.transform(r):r;if(t.required&&this.isValueEmpty(r))return{isValid:!1,message:t.message||`${this.validationHost.label||"This field"} is required`};if(this.isValueEmpty(r)&&!t.required)return{isValid:!0,message:""};if(t.type){const r=this.validateType(t.type,e);if(!r.isValid)return{isValid:!1,message:t.message||r.message}}if(t.pattern&&!t.pattern.test(e))return{isValid:!1,message:t.message||"Invalid format"};if(void 0!==t.minLength&&e.length<t.minLength)return{isValid:!1,message:t.message||`Minimum length is ${t.minLength} characters`};if(void 0!==t.maxLength&&e.length>t.maxLength)return{isValid:!1,message:t.message||`Maximum length is ${t.maxLength} characters`};if("number"===t.type||"number"===this.validationHost.type){const r=Number(e);if(void 0!==t.min&&r<t.min)return{isValid:!1,message:t.message||`Minimum value is ${t.min}`};if(void 0!==t.max&&r>t.max)return{isValid:!1,message:t.message||`Maximum value is ${t.max}`}}if(t.enum&&!t.enum.includes(e))return{isValid:!1,message:t.message||`Value must be one of: ${t.enum.join(", ")}`};if(t.validator)try{const r=t.validator(t,e);return r&&"object"==typeof r&&"isValid"in r?{isValid:r.isValid,message:r.isValid?"":r.message||t.message||"Validation failed"}:{isValid:!0,message:""}}catch(r){return{isValid:!1,message:t.message||r.message||"Validation failed"}}return{isValid:!0,message:""}}validateType(t,r){switch(t){case"email":return{isValid:p.EMAIL.test(r),message:"Please enter a valid email address"};case"url":return{isValid:p.URL.test(r),message:"Please enter a valid URL"};case"number":case"integer":return{isValid:!isNaN(Number(r))&&("number"===t||Number.isInteger(Number(r))),message:`Please enter a valid ${t}`};case"float":return{isValid:!isNaN(parseFloat(r)),message:"Please enter a valid number"};default:return{isValid:!0,message:""}}}isValueEmpty(t){return null==t||""===t}isSameRuleType(t,r){return t.type===r.type&&t.required===r.required&&!!t.pattern==!!r.pattern}setValidationResult(t,r,e){const i=this.stateController.isValid!==t||this.stateController.validationMessage!==r||this.stateController.validationState!==e;this.stateController.setValidationState(e),this.stateController.setValidationResult({isValid:t,errors:t?[]:[r],warnings:[],hasError:!t,hasWarning:!1,errorMessage:t?"":r,warningMessage:""}),i&&this.dispatchValidationEvent()}updateHostValidationState(){this.dispatchValidationEvent()}dispatchValidationEvent(){const t={isValid:this.stateController.isValid,validationMessage:this.stateController.validationMessage,validationState:this.stateController.validationState,errors:this.stateController.validationResult.errors,warnings:this.stateController.validationResult.warnings,validationResult:this.stateController.validationResult};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}getValidationClasses(){const t=this.host,r=this.host;return{valid:this.stateController.validationResult.isValid&&!this.stateController.validationResult.hasWarning,invalid:this.stateController.validationResult.hasError,warning:this.stateController.validationResult.hasWarning&&!this.stateController.validationResult.hasError,validating:this.stateController.isValidating,"has-feedback":r.hasFeedback||!1,touched:t.isTouched||!1,dirty:t.isDirty||!1,required:this.host.required||!1}}hasValidationFeedback(){const t=this.host;return!!t.hasFeedback&&(this.stateController.isValidating||this.stateController.validationResult.hasError||this.stateController.validationResult.hasWarning||this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==S.Pristine)}renderValidationIcon(){const t=this.host;if(!t.hasFeedback)return"";let e="",i="";return this.stateController.isValidating?(e="hourglass-half",i="validation-loading"):this.stateController.validationResult.hasError?(e="exclamation-circle",i="validation-error"):this.stateController.validationResult.hasWarning?(e="exclamation-triangle",i="validation-warning"):this.stateController.validationResult.isValid&&t.value&&""!==t.value.trim()&&this.stateController.validationState!==S.Pristine&&(e="check-circle",i="validation-success"),e?r`
|
|
933
|
-
|
|
934
|
-
name="${e}"
|
|
935
|
-
class="validation-icon ${i}"
|
|
936
|
-
part="validation-icon">
|
|
937
|
-
</nr-icon>
|
|
938
|
-
`:""}renderValidationMessage(){const t=this.stateController.validationResult.hasError,e=this.stateController.validationResult.hasWarning&&!t,i=t?this.stateController.validationResult.errorMessage:e?this.stateController.validationResult.warningMessage:"";return i?r`
|
|
939
|
-
<div class="validation-message ${t?"error":"warning"}"
|
|
940
|
-
part="validation-message"
|
|
941
|
-
role="alert"
|
|
942
|
-
aria-live="polite">
|
|
943
|
-
${i}
|
|
944
|
-
</div>
|
|
945
|
-
`:""}clearDebounceTimer(){this.stateController.clearDebounceTimer()}getValidationRenderState(){return{classes:this.getValidationClasses(),hasValidationFeedback:this.hasValidationFeedback(),isValidating:this.stateController.isValidating,validationResult:this.stateController.validationResult,validationState:this.stateController.validationState}}}
|
|
946
|
-
/**
|
|
947
|
-
* @license
|
|
948
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
949
|
-
* SPDX-License-Identifier: MIT
|
|
950
|
-
*/var C=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};class A extends ${constructor(){super(...arguments),this.handleKeyDown=t=>{!this.eventHost.readonly||this.isReadonlyKeyAllowed(t)?"Enter"!==t.key?"number"===this.eventHost.type&&this.handleNumericKeyDown(t):this.dispatchEnterEvent(t):t.preventDefault()},this.handleValueChange=t=>{if(this.eventHost.readonly)return void t.preventDefault();const r=t.target,e=r.value;if(this.eventHost.maxLength&&e.length>this.eventHost.maxLength)return void t.preventDefault();"number"===this.eventHost.type&&e&&this.validateNumericValue(e,t),this.eventHost.value=e;const i=this.eventHost;i.validationController&&"function"==typeof i.validationController.validateOnChange&&i.validationController.validateOnChange(),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,originalEvent:t})},this.handleFocus=t=>{var r;this.setFocusState(!0);const e=t.target;this.restoreCursorPosition(e);const i={focused:!0,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()};this.eventHost.dispatchFocusEvent("nr-focus",Object.assign({target:t.target,value:this.eventHost.value},i)),this.eventHost.dispatchFocusEvent("nr-focus-change",i)},this.handleBlur=t=>{var r;this.setFocusState(!1);const e={focused:!1,cursorPosition:null!==(r=this.getCursorPosition())&&void 0!==r?r:void 0,selectedText:this.getSelectedText()},i=this.eventHost;i.validationController&&"function"==typeof i.validationController.validateOnBlur&&i.validationController.validateOnBlur(),this.eventHost.dispatchFocusEvent("nr-blur",Object.assign({target:t.target,value:this.eventHost.value},e)),this.eventHost.dispatchFocusEvent("nr-focus-change",e)},this.handleIconKeydown=t=>{if(!this.isActivationKey(t))return;t.preventDefault();const r=t.target;switch(r.id){case"copy-icon":this.handleCopy();break;case"clear-icon":this.handleClear();break;case"password-icon":this.handleTogglePassword();break;default:r.closest("#number-icons")&&this.handleNumberIconAction(r)}},this.handleCopy=()=>C(this,void 0,void 0,(function*(){if(this.eventHost.withCopy&&!this.eventHost.disabled)try{const t=this.inputElement;if(!t)return;t.select(),yield navigator.clipboard.writeText(t.value),this.eventHost.dispatchActionEvent("nr-copy-success",{value:t.value,action:"copy"})}catch(t){this.handleError(t,"copy"),this.eventHost.dispatchActionEvent("nr-copy-error",{error:t,action:"copy"})}})),this.handleClear=()=>{if(this.eventHost.disabled||this.eventHost.readonly||!this.eventHost.allowClear)return;const t=this.eventHost.value;this.eventHost.value="";const r=this.inputElement;r&&(r.value="",r.focus()),this.eventHost.dispatchActionEvent("nr-clear",{previousValue:t,newValue:this.eventHost.value,target:r,action:"clear"}),this.eventHost.dispatchInputEvent("nr-input",{value:this.eventHost.value,target:r,action:"clear"})},this.handleTogglePassword=()=>{if("password"!==this.eventHost.type)return;const t="password"===this.eventHost.inputType?"text":"password";this.eventHost.inputType=t,this.requestUpdate(),this.eventHost.dispatchActionEvent("nr-password-toggle",{visible:"text"===t,action:"password-toggle"})},this.handleIncrement=()=>{"number"===this.eventHost.type&&this.eventHost.increment&&this.eventHost.increment()},this.handleDecrement=()=>{"number"===this.eventHost.type&&this.eventHost.decrement&&this.eventHost.decrement()}}get eventHost(){return this.host}get inputElement(){var t;return(null===(t=this.eventHost.shadowRoot)||void 0===t?void 0:t.querySelector("#input"))||null}handleNumericKeyDown(t){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||"."!==t.key&&"-"!==t.key&&(/^\d$/.test(t.key)||t.preventDefault())}handleNumberIconAction(t){const r=t.classList.contains("increment")||t.closest(".increment"),e=t.classList.contains("decrement")||t.closest(".decrement");r?this.handleIncrement():e&&this.handleDecrement()}dispatchEnterEvent(t){this.eventHost.dispatchInputEvent("nr-enter",{value:this.eventHost.value,target:t.target,originalEvent:t})}validateNumericValue(t,r){}restoreCursorPosition(t){if(t.dataset.restoreCursor){const r=parseInt(t.dataset.restoreCursor,10);isNaN(r)||t.setSelectionRange(r,r),delete t.dataset.restoreCursor}}setFocusState(t){this.eventHost.hasOwnProperty("focused")&&(this.eventHost.focused=t,this.requestUpdate())}getCursorPosition(){if(this.eventHost.getCursorPosition)return this.eventHost.getCursorPosition();const t=this.inputElement;return t?t.selectionStart:null}getSelectedText(){if(this.eventHost.getSelectedText)return this.eventHost.getSelectedText();const t=this.inputElement;return t&&null!==t.selectionStart&&null!==t.selectionEnd?t.value.substring(t.selectionStart,t.selectionEnd):""}isReadonlyKeyAllowed(t){if(this.eventHost.isReadonlyKeyAllowed)return this.eventHost.isReadonlyKeyAllowed(t);return t.ctrlKey||t.metaKey?["KeyA","KeyC"].includes(t.code):["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return this.eventHost.isActivationKey?this.eventHost.isActivationKey(t):"Enter"===t.key||" "===t.key}}
|
|
951
|
-
/**
|
|
952
|
-
* @license
|
|
953
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
954
|
-
* SPDX-License-Identifier: MIT
|
|
955
|
-
*/var V=function(t,r,e,i){for(var o,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,e):i,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(r,e,a):o(r,e))||a);return n>3&&a&&Object.defineProperty(r,e,a),a},I=function(t,r,e,i){return new(e||(e=Promise))((function(o,n){function a(t){try{l(i.next(t))}catch(t){n(t)}}function s(t){try{l(i.throw(t))}catch(t){n(t)}}function l(t){var r;t.done?o(t.value):(r=t.value,r instanceof e?r:new e((function(t){t(r)}))).then(a,s)}l((i=i.apply(t,r||[])).next())}))};let N=class extends(_(x(w(l(i))))){constructor(){super(...arguments),this.validationController=new E(this),this.eventController=new A(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.type="text",this.placeholder="",this.autocomplete="off",this.withCopy=!1,this.allowClear=!1,this.showCount=!1,this.rules=[],this.validateOnChangeInput=!0,this.validateOnBlurInput=!0,this.hasFeedback=!1,this.allowWarnings=!1,this.validationTrigger="change",this.inputType="",this.hasAddonBefore=!1,this.hasAddonAfter=!1,this.focused=!1,this.requiredComponents=["nr-icon"],this._handleValidationEvent=t=>{const r=t.detail;this.validationMessage=r.validationMessage||"";let e="default";r.validationResult.hasError?e="error":r.validationResult.hasWarning&&this.allowWarnings?e="warning":r.validationResult.isValid&&this.value&&this.hasFeedback&&(e="success"),this.state!==e&&(this.state=e),this.requestUpdate()},this._handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this._valueChange=t=>{this.eventController.handleValueChange(t)},this._focusEvent=t=>{this.eventController.handleFocus(t)},this._blurEvent=t=>{this.eventController.handleBlur(t)},this._handleIconKeydown=t=>{this.eventController.handleIconKeydown(t)}}get _input(){return this.shadowRoot.querySelector("#input")}get characterCountDisplay(){const t=this.value.length;return this.maxLength?`${t}/${this.maxLength}`:`${t}`}get isOverCharacterLimit(){return!!this.maxLength&&this.value.length>this.maxLength}get input(){return this._input}get inputElement(){return this._input}connectedCallback(){super.connectedCallback(),this.addEventListener("nr-validation",this._handleValidationEvent)}disconnectedCallback(){var t,r;super.disconnectedCallback(),this.removeEventListener("nr-validation",this._handleValidationEvent),null===(r=(t=this.validationController).clearDebounceTimer)||void 0===r||r.call(t)}willUpdate(t){super.willUpdate(t),!t.has("type")&&this.inputType||(this.inputType=this.type),(t.has("type")||t.has("min"))&&"number"===this.type&&this.min&&!this.value&&(this.value=this.min),(t.has("type")||t.has("min")||t.has("max")||t.has("step"))&&f.validateNumericProperties(this.type,this.min,this.max,this.step),(t.has("type")||t.has("required")||t.has("maxLength")||t.has("min")||t.has("max"))&&this.validationController.setupValidationRules()}updated(t){if(t.has("step")||t.has("min")||t.has("max")||t.has("maxLength")){const t=this.input;t&&(this.setStep(this.step),this.min?t.setAttribute("min",this.min):t.removeAttribute("min"),this.max?t.setAttribute("max",this.max):t.removeAttribute("max"),this.maxLength?t.setAttribute("maxlength",this.maxLength.toString()):t.removeAttribute("maxlength"))}}firstUpdated(){this._checkInitialSlotContent()}_checkInitialSlotContent(){const t=this.querySelectorAll('[slot="addon-before"]');this.hasAddonBefore=t.length>0;const r=this.querySelectorAll('[slot="addon-after"]');this.hasAddonAfter=r.length>0}_handleSlotChange(t){const r=t.target,e=r.name;"addon-before"===e?this.hasAddonBefore=r.assignedElements().length>0:"addon-after"===e&&(this.hasAddonAfter=r.assignedElements().length>0)}_onCopy(){return I(this,void 0,void 0,(function*(){yield this.eventController.handleCopy()}))}_onClear(){this.eventController.handleClear()}_increment(){this.eventController.handleIncrement()}_decrement(){this.eventController.handleDecrement()}_togglePasswordIcon(){this.eventController.handleTogglePassword()}_getAriaDescribedBy(){var t;const r=[],e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]');return e&&e.assignedNodes().length>0&&r.push("helper-text"),r.join(" ")||""}validateValue(t){return this.validationController.validate()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){return this.validationController.getValidationStatus()}validateInput(){return I(this,void 0,void 0,(function*(){const t=this.validationController.validate();return this.validationController.isValidating?new Promise((t=>{const r=()=>{this.validationController.isValidating?setTimeout(r,50):t(this.validationController.isValid)};r()})):t}))}setValidationStatus(t){this.validationController.setValidationStatus(t)}getValidationClasses(){return this.validationController.getValidationClasses()}renderValidationIcon(){return this.validationController.renderValidationIcon()}renderValidationMessage(){return this.validationController.renderValidationMessage()}render(){const t=this.getValidationClasses(),e=this.validationController.getValidationRenderState();return r`
|
|
956
|
-
<slot name="label"></slot>
|
|
957
|
-
<div class="input-wrapper ${Object.entries(t).filter((([,t])=>t)).map((([t])=>t)).join(" ")}"
|
|
958
|
-
part="input-wrapper"
|
|
959
|
-
data-theme="${this.currentTheme}"
|
|
960
|
-
?data-validating="${e.isValidating}">
|
|
961
|
-
${k.renderAddonBefore(this.hasAddonBefore,(t=>this._handleSlotChange(t)))}
|
|
962
|
-
<div data-size=${this.size} id="input-container" part="input-container">
|
|
963
|
-
${k.renderPrefix()}
|
|
964
|
-
<input
|
|
965
|
-
id="input"
|
|
966
|
-
part="input"
|
|
967
|
-
.disabled=${this.disabled}
|
|
968
|
-
.readOnly=${this.readonly}
|
|
969
|
-
.value=${this.value}
|
|
970
|
-
.placeholder=${this.placeholder}
|
|
971
|
-
.type="${this.inputType}"
|
|
972
|
-
.autocomplete=${this.autocomplete}
|
|
973
|
-
aria-invalid=${e.validationResult.hasError?"true":"false"}
|
|
974
|
-
aria-describedby=${this._getAriaDescribedBy()}
|
|
975
|
-
@input=${this._valueChange}
|
|
976
|
-
@focus=${this._focusEvent}
|
|
977
|
-
@blur=${this._blurEvent}
|
|
978
|
-
@keydown=${this._handleKeyDown}
|
|
979
|
-
/>
|
|
980
|
-
${k.renderSuffix()}
|
|
981
|
-
${k.renderCopyIcon(this.withCopy,this.disabled,this.readonly,(()=>this._onCopy()),(t=>this._handleIconKeydown(t)))}
|
|
982
|
-
${k.renderClearIcon(this.allowClear,this.value,this.disabled,this.readonly,(()=>this._onClear()),(t=>this._handleIconKeydown(t)))}
|
|
983
|
-
${e.hasValidationFeedback?this.renderValidationIcon():k.renderStateIcon(this.state)}
|
|
984
|
-
${k.renderCalendarIcon(this.state,this.type)}
|
|
985
|
-
${k.renderPasswordIcon(this.type,this.inputType,this.disabled,this.readonly,(()=>this._togglePasswordIcon()),(t=>this._handleIconKeydown(t)))}
|
|
986
|
-
${k.renderNumberIcons(this.type,this.state,this.disabled,this.readonly,(()=>this._increment()),(()=>this._decrement()),(t=>this._handleIconKeydown(t)))}
|
|
987
|
-
</div>
|
|
988
|
-
${k.renderAddonAfter(this.hasAddonAfter,(t=>this._handleSlotChange(t)))}
|
|
989
|
-
</div>
|
|
990
|
-
<slot name="helper-text"></slot>
|
|
991
|
-
${this.renderValidationMessage()}
|
|
992
|
-
${this.showCount?r`
|
|
993
|
-
<div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
|
|
994
|
-
${this.characterCountDisplay}
|
|
995
|
-
</div>
|
|
996
|
-
`:""}
|
|
997
|
-
`}};N.styles=d,V([o({type:Boolean,reflect:!0})],N.prototype,"disabled",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"readonly",void 0),V([o({type:String,reflect:!0})],N.prototype,"state",void 0),V([o({type:String})],N.prototype,"value",void 0),V([o({type:String})],N.prototype,"size",void 0),V([o({type:String,reflect:!0})],N.prototype,"variant",void 0),V([o({reflect:!0})],N.prototype,"type",void 0),V([o({type:String})],N.prototype,"step",void 0),V([o({type:String})],N.prototype,"min",void 0),V([o({type:String})],N.prototype,"max",void 0),V([o({type:String})],N.prototype,"placeholder",void 0),V([o({type:String})],N.prototype,"autocomplete",void 0),V([o({type:String})],N.prototype,"name",void 0),V([o({type:Boolean})],N.prototype,"required",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"withCopy",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"allowClear",void 0),V([o({type:Boolean,reflect:!0})],N.prototype,"showCount",void 0),V([o({type:Number})],N.prototype,"maxLength",void 0),V([o({type:Array})],N.prototype,"rules",void 0),V([o({type:Boolean,attribute:"validate-on-change"})],N.prototype,"validateOnChangeInput",void 0),V([o({type:Boolean,attribute:"validate-on-blur"})],N.prototype,"validateOnBlurInput",void 0),V([o({type:Boolean,attribute:"has-feedback"})],N.prototype,"hasFeedback",void 0),V([o({type:Boolean,attribute:"allow-warnings"})],N.prototype,"allowWarnings",void 0),V([o({type:String,attribute:"validation-trigger"})],N.prototype,"validationTrigger",void 0),V([o({type:Number,attribute:"validation-debounce"})],N.prototype,"validationDebounce",void 0),V([o({type:String})],N.prototype,"label",void 0),V([n()],N.prototype,"validationMessage",void 0),V([n()],N.prototype,"inputType",void 0),V([n()],N.prototype,"hasAddonBefore",void 0),V([n()],N.prototype,"hasAddonAfter",void 0),V([n()],N.prototype,"focused",void 0),N=V([a("nr-input")],N);const M="",O=t`
|
|
998
|
-
:host {
|
|
999
|
-
display: inline-block;
|
|
1000
|
-
vertical-align: middle;
|
|
1001
|
-
|
|
1002
|
-
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
1003
|
-
color: var(--nuraly-color-text);
|
|
1004
|
-
background-color: var(--nuraly-color-background);
|
|
1005
|
-
border-color: var(--nuraly-color-border);
|
|
1006
|
-
|
|
1007
|
-
/* Ensure clean state transitions when theme changes */
|
|
1008
|
-
* {
|
|
1009
|
-
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
1014
|
-
:host([data-theme]) {
|
|
1015
|
-
color: inherit;
|
|
1016
|
-
background-color: inherit;
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
button {
|
|
1020
|
-
display: inline-flex;
|
|
1021
|
-
align-items: center;
|
|
1022
|
-
justify-content: center;
|
|
1023
|
-
position: relative;
|
|
1024
|
-
font-family: var(--nuraly-font-family);
|
|
1025
|
-
font-size: 0.875rem;
|
|
1026
|
-
font-weight: var(--nuraly-font-weight-regular);
|
|
1027
|
-
line-height: 1.125rem;
|
|
1028
|
-
letter-spacing: 0.16px;
|
|
1029
|
-
min-width: 5rem;
|
|
1030
|
-
height: 3rem;
|
|
1031
|
-
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
1032
|
-
border: 1px solid transparent;
|
|
1033
|
-
border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
|
|
1034
|
-
background-color: var(--nuraly-color-background);
|
|
1035
|
-
color: var(--nuraly-color-text);
|
|
1036
|
-
text-decoration: none;
|
|
1037
|
-
cursor: pointer;
|
|
1038
|
-
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
1039
|
-
white-space: nowrap;
|
|
1040
|
-
overflow: hidden;
|
|
1041
|
-
text-overflow: ellipsis;
|
|
1042
|
-
|
|
1043
|
-
/* Reset any inherited styles that might interfere with theme switching */
|
|
1044
|
-
box-shadow: none;
|
|
1045
|
-
text-shadow: none;
|
|
1046
|
-
|
|
1047
|
-
&:focus {
|
|
1048
|
-
outline: var(--nuraly-focus-outline);
|
|
1049
|
-
outline-offset: var(--nuraly-focus-outline-offset);
|
|
1050
|
-
}
|
|
1051
|
-
|
|
1052
|
-
&:disabled {
|
|
1053
|
-
cursor: not-allowed;
|
|
1054
|
-
/* Remove generic opacity - use specific disabled colors instead */
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
/* Icon styling */
|
|
1058
|
-
nr-icon {
|
|
1059
|
-
flex-shrink: 0;
|
|
1060
|
-
width: var(--nuraly-button-icon-size, 1rem);
|
|
1061
|
-
height: var(--nuraly-button-icon-size, 1rem);
|
|
1062
|
-
display: inline-flex;
|
|
1063
|
-
align-items: center;
|
|
1064
|
-
justify-content: center;
|
|
1065
|
-
/* Better text alignment */
|
|
1066
|
-
vertical-align: middle;
|
|
1067
|
-
line-height: 1;
|
|
1068
|
-
/* Ensure icon inherits text color */
|
|
1069
|
-
color: inherit;
|
|
1070
|
-
/* Override any size attribute with CSS variable */
|
|
1071
|
-
font-size: var(--nuraly-button-icon-size, 1rem) !important;
|
|
1072
|
-
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
1073
|
-
/* Inherit cursor from button */
|
|
1074
|
-
cursor: inherit;
|
|
1075
|
-
/* Prevent icon from being focusable */
|
|
1076
|
-
pointer-events: none;
|
|
1077
|
-
}
|
|
1078
|
-
|
|
1079
|
-
/* Icon focus state */
|
|
1080
|
-
&:focus:not(:disabled) nr-icon {
|
|
1081
|
-
opacity: 1;
|
|
1082
|
-
filter: brightness(1.1);
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
/* Icon active state */
|
|
1086
|
-
&:active:not(:disabled) nr-icon {
|
|
1087
|
-
opacity: 0.9;
|
|
1088
|
-
transform: scale(0.95);
|
|
1089
|
-
}
|
|
1090
|
-
|
|
1091
|
-
/* Icon hover state */
|
|
1092
|
-
&:hover:not(:disabled) nr-icon {
|
|
1093
|
-
opacity: 1;
|
|
1094
|
-
}
|
|
1095
|
-
|
|
1096
|
-
/* Icon spacing - use gap for cleaner spacing */
|
|
1097
|
-
gap: 0.5rem;
|
|
1098
|
-
|
|
1099
|
-
/* Ensure proper alignment of content */
|
|
1100
|
-
#container, [part="container"] {
|
|
1101
|
-
display: flex;
|
|
1102
|
-
align-items: center;
|
|
1103
|
-
justify-content: center;
|
|
1104
|
-
gap: inherit;
|
|
1105
|
-
}
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
/* Primary Button - Carbon Design System compliant */
|
|
1109
|
-
:host([type="primary"]) button {
|
|
1110
|
-
background-color: var(--nuraly-color-button-primary);
|
|
1111
|
-
border-color: var(--nuraly-color-button-primary);
|
|
1112
|
-
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
|
|
1113
|
-
|
|
1114
|
-
&:hover:not(:disabled) {
|
|
1115
|
-
background-color: var(--nuraly-color-button-primary-hover);
|
|
1116
|
-
border-color: var(--nuraly-color-button-primary-hover);
|
|
1117
|
-
color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
|
-
&:active:not(:disabled) {
|
|
1121
|
-
background-color: var(--nuraly-color-button-primary-active);
|
|
1122
|
-
border-color: var(--nuraly-color-button-primary-active);
|
|
1123
|
-
color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
|
|
1124
|
-
}
|
|
1125
|
-
|
|
1126
|
-
&:focus:not(:disabled) {
|
|
1127
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
1128
|
-
outline-offset: 2px;
|
|
1129
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
1130
|
-
}
|
|
1131
|
-
|
|
1132
|
-
&:disabled {
|
|
1133
|
-
background-color: var(--nuraly-color-button-disabled);
|
|
1134
|
-
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
1135
|
-
color: var(--nuraly-color-button-disabled-text);
|
|
1136
|
-
cursor: not-allowed;
|
|
1137
|
-
opacity: 1; /* Reset opacity for proper disabled state */
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
|
|
1141
|
-
/* Secondary Button - Carbon Design System compliant */
|
|
1142
|
-
:host([type="secondary"]) button {
|
|
1143
|
-
background-color: var(--nuraly-color-button-secondary);
|
|
1144
|
-
border-color: var(--nuraly-color-button-secondary);
|
|
1145
|
-
color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
|
|
1146
|
-
|
|
1147
|
-
&:hover:not(:disabled) {
|
|
1148
|
-
background-color: var(--nuraly-color-button-secondary-hover);
|
|
1149
|
-
border-color: var(--nuraly-color-button-secondary-hover);
|
|
1150
|
-
color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
|
|
1151
|
-
}
|
|
1152
|
-
|
|
1153
|
-
&:active:not(:disabled) {
|
|
1154
|
-
background-color: var(--nuraly-color-button-secondary-active);
|
|
1155
|
-
border-color: var(--nuraly-color-button-secondary-active);
|
|
1156
|
-
color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
&:focus:not(:disabled) {
|
|
1160
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
1161
|
-
outline-offset: 2px;
|
|
1162
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
&:disabled {
|
|
1166
|
-
background-color: var(--nuraly-color-button-disabled);
|
|
1167
|
-
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
1168
|
-
color: var(--nuraly-color-button-disabled-text);
|
|
1169
|
-
cursor: not-allowed;
|
|
1170
|
-
opacity: 1; /* Reset opacity for proper disabled state */
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
|
|
1174
|
-
/* Default Button - Clean white/light style with defined border */
|
|
1175
|
-
:host([type="default"]) button {
|
|
1176
|
-
background-color: var(--nuraly-color-background, #ffffff);
|
|
1177
|
-
border-color: var(--nuraly-color-border, #d0d0d0);
|
|
1178
|
-
color: var(--nuraly-color-text, #161616);
|
|
1179
|
-
|
|
1180
|
-
&:hover:not(:disabled) {
|
|
1181
|
-
background-color: var(--nuraly-color-background-hover, #f4f4f4);
|
|
1182
|
-
border-color: var(--nuraly-color-border-hover, #a8a8a8);
|
|
1183
|
-
color: var(--nuraly-color-text, #161616);
|
|
1184
|
-
}
|
|
1185
|
-
|
|
1186
|
-
&:active:not(:disabled) {
|
|
1187
|
-
background-color: var(--nuraly-color-background-active, #e0e0e0);
|
|
1188
|
-
border-color: var(--nuraly-color-border-active, #8d8d8d);
|
|
1189
|
-
color: var(--nuraly-color-text, #161616);
|
|
1190
|
-
}
|
|
1191
|
-
|
|
1192
|
-
&:focus:not(:disabled) {
|
|
1193
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
1194
|
-
outline-offset: 2px;
|
|
1195
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
1196
|
-
}
|
|
1197
|
-
|
|
1198
|
-
&:disabled {
|
|
1199
|
-
background-color: var(--nuraly-color-button-disabled, #f4f4f4);
|
|
1200
|
-
border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
|
|
1201
|
-
color: var(--nuraly-color-button-disabled-text, #c6c6c6);
|
|
1202
|
-
cursor: not-allowed;
|
|
1203
|
-
opacity: 1; /* Reset opacity for proper disabled state */
|
|
1204
|
-
}
|
|
1205
|
-
}
|
|
1206
|
-
|
|
1207
|
-
/* Tertiary/Ghost Button - Carbon Design System compliant */
|
|
1208
|
-
:host([type="tertiary"]), :host([type="ghost"]) button {
|
|
1209
|
-
background-color: var(--nuraly-color-button-outline, transparent);
|
|
1210
|
-
border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
|
|
1211
|
-
color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
|
|
1212
|
-
|
|
1213
|
-
&:hover:not(:disabled) {
|
|
1214
|
-
background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
|
|
1215
|
-
border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
|
|
1216
|
-
color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
|
|
1217
|
-
}
|
|
1218
|
-
|
|
1219
|
-
&:active:not(:disabled) {
|
|
1220
|
-
background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
|
|
1221
|
-
border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
|
|
1222
|
-
color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
|
|
1223
|
-
}
|
|
1224
|
-
|
|
1225
|
-
&:focus:not(:disabled) {
|
|
1226
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
1227
|
-
outline-offset: 2px;
|
|
1228
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
1229
|
-
}
|
|
1230
|
-
|
|
1231
|
-
&:disabled {
|
|
1232
|
-
background-color: transparent;
|
|
1233
|
-
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
1234
|
-
color: var(--nuraly-color-button-disabled-text);
|
|
1235
|
-
cursor: not-allowed;
|
|
1236
|
-
opacity: 1; /* Reset opacity for proper disabled state */
|
|
1237
|
-
}
|
|
1238
|
-
}
|
|
1239
|
-
|
|
1240
|
-
/* Danger Button - Carbon Design System compliant */
|
|
1241
|
-
:host([type="danger"]) button {
|
|
1242
|
-
background-color: var(--nuraly-color-button-danger);
|
|
1243
|
-
border-color: var(--nuraly-color-button-danger);
|
|
1244
|
-
color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
|
|
1245
|
-
|
|
1246
|
-
&:hover:not(:disabled) {
|
|
1247
|
-
background-color: var(--nuraly-color-button-danger-hover);
|
|
1248
|
-
border-color: var(--nuraly-color-button-danger-hover);
|
|
1249
|
-
color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
|
|
1250
|
-
}
|
|
1251
|
-
|
|
1252
|
-
&:active:not(:disabled) {
|
|
1253
|
-
background-color: var(--nuraly-color-button-danger-active);
|
|
1254
|
-
border-color: var(--nuraly-color-button-danger-active);
|
|
1255
|
-
color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
|
|
1256
|
-
}
|
|
1257
|
-
|
|
1258
|
-
&:focus:not(:disabled) {
|
|
1259
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
1260
|
-
outline-offset: 2px;
|
|
1261
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
1262
|
-
}
|
|
1263
|
-
|
|
1264
|
-
&:disabled {
|
|
1265
|
-
background-color: var(--nuraly-color-button-disabled);
|
|
1266
|
-
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
1267
|
-
color: var(--nuraly-color-button-disabled-text);
|
|
1268
|
-
cursor: not-allowed;
|
|
1269
|
-
opacity: 1; /* Reset opacity for proper disabled state */
|
|
1270
|
-
}
|
|
1271
|
-
}
|
|
1272
|
-
|
|
1273
|
-
/* Default size when no size attribute is provided (medium) */
|
|
1274
|
-
:host(:not([size])) button {
|
|
1275
|
-
height: var(--nuraly-size-md);
|
|
1276
|
-
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
1277
|
-
}
|
|
1278
|
-
|
|
1279
|
-
/* Size variants */
|
|
1280
|
-
:host([size="small"]) button {
|
|
1281
|
-
height: var(--nuraly-size-sm);
|
|
1282
|
-
padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
|
|
1283
|
-
font-size: 0.75rem;
|
|
1284
|
-
min-width: 4rem;
|
|
1285
|
-
}
|
|
1286
|
-
|
|
1287
|
-
:host([size="medium"]) button {
|
|
1288
|
-
height: var(--nuraly-size-md);
|
|
1289
|
-
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
:host([size="large"]) button {
|
|
1293
|
-
height: var(--nuraly-size-lg);
|
|
1294
|
-
padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
|
|
1295
|
-
font-size: 1rem;
|
|
1296
|
-
min-width: 6rem;
|
|
1297
|
-
}
|
|
1298
|
-
|
|
1299
|
-
/* Full width */
|
|
1300
|
-
:host([full-width]) {
|
|
1301
|
-
width: 100%;
|
|
1302
|
-
}
|
|
1303
|
-
|
|
1304
|
-
:host([full-width]) button {
|
|
1305
|
-
width: 100%;
|
|
1306
|
-
}
|
|
1307
|
-
|
|
1308
|
-
/* Loading state */
|
|
1309
|
-
:host([loading]) button {
|
|
1310
|
-
cursor: not-allowed;
|
|
1311
|
-
opacity: 0.7;
|
|
1312
|
-
}
|
|
1313
|
-
|
|
1314
|
-
/* Shape variants */
|
|
1315
|
-
:host([shape="round"]) button {
|
|
1316
|
-
border-radius: 50%;
|
|
1317
|
-
min-width: auto;
|
|
1318
|
-
width: var(--nuraly-size-md);
|
|
1319
|
-
aspect-ratio: 1;
|
|
1320
|
-
padding: 0;
|
|
1321
|
-
}
|
|
1322
|
-
|
|
1323
|
-
:host([shape="round"][size="small"]) button {
|
|
1324
|
-
width: var(--nuraly-size-sm);
|
|
1325
|
-
}
|
|
1326
|
-
|
|
1327
|
-
:host([shape="round"][size="medium"]) button {
|
|
1328
|
-
width: var(--nuraly-size-md);
|
|
1329
|
-
}
|
|
1330
|
-
|
|
1331
|
-
:host([shape="round"][size="large"]) button {
|
|
1332
|
-
width: var(--nuraly-size-lg);
|
|
1333
|
-
}
|
|
1334
|
-
|
|
1335
|
-
/* Enhanced Ripple Effect Animation - Theme-aware */
|
|
1336
|
-
.ripple {
|
|
1337
|
-
position: absolute;
|
|
1338
|
-
border-radius: 50%;
|
|
1339
|
-
background: rgba(255, 255, 255, 0.6);
|
|
1340
|
-
transform: scale(0);
|
|
1341
|
-
animation: ripple-animation 0.6s linear;
|
|
1342
|
-
pointer-events: none;
|
|
1343
|
-
z-index: 1;
|
|
1344
|
-
}
|
|
1345
|
-
|
|
1346
|
-
@keyframes ripple-animation {
|
|
1347
|
-
0% {
|
|
1348
|
-
transform: scale(0);
|
|
1349
|
-
opacity: 1;
|
|
1350
|
-
}
|
|
1351
|
-
70% {
|
|
1352
|
-
transform: scale(3);
|
|
1353
|
-
opacity: 0.5;
|
|
1354
|
-
}
|
|
1355
|
-
100% {
|
|
1356
|
-
transform: scale(4);
|
|
1357
|
-
opacity: 0;
|
|
1358
|
-
}
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
/* Ripple effect for different button types - Carbon Design System compliant */
|
|
1362
|
-
:host([type="primary"]) .ripple {
|
|
1363
|
-
background: rgba(255, 255, 255, 0.4);
|
|
1364
|
-
}
|
|
1365
|
-
|
|
1366
|
-
:host([type="secondary"]) .ripple {
|
|
1367
|
-
background: rgba(255, 255, 255, 0.3);
|
|
1368
|
-
}
|
|
1369
|
-
|
|
1370
|
-
:host([type="default"]) .ripple {
|
|
1371
|
-
background: var(--nuraly-color-text, #161616);
|
|
1372
|
-
opacity: 0.1;
|
|
1373
|
-
}
|
|
1374
|
-
|
|
1375
|
-
:host([type="ghost"]) .ripple,
|
|
1376
|
-
:host([type="tertiary"]) .ripple {
|
|
1377
|
-
background: var(--nuraly-color-button-tertiary, #0f62fe);
|
|
1378
|
-
opacity: 0.2;
|
|
1379
|
-
}
|
|
1380
|
-
|
|
1381
|
-
:host([type="danger"]) .ripple {
|
|
1382
|
-
background: rgba(255, 255, 255, 0.4);
|
|
1383
|
-
}
|
|
1384
|
-
|
|
1385
|
-
/* Theme-specific ripple adjustments for dark theme */
|
|
1386
|
-
[data-theme="carbon-dark"] :host([type="default"]) .ripple {
|
|
1387
|
-
background: var(--nuraly-color-text, #f4f4f4);
|
|
1388
|
-
opacity: 0.1;
|
|
1389
|
-
}
|
|
1390
|
-
|
|
1391
|
-
[data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
|
|
1392
|
-
[data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
|
|
1393
|
-
background: var(--nuraly-color-button-tertiary, #78a9ff);
|
|
1394
|
-
opacity: 0.2;
|
|
1395
|
-
}
|
|
1396
|
-
|
|
1397
|
-
[data-theme="carbon-dark"] :host([type="primary"]) .ripple {
|
|
1398
|
-
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
1399
|
-
}
|
|
1400
|
-
|
|
1401
|
-
[data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
|
|
1402
|
-
background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
|
|
1403
|
-
}
|
|
1404
|
-
|
|
1405
|
-
[data-theme="carbon-dark"] :host([type="danger"]) .ripple {
|
|
1406
|
-
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
1407
|
-
}
|
|
1408
|
-
|
|
1409
|
-
/* ========================================
|
|
1410
|
-
* CARBON THEME SPECIFIC STYLING
|
|
1411
|
-
* Enhanced padding and icon centering for Carbon Design System
|
|
1412
|
-
* ======================================== */
|
|
1413
|
-
|
|
1414
|
-
/* Carbon theme button styling - apply to all carbon themes */
|
|
1415
|
-
:host([data-theme*="carbon"]) button,
|
|
1416
|
-
[data-theme*="carbon"] :host button {
|
|
1417
|
-
/* Better baseline alignment for icon and text */
|
|
1418
|
-
align-items: center;
|
|
1419
|
-
|
|
1420
|
-
/* Enhanced icon alignment and spacing for Carbon */
|
|
1421
|
-
nr-icon {
|
|
1422
|
-
width: var(--nuraly-button-icon-size, 1rem);
|
|
1423
|
-
height: var(--nuraly-button-icon-size, 1rem);
|
|
1424
|
-
display: inline-flex;
|
|
1425
|
-
align-items: center;
|
|
1426
|
-
justify-content: center;
|
|
1427
|
-
flex-shrink: 0;
|
|
1428
|
-
/* Perfect vertical alignment with text baseline */
|
|
1429
|
-
vertical-align: middle;
|
|
1430
|
-
line-height: 1;
|
|
1431
|
-
}
|
|
1432
|
-
|
|
1433
|
-
/* Icon spacing for Carbon theme - improved approach */
|
|
1434
|
-
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
1435
|
-
}
|
|
1436
|
-
|
|
1437
|
-
/* Specific Carbon theme selectors for better targeting */
|
|
1438
|
-
[data-theme="carbon-light"] nr-button button,
|
|
1439
|
-
[data-theme="carbon-dark"] nr-button button,
|
|
1440
|
-
[data-theme="carbon"] nr-button button {
|
|
1441
|
-
/* Better baseline alignment for icon and text */
|
|
1442
|
-
align-items: center;
|
|
1443
|
-
|
|
1444
|
-
/* Enhanced icon alignment and spacing for Carbon */
|
|
1445
|
-
nr-icon {
|
|
1446
|
-
width: var(--nuraly-button-icon-size, 1rem);
|
|
1447
|
-
height: var(--nuraly-button-icon-size, 1rem);
|
|
1448
|
-
display: inline-flex;
|
|
1449
|
-
align-items: center;
|
|
1450
|
-
justify-content: center;
|
|
1451
|
-
flex-shrink: 0;
|
|
1452
|
-
/* Perfect vertical alignment with text baseline */
|
|
1453
|
-
vertical-align: middle;
|
|
1454
|
-
line-height: 1;
|
|
1455
|
-
/* Slight adjustment for perfect optical centering */
|
|
1456
|
-
margin-top: -1px;
|
|
1457
|
-
}
|
|
1458
|
-
|
|
1459
|
-
/* Target the SVG inside nr-icon for better alignment */
|
|
1460
|
-
nr-icon svg {
|
|
1461
|
-
display: block;
|
|
1462
|
-
margin: 0 auto;
|
|
1463
|
-
}
|
|
1464
|
-
|
|
1465
|
-
/* Icon spacing for Carbon theme */
|
|
1466
|
-
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
1467
|
-
|
|
1468
|
-
/* Ensure text is also properly centered */
|
|
1469
|
-
span#container {
|
|
1470
|
-
display: flex;
|
|
1471
|
-
align-items: center;
|
|
1472
|
-
justify-content: center;
|
|
1473
|
-
width: 100%;
|
|
1474
|
-
height: 100%;
|
|
1475
|
-
line-height: 1;
|
|
1476
|
-
}
|
|
1477
|
-
|
|
1478
|
-
/* Ensure slot content aligns properly */
|
|
1479
|
-
slot#slot {
|
|
1480
|
-
display: inline-block;
|
|
1481
|
-
line-height: inherit;
|
|
1482
|
-
}
|
|
1483
|
-
}
|
|
1484
|
-
`;
|
|
1485
|
-
/**
|
|
1486
|
-
* @license
|
|
1487
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1488
|
-
* SPDX-License-Identifier: MIT
|
|
1489
|
-
*/
|
|
1490
|
-
class R{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,r){console.error(`[ButtonController:${this.constructor.name}] Error in ${r}:`,t),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:t.message,context:r,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}
|
|
1491
|
-
/**
|
|
1492
|
-
* @license
|
|
1493
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1494
|
-
* SPDX-License-Identifier: MIT
|
|
1495
|
-
*/class D extends R{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,e=r.getBoundingClientRect(),i=2*Math.max(e.width,e.height),o=t.clientX-e.left-i/2,n=t.clientY-e.top-i/2,a=document.createElement("span");a.className="ripple",a.style.width=a.style.height=i+"px",a.style.left=o+"px",a.style.top=n+"px";r.querySelectorAll(".ripple").forEach((t=>t.remove())),r.appendChild(a),setTimeout((()=>{a.remove()}),600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
|
|
1496
|
-
/**
|
|
1497
|
-
* @license
|
|
1498
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1499
|
-
* SPDX-License-Identifier: MIT
|
|
1500
|
-
*/class P extends R{handleKeyboardActivation(t){try{if(this.host.disabled)return;this.isActivationKey(t)&&(t.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:t.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"handleKeyboardActivation")}}handleKeydown(t){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(t))return void t.preventDefault()}this.handleKeyboardActivation(t)}catch(t){this.handleError(t,"handleKeydown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isReadonlyKeyAllowed(t){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(t.key)}}
|
|
1501
|
-
/**
|
|
1502
|
-
* @license
|
|
1503
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1504
|
-
* SPDX-License-Identifier: MIT
|
|
1505
|
-
*/class H extends R{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
|
|
1506
|
-
/**
|
|
1507
|
-
* @license
|
|
1508
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1509
|
-
* SPDX-License-Identifier: MIT
|
|
1510
|
-
*/var U=function(t,r,e,i){for(var o,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,e):i,s=t.length-1;s>=0;s--)(o=t[s])&&(a=(n<3?o(a):n>3?o(r,e,a):o(r,e))||a);return n>3&&a&&Object.defineProperty(r,e,a),a};let B=class extends(l(i)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=M,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=M,this.target=M,this.ripple=!0,this.buttonAriaLabel=M,this.ariaDescribedBy=M,this.htmlType=M,this.requiredComponents=["nr-icon"],this.rippleController=new D(this),this.keyboardController=new P(this),this.linkController=new H(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||e,"data-state":this.loading?"loading":e,"data-theme":this.currentTheme,"data-block":this.block?"true":e,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||e,"aria-describedby":this.ariaDescribedBy||e,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),e}const i=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const e=i();return r`<nr-icon name=${t} size=${c(e)}></nr-icon>`}const{name:o,type:n="solid",size:a,color:s,alt:l}=t,u=a||i();return r`<nr-icon
|
|
1511
|
-
name=${o}
|
|
1512
|
-
type=${n}
|
|
1513
|
-
alt=${l||""}
|
|
1514
|
-
size=${c(u)}
|
|
1515
|
-
color=${s||""}
|
|
1516
|
-
></nr-icon>`}handleClick(t){this.disabled?t.preventDefault():(this.rippleController.handleRippleClick(t),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(t),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(t){this.keyboardController.handleKeydown(t)}getResolvedLeftIcon(){var t,r;return this.iconLeft?this.iconLeft:(null===(t=this.icons)||void 0===t?void 0:t.left)?this.icons.left:(null===(r=this.icon)||void 0===r?void 0:r.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var t,r;return this.iconRight?this.iconRight:(null===(t=this.icons)||void 0===t?void 0:t.right)?this.icons.right:2===(null===(r=this.icon)||void 0===r?void 0:r.length)?this.icon[1]:void 0}render(){const t=this.linkController.getElementTag(),i=this.getCommonAttributes(),o=this.linkController.getLinkAttributes(),n=this.getResolvedLeftIcon(),a=this.getResolvedRightIcon(),s=r`
|
|
1517
|
-
<span id="container" part="container">
|
|
1518
|
-
${n?this.renderIcon(n):e}
|
|
1519
|
-
<slot id="slot"></slot>
|
|
1520
|
-
${a?this.renderIcon(a):e}
|
|
1521
|
-
</span>
|
|
1522
|
-
`;return"a"===t?r`
|
|
1523
|
-
<a
|
|
1524
|
-
href="${o.href}"
|
|
1525
|
-
target="${o.target||e}"
|
|
1526
|
-
rel="${o.rel||e}"
|
|
1527
|
-
role="${o.role}"
|
|
1528
|
-
data-type="${i["data-type"]}"
|
|
1529
|
-
data-shape="${i["data-shape"]}"
|
|
1530
|
-
data-size="${i["data-size"]}"
|
|
1531
|
-
data-state="${i["data-state"]}"
|
|
1532
|
-
data-theme="${i["data-theme"]}"
|
|
1533
|
-
data-block="${i["data-block"]}"
|
|
1534
|
-
class="${i.class}"
|
|
1535
|
-
aria-disabled="${this.disabled}"
|
|
1536
|
-
aria-label="${this.buttonAriaLabel||e}"
|
|
1537
|
-
aria-describedby="${this.ariaDescribedBy||e}"
|
|
1538
|
-
tabindex="${this.disabled?-1:0}"
|
|
1539
|
-
@click="${this.handleClick}"
|
|
1540
|
-
@keydown="${this.handleKeydown}"
|
|
1541
|
-
>
|
|
1542
|
-
${s}
|
|
1543
|
-
</a>
|
|
1544
|
-
`:r`
|
|
1545
|
-
<button
|
|
1546
|
-
?disabled="${this.disabled}"
|
|
1547
|
-
type="${this.htmlType||"button"}"
|
|
1548
|
-
role="${o.role}"
|
|
1549
|
-
data-type="${i["data-type"]}"
|
|
1550
|
-
data-shape="${i["data-shape"]}"
|
|
1551
|
-
data-size="${i["data-size"]}"
|
|
1552
|
-
data-state="${i["data-state"]}"
|
|
1553
|
-
data-theme="${i["data-theme"]}"
|
|
1554
|
-
data-block="${i["data-block"]}"
|
|
1555
|
-
class="${i.class}"
|
|
1556
|
-
aria-disabled="${this.disabled}"
|
|
1557
|
-
aria-label="${this.buttonAriaLabel||e}"
|
|
1558
|
-
aria-describedby="${this.ariaDescribedBy||e}"
|
|
1559
|
-
tabindex="${this.disabled?-1:0}"
|
|
1560
|
-
@click="${this.handleClick}"
|
|
1561
|
-
@keydown="${this.handleKeydown}"
|
|
1562
|
-
>
|
|
1563
|
-
${s}
|
|
1564
|
-
</button>
|
|
1565
|
-
`}};
|
|
1566
|
-
/**
|
|
1567
|
-
* @license
|
|
1568
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1569
|
-
* SPDX-License-Identifier: MIT
|
|
1570
|
-
*/
|
|
1571
|
-
var j,L,F,W,q,K,Y,Z;B.styles=O,U([o({type:Boolean})],B.prototype,"disabled",void 0),U([o({type:Boolean})],B.prototype,"loading",void 0),U([o({type:String})],B.prototype,"size",void 0),U([o({type:String})],B.prototype,"type",void 0),U([o({type:String})],B.prototype,"shape",void 0),U([o({type:Boolean})],B.prototype,"block",void 0),U([o({type:Boolean})],B.prototype,"dashed",void 0),U([o({type:Array})],B.prototype,"icon",void 0),U([o({type:Object})],B.prototype,"iconLeft",void 0),U([o({type:Object})],B.prototype,"iconRight",void 0),U([o({type:Object})],B.prototype,"icons",void 0),U([o({reflect:!0})],B.prototype,"iconPosition",void 0),U([o({type:String})],B.prototype,"href",void 0),U([o({type:String})],B.prototype,"target",void 0),U([o({type:Boolean})],B.prototype,"ripple",void 0),U([o({type:String})],B.prototype,"buttonAriaLabel",void 0),U([o({type:String})],B.prototype,"ariaDescribedBy",void 0),U([o({type:String})],B.prototype,"htmlType",void 0),B=U([a("nr-button")],B),function(t){t.TwentyFourHour="24h",t.TwelveHour="12h"}(j||(j={})),function(t){t.Hours="hours",t.Minutes="minutes",t.Seconds="seconds"}(L||(L={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(F||(F={})),function(t){t.Default="default",t.Outlined="outlined",t.Filled="filled"}(W||(W={})),function(t){t.Default="default",t.Error="error",t.Warning="warning",t.Success="success"}(q||(q={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(K||(K={})),function(t){t[t.One=1]="One",t[t.Five=5]="Five",t[t.Ten=10]="Ten",t[t.Fifteen=15]="Fifteen",t[t.Thirty=30]="Thirty"}(Y||(Y={})),function(t){t.AM="AM",t.PM="PM"}(Z||(Z={}));const G={[j.TwentyFourHour]:"HH:mm",[j.TwelveHour]:"hh:mm A"},X={[j.TwentyFourHour]:"HH:mm:ss",[j.TwelveHour]:"hh:mm:ss A"},J={HOURS_24:24,HOURS_12:12,MINUTES:60,SECONDS:60,DEFAULT_STEP:1,DEFAULT_MINUTE_INTERVAL:1,DEFAULT_SECOND_INTERVAL:1},Q={TIME_CHANGE:"nr-time-change",FOCUS:"nr-focus",BLUR:"nr-blur",CLOCK_OPEN:"nr-clock-open",CLOCK_CLOSE:"nr-clock-close",VALIDATION:"nr-validation"},tt={hours:0,minutes:0,seconds:0,period:Z.AM},rt={format:j.TwentyFourHour,showSeconds:!1,minuteInterval:1,secondInterval:1,use12HourClock:!1},et="HH:mm",it="HH:mm:ss",ot="hh:mm A",nt="hh:mm:ss A",at="time-input-field",st="time-picker-clock-container",lt={TWENTY_FOUR_HOUR:/^([01]?[0-9]|2[0-3]):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,TWELVE_HOUR:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])(:([0-5]?[0-9]))?\s?(AM|PM|am|pm)$/},ct={MIN_HOUR_24:0,MAX_HOUR_24:23,MIN_HOUR_12:1,MAX_HOUR_12:12,MIN_MINUTE:0,MAX_MINUTE:59,MIN_SECOND:0,MAX_SECOND:59},ut={HOURS:Y.One,MINUTES:Y.One,SECONDS:Y.One},dt={CONTAINER:"time-picker",INPUT:"time-picker__input",CLOCK:"time-picker__clock",DROPDOWN:"time-picker__dropdown",HOUR:"time-picker__hour",MINUTE:"time-picker__minute",SECOND:"time-picker__second",PERIOD:"time-picker__period",BUTTON:"time-picker__button",SEPARATOR:"time-picker__separator"},pt={RADIUS:100,CENTER:50,HOUR_HAND_LENGTH:30,MINUTE_HAND_LENGTH:40,SECOND_HAND_LENGTH:45};
|
|
1572
|
-
/**
|
|
1573
|
-
* @license
|
|
1574
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1575
|
-
* SPDX-License-Identifier: MIT
|
|
1576
|
-
*/
|
|
1577
|
-
class ht{static createTimeValue(t,r,e=0,i){return{hours:Math.max(0,Math.min(t,23)),minutes:Math.max(0,Math.min(r,59)),seconds:Math.max(0,Math.min(e,59)),period:i}}static parseTimeString(t,r=j.TwentyFourHour){if(!(null==t?void 0:t.trim()))return null;const e=t.trim().toUpperCase();return r===j.TwelveHour?this.parse12HourTime(e):this.parse24HourTime(e)}static parse24HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!r)return null;const e=parseInt(r[1],10),i=parseInt(r[2],10),o=r[3]?parseInt(r[3],10):0;return this.isValidTime24(e,i,o)?this.createTimeValue(e,i,o):null}static parse12HourTime(t){const r=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);if(!r)return null;let e=parseInt(r[1],10);const i=parseInt(r[2],10),o=r[3]?parseInt(r[3],10):0,n=r[4];return this.isValidTime12(e,i,o)?(n===Z.PM&&12!==e?e+=12:n===Z.AM&&12===e&&(e=0),this.createTimeValue(e,i,o,n)):null}static formatTimeValue(t,r=j.TwentyFourHour,e=!1){return t?r===j.TwelveHour?this.format12HourTime(t,e):this.format24HourTime(t,e):""}static format24HourTime(t,r){const e=t.hours.toString().padStart(2,"0"),i=t.minutes.toString().padStart(2,"0");if(r){return`${e}:${i}:${t.seconds.toString().padStart(2,"0")}`}return`${e}:${i}`}static format12HourTime(t,r){let e=t.hours;const i=t.minutes.toString().padStart(2,"0"),o=e>=12?Z.PM:Z.AM;0===e?e=12:e>12&&(e-=12);const n=e.toString();if(r){return`${n}:${i}:${t.seconds.toString().padStart(2,"0")} ${o}`}return`${n}:${i} ${o}`}static getCurrentTime(){const t=new Date;return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static compareTime(t,r){return 3600*t.hours+60*t.minutes+t.seconds-(3600*r.hours+60*r.minutes+r.seconds)}static isTimeEqual(t,r){return 0===this.compareTime(t,r)}static isValidTime24(t,r,e=0){return t>=ct.MIN_HOUR_24&&t<=ct.MAX_HOUR_24&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&e>=ct.MIN_SECOND&&e<=ct.MAX_SECOND}static isValidTime12(t,r,e=0){return t>=ct.MIN_HOUR_12&&t<=ct.MAX_HOUR_12&&r>=ct.MIN_MINUTE&&r<=ct.MAX_MINUTE&&e>=ct.MIN_SECOND&&e<=ct.MAX_SECOND}static addTime(t,r,e,i=0){let o=3600*t.hours+60*t.minutes+t.seconds;o+=3600*r+60*e+i,o=(o%86400+86400)%86400;const n=Math.floor(o/3600),a=Math.floor(o%3600/60),s=o%60;return this.createTimeValue(n,a,s)}static generateTimeOptions(t=15,r=j.TwentyFourHour,e=!1){const i=[];for(let o=0;o<24;o++)for(let n=0;n<60;n+=t){const t=this.createTimeValue(o,n,0),a=this.formatTimeValue(t,r,e);i.push({value:a,label:a})}return i}static roundToInterval(t,r){const e=60*t.hours+t.minutes,i=Math.round(e/r)*r,o=Math.floor(i/60)%24,n=i%60;return this.createTimeValue(o,n,t.seconds)}static isTimeInRange(t,r,e){return!(r&&this.compareTime(t,r)<0)&&!(e&&this.compareTime(t,e)>0)}static dateToTimeValue(t){return this.createTimeValue(t.getHours(),t.getMinutes(),t.getSeconds())}static timeValueToDate(t,r){const e=r?new Date(r):new Date;return e.setHours(t.hours,t.minutes,t.seconds,0),e}}
|
|
1578
|
-
/**
|
|
1579
|
-
* @license
|
|
1580
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1581
|
-
* SPDX-License-Identifier: MIT
|
|
1582
|
-
*/class mt{constructor(t){this.host=t,this.selectedTime=null}selectTime(t){if(!this.host.validateTime(t))return;const r=this.selectedTime;this.selectedTime=Object.assign({},t),this.dispatchTimeChangeEvent(t,r),this.host.requestUpdate()}getSelectedTime(){return this.selectedTime?Object.assign({},this.selectedTime):null}clearSelection(){const t=this.selectedTime;this.selectedTime=null,t&&(this.dispatchTimeChangeEvent(null,t),this.host.requestUpdate())}isTimeSelected(t){return!!this.selectedTime&&ht.isTimeEqual(t,this.selectedTime)}setTimeInternal(t){this.selectedTime=t?Object.assign({},t):null}updateTime(t){if(this.selectedTime)this.selectedTime=Object.assign(Object.assign({},this.selectedTime),t);else{const r=ht.getCurrentTime();this.selectedTime=Object.assign(Object.assign({},r),t)}this.host.validateTime(this.selectedTime)&&(this.dispatchTimeChangeEvent(this.selectedTime,null),this.host.requestUpdate())}incrementTime(t,r=1){let e;switch(this.selectedTime||(this.selectedTime=ht.getCurrentTime()),t){case"hours":e=ht.addTime(this.selectedTime,r,0,0);break;case"minutes":e=ht.addTime(this.selectedTime,0,r,0);break;case"seconds":e=ht.addTime(this.selectedTime,0,0,r);break;default:return}this.selectTime(e)}decrementTime(t,r=1){this.incrementTime(t,-r)}setTimeFromString(t){const r=this.host.getConfig(),e=ht.parseTimeString(t,r.format);return!(!e||!this.host.validateTime(e))&&(this.selectTime(e),!0)}getFormattedTime(){return this.selectedTime?this.host.formatTime(this.selectedTime):""}dispatchTimeChangeEvent(t,r){const e=this.host;if(!e.dispatchEvent)return;const i={value:t?this.host.formatTime(t):"",timeValue:t,previousValue:r?this.host.formatTime(r):"",previousTimeValue:r},o=new CustomEvent(Q.TIME_CHANGE,{detail:i,bubbles:!0,composed:!0});e.dispatchEvent(o)}reset(){this.clearSelection()}setToCurrentTime(){const t=ht.getCurrentTime();this.selectTime(t)}roundToInterval(t){if(!this.selectedTime)return;const r=ht.roundToInterval(this.selectedTime,t);this.selectTime(r)}}
|
|
1583
|
-
/**
|
|
1584
|
-
* @license
|
|
1585
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1586
|
-
* SPDX-License-Identifier: MIT
|
|
1587
|
-
*/class bt{constructor(t){this.host=t,this.constraints={}}setConstraints(t){this.constraints=Object.assign({},t)}getConstraints(){return Object.assign({},this.constraints)}validateConstraints(t){return this.isTimeInBounds(t)&&!this.isTimeDisabled(t)&&this.isTimeEnabled(t)}isTimeInBounds(t){let r=null,e=null;if(this.constraints.minTime){const t=this.host.getConfig();r=ht.parseTimeString(this.constraints.minTime,t.format)}if(this.constraints.maxTime){const t=this.host.getConfig();e=ht.parseTimeString(this.constraints.maxTime,t.format)}return ht.isTimeInRange(t,r,e)}isTimeDisabled(t){if(!this.constraints.disabledTimes||0===this.constraints.disabledTimes.length)return!1;const r=this.host.formatTime(t);return this.constraints.disabledTimes.includes(r)}isTimeEnabled(t){if(!this.constraints.enabledTimes||0===this.constraints.enabledTimes.length)return!0;const r=this.host.formatTime(t);return this.constraints.enabledTimes.includes(r)}getValidationMessage(t){return this.isTimeInBounds(t)?this.isTimeDisabled(t)?"This time is not available":this.isTimeEnabled(t)?"":"This time is not in the allowed time range":this.getBoundsValidationMessage(t)}getBoundsValidationMessage(t){const r=this.host.getConfig();let e="";if(this.constraints.minTime&&this.constraints.maxTime)e=`Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;else if(this.constraints.minTime){const i=ht.parseTimeString(this.constraints.minTime,r.format);i&&ht.compareTime(t,i)<0&&(e=`Time must be after ${this.constraints.minTime}`)}else if(this.constraints.maxTime){const i=ht.parseTimeString(this.constraints.maxTime,r.format);i&&ht.compareTime(t,i)>0&&(e=`Time must be before ${this.constraints.maxTime}`)}return e}validateTimeFormat(t){const r=this.host.getConfig();return null!==ht.parseTimeString(t,r.format)}getValidationResult(t){const r=[];return this.isTimeInBounds(t)||r.push(this.getBoundsValidationMessage(t)),this.isTimeDisabled(t)&&r.push("This time is disabled"),this.isTimeEnabled(t)||r.push("This time is not in the allowed range"),{isValid:0===r.length,message:r.length>0?r[0]:"",errors:r}}findNearestValidTime(t){if(this.validateConstraints(t))return t;for(let r=1;r<=60;r++){const e=ht.addTime(t,0,r,0);if(this.validateConstraints(e))return e;const i=ht.addTime(t,0,-r,0);if(this.validateConstraints(i))return i}return null}isCurrentSelectionValid(){const t=this.host.getCurrentTime();return this.validateConstraints(t)}setMinTime(t){this.constraints.minTime=t||void 0}setMaxTime(t){this.constraints.maxTime=t||void 0}setDisabledTimes(t){this.constraints.disabledTimes=[...t]}setEnabledTimes(t){this.constraints.enabledTimes=[...t]}clearConstraints(){this.constraints={}}}
|
|
1588
|
-
/**
|
|
1589
|
-
* @license
|
|
1590
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
1591
|
-
* SPDX-License-Identifier: MIT
|
|
1592
|
-
*/class vt{constructor(t){this.host=t}formatForDisplay(t){const r=this.host.getConfig();return ht.formatTimeValue(t,r.format,r.showSeconds)}formatForInput(t){return this.formatForDisplay(t)}parseInputValue(t){const r=this.host.getConfig();return ht.parseTimeString(t,r.format)}getFormatPattern(){const t=this.host.getConfig();return t.format===j.TwelveHour?t.showSeconds?nt:ot:t.showSeconds?it:et}getPlaceholder(){const t=this.host.getConfig();return t.format===j.TwelveHour?t.showSeconds?"hh:mm:ss AM/PM":"hh:mm AM/PM":t.showSeconds?"HH:mm:ss":"HH:mm"}formatTimeComponent(t,r=2){return t.toString().padStart(r,"0")}formatHours(t){if(this.host.getConfig().format===j.TwelveHour){let r=t;return 0===r?r=12:r>12&&(r-=12),r.toString()}return this.formatTimeComponent(t)}formatMinutes(t){return this.formatTimeComponent(t)}formatSeconds(t){return this.formatTimeComponent(t)}getPeriod(t){return t>=12?Z.PM:Z.AM}formatTimeParts(t){const r=this.host.getConfig();return{hours:this.formatHours(t.hours),minutes:this.formatMinutes(t.minutes),seconds:this.formatSeconds(t.seconds),period:r.format===j.TwelveHour?this.getPeriod(t.hours):void 0}}parseTimeParts(t){const r=this.host.getConfig(),e=ht.parseTimeString(t,r.format);return e?{hours:e.hours,minutes:e.minutes,seconds:e.seconds,period:r.format===j.TwelveHour?this.getPeriod(e.hours):void 0}:null}getTimeSeparator(){return":"}isValidFormat(t){const r=ht.createTimeValue(12,30,45);try{const t=this.formatForDisplay(r);return null!==this.parseInputValue(t)}catch(t){return!1}}getFormatExamples(){const t=this.host.getConfig();return[ht.createTimeValue(9,15,0),ht.createTimeValue(14,30,45),ht.createTimeValue(23,59,59)].map((r=>ht.formatTimeValue(r,t.format,t.showSeconds)))}convertFormat(t,r,e){const i=ht.parseTimeString(t,r);if(!i)return null;const o=this.host.getConfig();return ht.formatTimeValue(i,e,o.showSeconds)}getTimeDescription(t){const r=this.host.getConfig(),e=ht.formatTimeValue(t,r.format,r.showSeconds),i=ht.getCurrentTime(),o=ht.compareTime(t,i);return 0===o?`${e} (now)`:o>0?`${e} (future)`:`${e} (past)`}}const yt=t`
|
|
1593
|
-
${t`
|
|
27
|
+
*/class U{constructor(e){this.host=e}formatForDisplay(e){const i=this.host.getConfig();return N.formatTimeValue(e,i.format,i.showSeconds)}formatForInput(e){return this.formatForDisplay(e)}parseInputValue(e){const i=this.host.getConfig();return N.parseTimeString(e,i.format)}getFormatPattern(){const e=this.host.getConfig();return e.format===p.TwelveHour?e.showSeconds?M:$:e.showSeconds?S:T}getPlaceholder(){const e=this.host.getConfig();return e.format===p.TwelveHour?e.showSeconds?"hh:mm:ss AM/PM":"hh:mm AM/PM":e.showSeconds?"HH:mm:ss":"HH:mm"}formatTimeComponent(e,i=2){return e.toString().padStart(i,"0")}formatHours(e){if(this.host.getConfig().format===p.TwelveHour){let i=e;return 0===i?i=12:i>12&&(i-=12),i.toString()}return this.formatTimeComponent(e)}formatMinutes(e){return this.formatTimeComponent(e)}formatSeconds(e){return this.formatTimeComponent(e)}getPeriod(e){return e>=12?v.PM:v.AM}formatTimeParts(e){const i=this.host.getConfig();return{hours:this.formatHours(e.hours),minutes:this.formatMinutes(e.minutes),seconds:this.formatSeconds(e.seconds),period:i.format===p.TwelveHour?this.getPeriod(e.hours):void 0}}parseTimeParts(e){const i=this.host.getConfig(),t=N.parseTimeString(e,i.format);return t?{hours:t.hours,minutes:t.minutes,seconds:t.seconds,period:i.format===p.TwelveHour?this.getPeriod(t.hours):void 0}:null}getTimeSeparator(){return":"}isValidFormat(e){const i=N.createTimeValue(12,30,45);try{const e=this.formatForDisplay(i);return null!==this.parseInputValue(e)}catch(e){return!1}}getFormatExamples(){const e=this.host.getConfig();return[N.createTimeValue(9,15,0),N.createTimeValue(14,30,45),N.createTimeValue(23,59,59)].map((i=>N.formatTimeValue(i,e.format,e.showSeconds)))}convertFormat(e,i,t){const r=N.parseTimeString(e,i);if(!r)return null;const o=this.host.getConfig();return N.formatTimeValue(r,t,o.showSeconds)}getTimeDescription(e){const i=this.host.getConfig(),t=N.formatTimeValue(e,i.format,i.showSeconds),r=N.getCurrentTime(),o=N.compareTime(e,r);return 0===o?`${t} (now)`:o>0?`${t} (future)`:`${t} (past)`}}const R=e`
|
|
28
|
+
${e`
|
|
1594
29
|
:host {
|
|
1595
30
|
/* ========================================
|
|
1596
31
|
* TIMEPICKER THEME-AWARE VARIABLES
|
|
@@ -2272,37 +707,37 @@ class ht{static createTimeValue(t,r,e=0,i){return{hours:Math.max(0,Math.min(t,23
|
|
|
2272
707
|
max-width: 320px;
|
|
2273
708
|
}
|
|
2274
709
|
}
|
|
2275
|
-
`;var
|
|
2276
|
-
<div class="${
|
|
710
|
+
`;var V=function(e,i,t,r){for(var o,a=arguments.length,c=a<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,t):r,l=e.length-1;l>=0;l--)(o=e[l])&&(c=(a<3?o(c):a>3?o(i,t,c):o(i,t))||c);return a>3&&c&&Object.defineProperty(i,t,c),c};let F=class extends(n(i)){constructor(){super(),this.value="",this.name="",this.placeholder="Select time",this.format=p.TwentyFourHour,this.showSeconds=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.helperText="",this.label="",this.size="medium",this.variant="outlined",this.placement=k.Bottom,this.scrollBehavior="instant",this.inputValue="",this.state=h.Default,this.validationMessage="",this.dropdownController=new s(this),this.selectionController=new D(this),this.validationController=new j(this),this.formattingController=new U(this)}connectedCallback(){super.connectedCallback(),this.updateConstraints(),this.value&&this.setTimeFromValue(this.value),this.addEventListener("click",this.handleComponentClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick.bind(this))}updated(e){super.updated(e),e.has("value")&&this.value!==this.inputValue&&(this.setTimeFromValue(this.value),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50)),this.shouldUpdateConstraints(e)&&this.updateConstraints(),this.setupDropdownElements()}setupDropdownElements(){var e,i;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".time-picker__dropdown"),r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__input-wrapper");t&&r&&this.dropdownController.setElements(t,r)}render(){const e={"time-picker":!0,"time-picker--open":this.dropdownController.isOpen,"time-picker--disabled":this.disabled,"time-picker--readonly":this.readonly,"time-picker--error":this.state===h.Error};return t`
|
|
711
|
+
<div class="${l(e)}" data-theme="${this.currentTheme}" part="wrapper">
|
|
2277
712
|
${this.renderLabel()}
|
|
2278
713
|
${this.renderInput()}
|
|
2279
714
|
${this.renderDropdown()}
|
|
2280
715
|
${this.renderHelperText()}
|
|
2281
716
|
</div>
|
|
2282
|
-
`}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const
|
|
717
|
+
`}open(){this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50)}close(){this.dropdownController.close()}clear(){this.value="",this.inputValue="",this.selectionController.clearSelection()}setToNow(){const e=N.getCurrentTime();this.selectionController.selectTime(e),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}validate(){const e=this.selectionController.getSelectedTime();return!e||this.validationController.validateConstraints(e)}validateTime(e){return this.validationController.validateConstraints(e)}isHourValid(e,i){const t=Object.assign(Object.assign({},i),{hours:e});return this.validateTime(t)}isMinuteValid(e,i){const t=Object.assign(Object.assign({},i),{minutes:e});return this.validateTime(t)}isSecondValid(e,i){const t=Object.assign(Object.assign({},i),{seconds:e});return this.validateTime(t)}renderLabel(){return this.label?t`
|
|
2283
718
|
<label class="time-picker__label" part="label" for="time-input">
|
|
2284
719
|
${this.label}
|
|
2285
|
-
${this.required?
|
|
720
|
+
${this.required?t`<span class="time-picker__required">*</span>`:r}
|
|
2286
721
|
</label>
|
|
2287
|
-
`:
|
|
722
|
+
`:r}renderInput(){const e=this.getFormatPlaceholder();return t`
|
|
2288
723
|
<div class="time-picker__input-wrapper" part="input-wrapper">
|
|
2289
724
|
<nr-input
|
|
2290
725
|
id="time-input"
|
|
2291
726
|
part="input"
|
|
2292
727
|
type="calendar"
|
|
2293
728
|
.value="${this.inputValue}"
|
|
2294
|
-
placeholder="${this.placeholder||
|
|
729
|
+
placeholder="${this.placeholder||e}"
|
|
2295
730
|
?disabled="${this.disabled}"
|
|
2296
731
|
?readonly="${!1}"
|
|
2297
732
|
?required="${this.required}"
|
|
2298
|
-
.state="${this.state===
|
|
733
|
+
.state="${this.state===h.Error?"error":"default"}"
|
|
2299
734
|
@click="${this.handleInputClick}"
|
|
2300
735
|
@nr-input="${this.handleInputChange}"
|
|
2301
736
|
@nr-blur="${this.handleInputBlur}"
|
|
2302
737
|
>
|
|
2303
738
|
</nr-input>
|
|
2304
739
|
</div>
|
|
2305
|
-
`}renderDropdown(){return this.dropdownController.isOpen?
|
|
740
|
+
`}renderDropdown(){return this.dropdownController.isOpen?t`
|
|
2306
741
|
<div
|
|
2307
742
|
class="time-picker__dropdown time-picker__dropdown--open"
|
|
2308
743
|
part="dropdown"
|
|
@@ -2311,52 +746,52 @@ class ht{static createTimeValue(t,r,e=0,i){return{hours:Math.max(0,Math.min(t,23
|
|
|
2311
746
|
${this.renderColumnPicker()}
|
|
2312
747
|
${this.renderActions()}
|
|
2313
748
|
</div>
|
|
2314
|
-
`:
|
|
749
|
+
`:r}renderColumnPicker(){const e=this.selectionController.getSelectedTime(),i=this.getConfig();return t`
|
|
2315
750
|
<div class="time-picker__columns" part="columns">
|
|
2316
|
-
${this.renderHourColumn(
|
|
2317
|
-
${this.renderMinuteColumn(
|
|
2318
|
-
${this.showSeconds?this.renderSecondColumn(
|
|
751
|
+
${this.renderHourColumn(e,i)}
|
|
752
|
+
${this.renderMinuteColumn(e)}
|
|
753
|
+
${this.showSeconds?this.renderSecondColumn(e):r}
|
|
2319
754
|
</div>
|
|
2320
|
-
`}renderHourColumn(
|
|
755
|
+
`}renderHourColumn(e,i){const r=i.format===p.TwelveHour?Array.from({length:12},((e,i)=>0===i?12:i)):Array.from({length:24},((e,i)=>i)),o=e&&i.format===p.TwelveHour?this.formattingController.formatHours(e.hours):null==e?void 0:e.hours;return t`
|
|
2321
756
|
<div class="time-picker__column" part="hour-column">
|
|
2322
757
|
<div class="time-picker__column-list">
|
|
2323
|
-
${
|
|
758
|
+
${r.map((r=>{let a=r;if(i.format===p.TwelveHour&&e){const i=this.formattingController.getPeriod(e.hours);a=12===r?i===v.AM?0:12:i===v.AM?r:r+12}const c=e||x,l=this.isHourValid(a,c);return t`
|
|
2324
759
|
<div
|
|
2325
|
-
class="time-picker__column-item ${!!
|
|
2326
|
-
@click="${
|
|
760
|
+
class="time-picker__column-item ${!!e&&r===o?"time-picker__column-item--selected":""} ${l?"":"time-picker__column-item--disabled"}"
|
|
761
|
+
@click="${l?()=>this.handleHourSelect(r,i.format):null}"
|
|
2327
762
|
>
|
|
2328
|
-
${
|
|
763
|
+
${r.toString().padStart(2,"0")}
|
|
2329
764
|
</div>
|
|
2330
765
|
`}))}
|
|
2331
766
|
</div>
|
|
2332
767
|
</div>
|
|
2333
|
-
`}renderMinuteColumn(
|
|
768
|
+
`}renderMinuteColumn(e){const i=Array.from({length:60},((e,i)=>i));return t`
|
|
2334
769
|
<div class="time-picker__column" part="minute-column">
|
|
2335
770
|
<div class="time-picker__column-list">
|
|
2336
|
-
${
|
|
771
|
+
${i.map((i=>{const r=e||x,o=this.isMinuteValid(i,r),a=!!e&&i===e.minutes;return t`
|
|
2337
772
|
<div
|
|
2338
|
-
class="time-picker__column-item ${
|
|
2339
|
-
@click="${o?()=>this.handleMinuteSelect(
|
|
773
|
+
class="time-picker__column-item ${a?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
|
|
774
|
+
@click="${o?()=>this.handleMinuteSelect(i):null}"
|
|
2340
775
|
>
|
|
2341
|
-
${
|
|
776
|
+
${i.toString().padStart(2,"0")}
|
|
2342
777
|
</div>
|
|
2343
778
|
`}))}
|
|
2344
779
|
</div>
|
|
2345
780
|
</div>
|
|
2346
|
-
`}renderSecondColumn(
|
|
781
|
+
`}renderSecondColumn(e){const i=Array.from({length:60},((e,i)=>i));return t`
|
|
2347
782
|
<div class="time-picker__column" part="second-column">
|
|
2348
783
|
<div class="time-picker__column-list">
|
|
2349
|
-
${
|
|
784
|
+
${i.map((i=>{const r=e||x,o=this.isSecondValid(i,r),a=!!e&&i===e.seconds;return t`
|
|
2350
785
|
<div
|
|
2351
|
-
class="time-picker__column-item ${
|
|
2352
|
-
@click="${o?()=>this.handleSecondSelect(
|
|
786
|
+
class="time-picker__column-item ${a?"time-picker__column-item--selected":""} ${o?"":"time-picker__column-item--disabled"}"
|
|
787
|
+
@click="${o?()=>this.handleSecondSelect(i):null}"
|
|
2353
788
|
>
|
|
2354
|
-
${
|
|
789
|
+
${i.toString().padStart(2,"0")}
|
|
2355
790
|
</div>
|
|
2356
791
|
`}))}
|
|
2357
792
|
</div>
|
|
2358
793
|
</div>
|
|
2359
|
-
`}renderActions(){return
|
|
794
|
+
`}renderActions(){return t`
|
|
2360
795
|
<div class="time-picker__actions">
|
|
2361
796
|
<nr-button
|
|
2362
797
|
type="ghost"
|
|
@@ -2373,8 +808,8 @@ class ht{static createTimeValue(t,r,e=0,i){return{hours:Math.max(0,Math.min(t,23
|
|
|
2373
808
|
OK
|
|
2374
809
|
</nr-button>
|
|
2375
810
|
</div>
|
|
2376
|
-
`}renderHelperText(){const
|
|
811
|
+
`}renderHelperText(){const e=this.validationMessage||this.helperText;if(!e)return r;const i=this.state===h.Error||!!this.validationMessage;return t`
|
|
2377
812
|
<div class="time-picker__helper-text ${i?"time-picker__helper-text--error":""}" part="helper-text">
|
|
2378
|
-
${
|
|
813
|
+
${e}
|
|
2379
814
|
</div>
|
|
2380
|
-
`}scrollToSelectedTime(){try{const
|
|
815
|
+
`}scrollToSelectedTime(){try{const e=this.selectionController.getSelectedTime();if(!e)return;this.scrollToSelectedHour(e),this.scrollToSelectedMinute(e),this.showSeconds&&this.scrollToSelectedSecond(e)}catch(e){console.warn("Failed to scroll to selected time:",e)}}scrollToSelectedHour(e){var i;const t=this.getConfig(),r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:first-child .time-picker__column-list");if(!r)return;let o;o=t.format===p.TwelveHour?0===e.hours||12===e.hours?12:e.hours>12?e.hours-12:e.hours:e.hours;const a=r.querySelector(`.time-picker__column-item:nth-child(${this.getHourIndex(o,t.format)+1})`);a&&a.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedMinute(e){var i;const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:nth-child(2) .time-picker__column-list");if(!t)return;const r=t.querySelector(`.time-picker__column-item:nth-child(${e.minutes+1})`);r&&r.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}scrollToSelectedSecond(e){var i;const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".time-picker__column:nth-child(3) .time-picker__column-list");if(!t)return;const r=t.querySelector(`.time-picker__column-item:nth-child(${e.seconds+1})`);r&&r.scrollIntoView({behavior:this.scrollBehavior,block:"center",inline:"nearest"})}getHourIndex(e,i){return i===p.TwelveHour&&12===e?0:e}handleComponentClick(e){e.stopPropagation()}handleDocumentClick(e){var i;if(this.dropdownController.isOpen){const t=e.target;this.contains(t)||(null===(i=this.shadowRoot)||void 0===i?void 0:i.contains(t))||(this.dropdownController.close(),this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0})))}}handleDropdownClick(e){e.stopPropagation()}handleOkClick(){this.dropdownController.close();const e=this.selectionController.getSelectedTime();e&&this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:e}})),this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0}))}handleInputBlur(){setTimeout((()=>{var e;const i=document.activeElement;this.contains(i)||(null===(e=this.shadowRoot)||void 0===e?void 0:e.contains(i))||this.dispatchEvent(new CustomEvent(_.BLUR,{bubbles:!0,composed:!0}))}),150)}handleInputClick(e){e.preventDefault(),e.stopPropagation(),this.disabled||this.dropdownController.isOpen||(this.dropdownController.open(),setTimeout((()=>{this.scrollToSelectedTime()}),50),this.dispatchEvent(new CustomEvent(_.FOCUS,{bubbles:!0,composed:!0})))}handleInputChange(e){var i;if(this.disabled)return;const t=(null===(i=e.detail)||void 0===i?void 0:i.value)||"";this.inputValue=t;const r=this.formattingController.parseInputValue(t);r?this.validateTime(r)?(this.selectionController.selectTime(r),this.value=this.formattingController.formatForInput(r),this.state=h.Default,this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10),this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:this.value,time:r}}))):this.state=h.Error:""===t?(this.selectionController.clearSelection(),this.value="",this.state=h.Default,this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{bubbles:!0,composed:!0,detail:{value:"",time:null}}))):this.state=h.Error,this.requestUpdate()}handleHourSelect(e,i){const t=this.selectionController.getSelectedTime()||N.getCurrentTime();let r=e;if(i===p.TwelveHour){const i=this.formattingController.getPeriod(t.hours);r=12===e?i===v.AM?0:12:i===v.AM?e:e+12}const o=Object.assign(Object.assign({},t),{hours:r});this.validateTime(o)&&(this.selectionController.selectTime(o),this.updateInputValue())}handleMinuteSelect(e){const i=this.selectionController.getSelectedTime()||N.getCurrentTime(),t=Object.assign(Object.assign({},i),{minutes:e});this.validateTime(t)&&(this.selectionController.selectTime(t),this.updateInputValue())}handleSecondSelect(e){const i=this.selectionController.getSelectedTime()||N.getCurrentTime(),t=Object.assign(Object.assign({},i),{seconds:e});this.validateTime(t)&&(this.selectionController.selectTime(t),this.updateInputValue())}shouldUpdateConstraints(e){return e.has("minTime")||e.has("maxTime")||e.has("disabledTimes")||e.has("enabledTimes")}updateConstraints(){const e={minTime:this.minTime,maxTime:this.maxTime,disabledTimes:this.disabledTimes||[],enabledTimes:this.enabledTimes};this.validationController.setConstraints(e)}setTimeFromValue(e){this.selectionController.setTimeFromString(e)&&(this.inputValue=e,this.requestUpdate(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),50))}updateInputValue(){const e=this.selectionController.getSelectedTime();if(e){const i=this.formattingController.formatForDisplay(e);this.inputValue=i,this.value=i,this.dispatchEvent(new CustomEvent(_.TIME_CHANGE,{detail:{value:i,time:e},bubbles:!0,composed:!0}))}}getConfig(){return{format:this.format,showSeconds:this.showSeconds,step:{hours:b.One,minutes:b.One,seconds:b.One},use12HourClock:this.format===p.TwelveHour,minuteInterval:1,secondInterval:1}}getCurrentTime(){return this.selectionController.getSelectedTime()||x}setTime(e){this.selectionController.selectTime(e),this.updateInputValue(),this.dropdownController.isOpen&&setTimeout((()=>{this.scrollToSelectedTime()}),10)}formatTime(e){return this.formattingController.formatForDisplay(e)}getFormatPlaceholder(){return this.format===p.TwelveHour?this.showSeconds?"HH:MM:SS AM/PM":"HH:MM AM/PM":this.showSeconds?"HH:MM:SS":"HH:MM"}parseTime(e){return this.formattingController.parseInputValue(e)}};F.styles=[R],V([o({type:String})],F.prototype,"value",void 0),V([o({type:String})],F.prototype,"name",void 0),V([o({type:String})],F.prototype,"placeholder",void 0),V([o({type:String})],F.prototype,"format",void 0),V([o({type:Boolean,attribute:"show-seconds"})],F.prototype,"showSeconds",void 0),V([o({type:Boolean})],F.prototype,"disabled",void 0),V([o({type:Boolean})],F.prototype,"readonly",void 0),V([o({type:Boolean})],F.prototype,"required",void 0),V([o({type:String,attribute:"min-time"})],F.prototype,"minTime",void 0),V([o({type:String,attribute:"max-time"})],F.prototype,"maxTime",void 0),V([o({type:Array,attribute:"disabled-times"})],F.prototype,"disabledTimes",void 0),V([o({type:Array,attribute:"enabled-times"})],F.prototype,"enabledTimes",void 0),V([o({type:String,attribute:"helper-text"})],F.prototype,"helperText",void 0),V([o({type:String})],F.prototype,"label",void 0),V([o({type:String})],F.prototype,"size",void 0),V([o({type:String})],F.prototype,"variant",void 0),V([o({type:String})],F.prototype,"placement",void 0),V([o({type:String,attribute:"scroll-behavior"})],F.prototype,"scrollBehavior",void 0),V([a()],F.prototype,"inputValue",void 0),V([a()],F.prototype,"state",void 0),V([a()],F.prototype,"validationMessage",void 0),F=V([c("nr-timepicker")],F);export{E as CLOCK_CONTAINER_CLASS,A as CLOCK_FACE,$ as DEFAULT_12H_TIME_FORMAT,M as DEFAULT_12H_TIME_FORMAT_WITH_SECONDS,z as DEFAULT_STEPS,w as DEFAULT_TIME_CONFIG,T as DEFAULT_TIME_FORMAT,y as DEFAULT_TIME_FORMATS,f as DEFAULT_TIME_FORMATS_WITH_SECONDS,S as DEFAULT_TIME_FORMAT_WITH_SECONDS,x as EMPTY_TIME_VALUE,F as NrTimePickerElement,H as TIME_BOUNDARIES,C as TIME_INPUT_FIELD_ID,I as TIME_PICKER_CLASSES,g as TIME_PICKER_CONSTANTS,_ as TIME_PICKER_EVENTS,O as TIME_VALIDATION_PATTERNS,p as TimeFormat,v as TimePeriod,U as TimePickerFormattingController,m as TimePickerMode,k as TimePickerPlacement,D as TimePickerSelectionController,u as TimePickerSize,h as TimePickerState,j as TimePickerValidationController,d as TimePickerVariant,b as TimeStep,N as TimeUtils};
|