@juspay/svelte-ui-components 2.45.1 → 2.47.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.
Files changed (4) hide show
  1. package/dist/Slider/Slider.svelte +13 -3
  2. package/dist/Slider/properties.d.ts +1 -0
  3. package/dist/Status/Status.svelte +7 -3
  4. package/package.json +1 -1
package/dist/Slider/Slider.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  step = 1,
9
9
  disabled = false,
10
10
  showValue = false,
11
+ labelFormatter,
11
12
  testId,
12
13
  onchange,
13
14
  oninput,
@@ -15,6 +16,7 @@
15
16
  }: SliderProperties = $props();
16
17
 
17
18
  let percentage = $derived(((value - min) / (max - min)) * 100);
19
+ let displayValue = $derived(labelFormatter ? labelFormatter(value) : String(value));
18
20
 
19
21
  function handleInput(e: Event) {
20
22
  if (e.target instanceof HTMLInputElement) {
@@ -46,7 +48,7 @@
46
48
  style="--slider-fill-percent: {percentage}%"
47
49
  />
48
50
  {#if showValue}
49
- <span class="slider-value">{value}</span>
51
+ <span class="slider-value">{displayValue}</span>
50
52
  {/if}
51
53
  </div>
52
54
 
@@ -99,8 +101,11 @@
99
101
  background: var(--slider-thumb-background, #ffffff);
100
102
  border: var(--slider-thumb-border, 2px solid #2196f3);
101
103
  box-shadow: var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
104
+ opacity: var(--slider-thumb-opacity, 1);
102
105
  cursor: pointer;
103
- transition: transform 0.15s ease;
106
+ transition:
107
+ transform 0.15s ease,
108
+ opacity 0.15s ease;
104
109
  }
105
110
 
106
111
  .slider-input::-moz-range-thumb {
@@ -110,16 +115,21 @@
110
115
  background: var(--slider-thumb-background, #ffffff);
111
116
  border: var(--slider-thumb-border, 2px solid #2196f3);
112
117
  box-shadow: var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
118
+ opacity: var(--slider-thumb-opacity, 1);
113
119
  cursor: pointer;
114
- transition: transform 0.15s ease;
120
+ transition:
121
+ transform 0.15s ease,
122
+ opacity 0.15s ease;
115
123
  }
116
124
 
117
125
  .slider-input:hover::-webkit-slider-thumb {
118
126
  transform: scale(var(--slider-thumb-hover-scale, 1.15));
127
+ opacity: var(--slider-thumb-hover-opacity, var(--slider-thumb-opacity, 1));
119
128
  }
120
129
 
121
130
  .slider-input:hover::-moz-range-thumb {
122
131
  transform: scale(var(--slider-thumb-hover-scale, 1.15));
132
+ opacity: var(--slider-thumb-hover-opacity, var(--slider-thumb-opacity, 1));
123
133
  }
124
134
 
125
135
  .slider-input:focus-visible::-webkit-slider-thumb {
package/dist/Slider/properties.d.ts CHANGED
@@ -8,6 +8,7 @@ export type OptionalSliderProperties = {
8
8
  step?: number;
9
9
  disabled?: boolean;
10
10
  showValue?: boolean;
11
+ labelFormatter?: (value: number) => string;
11
12
  testId?: string;
12
13
  classes?: string;
13
14
  };
package/dist/Status/Status.svelte CHANGED
@@ -46,12 +46,16 @@
46
46
  margin-bottom: 25px;
47
47
  }
48
48
 
49
- .order-status {
50
- flex-direction: column;
49
+ .background {
50
+ min-height: var(--status-min-height, 100vh);
51
51
  display: flex;
52
52
  justify-content: center;
53
53
  align-items: center;
54
- min-height: 100vh;
54
+ }
55
+
56
+ .order-status {
57
+ flex-direction: column;
58
+ display: flex;
55
59
  font-family: var(--order-font, inherit);
56
60
  font-size: var(--order-font-size, 14px);
57
61
  text-align: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "2.45.1",
3
+ "version": "2.47.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",