@juspay/svelte-ui-components 2.73.0 → 2.73.1
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.
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
presetCheckmark = false,
|
|
31
31
|
showDateInputs = false,
|
|
32
32
|
showTimeSelection = false,
|
|
33
|
+
timeSelectionLayout = 'toggle',
|
|
33
34
|
presetToggle = false,
|
|
34
35
|
placeholder = 'Select date',
|
|
35
36
|
dualMonth,
|
|
@@ -79,6 +80,14 @@
|
|
|
79
80
|
let endTimeDisplay: string = $state('11:59 PM');
|
|
80
81
|
let showTimeRow: boolean = $state(false);
|
|
81
82
|
|
|
83
|
+
// Inline time layout (timeSelectionLayout="inline"): the start/end time inputs
|
|
84
|
+
// render beside their date inputs on the same row, always visible — no clock
|
|
85
|
+
// toggle and no collapsible row. All seeding/validation/fold logic is shared
|
|
86
|
+
// with the default toggle layout (it keys off showTimeSelection, not the layout).
|
|
87
|
+
const isInlineTime: boolean = $derived(
|
|
88
|
+
showTimeSelection && timeSelectionLayout === 'inline' && mode === 'range'
|
|
89
|
+
);
|
|
90
|
+
|
|
82
91
|
const MS_PER_DAY = 24 * 60 * 60 * 1000;
|
|
83
92
|
|
|
84
93
|
function isBaseDisabledDate(date: Date): boolean {
|
|
@@ -668,32 +677,82 @@
|
|
|
668
677
|
<!-- Calendar area -->
|
|
669
678
|
<div class="drp-calendars">
|
|
670
679
|
{#if (showDateInputs || showTimeSelection) && mode === 'range'}
|
|
671
|
-
<div class="drp-datetime-header">
|
|
680
|
+
<div class="drp-datetime-header" class:drp-datetime-header-inline={isInlineTime}>
|
|
672
681
|
<div class="drp-date-input-row">
|
|
673
|
-
|
|
674
|
-
<
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
682
|
+
{#if isInlineTime}
|
|
683
|
+
<div class="drp-date-time-group">
|
|
684
|
+
<div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
|
|
685
|
+
<span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span
|
|
686
|
+
>
|
|
687
|
+
</div>
|
|
688
|
+
<div
|
|
689
|
+
class="drp-time-input drp-time-input-inline"
|
|
690
|
+
class:drp-time-input-invalid={!isStartTimeValid}
|
|
691
|
+
>
|
|
692
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
693
|
+
<span class="drp-time-input-icon" aria-hidden="true">{@html clockSvg}</span>
|
|
694
|
+
<input
|
|
695
|
+
type="text"
|
|
696
|
+
class="drp-time-field"
|
|
697
|
+
bind:value={startTimeDisplay}
|
|
698
|
+
maxlength="8"
|
|
699
|
+
placeholder="12:00 AM"
|
|
700
|
+
aria-label="Start time"
|
|
701
|
+
aria-invalid={!isStartTimeValid}
|
|
702
|
+
data-pw={testId ? `${testId}-start-time` : null}
|
|
703
|
+
/>
|
|
704
|
+
</div>
|
|
705
|
+
</div>
|
|
706
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
707
|
+
<span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
|
|
708
|
+
<div class="drp-date-time-group">
|
|
709
|
+
<div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
|
|
710
|
+
<span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
|
|
711
|
+
</div>
|
|
712
|
+
<div
|
|
713
|
+
class="drp-time-input drp-time-input-inline"
|
|
714
|
+
class:drp-time-input-invalid={!isEndTimeValid}
|
|
715
|
+
>
|
|
716
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
717
|
+
<span class="drp-time-input-icon" aria-hidden="true">{@html clockSvg}</span>
|
|
718
|
+
<input
|
|
719
|
+
type="text"
|
|
720
|
+
class="drp-time-field"
|
|
721
|
+
bind:value={endTimeDisplay}
|
|
722
|
+
maxlength="8"
|
|
723
|
+
placeholder="11:59 PM"
|
|
724
|
+
aria-label="End time"
|
|
725
|
+
aria-invalid={!isEndTimeValid}
|
|
726
|
+
data-pw={testId ? `${testId}-end-time` : null}
|
|
727
|
+
/>
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
{:else}
|
|
731
|
+
<div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
|
|
732
|
+
<span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span>
|
|
733
|
+
</div>
|
|
734
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
735
|
+
<span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
|
|
736
|
+
<div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
|
|
737
|
+
<span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
|
|
738
|
+
</div>
|
|
739
|
+
{#if showTimeSelection}
|
|
740
|
+
<button
|
|
741
|
+
type="button"
|
|
742
|
+
class="drp-time-toggle"
|
|
743
|
+
class:drp-time-toggle-active={showTimeRow}
|
|
744
|
+
aria-label="Toggle time selection"
|
|
745
|
+
aria-pressed={showTimeRow}
|
|
746
|
+
data-pw={testId ? `${testId}-time-toggle` : null}
|
|
747
|
+
onclick={() => (showTimeRow = !showTimeRow)}
|
|
748
|
+
>
|
|
749
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
750
|
+
<span class="drp-time-toggle-icon" aria-hidden="true">{@html clockSvg}</span>
|
|
751
|
+
</button>
|
|
752
|
+
{/if}
|
|
694
753
|
{/if}
|
|
695
754
|
</div>
|
|
696
|
-
{#if showTimeSelection && showTimeRow}
|
|
755
|
+
{#if showTimeSelection && !isInlineTime && showTimeRow}
|
|
697
756
|
<div class="drp-time-input-row">
|
|
698
757
|
<div class="drp-time-input" class:drp-time-input-invalid={!isStartTimeValid}>
|
|
699
758
|
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
@@ -1207,6 +1266,25 @@
|
|
|
1207
1266
|
color: var(--drp-time-field-placeholder-color, #aaaaaa);
|
|
1208
1267
|
}
|
|
1209
1268
|
|
|
1269
|
+
/* ── Inline time layout (timeSelectionLayout="inline") ── */
|
|
1270
|
+
/* Each date input is paired with its time input on the same row: the date box
|
|
1271
|
+
flexes to fill, the time input takes a fixed compact width beside it. */
|
|
1272
|
+
.drp-date-time-group {
|
|
1273
|
+
display: flex;
|
|
1274
|
+
align-items: center;
|
|
1275
|
+
flex: 1;
|
|
1276
|
+
min-width: 0;
|
|
1277
|
+
gap: var(--drp-datetime-inline-gap, 8px);
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
.drp-date-time-group .drp-date-input {
|
|
1281
|
+
flex: 1;
|
|
1282
|
+
}
|
|
1283
|
+
|
|
1284
|
+
.drp-time-input.drp-time-input-inline {
|
|
1285
|
+
flex: 0 0 var(--drp-time-inline-width, 116px);
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1210
1288
|
/* ── Compare calendar slot ── */
|
|
1211
1289
|
.drp-compare-section {
|
|
1212
1290
|
display: flex;
|
|
@@ -15,6 +15,7 @@ export type DateRangePreset = {
|
|
|
15
15
|
};
|
|
16
16
|
export type DateRangePickerMode = 'range' | 'single';
|
|
17
17
|
export type DateRangePickerAlign = 'left' | 'right';
|
|
18
|
+
export type DateRangePickerTimeLayout = 'toggle' | 'inline';
|
|
18
19
|
export type OptionalDateRangePickerProperties = {
|
|
19
20
|
/** Currently selected start of range (bindable). */
|
|
20
21
|
rangeStart?: Date | null;
|
|
@@ -52,6 +53,14 @@ export type OptionalDateRangePickerProperties = {
|
|
|
52
53
|
* Opt-in. Default: false.
|
|
53
54
|
*/
|
|
54
55
|
showTimeSelection?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* How the time-of-day inputs are presented when showTimeSelection is on (range mode):
|
|
58
|
+
* 'toggle' (default) shows a clock button that reveals a collapsible start/end time
|
|
59
|
+
* row below the dates; 'inline' renders each time input beside its date input on the
|
|
60
|
+
* same row, always visible, with no toggle. Has no effect unless showTimeSelection is
|
|
61
|
+
* true. Default: 'toggle'.
|
|
62
|
+
*/
|
|
63
|
+
timeSelectionLayout?: DateRangePickerTimeLayout;
|
|
55
64
|
/**
|
|
56
65
|
* Make presets toggle instead of being one-way: clicking the already-selected
|
|
57
66
|
* preset deselects it and reverts the draft to the committed selection. Lets a
|