fluent-svelte-extra 2.2.2 → 2.2.4
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.
|
@@ -28,6 +28,7 @@ let mousePosition = {
|
|
|
28
28
|
x: 0,
|
|
29
29
|
y: 0
|
|
30
30
|
};
|
|
31
|
+
let justClosed = false;
|
|
31
32
|
$: dispatch(open ? "open" : "close");
|
|
32
33
|
$: if (menu && tabbable(menuElement).length > 0)
|
|
33
34
|
tabbable(menuElement)[0].focus();
|
|
@@ -42,6 +43,8 @@ $: if (anchorElement) {
|
|
|
42
43
|
menuPosition.y = 0;
|
|
43
44
|
}
|
|
44
45
|
async function handleContextMenu({ clientX, clientY }) {
|
|
46
|
+
if (justClosed)
|
|
47
|
+
return;
|
|
45
48
|
open = true;
|
|
46
49
|
mousePosition = {
|
|
47
50
|
x: clientX,
|
|
@@ -58,6 +61,20 @@ function mountMenu(node) {
|
|
|
58
61
|
destroy: () => node.remove()
|
|
59
62
|
};
|
|
60
63
|
}
|
|
64
|
+
function handleOuterMousedown() {
|
|
65
|
+
open = false;
|
|
66
|
+
justClosed = true;
|
|
67
|
+
const handleMouseUp = () => {
|
|
68
|
+
setTimeout(() => {
|
|
69
|
+
justClosed = false;
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
window.addEventListener("mouseup", handleMouseUp, { once: true, capture: true });
|
|
73
|
+
setTimeout(() => {
|
|
74
|
+
window.removeEventListener("mouseup", handleMouseUp, { capture: true });
|
|
75
|
+
justClosed = false;
|
|
76
|
+
}, 1000);
|
|
77
|
+
}
|
|
61
78
|
if (closeOnSelect) {
|
|
62
79
|
setContext("closeFlyout", () => {
|
|
63
80
|
dispatch("select");
|
|
@@ -77,7 +94,6 @@ if (closeOnSelect) {
|
|
|
77
94
|
on:click|preventDefault|stopPropagation={openBy.includes("leftClick")
|
|
78
95
|
? handleContextMenu
|
|
79
96
|
: undefined}
|
|
80
|
-
on:contextmenu={openBy.includes("rightClick") ? handleContextMenu : undefined}
|
|
81
97
|
bind:this={wrapperElement}
|
|
82
98
|
>
|
|
83
99
|
<slot />
|
|
@@ -88,7 +104,7 @@ if (closeOnSelect) {
|
|
|
88
104
|
use:externalMouseEvents={{ type: "mousedown" }}
|
|
89
105
|
on:contextmenu|stopPropagation={e => e.preventDefault()}
|
|
90
106
|
bind:this={anchorElement}
|
|
91
|
-
on:outermousedown={
|
|
107
|
+
on:outermousedown={handleOuterMousedown}
|
|
92
108
|
class="context-menu-anchor"
|
|
93
109
|
style="top: {menuPosition.y}px; left: {menuPosition.x}px;"
|
|
94
110
|
>
|
package/Slider/Slider.scss
CHANGED
|
@@ -60,6 +60,12 @@
|
|
|
60
60
|
transform: translateX(-50%);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
&hover-preview {
|
|
64
|
+
inset-inline-start: var(--slider-hover-position);
|
|
65
|
+
inset-block-end: calc(100% + 8px);
|
|
66
|
+
transform: translateX(-50%);
|
|
67
|
+
}
|
|
68
|
+
|
|
63
69
|
&tick {
|
|
64
70
|
flex-direction: column;
|
|
65
71
|
height: 100%;
|
|
@@ -118,6 +124,12 @@
|
|
|
118
124
|
transform: translateY(50%);
|
|
119
125
|
}
|
|
120
126
|
|
|
127
|
+
&hover-preview {
|
|
128
|
+
inset-block-end: var(--slider-hover-position);
|
|
129
|
+
inset-inline-start: calc(100% + 8px);
|
|
130
|
+
transform: translateY(50%);
|
|
131
|
+
}
|
|
132
|
+
|
|
121
133
|
&tick {
|
|
122
134
|
width: 100%;
|
|
123
135
|
padding: 0 6px;
|
|
@@ -194,6 +206,12 @@
|
|
|
194
206
|
background-color: var(--control-strong-stroke-default);
|
|
195
207
|
}
|
|
196
208
|
|
|
209
|
+
&-hover-preview {
|
|
210
|
+
position: absolute;
|
|
211
|
+
z-index: 30;
|
|
212
|
+
pointer-events: none;
|
|
213
|
+
}
|
|
214
|
+
|
|
197
215
|
&-tick-bar {
|
|
198
216
|
position: absolute;
|
|
199
217
|
z-index: -1;
|
package/Slider/Slider.svelte
CHANGED
|
@@ -51,6 +51,12 @@ export let bufferElement = null;
|
|
|
51
51
|
let dragging = false;
|
|
52
52
|
let holding = false;
|
|
53
53
|
let directionAwareReverse = false;
|
|
54
|
+
let activePointerEvent = null;
|
|
55
|
+
// Hover preview state
|
|
56
|
+
let hoveringRail = false;
|
|
57
|
+
let hoverPreviewValue = min;
|
|
58
|
+
let hoverValuePercentage = 0;
|
|
59
|
+
let hoverPositionPercentage = 0;
|
|
54
60
|
// also adding client height will enable users to create distinct shapes for the thumb
|
|
55
61
|
let thumbClientWidth = 20;
|
|
56
62
|
let thumbClientHeight = 20;
|
|
@@ -69,64 +75,130 @@ const forwardEvents = createEventForwarder(get_current_component(), [
|
|
|
69
75
|
"end",
|
|
70
76
|
"beforeinput"
|
|
71
77
|
]);
|
|
78
|
+
const clamp = (v, minValue, maxValue) => Math.min(maxValue, Math.max(minValue, v));
|
|
72
79
|
// Divides the current value minus the minimum value
|
|
73
80
|
// by the difference between the max and min values,
|
|
74
81
|
// and multiplies by 100 to get a percentage.
|
|
75
|
-
const valueToPercentage =
|
|
76
|
-
|
|
82
|
+
const valueToPercentage = (v) => {
|
|
83
|
+
if (max === min)
|
|
84
|
+
return 0;
|
|
85
|
+
return ((v - min) / (max - min)) * 100;
|
|
86
|
+
};
|
|
87
|
+
const bufferValueToPercentage = (v) => {
|
|
88
|
+
if (max === 0)
|
|
89
|
+
return 0;
|
|
90
|
+
return (v * 100) / max;
|
|
91
|
+
};
|
|
77
92
|
function cancelMove() {
|
|
78
93
|
holding = false;
|
|
79
94
|
dragging = false;
|
|
95
|
+
activePointerEvent = null;
|
|
80
96
|
if (sliderThumbHolding) {
|
|
81
97
|
sliderThumbHolding = false;
|
|
82
98
|
dispatch("userHoldEnd");
|
|
83
99
|
}
|
|
84
100
|
}
|
|
85
|
-
function handleMove() {
|
|
101
|
+
function handleMove(event) {
|
|
102
|
+
activePointerEvent = event;
|
|
86
103
|
if (holding)
|
|
87
104
|
dragging = true;
|
|
105
|
+
if (hoveringRail)
|
|
106
|
+
updateHoverPreview(event);
|
|
88
107
|
}
|
|
89
|
-
function
|
|
108
|
+
function getClientPoint(event) {
|
|
109
|
+
var _a;
|
|
110
|
+
if ("touches" in event) {
|
|
111
|
+
const touch = (_a = event.touches[0]) !== null && _a !== void 0 ? _a : event.changedTouches[0];
|
|
112
|
+
if (!touch)
|
|
113
|
+
return null;
|
|
114
|
+
return {
|
|
115
|
+
x: touch.clientX,
|
|
116
|
+
y: touch.clientY
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
return {
|
|
120
|
+
x: event.clientX,
|
|
121
|
+
y: event.clientY
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
function percentToStepValue(percent) {
|
|
125
|
+
const safeStep = step > 0 ? step : 1;
|
|
126
|
+
let nextStep = min + Math.round(((max - min) * percent) / safeStep) * safeStep;
|
|
127
|
+
if (nextStep <= min)
|
|
128
|
+
nextStep = min;
|
|
129
|
+
else if (nextStep >= max)
|
|
130
|
+
nextStep = max;
|
|
131
|
+
return nextStep;
|
|
132
|
+
}
|
|
133
|
+
function getPointerData(event) {
|
|
90
134
|
if (disabled || !railElement)
|
|
91
|
-
return;
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
|
|
135
|
+
return null;
|
|
136
|
+
const point = getClientPoint(event);
|
|
137
|
+
if (!point)
|
|
138
|
+
return null;
|
|
139
|
+
const rect = railElement.getBoundingClientRect();
|
|
95
140
|
const thumbSize = orientation === "horizontal" ? thumbClientWidth : thumbClientHeight;
|
|
96
|
-
const totalLength = orientation === "horizontal" ? width : height;
|
|
141
|
+
const totalLength = orientation === "horizontal" ? rect.width : rect.height;
|
|
97
142
|
const effectiveLength = totalLength - thumbSize;
|
|
98
|
-
if (effectiveLength <= 0)
|
|
99
|
-
return;
|
|
143
|
+
if (totalLength <= 0 || effectiveLength <= 0)
|
|
144
|
+
return null;
|
|
100
145
|
let distanceFromMin = 0;
|
|
146
|
+
let visualPercent = 0;
|
|
101
147
|
if (orientation === "horizontal") {
|
|
148
|
+
const visualDistance = clamp(point.x - rect.left, 0, rect.width);
|
|
149
|
+
visualPercent = visualDistance / rect.width;
|
|
102
150
|
if (directionAwareReverse) {
|
|
103
|
-
distanceFromMin = right -
|
|
151
|
+
distanceFromMin = rect.right - point.x;
|
|
104
152
|
}
|
|
105
153
|
else {
|
|
106
|
-
distanceFromMin =
|
|
154
|
+
distanceFromMin = point.x - rect.left;
|
|
107
155
|
}
|
|
108
156
|
}
|
|
109
157
|
else {
|
|
158
|
+
const visualDistance = clamp(rect.bottom - point.y, 0, rect.height);
|
|
159
|
+
visualPercent = visualDistance / rect.height;
|
|
110
160
|
if (directionAwareReverse) {
|
|
111
|
-
distanceFromMin =
|
|
161
|
+
distanceFromMin = point.y - rect.top;
|
|
112
162
|
}
|
|
113
163
|
else {
|
|
114
|
-
distanceFromMin = bottom -
|
|
164
|
+
distanceFromMin = rect.bottom - point.y;
|
|
115
165
|
}
|
|
116
166
|
}
|
|
117
167
|
const relativePos = distanceFromMin - thumbSize / 2;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
value
|
|
168
|
+
const logicalPercent = clamp(relativePos / effectiveLength, 0, 1);
|
|
169
|
+
return {
|
|
170
|
+
value: percentToStepValue(logicalPercent),
|
|
171
|
+
valuePercentage: logicalPercent * 100,
|
|
172
|
+
positionPercentage: visualPercent * 100
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
function calculateValue(event) {
|
|
176
|
+
const pointerData = getPointerData(event);
|
|
177
|
+
if (!pointerData)
|
|
178
|
+
return;
|
|
179
|
+
dispatch("userChange", [value, pointerData.value]);
|
|
180
|
+
value = pointerData.value;
|
|
181
|
+
}
|
|
182
|
+
function updateHoverPreview(event) {
|
|
183
|
+
const pointerData = getPointerData(event);
|
|
184
|
+
if (!pointerData)
|
|
185
|
+
return;
|
|
186
|
+
hoveringRail = true;
|
|
187
|
+
hoverPreviewValue = pointerData.value;
|
|
188
|
+
hoverValuePercentage = pointerData.valuePercentage;
|
|
189
|
+
hoverPositionPercentage = pointerData.positionPercentage;
|
|
190
|
+
dispatch("hoverChange", {
|
|
191
|
+
value: hoverPreviewValue,
|
|
192
|
+
percentage: hoverValuePercentage,
|
|
193
|
+
positionPercentage: hoverPositionPercentage
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
function clearHoverPreview() {
|
|
197
|
+
hoveringRail = false;
|
|
198
|
+
}
|
|
199
|
+
function handleHoverMove(event) {
|
|
200
|
+
activePointerEvent = event;
|
|
201
|
+
updateHoverPreview(event);
|
|
130
202
|
}
|
|
131
203
|
function handleArrowKeys(event) {
|
|
132
204
|
const { key } = event;
|
|
@@ -153,6 +225,8 @@ function handleTouchStart(event) {
|
|
|
153
225
|
if (event.cancelable)
|
|
154
226
|
event.preventDefault();
|
|
155
227
|
holding = true;
|
|
228
|
+
activePointerEvent = event;
|
|
229
|
+
updateHoverPreview(event);
|
|
156
230
|
}
|
|
157
231
|
function linearScale(input, output) {
|
|
158
232
|
return (value) => {
|
|
@@ -188,8 +262,8 @@ $: {
|
|
|
188
262
|
value = min;
|
|
189
263
|
else if (value >= max)
|
|
190
264
|
value = max;
|
|
191
|
-
if (dragging) {
|
|
192
|
-
calculateValue(
|
|
265
|
+
if (dragging && activePointerEvent) {
|
|
266
|
+
calculateValue(activePointerEvent);
|
|
193
267
|
dragging = false;
|
|
194
268
|
}
|
|
195
269
|
}
|
|
@@ -214,17 +288,24 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
214
288
|
-->
|
|
215
289
|
<div
|
|
216
290
|
use:forwardEvents
|
|
217
|
-
on:mousedown|preventDefault={() => {
|
|
291
|
+
on:mousedown|preventDefault={(event) => {
|
|
218
292
|
holding = true;
|
|
219
293
|
dragging = true;
|
|
294
|
+
activePointerEvent = event;
|
|
295
|
+
updateHoverPreview(event);
|
|
220
296
|
}}
|
|
297
|
+
on:mousemove={handleHoverMove}
|
|
298
|
+
on:mouseleave={clearHoverPreview}
|
|
221
299
|
on:mouseup|preventDefault={() => {
|
|
222
300
|
dispatch("userUpdate", value);
|
|
223
301
|
}}
|
|
302
|
+
on:touchmove={handleHoverMove}
|
|
224
303
|
on:touchend|preventDefault={() => {
|
|
304
|
+
clearHoverPreview();
|
|
225
305
|
dispatch("userUpdate", value);
|
|
226
306
|
}}
|
|
227
307
|
on:touchcancel|preventDefault={() => {
|
|
308
|
+
clearHoverPreview();
|
|
228
309
|
dispatch("userUpdate", value);
|
|
229
310
|
}}
|
|
230
311
|
on:touchstart={handleTouchStart}
|
|
@@ -301,6 +382,20 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
301
382
|
{/if}
|
|
302
383
|
</div>
|
|
303
384
|
|
|
385
|
+
{#if hoveringRail && $$slots["hover-preview"] && !disabled}
|
|
386
|
+
<div
|
|
387
|
+
class="slider-hover-preview"
|
|
388
|
+
style="--fds-slider-hover-position: {hoverPositionPercentage}%"
|
|
389
|
+
>
|
|
390
|
+
<slot
|
|
391
|
+
name="hover-preview"
|
|
392
|
+
value={hoverPreviewValue}
|
|
393
|
+
percentage={hoverValuePercentage}
|
|
394
|
+
positionPercentage={hoverPositionPercentage}
|
|
395
|
+
/>
|
|
396
|
+
</div>
|
|
397
|
+
{/if}
|
|
398
|
+
|
|
304
399
|
{#if ticks}
|
|
305
400
|
<div class="slider-tick-bar placement-{tickPlacement}" bind:this={tickBarElement}>
|
|
306
401
|
{#each ticks as tick}
|
|
@@ -315,4 +410,4 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
315
410
|
<input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputElement} />
|
|
316
411
|
</div>
|
|
317
412
|
|
|
318
|
-
<style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start;position:relative}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage);position:absolute;z-index:1}.slider.orientation-horizontal .slider-buffer-track{block-size:100%;inline-size:var(--fds-buffer-percentage);position:absolute}.slider.orientation-horizontal .slider-loading-track{width:100%;z-index:1}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-buffer-track{background-color:var(--fds-control-strong-stroke-default)}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
|
|
413
|
+
<style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start;position:relative}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage);position:absolute;z-index:1}.slider.orientation-horizontal .slider-buffer-track{block-size:100%;inline-size:var(--fds-buffer-percentage);position:absolute}.slider.orientation-horizontal .slider-loading-track{width:100%;z-index:1}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-hover-preview{inset-block-end:calc(100% + 8px);inset-inline-start:var(--fds-slider-hover-position);transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-hover-preview{inset-block-end:var(--fds-slider-hover-position);inset-inline-start:calc(100% + 8px);transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-buffer-track{background-color:var(--fds-control-strong-stroke-default)}.slider-hover-preview{pointer-events:none;position:absolute;z-index:30}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
|
|
@@ -33,6 +33,7 @@ declare const __propDef: {
|
|
|
33
33
|
userHoldStart: CustomEvent<any>;
|
|
34
34
|
userHoldEnd: CustomEvent<any>;
|
|
35
35
|
userChange: CustomEvent<any>;
|
|
36
|
+
hoverChange: CustomEvent<any>;
|
|
36
37
|
change: CustomEvent<any>;
|
|
37
38
|
end: CustomEvent<any>;
|
|
38
39
|
} & {
|
|
@@ -44,6 +45,11 @@ declare const __propDef: {
|
|
|
44
45
|
suffix: string;
|
|
45
46
|
value: number;
|
|
46
47
|
};
|
|
48
|
+
'hover-preview': {
|
|
49
|
+
value: number;
|
|
50
|
+
percentage: number;
|
|
51
|
+
positionPercentage: number;
|
|
52
|
+
};
|
|
47
53
|
};
|
|
48
54
|
};
|
|
49
55
|
export declare type SliderProps = typeof __propDef.props;
|
package/package.json
CHANGED