material 3.3.2 → 3.3.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.
- package/README.md +2 -2
- package/dist/components/menu/features/controller.js +23 -75
- package/dist/components/menu/features/opener.js +3 -15
- package/dist/components/menu/types.d.ts +1 -0
- package/dist/components/slider/config.js +0 -46
- package/dist/components/slider/features/controller.js +805 -171
- package/dist/components/slider/features/dom.js +29 -62
- package/dist/components/slider/features/index.js +1 -3
- package/dist/components/slider/features/states.js +2 -30
- package/dist/components/slider/slider.js +3 -6
- package/dist/components/slider/types.d.ts +0 -26
- package/dist/components/split-button/features/menu-on-demand.js +141 -0
- package/dist/components/split-button/features/menu.js +3 -4
- package/dist/core/canvas/resize.d.ts +1 -1
- package/dist/core/canvas/resize.js +24 -11
- package/dist/core/dom/classes.js +17 -118
- package/dist/core/dom/create.d.ts +0 -2
- package/dist/core/dom/create.js +0 -72
- package/dist/core/utils/mobile.js +9 -29
- package/dist/elements/preupgrade/badge.css +1 -1
- package/dist/elements/preupgrade/bottom-app-bar.css +1 -1
- package/dist/elements/preupgrade/bottom-sheet.css +1 -1
- package/dist/elements/preupgrade/button-group.css +1 -1
- package/dist/elements/preupgrade/button.css +1 -1
- package/dist/elements/preupgrade/card.css +1 -1
- package/dist/elements/preupgrade/carousel.css +1 -1
- package/dist/elements/preupgrade/checkbox.css +1 -1
- package/dist/elements/preupgrade/chips.css +1 -1
- package/dist/elements/preupgrade/datepicker.css +1 -1
- package/dist/elements/preupgrade/dialog.css +1 -1
- package/dist/elements/preupgrade/divider.css +1 -1
- package/dist/elements/preupgrade/drawer.css +1 -1
- package/dist/elements/preupgrade/extended-fab.css +1 -1
- package/dist/elements/preupgrade/fab-menu.css +1 -1
- package/dist/elements/preupgrade/fab.css +1 -1
- package/dist/elements/preupgrade/icon-button.css +1 -1
- package/dist/elements/preupgrade/list.css +1 -1
- package/dist/elements/preupgrade/loading-indicator.css +1 -1
- package/dist/elements/preupgrade/menu.css +1 -1
- package/dist/elements/preupgrade/navigation-bar.css +1 -1
- package/dist/elements/preupgrade/navigation-rail.css +1 -1
- package/dist/elements/preupgrade/progress.css +1 -1
- package/dist/elements/preupgrade/radios.css +1 -1
- package/dist/elements/preupgrade/search.css +1 -1
- package/dist/elements/preupgrade/select.css +1 -1
- package/dist/elements/preupgrade/side-sheet.css +1 -1
- package/dist/elements/preupgrade/slider.css +1 -1
- package/dist/elements/preupgrade/snackbar.css +1 -1
- package/dist/elements/preupgrade/split-button.css +1 -1
- package/dist/elements/preupgrade/switch.css +1 -1
- package/dist/elements/preupgrade/tabs.css +1 -1
- package/dist/elements/preupgrade/text-field.css +1 -1
- package/dist/elements/preupgrade/timepicker.css +1 -1
- package/dist/elements/preupgrade/toolbar.css +1 -1
- package/dist/elements/preupgrade/tooltip.css +1 -1
- package/dist/elements/preupgrade/top-app-bar.css +1 -1
- package/dist/elements/preupgrade.css +1 -1
- package/dist/package.json +1 -1
- package/dist/styles/badge.css +1 -1
- package/dist/styles/base.css +1 -1
- package/dist/styles/bottom-app-bar.css +1 -1
- package/dist/styles/bottom-sheet.css +1 -1
- package/dist/styles/button-group.css +1 -1
- package/dist/styles/button.css +1 -1
- package/dist/styles/card.css +1 -1
- package/dist/styles/carousel.css +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/chips.css +1 -1
- package/dist/styles/contrast.css +1 -1
- package/dist/styles/datepicker.css +1 -1
- package/dist/styles/dialog.css +1 -1
- package/dist/styles/divider.css +1 -1
- package/dist/styles/drawer.css +1 -1
- package/dist/styles/extended-fab.css +1 -1
- package/dist/styles/fab-menu.css +1 -1
- package/dist/styles/fab.css +1 -1
- package/dist/styles/icon-button.css +1 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/loading-indicator.css +1 -1
- package/dist/styles/menu.css +1 -1
- package/dist/styles/navigation-bar.css +1 -1
- package/dist/styles/navigation-rail.css +1 -1
- package/dist/styles/progress.css +1 -1
- package/dist/styles/radios.css +1 -1
- package/dist/styles/search.css +1 -1
- package/dist/styles/select.css +1 -1
- package/dist/styles/side-sheet.css +1 -1
- package/dist/styles/slider.css +1 -1
- package/dist/styles/snackbar.css +1 -1
- package/dist/styles/split-button.css +1 -1
- package/dist/styles/switch.css +1 -1
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/text-field.css +1 -1
- package/dist/styles/timepicker.css +1 -1
- package/dist/styles/toolbar.css +1 -1
- package/dist/styles/tooltip.css +1 -1
- package/dist/styles/top-app-bar.css +1 -1
- package/dist/styles/typography.css +1 -1
- package/dist/styles/utilities.css +1 -1
- package/dist/styles.css +1 -1
- package/dist/themes/autumn-contrast.css +1 -1
- package/dist/themes/autumn.css +1 -1
- package/dist/themes/baseline-contrast.css +1 -1
- package/dist/themes/baseline.css +1 -1
- package/dist/themes/brownbeige-contrast.css +1 -1
- package/dist/themes/brownbeige.css +1 -1
- package/dist/themes/content-contrast.css +1 -1
- package/dist/themes/content.css +1 -1
- package/dist/themes/desert-contrast.css +1 -1
- package/dist/themes/desert.css +1 -1
- package/dist/themes/expressive-contrast.css +1 -1
- package/dist/themes/expressive.css +1 -1
- package/dist/themes/fidelity-contrast.css +1 -1
- package/dist/themes/fidelity.css +1 -1
- package/dist/themes/forest-contrast.css +1 -1
- package/dist/themes/forest.css +1 -1
- package/dist/themes/fruit-salad-contrast.css +1 -1
- package/dist/themes/fruit-salad.css +1 -1
- package/dist/themes/highcontrast-contrast.css +1 -1
- package/dist/themes/highcontrast.css +1 -1
- package/dist/themes/monochrome-contrast.css +1 -1
- package/dist/themes/monochrome.css +1 -1
- package/dist/themes/neutral-contrast.css +1 -1
- package/dist/themes/neutral.css +1 -1
- package/dist/themes/ocean-contrast.css +1 -1
- package/dist/themes/ocean.css +1 -1
- package/dist/themes/rainbow-contrast.css +1 -1
- package/dist/themes/rainbow.css +1 -1
- package/dist/themes/sageivory-contrast.css +1 -1
- package/dist/themes/sageivory.css +1 -1
- package/dist/themes/spring-contrast.css +1 -1
- package/dist/themes/spring.css +1 -1
- package/dist/themes/summer-contrast.css +1 -1
- package/dist/themes/summer.css +1 -1
- package/dist/themes/sunset-contrast.css +1 -1
- package/dist/themes/sunset.css +1 -1
- package/dist/themes/tealcaramel-contrast.css +1 -1
- package/dist/themes/tealcaramel.css +1 -1
- package/dist/themes/vibrant-contrast.css +1 -1
- package/dist/themes/vibrant.css +1 -1
- package/package.json +1 -1
- package/dist/components/badge/types.js +0 -1
- package/dist/components/bottom-app-bar/types.js +0 -1
- package/dist/components/bottom-sheet/types.js +0 -1
- package/dist/components/button/types.js +0 -1
- package/dist/components/button-group/types.js +0 -1
- package/dist/components/card/features.js +0 -217
- package/dist/components/card/types.js +0 -1
- package/dist/components/carousel/types.js +0 -1
- package/dist/components/checkbox/types.js +0 -1
- package/dist/components/chips/chip/constants.js +0 -18
- package/dist/components/chips/chip/index.js +0 -1
- package/dist/components/chips/schema.js +0 -46
- package/dist/components/chips/types.js +0 -1
- package/dist/components/dialog/types.js +0 -1
- package/dist/components/divider/types.js +0 -1
- package/dist/components/drawer/types.js +0 -1
- package/dist/components/extended-fab/types.js +0 -1
- package/dist/components/fab/types.js +0 -1
- package/dist/components/fab-menu/types.js +0 -1
- package/dist/components/icon-button/types.js +0 -1
- package/dist/components/list/types.js +0 -1
- package/dist/components/loading-indicator/types.js +0 -1
- package/dist/components/menu/types.js +0 -14
- package/dist/components/navigation-bar/types.js +0 -1
- package/dist/components/navigation-rail/types.js +0 -1
- package/dist/components/progress/features/index.js +0 -4
- package/dist/components/progress/features/resize-observer.js +0 -40
- package/dist/components/progress/types.js +0 -1
- package/dist/components/radios/types.js +0 -1
- package/dist/components/search/types.js +0 -1
- package/dist/components/select/types.js +0 -4
- package/dist/components/side-sheet/types.js +0 -1
- package/dist/components/slider/api.js +0 -108
- package/dist/components/slider/features/handlers.js +0 -379
- package/dist/components/slider/features/range.js +0 -70
- package/dist/components/slider/features/tracks.js +0 -287
- package/dist/components/snackbar/types.js +0 -1
- package/dist/components/split-button/types.js +0 -1
- package/dist/components/switch/types.js +0 -1
- package/dist/components/tabs/scroll-indicators.js +0 -78
- package/dist/components/tabs/state.js +0 -44
- package/dist/components/tabs/types.js +0 -1
- package/dist/components/text-field/types.js +0 -18
- package/dist/components/toolbar/types.js +0 -1
- package/dist/components/top-app-bar/types.js +0 -1
- package/dist/core/utils/validate.js +0 -114
- package/dist/react/jsx.js +0 -2
- package/dist/solid/jsx.js +0 -1
|
@@ -1,287 +0,0 @@
|
|
|
1
|
-
import { SLIDER_SIZES, SLIDER_MEASUREMENTS } from "../constants.js";
|
|
2
|
-
import { PREFIX } from "../../../core/config.js";
|
|
3
|
-
import { cornerToken } from "../../../core/theme/shape.js";
|
|
4
|
-
import { sliderSizeClass } from "../config.js";
|
|
5
|
-
import { setHTML } from "../../../core/dom/html.js";
|
|
6
|
-
import { getAxis, isRtl, lengthOf } from "./axis.js";
|
|
7
|
-
export const getTrackHeight = (size) => {
|
|
8
|
-
if (typeof size === "number") {
|
|
9
|
-
return Math.max(size, SLIDER_SIZES.XS);
|
|
10
|
-
}
|
|
11
|
-
if (typeof size === "string" && size in SLIDER_SIZES) {
|
|
12
|
-
return SLIDER_SIZES[size];
|
|
13
|
-
}
|
|
14
|
-
return SLIDER_SIZES.XS;
|
|
15
|
-
};
|
|
16
|
-
export const getHandleHeight = (size) => {
|
|
17
|
-
const trackHeight = getTrackHeight(size);
|
|
18
|
-
if (trackHeight <= SLIDER_SIZES.S) {
|
|
19
|
-
return SLIDER_MEASUREMENTS.SMALL_HANDLE_HEIGHT;
|
|
20
|
-
}
|
|
21
|
-
return trackHeight + SLIDER_MEASUREMENTS.HANDLE_HEIGHT_OFFSET;
|
|
22
|
-
};
|
|
23
|
-
const TRACK_STEPS = { 8: "small", 12: "medium", 16: "large", 28: "extra-large" };
|
|
24
|
-
export const getExternalTrackRadius = (size) => {
|
|
25
|
-
const trackHeight = getTrackHeight(size);
|
|
26
|
-
if (trackHeight <= SLIDER_SIZES.S)
|
|
27
|
-
return 8;
|
|
28
|
-
if (trackHeight <= SLIDER_SIZES.M)
|
|
29
|
-
return 12;
|
|
30
|
-
if (trackHeight <= SLIDER_SIZES.L)
|
|
31
|
-
return 16;
|
|
32
|
-
return 28;
|
|
33
|
-
};
|
|
34
|
-
export const trackPosition = (fraction, width, inset) => inset ? inset + fraction * (width - 2 * inset) : fraction * width;
|
|
35
|
-
export const trackPositionCss = (fraction, inset) => inset
|
|
36
|
-
? `calc(${fraction * 100}% + ${inset * (1 - 2 * fraction)}px)`
|
|
37
|
-
: `${fraction * 100}%`;
|
|
38
|
-
const A0 = { f: 0, p: 0 };
|
|
39
|
-
const A1 = { f: 1, p: 0 };
|
|
40
|
-
const ap = (f, p) => ({ f, p });
|
|
41
|
-
const add = (a, b) => ap(a.f + b.f, a.p + b.p);
|
|
42
|
-
const sub = (a, b) => ap(a.f - b.f, a.p - b.p);
|
|
43
|
-
const px = (p) => ap(0, p);
|
|
44
|
-
const alongCss = (a, unit = "%") => {
|
|
45
|
-
const pct = Math.round(a.f * 1e8) / 1e6;
|
|
46
|
-
const p = Math.round(a.p * 1e6) / 1e6;
|
|
47
|
-
if (pct === 0)
|
|
48
|
-
return `${p}px`;
|
|
49
|
-
if (p === 0)
|
|
50
|
-
return `${pct}${unit}`;
|
|
51
|
-
return `calc(${pct}${unit} ${p < 0 ? "-" : "+"} ${Math.abs(p)}px)`;
|
|
52
|
-
};
|
|
53
|
-
const INSET_ICON_PADDING = 10;
|
|
54
|
-
const HANDLE_WIDTH = 4;
|
|
55
|
-
const NARROW_HANDLE_WIDTH = 2;
|
|
56
|
-
export const withTracks = (config) => (component) => {
|
|
57
|
-
const container = component.container;
|
|
58
|
-
const element = (className, parent) => {
|
|
59
|
-
const node = document.createElement("div");
|
|
60
|
-
node.className = component.getClass(className);
|
|
61
|
-
parent.append(node);
|
|
62
|
-
return node;
|
|
63
|
-
};
|
|
64
|
-
let axis = getAxis(config);
|
|
65
|
-
const opposite = { left: "right", right: "left", top: "bottom", bottom: "top" };
|
|
66
|
-
const at = (node, position) => {
|
|
67
|
-
node.style[opposite[axis.start]] = "";
|
|
68
|
-
node.style[axis.start] = position;
|
|
69
|
-
};
|
|
70
|
-
const visual = element("slider__visual", container);
|
|
71
|
-
visual.setAttribute("aria-hidden", "true");
|
|
72
|
-
const track = element("slider__track", visual);
|
|
73
|
-
const segments = Array.from({ length: 3 }, () => element("slider__segment", track));
|
|
74
|
-
const ticks = [element("slider__ticks", visual), element("slider__ticks", visual)];
|
|
75
|
-
ticks[1].classList.add(component.getClass("slider__ticks--active"));
|
|
76
|
-
const dots = [element("slider__dot", visual), element("slider__dot", visual)];
|
|
77
|
-
dots[0].classList.add(component.getClass("slider__dot--start"));
|
|
78
|
-
const insetIcon = element("slider__inset-icon", visual);
|
|
79
|
-
insetIcon.hidden = true;
|
|
80
|
-
let insetMarkup = { icon: config.insetIcon ?? "", atMin: config.insetIconAtMin ?? "" };
|
|
81
|
-
let shownMarkup = null;
|
|
82
|
-
let destroyed = false;
|
|
83
|
-
let size = config.size ?? "XS";
|
|
84
|
-
let state = {
|
|
85
|
-
value: config.value ?? 0, secondValue: config.secondValue ?? null,
|
|
86
|
-
min: config.min ?? 0, max: config.max ?? 100, step: config.step ?? 1,
|
|
87
|
-
};
|
|
88
|
-
const narrowed = (which) => {
|
|
89
|
-
const handle = which === "first" ? component.handle : component.secondHandle;
|
|
90
|
-
const pressed = !!state.pressed && (state.activeHandle === which || (!config.range && which === "first"));
|
|
91
|
-
return pressed || !!handle?.classList.contains(component.getClass("slider__handle--focused"));
|
|
92
|
-
};
|
|
93
|
-
const render = (next) => {
|
|
94
|
-
if (destroyed)
|
|
95
|
-
return;
|
|
96
|
-
if (next)
|
|
97
|
-
state = { ...next };
|
|
98
|
-
axis = getAxis(config, isRtl(component.element));
|
|
99
|
-
const width = lengthOf(container.getBoundingClientRect(), axis) || 0;
|
|
100
|
-
const corner = getExternalTrackRadius(size);
|
|
101
|
-
const inset = config.ticks ? corner : 0;
|
|
102
|
-
const fraction = (value) => Math.min(1, Math.max(0, state.max === state.min ? 0 : (value - state.min) / (state.max - state.min)));
|
|
103
|
-
const atValue = (value) => {
|
|
104
|
-
const f = fraction(value);
|
|
105
|
-
return ap(f, inset * (1 - 2 * f));
|
|
106
|
-
};
|
|
107
|
-
const cmp = (a, b) => width > 0 ? a.f * width + a.p - (b.f * width + b.p) : (a.f - b.f) || (a.p - b.p);
|
|
108
|
-
const gapOf = (which) => px((narrowed(which) ? NARROW_HANDLE_WIDTH : HANDLE_WIDTH) / 2 + SLIDER_MEASUREMENTS.HANDLE_GAP);
|
|
109
|
-
const firstGap = gapOf("first");
|
|
110
|
-
const secondGap = gapOf("second");
|
|
111
|
-
const first = atValue(state.value);
|
|
112
|
-
const second = atValue(state.secondValue ?? state.max);
|
|
113
|
-
let parts;
|
|
114
|
-
let activeStart, activeEnd;
|
|
115
|
-
if (config.centered) {
|
|
116
|
-
const zero = atValue(Math.min(state.max, Math.max(state.min, 0)));
|
|
117
|
-
if (cmp(first, zero) >= 0) {
|
|
118
|
-
activeStart = zero;
|
|
119
|
-
activeEnd = first;
|
|
120
|
-
parts = [[A0, sub(zero, firstGap), false], [zero, sub(first, firstGap), true], [add(first, firstGap), A1, false]];
|
|
121
|
-
}
|
|
122
|
-
else {
|
|
123
|
-
activeStart = first;
|
|
124
|
-
activeEnd = zero;
|
|
125
|
-
parts = [[A0, sub(first, firstGap), false], [add(first, firstGap), zero, true], [add(zero, firstGap), A1, false]];
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
else if (config.range && state.secondValue !== null) {
|
|
129
|
-
const lowIsFirst = cmp(first, second) <= 0;
|
|
130
|
-
const low = lowIsFirst ? first : second;
|
|
131
|
-
const high = lowIsFirst ? second : first;
|
|
132
|
-
const lowGap = lowIsFirst ? firstGap : secondGap;
|
|
133
|
-
const highGap = lowIsFirst ? secondGap : firstGap;
|
|
134
|
-
activeStart = low;
|
|
135
|
-
activeEnd = high;
|
|
136
|
-
parts = [[A0, sub(low, lowGap), false], [add(low, lowGap), sub(high, highGap), true], [add(high, highGap), A1, false]];
|
|
137
|
-
}
|
|
138
|
-
else {
|
|
139
|
-
activeStart = A0;
|
|
140
|
-
activeEnd = first;
|
|
141
|
-
parts = [[A0, A0, false], [A0, sub(first, firstGap), true], [add(first, firstGap), A1, false]];
|
|
142
|
-
}
|
|
143
|
-
const standard = !config.centered && !(config.range && state.secondValue !== null);
|
|
144
|
-
const short = (len) => width > 0 ? len.f * width + len.p <= corner : len.f < 0 || (len.f === 0 && len.p <= corner);
|
|
145
|
-
parts.forEach((part, index) => {
|
|
146
|
-
const meetsEnd = index !== 1 || standard;
|
|
147
|
-
if (meetsEnd && short(sub(part[1], part[0])))
|
|
148
|
-
part[1] = part[0];
|
|
149
|
-
});
|
|
150
|
-
segments.forEach((segment, index) => {
|
|
151
|
-
const [start, end, active] = parts[index] ?? [A0, A0, false];
|
|
152
|
-
const len = sub(end, start);
|
|
153
|
-
const drawn = (width > 0 ? len.f * width + len.p < 0 : len.f < 0 || (len.f === 0 && len.p < 0)) ? A0 : len;
|
|
154
|
-
at(segment, alongCss(start));
|
|
155
|
-
segment.style[axis.size] = alongCss(drawn);
|
|
156
|
-
segment.classList.toggle(component.getClass("slider__segment--active"), active);
|
|
157
|
-
});
|
|
158
|
-
dots[0].hidden = !!config.ticks || standard || cmp(parts[0][1], parts[0][0]) <= 0;
|
|
159
|
-
dots[1].hidden = !!config.ticks || cmp(parts[2][1], parts[2][0]) <= 0;
|
|
160
|
-
at(dots[0], alongCss(px(corner - 2)));
|
|
161
|
-
at(dots[1], alongCss(ap(1, -(corner + 2))));
|
|
162
|
-
placeInsetIcon(parts, width);
|
|
163
|
-
const discrete = !!config.ticks && state.step > 0 && state.max > state.min;
|
|
164
|
-
ticks.forEach(tick => { tick.hidden = !discrete; });
|
|
165
|
-
if (discrete) {
|
|
166
|
-
const stepF = state.step / (state.max - state.min);
|
|
167
|
-
const repeat = `max(0.01px, ${alongCss(ap(stepF, -2 * inset * stepF))})`;
|
|
168
|
-
const offset = alongCss(ap(-stepF / 2, inset * (1 + stepF)), axis.vertical ? "cqh" : "cqw");
|
|
169
|
-
const tickAt = (value) => {
|
|
170
|
-
const f = fraction(value);
|
|
171
|
-
return ap(f, inset * (1 - 2 * f));
|
|
172
|
-
};
|
|
173
|
-
const last = tickAt(state.min + Math.floor((state.max - state.min) / state.step) * state.step);
|
|
174
|
-
const holes = [[sub(first, firstGap), add(first, firstGap)]];
|
|
175
|
-
if (config.range && state.secondValue !== null)
|
|
176
|
-
holes.push([sub(second, secondGap), add(second, secondGap)]);
|
|
177
|
-
const mask = (intervals) => {
|
|
178
|
-
const merged = [];
|
|
179
|
-
for (const [start, end] of [...intervals].sort((a, b) => cmp(a[0], b[0]))) {
|
|
180
|
-
const previous = merged[merged.length - 1];
|
|
181
|
-
if (previous && cmp(start, previous[1]) <= 0) {
|
|
182
|
-
if (cmp(end, previous[1]) > 0)
|
|
183
|
-
previous[1] = end;
|
|
184
|
-
}
|
|
185
|
-
else
|
|
186
|
-
merged.push([start, end]);
|
|
187
|
-
}
|
|
188
|
-
const stops = merged.flatMap(([start, end]) => [`black ${alongCss(start)}`, `transparent ${alongCss(start)}`, `transparent ${alongCss(end)}`, `black ${alongCss(end)}`]);
|
|
189
|
-
const direction = { left: "to right", right: "to left", top: "to bottom", bottom: "to top" }[axis.start];
|
|
190
|
-
return stops.length ? `linear-gradient(${direction}, black 0px, ${stops.join(",")}, black 100%)` : "none";
|
|
191
|
-
};
|
|
192
|
-
ticks.forEach((tick, index) => {
|
|
193
|
-
tick.style.backgroundSize = axis.vertical ? `100% ${repeat}` : `${repeat} 100%`;
|
|
194
|
-
tick.style.backgroundPosition = axis.vertical
|
|
195
|
-
? `center ${axis.start} ${offset}`
|
|
196
|
-
: `${axis.start} ${offset} center`;
|
|
197
|
-
tick.style.maskImage = mask(index === 0 ? [...holes, [sub(activeStart, px(2)), add(activeEnd, px(2))]] : holes);
|
|
198
|
-
});
|
|
199
|
-
const clip = (fromStart, fromEnd) => ({
|
|
200
|
-
left: `inset(0 ${fromEnd} 0 ${fromStart})`,
|
|
201
|
-
right: `inset(0 ${fromStart} 0 ${fromEnd})`,
|
|
202
|
-
top: `inset(${fromStart} 0 ${fromEnd} 0)`,
|
|
203
|
-
bottom: `inset(${fromEnd} 0 ${fromStart} 0)`,
|
|
204
|
-
})[axis.start];
|
|
205
|
-
const fromEnd = (edge) => `max(0px, calc(100% - ${alongCss(edge)}))`;
|
|
206
|
-
ticks[0].style.clipPath = clip("0px", fromEnd(add(last, px(2))));
|
|
207
|
-
ticks[1].style.clipPath = clip(`max(0px, ${alongCss(sub(activeStart, px(2)))})`, `max(0px, calc(100% - min(${alongCss(add(last, px(2)))}, ${alongCss(add(activeEnd, px(2)))})))`);
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
function placeInsetIcon(parts, width) {
|
|
211
|
-
const trackHeight = getTrackHeight(size);
|
|
212
|
-
const eligible = !config.range && !config.centered && trackHeight >= SLIDER_SIZES.M;
|
|
213
|
-
const markup = state.value <= state.min && insetMarkup.atMin ? insetMarkup.atMin : insetMarkup.icon;
|
|
214
|
-
const iconSize = trackHeight >= SLIDER_SIZES.XL ? 32 : 24;
|
|
215
|
-
const room = iconSize + 2 * INSET_ICON_PADDING;
|
|
216
|
-
const fits = (len) => width > 0 ? len.f * width + len.p >= room : len.f > 0 || (len.f === 0 && len.p >= room);
|
|
217
|
-
const onActive = fits(sub(parts[1][1], parts[1][0]));
|
|
218
|
-
const onInactive = !onActive && fits(sub(parts[2][1], parts[2][0]));
|
|
219
|
-
insetIcon.hidden = !eligible || !markup || (!onActive && !onInactive);
|
|
220
|
-
if (insetIcon.hidden)
|
|
221
|
-
return;
|
|
222
|
-
if (markup !== shownMarkup) {
|
|
223
|
-
setHTML(insetIcon, markup);
|
|
224
|
-
shownMarkup = markup;
|
|
225
|
-
}
|
|
226
|
-
insetIcon.style.width = insetIcon.style.height = `${iconSize}px`;
|
|
227
|
-
at(insetIcon, alongCss(add(onActive ? parts[1][0] : parts[2][0], px(INSET_ICON_PADDING))));
|
|
228
|
-
insetIcon.classList.toggle(component.getClass("slider__inset-icon--inactive"), onInactive);
|
|
229
|
-
}
|
|
230
|
-
component.setInsetIcon = (icon, atMin = "") => {
|
|
231
|
-
if (destroyed)
|
|
232
|
-
return;
|
|
233
|
-
insetMarkup = { icon, atMin };
|
|
234
|
-
render();
|
|
235
|
-
};
|
|
236
|
-
const setSize = (next) => {
|
|
237
|
-
if (destroyed)
|
|
238
|
-
return;
|
|
239
|
-
const previous = sliderSizeClass(size), current = sliderSizeClass(next);
|
|
240
|
-
if (previous)
|
|
241
|
-
component.element.classList.remove(previous);
|
|
242
|
-
if (current)
|
|
243
|
-
component.element.classList.add(current);
|
|
244
|
-
size = next;
|
|
245
|
-
const handleHeight = getHandleHeight(size);
|
|
246
|
-
container.style[axis.cross] = `${Math.max(handleHeight, SLIDER_MEASUREMENTS.MIN_HEIGHT)}px`;
|
|
247
|
-
track.style[axis.cross] = `${getTrackHeight(size)}px`;
|
|
248
|
-
track.style.borderRadius = cornerToken(TRACK_STEPS[getExternalTrackRadius(size)], getExternalTrackRadius(size), PREFIX);
|
|
249
|
-
for (const handle of [component.handle, component.secondHandle]) {
|
|
250
|
-
if (handle)
|
|
251
|
-
handle.style[axis.cross] = `${handleHeight}px`;
|
|
252
|
-
}
|
|
253
|
-
component.element.style.setProperty(`--${PREFIX}-slider-handle-height`, `${handleHeight}px`);
|
|
254
|
-
render();
|
|
255
|
-
};
|
|
256
|
-
component.renderTracks = render;
|
|
257
|
-
component.setSize = setSize;
|
|
258
|
-
component.getSize = () => size;
|
|
259
|
-
const setColor = component.appearance.setColor;
|
|
260
|
-
component.appearance.setColor = (color) => {
|
|
261
|
-
if (destroyed)
|
|
262
|
-
return;
|
|
263
|
-
setColor.call(component.appearance, color);
|
|
264
|
-
config.color = color;
|
|
265
|
-
};
|
|
266
|
-
setSize(size);
|
|
267
|
-
const resize = () => {
|
|
268
|
-
if (!destroyed)
|
|
269
|
-
render();
|
|
270
|
-
};
|
|
271
|
-
const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : null;
|
|
272
|
-
if (observer)
|
|
273
|
-
observer.observe(container);
|
|
274
|
-
else
|
|
275
|
-
window.addEventListener("resize", resize);
|
|
276
|
-
const destroy = component.lifecycle.destroy;
|
|
277
|
-
component.lifecycle.destroy = () => {
|
|
278
|
-
if (destroyed)
|
|
279
|
-
return;
|
|
280
|
-
destroyed = true;
|
|
281
|
-
observer?.disconnect();
|
|
282
|
-
if (!observer)
|
|
283
|
-
window.removeEventListener("resize", resize);
|
|
284
|
-
destroy.call(component.lifecycle);
|
|
285
|
-
};
|
|
286
|
-
return component;
|
|
287
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { setHTML } from "../../core/dom/html.js";
|
|
2
|
-
export const addScrollIndicators = (tabs, config = {}) => {
|
|
3
|
-
const { enabled = true, showButtons = false, appearance = 'fade' } = config;
|
|
4
|
-
if (!enabled)
|
|
5
|
-
return;
|
|
6
|
-
const scrollContainer = tabs.element.querySelector(`.${tabs.getClass('tabs')}__scroll`);
|
|
7
|
-
if (!scrollContainer)
|
|
8
|
-
return;
|
|
9
|
-
const leftIndicator = document.createElement('div');
|
|
10
|
-
leftIndicator.className = `${tabs.getClass('tabs')}__scroll-indicator ${tabs.getClass('tabs')}__scroll-indicator--left`;
|
|
11
|
-
leftIndicator.classList.add(`${tabs.getClass('tabs')}__scroll-indicator--${appearance}`);
|
|
12
|
-
const rightIndicator = document.createElement('div');
|
|
13
|
-
rightIndicator.className = `${tabs.getClass('tabs')}__scroll-indicator ${tabs.getClass('tabs')}__scroll-indicator--right`;
|
|
14
|
-
rightIndicator.classList.add(`${tabs.getClass('tabs')}__scroll-indicator--${appearance}`);
|
|
15
|
-
tabs.element.appendChild(leftIndicator);
|
|
16
|
-
tabs.element.appendChild(rightIndicator);
|
|
17
|
-
if (showButtons) {
|
|
18
|
-
const leftButton = document.createElement('button');
|
|
19
|
-
leftButton.className = `${tabs.getClass('tabs')}__scroll-button ${tabs.getClass('tabs')}__scroll-button--left`;
|
|
20
|
-
leftButton.setAttribute('aria-label', 'Scroll tabs left');
|
|
21
|
-
setHTML(leftButton, '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
|
|
22
|
-
const rightButton = document.createElement('button');
|
|
23
|
-
rightButton.className = `${tabs.getClass('tabs')}__scroll-button ${tabs.getClass('tabs')}__scroll-button--right`;
|
|
24
|
-
rightButton.setAttribute('aria-label', 'Scroll tabs right');
|
|
25
|
-
setHTML(rightButton, '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
|
|
26
|
-
tabs.element.appendChild(leftButton);
|
|
27
|
-
tabs.element.appendChild(rightButton);
|
|
28
|
-
leftButton.addEventListener('click', () => {
|
|
29
|
-
scrollContainer.scrollBy({ left: -100 });
|
|
30
|
-
});
|
|
31
|
-
rightButton.addEventListener('click', () => {
|
|
32
|
-
scrollContainer.scrollBy({ left: 100 });
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
const updateIndicators = () => {
|
|
36
|
-
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
|
|
37
|
-
leftIndicator.classList.toggle('visible', scrollLeft > 0);
|
|
38
|
-
rightIndicator.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - 1);
|
|
39
|
-
if (showButtons) {
|
|
40
|
-
const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}__scroll-button--left`);
|
|
41
|
-
const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}__scroll-button--right`);
|
|
42
|
-
if (leftButton) {
|
|
43
|
-
leftButton.disabled = scrollLeft <= 0;
|
|
44
|
-
}
|
|
45
|
-
if (rightButton) {
|
|
46
|
-
rightButton.disabled = scrollLeft + clientWidth >= scrollWidth - 1;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
updateIndicators();
|
|
51
|
-
scrollContainer.addEventListener('scroll', updateIndicators);
|
|
52
|
-
const resizeObserver = new ResizeObserver(updateIndicators);
|
|
53
|
-
resizeObserver.observe(scrollContainer);
|
|
54
|
-
const originalDestroy = tabs.destroy;
|
|
55
|
-
tabs.destroy = function () {
|
|
56
|
-
if (resizeObserver) {
|
|
57
|
-
resizeObserver.disconnect();
|
|
58
|
-
}
|
|
59
|
-
scrollContainer.removeEventListener('scroll', updateIndicators);
|
|
60
|
-
if (leftIndicator.parentNode) {
|
|
61
|
-
leftIndicator.parentNode.removeChild(leftIndicator);
|
|
62
|
-
}
|
|
63
|
-
if (rightIndicator.parentNode) {
|
|
64
|
-
rightIndicator.parentNode.removeChild(rightIndicator);
|
|
65
|
-
}
|
|
66
|
-
if (showButtons) {
|
|
67
|
-
const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}__scroll-button--left`);
|
|
68
|
-
const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}__scroll-button--right`);
|
|
69
|
-
if (leftButton && leftButton.parentNode) {
|
|
70
|
-
leftButton.parentNode.removeChild(leftButton);
|
|
71
|
-
}
|
|
72
|
-
if (rightButton && rightButton.parentNode) {
|
|
73
|
-
rightButton.parentNode.removeChild(rightButton);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
originalDestroy.call(this);
|
|
77
|
-
};
|
|
78
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const createTabsState = (options) => {
|
|
2
|
-
const { tabs = [], onChange, indicator } = options;
|
|
3
|
-
let activeTab = null;
|
|
4
|
-
const initialActiveTab = tabs.find(tab => tab.isActive());
|
|
5
|
-
if (initialActiveTab) {
|
|
6
|
-
activeTab = initialActiveTab;
|
|
7
|
-
if (indicator) {
|
|
8
|
-
setTimeout(() => {
|
|
9
|
-
indicator.moveToTab(initialActiveTab, true);
|
|
10
|
-
}, 50);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
const activateTab = (tab, immediate = false) => {
|
|
14
|
-
if (!tab || (activeTab === tab))
|
|
15
|
-
return;
|
|
16
|
-
if (activeTab) {
|
|
17
|
-
activeTab.deactivate();
|
|
18
|
-
}
|
|
19
|
-
tab.activate();
|
|
20
|
-
activeTab = tab;
|
|
21
|
-
if (indicator) {
|
|
22
|
-
setTimeout(() => {
|
|
23
|
-
indicator.moveToTab(tab, immediate);
|
|
24
|
-
}, 10);
|
|
25
|
-
}
|
|
26
|
-
if (onChange) {
|
|
27
|
-
onChange({
|
|
28
|
-
tab,
|
|
29
|
-
value: tab.getValue()
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const getActiveTab = () => {
|
|
34
|
-
return activeTab;
|
|
35
|
-
};
|
|
36
|
-
const destroy = () => {
|
|
37
|
-
activeTab = null;
|
|
38
|
-
};
|
|
39
|
-
return {
|
|
40
|
-
activateTab,
|
|
41
|
-
getActiveTab,
|
|
42
|
-
destroy
|
|
43
|
-
};
|
|
44
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export const TEXT_FIELD_VARIANTS = {
|
|
2
|
-
FILLED: "filled",
|
|
3
|
-
OUTLINED: "outlined",
|
|
4
|
-
};
|
|
5
|
-
export const TEXT_FIELD_DENSITY = {
|
|
6
|
-
DEFAULT: "default",
|
|
7
|
-
COMPACT: "compact",
|
|
8
|
-
};
|
|
9
|
-
export const TEXT_FIELD_TYPES = {
|
|
10
|
-
TEXT: "text",
|
|
11
|
-
PASSWORD: "password",
|
|
12
|
-
EMAIL: "email",
|
|
13
|
-
NUMBER: "number",
|
|
14
|
-
TEL: "tel",
|
|
15
|
-
URL: "url",
|
|
16
|
-
SEARCH: "search",
|
|
17
|
-
MULTILINE: "multiline",
|
|
18
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
export const validateConfig = (config, schema) => {
|
|
2
|
-
const errors = [];
|
|
3
|
-
const values = config;
|
|
4
|
-
Object.entries(schema).forEach(([key, rule]) => {
|
|
5
|
-
if (rule.required && values[key] === undefined) {
|
|
6
|
-
errors.push(`Missing required field: ${key}`);
|
|
7
|
-
}
|
|
8
|
-
if (values[key] !== undefined) {
|
|
9
|
-
if (rule.type) {
|
|
10
|
-
const actualType = typeof values[key];
|
|
11
|
-
if (actualType !== rule.type) {
|
|
12
|
-
errors.push(`Invalid type for ${key}: expected ${rule.type}, got ${actualType}`);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
if (typeof values[key] === 'number') {
|
|
16
|
-
if (rule.minimum !== undefined && values[key] < rule.minimum) {
|
|
17
|
-
errors.push(`Value for ${key} is too small: minimum is ${rule.minimum}`);
|
|
18
|
-
}
|
|
19
|
-
if (rule.maximum !== undefined && values[key] > rule.maximum) {
|
|
20
|
-
errors.push(`Value for ${key} is too large: maximum is ${rule.maximum}`);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
if (typeof values[key] === 'string') {
|
|
24
|
-
if (rule.minLength !== undefined && values[key].length < rule.minLength) {
|
|
25
|
-
errors.push(`String for ${key} is too short: minimum length is ${rule.minLength}`);
|
|
26
|
-
}
|
|
27
|
-
if (rule.maxLength !== undefined && values[key].length > rule.maxLength) {
|
|
28
|
-
errors.push(`String for ${key} is too long: maximum length is ${rule.maxLength}`);
|
|
29
|
-
}
|
|
30
|
-
if (rule.pattern) {
|
|
31
|
-
const pattern = rule.pattern instanceof RegExp
|
|
32
|
-
? rule.pattern
|
|
33
|
-
: new RegExp(rule.pattern);
|
|
34
|
-
if (!pattern.test(values[key])) {
|
|
35
|
-
errors.push(`Invalid format for ${key}: must match pattern ${pattern}`);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
if (rule.enum) {
|
|
40
|
-
if (!rule.enum.includes(values[key])) {
|
|
41
|
-
errors.push(`Invalid value for ${key}. Must be one of: ${rule.enum.join(', ')}`);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if (rule.validator) {
|
|
45
|
-
const result = rule.validator(values[key]);
|
|
46
|
-
if (result === false) {
|
|
47
|
-
errors.push(`Invalid value for ${key}`);
|
|
48
|
-
}
|
|
49
|
-
else if (typeof result === 'string') {
|
|
50
|
-
errors.push(result);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
if (errors.length > 0) {
|
|
56
|
-
throw new Error(`Configuration validation failed:\n${errors.join('\n')}`);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
export const validateValue = (value, rule) => {
|
|
60
|
-
if (rule.required && value === undefined) {
|
|
61
|
-
return 'Value is required';
|
|
62
|
-
}
|
|
63
|
-
if (value !== undefined) {
|
|
64
|
-
if (rule.type && typeof value !== rule.type) {
|
|
65
|
-
return `Expected ${rule.type}, got ${typeof value}`;
|
|
66
|
-
}
|
|
67
|
-
if (typeof value === 'number') {
|
|
68
|
-
if (rule.minimum !== undefined && value < rule.minimum) {
|
|
69
|
-
return `Value is too small: minimum is ${rule.minimum}`;
|
|
70
|
-
}
|
|
71
|
-
if (rule.maximum !== undefined && value > rule.maximum) {
|
|
72
|
-
return `Value is too large: maximum is ${rule.maximum}`;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
if (typeof value === 'string') {
|
|
76
|
-
if (rule.minLength !== undefined && value.length < rule.minLength) {
|
|
77
|
-
return `String is too short: minimum length is ${rule.minLength}`;
|
|
78
|
-
}
|
|
79
|
-
if (rule.maxLength !== undefined && value.length > rule.maxLength) {
|
|
80
|
-
return `String is too long: maximum length is ${rule.maxLength}`;
|
|
81
|
-
}
|
|
82
|
-
if (rule.pattern) {
|
|
83
|
-
const pattern = rule.pattern instanceof RegExp
|
|
84
|
-
? rule.pattern
|
|
85
|
-
: new RegExp(rule.pattern);
|
|
86
|
-
if (!pattern.test(value)) {
|
|
87
|
-
return `Invalid format: must match pattern ${pattern}`;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
if (rule.enum && !rule.enum.includes(value)) {
|
|
92
|
-
return `Invalid value. Must be one of: ${rule.enum.join(', ')}`;
|
|
93
|
-
}
|
|
94
|
-
if (rule.validator) {
|
|
95
|
-
const result = rule.validator(value);
|
|
96
|
-
if (result === false) {
|
|
97
|
-
return 'Invalid value';
|
|
98
|
-
}
|
|
99
|
-
else if (typeof result === 'string') {
|
|
100
|
-
return result;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return true;
|
|
105
|
-
};
|
|
106
|
-
export const applyDefaults = (config, schema) => {
|
|
107
|
-
const result = { ...config };
|
|
108
|
-
Object.entries(schema).forEach(([key, rule]) => {
|
|
109
|
-
if (result[key] === undefined && rule.default !== undefined) {
|
|
110
|
-
result[key] = rule.default;
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
return result;
|
|
114
|
-
};
|
package/dist/react/jsx.js
DELETED
package/dist/solid/jsx.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|