@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.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.
- package/LICENSE +163 -0
- package/README.md +82 -2
- package/package.json +111 -3
- package/src/action/action.yaml +291 -0
- package/src/action/button-group.yaml +56 -0
- package/src/action/button.yaml +239 -0
- package/src/action/split-button.yaml +87 -0
- package/src/color/color.yaml +181 -0
- package/src/color/palette.yaml +147 -0
- package/src/container/card.yaml +170 -0
- package/src/container/corner-radius.yaml +50 -0
- package/src/container/elevation.yaml +19 -0
- package/src/design.yaml +41 -0
- package/src/feedback/feedback.yaml +225 -0
- package/src/icon/icon-font.yaml +28 -0
- package/src/icon/icon.yaml +31 -0
- package/src/input/date-picker.yaml +144 -0
- package/src/input/date-range-input.yaml +162 -0
- package/src/input/range-slider.yaml +161 -0
- package/src/input/select.yaml +230 -0
- package/src/input/slider.yaml +172 -0
- package/src/input/text-field.yaml +240 -0
- package/src/input/time-picker.yaml +220 -0
- package/src/motion/motion.yaml +371 -0
- package/src/navigation/app-bar.yaml +147 -0
- package/src/navigation/navigation.yaml +339 -0
- package/src/navigation/scroll.yaml +23 -0
- package/src/navigation/search.yaml +112 -0
- package/src/navigation/tabs.yaml +144 -0
- package/src/navigation/toolbar.yaml +130 -0
- package/src/selection/checkbox.yaml +162 -0
- package/src/selection/chip.yaml +219 -0
- package/src/selection/radio.yaml +125 -0
- package/src/selection/segmented-group.yaml +11 -0
- package/src/selection/segmented.yaml +69 -0
- package/src/selection/switch.yaml +209 -0
- package/src/spacing/measurement.yaml +80 -0
- package/src/state/state.yaml +38 -0
- package/src/surface/surface.yaml +483 -0
- package/src/text/line-height.yaml +144 -0
- package/src/text/typeface.yaml +31 -0
- package/src/text/typescale.yaml +726 -0
- package/target/esbuild/action/action.css +1 -0
- package/target/esbuild/action/base.jsx +1 -0
- package/target/esbuild/action/button.jsx +17 -0
- package/target/esbuild/action/fab-menu-context.jsx +1 -0
- package/target/esbuild/action/fab-menu.jsx +15 -0
- package/target/esbuild/action/fab.jsx +7 -0
- package/target/esbuild/action/group.jsx +22 -0
- package/target/esbuild/action/icon-button.jsx +5 -0
- package/target/esbuild/action/index.jsx +1 -0
- package/target/esbuild/action/split-button.jsx +12 -0
- package/target/esbuild/color/contrast.jsx +1 -0
- package/target/esbuild/color/dynamic.jsx +1 -0
- package/target/esbuild/color/hct.jsx +1 -0
- package/target/esbuild/color/index.css +1 -0
- package/target/esbuild/color/index.jsx +1 -0
- package/target/esbuild/color/palette.jsx +1 -0
- package/target/esbuild/color/scheme.jsx +1 -0
- package/target/esbuild/color/temperature.jsx +1 -0
- package/target/esbuild/container/card.css +1 -0
- package/target/esbuild/container/card.jsx +1 -0
- package/target/esbuild/container/elevation-shadow.css +1 -0
- package/target/esbuild/container/elevation-shadow.jsx +1 -0
- package/target/esbuild/container/index.jsx +1 -0
- package/target/esbuild/dom/client.jsx +1 -0
- package/target/esbuild/dom/index.jsx +1 -0
- package/target/esbuild/dom/server.jsx +1 -0
- package/target/esbuild/dom/types.jsx +1 -0
- package/target/esbuild/feedback/badge.jsx +15 -0
- package/target/esbuild/feedback/feedback.css +1 -0
- package/target/esbuild/feedback/focus.jsx +1 -0
- package/target/esbuild/feedback/index.jsx +1 -0
- package/target/esbuild/feedback/loading.jsx +7 -0
- package/target/esbuild/feedback/observe.jsx +1 -0
- package/target/esbuild/feedback/progress.jsx +35 -0
- package/target/esbuild/feedback/snackbar.jsx +23 -0
- package/target/esbuild/feedback/tooltip.jsx +24 -0
- package/target/esbuild/icon/icon.css +1 -0
- package/target/esbuild/icon/icon.jsx +1 -0
- package/target/esbuild/icon/index.jsx +1 -0
- package/target/esbuild/index.css +1 -0
- package/target/esbuild/index.jsx +1 -0
- package/target/esbuild/input/autocomplete.jsx +5 -0
- package/target/esbuild/input/base.jsx +4 -0
- package/target/esbuild/input/date-picker.css +1 -0
- package/target/esbuild/input/date-picker.jsx +104 -0
- package/target/esbuild/input/date-range-input.css +1 -0
- package/target/esbuild/input/date-time.jsx +21 -0
- package/target/esbuild/input/index.css +1 -0
- package/target/esbuild/input/index.jsx +1 -0
- package/target/esbuild/input/paired-input.jsx +1 -0
- package/target/esbuild/input/picker-dialog.css +1 -0
- package/target/esbuild/input/picker-dialog.jsx +14 -0
- package/target/esbuild/input/select.css +1 -0
- package/target/esbuild/input/select.jsx +63 -0
- package/target/esbuild/input/slider.css +1 -0
- package/target/esbuild/input/slider.jsx +51 -0
- package/target/esbuild/input/text-field.css +1 -0
- package/target/esbuild/input/text-field.jsx +67 -0
- package/target/esbuild/input/time-picker.css +1 -0
- package/target/esbuild/input/time-picker.jsx +29 -0
- package/target/esbuild/motion/frame.jsx +1 -0
- package/target/esbuild/motion/index.css +1 -0
- package/target/esbuild/motion/index.jsx +1 -0
- package/target/esbuild/motion/material.jsx +1 -0
- package/target/esbuild/motion/motion.jsx +1 -0
- package/target/esbuild/motion/spring.jsx +1 -0
- package/target/esbuild/motion/transition.css +1 -0
- package/target/esbuild/motion/transition.jsx +1 -0
- package/target/esbuild/motion/velocity.jsx +1 -0
- package/target/esbuild/navigation/app-bar.jsx +51 -0
- package/target/esbuild/navigation/base.jsx +1 -0
- package/target/esbuild/navigation/drawer.jsx +25 -0
- package/target/esbuild/navigation/index.jsx +1 -0
- package/target/esbuild/navigation/navigation.css +1 -0
- package/target/esbuild/navigation/navigation.jsx +29 -0
- package/target/esbuild/navigation/scroll.jsx +1 -0
- package/target/esbuild/navigation/search.jsx +29 -0
- package/target/esbuild/navigation/tabs.jsx +7 -0
- package/target/esbuild/navigation/toolbar.jsx +23 -0
- package/target/esbuild/selection/base.jsx +1 -0
- package/target/esbuild/selection/checkbox.jsx +14 -0
- package/target/esbuild/selection/chip.jsx +23 -0
- package/target/esbuild/selection/index.jsx +1 -0
- package/target/esbuild/selection/radio.jsx +9 -0
- package/target/esbuild/selection/segmented.jsx +15 -0
- package/target/esbuild/selection/selection.css +1 -0
- package/target/esbuild/selection/switch.jsx +14 -0
- package/target/esbuild/shape/corner-rounding.jsx +1 -0
- package/target/esbuild/shape/cubic.jsx +1 -0
- package/target/esbuild/shape/index.jsx +1 -0
- package/target/esbuild/shape/material-shapes.jsx +1 -0
- package/target/esbuild/shape/morph.jsx +1 -0
- package/target/esbuild/shape/path.jsx +1 -0
- package/target/esbuild/shape/point.jsx +1 -0
- package/target/esbuild/shape/rounded-polygon.jsx +1 -0
- package/target/esbuild/shape/shapes.jsx +1 -0
- package/target/esbuild/spacing/index.jsx +1 -0
- package/target/esbuild/state/component.css +1 -0
- package/target/esbuild/state/component.jsx +1 -0
- package/target/esbuild/state/controller.jsx +1 -0
- package/target/esbuild/state/index.jsx +1 -0
- package/target/esbuild/state/ripple.jsx +1 -0
- package/target/esbuild/state/state.jsx +1 -0
- package/target/esbuild/state/style.jsx +1 -0
- package/target/esbuild/surface/carousel-layout.jsx +1 -0
- package/target/esbuild/surface/carousel.css +1 -0
- package/target/esbuild/surface/carousel.jsx +10 -0
- package/target/esbuild/surface/dialog.jsx +35 -0
- package/target/esbuild/surface/divider.jsx +1 -0
- package/target/esbuild/surface/drag.jsx +1 -0
- package/target/esbuild/surface/gestures.css +1 -0
- package/target/esbuild/surface/gestures.jsx +7 -0
- package/target/esbuild/surface/index.css +1 -0
- package/target/esbuild/surface/index.jsx +1 -0
- package/target/esbuild/surface/interactive.jsx +1 -0
- package/target/esbuild/surface/list-patterns.jsx +26 -0
- package/target/esbuild/surface/list.css +1 -0
- package/target/esbuild/surface/list.jsx +9 -0
- package/target/esbuild/surface/menu.css +1 -0
- package/target/esbuild/surface/menu.jsx +12 -0
- package/target/esbuild/surface/scaffold.jsx +47 -0
- package/target/esbuild/surface/sheet.jsx +21 -0
- package/target/esbuild/surface/side-sheet.jsx +17 -0
- package/target/esbuild/surface/slots.jsx +1 -0
- package/target/esbuild/surface/surface.css +1 -0
- package/target/esbuild/surface/surface.jsx +1 -0
- package/target/esbuild/text/index.css +1 -0
- package/target/esbuild/text/index.jsx +1 -0
- package/target/esbuild/text/text.css +1 -0
- package/target/esbuild/text/text.jsx +3 -0
- package/target/esbuild/text/typography.css +1 -0
- package/target/esbuild/text/typography.jsx +1 -0
- package/target/esbuild/util/box-side.jsx +1 -0
- package/target/esbuild/util/debug.jsx +1 -0
- package/target/esbuild/util/dom.jsx +1 -0
- package/target/esbuild/util/event.jsx +1 -0
- package/target/esbuild/util/index.jsx +1 -0
- package/target/esbuild/util/preconditions.jsx +1 -0
- package/target/esbuild/util/reactive.jsx +1 -0
- package/target/tsc/action/action.css.d.ts +3 -0
- package/target/tsc/action/base.d.ts +211 -0
- package/target/tsc/action/button.d.ts +126 -0
- package/target/tsc/action/fab-menu-context.d.ts +16 -0
- package/target/tsc/action/fab-menu.d.ts +112 -0
- package/target/tsc/action/fab.d.ts +98 -0
- package/target/tsc/action/group.d.ts +166 -0
- package/target/tsc/action/icon-button.d.ts +79 -0
- package/target/tsc/action/index.d.ts +24 -0
- package/target/tsc/action/split-button.d.ts +78 -0
- package/target/tsc/color/contrast.d.ts +48 -0
- package/target/tsc/color/dynamic.d.ts +203 -0
- package/target/tsc/color/hct.d.ts +114 -0
- package/target/tsc/color/index.css.d.ts +3 -0
- package/target/tsc/color/index.d.ts +23 -0
- package/target/tsc/color/palette.d.ts +30 -0
- package/target/tsc/color/scheme.d.ts +446 -0
- package/target/tsc/color/temperature.d.ts +24 -0
- package/target/tsc/container/card.css.d.ts +3 -0
- package/target/tsc/container/card.d.ts +110 -0
- package/target/tsc/container/elevation-shadow.css.d.ts +3 -0
- package/target/tsc/container/elevation-shadow.d.ts +23 -0
- package/target/tsc/container/index.d.ts +44 -0
- package/target/tsc/dom/client.d.ts +387 -0
- package/target/tsc/dom/index.d.ts +93 -0
- package/target/tsc/dom/server.d.ts +65 -0
- package/target/tsc/dom/types.d.ts +134 -0
- package/target/tsc/feedback/badge.d.ts +116 -0
- package/target/tsc/feedback/feedback.css.d.ts +3 -0
- package/target/tsc/feedback/focus.d.ts +20 -0
- package/target/tsc/feedback/index.d.ts +17 -0
- package/target/tsc/feedback/loading.d.ts +194 -0
- package/target/tsc/feedback/observe.d.ts +75 -0
- package/target/tsc/feedback/progress.d.ts +281 -0
- package/target/tsc/feedback/snackbar.d.ts +398 -0
- package/target/tsc/feedback/tooltip.d.ts +326 -0
- package/target/tsc/icon/icon.css.d.ts +3 -0
- package/target/tsc/icon/icon.d.ts +69 -0
- package/target/tsc/icon/index.d.ts +13 -0
- package/target/tsc/index.css.d.ts +3 -0
- package/target/tsc/index.d.ts +7 -0
- package/target/tsc/input/autocomplete.d.ts +119 -0
- package/target/tsc/input/base.d.ts +282 -0
- package/target/tsc/input/date-picker.css.d.ts +3 -0
- package/target/tsc/input/date-picker.d.ts +351 -0
- package/target/tsc/input/date-range-input.css.d.ts +3 -0
- package/target/tsc/input/date-time.d.ts +171 -0
- package/target/tsc/input/index.css.d.ts +3 -0
- package/target/tsc/input/index.d.ts +27 -0
- package/target/tsc/input/paired-input.d.ts +435 -0
- package/target/tsc/input/picker-dialog.css.d.ts +3 -0
- package/target/tsc/input/picker-dialog.d.ts +84 -0
- package/target/tsc/input/select.css.d.ts +3 -0
- package/target/tsc/input/select.d.ts +267 -0
- package/target/tsc/input/slider.css.d.ts +3 -0
- package/target/tsc/input/slider.d.ts +372 -0
- package/target/tsc/input/text-field.css.d.ts +3 -0
- package/target/tsc/input/text-field.d.ts +415 -0
- package/target/tsc/input/time-picker.css.d.ts +3 -0
- package/target/tsc/input/time-picker.d.ts +212 -0
- package/target/tsc/motion/frame.d.ts +36 -0
- package/target/tsc/motion/index.css.d.ts +3 -0
- package/target/tsc/motion/index.d.ts +34 -0
- package/target/tsc/motion/material.d.ts +110 -0
- package/target/tsc/motion/motion.d.ts +235 -0
- package/target/tsc/motion/spring.d.ts +223 -0
- package/target/tsc/motion/transition.css.d.ts +3 -0
- package/target/tsc/motion/transition.d.ts +597 -0
- package/target/tsc/motion/velocity.d.ts +54 -0
- package/target/tsc/navigation/app-bar.d.ts +473 -0
- package/target/tsc/navigation/base.d.ts +320 -0
- package/target/tsc/navigation/drawer.d.ts +301 -0
- package/target/tsc/navigation/index.d.ts +25 -0
- package/target/tsc/navigation/navigation.css.d.ts +3 -0
- package/target/tsc/navigation/navigation.d.ts +537 -0
- package/target/tsc/navigation/scroll.d.ts +218 -0
- package/target/tsc/navigation/search.d.ts +332 -0
- package/target/tsc/navigation/tabs.d.ts +497 -0
- package/target/tsc/navigation/toolbar.d.ts +248 -0
- package/target/tsc/selection/base.d.ts +100 -0
- package/target/tsc/selection/checkbox.d.ts +194 -0
- package/target/tsc/selection/chip.d.ts +358 -0
- package/target/tsc/selection/index.d.ts +21 -0
- package/target/tsc/selection/radio.d.ts +198 -0
- package/target/tsc/selection/segmented.d.ts +333 -0
- package/target/tsc/selection/selection.css.d.ts +3 -0
- package/target/tsc/selection/switch.d.ts +165 -0
- package/target/tsc/shape/corner-rounding.d.ts +36 -0
- package/target/tsc/shape/cubic.d.ts +215 -0
- package/target/tsc/shape/index.d.ts +35 -0
- package/target/tsc/shape/material-shapes.d.ts +176 -0
- package/target/tsc/shape/morph.d.ts +91 -0
- package/target/tsc/shape/path.d.ts +177 -0
- package/target/tsc/shape/point.d.ts +165 -0
- package/target/tsc/shape/rounded-polygon.d.ts +289 -0
- package/target/tsc/shape/shapes.d.ts +76 -0
- package/target/tsc/spacing/index.d.ts +19 -0
- package/target/tsc/state/component.css.d.ts +3 -0
- package/target/tsc/state/component.d.ts +276 -0
- package/target/tsc/state/controller.d.ts +257 -0
- package/target/tsc/state/index.d.ts +19 -0
- package/target/tsc/state/ripple.d.ts +50 -0
- package/target/tsc/state/state.d.ts +129 -0
- package/target/tsc/state/style.d.ts +22 -0
- package/target/tsc/surface/carousel-layout.d.ts +212 -0
- package/target/tsc/surface/carousel.css.d.ts +3 -0
- package/target/tsc/surface/carousel.d.ts +231 -0
- package/target/tsc/surface/dialog.d.ts +580 -0
- package/target/tsc/surface/divider.d.ts +92 -0
- package/target/tsc/surface/drag.d.ts +92 -0
- package/target/tsc/surface/gestures.css.d.ts +3 -0
- package/target/tsc/surface/gestures.d.ts +292 -0
- package/target/tsc/surface/index.css.d.ts +3 -0
- package/target/tsc/surface/index.d.ts +29 -0
- package/target/tsc/surface/interactive.d.ts +22 -0
- package/target/tsc/surface/list-patterns.d.ts +384 -0
- package/target/tsc/surface/list.css.d.ts +3 -0
- package/target/tsc/surface/list.d.ts +340 -0
- package/target/tsc/surface/menu.css.d.ts +3 -0
- package/target/tsc/surface/menu.d.ts +590 -0
- package/target/tsc/surface/scaffold.d.ts +337 -0
- package/target/tsc/surface/sheet.d.ts +384 -0
- package/target/tsc/surface/side-sheet.d.ts +183 -0
- package/target/tsc/surface/slots.d.ts +21 -0
- package/target/tsc/surface/surface.css.d.ts +3 -0
- package/target/tsc/surface/surface.d.ts +192 -0
- package/target/tsc/text/index.css.d.ts +3 -0
- package/target/tsc/text/index.d.ts +18 -0
- package/target/tsc/text/text.css.d.ts +3 -0
- package/target/tsc/text/text.d.ts +94 -0
- package/target/tsc/text/typography.css.d.ts +3 -0
- package/target/tsc/text/typography.d.ts +82 -0
- package/target/tsc/util/box-side.d.ts +76 -0
- package/target/tsc/util/debug.d.ts +20 -0
- package/target/tsc/util/dom.d.ts +35 -0
- package/target/tsc/util/event.d.ts +93 -0
- package/target/tsc/util/index.d.ts +12 -0
- package/target/tsc/util/preconditions.d.ts +79 -0
- package/target/tsc/util/reactive.d.ts +36 -0
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import type { JSX } from "solid-js";
|
|
2
|
+
import type { DomComponent } from "..";
|
|
3
|
+
import type { InputVariant } from "./base";
|
|
4
|
+
import type { PairedInputChangeHandler, PairedInputProps } from "./paired-input";
|
|
5
|
+
import type { TextFieldProps } from "./text-field";
|
|
6
|
+
import { PairedInputController } from "./paired-input";
|
|
7
|
+
import { TextField } from "./text-field";
|
|
8
|
+
import "./date-range-input.css";
|
|
9
|
+
/**
|
|
10
|
+
* {@link DateInput} component properties.
|
|
11
|
+
*/
|
|
12
|
+
export type DateInputProps = Omit<TextFieldProps, "revealPassword" | "secure" | "type"> & {
|
|
13
|
+
/**
|
|
14
|
+
* Native input type, which is always `date`.
|
|
15
|
+
*/
|
|
16
|
+
type?: never;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* {@link TimeInput} component properties.
|
|
20
|
+
*/
|
|
21
|
+
export type TimeInputProps = Omit<TextFieldProps, "revealPassword" | "secure" | "type"> & {
|
|
22
|
+
/**
|
|
23
|
+
* Native input type, which is always `time`.
|
|
24
|
+
*/
|
|
25
|
+
type?: never;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Callback invoked after either date of a {@link DateRangeInput} changes.
|
|
29
|
+
*/
|
|
30
|
+
export type DateRangeChangeHandler = PairedInputChangeHandler<string>;
|
|
31
|
+
/**
|
|
32
|
+
* {@link DateRangeInput} component properties.
|
|
33
|
+
*
|
|
34
|
+
* Values are ISO dates (`YYYY-MM-DD`); an empty string is an unset date.
|
|
35
|
+
*/
|
|
36
|
+
export type DateRangeInputProps = PairedInputProps<string> & {
|
|
37
|
+
/**
|
|
38
|
+
* Container variant.
|
|
39
|
+
*
|
|
40
|
+
* @defaultValue `"filled"`
|
|
41
|
+
*/
|
|
42
|
+
variant?: InputVariant | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Earliest selectable ISO date of both inputs.
|
|
45
|
+
*/
|
|
46
|
+
min?: string | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Latest selectable ISO date of both inputs.
|
|
49
|
+
*/
|
|
50
|
+
max?: string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Alias for {@link PairedInputProps.onValueChange}, invoked after it.
|
|
53
|
+
*/
|
|
54
|
+
onDateRangeChange?: DateRangeChangeHandler | undefined;
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Material 3 text field editing a date with a native `date` input.
|
|
58
|
+
*
|
|
59
|
+
* The browser supplies the date format, editing and, where available, its date chooser. Use a
|
|
60
|
+
* {@link ./picker-dialog#PickerDialog | picker dialog} with a
|
|
61
|
+
* {@link ./date-picker#DatePicker | date picker} for the Material calendar. All other properties,
|
|
62
|
+
* states and styles are those of the {@link ./text-field#TextField | text field}.
|
|
63
|
+
*
|
|
64
|
+
* @param props - component properties
|
|
65
|
+
* @returns rendered component elements
|
|
66
|
+
*/
|
|
67
|
+
export declare function DateInput(props: DateInputProps & Pick<Parameters<typeof TextField>[0], "controllerRef">): JSX.Element;
|
|
68
|
+
/**
|
|
69
|
+
* Material 3 text field editing a time with a native `time` input.
|
|
70
|
+
*
|
|
71
|
+
* The browser supplies the time format and editing. Use a
|
|
72
|
+
* {@link ./picker-dialog#PickerDialog | picker dialog} with a
|
|
73
|
+
* {@link ./time-picker#TimePicker | time picker} for the Material clock. All other properties,
|
|
74
|
+
* states and styles are those of the {@link ./text-field#TextField | text field}.
|
|
75
|
+
*
|
|
76
|
+
* @param props - component properties
|
|
77
|
+
* @returns rendered component elements
|
|
78
|
+
*/
|
|
79
|
+
export declare function TimeInput(props: TimeInputProps & Pick<Parameters<typeof TextField>[0], "controllerRef">): JSX.Element;
|
|
80
|
+
/**
|
|
81
|
+
* Client controller of a {@link DateRangeInput}.
|
|
82
|
+
*
|
|
83
|
+
* The start input is the function element. Pair semantics, labels, form participation and
|
|
84
|
+
* validity are shared with the range slider through {@link PairedInputController}; this
|
|
85
|
+
* controller adds the date bounds, the native read-only state and the container variant.
|
|
86
|
+
*/
|
|
87
|
+
export declare class DateRangeInputController extends PairedInputController<DateRangeInputProps, string> {
|
|
88
|
+
/**
|
|
89
|
+
* Construct a new `DateRangeInputController`.
|
|
90
|
+
*
|
|
91
|
+
* @param props - component properties
|
|
92
|
+
*/
|
|
93
|
+
constructor(props: DateRangeInputProps);
|
|
94
|
+
/**
|
|
95
|
+
* Clamp a date to the bounds; an absent date is unset.
|
|
96
|
+
*
|
|
97
|
+
* @param value - resolved date
|
|
98
|
+
* @returns clamped ISO date, or an empty string
|
|
99
|
+
*/
|
|
100
|
+
protected normalize(value: string | undefined): string;
|
|
101
|
+
/**
|
|
102
|
+
* Apply changed date bounds to both inputs.
|
|
103
|
+
*
|
|
104
|
+
* @param start - start input
|
|
105
|
+
* @param end - end input
|
|
106
|
+
* @returns `true` if, and only if, a bound changed
|
|
107
|
+
*/
|
|
108
|
+
protected applyConstraints(start: HTMLInputElement, end: HTMLInputElement): boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Apply the native read-only state to both date inputs.
|
|
111
|
+
*
|
|
112
|
+
* @param start - start input
|
|
113
|
+
* @param end - end input
|
|
114
|
+
* @param readOnly - the component is read-only
|
|
115
|
+
*/
|
|
116
|
+
protected applyReadOnly(start: HTMLInputElement, end: HTMLInputElement, readOnly: boolean): void;
|
|
117
|
+
/**
|
|
118
|
+
* Value callbacks in invocation order.
|
|
119
|
+
*
|
|
120
|
+
* @returns `onValueChange`, `onDateRangeChange` and `onChange`
|
|
121
|
+
*/
|
|
122
|
+
protected changeCallbacks(): readonly (DateRangeChangeHandler | undefined)[];
|
|
123
|
+
/**
|
|
124
|
+
* Apply local properties to component state and styling.
|
|
125
|
+
*
|
|
126
|
+
* @see {@link PairedInputController.applyComponentProps}
|
|
127
|
+
*/
|
|
128
|
+
protected applyComponentProps(): void;
|
|
129
|
+
/**
|
|
130
|
+
* Render the component's element tree.
|
|
131
|
+
*
|
|
132
|
+
* Slots are inserted reactively right after their containers are created, in the order of
|
|
133
|
+
* the server renderer; all other state is applied by
|
|
134
|
+
* {@link DateRangeInputController.applyComponentProps}.
|
|
135
|
+
*
|
|
136
|
+
* @param children - nested component children, possibly an accessor
|
|
137
|
+
* @param funcRef - callback receiving the native function element
|
|
138
|
+
* @returns rendered component elements
|
|
139
|
+
* @see {@link ../dom/client#DomController.render}
|
|
140
|
+
*/
|
|
141
|
+
protected render(children: JSX.Element, funcRef?: (elem: HTMLInputElement) => void): JSX.Element;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Material 3 text field editing a date range with two native `date` inputs.
|
|
145
|
+
*
|
|
146
|
+
* The browser supplies the date format, editing and, where available, its date chooser; the
|
|
147
|
+
* dates never cross. Use a {@link ./picker-dialog#PickerDialog | picker dialog} with a
|
|
148
|
+
* {@link ./date-picker#DateRangePicker | date range picker} for the Material calendar.
|
|
149
|
+
*
|
|
150
|
+
* # States
|
|
151
|
+
*
|
|
152
|
+
* `disabled`, `readOnly`, `required` and validity apply to both inputs. Both dates serialize in
|
|
153
|
+
* start, end order under `name`, or under `startName` and `endName`.
|
|
154
|
+
*
|
|
155
|
+
* # Design
|
|
156
|
+
*
|
|
157
|
+
* Date range input design is controlled through the
|
|
158
|
+
* [`cw-DateRangeInput`](./date-range-input.yaml) component design attribute, with the filled
|
|
159
|
+
* defaults and an `outlined` theme. The root receives `cw-DateRangeInput-disabled`,
|
|
160
|
+
* `cw-DateRangeInput-readOnly` and `cw-DateRangeInput-error`.
|
|
161
|
+
*
|
|
162
|
+
* # Elements
|
|
163
|
+
*
|
|
164
|
+
* The root `<fieldset>` is labelled by its `<legend>`; the inputs are labelled "Start date" and
|
|
165
|
+
* "End date" unless {@link PairedInputProps.startLabel} and {@link PairedInputProps.endLabel} are
|
|
166
|
+
* supplied, and are described by the supporting text.
|
|
167
|
+
*
|
|
168
|
+
* @param props - component properties
|
|
169
|
+
* @returns rendered component elements
|
|
170
|
+
*/
|
|
171
|
+
export declare const DateRangeInput: DomComponent<DateRangeInputProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Material 3 input controls.
|
|
3
|
+
*
|
|
4
|
+
* Input controls retain native HTML semantics and form behavior. Text fields, selects and
|
|
5
|
+
* autocomplete fields wrap native inputs and selects; date and time inputs use browser pickers;
|
|
6
|
+
* DatePicker, DateRangePicker, and TimePicker provide Material calendar and clock views. Range
|
|
7
|
+
* controls keep native keyboard and pointer interaction for each thumb.
|
|
8
|
+
*
|
|
9
|
+
* @packageDocumentation
|
|
10
|
+
*/
|
|
11
|
+
export type { AutocompleteProps } from "./autocomplete";
|
|
12
|
+
export type { InputFieldSlots, InputOrientation, InputSlot, InputValueChangeHandler, InputVariant } from "./base";
|
|
13
|
+
export type { DatePickerBaseProps, DatePickerLabels, DatePickerProps, DatePickerRange, DateRangePickerProps } from "./date-picker";
|
|
14
|
+
export type { DateInputProps, DateRangeChangeHandler, DateRangeInputProps, TimeInputProps } from "./date-time";
|
|
15
|
+
export type { PickerDialogProps } from "./picker-dialog";
|
|
16
|
+
export type { SelectChangeHandler, SelectOption, SelectOptionGroup, SelectProps } from "./select";
|
|
17
|
+
export type { RangeSliderChangeHandler, RangeSliderProps, RangeValue, SliderChangeHandler, SliderProps, SliderShape, SliderSize, SliderValueFormatter } from "./slider";
|
|
18
|
+
export type { TextFieldChangeHandler, TextFieldProps, TextFieldType } from "./text-field";
|
|
19
|
+
export type { TimePickerLabels, TimePickerProps } from "./time-picker";
|
|
20
|
+
export { Autocomplete, AutocompleteController } from "./autocomplete";
|
|
21
|
+
export { DatePicker, DateRangePicker } from "./date-picker";
|
|
22
|
+
export { DateInput, DateRangeInput, DateRangeInputController, TimeInput } from "./date-time";
|
|
23
|
+
export { PickerDialog } from "./picker-dialog";
|
|
24
|
+
export { ExposedDropdownMenu, Select, SelectController } from "./select";
|
|
25
|
+
export { RangeSlider, RangeSliderController, Slider, SliderController } from "./slider";
|
|
26
|
+
export { FilledTextField, OutlinedTextField, PasswordField, SecureField, TextField, TextFieldController } from "./text-field";
|
|
27
|
+
export { TimePicker } from "./time-picker";
|
|
@@ -0,0 +1,435 @@
|
|
|
1
|
+
import type { Accessor, JSX } from "solid-js";
|
|
2
|
+
import type { DomProps, FunctionElement, PickLocalDomProps } from "..";
|
|
3
|
+
import type { InputFieldSlots, InputValueChangeHandler } from "./base";
|
|
4
|
+
import { DomController } from "../dom/client";
|
|
5
|
+
/**
|
|
6
|
+
* Ordered start and end values edited by two native inputs.
|
|
7
|
+
*
|
|
8
|
+
* @typeParam T - value of each native input
|
|
9
|
+
*/
|
|
10
|
+
export type InputPair<T> = readonly [start: T, end: T];
|
|
11
|
+
/**
|
|
12
|
+
* Callback invoked after either input of a paired input is edited.
|
|
13
|
+
*
|
|
14
|
+
* @typeParam T - value of each native input
|
|
15
|
+
*/
|
|
16
|
+
export type PairedInputChangeHandler<T> = InputValueChangeHandler<InputPair<T>>;
|
|
17
|
+
/**
|
|
18
|
+
* Properties shared by components that edit a range with two native inputs.
|
|
19
|
+
*
|
|
20
|
+
* The first input is the component's function element and receives `attr:` attributes, element
|
|
21
|
+
* properties and event handlers. The second input mirrors the native form owner (`attr:form`),
|
|
22
|
+
* validity, description and constraints of the first.
|
|
23
|
+
*
|
|
24
|
+
* @typeParam T - value of each native input
|
|
25
|
+
*/
|
|
26
|
+
export type PairedInputProps<T> = DomProps<HTMLInputElement, Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "disabled" | "max" | "min" | "name" | "required" | "type" | "value">> & InputFieldSlots & {
|
|
27
|
+
/**
|
|
28
|
+
* Current controlled start and end values.
|
|
29
|
+
*
|
|
30
|
+
* Supplying this property, including `undefined`, controls both endpoints from construction.
|
|
31
|
+
* Update it from {@link PairedInputProps.onValueChange} to accept an edit.
|
|
32
|
+
*/
|
|
33
|
+
value?: InputPair<T> | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* Initial start and end values of an uncontrolled range.
|
|
36
|
+
*/
|
|
37
|
+
defaultValue?: InputPair<T> | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* Current controlled start value.
|
|
40
|
+
*
|
|
41
|
+
* Supplying this property, including `undefined`, controls the start endpoint from
|
|
42
|
+
* construction while the end endpoint may remain uncontrolled.
|
|
43
|
+
*/
|
|
44
|
+
startValue?: T | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* Current controlled end value.
|
|
47
|
+
*
|
|
48
|
+
* Supplying this property, including `undefined`, controls the end endpoint from construction
|
|
49
|
+
* while the start endpoint may remain uncontrolled.
|
|
50
|
+
*/
|
|
51
|
+
endValue?: T | undefined;
|
|
52
|
+
/**
|
|
53
|
+
* Initial uncontrolled start value, used when {@link PairedInputProps.defaultValue} is absent.
|
|
54
|
+
*/
|
|
55
|
+
defaultStartValue?: T | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* Initial uncontrolled end value, used when {@link PairedInputProps.defaultValue} is absent.
|
|
58
|
+
*/
|
|
59
|
+
defaultEndValue?: T | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Accessible label of the start input.
|
|
62
|
+
*
|
|
63
|
+
* An authored `attr:aria-label` takes precedence on the start input.
|
|
64
|
+
*/
|
|
65
|
+
startLabel?: string | undefined;
|
|
66
|
+
/**
|
|
67
|
+
* Accessible label of the end input.
|
|
68
|
+
*/
|
|
69
|
+
endLabel?: string | undefined;
|
|
70
|
+
/**
|
|
71
|
+
* Disable both native inputs, their interaction and their form participation.
|
|
72
|
+
*
|
|
73
|
+
* @defaultValue `false`
|
|
74
|
+
*/
|
|
75
|
+
disabled?: boolean | undefined;
|
|
76
|
+
/**
|
|
77
|
+
* Keep both values in forms while preventing edits.
|
|
78
|
+
*
|
|
79
|
+
* @defaultValue `false`
|
|
80
|
+
*/
|
|
81
|
+
readOnly?: boolean | undefined;
|
|
82
|
+
/**
|
|
83
|
+
* Require both values at form submission.
|
|
84
|
+
*
|
|
85
|
+
* @defaultValue `false`
|
|
86
|
+
*/
|
|
87
|
+
required?: boolean | undefined;
|
|
88
|
+
/**
|
|
89
|
+
* Form name shared by both inputs, which then serialize two entries in start, end order.
|
|
90
|
+
*/
|
|
91
|
+
name?: string | undefined;
|
|
92
|
+
/**
|
|
93
|
+
* Id of the start input; `attr:id` is used when this is absent.
|
|
94
|
+
*/
|
|
95
|
+
id?: string | undefined;
|
|
96
|
+
/**
|
|
97
|
+
* Form name of the start input, overriding {@link PairedInputProps.name}.
|
|
98
|
+
*/
|
|
99
|
+
startName?: string | undefined;
|
|
100
|
+
/**
|
|
101
|
+
* Form name of the end input, overriding {@link PairedInputProps.name}.
|
|
102
|
+
*/
|
|
103
|
+
endName?: string | undefined;
|
|
104
|
+
/**
|
|
105
|
+
* Id of the start input, overriding {@link PairedInputProps.id}.
|
|
106
|
+
*/
|
|
107
|
+
startId?: string | undefined;
|
|
108
|
+
/**
|
|
109
|
+
* Id of the end input.
|
|
110
|
+
*/
|
|
111
|
+
endId?: string | undefined;
|
|
112
|
+
/**
|
|
113
|
+
* Mark both inputs invalid without an error slot.
|
|
114
|
+
*
|
|
115
|
+
* @defaultValue `false`
|
|
116
|
+
*/
|
|
117
|
+
invalid?: boolean | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* Notify the parent after either input is edited.
|
|
120
|
+
*
|
|
121
|
+
* Edits never cross: an edited start value stops at the end value and vice versa. Aliases
|
|
122
|
+
* that refer to the same function run once. Controlled values are reasserted after the
|
|
123
|
+
* callbacks, so update the controlling property to accept an edit. Use `event:change` to
|
|
124
|
+
* observe committed edits.
|
|
125
|
+
*
|
|
126
|
+
* @param value - edited start and end values
|
|
127
|
+
* @param event - originating `input` event
|
|
128
|
+
*/
|
|
129
|
+
onValueChange?: PairedInputChangeHandler<T> | undefined;
|
|
130
|
+
/**
|
|
131
|
+
* Alias for {@link PairedInputProps.onValueChange}.
|
|
132
|
+
*/
|
|
133
|
+
onChange?: PairedInputChangeHandler<T> | undefined;
|
|
134
|
+
};
|
|
135
|
+
/**
|
|
136
|
+
* Value semantics of the native inputs managed by a {@link PairedInputController}.
|
|
137
|
+
*
|
|
138
|
+
* @typeParam T - value of each native input
|
|
139
|
+
*/
|
|
140
|
+
export interface PairedInputType<T> {
|
|
141
|
+
/**
|
|
142
|
+
* Read the value of a native input.
|
|
143
|
+
*
|
|
144
|
+
* @param input - native input
|
|
145
|
+
* @returns value of `input`
|
|
146
|
+
*/
|
|
147
|
+
parse(input: HTMLInputElement): T;
|
|
148
|
+
/**
|
|
149
|
+
* Order two values.
|
|
150
|
+
*
|
|
151
|
+
* @param a - first value
|
|
152
|
+
* @param b - second value
|
|
153
|
+
* @returns a negative number, zero or a positive number when `a` precedes, equals or follows
|
|
154
|
+
* `b`, respectively; `undefined` when either value is unset and the values are unordered
|
|
155
|
+
*/
|
|
156
|
+
compare(a: T, b: T): number | undefined;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Keys of the start and end aliases accepted by a paired input component.
|
|
160
|
+
*
|
|
161
|
+
* @typeParam P - component properties type
|
|
162
|
+
*/
|
|
163
|
+
export interface PairedInputAliases<P> {
|
|
164
|
+
/**
|
|
165
|
+
* Properties controlling the start value, in precedence order after `value`.
|
|
166
|
+
*/
|
|
167
|
+
readonly start: readonly (keyof P & string)[];
|
|
168
|
+
/**
|
|
169
|
+
* Properties controlling the end value, in precedence order after `value`.
|
|
170
|
+
*/
|
|
171
|
+
readonly end: readonly (keyof P & string)[];
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Supporting content of a field, resolved once per change of its slots.
|
|
175
|
+
*/
|
|
176
|
+
export interface SupportingContent {
|
|
177
|
+
/**
|
|
178
|
+
* The field shows an error: an error slot supplies the content, or `error` is `true`.
|
|
179
|
+
*/
|
|
180
|
+
readonly error: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Displayed error, supporting or helper content, or `undefined` when no slot is supplied.
|
|
183
|
+
*/
|
|
184
|
+
readonly content: JSX.Element | undefined;
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Server element properties of a field, split between its container and native input.
|
|
188
|
+
*/
|
|
189
|
+
export interface FieldPropsSplit {
|
|
190
|
+
/**
|
|
191
|
+
* Styling properties of the container: `class`, `classList` and `style`.
|
|
192
|
+
*/
|
|
193
|
+
readonly container: Record<string, unknown>;
|
|
194
|
+
/**
|
|
195
|
+
* Every other element property, including `attr:` attributes, of the native input.
|
|
196
|
+
*/
|
|
197
|
+
readonly input: Record<string, unknown>;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Validity and description changes implied by new supporting content.
|
|
201
|
+
*/
|
|
202
|
+
export interface SupportingChanges {
|
|
203
|
+
/**
|
|
204
|
+
* New error state, or `undefined` while it is unchanged.
|
|
205
|
+
*/
|
|
206
|
+
readonly error: boolean | undefined;
|
|
207
|
+
/**
|
|
208
|
+
* Whether supporting content now describes the field, or `undefined` while it is unchanged.
|
|
209
|
+
*/
|
|
210
|
+
readonly described: boolean | undefined;
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* Native attributes of both inputs of a server-rendered paired input.
|
|
214
|
+
*/
|
|
215
|
+
export interface PairedInputAttributes {
|
|
216
|
+
/**
|
|
217
|
+
* Attributes of the start input, including the component's element properties.
|
|
218
|
+
*/
|
|
219
|
+
readonly start: Record<string, unknown>;
|
|
220
|
+
/**
|
|
221
|
+
* Attributes of the end input.
|
|
222
|
+
*/
|
|
223
|
+
readonly end: Record<string, unknown>;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Supporting content of a field before its slots are resolved.
|
|
227
|
+
*/
|
|
228
|
+
export declare const NO_SUPPORTING_CONTENT: SupportingContent;
|
|
229
|
+
/**
|
|
230
|
+
* Resolve the supporting content of a field on the client.
|
|
231
|
+
*
|
|
232
|
+
* Each slot is read once per change, in the order the server renderer reads them through
|
|
233
|
+
* {@link ./base#supportingSlot} (`errorText`, `error`, `supportingText`, `helperText`). Create
|
|
234
|
+
* this right after the element receiving the content, so slot elements are created in the order
|
|
235
|
+
* hydration expects, and read the error state from it rather than from the slot properties.
|
|
236
|
+
*
|
|
237
|
+
* An `error` of `true` marks the field invalid without text, as the server renderer tests through
|
|
238
|
+
* {@link ./base#hasInputError}; the supporting text then remains displayed.
|
|
239
|
+
*
|
|
240
|
+
* @param props - field properties
|
|
241
|
+
* @returns memoized supporting content
|
|
242
|
+
*/
|
|
243
|
+
export declare function createSupportingContent(props: InputFieldSlots): Accessor<SupportingContent>;
|
|
244
|
+
/**
|
|
245
|
+
* Compare supporting contents of a field.
|
|
246
|
+
*
|
|
247
|
+
* @param prev - previously applied content, or `undefined` before the first application
|
|
248
|
+
* @param next - current content
|
|
249
|
+
* @param invalid - the field is marked invalid without an error slot
|
|
250
|
+
* @param invalidChanged - `invalid` changed since the previous application
|
|
251
|
+
* @returns validity and description changes
|
|
252
|
+
*/
|
|
253
|
+
export declare function supportingChangesOf(prev: SupportingContent | undefined, next: SupportingContent, invalid: boolean, invalidChanged: boolean): SupportingChanges;
|
|
254
|
+
/**
|
|
255
|
+
* Split server element properties of a field between its container and native input.
|
|
256
|
+
*
|
|
257
|
+
* Unlike destructuring, this never reads `children`, so the renderer can read the children
|
|
258
|
+
* where they are nested, after creating their parent element.
|
|
259
|
+
*
|
|
260
|
+
* @param elemProps - lazily evaluated server element properties
|
|
261
|
+
* @returns container styling properties and native input properties
|
|
262
|
+
*/
|
|
263
|
+
export declare function splitFieldProps(elemProps: object): FieldPropsSplit;
|
|
264
|
+
/**
|
|
265
|
+
* Resolve the start and end values of a paired input from its properties.
|
|
266
|
+
*
|
|
267
|
+
* `value` takes precedence over the endpoint aliases, which take precedence over the initial
|
|
268
|
+
* values when `initial` is `true`. An absent endpoint uses `fallback`. A crossing pair keeps a
|
|
269
|
+
* controlled endpoint fixed and moves the uncontrolled endpoint onto it; when both or neither
|
|
270
|
+
* endpoint is controlled, the values are swapped.
|
|
271
|
+
*
|
|
272
|
+
* @typeParam T - value of each native input
|
|
273
|
+
* @typeParam P - component properties type
|
|
274
|
+
* @param props - component properties
|
|
275
|
+
* @param aliases - endpoint alias keys
|
|
276
|
+
* @param initial - `true` to fall back to the initial values of uncontrolled endpoints
|
|
277
|
+
* @param fallback - values of uncontrolled endpoints without an initial value
|
|
278
|
+
* @param normalize - clamp a resolved value, or replace an unset value, for endpoint `index`
|
|
279
|
+
* @param compare - order two normalized values
|
|
280
|
+
* @returns normalized, ordered pair
|
|
281
|
+
*/
|
|
282
|
+
export declare function resolveInputPair<T, P extends PairedInputProps<T>>(props: P, aliases: PairedInputAliases<P>, initial: boolean, fallback: InputPair<T | undefined>, normalize: (value: T | undefined, index: 0 | 1) => T, compare: PairedInputType<T>["compare"]): InputPair<T>;
|
|
283
|
+
/**
|
|
284
|
+
* Compute the server-rendered attributes of both inputs of a paired input.
|
|
285
|
+
*
|
|
286
|
+
* Authored `aria-label`, `aria-describedby`, `aria-invalid` and `aria-readonly` attributes apply
|
|
287
|
+
* to the start input only, matching the client controller. Unset boolean attributes are
|
|
288
|
+
* `undefined`, so spreading them renders no attribute. This reads the supporting slots, so call it
|
|
289
|
+
* after rendering the supporting text element.
|
|
290
|
+
*
|
|
291
|
+
* @typeParam T - value of each native input
|
|
292
|
+
* @param elementProps - element properties of the start input, including `attr:` attributes
|
|
293
|
+
* @param localProps - component properties
|
|
294
|
+
* @param labels - default accessible labels of the start and end inputs
|
|
295
|
+
* @param supportingId - id of the supporting text element
|
|
296
|
+
* @returns attributes of the start and end inputs
|
|
297
|
+
*/
|
|
298
|
+
export declare function pairedInputAttributes<T>(elementProps: Record<string, unknown>, localProps: PickLocalDomProps<PairedInputProps<T>>, labels: InputPair<string>, supportingId: string): PairedInputAttributes;
|
|
299
|
+
/**
|
|
300
|
+
* Client controller of a component that edits a range with two native inputs.
|
|
301
|
+
*
|
|
302
|
+
* The start input is the function element; the end input is registered with
|
|
303
|
+
* {@link PairedInputController.setEndInput} from the subclass's `render()`. This controller keeps
|
|
304
|
+
* both inputs synchronized with the shared properties, prevents edits from crossing, invokes the
|
|
305
|
+
* value callbacks, reasserts controlled values and restores both inputs after a native form reset.
|
|
306
|
+
* Subclasses apply their constraints and visual state through the protected hooks.
|
|
307
|
+
*
|
|
308
|
+
* | Property | Start input | End input |
|
|
309
|
+
* | ------------------------------------------ | --------------------- | ---------------------- |
|
|
310
|
+
* | `startLabel` / `endLabel` | `aria-label` | `aria-label` |
|
|
311
|
+
* | `startName`, `endName`, `name` | `name` | `name` |
|
|
312
|
+
* | `startId`, `id`, `attr:id` / `endId` | `id` | `id` |
|
|
313
|
+
* | `attr:form` | `form` | `form` (mirrored) |
|
|
314
|
+
* | `disabled`, `required` | native property | native property |
|
|
315
|
+
* | `readOnly` | `aria-readonly` | `aria-readonly` |
|
|
316
|
+
* | `invalid`, `error`, `errorText` | `aria-invalid` | `aria-invalid` |
|
|
317
|
+
* | supporting text | `aria-describedby` | `aria-describedby` |
|
|
318
|
+
*
|
|
319
|
+
* Authored `attr:aria-label`, `attr:aria-describedby`, `attr:aria-invalid` and
|
|
320
|
+
* `attr:aria-readonly` attributes take precedence on the start input.
|
|
321
|
+
*
|
|
322
|
+
* @typeParam P - component properties type
|
|
323
|
+
* @typeParam T - value of each native input
|
|
324
|
+
*/
|
|
325
|
+
export declare abstract class PairedInputController<P extends PairedInputProps<T>, T> extends DomController<P> {
|
|
326
|
+
#private;
|
|
327
|
+
/**
|
|
328
|
+
* Construct a new `PairedInputController`.
|
|
329
|
+
*
|
|
330
|
+
* @param props - component properties
|
|
331
|
+
* @param className - public CSS class of the component
|
|
332
|
+
* @param labels - default accessible labels of the start and end inputs
|
|
333
|
+
* @param aliases - endpoint alias keys
|
|
334
|
+
* @param type - value semantics of the native inputs
|
|
335
|
+
* @param pair - pair applied before the inputs are rendered
|
|
336
|
+
*/
|
|
337
|
+
constructor(props: P, className: string, labels: InputPair<string>, aliases: PairedInputAliases<P>, type: PairedInputType<T>, pair: InputPair<T>);
|
|
338
|
+
/**
|
|
339
|
+
* Current start and end values of the native inputs.
|
|
340
|
+
*
|
|
341
|
+
* @remarks
|
|
342
|
+
* This is **not** reactive.
|
|
343
|
+
*/
|
|
344
|
+
get values(): InputPair<T>;
|
|
345
|
+
/**
|
|
346
|
+
* Id of the element describing both inputs.
|
|
347
|
+
*/
|
|
348
|
+
protected get supportingId(): string;
|
|
349
|
+
/**
|
|
350
|
+
* End input, or `null` before it is rendered.
|
|
351
|
+
*/
|
|
352
|
+
protected get endInput(): HTMLInputElement | null;
|
|
353
|
+
/**
|
|
354
|
+
* Register the rendered end input.
|
|
355
|
+
*
|
|
356
|
+
* @param input - end input
|
|
357
|
+
*/
|
|
358
|
+
protected setEndInput(input: HTMLInputElement): void;
|
|
359
|
+
/**
|
|
360
|
+
* Resolve the supporting content and insert it into the supporting text element.
|
|
361
|
+
*
|
|
362
|
+
* Subclasses invoke this from `render()` right after creating `element`, where the server
|
|
363
|
+
* renderer reads the supporting slots.
|
|
364
|
+
*
|
|
365
|
+
* @param element - supporting text element
|
|
366
|
+
*/
|
|
367
|
+
protected insertSupporting(element: HTMLElement): void;
|
|
368
|
+
/**
|
|
369
|
+
* Resolve a value of endpoint `index`, clamping it to the component's bounds.
|
|
370
|
+
*
|
|
371
|
+
* @param value - resolved value, or `undefined` when no property supplies one
|
|
372
|
+
* @param index - `0` for the start endpoint, `1` for the end endpoint
|
|
373
|
+
* @returns normalized value
|
|
374
|
+
*/
|
|
375
|
+
protected abstract normalize(value: T | undefined, index: 0 | 1): T;
|
|
376
|
+
/**
|
|
377
|
+
* Apply changed constraint properties, such as bounds and steps, to both inputs.
|
|
378
|
+
*
|
|
379
|
+
* This is invoked in the tracking context of `applyComponentProps()` *before* values are
|
|
380
|
+
* applied, so native value sanitization uses the new constraints.
|
|
381
|
+
*
|
|
382
|
+
* @param start - start input
|
|
383
|
+
* @param end - end input
|
|
384
|
+
* @returns `true` if, and only if, a constraint changed and values must be normalized again
|
|
385
|
+
*/
|
|
386
|
+
protected abstract applyConstraints(start: HTMLInputElement, end: HTMLInputElement): boolean;
|
|
387
|
+
/**
|
|
388
|
+
* Value callbacks invoked after an edit, in invocation order.
|
|
389
|
+
*
|
|
390
|
+
* @returns callbacks, possibly containing aliases of the same function
|
|
391
|
+
*/
|
|
392
|
+
protected abstract changeCallbacks(): readonly (PairedInputChangeHandler<T> | undefined)[];
|
|
393
|
+
/**
|
|
394
|
+
* Handle a pair applied to both native inputs.
|
|
395
|
+
*
|
|
396
|
+
* Subclasses update their visual and accessible state here.
|
|
397
|
+
*
|
|
398
|
+
* @param pair - native start and end values
|
|
399
|
+
*/
|
|
400
|
+
protected onPairApplied(pair: InputPair<T>): void;
|
|
401
|
+
/**
|
|
402
|
+
* Apply the read-only state to the native inputs.
|
|
403
|
+
*
|
|
404
|
+
* Inputs whose type supports the native `readonly` attribute set it here; read-only edits are
|
|
405
|
+
* reverted either way.
|
|
406
|
+
*
|
|
407
|
+
* @param start - start input
|
|
408
|
+
* @param end - end input
|
|
409
|
+
* @param readOnly - the component is read-only
|
|
410
|
+
*/
|
|
411
|
+
protected applyReadOnly(start: HTMLInputElement, end: HTMLInputElement, readOnly: boolean): void;
|
|
412
|
+
/**
|
|
413
|
+
* Apply a pair to both native inputs.
|
|
414
|
+
*
|
|
415
|
+
* @param pair - start and end values
|
|
416
|
+
*/
|
|
417
|
+
protected applyPair(pair: InputPair<T>): void;
|
|
418
|
+
/**
|
|
419
|
+
* Apply local properties to component state and styling.
|
|
420
|
+
*
|
|
421
|
+
* Subclasses must invoke this before applying their own properties.
|
|
422
|
+
*
|
|
423
|
+
* @see {@link ../dom/client#DomController.applyComponentProps}
|
|
424
|
+
*/
|
|
425
|
+
protected applyComponentProps(): void;
|
|
426
|
+
/**
|
|
427
|
+
* Handle function element replacement before the controller reference is updated.
|
|
428
|
+
*
|
|
429
|
+
* The function-element getter still exposes the previous element during this hook.
|
|
430
|
+
*
|
|
431
|
+
* @param curr - new function element, or `null` when absent
|
|
432
|
+
* @see {@link ../dom/client#DomController.onFunctionElementChanged}
|
|
433
|
+
*/
|
|
434
|
+
protected onFunctionElementChanged(curr: FunctionElement<P> | null): void;
|
|
435
|
+
}
|