@juspay/svelte-ui-components 2.64.1 → 2.66.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
button {
|
|
88
88
|
max-height: var(--button-max-height);
|
|
89
89
|
max-width: var(--button-max-width);
|
|
90
|
+
min-width: var(--button-min-width);
|
|
90
91
|
font-family: var(--button-font-family);
|
|
91
92
|
font-weight: var(--button-font-weight, 500);
|
|
92
93
|
font-size: var(--button-font-size, 14px);
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
placeholder = 'Select date',
|
|
22
22
|
dualMonth,
|
|
23
23
|
timePicker,
|
|
24
|
+
align = 'left',
|
|
24
25
|
compareStart = $bindable(null),
|
|
25
26
|
compareEnd = $bindable(null),
|
|
26
27
|
compareCalendar,
|
|
@@ -535,6 +536,8 @@
|
|
|
535
536
|
<div
|
|
536
537
|
bind:this={panelRef}
|
|
537
538
|
class="drp-panel"
|
|
539
|
+
class:drp-panel-align-left={align === 'left'}
|
|
540
|
+
class:drp-panel-align-right={align === 'right'}
|
|
538
541
|
role="dialog"
|
|
539
542
|
aria-label="Date range picker"
|
|
540
543
|
aria-modal="true"
|
|
@@ -747,7 +750,6 @@
|
|
|
747
750
|
.drp-panel {
|
|
748
751
|
position: absolute;
|
|
749
752
|
top: calc(100% + var(--drp-panel-offset, 6px));
|
|
750
|
-
left: 0;
|
|
751
753
|
z-index: var(--drp-panel-z-index, 1000);
|
|
752
754
|
background: var(--drp-panel-background, inherit);
|
|
753
755
|
border: var(--drp-panel-border, 1px solid #e0e0e0);
|
|
@@ -760,6 +762,16 @@
|
|
|
760
762
|
overflow: hidden;
|
|
761
763
|
}
|
|
762
764
|
|
|
765
|
+
.drp-panel-align-left {
|
|
766
|
+
left: 0;
|
|
767
|
+
right: auto;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
.drp-panel-align-right {
|
|
771
|
+
right: 0;
|
|
772
|
+
left: auto;
|
|
773
|
+
}
|
|
774
|
+
|
|
763
775
|
.drp-panel-inner {
|
|
764
776
|
display: flex;
|
|
765
777
|
flex-direction: row;
|
|
@@ -14,6 +14,7 @@ export type DateRangePreset = {
|
|
|
14
14
|
group?: string;
|
|
15
15
|
};
|
|
16
16
|
export type DateRangePickerMode = 'range' | 'single';
|
|
17
|
+
export type DateRangePickerAlign = 'left' | 'right';
|
|
17
18
|
export type OptionalDateRangePickerProperties = {
|
|
18
19
|
/** Currently selected start of range (bindable). */
|
|
19
20
|
rangeStart?: Date | null;
|
|
@@ -43,6 +44,8 @@ export type OptionalDateRangePickerProperties = {
|
|
|
43
44
|
placeholder?: string;
|
|
44
45
|
/** Show two months side by side. Defaults to true for range mode, false for single. */
|
|
45
46
|
dualMonth?: boolean;
|
|
47
|
+
/** Align the dropdown panel to the left or right edge of the trigger. Default: 'left'. */
|
|
48
|
+
align?: DateRangePickerAlign;
|
|
46
49
|
/** Snippet rendered in the time-picker slot. Consumer controls all time UI. */
|
|
47
50
|
timePicker?: Snippet;
|
|
48
51
|
/** Start of compare range (bindable). Used when compareCalendar snippet is provided. */
|