@sky.ui/core 0.0.7 → 0.0.20
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/CHANGELOG.md +6 -0
- package/auto-import.js +1 -31
- package/dist/custom-elements.json +7115 -21498
- package/dist/helper/utils/color-resolver.d.ts +12 -0
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/index.d.ts +1 -31
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.js +32 -42
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.d.ts +5 -0
- package/dist/sky-appbar/sky-appbar.js +63 -21
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.d.ts +2 -2
- package/dist/sky-avatar/sky-avatar.js +36 -28
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-badge/sky-badge.d.ts +2 -0
- package/dist/sky-badge/sky-badge.js +21 -19
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.d.ts +4 -0
- package/dist/sky-button/sky-button.js +85 -26
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.d.ts +7 -1
- package/dist/sky-card/sky-card.js +72 -40
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.js +34 -23
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.js +53 -35
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +6 -2
- package/dist/sky-combobox/sky-combobox.js +92 -262
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.d.ts +4 -11
- package/dist/sky-dialog/sky-dialog.js +78 -131
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js +21 -19
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.d.ts +1 -0
- package/dist/sky-image/sky-image.js +14 -7
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +15 -2
- package/dist/sky-input/sky-input.js +188 -193
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.d.ts +11 -2
- package/dist/sky-list/sky-list.js +15 -25
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.js +62 -30
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +2 -0
- package/dist/sky-radio/sky-radio.js +29 -9
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.d.ts +1 -1
- package/dist/sky-sheet/sky-sheet.js +68 -22
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-simple-table/index.d.ts +1 -0
- package/dist/sky-simple-table/index.js +1 -0
- package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
- package/dist/sky-simple-table/sky-simple-table.js +100 -0
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
- package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +39 -269
- package/dist/sky-accordion/index.d.ts +0 -1
- package/dist/sky-accordion/index.js +0 -1
- package/dist/sky-accordion/sky-accordion.d.ts +0 -201
- package/dist/sky-accordion/sky-accordion.js +0 -84
- package/dist/sky-accordion/sky-accordion.js.map +0 -1
- package/dist/sky-accordion-item/index.d.ts +0 -1
- package/dist/sky-accordion-item/index.js +0 -1
- package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
- package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
- package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
- package/dist/sky-breadcrumb/index.d.ts +0 -1
- package/dist/sky-breadcrumb/index.js +0 -1
- package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
- package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
- package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
- package/dist/sky-button-group/index.d.ts +0 -1
- package/dist/sky-button-group/index.js +0 -1
- package/dist/sky-button-group/sky-button-group.d.ts +0 -93
- package/dist/sky-button-group/sky-button-group.js +0 -281
- package/dist/sky-button-group/sky-button-group.js.map +0 -1
- package/dist/sky-carousel/index.d.ts +0 -1
- package/dist/sky-carousel/index.js +0 -1
- package/dist/sky-carousel/sky-carousel.d.ts +0 -265
- package/dist/sky-carousel/sky-carousel.js +0 -211
- package/dist/sky-carousel/sky-carousel.js.map +0 -1
- package/dist/sky-counter/index.d.ts +0 -1
- package/dist/sky-counter/index.js +0 -1
- package/dist/sky-counter/sky-counter.d.ts +0 -130
- package/dist/sky-counter/sky-counter.js +0 -101
- package/dist/sky-counter/sky-counter.js.map +0 -1
- package/dist/sky-drawer/index.d.ts +0 -1
- package/dist/sky-drawer/index.js +0 -1
- package/dist/sky-drawer/sky-drawer.d.ts +0 -161
- package/dist/sky-drawer/sky-drawer.js +0 -175
- package/dist/sky-drawer/sky-drawer.js.map +0 -1
- package/dist/sky-dropdown/index.d.ts +0 -1
- package/dist/sky-dropdown/index.js +0 -1
- package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
- package/dist/sky-dropdown/sky-dropdown.js +0 -61
- package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
- package/dist/sky-dropdown-item/index.d.ts +0 -1
- package/dist/sky-dropdown-item/index.js +0 -1
- package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
- package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
- package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
- package/dist/sky-flexbar/index.d.ts +0 -1
- package/dist/sky-flexbar/index.js +0 -1
- package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
- package/dist/sky-flexbar/sky-flexbar.js +0 -157
- package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
- package/dist/sky-flexitem/index.d.ts +0 -1
- package/dist/sky-flexitem/index.js +0 -1
- package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
- package/dist/sky-flexitem/sky-flexitem.js +0 -52
- package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
- package/dist/sky-navbar/index.d.ts +0 -1
- package/dist/sky-navbar/index.js +0 -1
- package/dist/sky-navbar/sky-navbar.d.ts +0 -211
- package/dist/sky-navbar/sky-navbar.js +0 -521
- package/dist/sky-navbar/sky-navbar.js.map +0 -1
- package/dist/sky-navpanel/index.d.ts +0 -1
- package/dist/sky-navpanel/index.js +0 -1
- package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
- package/dist/sky-navpanel/sky-navpanel.js +0 -404
- package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
- package/dist/sky-notification/index.d.ts +0 -1
- package/dist/sky-notification/index.js +0 -1
- package/dist/sky-notification/sky-notification.d.ts +0 -152
- package/dist/sky-notification/sky-notification.js +0 -456
- package/dist/sky-notification/sky-notification.js.map +0 -1
- package/dist/sky-otp/index.d.ts +0 -1
- package/dist/sky-otp/index.js +0 -1
- package/dist/sky-otp/sky-otp.d.ts +0 -101
- package/dist/sky-otp/sky-otp.js +0 -96
- package/dist/sky-otp/sky-otp.js.map +0 -1
- package/dist/sky-overlay/index.d.ts +0 -1
- package/dist/sky-overlay/index.js +0 -1
- package/dist/sky-overlay/sky-overlay.d.ts +0 -71
- package/dist/sky-overlay/sky-overlay.js +0 -26
- package/dist/sky-overlay/sky-overlay.js.map +0 -1
- package/dist/sky-pagination/index.d.ts +0 -1
- package/dist/sky-pagination/index.js +0 -1
- package/dist/sky-pagination/sky-pagination.d.ts +0 -167
- package/dist/sky-pagination/sky-pagination.js +0 -453
- package/dist/sky-pagination/sky-pagination.js.map +0 -1
- package/dist/sky-progress/index.d.ts +0 -1
- package/dist/sky-progress/index.js +0 -1
- package/dist/sky-progress/sky-progress.d.ts +0 -70
- package/dist/sky-progress/sky-progress.js +0 -87
- package/dist/sky-progress/sky-progress.js.map +0 -1
- package/dist/sky-radio-group/index.d.ts +0 -1
- package/dist/sky-radio-group/index.js +0 -1
- package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
- package/dist/sky-radio-group/sky-radio-group.js +0 -239
- package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
- package/dist/sky-range/index.d.ts +0 -1
- package/dist/sky-range/index.js +0 -1
- package/dist/sky-range/sky-range.d.ts +0 -110
- package/dist/sky-range/sky-range.js +0 -196
- package/dist/sky-range/sky-range.js.map +0 -1
- package/dist/sky-serial/index.d.ts +0 -1
- package/dist/sky-serial/index.js +0 -1
- package/dist/sky-serial/sky-serial.d.ts +0 -127
- package/dist/sky-serial/sky-serial.js +0 -133
- package/dist/sky-serial/sky-serial.js.map +0 -1
- package/dist/sky-skeleton/index.d.ts +0 -1
- package/dist/sky-skeleton/index.js +0 -1
- package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
- package/dist/sky-skeleton/sky-skeleton.js +0 -233
- package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
- package/dist/sky-slider/index.d.ts +0 -1
- package/dist/sky-slider/index.js +0 -1
- package/dist/sky-slider/sky-slider.d.ts +0 -96
- package/dist/sky-slider/sky-slider.js +0 -139
- package/dist/sky-slider/sky-slider.js.map +0 -1
- package/dist/sky-speeddial/index.d.ts +0 -1
- package/dist/sky-speeddial/index.js +0 -1
- package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
- package/dist/sky-speeddial/sky-speeddial.js +0 -154
- package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
- package/dist/sky-spinner/index.d.ts +0 -1
- package/dist/sky-spinner/index.js +0 -1
- package/dist/sky-spinner/sky-spinner.d.ts +0 -87
- package/dist/sky-spinner/sky-spinner.js +0 -334
- package/dist/sky-spinner/sky-spinner.js.map +0 -1
- package/dist/sky-steps/index.d.ts +0 -1
- package/dist/sky-steps/index.js +0 -1
- package/dist/sky-steps/sky-steps.d.ts +0 -170
- package/dist/sky-steps/sky-steps.js +0 -455
- package/dist/sky-steps/sky-steps.js.map +0 -1
- package/dist/sky-switch/index.d.ts +0 -1
- package/dist/sky-switch/index.js +0 -1
- package/dist/sky-switch/sky-switch.d.ts +0 -116
- package/dist/sky-switch/sky-switch.js +0 -191
- package/dist/sky-switch/sky-switch.js.map +0 -1
- package/dist/sky-tab/index.d.ts +0 -1
- package/dist/sky-tab/index.js +0 -1
- package/dist/sky-tab/sky-tab.d.ts +0 -188
- package/dist/sky-tab/sky-tab.js +0 -390
- package/dist/sky-tab/sky-tab.js.map +0 -1
- package/dist/sky-tab-button/index.d.ts +0 -1
- package/dist/sky-tab-button/index.js +0 -1
- package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
- package/dist/sky-tab-button/sky-tab-button.js +0 -167
- package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
- package/dist/sky-theme-switcher/index.d.ts +0 -1
- package/dist/sky-theme-switcher/index.js +0 -1
- package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
- package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
- package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
- package/dist/sky-tooltip/index.d.ts +0 -1
- package/dist/sky-tooltip/index.js +0 -1
- package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
- package/dist/sky-tooltip/sky-tooltip.js +0 -242
- package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
import { FormControlBase, FormState } from "../helper/internals/form-control-base";
|
|
2
|
-
export type SkyRadioGroupLayout = "row" | "column";
|
|
3
|
-
export type SkyRadioGroupVariant = "default" | "highlight";
|
|
4
|
-
export type SkyRadioGroupValueChangedDetail = {
|
|
5
|
-
value: string;
|
|
6
|
-
};
|
|
7
|
-
export type SkyRadioGroupValidationErrorDetail = {
|
|
8
|
-
errors: string[];
|
|
9
|
-
};
|
|
10
|
-
export type SkyRadioGroupValueClearedDetail = {
|
|
11
|
-
value: "";
|
|
12
|
-
};
|
|
13
|
-
export type SkyRadioGroupIconClickDetail = {
|
|
14
|
-
position: "left" | "right";
|
|
15
|
-
eventType: string | null;
|
|
16
|
-
eventData: Event | null;
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* @element sky-radio-group
|
|
20
|
-
*
|
|
21
|
-
* @summary Accessible group container that coordinates a set of `sky-radio` options.
|
|
22
|
-
*
|
|
23
|
-
* @status stable
|
|
24
|
-
* @since 1.0.0
|
|
25
|
-
*
|
|
26
|
-
* @documentation https://library.sky-ui.com/components/radio
|
|
27
|
-
* @dependency sky-radio
|
|
28
|
-
*
|
|
29
|
-
* @uiVModel value value-changed
|
|
30
|
-
*
|
|
31
|
-
* @slot - Default slot for group content. When `label` is omitted or blank, the group runs in **slot-only** mode: no built-in label row (unless `icon-left` / `icon-right` are used), and the default slot is not forced into the internal radio flex layout—use it to compose custom UI (still place `<sky-radio>` children here for selection behavior).
|
|
32
|
-
* @slot icon-left - Optional leading action/icon area.
|
|
33
|
-
* @slot icon-right - Optional trailing action/icon area.
|
|
34
|
-
*
|
|
35
|
-
* @csspart wrapper - The outer interactive container (error/shadow styling hooks).
|
|
36
|
-
* @csspart group-label - The rendered label text (including prefix/suffix).
|
|
37
|
-
* @csspart container - The element that wraps the slotted radios.
|
|
38
|
-
* @csspart icon-left - The left icon/button container.
|
|
39
|
-
* @csspart icon-right - The right icon/button container.
|
|
40
|
-
* @csspart error - The error message element rendered below the wrapper.
|
|
41
|
-
*
|
|
42
|
-
* @property {string} name - Shared radio name applied to child `<sky-radio>` elements. Default: ""
|
|
43
|
-
* @property {string} value - Currently selected value. Default: ""
|
|
44
|
-
* @property {string} label - Optional group label text. Default: ""
|
|
45
|
-
* @property {SkyRadioGroupLayout} layout - Layout direction for radio options.
|
|
46
|
-
* @property {boolean} shadow - Enables bordered glass effect around the group.
|
|
47
|
-
* @property {boolean} force - Stacks header and options vertically in constrained layouts.
|
|
48
|
-
* @property {string[]} validationErrors - Current validation errors.
|
|
49
|
-
* @property {boolean} required - Requires one radio option to be selected.
|
|
50
|
-
* @property {boolean} validationActive - Activates validation state and messages.
|
|
51
|
-
* @property {string} requiredMessage - Validation message shown when selection is missing.
|
|
52
|
-
* @property {boolean} showErrors - Controls whether error messages are rendered.
|
|
53
|
-
* @property {string} prefix - Text rendered before the group label.
|
|
54
|
-
* @property {string} suffix - Text rendered after the group label.
|
|
55
|
-
* @property {string} prefixColor - CSS color for prefix text.
|
|
56
|
-
* @property {string} suffixColor - CSS color for suffix text.
|
|
57
|
-
* @property {boolean} disabled - Disables interaction for the group and children.
|
|
58
|
-
* @property {string} color - Checked-state color propagated to radios.
|
|
59
|
-
* @property {boolean} readonly - Makes the group read-only while preserving focusability.
|
|
60
|
-
* @property {SkyRadioGroupVariant} variant - Visual label style variant.
|
|
61
|
-
*
|
|
62
|
-
* @fires {CustomEvent<SkyRadioGroupValueChangedDetail>} value-changed - Fired when selected value changes.
|
|
63
|
-
* @fires {CustomEvent<SkyRadioGroupValidationErrorDetail>} validation-error - Fired after `validateInput()` completes.
|
|
64
|
-
* @fires {CustomEvent<SkyRadioGroupValueClearedDetail>} value-cleared - Fired when `reset()` clears selection.
|
|
65
|
-
* @fires {CustomEvent<SkyRadioGroupIconClickDetail>} left-icon-click - Fired when the left icon slot is clicked.
|
|
66
|
-
* @fires {CustomEvent<SkyRadioGroupIconClickDetail>} right-icon-click - Fired when the right icon slot is clicked.
|
|
67
|
-
* @fires {Event} change - Native change event for form compatibility.
|
|
68
|
-
* @fires {Event} input - Native input event for form compatibility.
|
|
69
|
-
* @method setValue Sets selected radio value programmatically.
|
|
70
|
-
* @method reset Clears selection and validation state.
|
|
71
|
-
*
|
|
72
|
-
* @Behavior
|
|
73
|
-
* - Listens to child `radio-select` events and keeps a single selected value.
|
|
74
|
-
* - Mirrors `name`, `disabled`, and `readonly` state to child radios.
|
|
75
|
-
* - Integrates with `FormControlBase` for form value and validation handling.
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```html
|
|
79
|
-
* <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
|
|
80
|
-
* <sky-radio value="email">Email</sky-radio>
|
|
81
|
-
* <sky-radio value="sms">SMS</sky-radio>
|
|
82
|
-
* <sky-radio value="push">Push Notification</sky-radio>
|
|
83
|
-
* </sky-radio-group>
|
|
84
|
-
* ```
|
|
85
|
-
* ```vue
|
|
86
|
-
* <template>
|
|
87
|
-
* <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
|
|
88
|
-
* <sky-radio value="email">Email</sky-radio>
|
|
89
|
-
* <sky-radio value="sms">SMS</sky-radio>
|
|
90
|
-
* <sky-radio value="push">Push Notification</sky-radio>
|
|
91
|
-
* </sky-radio-group>
|
|
92
|
-
* </template>
|
|
93
|
-
* ```
|
|
94
|
-
* ```jsx
|
|
95
|
-
* export default function Demo() {
|
|
96
|
-
* return (
|
|
97
|
-
* <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
|
|
98
|
-
* <sky-radio value="email">Email</sky-radio>
|
|
99
|
-
* <sky-radio value="sms">SMS</sky-radio>
|
|
100
|
-
* <sky-radio value="push">Push Notification</sky-radio>
|
|
101
|
-
* </sky-radio-group>
|
|
102
|
-
* );
|
|
103
|
-
* }
|
|
104
|
-
* ```
|
|
105
|
-
*/
|
|
106
|
-
export declare class SkyRadioGroup extends FormControlBase {
|
|
107
|
-
/** Currently selected value. */
|
|
108
|
-
value: string;
|
|
109
|
-
setValue(value: string): void;
|
|
110
|
-
/** Optional group label text. */
|
|
111
|
-
label: string;
|
|
112
|
-
/** Layout direction for options: `row` or `column`. */
|
|
113
|
-
layout: SkyRadioGroupLayout;
|
|
114
|
-
/** Enables bordered glass effect around the group. */
|
|
115
|
-
shadow: boolean;
|
|
116
|
-
/** Stacks label/icons and options vertically for constrained widths. */
|
|
117
|
-
force: boolean;
|
|
118
|
-
/** Current validation errors. */
|
|
119
|
-
validationErrors: string[];
|
|
120
|
-
/** Whether a selection is required. */
|
|
121
|
-
required: boolean;
|
|
122
|
-
/** Whether validation state is active. */
|
|
123
|
-
validationActive: boolean;
|
|
124
|
-
/** Message to use when required validation fails. */
|
|
125
|
-
requiredMessage: string;
|
|
126
|
-
/** Whether to render the error text. */
|
|
127
|
-
showErrors: boolean;
|
|
128
|
-
/** Optional text prefix before the label. */
|
|
129
|
-
prefix: string;
|
|
130
|
-
/** Optional text suffix after the label. */
|
|
131
|
-
suffix: string;
|
|
132
|
-
/** Color for the label prefix text. */
|
|
133
|
-
prefixColor: string;
|
|
134
|
-
/** Color for the label suffix text. */
|
|
135
|
-
suffixColor: string;
|
|
136
|
-
/** Disables interaction for the whole group. */
|
|
137
|
-
disabled: boolean;
|
|
138
|
-
color: string;
|
|
139
|
-
readonly: boolean;
|
|
140
|
-
invalid: boolean;
|
|
141
|
-
variant: SkyRadioGroupVariant;
|
|
142
|
-
constructor();
|
|
143
|
-
static styles: import("lit").CSSResult;
|
|
144
|
-
static shadowRootOptions: {
|
|
145
|
-
delegatesFocus: boolean;
|
|
146
|
-
clonable?: boolean;
|
|
147
|
-
customElementRegistry?: CustomElementRegistry;
|
|
148
|
-
mode: ShadowRootMode;
|
|
149
|
-
serializable?: boolean;
|
|
150
|
-
slotAssignment?: SlotAssignmentMode;
|
|
151
|
-
};
|
|
152
|
-
firstUpdated(): void;
|
|
153
|
-
updated(changedProperties: Map<string, unknown>): void;
|
|
154
|
-
/** Handle a child `radio-select` event and update selection. */
|
|
155
|
-
private handleChange;
|
|
156
|
-
/** Validate required selection and surface errors. */
|
|
157
|
-
validateInput(value?: string | null): boolean;
|
|
158
|
-
focus(): void;
|
|
159
|
-
/** Clear selection and error state, and notify listeners. */
|
|
160
|
-
reset(): void;
|
|
161
|
-
/** Keep child checked states in sync with the group's `value`. */
|
|
162
|
-
private updateCheckedState;
|
|
163
|
-
/** Apply name/disabled/readonly down to children. */
|
|
164
|
-
private syncChildRadios;
|
|
165
|
-
private _radioSelectHandler;
|
|
166
|
-
connectedCallback(): void;
|
|
167
|
-
disconnectedCallback(): void;
|
|
168
|
-
/** Emit which icon was clicked (left/right). */
|
|
169
|
-
private handleIconClick;
|
|
170
|
-
/** Get the current value for form submission */
|
|
171
|
-
protected getFormValue(): FormState;
|
|
172
|
-
/** Set value from form state (e.g., form reset) */
|
|
173
|
-
protected setValueFromFormState(state: FormState): void;
|
|
174
|
-
/** Get the validity anchor (the first radio input) */
|
|
175
|
-
protected getValidityAnchor(): HTMLElement | undefined;
|
|
176
|
-
/** Check if empty (for required validation) */
|
|
177
|
-
protected isEmpty(): boolean;
|
|
178
|
-
/** Get the native control (first radio's input) */
|
|
179
|
-
protected getNativeControl(): HTMLElement | null;
|
|
180
|
-
/** Override to provide custom error messages */
|
|
181
|
-
protected getCustomErrorMessage(): string;
|
|
182
|
-
protected onFormReset(): void;
|
|
183
|
-
/** Built-in group label row (prop); whitespace-only counts as absent for slot-only mode. */
|
|
184
|
-
private get _usesBuiltinGroupLabel();
|
|
185
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
186
|
-
}
|
|
@@ -1,239 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as r,html as o}from"lit";import{property as s,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{FormControlBase as n}from"../helper/internals/form-control-base.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";let p=class extends n{setValue(t){this.value=t??"",this.updateCheckedState(this.value),this.syncFormValue()}constructor(){super(),this.value="",this.label="",this.layout="row",this.shadow=!0,this.force=!1,this.validationErrors=[],this.required=!1,this.validationActive=!1,this.requiredMessage="The Radio selection is required.",this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.disabled=!1,this.color="primary",this.readonly=!1,this.invalid=!1,this.variant="default",this._radioSelectHandler=t=>this.handleChange(t),this.captureDefaultValue("")}static{this.styles=i`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
width: 100%;
|
|
5
|
-
font-family: var(--sky-font);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:host([variant="highlight"]) {
|
|
9
|
-
.group-label {
|
|
10
|
-
color: var(--radio-checked-color);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/* readonly: subtle visual, but still focusable/tabbable */
|
|
15
|
-
:host([readonly]) .radio-wrapper {
|
|
16
|
-
cursor: default;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.radio-wrapper {
|
|
20
|
-
position: relative;
|
|
21
|
-
display: flex;
|
|
22
|
-
flex-wrap: wrap;
|
|
23
|
-
width: inherit;
|
|
24
|
-
align-items: center;
|
|
25
|
-
background: transparent;
|
|
26
|
-
justify-content: space-between;
|
|
27
|
-
border-radius: var(--sky-radius-secondary);
|
|
28
|
-
min-height: 38px;
|
|
29
|
-
height: 100%;
|
|
30
|
-
pointer-events: auto;
|
|
31
|
-
transition: all 0.2s ease-in-out;
|
|
32
|
-
box-sizing: border-box;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host([validationActive]:invalid) .radio-wrapper {
|
|
36
|
-
border-bottom: 1px solid var(--sky-danger-primary);
|
|
37
|
-
}
|
|
38
|
-
:host([validationActive]:invalid) .group-label {
|
|
39
|
-
color: var(--sky-danger-primary);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
sky-icon {
|
|
43
|
-
display: inline-block;
|
|
44
|
-
width: 1em;
|
|
45
|
-
height: 1em;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.error-message {
|
|
49
|
-
font-size: var(--sky-font-size-xs);
|
|
50
|
-
color: var(--sky-danger-primary);
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
overflow: hidden;
|
|
53
|
-
text-overflow: ellipsis;
|
|
54
|
-
pointer-events: none;
|
|
55
|
-
margin-top: 2px;
|
|
56
|
-
margin-left: 5px;
|
|
57
|
-
width: 100%;
|
|
58
|
-
text-align: start;
|
|
59
|
-
visibility: hidden;
|
|
60
|
-
font-family: var(--sky-font);
|
|
61
|
-
}
|
|
62
|
-
.error-message.show {
|
|
63
|
-
visibility: visible;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
:dir(rtl) .error-message {
|
|
67
|
-
margin-right: 5px;
|
|
68
|
-
margin-left: unset;
|
|
69
|
-
text-align: end;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.radio-wrapper[force] {
|
|
73
|
-
flex-direction: column;
|
|
74
|
-
align-items: flex-start;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.radio-wrapper[shadow] {
|
|
78
|
-
border: var(--sky-border-primary);
|
|
79
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
80
|
-
background: var(--sky-glass-primary);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.radio-wrapper.column {
|
|
84
|
-
flex-direction: column;
|
|
85
|
-
align-items: flex-start;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.radio-wrapper.slot-only {
|
|
89
|
-
min-height: unset;
|
|
90
|
-
align-items: stretch;
|
|
91
|
-
justify-content: flex-start;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.radio-container.slot-only {
|
|
95
|
-
display: block;
|
|
96
|
-
width: 100%;
|
|
97
|
-
padding: 0;
|
|
98
|
-
gap: 0;
|
|
99
|
-
box-sizing: border-box;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.radio-container.slot-only.row,
|
|
103
|
-
.radio-container.slot-only.column {
|
|
104
|
-
flex-direction: unset;
|
|
105
|
-
align-items: unset;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.radio-wrapper[shadow]::before {
|
|
109
|
-
content: "";
|
|
110
|
-
position: absolute;
|
|
111
|
-
inset: 0;
|
|
112
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
113
|
-
var(--sky-saturation-primary);
|
|
114
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
115
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
116
|
-
z-index: -1;
|
|
117
|
-
border-radius: inherit;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.group-label {
|
|
121
|
-
color: var(--sky-text-primary);
|
|
122
|
-
display: block;
|
|
123
|
-
padding: 5px;
|
|
124
|
-
font-size: var(--sky-font-size-sm);
|
|
125
|
-
font-family: var(--sky-font);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.radio-container {
|
|
129
|
-
display: flex;
|
|
130
|
-
flex-wrap: wrap;
|
|
131
|
-
align-items: center;
|
|
132
|
-
gap: 10px;
|
|
133
|
-
}
|
|
134
|
-
.radio-container.row {
|
|
135
|
-
flex-direction: row;
|
|
136
|
-
padding: 5px;
|
|
137
|
-
}
|
|
138
|
-
.radio-container.column {
|
|
139
|
-
flex-direction: column;
|
|
140
|
-
align-items: flex-start;
|
|
141
|
-
padding: 5px;
|
|
142
|
-
box-sizing: border-box;
|
|
143
|
-
width: 100%;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.icon-slot {
|
|
147
|
-
display: none;
|
|
148
|
-
justify-content: center;
|
|
149
|
-
font-size: var(--sky-font-size-xl);
|
|
150
|
-
align-items: center;
|
|
151
|
-
border-radius: var(--sky-radius-secondary);
|
|
152
|
-
height: 38px;
|
|
153
|
-
color: var(--sky-text-primary);
|
|
154
|
-
min-width: 36px;
|
|
155
|
-
background: var(--sky-glass-primary);
|
|
156
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
157
|
-
var(--sky-saturation-primary);
|
|
158
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
159
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
160
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
161
|
-
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
|
|
162
|
-
color 0.3s ease-in-out;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.icon-slot[filled] {
|
|
166
|
-
display: flex;
|
|
167
|
-
position: relative;
|
|
168
|
-
cursor: pointer;
|
|
169
|
-
border: 1px solid transparent;
|
|
170
|
-
border-right: var(--sky-border-primary);
|
|
171
|
-
}
|
|
172
|
-
.icon-slot[filled]:hover {
|
|
173
|
-
transform: translate(-5px, -5px);
|
|
174
|
-
color: var(--radio-checked-color);
|
|
175
|
-
border: var(--sky-border-primary) !important;
|
|
176
|
-
}
|
|
177
|
-
:dir(rtl).icon-slot[filled]:hover {
|
|
178
|
-
transform: translate(5px, -5px);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.radio-wrapper[disabled] {
|
|
182
|
-
pointer-events: none;
|
|
183
|
-
opacity: 0.6;
|
|
184
|
-
}
|
|
185
|
-
:host([validationActive]:invalid) .icon-slot {
|
|
186
|
-
color: var(--sky-danger-primary);
|
|
187
|
-
}
|
|
188
|
-
`}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}firstUpdated(){this.captureDefaultValue(this.value??""),this.syncChildRadios(),this.syncFormValue(),this.syncValidity()}updated(t){t.has("color")&&this.style.setProperty("--radio-checked-color",d(this.color)),t.has("value")&&(this.updateCheckedState(this.value),this.syncFormValue(),this.syncValidity()),(t.has("name")||t.has("disabled")||t.has("readonly"))&&this.syncChildRadios()}handleChange(t){if(this.disabled||this.readonly)return;const e=t.target;if(e?.matches("sky-radio")&&e.disabled)return;const i=t.detail.value;this.value=i,this.updateCheckedState(i),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.syncFormValue(),this.syncValidity(),this.validationActive&&this.validateInput()}validateInput(t=null){if(!this.validationActive)return!0;this.validationErrors=[];const e=null!==t?t:this.value;this.required&&!e&&this.validationErrors.push(this.requiredMessage),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=this.shadowRoot?.querySelector(".radio-wrapper");this.validationErrors.length>0?i?.classList.add("invalid"):i?.classList.remove("invalid");const r=this.shadowRoot?.querySelector(".icon-slot");r&&(this.validationErrors.length>0?r.classList.add("invalid"):r.classList.remove("invalid"));const o=0===this.validationErrors.length;return this.invalid=!o,o}focus(){const t=this.querySelector("sky-radio"),e=this.shadowRoot?.querySelector(".radio-wrapper");if(t){const e=t.shadowRoot?.querySelector("input[type='radio']");e&&e.focus()}e&&(e.classList.remove("shake"),e.offsetWidth,e.classList.add("shake"))}reset(){this.value="",this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.querySelectorAll("sky-radio").forEach(t=>t.checked=!1);const t=this.shadowRoot?.querySelector(".radio-wrapper");t?.classList.remove("invalid"),t?.classList.remove("shake");const e=this.shadowRoot?.querySelector(".icon-slot");e?.classList.remove("invalid"),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:""},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity()}updateCheckedState(t){this.querySelectorAll("sky-radio").forEach(e=>{e.checked=e.value===t})}syncChildRadios(){this.querySelectorAll("sky-radio").forEach(t=>{const e=t;this.name&&(e.name=this.name),e.hasAttribute("disabled")&&!e.hasAttribute("data-sky-radio-option-disabled")&&e.setAttribute("data-sky-radio-option-disabled",""),e.hasAttribute("readonly")&&!e.hasAttribute("data-sky-radio-option-readonly")&&e.setAttribute("data-sky-radio-option-readonly","");const i=e.hasAttribute("data-sky-radio-option-disabled")||e.hasAttribute("disabled"),r=e.hasAttribute("data-sky-radio-option-readonly")||e.hasAttribute("readonly");e.disabled=this.disabled||i,e.readonly=this.readonly||r,this.value&&e.value===this.value&&(e.checked=!0)})}connectedCallback(){super.connectedCallback(),this.addEventListener("radio-select",this._radioSelectHandler),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("radio-select",this._radioSelectHandler),super.disconnectedCallback()}handleIconClick(t,e=null){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}getFormValue(){return this.value||null}setValueFromFormState(t){"string"==typeof t?(this.value=t,this.updateCheckedState(t)):(this.value="",this.updateCheckedState(""))}getValidityAnchor(){return this.shadowRoot?.querySelector(".radio-container")?.querySelector("sky-radio")?.shadowRoot?.querySelector("input[type='radio']")}isEmpty(){return!this.value}getNativeControl(){return null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){this.validationErrors=[],this.validationActive=!1,this.invalid=!1}get _usesBuiltinGroupLabel(){return Boolean(this.label?.trim())}render(){const t=!!this.querySelector('[slot="icon-left"]'),e=!!this.querySelector('[slot="icon-right"]'),i=!this._usesBuiltinGroupLabel,r=t&&e?"space-between":t?"flex-start":"flex-end";return o`
|
|
189
|
-
<div
|
|
190
|
-
class="radio-wrapper ${this.layout} ${i?"slot-only":""}"
|
|
191
|
-
part="wrapper"
|
|
192
|
-
?shadow=${this.shadow}
|
|
193
|
-
?force=${this.force}
|
|
194
|
-
?disabled=${this.disabled}
|
|
195
|
-
aria-readonly=${this.readonly?"true":"false"}
|
|
196
|
-
aria-disabled=${this.disabled?"true":"false"}
|
|
197
|
-
>
|
|
198
|
-
${l(t||e||this._usesBuiltinGroupLabel,()=>o`
|
|
199
|
-
<div
|
|
200
|
-
style="display:flex;flex-direction:row;justify-content:${r};align-items:center;width:${this.force?"100%":""};"
|
|
201
|
-
>
|
|
202
|
-
${l(t,()=>o`<div
|
|
203
|
-
class="icon-slot left"
|
|
204
|
-
part="icon-left"
|
|
205
|
-
?filled=${t}
|
|
206
|
-
@click=${t=>this.handleIconClick("left",t)}
|
|
207
|
-
>
|
|
208
|
-
<slot name="icon-left"></slot>
|
|
209
|
-
</div>`)}
|
|
210
|
-
${l(this._usesBuiltinGroupLabel,()=>o`<span class="group-label" part="group-label">
|
|
211
|
-
<span style="color:${this.prefixColor}">${this.prefix}</span>${this.label}<span style="color:${this.suffixColor}">${this.suffix}</span>
|
|
212
|
-
</span>`)}
|
|
213
|
-
${l(e,()=>o`<div
|
|
214
|
-
class="icon-slot right"
|
|
215
|
-
part="icon-right"
|
|
216
|
-
?filled=${e}
|
|
217
|
-
@click=${t=>this.handleIconClick("right",t)}
|
|
218
|
-
>
|
|
219
|
-
<slot name="icon-right"></slot>
|
|
220
|
-
</div>`)}
|
|
221
|
-
</div>
|
|
222
|
-
`)}
|
|
223
|
-
<div
|
|
224
|
-
class="radio-container ${this.layout} ${i?"slot-only":""}"
|
|
225
|
-
part="container"
|
|
226
|
-
tabindex="-1"
|
|
227
|
-
?force=${this.force}
|
|
228
|
-
>
|
|
229
|
-
<slot></slot>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
<div
|
|
233
|
-
class="error-message ${this.showErrors&&this.validationErrors.length>0&&this.validationActive?"show":""}"
|
|
234
|
-
part="error"
|
|
235
|
-
>
|
|
236
|
-
${this.validationErrors[0]}
|
|
237
|
-
</div>
|
|
238
|
-
`}};t([s({type:String}),e("design:type",Object)],p.prototype,"value",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"label",void 0),t([s({type:String}),e("design:type",String)],p.prototype,"layout",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"shadow",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"force",void 0),t([s({type:Array}),e("design:type",Array)],p.prototype,"validationErrors",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"required",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"validationActive",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"requiredMessage",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"showErrors",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefixColor",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffixColor",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"disabled",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"color",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"readonly",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Boolean)],p.prototype,"invalid",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],p.prototype,"variant",void 0),p=t([a("sky-radio-group"),e("design:paramtypes",[])],p);export{p as SkyRadioGroup};
|
|
239
|
-
//# sourceMappingURL=sky-radio-group.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-radio-group.js","sources":["../../src/sky-radio-group/sky-radio-group.ts"],"sourcesContent":[null],"names":["SkyRadioGroup","FormControlBase","setValue","value","this","updateCheckedState","syncFormValue","constructor","super","label","layout","shadow","force","validationErrors","required","validationActive","requiredMessage","showErrors","prefix","suffix","prefixColor","suffixColor","disabled","color","readonly","invalid","variant","_radioSelectHandler","e","handleChange","captureDefaultValue","styles","css","shadowRootOptions","LitElement","delegatesFocus","firstUpdated","syncChildRadios","syncValidity","updated","changedProperties","has","style","setProperty","resolveColor","source","target","matches","newValue","detail","dispatchEvent","CustomEvent","bubbles","composed","reemitNativeEvent","validateInput","currentValue","push","errors","radioElement","shadowRoot","querySelector","length","classList","add","remove","iconSlots","isValid","focus","firstRadio","radioContainer","radioInput","offsetWidth","reset","querySelectorAll","forEach","radio","checked","iconSlot","selectedValue","r","name","hasAttribute","setAttribute","optionDisabled","optionReadonly","connectedCallback","addEventListener","tabIndex","disconnectedCallback","removeEventListener","handleIconClick","position","event","eventType","type","eventData","getFormValue","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","getCustomErrorMessage","onFormReset","_usesBuiltinGroupLabel","Boolean","trim","render","hasLeftIcon","hasRightIcon","slotOnly","justifyContent","html","when","__decorate","property","String","prototype","reflect","Array","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-range";
|
package/dist/sky-range/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-range.js';
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
export type SkyRangeChangedDetail = {
|
|
3
|
-
from: number;
|
|
4
|
-
to: number;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* @element sky-range
|
|
8
|
-
*
|
|
9
|
-
* @summary Dual-thumb range selector for choosing minimum and maximum values.
|
|
10
|
-
*
|
|
11
|
-
* @status stable
|
|
12
|
-
* @since 1.0.0
|
|
13
|
-
*
|
|
14
|
-
* @documentation https://library.sky-ui.com/components/slider
|
|
15
|
-
*
|
|
16
|
-
* @uiVModel from range-changed detail=from
|
|
17
|
-
* @uiVModel to range-changed detail=to
|
|
18
|
-
*
|
|
19
|
-
* @slot - (No slots) — Content is internally rendered.
|
|
20
|
-
*
|
|
21
|
-
* @csspart container - The outer card-like wrapper.
|
|
22
|
-
* @csspart label - The top-left label.
|
|
23
|
-
* @csspart value - The formatted value summary at the top-right.
|
|
24
|
-
* @csspart slider-container - Wrapper around the track and sliders.
|
|
25
|
-
* @csspart track - The full, unselected track element.
|
|
26
|
-
* @csspart highlight - The selected range highlight.
|
|
27
|
-
* @csspart slider-from - The native `<input type="range">` controlling `from`.
|
|
28
|
-
* @csspart slider-to - The native `<input type="range">` controlling `to`.
|
|
29
|
-
*
|
|
30
|
-
* @property {number} from - Lower bound of the selected range.
|
|
31
|
-
* @property {number} to - Upper bound of the selected range.
|
|
32
|
-
* @property {number} min - Minimum selectable value.
|
|
33
|
-
* @property {number} max - Maximum selectable value.
|
|
34
|
-
* @property {number} step - Step interval used for snapping values.
|
|
35
|
-
* @property {string} label - Optional label shown above sliders.
|
|
36
|
-
* @property {boolean} disabled - Disables interaction and dims the control.
|
|
37
|
-
* @property {string} prefix - Text rendered before numeric values.
|
|
38
|
-
* @property {string} suffix - Text rendered after numeric values.
|
|
39
|
-
* @property {boolean} shadow - Adds glass border/shadow styling to the container.
|
|
40
|
-
* @property {boolean} commitOnly - Emits updates only on committed change events.
|
|
41
|
-
* @property {boolean} showValue - Toggles formatted value summary visibility.
|
|
42
|
-
*
|
|
43
|
-
* @fires {CustomEvent<SkyRangeChangedDetail>} range-changed - Fired when the selected range is committed.
|
|
44
|
-
* @method setRange Sets and normalizes the selected range.
|
|
45
|
-
*
|
|
46
|
-
* @Behavior
|
|
47
|
-
* - Maintains a valid `from < to` range while dragging both thumbs.
|
|
48
|
-
* - Supports live updates or commit-only updates through `commitOnly`.
|
|
49
|
-
* - Uses native range inputs for built-in keyboard and screen-reader support.
|
|
50
|
-
*
|
|
51
|
-
* @example
|
|
52
|
-
* ```html
|
|
53
|
-
* <sky-range label="Price Range" prefix="$" min="0" max="1000" step="50" from="200" to="700" show-value shadow commit-only></sky-range>
|
|
54
|
-
* ```
|
|
55
|
-
* ```vue
|
|
56
|
-
* <template>
|
|
57
|
-
* <sky-range label="Price Range" prefix="$" :min="0" :max="1000" :step="50" :from="200" :to="700" show-value shadow commit-only></sky-range>
|
|
58
|
-
* </template>
|
|
59
|
-
* ```
|
|
60
|
-
* ```jsx
|
|
61
|
-
* export default function Demo() {
|
|
62
|
-
* return <sky-range label="Price Range" prefix="$" min={0} max={1000} step={50} from={200} to={700} show-value shadow commit-only></sky-range>;
|
|
63
|
-
* }
|
|
64
|
-
* ```
|
|
65
|
-
*/
|
|
66
|
-
export declare class SkyRange extends LitElement {
|
|
67
|
-
/** Lower bound of the selection. */
|
|
68
|
-
from: number;
|
|
69
|
-
/** Upper bound of the selection. */
|
|
70
|
-
to: number;
|
|
71
|
-
/** Minimum possible value. */
|
|
72
|
-
min: number;
|
|
73
|
-
/** Maximum possible value. */
|
|
74
|
-
max: number;
|
|
75
|
-
/** Step interval for snapping. */
|
|
76
|
-
step: number;
|
|
77
|
-
/** Optional label text. */
|
|
78
|
-
label: string;
|
|
79
|
-
/** Disables the range when true. */
|
|
80
|
-
disabled: boolean;
|
|
81
|
-
/** Prefix shown before numbers. */
|
|
82
|
-
prefix: string;
|
|
83
|
-
/** Suffix shown after numbers. */
|
|
84
|
-
suffix: string;
|
|
85
|
-
/** Whether to show shadow/glass border on the container. */
|
|
86
|
-
shadow: boolean;
|
|
87
|
-
/** Whether to only emit on commit (not live). */
|
|
88
|
-
commitOnly: boolean;
|
|
89
|
-
/** If true, shows the value label; otherwise hides it. */
|
|
90
|
-
showValue: boolean;
|
|
91
|
-
private _lastCommittedFrom;
|
|
92
|
-
private _lastCommittedTo;
|
|
93
|
-
static styles: import("lit").CSSResult;
|
|
94
|
-
/** Round a value to the nearest `step` (guarding against non-positive step). */
|
|
95
|
-
private roundToStep;
|
|
96
|
-
/** Clamp a value into `[min, max]`. */
|
|
97
|
-
private clamp;
|
|
98
|
-
/** Live update for the `from` thumb. Emits live when `commitOnly = false`. */
|
|
99
|
-
private onFromInput;
|
|
100
|
-
/** Commit change for the `from` thumb. Emits only when `commitOnly = true`. */
|
|
101
|
-
private onFromChange;
|
|
102
|
-
/** Live update for the `to` thumb. Emits live when `commitOnly = false`. */
|
|
103
|
-
private onToInput;
|
|
104
|
-
/** Commit change for the `to` thumb. Emits only when `commitOnly = true`. */
|
|
105
|
-
private onToChange;
|
|
106
|
-
/** Dispatches `range-changed` with the current range values. */
|
|
107
|
-
private dispatchRangeChange;
|
|
108
|
-
setRange(from: number, to: number): void;
|
|
109
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
110
|
-
}
|