@sky.ui/core 0.0.8 → 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/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 +24 -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 +0,0 @@
|
|
|
1
|
-
export * from "./sky-carousel";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-carousel.js';
|
|
@@ -1,265 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
export type SkyCarouselAxis = "horizontal" | "vertical";
|
|
3
|
-
/**
|
|
4
|
-
* @element sky-carousel
|
|
5
|
-
*
|
|
6
|
-
* @summary Carousel component with auto-slide, swipe gestures, navigation controls, and loading state.
|
|
7
|
-
*
|
|
8
|
-
* @status stable
|
|
9
|
-
* @since 1.0.0
|
|
10
|
-
*
|
|
11
|
-
* @documentation https://library.sky-ui.com/components/carousel
|
|
12
|
-
* @dependency sky-icon
|
|
13
|
-
*
|
|
14
|
-
* @uiVModel currentIndex slide-changed detail=index
|
|
15
|
-
*
|
|
16
|
-
* @slot - Default slot for carousel slides.
|
|
17
|
-
*
|
|
18
|
-
* @csspart slider-container - The container element that holds the slides.
|
|
19
|
-
* @csspart nav-button - The navigation buttons (previous/next).
|
|
20
|
-
* @csspart index-display - The index display (e.g., "1 / 5").
|
|
21
|
-
* @csspart bullet-navigation - The container for the bullet navigation.
|
|
22
|
-
* @csspart loading-overlay - The overlay shown while the carousel is loading.
|
|
23
|
-
* @csspart loading-spinner - The spinner displayed in the loading overlay.
|
|
24
|
-
*
|
|
25
|
-
* @property {number} currentIndex - Current active slide index. Default: `0`.
|
|
26
|
-
* @property {number} slideCount - Total number of slides (auto-calculated). Default: `0`.
|
|
27
|
-
* @property {string} maxWidth - Max width of the carousel container. Default: `"600px"`.
|
|
28
|
-
* @property {boolean} showBullets - Whether to show bullet navigation. Default: `true`.
|
|
29
|
-
* @property {boolean} auto - Whether to enable auto-sliding. Default: `true`.
|
|
30
|
-
* @property {boolean} showIndex - Whether to show index display (e.g., "1 / 5"). Default: `false`.
|
|
31
|
-
* @property {boolean} showButton - Whether to show next/previous navigation buttons. Default: `false`.
|
|
32
|
-
* @property {number} autoSlideInterval - Interval in ms for auto-sliding. Default: `3000`.
|
|
33
|
-
* @property {boolean} isLoading - Show loading overlay/spinner. Default: `false`.
|
|
34
|
-
* @property {number} slidesVisible - Number of slides visible at once. Default: `1`.
|
|
35
|
-
* @property {number} slidesToScroll - Number of slides to scroll per navigation. Default: `1`.
|
|
36
|
-
* @property {boolean} partialVisible - Whether non-active slides are partially visible. Default: `false`.
|
|
37
|
-
* @property {string} slideGap - Gap size between slides. Default: `"0"`.
|
|
38
|
-
* @method updateSlideCount Recomputes the number of assigned slide elements.
|
|
39
|
-
* @method startAutoSlide Starts automatic slide progression when eligible.
|
|
40
|
-
* @method stopAutoSlide Stops automatic slide progression.
|
|
41
|
-
* @method nextSlide Moves to the next slide window.
|
|
42
|
-
* @method prevSlide Moves to the previous slide window.
|
|
43
|
-
* @method setSlide Sets the active slide index and restarts auto-slide timer.
|
|
44
|
-
*
|
|
45
|
-
* @fires {CustomEvent<{ index: number }>} slide-changed - Fired when the active slide index changes.
|
|
46
|
-
*
|
|
47
|
-
* @Behavior
|
|
48
|
-
* - Supports pointer drag/swipe to change slides.
|
|
49
|
-
* - Restarts auto-slide timer when index is explicitly changed via `setSlide`.
|
|
50
|
-
* - Hides controls when slide count does not exceed `slidesVisible`.
|
|
51
|
-
*
|
|
52
|
-
* @example
|
|
53
|
-
* ```html
|
|
54
|
-
* <sky-carousel showbutton showbullets autoslideinterval="4000">
|
|
55
|
-
* <div>Overview</div>
|
|
56
|
-
* <div>Performance</div>
|
|
57
|
-
* <div>Forecast</div>
|
|
58
|
-
* </sky-carousel>
|
|
59
|
-
* ```
|
|
60
|
-
* ```vue
|
|
61
|
-
* <template>
|
|
62
|
-
* <sky-carousel showbutton showbullets autoslideinterval="4000">
|
|
63
|
-
* <div>Overview</div>
|
|
64
|
-
* <div>Performance</div>
|
|
65
|
-
* <div>Forecast</div>
|
|
66
|
-
* </sky-carousel>
|
|
67
|
-
* </template>
|
|
68
|
-
* ```
|
|
69
|
-
* ```jsx
|
|
70
|
-
* export default function Demo() {
|
|
71
|
-
* return (
|
|
72
|
-
* <sky-carousel showbutton showbullets autoslideinterval="4000">
|
|
73
|
-
* <div>Overview</div>
|
|
74
|
-
* <div>Performance</div>
|
|
75
|
-
* <div>Forecast</div>
|
|
76
|
-
* </sky-carousel>
|
|
77
|
-
* );
|
|
78
|
-
* }
|
|
79
|
-
* ```
|
|
80
|
-
*/
|
|
81
|
-
export declare class SkyCarousel extends LitElement {
|
|
82
|
-
static dependencies: Record<string, CustomElementConstructor>;
|
|
83
|
-
/** Current active slide index. @default 0 */
|
|
84
|
-
currentIndex: number;
|
|
85
|
-
/** Total number of slides (auto-calculated). @default 0 */
|
|
86
|
-
slideCount: number;
|
|
87
|
-
/** Max width of the carousel container. @default "600px" */
|
|
88
|
-
maxWidth: string;
|
|
89
|
-
/** Whether to show bullet navigation. @default true */
|
|
90
|
-
showBullets: boolean;
|
|
91
|
-
/** Whether to enable auto-sliding. @default true */
|
|
92
|
-
auto: boolean;
|
|
93
|
-
/** Whether to show index display (e.g., "1 / 5"). @default false */
|
|
94
|
-
showIndex: boolean;
|
|
95
|
-
/** Whether to show next/previous navigation buttons. @default false */
|
|
96
|
-
showButton: boolean;
|
|
97
|
-
/** Interval in ms for auto-sliding. @default 3000 */
|
|
98
|
-
autoSlideInterval: number;
|
|
99
|
-
/** Show loading overlay/spinner. @default false */
|
|
100
|
-
isLoading: boolean;
|
|
101
|
-
/** Number of slides visible at once. @default 1 */
|
|
102
|
-
slidesVisible: number;
|
|
103
|
-
/** Number of slides to scroll per navigation. @default 1 */
|
|
104
|
-
slidesToScroll: number;
|
|
105
|
-
/** Whether non-active slides are partially visible. @default false */
|
|
106
|
-
partialVisible: boolean;
|
|
107
|
-
/** Gap size between slides. @default "0" */
|
|
108
|
-
slideGap: string;
|
|
109
|
-
private isDragging;
|
|
110
|
-
private startX;
|
|
111
|
-
private currentX;
|
|
112
|
-
private autoSlideTimer;
|
|
113
|
-
static styles: import("lit").CSSResult;
|
|
114
|
-
/**
|
|
115
|
-
* Lifecycle callback that is invoked when the custom element is added to the DOM.
|
|
116
|
-
*
|
|
117
|
-
* This method performs the following actions:
|
|
118
|
-
* - Calls the parent class's `connectedCallback` method.
|
|
119
|
-
* - Updates the slide count for the carousel.
|
|
120
|
-
* - Sets the maximum width of the carousel if `maxWidth` is defined.
|
|
121
|
-
* - Starts the automatic slide transition.
|
|
122
|
-
* - Registers pointer event listeners for drag/swipe interactions.
|
|
123
|
-
*/
|
|
124
|
-
connectedCallback(): void;
|
|
125
|
-
/**
|
|
126
|
-
* Called when the custom element is disconnected from the document's DOM.
|
|
127
|
-
*
|
|
128
|
-
* This method performs cleanup by stopping the auto-slide functionality and
|
|
129
|
-
* removing all pointer event listeners that were previously attached.
|
|
130
|
-
* It also calls the superclass's `disconnectedCallback` to ensure proper teardown.
|
|
131
|
-
*
|
|
132
|
-
* @override
|
|
133
|
-
*/
|
|
134
|
-
disconnectedCallback(): void;
|
|
135
|
-
/**
|
|
136
|
-
* Lifecycle method called before the component updates.
|
|
137
|
-
*
|
|
138
|
-
* @param changedProps - A map containing the properties that have changed and their previous values.
|
|
139
|
-
* @override
|
|
140
|
-
*
|
|
141
|
-
* Calls the superclass's `willUpdate` method, then checks if the `autoSlideInterval` property has changed.
|
|
142
|
-
* If so, it starts the auto-slide functionality by calling `startAutoSlide()`.
|
|
143
|
-
*/
|
|
144
|
-
willUpdate(changedProps: Map<string | number | symbol, unknown>): void;
|
|
145
|
-
/**
|
|
146
|
-
* Handles the pointer down event to initiate dragging.
|
|
147
|
-
*
|
|
148
|
-
* Sets the `isDragging` flag to `true` and records the starting X position
|
|
149
|
-
* of the pointer. Also initializes the current X position for tracking movement.
|
|
150
|
-
*
|
|
151
|
-
* @param e - The pointer event containing the X coordinate of the pointer.
|
|
152
|
-
*/
|
|
153
|
-
private onPointerDown;
|
|
154
|
-
/**
|
|
155
|
-
* Handles the pointer move event during a drag operation.
|
|
156
|
-
*
|
|
157
|
-
* Updates the `currentX` property with the current horizontal position of the pointer
|
|
158
|
-
* if a drag is in progress (`isDragging` is true). If not dragging, the function returns early.
|
|
159
|
-
*
|
|
160
|
-
* @param e - The pointer event containing the current pointer position.
|
|
161
|
-
*/
|
|
162
|
-
private onPointerMove;
|
|
163
|
-
/**
|
|
164
|
-
* Handles the pointer up event for the carousel.
|
|
165
|
-
*
|
|
166
|
-
* Determines if a swipe gesture has occurred based on the horizontal movement
|
|
167
|
-
* between the pointer down and pointer up events. If the swipe distance exceeds
|
|
168
|
-
* a defined threshold, it triggers navigation to the previous or next slide.
|
|
169
|
-
* Resets dragging state and pointer positions after handling the event.
|
|
170
|
-
*
|
|
171
|
-
* @remarks
|
|
172
|
-
* - Swiping right (delta > threshold) navigates to the previous slide.
|
|
173
|
-
* - Swiping left (delta < -threshold) navigates to the next slide.
|
|
174
|
-
* - No action is taken if the swipe distance does not exceed the threshold.
|
|
175
|
-
*/
|
|
176
|
-
private onPointerUp;
|
|
177
|
-
/**
|
|
178
|
-
* Updates the `slideCount` property based on the number of elements assigned to the default slot.
|
|
179
|
-
*
|
|
180
|
-
* This method queries the shadow DOM for a <slot> element, retrieves its assigned elements,
|
|
181
|
-
* and sets the `slideCount` to the number of these elements. If the slot is not found,
|
|
182
|
-
* `slideCount` remains unchanged.
|
|
183
|
-
*/
|
|
184
|
-
/**
|
|
185
|
-
* Recomputes slide count from assigned default-slot elements.
|
|
186
|
-
*
|
|
187
|
-
* @returns {void}
|
|
188
|
-
*/
|
|
189
|
-
updateSlideCount(): void;
|
|
190
|
-
/**
|
|
191
|
-
* Starts the automatic slide transition for the carousel.
|
|
192
|
-
*
|
|
193
|
-
* This method first stops any existing auto-slide timer, then checks if
|
|
194
|
-
* auto-sliding is enabled (`this.auto`), the interval is greater than zero,
|
|
195
|
-
* and there are more slides than are currently visible. If all conditions
|
|
196
|
-
* are met, it sets up a timer to automatically advance to the next slide
|
|
197
|
-
* at the specified interval (`this.autoSlideInterval`).
|
|
198
|
-
*
|
|
199
|
-
* @remarks
|
|
200
|
-
* - If auto-sliding is already running, it will be restarted.
|
|
201
|
-
* - The auto-slide will only start if there are enough slides to scroll.
|
|
202
|
-
*/
|
|
203
|
-
/**
|
|
204
|
-
* Starts automatic slide progression when eligible.
|
|
205
|
-
*
|
|
206
|
-
* @returns {void}
|
|
207
|
-
*/
|
|
208
|
-
startAutoSlide(): void;
|
|
209
|
-
/**
|
|
210
|
-
* Stops the automatic slide transition by clearing the interval timer.
|
|
211
|
-
* If the auto-slide timer is active, this method will clear it and reset the timer variable to null.
|
|
212
|
-
*/
|
|
213
|
-
/**
|
|
214
|
-
* Stops automatic slide progression.
|
|
215
|
-
*
|
|
216
|
-
* @returns {void}
|
|
217
|
-
*/
|
|
218
|
-
stopAutoSlide(): void;
|
|
219
|
-
/**
|
|
220
|
-
* Advances the carousel to the next set of slides.
|
|
221
|
-
*
|
|
222
|
-
* Calculates the next index based on the current index and the number of slides to scroll.
|
|
223
|
-
* If the next index exceeds the maximum possible starting index for visible slides,
|
|
224
|
-
* the carousel wraps around to the beginning (index 0).
|
|
225
|
-
* Otherwise, it moves to the next calculated index, ensuring it does not exceed the bounds.
|
|
226
|
-
*
|
|
227
|
-
* @returns {void}
|
|
228
|
-
*/
|
|
229
|
-
/**
|
|
230
|
-
* Moves to the next slide window.
|
|
231
|
-
*
|
|
232
|
-
* @returns {void}
|
|
233
|
-
*/
|
|
234
|
-
nextSlide: () => void;
|
|
235
|
-
/**
|
|
236
|
-
* Moves the carousel to the previous set of slides.
|
|
237
|
-
*
|
|
238
|
-
* Decrements the `currentIndex` by the number of slides to scroll.
|
|
239
|
-
* If the new index is less than zero, wraps around to the last visible set of slides.
|
|
240
|
-
* Otherwise, ensures the index does not go below zero.
|
|
241
|
-
*
|
|
242
|
-
* @returns void
|
|
243
|
-
*/
|
|
244
|
-
/**
|
|
245
|
-
* Moves to the previous slide window.
|
|
246
|
-
*
|
|
247
|
-
* @returns {void}
|
|
248
|
-
*/
|
|
249
|
-
prevSlide: () => void;
|
|
250
|
-
/**
|
|
251
|
-
* Sets the current slide index, ensuring it does not exceed the maximum allowed index
|
|
252
|
-
* based on the total slide count and the number of visible slides.
|
|
253
|
-
* Also restarts the auto-slide timer by stopping and starting it.
|
|
254
|
-
*
|
|
255
|
-
* @param index - The target slide index to display.
|
|
256
|
-
*/
|
|
257
|
-
/**
|
|
258
|
-
* Sets the active slide index and restarts auto-slide timing.
|
|
259
|
-
*
|
|
260
|
-
* @param index Target slide index.
|
|
261
|
-
* @returns {void}
|
|
262
|
-
*/
|
|
263
|
-
setSlide(index: number): void;
|
|
264
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
265
|
-
}
|
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as s,html as r}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{styleMap as a}from"lit/directives/style-map.js";import{when as l}from"lit/directives/when.js";import{repeat as d}from"lit/directives/repeat.js";import{classMap as p}from"lit/directives/class-map.js";import{SkyIcon as h}from"../sky-icon/sky-icon.js";let c=class extends e{constructor(){super(...arguments),this.currentIndex=0,this.slideCount=0,this.maxWidth="600px",this.showBullets=!0,this.auto=!0,this.showIndex=!1,this.showButton=!1,this.autoSlideInterval=3e3,this.isLoading=!1,this.slidesVisible=1,this.slidesToScroll=1,this.partialVisible=!1,this.slideGap="0",this.isDragging=!1,this.startX=0,this.currentX=0,this.autoSlideTimer=null,this.onPointerDown=t=>{this.isDragging=!0,this.startX=t.clientX,this.currentX=t.clientX},this.onPointerMove=t=>{this.isDragging&&(this.currentX=t.clientX)},this.onPointerUp=()=>{if(!this.isDragging)return;const t=this.currentX-this.startX;t>50?this.prevSlide():t<-50&&this.nextSlide(),this.isDragging=!1,this.startX=0,this.currentX=0},this.nextSlide=()=>{const t=this.currentIndex+this.slidesToScroll,i=t>=this.slideCount-this.slidesVisible+1?0:Math.min(t,this.slideCount-this.slidesVisible);this.currentIndex=i,this.dispatchEvent(new CustomEvent("slide-changed",{detail:{index:this.currentIndex},bubbles:!0,composed:!0}))},this.prevSlide=()=>{const t=this.currentIndex-this.slidesToScroll;this.currentIndex=t<0?this.slideCount-this.slidesVisible:Math.max(t,0),this.dispatchEvent(new CustomEvent("slide-changed",{detail:{index:this.currentIndex},bubbles:!0,composed:!0}))}}static{this.dependencies={"sky-icon":h}}static{this.styles=s`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
position: relative;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.slider-container {
|
|
9
|
-
display: flex;
|
|
10
|
-
transition: transform 0.5s ease-in-out;
|
|
11
|
-
width: 100%;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
::slotted(*) {
|
|
15
|
-
flex: 0 0 calc(100% / var(--slides-visible));
|
|
16
|
-
padding: 0 calc(var(--slide-gap) / 2);
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
opacity: 1;
|
|
19
|
-
transition: opacity 0.3s ease;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([partial-visible]) ::slotted(*) {
|
|
23
|
-
opacity: 0.6;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([partial-visible]) ::slotted(.active) {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.slider-wrapper {
|
|
31
|
-
position: relative;
|
|
32
|
-
width: 100%;
|
|
33
|
-
overflow: hidden;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.nav-button {
|
|
37
|
-
position: absolute;
|
|
38
|
-
top: 50%;
|
|
39
|
-
transform: translateY(-50%);
|
|
40
|
-
background: var(--sky-glass-primary);
|
|
41
|
-
color: var(--sky-active-primary);
|
|
42
|
-
border-radius: var(--sky-radius-full);
|
|
43
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
44
|
-
border: var(--sky-border-primary);
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
justify-content: center;
|
|
48
|
-
padding: 10px;
|
|
49
|
-
cursor: pointer;
|
|
50
|
-
z-index: 1;
|
|
51
|
-
overflow: hidden;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.nav-button::before {
|
|
55
|
-
content: "";
|
|
56
|
-
position: absolute;
|
|
57
|
-
inset: 0;
|
|
58
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
59
|
-
var(--sky-saturation-primary);
|
|
60
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
61
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
62
|
-
border-radius: inherit;
|
|
63
|
-
z-index: -1;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.prev {
|
|
67
|
-
left: 10px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.next {
|
|
71
|
-
right: 10px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.index-display {
|
|
75
|
-
position: absolute;
|
|
76
|
-
bottom: 10px;
|
|
77
|
-
left: 50%;
|
|
78
|
-
transform: translateX(-50%);
|
|
79
|
-
font-size: 10px;
|
|
80
|
-
color: var(--sky-active-primary);
|
|
81
|
-
background: var(--sky-glass-primary);
|
|
82
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
83
|
-
var(--sky-saturation-primary);
|
|
84
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
85
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
86
|
-
padding: 4px 8px;
|
|
87
|
-
border: var(--sky-border-primary);
|
|
88
|
-
border-radius: var(--sky-radius-tertiary);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.bullet-navigation {
|
|
92
|
-
position: absolute;
|
|
93
|
-
bottom: 20px;
|
|
94
|
-
left: 50%;
|
|
95
|
-
transform: translateX(-50%);
|
|
96
|
-
display: flex;
|
|
97
|
-
gap: 10px;
|
|
98
|
-
padding: 5px 10px;
|
|
99
|
-
border: var(--sky-border-primary);
|
|
100
|
-
border-radius: var(--sky-radius-full);
|
|
101
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
102
|
-
border: var(--sky-border-primary);
|
|
103
|
-
background: var(--sky-glass-primary);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.bullet-navigation::before {
|
|
107
|
-
content: "";
|
|
108
|
-
position: absolute;
|
|
109
|
-
inset: 0;
|
|
110
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
111
|
-
var(--sky-saturation-primary);
|
|
112
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
113
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
114
|
-
border-radius: inherit;
|
|
115
|
-
z-index: -1;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.bullet {
|
|
119
|
-
width: 8px;
|
|
120
|
-
height: 8px;
|
|
121
|
-
border-radius: 50%;
|
|
122
|
-
background: var(--sky-text-secondary);
|
|
123
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
124
|
-
border: var(--sky-border-primary);
|
|
125
|
-
cursor: pointer;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.bullet.active {
|
|
129
|
-
background-color: var(--sky-active-primary);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.loading-overlay {
|
|
133
|
-
position: absolute;
|
|
134
|
-
inset: 0;
|
|
135
|
-
display: flex;
|
|
136
|
-
align-items: center;
|
|
137
|
-
justify-content: center;
|
|
138
|
-
background: var(--sky-overlay-primary);
|
|
139
|
-
border-radius: inherit;
|
|
140
|
-
z-index: 2;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.loading-spinner {
|
|
144
|
-
width: 40px;
|
|
145
|
-
height: 40px;
|
|
146
|
-
border: 2px solid var(--sky-text-white);
|
|
147
|
-
border-top-color: var(--sky-active-primary);
|
|
148
|
-
border-radius: 50%;
|
|
149
|
-
animation: spin 0.8s linear infinite;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@keyframes spin {
|
|
153
|
-
from {
|
|
154
|
-
transform: rotate(0deg);
|
|
155
|
-
}
|
|
156
|
-
to {
|
|
157
|
-
transform: rotate(360deg);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.no-select {
|
|
162
|
-
user-select: none !important;
|
|
163
|
-
pointer-events: none !important;
|
|
164
|
-
}
|
|
165
|
-
`}connectedCallback(){super.connectedCallback(),this.updateSlideCount(),this.maxWidth&&(this.style.maxWidth=this.maxWidth),this.startAutoSlide(),this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointerleave",this.onPointerUp)}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoSlide(),this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointermove",this.onPointerMove),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointerleave",this.onPointerUp)}willUpdate(t){super.willUpdate(t),t.has("autoSlideInterval")&&this.startAutoSlide()}updateSlideCount(){const t=this.shadowRoot?.querySelector("slot");t&&(this.slideCount=t.assignedElements().length)}startAutoSlide(){this.stopAutoSlide(),this.auto&&this.autoSlideInterval>0&&this.slideCount>this.slidesVisible&&(this.autoSlideTimer=setInterval(()=>this.nextSlide(),this.autoSlideInterval))}stopAutoSlide(){this.autoSlideTimer&&(clearInterval(this.autoSlideTimer),this.autoSlideTimer=null)}setSlide(t){this.currentIndex=Math.min(t,this.slideCount-this.slidesVisible),this.stopAutoSlide(),this.startAutoSlide(),this.dispatchEvent(new CustomEvent("slide-changed",{detail:{index:this.currentIndex},bubbles:!0,composed:!0}))}render(){const t=this.closest('[dir="rtl"]')||"rtl"===document.dir?this.currentIndex*(100/this.slidesVisible)+"%":`-${this.currentIndex*(100/this.slidesVisible)}%`,i=Math.ceil((this.slideCount-this.slidesVisible+1)/this.slidesToScroll),e={transform:`translateX(${t})`,...this.partialVisible&&{margin:`0 calc(${this.slideGap} / -2)`,width:`calc(100% + ${this.slideGap})`},"--slides-visible":`${this.slidesVisible}`,"--slide-gap":this.slideGap},s=Array.from({length:i},(t,i)=>i);return r`
|
|
166
|
-
${l(this.isLoading,()=>r`<div class="loading-overlay" part="loading-overlay">
|
|
167
|
-
<div class="loading-spinner" part="loading-spinner"></div>
|
|
168
|
-
</div>`)}
|
|
169
|
-
<div class="slider-wrapper" part="slider-wrapper">
|
|
170
|
-
<div
|
|
171
|
-
class="slider-container"
|
|
172
|
-
part="slider-container"
|
|
173
|
-
style=${a(e)}
|
|
174
|
-
@slotchange=${this.updateSlideCount}
|
|
175
|
-
>
|
|
176
|
-
<slot></slot>
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
|
-
${l(this.showButton&&this.slideCount>this.slidesVisible,()=>r`
|
|
180
|
-
<button
|
|
181
|
-
class="nav-button prev"
|
|
182
|
-
part="nav-button nav-button-prev"
|
|
183
|
-
@click=${this.prevSlide}
|
|
184
|
-
>
|
|
185
|
-
<sky-icon icon="ion:chevron-back"></sky-icon>
|
|
186
|
-
</button>
|
|
187
|
-
<button
|
|
188
|
-
class="nav-button next"
|
|
189
|
-
part="nav-button nav-button-next"
|
|
190
|
-
@click=${this.nextSlide}
|
|
191
|
-
>
|
|
192
|
-
<sky-icon icon="ion:chevron-forward"></sky-icon>
|
|
193
|
-
</button>
|
|
194
|
-
`)}
|
|
195
|
-
${l(this.showIndex,()=>r`<div class="index-display" part="index-display">
|
|
196
|
-
${this.slidesVisible>1?`${this.currentIndex+1}-${Math.min(this.currentIndex+this.slidesVisible,this.slideCount)} / ${this.slideCount}`:`${this.currentIndex+1} / ${this.slideCount}`}
|
|
197
|
-
</div>`)}
|
|
198
|
-
${l(this.showBullets&&this.slideCount>this.slidesVisible,()=>r`
|
|
199
|
-
<div class="bullet-navigation" part="bullet-navigation">
|
|
200
|
-
${d(s,t=>String(t),t=>{const i=this.currentIndex===t*this.slidesToScroll;return r`
|
|
201
|
-
<div
|
|
202
|
-
class=${p({bullet:!0,active:i})}
|
|
203
|
-
part=${i?"bullet bullet-active":"bullet"}
|
|
204
|
-
@click=${()=>this.setSlide(t*this.slidesToScroll)}
|
|
205
|
-
></div>
|
|
206
|
-
`})}
|
|
207
|
-
</div>
|
|
208
|
-
`)}
|
|
209
|
-
</div>
|
|
210
|
-
`}};t([o({type:Number,reflect:!0}),i("design:type",Object)],c.prototype,"currentIndex",void 0),t([o({type:Number,reflect:!0}),i("design:type",Object)],c.prototype,"slideCount",void 0),t([o({type:String}),i("design:type",Object)],c.prototype,"maxWidth",void 0),t([o({type:Boolean,reflect:!0}),i("design:type",Object)],c.prototype,"showBullets",void 0),t([o({type:Boolean,reflect:!0}),i("design:type",Object)],c.prototype,"auto",void 0),t([o({type:Boolean,reflect:!0}),i("design:type",Object)],c.prototype,"showIndex",void 0),t([o({type:Boolean,reflect:!0}),i("design:type",Object)],c.prototype,"showButton",void 0),t([o({type:Number}),i("design:type",Object)],c.prototype,"autoSlideInterval",void 0),t([o({type:Boolean,reflect:!0}),i("design:type",Object)],c.prototype,"isLoading",void 0),t([o({type:Number}),i("design:type",Object)],c.prototype,"slidesVisible",void 0),t([o({type:Number}),i("design:type",Object)],c.prototype,"slidesToScroll",void 0),t([o({type:Boolean}),i("design:type",Object)],c.prototype,"partialVisible",void 0),t([o({type:String}),i("design:type",Object)],c.prototype,"slideGap",void 0),c=t([n("sky-carousel")],c);export{c as SkyCarousel};
|
|
211
|
-
//# sourceMappingURL=sky-carousel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-carousel.js","sources":["../../src/sky-carousel/sky-carousel.ts"],"sourcesContent":[null],"names":["SkyCarousel","LitElement","constructor","this","currentIndex","slideCount","maxWidth","showBullets","auto","showIndex","showButton","autoSlideInterval","isLoading","slidesVisible","slidesToScroll","partialVisible","slideGap","isDragging","startX","currentX","autoSlideTimer","onPointerDown","e","clientX","onPointerMove","onPointerUp","delta","prevSlide","nextSlide","next","nextIndex","Math","min","dispatchEvent","CustomEvent","detail","index","bubbles","composed","prev","max","dependencies","SkyIcon","styles","css","connectedCallback","super","updateSlideCount","style","startAutoSlide","addEventListener","disconnectedCallback","stopAutoSlide","removeEventListener","willUpdate","changedProps","has","slot","shadowRoot","querySelector","assignedElements","length","setInterval","clearInterval","setSlide","render","translateX","closest","document","dir","bulletCount","ceil","containerStyle","transform","margin","width","bulletIndices","Array","from","_","i","html","when","styleMap","repeat","String","active","classMap","bullet","__decorate","property","type","Number","reflect","prototype","Boolean","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-counter";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-counter.js';
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import { PropertyValues } from "lit";
|
|
2
|
-
import { FormControlBase, FormState } from "../helper/internals/form-control-base";
|
|
3
|
-
export type SkyCounterValueChangedDetail = {
|
|
4
|
-
value: number;
|
|
5
|
-
};
|
|
6
|
-
export type SkyCounterValueClearedDetail = {
|
|
7
|
-
value: number;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* @element sky-counter
|
|
11
|
-
*
|
|
12
|
-
* @summary Numeric counter with increment/decrement controls, optional typing, and form-associated validation.
|
|
13
|
-
*
|
|
14
|
-
* @status stable
|
|
15
|
-
* @since 1.0.0
|
|
16
|
-
*
|
|
17
|
-
* @documentation https://library.sky-ui.com/components/counter
|
|
18
|
-
* @dependency sky-icon
|
|
19
|
-
*
|
|
20
|
-
* @uiVModel value value-changed
|
|
21
|
-
*
|
|
22
|
-
* @slot - Default slot is not used; component renders its own internal structure.
|
|
23
|
-
*
|
|
24
|
-
* @csspart container - The main container element wrapping the entire component
|
|
25
|
-
* @csspart button - Both decrease and increase buttons
|
|
26
|
-
* @csspart button--decrease - The decrease button specifically
|
|
27
|
-
* @csspart button--increase - The increase button specifically
|
|
28
|
-
* @csspart icon - Both decrease and increase icons
|
|
29
|
-
* @csspart icon--decrease - The decrease icon specifically
|
|
30
|
-
* @csspart icon--increase - The increase icon specifically
|
|
31
|
-
* @csspart input - The numeric input field
|
|
32
|
-
*
|
|
33
|
-
* @fires {CustomEvent<SkyCounterValueChangedDetail>} value-changed - Fired whenever the value changes.
|
|
34
|
-
* @fires {CustomEvent<SkyCounterValueClearedDetail>} value-cleared - Fired when `reset()` clears to default.
|
|
35
|
-
* @fires {Event} input - Native-like input event re-emitted from the host.
|
|
36
|
-
* @fires {Event} change - Native-like change event re-emitted from the host.
|
|
37
|
-
*
|
|
38
|
-
* @property {number} value - Current numeric value. May be `NaN` when cleared by typing.
|
|
39
|
-
* @property {number} min - Minimum allowed value.
|
|
40
|
-
* @property {number} max - Optional maximum allowed value.
|
|
41
|
-
* @property {number} step - Increment/decrement step size.
|
|
42
|
-
* @property {boolean} allowTyping - Enables direct typing in the number input.
|
|
43
|
-
* @property {string} iconDecrease - Icon used for the decrease control.
|
|
44
|
-
* @property {string} iconIncrease - Icon used for the increase control.
|
|
45
|
-
* @property {boolean} showErrors - Enables validation error visibility state.
|
|
46
|
-
* @property {number} defaultNumber - Default numeric value used by reset operations.
|
|
47
|
-
* @property {boolean} invalid - Reflects invalid validation state.
|
|
48
|
-
*
|
|
49
|
-
* @method increment Increases value by current `step`.
|
|
50
|
-
* @method decrement Decreases value by current `step`.
|
|
51
|
-
* @method setCounterValue Sets value programmatically after clamping.
|
|
52
|
-
* @method reset Resets value and validation state to defaults.
|
|
53
|
-
*
|
|
54
|
-
* @Behavior
|
|
55
|
-
* - Clamps values to configured min/max and keeps form value synced.
|
|
56
|
-
* - Supports press-and-hold interactions for continuous increment/decrement.
|
|
57
|
-
* - Re-emits `input` and `change` host events for typing-based integrations.
|
|
58
|
-
*
|
|
59
|
-
* @example
|
|
60
|
-
* ```html
|
|
61
|
-
* <sky-counter min="0" max="10" step="2" value="4" allowtyping></sky-counter>
|
|
62
|
-
* ```
|
|
63
|
-
* ```vue
|
|
64
|
-
* <template>
|
|
65
|
-
* <sky-counter min="0" max="10" step="2" value="4" allowtyping></sky-counter>
|
|
66
|
-
* </template>
|
|
67
|
-
* ```
|
|
68
|
-
* ```jsx
|
|
69
|
-
* export default function Demo() {
|
|
70
|
-
* return <sky-counter min="0" max="10" step="2" value="4" allowtyping></sky-counter>;
|
|
71
|
-
* }
|
|
72
|
-
* ```
|
|
73
|
-
*/
|
|
74
|
-
export declare class SkyCounter extends FormControlBase {
|
|
75
|
-
static dependencies: Record<string, CustomElementConstructor>;
|
|
76
|
-
value: number;
|
|
77
|
-
min: number;
|
|
78
|
-
max?: number;
|
|
79
|
-
step: number;
|
|
80
|
-
allowTyping: boolean;
|
|
81
|
-
iconDecrease: string;
|
|
82
|
-
iconIncrease: string;
|
|
83
|
-
showErrors: boolean;
|
|
84
|
-
defaultNumber: number;
|
|
85
|
-
invalid: boolean;
|
|
86
|
-
validationErrors: string[];
|
|
87
|
-
validationActive: boolean;
|
|
88
|
-
private holdInterval;
|
|
89
|
-
private holdDelay;
|
|
90
|
-
static styles: import("lit").CSSResult;
|
|
91
|
-
protected getFormValue(): FormState;
|
|
92
|
-
protected setValueFromFormState(state: FormState): void;
|
|
93
|
-
protected getValidityAnchor(): HTMLElement | undefined;
|
|
94
|
-
protected isEmpty(): boolean;
|
|
95
|
-
protected getNativeControl(): HTMLElement | null;
|
|
96
|
-
protected validateForForm(): string;
|
|
97
|
-
protected onFormReset(): void;
|
|
98
|
-
private clamp;
|
|
99
|
-
firstUpdated(): void;
|
|
100
|
-
willUpdate(changed: PropertyValues): void;
|
|
101
|
-
private startHold;
|
|
102
|
-
private stopHold;
|
|
103
|
-
private emitChanged;
|
|
104
|
-
private increase;
|
|
105
|
-
private decrease;
|
|
106
|
-
/**
|
|
107
|
-
* Increments the value by the configured step.
|
|
108
|
-
*
|
|
109
|
-
* @returns {void}
|
|
110
|
-
*/
|
|
111
|
-
increment(): void;
|
|
112
|
-
/**
|
|
113
|
-
* Decrements the value by the configured step.
|
|
114
|
-
*
|
|
115
|
-
* @returns {void}
|
|
116
|
-
*/
|
|
117
|
-
decrement(): void;
|
|
118
|
-
/**
|
|
119
|
-
* Sets the counter value and applies clamping and validity sync.
|
|
120
|
-
*
|
|
121
|
-
* @param {number} nextValue - Desired numeric value.
|
|
122
|
-
* @returns {void}
|
|
123
|
-
*/
|
|
124
|
-
setCounterValue(nextValue: number): void;
|
|
125
|
-
private onInputChange;
|
|
126
|
-
/** public reset like before (non-form reset usage) */
|
|
127
|
-
reset(): void;
|
|
128
|
-
focus(options?: FocusOptions): void;
|
|
129
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
130
|
-
}
|