atomicuilibrary 0.1.0 → 0.1.3
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/dist/cjs/category-section.cjs.entry.js +2 -2
- package/dist/cjs/dom-BvBb0kmW.js +267 -0
- package/dist/cjs/exploration-project-tailwind.cjs.js +2 -2
- package/dist/cjs/{index-ClkOYpT8.js → index-C32cWsm5.js} +1 -1
- package/dist/cjs/layout-manager.cjs.entry.js +3 -3
- package/dist/cjs/library-card.cjs.entry.js +2 -2
- package/dist/cjs/lm-container_2.cjs.entry.js +2 -2
- package/dist/cjs/lm-panel_3.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/my-component.cjs.entry.js +1 -1
- package/dist/cjs/my-step.cjs.entry.js +2 -2
- package/dist/cjs/nav-bar.cjs.entry.js +4 -4
- package/dist/cjs/smart-step.cjs.entry.js +3 -3
- package/dist/cjs/timeline-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-accordion_11.cjs.entry.js +132 -50
- package/dist/cjs/ui-advanced-data-table.cjs.entry.js +2 -2
- package/dist/cjs/ui-anchor.cjs.entry.js +2 -2
- package/dist/cjs/ui-animate-on-scroll.cjs.entry.js +3 -3
- package/dist/cjs/ui-aside-panel.cjs.entry.js +10 -11
- package/dist/cjs/ui-avatar-group_5.cjs.entry.js +1694 -0
- package/dist/cjs/ui-breadcrumb-item.cjs.entry.js +3 -3
- package/dist/cjs/ui-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ui-callout-banner.cjs.entry.js +2 -2
- package/dist/cjs/ui-card.cjs.entry.js +4 -3
- package/dist/cjs/ui-carousel.cjs.entry.js +1 -1
- package/dist/cjs/ui-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/ui-code-editor.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-preview.cjs.entry.js +2 -2
- package/dist/cjs/ui-color-picker.cjs.entry.js +256 -22
- package/dist/cjs/ui-command-palette.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-box.cjs.entry.js +85 -11
- package/dist/cjs/ui-dialog-content.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-footer_2.cjs.entry.js +1 -1
- package/dist/cjs/ui-divider.cjs.entry.js +1 -1
- package/dist/cjs/ui-dock-host.cjs.entry.js +4 -4
- package/dist/cjs/ui-dock.cjs.entry.js +2 -2
- package/dist/cjs/ui-drag-drop.cjs.entry.js +2 -2
- package/dist/cjs/ui-dropdown_2.cjs.entry.js +104 -34
- package/dist/cjs/ui-empty-state.cjs.entry.js +2 -2
- package/dist/cjs/ui-fab-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-fab.cjs.entry.js +4 -4
- package/dist/cjs/ui-file-upload.cjs.entry.js +143 -44
- package/dist/cjs/ui-horizontal-nav.cjs.entry.js +2 -2
- package/dist/cjs/ui-knob.cjs.entry.js +1 -1
- package/dist/cjs/ui-label.cjs.entry.js +473 -0
- package/dist/cjs/ui-library.cjs.entry.js +2 -2
- package/dist/cjs/ui-list-group_2.cjs.entry.js +349 -60
- package/dist/cjs/ui-list.cjs.entry.js +76 -42
- package/dist/cjs/ui-masonry.cjs.entry.js +1 -1
- package/dist/cjs/ui-meter-group.cjs.entry.js +5 -4
- package/dist/cjs/ui-navigation-item.cjs.entry.js +5 -5
- package/dist/cjs/ui-number-input.cjs.entry.js +7 -3
- package/dist/cjs/ui-otp-input.cjs.entry.js +5 -5
- package/dist/cjs/{ui-pagination_4.cjs.entry.js → ui-pagination_3.cjs.entry.js} +35 -506
- package/dist/cjs/ui-panel.cjs.entry.js +1 -1
- package/dist/cjs/ui-pattern-input.cjs.entry.js +46 -11
- package/dist/cjs/ui-progress.cjs.entry.js +66 -9
- package/dist/cjs/ui-range-slider.cjs.entry.js +2 -2
- package/dist/cjs/ui-resizable-panel.cjs.entry.js +2 -2
- package/dist/cjs/ui-scroll-top.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-context-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ui-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-speed-dial.cjs.entry.js +1 -1
- package/dist/cjs/ui-speedometer.cjs.entry.js +28 -17
- package/dist/cjs/ui-splitter.cjs.entry.js +1 -1
- package/dist/cjs/ui-step.cjs.entry.js +2 -2
- package/dist/cjs/ui-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +14 -13
- package/dist/cjs/ui-tabs.cjs.entry.js +2 -2
- package/dist/cjs/ui-tag.cjs.entry.js +58 -13
- package/dist/cjs/ui-timeline.cjs.entry.js +10 -2
- package/dist/cjs/ui-timer.cjs.entry.js +2 -2
- package/dist/cjs/ui-toolbar.cjs.entry.js +2 -2
- package/dist/cjs/ui-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
- package/dist/cjs/ui-transfer-list.cjs.entry.js +6 -6
- package/dist/cjs/ui-tree.cjs.entry.js +30 -15
- package/dist/cjs/ui-workspace-manager.cjs.entry.js +2 -2
- package/dist/collection/assets/js/component-config.js +1 -0
- package/dist/collection/assets/js/demo-loader.js +2 -0
- package/dist/collection/assets/js/demos/about-demo.js +13 -13
- package/dist/collection/assets/js/demos/accordion-demo.js +66 -66
- package/dist/collection/assets/js/demos/advanced-data-table-demo.js +102 -102
- package/dist/collection/assets/js/demos/anchor-demo.js +27 -28
- package/dist/collection/assets/js/demos/animate-on-scroll-demo.js +12 -12
- package/dist/collection/assets/js/demos/aside-panel-demo.js +51 -51
- package/dist/collection/assets/js/demos/avatar-demo.js +433 -95
- package/dist/collection/assets/js/demos/badge-demo.js +51 -52
- package/dist/collection/assets/js/demos/breadcrumb-demo.js +7 -7
- package/dist/collection/assets/js/demos/button-demo.js +117 -107
- package/dist/collection/assets/js/demos/button-toggle-demo.js +199 -96
- package/dist/collection/assets/js/demos/callout-banner-demo.js +23 -23
- package/dist/collection/assets/js/demos/card-demo.js +23 -22
- package/dist/collection/assets/js/demos/carousel-demo.js +632 -360
- package/dist/collection/assets/js/demos/checkbox-demo.js +124 -7
- package/dist/collection/assets/js/demos/color-picker-demo.js +394 -100
- package/dist/collection/assets/js/demos/command-palette-demo.js +182 -65
- package/dist/collection/assets/js/demos/complex-form-demo.js +5 -5
- package/dist/collection/assets/js/demos/context-menu-demo.js +43 -43
- package/dist/collection/assets/js/demos/dialog-demo-temp.js +3 -3
- package/dist/collection/assets/js/demos/dialog-demo.js +336 -230
- package/dist/collection/assets/js/demos/divider-demo.js +59 -62
- package/dist/collection/assets/js/demos/dock-demo.js +12 -12
- package/dist/collection/assets/js/demos/dock-host-init.js +31 -31
- package/dist/collection/assets/js/demos/documentation-demo.js +34 -34
- package/dist/collection/assets/js/demos/drag-drop-demo.js +2 -2
- package/dist/collection/assets/js/demos/dropdown-demo.js +140 -136
- package/dist/collection/assets/js/demos/dropdown-subtitle-demo.js +2 -2
- package/dist/collection/assets/js/demos/empty-state-demo.js +294 -78
- package/dist/collection/assets/js/demos/fab-demo.js +95 -11
- package/dist/collection/assets/js/demos/file-upload-demo.js +641 -171
- package/dist/collection/assets/js/demos/home-components.js +2 -2
- package/dist/collection/assets/js/demos/horizontal-nav-demo.js +6 -6
- package/dist/collection/assets/js/demos/icon-demo.js +17 -17
- package/dist/collection/assets/js/demos/input-demo.js +147 -143
- package/dist/collection/assets/js/demos/knob-demo.js +29 -30
- package/dist/collection/assets/js/demos/label-demo.js +697 -0
- package/dist/collection/assets/js/demos/layout-manager-demo.js +55 -55
- package/dist/collection/assets/js/demos/list-demo.js +185 -122
- package/dist/collection/assets/js/demos/loader-demo.js +48 -48
- package/dist/collection/assets/js/demos/masonry-demo.js +568 -140
- package/dist/collection/assets/js/demos/meter-group-demo.js +14 -16
- package/dist/collection/assets/js/demos/multi-level-context-menu-demo.js +25 -25
- package/dist/collection/assets/js/demos/my-profile-demo.js +27 -27
- package/dist/collection/assets/js/demos/nav-bar-demo.js +1 -1
- package/dist/collection/assets/js/demos/number-input-demo.js +262 -211
- package/dist/collection/assets/js/demos/pagination-demo.js +29 -29
- package/dist/collection/assets/js/demos/panel-demo.js +18 -25
- package/dist/collection/assets/js/demos/pattern-input-demo.js +278 -40
- package/dist/collection/assets/js/demos/popover-demo.js +240 -149
- package/dist/collection/assets/js/demos/progress-demo.js +170 -156
- package/dist/collection/assets/js/demos/radio-demo.js +73 -12
- package/dist/collection/assets/js/demos/range-slider-demo.js +33 -33
- package/dist/collection/assets/js/demos/rating-demo.js +19 -19
- package/dist/collection/assets/js/demos/scroll-top-demo.js +8 -9
- package/dist/collection/assets/js/demos/skeleton-demo.js +110 -52
- package/dist/collection/assets/js/demos/skeleton-performance-demo.js +2 -2
- package/dist/collection/assets/js/demos/smart-dialog-demo.js +12 -12
- package/dist/collection/assets/js/demos/smart-menu-demo.js +17 -17
- package/dist/collection/assets/js/demos/snackbar-demo.js +53 -53
- package/dist/collection/assets/js/demos/speed-dial-demo.js +14 -14
- package/dist/collection/assets/js/demos/speedometer-demo.js +40 -32
- package/dist/collection/assets/js/demos/split-button-demo.js +2 -2
- package/dist/collection/assets/js/demos/splitter-demo.js +14 -14
- package/dist/collection/assets/js/demos/stack-demo.js +27 -27
- package/dist/collection/assets/js/demos/stepper-demo.js +49 -49
- package/dist/collection/assets/js/demos/switch-demo.js +561 -125
- package/dist/collection/assets/js/demos/tabs-demo.js +22 -22
- package/dist/collection/assets/js/demos/tag-demo.js +62 -62
- package/dist/collection/assets/js/demos/theme-selector-demo.js +27 -27
- package/dist/collection/assets/js/demos/timeline-demo.js +10 -10
- package/dist/collection/assets/js/demos/timeline-playground.js +2 -2
- package/dist/collection/assets/js/demos/timer-demo.js +10 -10
- package/dist/collection/assets/js/demos/toolbar-demo.js +17 -17
- package/dist/collection/assets/js/demos/tooltip-demo.js +92 -90
- package/dist/collection/assets/js/demos/top-bar-demo.js +6 -6
- package/dist/collection/assets/js/demos/transfer-list-demo.js +20 -20
- package/dist/collection/assets/js/demos/tree-demo.js +50 -66
- package/dist/collection/assets/js/demos/workspace-manager-demo.js +20 -20
- package/dist/collection/collection-manifest.json +1 -2
- package/dist/collection/components/accordion/accordion.css +275 -9
- package/dist/collection/components/accordion/accordion.js +7 -6
- package/dist/collection/components/advanced-data-table/advanced-data-table.css +5 -5
- package/dist/collection/components/advanced-data-table/advanced-data-table.js +2 -2
- package/dist/collection/components/anchor/anchor.css +1 -0
- package/dist/collection/components/animate-on-scroll/animate-on-scroll.js +2 -2
- package/dist/collection/components/aside-panel/aside-panel.css +2 -2
- package/dist/collection/components/aside-panel/aside-panel.js +10 -11
- package/dist/collection/components/avatar/avatar.css +6 -6
- package/dist/collection/components/avatar/avatar.js +63 -11
- package/dist/collection/components/badge/badge.css +27 -17
- package/dist/collection/components/badge/badge.js +6 -3
- package/dist/collection/components/breadcrumb/breadcrumb-item.js +2 -2
- package/dist/collection/components/button/button.css +1 -0
- package/dist/collection/components/button/button.js +3 -3
- package/dist/collection/components/button-toggle/button-toggle.js +2 -2
- package/dist/collection/components/button-toggle-group/button-toggle-group.css +161 -14
- package/dist/collection/components/button-toggle-group/button-toggle-group.js +2 -2
- package/dist/collection/components/callout-banner/callout-banner.css +75 -0
- package/dist/collection/components/callout-banner/callout-banner.js +1 -1
- package/dist/collection/components/card/card.css +221 -9
- package/dist/collection/components/card/card.js +3 -2
- package/dist/collection/components/checkbox/checkbox.js +3 -3
- package/dist/collection/components/code-editor/code-editor.js +1 -1
- package/dist/collection/components/code-preview/ui-code-preview.js +1 -1
- package/dist/collection/components/color-picker/color-picker.css +110 -6
- package/dist/collection/components/color-picker/color-picker.js +302 -26
- package/dist/collection/components/context-menu/context-menu.css +9 -9
- package/dist/collection/components/dialog-box/dialog-box.js +116 -14
- package/dist/collection/components/dialog-header/dialog-header.js +1 -1
- package/dist/collection/components/dock/dock.css +116 -3
- package/dist/collection/components/dock-host/ui-dock-host.js +3 -3
- package/dist/collection/components/drag-drop/drag-drop.js +1 -1
- package/dist/collection/components/dropdown/dropdown.css +101 -8
- package/dist/collection/components/dropdown/dropdown.js +94 -28
- package/dist/collection/components/empty-state/empty-state.js +1 -1
- package/dist/collection/components/fab/fab.css +87 -15
- package/dist/collection/components/fab/fab.js +3 -3
- package/dist/collection/components/fab-item/fab-item.js +1 -1
- package/dist/collection/components/file-upload/file-upload.css +1362 -31
- package/dist/collection/components/file-upload/file-upload.js +171 -50
- package/dist/collection/components/horizontal-nav/horizontal-nav.css +9 -9
- package/dist/collection/components/horizontal-nav/horizontal-nav.js +2 -2
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/input/input.css +9 -0
- package/dist/collection/components/input/input.js +20 -9
- package/dist/collection/components/label/label.css +583 -0
- package/dist/collection/components/label/label.js +1669 -0
- package/dist/collection/components/layout-manager/layout-manager.js +1 -1
- package/dist/collection/components/layout-manager/lm-floating-window/lm-floating-window.js +1 -1
- package/dist/collection/components/layout-manager/lm-panel/lm-panel.js +1 -1
- package/dist/collection/components/layout-manager/lm-splitter/lm-splitter.js +1 -1
- package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js +1 -1
- package/dist/collection/components/library/category-section.js +1 -1
- package/dist/collection/components/library/library-card.js +1 -1
- package/dist/collection/components/library/library.js +1 -1
- package/dist/collection/components/list/list.css +46 -5
- package/dist/collection/components/list/list.js +76 -42
- package/dist/collection/components/list-group/list-group.css +0 -2
- package/dist/collection/components/list-group/list-group.js +11 -5
- package/dist/collection/components/list-item/list-item.css +403 -131
- package/dist/collection/components/list-item/list-item.js +345 -61
- package/dist/collection/components/loader/loader.css +1 -1
- package/dist/collection/components/loader/loader.js +2 -2
- package/dist/collection/components/meter-group/meter-group.css +5 -0
- package/dist/collection/components/meter-group/meter-group.js +3 -2
- package/dist/collection/components/my-step/my-step.js +1 -1
- package/dist/collection/components/nav-bar/nav-bar.css +4 -4
- package/dist/collection/components/nav-bar/nav-bar.js +6 -6
- package/dist/collection/components/number-input/number-input.js +6 -2
- package/dist/collection/components/otp-input/otp-input.css +10 -0
- package/dist/collection/components/otp-input/otp-input.js +3 -3
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/pattern-input/pattern-input.css +0 -1
- package/dist/collection/components/pattern-input/pattern-input.js +44 -9
- package/dist/collection/components/popover/popover.css +35 -7
- package/dist/collection/components/popover/popover.js +64 -9
- package/dist/collection/components/progress/progress.css +176 -32
- package/dist/collection/components/progress/progress.js +66 -8
- package/dist/collection/components/radio/radio.css +2 -0
- package/dist/collection/components/radio/radio.js +2 -2
- package/dist/collection/components/range-slider/range-slider.css +284 -31
- package/dist/collection/components/range-slider/range-slider.js +5 -5
- package/dist/collection/components/rating/rating.css +151 -65
- package/dist/collection/components/rating/rating.js +31 -13
- package/dist/collection/components/resizable-panel/resizable-panel.js +1 -1
- package/dist/collection/components/skeleton/skeleton-loader.css +144 -44
- package/dist/collection/components/skeleton/skeleton-loader.js +11 -7
- package/dist/collection/components/smart-stepper/smart-step.js +2 -2
- package/dist/collection/components/smart-stepper/smart-stepper.js +1 -1
- package/dist/collection/components/speedometer/speedometer.css +26 -6
- package/dist/collection/components/speedometer/speedometer.js +26 -15
- package/dist/collection/components/stack/stack.js +2 -2
- package/dist/collection/components/step/step.js +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/switch/switch.css +367 -8
- package/dist/collection/components/switch/switch.js +13 -12
- package/dist/collection/components/tag/tag.css +38 -12
- package/dist/collection/components/tag/tag.js +58 -13
- package/dist/collection/components/tag-group/tag-group.css +0 -1
- package/dist/collection/components/tag-group/tag-group.js +3 -3
- package/dist/collection/components/timeline/timeline.css +380 -317
- package/dist/collection/components/timeline/timeline.js +8 -0
- package/dist/collection/components/timeline-item/timeline-item.js +1 -1
- package/dist/collection/components/timer/timer.js +1 -1
- package/dist/collection/components/toggle-group/toggle-group.css +7 -3
- package/dist/collection/components/toggle-group/toggle-group.js +7 -3
- package/dist/collection/components/toolbar/toolbar.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/components/top-bar/top-bar.js +2 -2
- package/dist/collection/components/transfer-list/transfer-list.css +13 -13
- package/dist/collection/components/transfer-list/transfer-list.js +4 -4
- package/dist/collection/components/tree/tree.css +35 -21
- package/dist/collection/components/tree/tree.js +28 -13
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css +34 -16
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js +46 -11
- package/dist/collection/components/ui-navigation-bar/navigation-item.css +7 -7
- package/dist/collection/components/ui-navigation-bar/navigation-item.js +3 -3
- package/dist/collection/utils/dom.js +151 -151
- package/dist/components/avatar-group.js +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/button-toggle.js +1 -1
- package/dist/components/button.js +1 -0
- package/dist/components/category-section2.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog-header.js +1 -1
- package/dist/components/dom.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/icon.js +2 -2
- package/dist/components/input.js +1 -1
- package/dist/components/layout-manager.js +1 -1
- package/dist/components/library-card2.js +1 -1
- package/dist/components/list-group.js +1 -1
- package/dist/components/list-item.js +1 -1
- package/dist/components/lm-container2.js +1 -1
- package/dist/components/lm-floating-window2.js +1 -1
- package/dist/components/lm-panel2.js +1 -1
- package/dist/components/lm-splitter2.js +1 -1
- package/dist/components/lm-tabs2.js +1 -1
- package/dist/components/loader.js +1 -1
- package/dist/components/my-step.js +1 -1
- package/dist/components/nav-bar.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -0
- package/dist/components/radio.js +1 -1
- package/dist/components/range-slider.js +1 -1
- package/dist/components/rating.js +1 -1
- package/dist/components/resizable-panel.js +1 -1
- package/dist/components/skeleton-loader.js +1 -1
- package/dist/components/smart-step.js +1 -1
- package/dist/components/stack.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/tag-group.js +1 -1
- package/dist/components/tag.js +1 -1
- package/dist/components/timeline-item.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/ui-accordion.js +1 -1
- package/dist/components/ui-advanced-data-table.js +1 -1
- package/dist/components/ui-anchor.js +1 -1
- package/dist/components/ui-animate-on-scroll.js +1 -1
- package/dist/components/ui-aside-panel.js +1 -1
- package/dist/components/ui-badge.js +1 -1
- package/dist/components/ui-breadcrumb-item.js +1 -1
- package/dist/components/ui-breadcrumb.js +1 -1
- package/dist/components/ui-button-toggle-group.js +1 -1
- package/dist/components/ui-button.js +1 -1
- package/dist/components/ui-callout-banner.js +1 -1
- package/dist/components/ui-card.js +1 -1
- package/dist/components/ui-carousel.js +1 -1
- package/dist/components/ui-code-editor.js +1 -1
- package/dist/components/ui-code-preview.js +1 -1
- package/dist/components/ui-color-picker.js +1 -1
- package/dist/components/ui-command-palette.js +1 -1
- package/dist/components/ui-dialog-box.js +1 -1
- package/dist/components/ui-dock-host.js +1 -1
- package/dist/components/ui-dock.js +1 -1
- package/dist/components/ui-drag-drop.js +1 -1
- package/dist/components/ui-empty-state.js +1 -1
- package/dist/components/ui-fab-item.js +1 -1
- package/dist/components/ui-fab.js +1 -1
- package/dist/components/ui-file-upload.js +1 -1
- package/dist/components/ui-horizontal-nav.js +1 -1
- package/dist/components/ui-knob.js +1 -1
- package/dist/components/{ui-color-controller.d.ts → ui-label.d.ts} +4 -4
- package/dist/components/ui-label.js +1 -0
- package/dist/components/ui-library.js +1 -1
- package/dist/components/ui-list.js +1 -1
- package/dist/components/ui-masonry.js +1 -1
- package/dist/components/ui-meter-group.js +1 -1
- package/dist/components/ui-navigation-bar.js +1 -1
- package/dist/components/ui-navigation-item.js +1 -1
- package/dist/components/ui-number-input.js +1 -1
- package/dist/components/ui-otp-input.js +1 -1
- package/dist/components/ui-panel.js +1 -1
- package/dist/components/ui-pattern-input.js +1 -1
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-progress.js +1 -1
- package/dist/components/ui-scroll-top.js +1 -1
- package/dist/components/ui-smart-stepper.js +1 -1
- package/dist/components/ui-snackbar.js +1 -1
- package/dist/components/ui-speed-dial.js +1 -1
- package/dist/components/ui-speedometer.js +1 -1
- package/dist/components/ui-splitter.js +1 -1
- package/dist/components/ui-step.js +1 -1
- package/dist/components/ui-stepper.js +1 -1
- package/dist/components/ui-tabs.js +1 -1
- package/dist/components/ui-timeline.js +1 -1
- package/dist/components/ui-timer.js +1 -1
- package/dist/components/ui-toolbar.js +1 -1
- package/dist/components/ui-top-bar.js +1 -1
- package/dist/components/ui-transfer-list.js +1 -1
- package/dist/components/ui-tree.js +1 -1
- package/dist/components/ui-workspace-manager.js +1 -1
- package/dist/esm/category-section.entry.js +2 -2
- package/dist/esm/dom-DFBTWhGw.js +262 -0
- package/dist/esm/exploration-project-tailwind.js +3 -3
- package/dist/esm/{index-DUsoYu9r.js → index-Dqu2zaH1.js} +1 -1
- package/dist/esm/layout-manager.entry.js +3 -3
- package/dist/esm/library-card.entry.js +2 -2
- package/dist/esm/lm-container_2.entry.js +2 -2
- package/dist/esm/lm-panel_3.entry.js +4 -4
- package/dist/esm/loader.js +3 -3
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/my-step.entry.js +2 -2
- package/dist/esm/nav-bar.entry.js +4 -4
- package/dist/esm/smart-step.entry.js +3 -3
- package/dist/esm/timeline-item.entry.js +2 -2
- package/dist/esm/ui-accordion_11.entry.js +132 -50
- package/dist/esm/ui-advanced-data-table.entry.js +2 -2
- package/dist/esm/ui-anchor.entry.js +2 -2
- package/dist/esm/ui-animate-on-scroll.entry.js +3 -3
- package/dist/esm/ui-aside-panel.entry.js +10 -11
- package/dist/esm/ui-avatar-group_5.entry.js +1688 -0
- package/dist/esm/ui-breadcrumb-item.entry.js +3 -3
- package/dist/esm/ui-breadcrumb.entry.js +1 -1
- package/dist/esm/ui-callout-banner.entry.js +2 -2
- package/dist/esm/ui-card.entry.js +4 -3
- package/dist/esm/ui-carousel.entry.js +1 -1
- package/dist/esm/ui-checkbox.entry.js +3 -3
- package/dist/esm/ui-code-editor.entry.js +2 -2
- package/dist/esm/ui-code-preview.entry.js +2 -2
- package/dist/esm/ui-color-picker.entry.js +256 -22
- package/dist/esm/ui-command-palette.entry.js +1 -1
- package/dist/esm/ui-dialog-box.entry.js +85 -11
- package/dist/esm/ui-dialog-content.entry.js +1 -1
- package/dist/esm/ui-dialog-footer_2.entry.js +1 -1
- package/dist/esm/ui-divider.entry.js +1 -1
- package/dist/esm/ui-dock-host.entry.js +4 -4
- package/dist/esm/ui-dock.entry.js +2 -2
- package/dist/esm/ui-drag-drop.entry.js +2 -2
- package/dist/esm/ui-dropdown_2.entry.js +104 -34
- package/dist/esm/ui-empty-state.entry.js +2 -2
- package/dist/esm/ui-fab-item.entry.js +2 -2
- package/dist/esm/ui-fab.entry.js +4 -4
- package/dist/esm/ui-file-upload.entry.js +143 -44
- package/dist/esm/ui-horizontal-nav.entry.js +2 -2
- package/dist/esm/ui-knob.entry.js +1 -1
- package/dist/esm/ui-label.entry.js +471 -0
- package/dist/esm/ui-library.entry.js +2 -2
- package/dist/esm/ui-list-group_2.entry.js +349 -60
- package/dist/esm/ui-list.entry.js +76 -42
- package/dist/esm/ui-masonry.entry.js +1 -1
- package/dist/esm/ui-meter-group.entry.js +5 -4
- package/dist/esm/ui-navigation-item.entry.js +5 -5
- package/dist/esm/ui-number-input.entry.js +7 -3
- package/dist/esm/ui-otp-input.entry.js +5 -5
- package/dist/esm/{ui-pagination_4.entry.js → ui-pagination_3.entry.js} +36 -506
- package/dist/esm/ui-panel.entry.js +1 -1
- package/dist/esm/ui-pattern-input.entry.js +46 -11
- package/dist/esm/ui-progress.entry.js +66 -9
- package/dist/esm/ui-range-slider.entry.js +2 -2
- package/dist/esm/ui-resizable-panel.entry.js +2 -2
- package/dist/esm/ui-scroll-top.entry.js +1 -1
- package/dist/esm/ui-smart-context-menu.entry.js +1 -1
- package/dist/esm/ui-smart-stepper.entry.js +2 -2
- package/dist/esm/ui-snackbar.entry.js +1 -1
- package/dist/esm/ui-speed-dial.entry.js +1 -1
- package/dist/esm/ui-speedometer.entry.js +28 -17
- package/dist/esm/ui-splitter.entry.js +1 -1
- package/dist/esm/ui-step.entry.js +2 -2
- package/dist/esm/ui-stepper.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +14 -13
- package/dist/esm/ui-tabs.entry.js +2 -2
- package/dist/esm/ui-tag.entry.js +58 -13
- package/dist/esm/ui-timeline.entry.js +10 -2
- package/dist/esm/ui-timer.entry.js +2 -2
- package/dist/esm/ui-toolbar.entry.js +2 -2
- package/dist/esm/ui-tooltip.entry.js +4 -4
- package/dist/esm/ui-top-bar.entry.js +1 -1
- package/dist/esm/ui-transfer-list.entry.js +6 -6
- package/dist/esm/ui-tree.entry.js +30 -15
- package/dist/esm/ui-workspace-manager.entry.js +2 -2
- package/dist/exploration-project-tailwind/exploration-project-tailwind.css +1 -1
- package/dist/exploration-project-tailwind/exploration-project-tailwind.esm.js +1 -1
- package/dist/exploration-project-tailwind/{p-7ba2258a.entry.js → p-024a299a.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-0a71896a.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-35296877.entry.js → p-0cdeb8d8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a42fdc33.entry.js → p-139cefbc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-036d2a44.entry.js → p-198c83e5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-236f47b1.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-81ebba11.entry.js → p-25530d0d.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-41cd6bf0.entry.js → p-298f2057.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-85e36111.entry.js → p-2b5a8e3e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-e8c6d395.entry.js → p-2b6aa7bc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-70bacda8.entry.js → p-2cfba753.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-cbee2607.entry.js → p-2fe22958.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-20ecc116.entry.js → p-3012e780.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-321c3f46.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-8b57fe4e.entry.js → p-3ab43638.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-3ad7e47e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3b1ca826.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3ee8ddae.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-e22317c1.entry.js → p-3efb44c8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-36861546.entry.js → p-42e3bc28.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-4360331a.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-2f961934.entry.js → p-443de32b.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-898dd0fa.entry.js → p-44d15451.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4288c158.entry.js → p-46071679.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a3f465d9.entry.js → p-497d6182.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-4ad8c55c.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-4aaa8e40.entry.js → p-4c46ac0b.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-98e91da5.entry.js → p-5042ddaa.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-60190e0e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-60530874.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-200241f8.entry.js → p-6108565d.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-fb4aca69.entry.js → p-62889cfe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c02284ea.entry.js → p-66f71613.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-7889bfc4.entry.js → p-67c440b2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c1c8ac28.entry.js → p-6f09503f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-721bdbc3.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-747b02ea.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c6fd72e1.entry.js → p-754cb046.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-97af03cc.entry.js → p-7ed3bba2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d59da767.entry.js → p-864cebb7.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4d73c143.entry.js → p-96ee3196.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-54965530.entry.js → p-97086868.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d114a347.entry.js → p-9c5ced88.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-9d3044d4.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-9e079be6.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-790556f0.entry.js → p-9e4c45f5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-9eee7394.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-DFBTWhGw.js +1 -0
- package/dist/exploration-project-tailwind/p-Dqu2zaH1.js +2 -0
- package/dist/exploration-project-tailwind/p-a7bdedc2.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c87aeab6.entry.js → p-a8ec29de.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6ddbee42.entry.js → p-ae617f62.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-05a436d3.entry.js → p-aef76052.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-b5f043fa.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-b637b91b.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-d2e45c5e.entry.js → p-bc49a088.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6b838549.entry.js → p-bd9a631f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-e8ba0c95.entry.js → p-bf4b6767.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c0fa400e.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-8578b616.entry.js → p-c4f3d990.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c68ddb2f.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-c79574c4.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-c840098d.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-a1ad32a2.entry.js → p-c8663cbe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-cb6e38a6.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-cb9f2df1.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-cfe8b696.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-d00e13ae.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c4ba7e52.entry.js → p-d01ed934.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-aa85ff78.entry.js → p-d4e57d94.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-ccb5c737.entry.js → p-d5bd3a3f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-45482d86.entry.js → p-d987cebe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-d9ae77c0.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-e9bae5c7.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f516fabc.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f68e2794.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-d30e24bd.entry.js → p-fa034f69.entry.js} +1 -1
- package/dist/types/components/aside-panel/aside-panel.d.ts +0 -3
- package/dist/types/components/avatar/avatar.d.ts +3 -0
- package/dist/types/components/avatar/types.d.ts +2 -0
- package/dist/types/components/badge/badge.d.ts +1 -0
- package/dist/types/components/color-picker/color-picker.d.ts +35 -2
- package/dist/types/components/dialog-box/dialog-box.d.ts +10 -0
- package/dist/types/components/dropdown/dropdown.d.ts +5 -0
- package/dist/types/components/file-upload/file-upload.d.ts +23 -6
- package/dist/types/components/label/label.d.ts +290 -0
- package/dist/types/components/label/types.d.ts +39 -0
- package/dist/types/components/list/list.d.ts +2 -1
- package/dist/types/components/list-group/list-group.d.ts +1 -0
- package/dist/types/components/list-item/list-item.d.ts +45 -17
- package/dist/types/components/pattern-input/pattern-input.d.ts +6 -0
- package/dist/types/components/popover/popover.d.ts +3 -0
- package/dist/types/components/progress/progress.d.ts +7 -0
- package/dist/types/components/range-slider/range-slider.d.ts +2 -2
- package/dist/types/components/rating/rating.d.ts +1 -0
- package/dist/types/components/skeleton/skeleton-loader.d.ts +1 -1
- package/dist/types/components/speedometer/speedometer.d.ts +1 -0
- package/dist/types/components/tag/tag.d.ts +4 -0
- package/dist/types/components/tree/tree.d.ts +1 -0
- package/dist/types/components/ui-navigation-bar/navigation-bar/navigation-bar.d.ts +1 -1
- package/dist/types/components.d.ts +742 -425
- package/dist/types/types/common.d.ts +2 -2
- package/dist/types/types/common.type.d.ts +2 -0
- package/dist/types/utils/dom.d.ts +4 -4
- package/package.json +4 -5
- package/dist/cjs/dom-oP1E4Rd3.js +0 -267
- package/dist/cjs/ui-avatar-group_3.cjs.entry.js +0 -634
- package/dist/cjs/ui-color-controller.cjs.entry.js +0 -150
- package/dist/cjs/ui-popover.cjs.entry.js +0 -517
- package/dist/cjs/ui-smart-location-dropdown.cjs.entry.js +0 -565
- package/dist/collection/components/color-controller/color-controller.css +0 -108
- package/dist/collection/components/color-controller/color-controller.js +0 -224
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.css +0 -357
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js +0 -1190
- package/dist/components/ui-color-controller.js +0 -1
- package/dist/components/ui-smart-location-dropdown.d.ts +0 -11
- package/dist/components/ui-smart-location-dropdown.js +0 -1
- package/dist/esm/dom-BMFah5q3.js +0 -262
- package/dist/esm/ui-avatar-group_3.entry.js +0 -630
- package/dist/esm/ui-color-controller.entry.js +0 -148
- package/dist/esm/ui-popover.entry.js +0 -515
- package/dist/esm/ui-smart-location-dropdown.entry.js +0 -563
- package/dist/exploration-project-tailwind/p-06f0c679.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-0d31c9e9.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-148e81df.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-16bdd162.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-2347d21b.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-3d381f75.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4417a9d8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-44742ddd.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-47e2a7ee.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4bef8bed.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4efd63ce.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-5c835d90.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-61717490.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-717dad1f.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-71d95bb1.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-9bd14f69.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-9fc06ff0.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-BMFah5q3.js +0 -1
- package/dist/exploration-project-tailwind/p-DUsoYu9r.js +0 -2
- package/dist/exploration-project-tailwind/p-a27f59d2.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-a7b07cf4.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-bd89d060.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-c63c522e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-c69dd43e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-d6ce9721.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-dc92a343.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-debede45.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-e76318c7.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ea51c5d8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-eab5ad36.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f0bc5d7e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f1beee72.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f543392f.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f61cfb7c.entry.js +0 -1
- package/dist/types/components/color-controller/color-controller.d.ts +0 -24
- package/dist/types/components/smart-location-dropdown/smart-location-dropdown.d.ts +0 -119
- package/dist/types/components/smart-location-dropdown/types.d.ts +0 -37
- /package/dist/collection/components/{smart-location-dropdown → label}/types.js +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, a as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dqu2zaH1.js';
|
|
2
2
|
import { n as normalizeComponentSize } from './component-size-C7gf39HE.js';
|
|
3
3
|
|
|
4
4
|
const paginationCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;position:relative;z-index:0}:host(.has-open-dropdown){z-index:100}.ui-pagination{display:flex;align-items:center;gap:8px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.ui-pagination.pagination-sm{font-size:12px}.ui-pagination.pagination-md{font-size:14px}.ui-pagination.pagination-lg{font-size:16px}.ui-pagination.pagination-default .pagination-btn{cursor:pointer;border-radius:8px}.ui-pagination.pagination-outlined .pagination-btn{cursor:pointer;border-radius:8px}.ui-pagination.pagination-filled .pagination-btn{cursor:pointer;border-radius:8px}.ui-pagination.pagination-floating{background:var(--bg-primary, #ffffff);padding:8px 16px;border-radius:50px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);border:1px solid var(--border-default, #e5e7eb);width:fit-content}.ui-pagination.pagination-glass{background:rgba(255, 255, 255, 0.1);backdrop-filter:blur(12px);padding:10px 20px;border-radius:16px;border:1px solid rgba(255, 255, 255, 0.2);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.15);width:fit-content}.ui-pagination.pagination-soft{gap:12px}.ui-pagination.pagination-modern{background:var(--bg-primary, #ffffff);padding:12px 24px;border-radius:24px;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);border:1px solid var(--border-default, #f3f4f6);gap:16px;width:fit-content}.ui-pagination.pagination-modern .pagination-btn.active{box-shadow:0 4px 12px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.ui-pagination.pagination-minimalist{gap:20px;padding:4px}.ui-pagination.pagination-minimalist .pagination-btn{position:relative}.ui-pagination.pagination-minimalist .pagination-btn:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--color-primary, #10b981);transition:width 0.3s ease}.ui-pagination.pagination-minimalist .pagination-btn.active:after{width:80%}.ui-pagination.pagination-premium{background:var(--bg-primary, #ffffff);padding:12px 28px;border-radius:40px;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.04);border:none;gap:12px;width:fit-content}.ui-pagination.pagination-premium .pagination-btn.active{background:linear-gradient(135deg, var(--color-primary, #6366f1), var(--color-primary-hover, #4f46e5)) !important;color:white !important;box-shadow:0 10px 20px -5px rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);transform:scale(1.1);transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.ui-pagination.pagination-premium .pagination-btn:hover:not(.active):not(.disabled){background:var(--bg-secondary, #f8fafc);transform:translateY(-2px)}.ui-pagination.pagination-underline{gap:12px}.ui-pagination.pagination-underline .pagination-btn.active{position:relative;color:var(--color-primary, #10b981) !important;background:transparent !important}.ui-pagination.pagination-underline .pagination-btn.active::after{content:"";position:absolute;bottom:2px;left:20%;right:20%;height:2px;background:var(--color-primary, #10b981);border-radius:2px;box-shadow:0 2px 4px rgba(var(--color-primary-rgb, 16, 185, 129), 0.3)}.pagination-main-content{display:flex;align-items:center;justify-content:center;flex:1}.ui-pagination.pagination-has-container{justify-content:center;margin-left:auto;margin-right:auto}.ui-pagination.pagination-segmented{gap:0;width:fit-content;border-radius:8px;overflow:hidden;border:1px solid var(--border-default, #e5e7eb);background:var(--bg-primary, #ffffff)}.ui-pagination.pagination-segmented.pagination-shape-pill{border-radius:30px}.ui-pagination.pagination-segmented.pagination-shape-pill .pagination-btn:first-child{border-top-left-radius:30px !important;border-bottom-left-radius:30px !important}.ui-pagination.pagination-segmented.pagination-shape-pill .pagination-btn:last-child{border-top-right-radius:30px !important;border-bottom-right-radius:30px !important}.ui-pagination.pagination-segmented .pagination-btn,.ui-pagination.pagination-segmented .pagination-label,.ui-pagination.pagination-segmented .pagination-pages{border-radius:0 !important;border:none !important;margin:0 !important;display:flex;align-items:center}.ui-pagination.pagination-segmented .pagination-pages{gap:0;border-left:1px solid var(--border-default, #e5e7eb) !important;border-right:1px solid var(--border-default, #e5e7eb) !important}.ui-pagination.pagination-segmented .pagination-label{padding:0 16px;font-weight:600;font-size:13px;color:var(--text-secondary, #374151);border-left:1px solid var(--border-default, #e5e7eb) !important;border-right:1px solid var(--border-default, #e5e7eb) !important;background:var(--bg-primary, #ffffff);height:100%;min-height:36px}.ui-pagination.pagination-segmented .pagination-btn:not(:last-child){border-right:1px solid var(--border-default, #e5e7eb) !important}.ui-pagination.pagination-arrows-joined .pagination-prev{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:none !important}.ui-pagination.pagination-arrows-joined .pagination-next{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.pagination-joined{display:flex;gap:0}.ui-pagination.pagination-vertical{flex-direction:column;width:fit-content;height:auto;gap:12px}.ui-pagination.pagination-vertical .pagination-pages,.ui-pagination.pagination-vertical .pagination-indicators,.ui-pagination.pagination-vertical .pagination-input-container,.ui-pagination.pagination-vertical .pagination-dropdown-container,.ui-pagination.pagination-vertical .pagination-joined{flex-direction:column}.ui-pagination.pagination-vertical.pagination-segmented{border-radius:8px}.ui-pagination.pagination-vertical.pagination-segmented .pagination-btn,.ui-pagination.pagination-vertical.pagination-segmented .pagination-label,.ui-pagination.pagination-vertical.pagination-segmented .pagination-pages{width:100%;border-right:none !important;border-bottom:1px solid var(--border-default, #e5e7eb) !important}.ui-pagination.pagination-vertical.pagination-segmented .pagination-btn:last-child,.ui-pagination.pagination-vertical.pagination-segmented .pagination-label:last-child,.ui-pagination.pagination-vertical.pagination-segmented .pagination-pages:last-child{border-bottom:none !important}.ui-pagination.pagination-vertical.pagination-segmented.pagination-shape-pill{border-radius:20px}.ui-pagination.pagination-vertical.pagination-segmented.pagination-shape-pill .pagination-btn:first-child{border-radius:20px 20px 0 0 !important}.ui-pagination.pagination-vertical.pagination-segmented.pagination-shape-pill .pagination-btn:last-child{border-radius:0 0 20px 20px !important}.ui-pagination.pagination-vertical.pagination-arrows-joined .pagination-prev{border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom:none !important}.ui-pagination.pagination-vertical.pagination-arrows-joined .pagination-next{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.ui-pagination.pagination-vertical.pagination-underline .pagination-btn.active::after{bottom:20%;top:20%;left:2px;right:auto;width:2px;height:auto}.pagination-btn.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.pagination-btn:focus{outline:none;box-shadow:0 0 0 2px var(--bg-primary, #ffffff), 0 0 0 4px var(--color-primary, #10b981)}.pagination-btn svg{display:inline-flex;vertical-align:middle;width:16px;height:16px}.ui-pagination.pagination-sm .pagination-btn svg{width:14px;height:14px}.ui-pagination.pagination-lg .pagination-btn svg{width:18px;height:18px}.pagination-basic{display:flex;align-items:center;gap:4px}.pagination-pages{display:flex;align-items:center;gap:2px}.pagination-compact{display:flex;align-items:center;gap:12px}.pagination-info{font-weight:500;color:var(--text-secondary, #374151);white-space:nowrap}.pagination-detailed{display:flex;flex-direction:column;gap:16px;align-items:center}.pagination-details{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}.pagination-total{color:var(--text-muted, #6b7280);font-size:0.875em;margin-left:auto}.pagination-size-selector{display:flex;align-items:center;gap:8px;font-size:0.875em;position:relative;z-index:1}.pagination-size-selector .pagination-size-label{color:var(--text-secondary, #374151);font-weight:500}.pagination-size-selector .pagination-size-suffix{color:var(--text-muted, #64748b)}.pg-dropdown{position:relative;display:inline-flex}.pg-dropdown-open-host{z-index:30}.pg-dropdown-trigger{display:inline-flex;align-items:center;gap:6px;background:var(--bg-primary, #ffffff);border:1.5px solid var(--border-default, #e2e8f0);border-radius:20px;padding:5px 10px 5px 12px;font-size:13px;font-weight:600;font-family:inherit;color:var(--text-primary, #1e293b);cursor:pointer;outline:none;transition:all 0.2s ease;white-space:nowrap}.pg-dropdown-trigger:hover{border-color:var(--color-primary, #3b82f6);box-shadow:0 2px 8px rgba(59, 130, 246, 0.12)}.pg-dropdown-trigger.pg-dropdown-open{border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.12)}.pg-dropdown-trigger:disabled{opacity:0.5;cursor:not-allowed}.pg-dropdown-trigger-wide{min-width:110px;justify-content:space-between}.pg-dropdown-arrow{flex-shrink:0;transition:transform 0.2s ease;opacity:0.6}.pg-arrow-up{transform:rotate(180deg)}.pg-dropdown-panel{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:100%;width:max-content;background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e2e8f0);border-radius:18px;box-shadow:0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);z-index:100;padding:6px;overflow:hidden;animation:pgDropdownIn 0.15s ease-out}.pg-dropdown-panel-scroll{max-height:220px;overflow-y:auto;scrollbar-width:thin}.pg-dropdown-panel-scroll::-webkit-scrollbar{width:4px}.pg-dropdown-panel-scroll::-webkit-scrollbar-track{background:transparent}.pg-dropdown-panel-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}@keyframes pgDropdownIn{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.pg-dropdown-item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-primary, #1e293b);transition:background 0.15s ease;white-space:nowrap}.pg-dropdown-item:hover{background:var(--bg-secondary, #f1f5f9)}.pg-dropdown-item-selected{background:#ecfdf5 !important;color:#059669 !important;font-weight:700}.pg-dropdown-item-selected:hover{background:#d1fae5 !important}.pg-dropdown-check{flex-shrink:0;color:#059669}.pagination-size-premium{gap:12px}.pagination-jump{display:flex;align-items:center;gap:8px;font-size:0.875em}.pagination-jump label{color:var(--text-secondary, #374151)}.pagination-jump input{width:44px;padding:4px 8px;border:1px solid var(--border-strong, #d1d5db);border-radius:8px;text-align:center;transition:all 0.2s ease}.pagination-jump input:focus{outline:none;border-color:var(--color-primary, #10b981);box-shadow:0 0 0 2px var(--bg-primary, #ffffff), 0 0 0 4px var(--color-primary, #10b981)}.pagination-jump-btn{margin-left:4px}.pagination-minimal{display:flex;align-items:center;gap:8px}.pagination-input-group{display:flex;align-items:center;gap:8px}.pagination-page-input{min-width:0 !important;text-align:center;font-size:inherit}.pagination-separator{color:var(--text-muted, #6b7280);font-weight:500}.pagination-total-pages{font-weight:500;color:var(--text-secondary, #374151)}.pagination-advanced{display:flex;flex-direction:column;gap:16px;align-items:center}.pagination-controls{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;width:100%}.pagination-summary{color:var(--text-muted, #6b7280);font-size:0.875em}.pagination-jump-section{display:flex;align-items:center;gap:8px;font-size:0.875em}.pagination-jump-section label{color:var(--text-secondary, #374151)}.pagination-jump-section input{width:44px;padding:4px 8px;border:1px solid var(--border-strong, #d1d5db);border-radius:8px;text-align:center}.pagination-infinite{display:flex;flex-direction:column;align-items:center;gap:12px}.pagination-loading{display:flex;align-items:center;justify-content:center}.pagination-infinite-info{color:var(--text-muted, #6b7280);font-size:0.875em}.pagination-spinner{width:24px;height:24px;border:2px solid var(--border-default, #e5e7eb);border-top:2px solid var(--color-primary, #10b981);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 640px){.ui-pagination{flex-wrap:wrap;justify-content:center}.pagination-detailed .pagination-details,.pagination-advanced .pagination-controls{flex-direction:column;gap:12px}.pagination-basic{flex-wrap:wrap}.pagination-pages{order:2;width:100%;justify-content:center}.pagination-first,.pagination-prev{order:1}.pagination-next,.pagination-last{order:3}}@media (prefers-color-scheme: dark){.ui-pagination.pagination-default .pagination-btn{background-color:var(--bg-primary, var(--text-primary, #1f2937));border-color:var(--border-default, #374151);color:var(--text-standard, #f9fafb)}.ui-pagination.pagination-default .pagination-btn:hover:not(.disabled):not(.active){background-color:var(--text-secondary, #374151);border-color:var(--border-strong, #4b5563)}.ui-pagination.pagination-outlined .pagination-btn{border-color:var(--border-default, #374151);color:var(--text-standard, #f9fafb)}.ui-pagination.pagination-outlined .pagination-btn:hover:not(.disabled):not(.active){border-color:var(--border-strong, #4b5563);background-color:var(--text-secondary, #374151)}.ui-pagination.pagination-filled .pagination-btn{background-color:var(--text-secondary, #374151);color:var(--text-standard, #f9fafb)}.ui-pagination.pagination-filled .pagination-btn:hover:not(.disabled):not(.active){background-color:var(--text-secondary, #4b5563)}.pagination-info,.pagination-total,.pagination-size-selector label,.pagination-jump label,.pagination-separator,.pagination-total-pages,.pagination-summary,.pagination-jump-section label,.pagination-infinite-info{color:var(--bg-secondary, #d1d5db)}.pagination-size-selector select,.pagination-jump input,.pagination-page-input,.pagination-jump-section input{background-color:var(--bg-primary, var(--text-primary, #1f2937));border-color:var(--border-default, #374151);color:var(--text-standard, #f9fafb);border-radius:8px}.ui-pagination.pagination-floating{background-color:var(--bg-primary, #111827);border-color:var(--border-default, #374151);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)}.ui-pagination.pagination-glass{background-color:rgba(15, 23, 42, 0.4);border-color:rgba(255, 255, 255, 0.05);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.6)}.ui-pagination.pagination-modern{background-color:var(--bg-primary, #111827);border-color:var(--border-default, #1f2937);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.6)}.ui-pagination.pagination-premium{background-color:var(--bg-primary, #111827);box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.7)}.ui-pagination.pagination-premium .pagination-btn:hover:not(.active):not(.disabled){background:var(--bg-secondary, #1e293b)}.ui-pagination.pagination-segmented{background-color:var(--bg-primary, #111827);border-color:var(--border-default, #1f2937)}.ui-pagination.pagination-segmented .pagination-btn,.ui-pagination.pagination-segmented .pagination-label,.ui-pagination.pagination-segmented .pagination-pages{border-color:var(--border-default, #1f2937) !important}.ui-pagination.pagination-segmented .pagination-label{background-color:var(--bg-primary, #111827);color:var(--text-standard, #f9fafb)}.ui-pagination.pagination-underline .pagination-btn.active::after{background:var(--color-primary, #60a5fa);box-shadow:0 2px 8px rgba(96, 165, 250, 0.5)}}.pagination-dropdown-container{display:inline-flex;align-items:center;position:relative;isolation:isolate;overflow:visible;background:var(--bg-primary, #ffffff);padding:6px;border-radius:40px;box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);border:1px solid var(--border-default, rgba(226, 232, 240, 0.8));gap:8px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.pagination-dropdown-container:hover{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color:var(--color-primary-light, rgba(59, 130, 246, 0.2));transform:translateY(-1px)}.pagination-dropdown-wrapper{position:relative;display:flex;align-items:center;min-width:130px;justify-content:center;z-index:2}.pagination-dropdown-wrapper ui-dropdown{width:100%;--dd-shadow:none;}.pagination-dropdown-wrapper-open{z-index:30}.pagination-total{padding:0 12px;color:var(--text-muted, #64748b);font-size:13px;font-weight:600;border-right:1px solid var(--border-default, #e2e8f0);height:24px;display:flex;align-items:center;letter-spacing:-0.01em}.pagination-dropdown-container .pagination-size-selector,.pagination-input-container .pagination-size-selector{padding:0 12px;border-right:1px solid var(--border-default, #e2e8f0);height:24px;font-size:12px;gap:6px}.pagination-dropdown-container .pagination-size-selector .pagination-size-label,.pagination-input-container .pagination-size-selector .pagination-size-label{color:var(--text-muted, #94a3b8);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:0.05em}.pagination-dropdown-container .pagination-size-selector .pagination-size-suffix,.pagination-input-container .pagination-size-selector .pagination-size-suffix{display:none}.pagination-dropdown-container .pagination-size-selector ui-dropdown,.pagination-input-container .pagination-size-selector ui-dropdown{width:auto;min-width:50px;--dropdown-trigger-padding:0 8px;--dropdown-trigger-height:28px;--dropdown-trigger-bg:transparent;--dropdown-trigger-border:none;--dropdown-value-font-size:13px;--dropdown-value-font-weight:600}.pagination-input-container{display:inline-flex;align-items:center;position:relative;isolation:isolate;overflow:visible;background:var(--bg-primary, rgba(255, 255, 255, 0.95));backdrop-filter:blur(8px);padding:2px 6px;border-radius:40px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);border:1.5px solid var(--border-default, #e2e8f0);gap:6px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.pagination-page-input{flex:none !important;width:auto;min-width:44px}.pagination-page-input ui-input{--input-text-align:center;--input-border-radius:20px;--input-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.02);--input-height:28px;--input-font-size:13px;--input-font-weight:700;--input-border-color:#e2e8f0;--input-padding-inline:4px}.pagination-input-label{font-size:13px;font-weight:500;color:var(--text-muted, #94a3b8);display:flex;gap:1rem;align-items:center}.pagination-input-label strong{color:var(--text-primary, #1e293b);font-weight:700;font-size:14px}.pagination-dropdown-container .pagination-btn,.pagination-input-container .pagination-btn{position:relative;z-index:1;width:32px;height:32px;border-radius:50% !important;display:flex;align-items:center;justify-content:center;transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);background:transparent !important;border:none !important;color:var(--text-secondary, #475569) !important}.pagination-dropdown-container .pagination-btn:hover:not(.disabled),.pagination-input-container .pagination-btn:hover:not(.disabled){background:var(--bg-secondary, #f8fafc) !important;transform:scale(1.15);color:var(--color-primary, #2563eb) !important}.pagination-dropdown-container .pagination-btn:active:not(.disabled),.pagination-input-container .pagination-btn:active:not(.disabled){transform:scale(0.95)}.pagination-dropdown-container .pagination-btn svg,.pagination-input-container .pagination-btn svg{width:18px;height:18px}.ui-pagination.pagination-dropdown-open .pagination-dropdown-container .pagination-btn,.ui-pagination.pagination-dropdown-open .pagination-input-container .pagination-btn{z-index:1}@media (prefers-color-scheme: dark){.pagination-dropdown-container,.pagination-input-container{background:var(--bg-primary, #0f172a);border-color:rgba(255, 255, 255, 0.05);box-shadow:0 10px 40px -10px rgba(0, 0, 0, 0.5)}.pagination-total{border-color:rgba(255, 255, 255, 0.1);color:#94a3b8}.pagination-dropdown-container .pagination-size-selector,.pagination-input-container .pagination-size-selector{border-color:rgba(255, 255, 255, 0.1)}.pagination-dropdown-container .pagination-size-selector .pagination-size-label,.pagination-input-container .pagination-size-selector .pagination-size-label{color:#64748b}.pagination-input-label strong{color:#f1f5f9}.pagination-btn:hover:not(.disabled){background:rgba(255, 255, 255, 0.05) !important}}.pagination-page-input.has-error{border-color:var(--color-danger, #ef4444) !important;background-color:var(--color-danger-light, rgba(239, 68, 68, 0.05)) !important}.pagination-error-message{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--color-danger, #ef4444);color:white;padding:4px 10px;border-radius:4px;font-size:11px;margin-top:8px;white-space:nowrap;z-index:10;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.pagination-error-message::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--color-danger, #ef4444)}.ui-pagination.pagination-sm .pagination-error-message{font-size:10px;padding:2px 8px}.pagination-indicator-container{display:flex;align-items:center;gap:16px}.pagination-indicators{display:flex;align-items:center;gap:8px}.pagination-indicator{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease}.pagination-indicator-dot{width:8px;height:8px;border-radius:50%;background-color:var(--inactive-color, #cbd5e1);transition:all 0.3s ease}.pagination-indicator:hover .pagination-indicator-dot{background-color:var(--hover-color, #94a3b8);transform:scale(1.2)}.pagination-indicator-active .pagination-indicator-dot{background-color:var(--primary-color, var(--color-primary, #10b981));transform:scale(1.5)}.pagination-indicator-label{position:absolute;top:-30px;background-color:var(--primary-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff);padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap;animation:indicatorSlideIn 0.2s ease}.pagination-indicator-label::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--primary-color, var(--color-primary, #10b981))}@keyframes indicatorSlideIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.pagination-nav-btn:disabled{opacity:0.4;cursor:not-allowed}.pagination-nav-btn svg{width:16px;height:16px}.ui-pagination.pagination-sm .pagination-indicator-dot{width:6px;height:6px}.ui-pagination.pagination-sm .pagination-nav-btn{width:28px;height:28px}.ui-pagination.pagination-sm .pagination-indicator-label{font-size:10px;padding:2px 8px;top:-26px}.ui-pagination.pagination-lg .pagination-indicator-dot{width:10px;height:10px}.ui-pagination.pagination-lg .pagination-nav-btn{width:40px;height:40px}.ui-pagination.pagination-lg .pagination-nav-btn svg{width:20px;height:20px}.ui-pagination.pagination-lg .pagination-indicator-label{font-size:14px;padding:6px 12px;top:-36px}@media (prefers-color-scheme: dark){.pagination-indicator-dot{background-color:var(--inactive-color, #475569)}.pagination-indicator:hover .pagination-indicator-dot{background-color:var(--hover-color, var(--text-muted, #64748b))}.pagination-indicator-active .pagination-indicator-dot{background-color:var(--primary-color, #60a5fa)}.pagination-indicator-label{background-color:var(--primary-color, #60a5fa)}.pagination-indicator-label::after{border-top-color:var(--primary-color, #60a5fa)}.pagination-nav-btn{background-color:var(--bg-color, var(--bg-primary, var(--text-primary, #1f2937)));border-color:var(--border-color, var(--border-default, #374151));color:var(--text-color, #d1d5db)}.pagination-nav-btn:hover:not(:disabled){background-color:var(--hover-bg, var(--text-secondary, #374151));border-color:var(--primary-color, #60a5fa);color:var(--primary-color, #60a5fa)}}.sr-only{position:absolute;width:0px;height:0px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none}.ui-pagination.pagination-shape-rounded .pagination-btn{border-radius:12px !important}.ui-pagination.pagination-shape-pill .pagination-btn{border-radius:24px !important;padding-left:16px !important;padding-right:16px !important}.ui-pagination.pagination-shape-circle .pagination-btn{border-radius:50% !important;width:36px !important;height:36px !important;min-width:36px !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}.pagination-rtl{direction:rtl}.pagination-rtl .pagination-pages{flex-direction:row-reverse}@media (max-width: 768px){.pagination-mobile .pagination-btn{min-width:36px;height:36px;padding:8px;font-size:14px}.pagination-mobile .pagination-pages{gap:4px}.pagination-mobile .pagination-total,.pagination-mobile .pagination-summary{font-size:12px}}.ui-pagination:focus{outline:none;box-shadow:0 0 0 2px var(--bg-primary, #ffffff), 0 0 0 4px var(--color-primary, #10b981);border-radius:8px}.ui-pagination:focus:not(:focus-visible){outline:none}.pagination-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-primary, #ffffff), 0 0 0 4px var(--color-primary, #10b981)}@media (prefers-reduced-motion: reduce){.pagination-btn,.pagination-indicator{transition:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.pagination-transitioning .pagination-btn.active{animation:pageTransition 0.3s ease}@keyframes pageTransition{0%{transform:scale(0.95);opacity:0.7}100%{transform:scale(1);opacity:1}}.pagination-sticky{position:sticky;z-index:100;background:var(--bg-primary, #ffffff);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);padding:12px 16px;border-radius:8px}.pagination-sticky-top{top:0}.pagination-sticky-bottom{bottom:0}.pagination-progress-bar{width:100%;height:3px;background:var(--bg-primary, #e5e7eb);border-radius:2px;overflow:hidden;margin-bottom:12px}.pagination-progress-fill{height:100%;background:linear-gradient(90deg, var(--color-primary, #10b981), var(--color-primary, #8b5cf6));transition:width 0.3s ease}.pagination-theme-primary .pagination-progress-fill{background:linear-gradient(90deg, var(--color-primary, #10b981), var(--color-primary, #60a5fa))}.pagination-theme-success .pagination-progress-fill{background:linear-gradient(90deg, var(--color-success, #10b981), var(--color-success, #34d399))}.pagination-theme-danger .pagination-progress-fill{background:linear-gradient(90deg, var(--color-danger, #ef4444), var(--color-danger, #f87171))}.pagination-theme-warning .pagination-progress-fill{background:linear-gradient(90deg, var(--color-warning, #f59e0b), var(--color-danger, #fbbf24))}.pagination-theme-info .pagination-progress-fill{background:linear-gradient(90deg, var(--color-info, #06b6d4), var(--color-primary, #22d3ee))}@media (max-width: 768px){.ui-pagination{touch-action:pan-y;user-select:none}}@media (prefers-reduced-motion: reduce){.pagination-transitioning .pagination-btn.active{animation:none}.pagination-progress-fill{transition:none}}.pagination-quick-jump{background:var(--bg-secondary, #f3f4f6) !important;border:1px solid var(--border-strong, #d1d5db) !important;color:var(--text-muted, #6b7280) !important;font-weight:600;font-size:0.875em;min-width:44px !important}.pagination-quick-jump:hover:not(:disabled){background:var(--bg-primary, #e5e7eb) !important;border-color:var(--color-primary, #9ca3af) !important;color:var(--text-secondary, #374151) !important}.pagination-quick-jump:active:not(:disabled){transform:scale(0.95)}.pagination-theme-primary .pagination-quick-jump:hover:not(:disabled){background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) !important;border-color:var(--color-primary, #10b981) !important;color:var(--color-primary, #10b981) !important}.pagination-theme-success .pagination-quick-jump:hover:not(:disabled){background:rgba(var(--color-success-rgb, 16, 185, 129), 0.1) !important;border-color:var(--color-success, #10b981) !important;color:var(--color-success, #10b981) !important}.pagination-theme-danger .pagination-quick-jump:hover:not(:disabled){background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1) !important;border-color:var(--color-danger, #ef4444) !important;color:var(--color-danger, #ef4444) !important}`;
|
|
@@ -785,7 +785,7 @@ const Pagination = class {
|
|
|
785
785
|
};
|
|
786
786
|
Pagination.style = paginationCss();
|
|
787
787
|
|
|
788
|
-
const radioCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.radio-badge{display:inline-block;min-width:18px;height:18px;padding:0 6px;background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);font-size:10px;font-weight:700;border-radius:9px;margin-inline-start:8px;vertical-align:middle;text-align:center;line-height:18px;box-shadow:0 2px 4px rgba(var(--color-success-rgb, 61, 205, 88), 0.2)}[class*=radio-reveal-]{opacity:0;animation-fill-mode:forwards;animation-delay:var(--reveal-delay, 0ms)}.radio-reveal-fade-in{animation:radio-fade-in 0.6s ease-out forwards}.radio-reveal-slide-up{animation:radio-slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards}.radio-reveal-zoom{animation:radio-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}@keyframes radio-fade-in{from{opacity:0}to{opacity:1}}@keyframes radio-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes radio-zoom{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.radio-tooltip{position:absolute;background:var(--bg-primary, #1f2937);color:var(--text-standard, #ffffff);padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10}.radio-input-wrapper:hover .radio-tooltip{opacity:1}.radio-tooltip-top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-left{inset-inline-end:calc(100% + 10px);top:50%;transform:translateY(-50%)}.radio-tooltip-right{inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%)}:host{display:block;overflow:hidden;--ui-radio-border:var(--border-strong, #94a3b8);--ui-radio-bg:var(--bg-primary, #ffffff);--ui-radio-label:var(--label-color, inherit);--ui-radio-description:var(--label-subtitle-color, inherit);--ui-radio-circle-hover:rgba(0, 0, 0, 0.05)}:host-context(.dark),:host-context([data-theme=dark]),:host-context([data-theme=violet]),:host-context([data-theme=pink]),:host-context([data-theme=blue]),:host-context([data-theme=green]),:host(.dark){--ui-radio-border:var(--border-default, #64748b);--ui-radio-bg:var(--bg-secondary, #111827);--ui-radio-circle-hover:rgba(255, 255, 255, 0.05)}.radio-container{display:inline-flex;flex-direction:column;width:100%;box-sizing:border-box;font-family:inherit;color:inherit}.radio-container.radio-rtl{direction:rtl}.radio-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;position:relative;box-sizing:border-box;flex-shrink:0;overflow:visible;}.radio-label *{box-sizing:border-box}.radio-container.radio-disabled .radio-label{cursor:not-allowed;opacity:0.6}.radio-container.radio-readonly .radio-label{cursor:default}.label-section{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}.label-section.is-side{flex-direction:row;align-items:baseline;gap:8px}.label-section.is-side .radio-description{margin-top:0}.radio-description{font-size:0.75rem;opacity:0.7;font-weight:400;line-height:1.1;margin-top:2px;color:var(--ui-radio-description)}.radio-input-wrapper{flex-shrink:0;overflow:visible}.radio-input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none}.radio-circle{position:relative;display:flex;align-items:center;justify-content:center;border:2px solid var(--ui-radio-border);background:var(--ui-radio-bg);border-radius:50%;transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);box-sizing:border-box;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.radio-circle .glow-layer{position:absolute;inset:-4px;background:currentColor;opacity:0;filter:blur(12px);transition:opacity 0.4s ease;border-radius:inherit;z-index:-1;pointer-events:none}.radio-glow.radio-checked .radio-circle .glow-layer{opacity:0.4}.radio-xxxs .radio-circle{width:12px;height:12px}.radio-xxxs .radio-dot{width:6px;height:6px}.radio-xxxs .radio-label-text{font-size:11px;line-height:16px}.radio-xxs .radio-circle{width:14px;height:14px}.radio-xxs .radio-dot{width:7px;height:7px}.radio-xxs .radio-label-text{font-size:12px;line-height:18px}.radio-xs .radio-circle{width:16px;height:16px}.radio-xs .radio-dot{width:8px;height:8px}.radio-xs .radio-label-text{font-size:13px;line-height:20px}.radio-sm .radio-circle{width:18px;height:18px}.radio-sm .radio-dot{width:9px;height:9px}.radio-sm .radio-label-text{font-size:14px;line-height:20px}.radio-md .radio-circle{width:20px;height:20px}.radio-md .radio-dot{width:10px;height:10px}.radio-md .radio-label-text{font-size:15px;line-height:24px}.radio-lg .radio-circle{width:24px;height:24px}.radio-lg .radio-dot{width:12px;height:12px}.radio-lg .radio-label-text{font-size:16px;line-height:28px}.radio-xl .radio-circle{width:28px;height:28px}.radio-xl .radio-dot{width:14px;height:14px}.radio-xl .radio-label-text{font-size:18px;line-height:32px}.radio-xxl .radio-circle{width:32px;height:32px;border-radius:50% !important}.radio-xxl .radio-dot{width:16px;height:16px}.radio-xxl .radio-label-text{font-size:20px;line-height:36px}.radio-xxxl .radio-circle{width:40px;height:40px;border-radius:50% !important}.radio-xxxl .radio-dot{width:20px;height:20px}.radio-xxxl .radio-label-text{font-size:24px;line-height:44px}.radio-dot-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;transform:scale(0);transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none}.radio-dot-container.radio-dot-visible{opacity:1;transform:scale(1)}.radio-dot{border-radius:50%;background:currentColor}.custom-radio-image{width:100%;height:100%;object-fit:contain;border-radius:50%;padding:4px}.custom-icon{display:flex;align-items:center;justify-content:center;font-size:12px;color:currentColor}.radio-animate .radio-checked .radio-dot,.radio-animate .radio-checked .custom-icon{animation:radio-pop 0.3s ease}@keyframes radio-pop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}.radio-variant-bordered .radio-label{padding:12px 16px;border:1px solid var(--border-color);border-radius:12px;transition:all 0.2s ease;width:100%}.radio-variant-bordered .radio-label:hover:not(.radio-disabled){border-color:currentColor;background:rgba(0, 0, 0, 0.02)}.radio-variant-bordered.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.05);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.radio-variant-underlined .radio-label{padding:12px 4px;border-bottom:2px solid transparent;transition:all 0.2s ease;border-radius:0;width:100%;box-sizing:border-box}.radio-variant-underlined.radio-checked .radio-label{border-bottom-color:currentColor}.radio-variant-card .radio-label{padding:20px;border:2px solid var(--border-color);border-radius:16px;background:var(--surface-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 6px rgba(0, 0, 0, 0.02);width:100%;box-sizing:border-box}.radio-variant-card .radio-label:hover:not(.radio-disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);border-color:var(--border-color-hover, #cbd5e1)}.radio-variant-card.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.02);box-shadow:0 12px 32px rgba(0, 0, 0, 0.1)}.radio-variant-card.radio-checked:hover .radio-label{transform:translateY(-2px)}.radio-variant-glass .radio-circle{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border-color:rgba(255, 255, 255, 0.2) !important;border-width:1.5px}.radio-variant-glass.radio-checked .radio-circle{background:currentColor !important;backdrop-filter:none}.radio-variant-raised .radio-circle{border-color:rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05) !important}.radio-skeleton{pointer-events:none}.radio-skeleton .radio-circle{background:var(--bg-primary, #e5e7eb);border-color:var(--border-default, #e5e7eb) !important}.radio-skeleton .radio-label-text,.radio-skeleton .radio-description{background:var(--bg-primary, #e5e7eb);color:transparent !important;border-radius:4px;width:fit-content;min-width:120px}.radio-skeleton .radio-description{min-width:180px}.radio-skeleton .radio-label{position:relative;overflow:hidden}.radio-skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:radio-shimmer 1.5s infinite}@keyframes radio-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.radio-primary .radio-circle{border-color:var(--color-primary, #93c5fd)}.radio-primary .radio-checked .radio-circle{border-color:var(--primary-color);color:var(--primary-color)}.radio-secondary .radio-circle{border-color:var(--border-strong, #d1d5db)}.radio-secondary .radio-checked .radio-circle{border-color:var(--color-primary, #6b7280);color:var(--text-muted, #6b7280)}.radio-success .radio-circle{border-color:var(--color-success, #86efac)}.radio-success .radio-checked .radio-circle{border-color:var(--color-success, #16a34a);color:var(--color-success, #16a34a)}.radio-danger .radio-circle{border-color:var(--color-danger, #fca5a5)}.radio-danger .radio-checked .radio-circle{border-color:var(--color-danger-hover, #dc2626);color:var(--color-danger-hover, #dc2626)}.radio-warning .radio-circle{border-color:var(--color-danger, #fcd34d)}.radio-warning .radio-checked .radio-circle{border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b)}.radio-info .radio-circle{border-color:var(--color-primary, #67e8f9)}.radio-info .radio-checked .radio-circle{border-color:var(--color-info-hover, #0891b2);color:var(--color-info-hover, #0891b2)}.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px currentColor}.radio-primary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #3dcd58)}.radio-secondary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-primary, #6b7280)}.radio-success.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #16a34a)}.radio-danger.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-danger-hover, #dc2626)}.radio-warning.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-warning, #f59e0b)}.radio-info.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-info-hover, #0891b2)}.radio-hovered:not(.radio-disabled):not(.radio-readonly) .radio-circle{border-color:currentColor;box-shadow:0 0 0 4px rgba(0, 0, 0, 0.05)}.radio-primary.radio-hovered .radio-circle{border-color:var(--color-success, #3dcd58)}.radio-secondary.radio-hovered .radio-circle{border-color:var(--color-primary, #6b7280)}.radio-success.radio-hovered .radio-circle{border-color:var(--color-success, #16a34a)}.radio-danger.radio-hovered .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-warning.radio-hovered .radio-circle{border-color:var(--color-warning, #f59e0b)}.radio-info.radio-hovered .radio-circle{border-color:var(--color-info-hover, #0891b2)}.radio-ripple .radio-circle::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%, -50%) scale(0);background:rgba(0, 0, 0, 0.1);pointer-events:none}.radio-ripple .radio-input:active~.radio-circle::before{animation:ripple 0.6s ease}@keyframes ripple{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(3);opacity:0}}.radio-label-content{display:flex;flex-direction:column;gap:4px}.radio-label-text{color:var(--ui-radio-label);font-weight:500;line-height:1.4}.radio-description{color:var(--ui-radio-description);font-size:0.875rem;line-height:1.4}.radio-invalid .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-is-button{width:100%;height:100%;overflow:inherit}.radio-is-button .radio-label{padding:8px 16px;justify-content:center;background:var(--surface-color);transition:all 0.2s ease;width:100%;height:100%;border-radius:inherit}.radio-is-button .radio-label:hover:not(.radio-disabled){background:var(--bg-secondary, #f3f4f6)}.radio-is-button .radio-circle{margin-inline-end:8px;transform:scale(0.85)}.radio-is-button.radio-checked .radio-label{background:var(--primary-color);color:var(--color-primary-text, #ffffff);z-index:1;border-color:var(--primary-color)}.radio-is-button.radio-secondary.radio-checked .radio-label{background:var(--color-primary, #6b7280);border-color:var(--color-primary, #6b7280)}.radio-is-button.radio-success.radio-checked .radio-label{background:var(--color-success, #16a34a);border-color:var(--color-success, #16a34a)}.radio-is-button.radio-danger.radio-checked .radio-label{background:var(--color-danger-hover, #dc2626);border-color:var(--color-danger-hover, #dc2626)}.radio-is-button.radio-warning.radio-checked .radio-label{background:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b)}.radio-is-button.radio-info.radio-checked .radio-label{background:var(--color-info-hover, #0891b2);border-color:var(--color-info-hover, #0891b2)}.radio-is-button.radio-disabled .radio-label{background:var(--bg-primary, #f9fafb);color:var(--text-muted, #9ca3af)}`;
|
|
788
|
+
const radioCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.radio-badge{display:inline-block;min-width:18px;height:18px;padding:0 6px;background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);font-size:10px;font-weight:700;border-radius:9px;margin-inline-start:8px;vertical-align:middle;text-align:center;line-height:18px;box-shadow:0 2px 4px rgba(var(--color-success-rgb, 61, 205, 88), 0.2)}[class*=radio-reveal-]{opacity:0;animation-fill-mode:forwards;animation-delay:var(--reveal-delay, 0ms)}.radio-reveal-fade-in{animation:radio-fade-in 0.6s ease-out forwards}.radio-reveal-slide-up{animation:radio-slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards}.radio-reveal-zoom{animation:radio-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}@keyframes radio-fade-in{from{opacity:0}to{opacity:1}}@keyframes radio-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes radio-zoom{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.radio-tooltip{position:absolute;background:var(--bg-primary, #1f2937);color:var(--text-standard, #ffffff);padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10}.radio-input-wrapper:hover .radio-tooltip{opacity:1}.radio-tooltip-top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-left{inset-inline-end:calc(100% + 10px);top:50%;transform:translateY(-50%)}.radio-tooltip-right{inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%)}:host{display:block;overflow:hidden;--ui-radio-border:var(--border-strong, #94a3b8);--ui-radio-bg:var(--bg-primary, #ffffff);--ui-radio-label:var(--label-color, inherit);--ui-radio-description:var(--label-subtitle-color, inherit);--ui-radio-circle-hover:rgba(0, 0, 0, 0.05)}:host-context(.dark),:host-context([data-theme=dark]),:host-context([data-theme=violet]),:host-context([data-theme=pink]),:host-context([data-theme=blue]),:host-context([data-theme=green]),:host(.dark){--ui-radio-border:var(--border-default, #64748b);--ui-radio-bg:var(--bg-secondary, #111827);--ui-radio-circle-hover:rgba(255, 255, 255, 0.05);--ui-radio-label:var(--label-color, #f1f5f9);--ui-radio-description:var(--label-subtitle-color, #cbd5e1)}.radio-container{display:inline-flex;flex-direction:column;width:100%;box-sizing:border-box;font-family:inherit;color:inherit}.radio-container.radio-rtl{direction:rtl}.radio-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;position:relative;box-sizing:border-box;flex-shrink:0;overflow:visible;}.radio-label *{box-sizing:border-box}.radio-container.radio-disabled .radio-label{cursor:not-allowed;opacity:0.6}.radio-container.radio-readonly .radio-label{cursor:default}.label-section{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}.label-section.is-side{flex-direction:row;align-items:baseline;gap:8px}.label-section.is-side .radio-description{margin-top:0}.radio-description{font-size:0.75rem;opacity:0.7;font-weight:400;line-height:1.1;margin-top:2px;color:var(--ui-radio-description)}.radio-input-wrapper{flex-shrink:0;overflow:visible}.radio-input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none}.radio-circle{position:relative;display:flex;align-items:center;justify-content:center;border:2px solid var(--ui-radio-border);background:var(--ui-radio-bg);border-radius:50%;transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);box-sizing:border-box;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.radio-circle .glow-layer{position:absolute;inset:-4px;background:currentColor;opacity:0;filter:blur(12px);transition:opacity 0.4s ease;border-radius:inherit;z-index:-1;pointer-events:none}.radio-glow.radio-checked .radio-circle .glow-layer{opacity:0.4}.radio-xxxs .radio-circle{width:12px;height:12px}.radio-xxxs .radio-dot{width:6px;height:6px}.radio-xxxs .radio-label-text{font-size:11px;line-height:16px}.radio-xxs .radio-circle{width:14px;height:14px}.radio-xxs .radio-dot{width:7px;height:7px}.radio-xxs .radio-label-text{font-size:12px;line-height:18px}.radio-xs .radio-circle{width:16px;height:16px}.radio-xs .radio-dot{width:8px;height:8px}.radio-xs .radio-label-text{font-size:13px;line-height:20px}.radio-sm .radio-circle{width:18px;height:18px}.radio-sm .radio-dot{width:9px;height:9px}.radio-sm .radio-label-text{font-size:14px;line-height:20px}.radio-md .radio-circle{width:20px;height:20px}.radio-md .radio-dot{width:10px;height:10px}.radio-md .radio-label-text{font-size:15px;line-height:24px}.radio-lg .radio-circle{width:24px;height:24px}.radio-lg .radio-dot{width:12px;height:12px}.radio-lg .radio-label-text{font-size:16px;line-height:28px}.radio-xl .radio-circle{width:28px;height:28px}.radio-xl .radio-dot{width:14px;height:14px}.radio-xl .radio-label-text{font-size:18px;line-height:32px}.radio-xxl .radio-circle{width:32px;height:32px;border-radius:50% !important}.radio-xxl .radio-dot{width:16px;height:16px}.radio-xxl .radio-label-text{font-size:20px;line-height:36px}.radio-xxxl .radio-circle{width:40px;height:40px;border-radius:50% !important}.radio-xxxl .radio-dot{width:20px;height:20px}.radio-xxxl .radio-label-text{font-size:24px;line-height:44px}.radio-dot-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;transform:scale(0);transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none}.radio-dot-container.radio-dot-visible{opacity:1;transform:scale(1)}.radio-dot{border-radius:50%;background:currentColor}.custom-radio-image{width:100%;height:100%;object-fit:contain;border-radius:50%;padding:4px}.custom-icon{display:flex;align-items:center;justify-content:center;font-size:12px;color:currentColor}.radio-animate .radio-checked .radio-dot,.radio-animate .radio-checked .custom-icon{animation:radio-pop 0.3s ease}@keyframes radio-pop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}.radio-variant-bordered .radio-label{padding:12px 16px;border:1px solid var(--border-color);border-radius:12px;transition:all 0.2s ease;width:100%}.radio-variant-bordered .radio-label:hover:not(.radio-disabled){border-color:currentColor;background:rgba(0, 0, 0, 0.02)}.radio-variant-bordered.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.05);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.radio-variant-underlined .radio-label{padding:12px 4px;border-bottom:2px solid transparent;transition:all 0.2s ease;border-radius:0;width:100%;box-sizing:border-box}.radio-variant-underlined.radio-checked .radio-label{border-bottom-color:currentColor}.radio-variant-card .radio-label{padding:20px;border:2px solid var(--border-color);border-radius:16px;background:var(--surface-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 6px rgba(0, 0, 0, 0.02);width:100%;box-sizing:border-box}.radio-variant-card .radio-label:hover:not(.radio-disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);border-color:var(--border-color-hover, #cbd5e1)}.radio-variant-card.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.02);box-shadow:0 12px 32px rgba(0, 0, 0, 0.1)}.radio-variant-card.radio-checked:hover .radio-label{transform:translateY(-2px)}.radio-variant-glass .radio-circle{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border-color:rgba(255, 255, 255, 0.2) !important;border-width:1.5px}.radio-variant-glass.radio-checked .radio-circle{background:currentColor !important;backdrop-filter:none}.radio-variant-raised .radio-circle{border-color:rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05) !important}.radio-skeleton{pointer-events:none}.radio-skeleton .radio-circle{background:var(--bg-primary, #e5e7eb);border-color:var(--border-default, #e5e7eb) !important}.radio-skeleton .radio-label-text,.radio-skeleton .radio-description{background:var(--bg-primary, #e5e7eb);color:transparent !important;border-radius:4px;width:fit-content;min-width:120px}.radio-skeleton .radio-description{min-width:180px}.radio-skeleton .radio-label{position:relative;overflow:hidden}.radio-skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:radio-shimmer 1.5s infinite}@keyframes radio-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.radio-primary .radio-circle{border-color:var(--color-primary, #93c5fd)}.radio-primary .radio-checked .radio-circle{border-color:var(--primary-color);color:var(--primary-color)}.radio-secondary .radio-circle{border-color:var(--border-strong, #d1d5db)}.radio-secondary .radio-checked .radio-circle{border-color:var(--color-primary, #6b7280);color:var(--text-muted, #6b7280)}.radio-success .radio-circle{border-color:var(--color-success, #86efac)}.radio-success .radio-checked .radio-circle{border-color:var(--color-success, #16a34a);color:var(--color-success, #16a34a)}.radio-danger .radio-circle{border-color:var(--color-danger, #fca5a5)}.radio-danger .radio-checked .radio-circle{border-color:var(--color-danger-hover, #dc2626);color:var(--color-danger-hover, #dc2626)}.radio-warning .radio-circle{border-color:var(--color-danger, #fcd34d)}.radio-warning .radio-checked .radio-circle{border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b)}.radio-info .radio-circle{border-color:var(--color-primary, #67e8f9)}.radio-info .radio-checked .radio-circle{border-color:var(--color-info-hover, #0891b2);color:var(--color-info-hover, #0891b2)}.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px currentColor}.radio-primary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #3dcd58)}.radio-secondary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-primary, #6b7280)}.radio-success.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #16a34a)}.radio-danger.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-danger-hover, #dc2626)}.radio-warning.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-warning, #f59e0b)}.radio-info.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-info-hover, #0891b2)}.radio-hovered:not(.radio-disabled):not(.radio-readonly) .radio-circle{border-color:currentColor;box-shadow:0 0 0 4px rgba(0, 0, 0, 0.05)}.radio-primary.radio-hovered .radio-circle{border-color:var(--color-success, #3dcd58)}.radio-secondary.radio-hovered .radio-circle{border-color:var(--color-primary, #6b7280)}.radio-success.radio-hovered .radio-circle{border-color:var(--color-success, #16a34a)}.radio-danger.radio-hovered .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-warning.radio-hovered .radio-circle{border-color:var(--color-warning, #f59e0b)}.radio-info.radio-hovered .radio-circle{border-color:var(--color-info-hover, #0891b2)}.radio-ripple .radio-circle::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%, -50%) scale(0);background:rgba(0, 0, 0, 0.1);pointer-events:none}.radio-ripple .radio-input:active~.radio-circle::before{animation:ripple 0.6s ease}@keyframes ripple{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(3);opacity:0}}.radio-label-content{display:flex;flex-direction:column;gap:4px}.radio-label-text{color:var(--ui-radio-label);font-weight:500;line-height:1.4}.radio-description{color:var(--ui-radio-description);font-size:0.875rem;line-height:1.4}.radio-invalid .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-is-button{width:100%;height:100%;overflow:inherit}.radio-is-button .radio-label{padding:8px 16px;justify-content:center;background:var(--surface-color);transition:all 0.2s ease;width:100%;height:100%;border-radius:inherit}.radio-is-button .radio-label:hover:not(.radio-disabled){background:var(--bg-secondary, #f3f4f6)}.radio-is-button .radio-circle{margin-inline-end:8px;transform:scale(0.85)}.radio-is-button.radio-checked .radio-label{background:var(--primary-color);color:var(--color-primary-text, #ffffff);z-index:1;border-color:var(--primary-color)}.radio-is-button.radio-secondary.radio-checked .radio-label{background:var(--color-primary, #6b7280);border-color:var(--color-primary, #6b7280)}.radio-is-button.radio-success.radio-checked .radio-label{background:var(--color-success, #16a34a);border-color:var(--color-success, #16a34a)}.radio-is-button.radio-danger.radio-checked .radio-label{background:var(--color-danger-hover, #dc2626);border-color:var(--color-danger-hover, #dc2626)}.radio-is-button.radio-warning.radio-checked .radio-label{background:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b)}.radio-is-button.radio-info.radio-checked .radio-label{background:var(--color-info-hover, #0891b2);border-color:var(--color-info-hover, #0891b2)}.radio-is-button.radio-disabled .radio-label{background:var(--bg-primary, #f9fafb);color:var(--text-muted, #9ca3af)}`;
|
|
789
789
|
|
|
790
790
|
const Radio = class {
|
|
791
791
|
internals;
|
|
@@ -978,14 +978,14 @@ const Radio = class {
|
|
|
978
978
|
'radio-checked': this.checked,
|
|
979
979
|
'radio-ripple': this.rippleEffect && !this.disabled,
|
|
980
980
|
};
|
|
981
|
-
return (h("div", { key: '
|
|
981
|
+
return (h("div", { key: '3abf98f57fcc73d239e1139500693581f76cb5af', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: '1996220a75aed7b29913bffe6ab70fe132702d07', class: "radio-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: '333a70165b3fcc79587fb722386c1c16ac1ae10c', class: radioClasses }, h("input", { key: 'e314964bafbb1db4f06a1b322ff211a070c50c23', type: "radio", class: "radio-input", checked: this.checked, disabled: this.disabled || this.skeleton, readonly: this.readonly, value: this.value, name: this.name, tabindex: this.radioTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: el => this.inputElement = el }), h("div", { key: 'c1b86631f08cf92e75783527d79b2cff3505ed37', class: "radio-circle" }, h("div", { key: 'b4da276c391006054977bf87ad772df9d97888a8', class: "glow-layer" }), this.renderDot()), this.badge && !this.skeleton && h("span", { key: '088b7d455d8720ea4686b1c8f7395da7add5650c', class: "radio-badge" }, this.badge), this.tooltip && !this.skeleton && (h("div", { key: 'be89fae1312be5703e3d74f128da5281e8a93065', class: `radio-tooltip radio-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel(), this.skeleton && h("div", { key: '9309804190940eef047ac4e349f4cd19dab62861', class: "radio-skeleton-shimmer" })), (this.invalid || !this.internals.validity.valid) && (h("div", { key: '83bde20ce3a0c825c3f7bfe58a963272df6ade2f', class: "radio-error-message", role: "alert" }, this.internals.validationMessage || 'Selection required'))));
|
|
982
982
|
}
|
|
983
983
|
static get delegatesFocus() { return true; }
|
|
984
984
|
static get formAssociated() { return true; }
|
|
985
985
|
};
|
|
986
986
|
Radio.style = radioCss();
|
|
987
987
|
|
|
988
|
-
const ratingCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block;--rating-primary:var(--color-primary, #10b981);--rating-warning:var(--color-warning, #f59e0b);--rating-success:var(--color-success, #10b981);--rating-danger:var(--color-danger, #ef4444)}.rating-container{display:inline-flex;flex-direction:column;gap:12px;user-select:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.rating-container.rating-victory .rating-item-active:last-child{animation:rating-victory-pulse 0.8s cubic-bezier(0.4, 0, 0.2, 1)}.rating-container.rating-victory .rating-item-active .rating-icon-container::after{content:"";position:absolute;width:6px;height:6px;background:currentColor;border-radius:50%;filter:blur(2px);animation:rating-particle-burst 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;box-shadow:10px -20px 0 0 currentColor, -15px -25px 0 0 currentColor, 20px -30px 0 0 currentColor}.rating-container.rating-glow .rating-item-active .rating-icon-fill{filter:drop-shadow(0 0 8px currentColor);animation:rating-shimmer 2s infinite linear}@keyframes rating-shimmer{0%{opacity:0.8}50%{opacity:1}100%{opacity:0.8}}.rating-items{display:flex;align-items:center;gap:8px}.rating-rtl .rating-items{flex-direction:row-reverse}.rating-item{background:none;border:none;padding:0;margin:0;cursor:pointer;outline:none;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:flex;align-items:center;justify-content:center;position:relative}.rating-item:hover:not(:disabled){transform:scale(1.25);z-index:2}.rating-item.rating-item-active{transform:scale(1.15);z-index:5}.rating-item.rating-item-selected{transform:scale(1.3);z-index:10}.rating-item.rating-item-emoji{background:var(--bg-secondary, #f1f5f9);border-radius:50%;padding:10px;font-size:1.5em;filter:grayscale(1);opacity:0.5;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.02)}.rating-item.rating-item-emoji.rating-item-active,.rating-item.rating-item-emoji.rating-item-selected{filter:grayscale(0);opacity:1;background:var(--bg-primary, #ffffff);transform:scale(1.3) !important;box-shadow:0 8px 16px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.8);z-index:20}.rating-item.rating-item-emoji .emoji-display{transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:inline-block}.rating-item:disabled{cursor:not-allowed;opacity:0.5}.rating-icon-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px}.rating-size-xxxs .rating-icon-container{width:14px;height:14px}.rating-size-xxs .rating-icon-container{width:18px;height:18px}.rating-size-xs .rating-icon-container{width:22px;height:22px}.rating-size-sm .rating-icon-container{width:26px;height:26px}.rating-size-md .rating-icon-container{width:34px;height:34px}.rating-size-lg .rating-icon-container{width:44px;height:44px}.rating-size-xl .rating-icon-container{width:56px;height:56px}.rating-size-xxl .rating-icon-container{width:72px;height:72px}.rating-size-xxxl .rating-icon-container{width:96px;height:96px}.rating-icon-bg{color:var(--text-muted, #94a3b8);opacity:0.4 !important;transition:all 0.3s;display:block;width:100%;height:100%;position:absolute;top:0;left:0}.rating-glass .rating-icon-bg{color:rgba(255, 255, 255, 0.4);opacity:0.5}.rating-icon-bg.img,.rating-icon-bg img{filter:grayscale(100%);opacity:0.5}.rating-icon-fill{position:absolute;top:0;left:0;height:100%;width:0%;overflow:hidden;color:var(--rating-active-color, var(--color-warning, #f59e0b));transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.rating-icon-fill ui-icon,.rating-icon-fill img{display:block;position:absolute;top:0;left:0;width:34px;height:34px;flex-shrink:0}.rating-size-xxxs .rating-icon-fill ui-icon,.rating-size-xxxs .rating-icon-fill img{width:14px;height:14px}.rating-size-xxs .rating-icon-fill ui-icon,.rating-size-xxs .rating-icon-fill img{width:18px;height:18px}.rating-size-xs .rating-icon-fill ui-icon,.rating-size-xs .rating-icon-fill img{width:22px;height:22px}.rating-size-sm .rating-icon-fill ui-icon,.rating-size-sm .rating-icon-fill img{width:26px;height:26px}.rating-size-md .rating-icon-fill ui-icon,.rating-size-md .rating-icon-fill img{width:34px;height:34px}.rating-size-lg .rating-icon-fill ui-icon,.rating-size-lg .rating-icon-fill img{width:44px;height:44px}.rating-size-xl .rating-icon-fill ui-icon,.rating-size-xl .rating-icon-fill img{width:56px;height:56px}.rating-size-xxl .rating-icon-fill ui-icon,.rating-size-xxl .rating-icon-fill img{width:72px;height:72px}.rating-size-xxxl .rating-icon-fill ui-icon,.rating-size-xxxl .rating-icon-fill img{width:96px;height:96px}.rating-icon-fill img{filter:none;opacity:1;max-width:none}.rating-item-smiley{background:rgba(var(--text-standard-rgb, 128, 128, 128), 0.08);border:1px solid rgba(var(--text-standard-rgb, 128, 128, 128), 0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;cursor:pointer}.rating-size-xxxs .rating-item-smiley{padding:4px}.rating-size-xxs .rating-item-smiley{padding:5px}.rating-size-xs .rating-item-smiley{padding:6px}.rating-size-sm .rating-item-smiley{padding:8px}.rating-size-md .rating-item-smiley{padding:10px}.rating-size-lg .rating-item-smiley{padding:12px}.rating-size-xl .rating-item-smiley{padding:16px}.rating-size-xxl .rating-item-smiley{padding:20px}.rating-size-xxxl .rating-item-smiley{padding:24px}.rating-item-smiley.rating-item-active,.rating-item-smiley.rating-item-selected{background:rgba(var(--primary-rgb, 139, 92, 246), 0.15);transform:scale(1.15);color:var(--rating-active-color);box-shadow:0 0 0 4px rgba(var(--primary-rgb, 139, 92, 246), 0.05), 0 4px 12px rgba(0, 0, 0, 0.05)}.rating-glass .rating-item-smiley{background:rgba(255, 255, 255, 0.05)}.rating-glass .rating-item-smiley.rating-item-selected{background:rgba(255, 255, 255, 0.15)}.rating-item-thumb{padding:10px;background:var(--bg-primary, #f8fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:12px}.rating-item-thumb.rating-item-active{background:var(--bg-primary, #ffffff);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);border-color:var(--rating-active-color)}.rating-item-thumb.rating-item-thumb-up:hover:not(:disabled){color:var(--rating-success);border-color:var(--rating-success)}.rating-item-thumb.rating-item-thumb-down:hover:not(:disabled){color:var(--rating-danger);border-color:var(--rating-danger)}.smiley-item-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.rating-size-lg .smiley-item-wrapper{gap:12px}.rating-size-xl .smiley-item-wrapper{gap:16px}.smiley-label{font-size:11px;font-weight:700;color:var(--rating-active-color, var(--color-success, #10b981));text-transform:capitalize;letter-spacing:-0.2px;white-space:nowrap}.rating-size-lg .smiley-label{font-size:13px}.rating-size-xl .smiley-label{font-size:15px}.rating-total-reviews{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px;color:var(--color-primary, #94a3b8);font-size:11px;font-weight:500;font-style:italic}.rating-rtl .rating-total-reviews{flex-direction:row-reverse}.rating-total-reviews .review-dot{opacity:0.5}.rating-primary{--rating-active-color:var(--rating-primary)}.rating-warning{--rating-active-color:var(--rating-warning)}.rating-success{--rating-active-color:var(--rating-success)}.rating-danger{--rating-active-color:var(--rating-danger)}.rating-size-xxxs .rating-icon-container,.rating-size-xxxs .rating-item-smiley{width:14px;height:14px}.rating-size-xxxs ui-icon{--size:14px}.rating-size-xxxs img{width:14px;height:14px}.rating-size-xxs .rating-icon-container,.rating-size-xxs .rating-item-smiley{width:18px;height:18px}.rating-size-xxs ui-icon{--size:18px}.rating-size-xxs img{width:18px;height:18px}.rating-size-xs .rating-icon-container,.rating-size-xs .rating-item-smiley{width:22px;height:22px}.rating-size-xs ui-icon{--size:22px}.rating-size-xs img{width:22px;height:22px}.rating-size-sm .rating-icon-container,.rating-size-sm .rating-item-smiley{width:26px;height:26px}.rating-size-sm ui-icon{--size:26px}.rating-size-sm img{width:26px;height:26px}.rating-size-md .rating-icon-container,.rating-size-md .rating-item-smiley{width:34px;height:34px}.rating-size-md ui-icon{--size:34px}.rating-size-md img{width:34px;height:34px}.rating-size-lg .rating-icon-container,.rating-size-lg .rating-item-smiley{width:44px;height:44px}.rating-size-lg ui-icon{--size:44px}.rating-size-lg img{width:44px;height:44px}.rating-size-xl .rating-icon-container,.rating-size-xl .rating-item-smiley{width:56px;height:56px}.rating-size-xl ui-icon{--size:56px}.rating-size-xl img{width:56px;height:56px}.rating-size-xxl .rating-icon-container,.rating-size-xxl .rating-item-smiley{width:72px;height:72px}.rating-size-xxl ui-icon{--size:72px}.rating-size-xxl img{width:72px;height:72px}.rating-size-xxxl .rating-icon-container,.rating-size-xxxl .rating-item-smiley{width:96px;height:96px}.rating-size-xxxl ui-icon{--size:96px}.rating-size-xxxl img{width:96px;height:96px}.rating-glass{background:rgba(255, 255, 255, 0.05);backdrop-filter:blur(12px);padding:16px;border-radius:16px;border:1px solid rgba(255, 255, 255, 0.1);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.rating-raised{background:var(--bg-primary, #f8fafc);padding:20px;border-radius:20px;box-shadow:8px 8px 16px rgba(0, 0, 0, 0.05), -4px -4px 12px var(--bg-primary, #ffffff);border:1px solid rgba(0, 0, 0, 0.02)}@keyframes rating-particle-burst{0%{transform:scale(0);opacity:1}100%{transform:scale(1.5) translateY(-60px);opacity:0}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes rating-victory-pulse{from{transform:scale(1.1);filter:drop-shadow(0 0 0px var(--rating-active-color))}to{transform:scale(1.4);filter:drop-shadow(0 0 12px var(--rating-active-color))}}.rating-items-container{display:flex;align-items:center;gap:24px}.rating-summary{display:flex;align-items:center;gap:16px}.rating-summary .summary-divider{width:1px;height:24px;background:var(--bg-primary, #e2e8f0)}.rating-size-lg .rating-summary .summary-divider,.rating-size-xl .rating-summary .summary-divider{height:32px}.rating-summary .summary-content{display:flex;flex-direction:column;justify-content:center;line-height:1.2}.rating-summary .summary-content .summary-label{font-size:14px;font-weight:800;color:var(--rating-active-color, #1e293b);margin:0}.rating-summary .summary-content .summary-value{font-size:12px;font-weight:600;color:var(--rating-active-color, var(--color-success, #10b981));opacity:0.6;margin:0}.rating-summary-bottom{margin-top:12px;justify-content:center}.rating-summary-bottom .summary-divider{display:none}.rating-summary-bottom .summary-content{flex-direction:row;align-items:center;gap:8px}.rating-value{display:flex;flex-direction:column;align-items:center;gap:2px}.rating-label{font-size:13px;font-weight:700;color:var(--rating-active-color);text-transform:uppercase;letter-spacing:0.5px}.rating-number{font-size:11px;font-weight:500;color:var(--color-primary, #94a3b8)}.rating-description{color:var(--color-primary, #94a3b8);font-size:10px;font-weight:400;line-height:1.4;opacity:0.8;max-width:200px}.rating-description-side{margin-inline-start:12px;padding-inline-start:12px;border-inline-start:1px solid rgba(0, 0, 0, 0.08);display:flex;align-items:center}.rating-description-bottom{margin-top:8px;text-align:center;width:100%}.rating-victory-particle{position:absolute;width:var(--size, 6px);height:var(--size, 6px);background:var(--clr, #fbbf24);border-radius:2px;pointer-events:none;z-index:50;animation:rating-particle-burst 1s cubic-bezier(0, 0, 0.2, 1) forwards}@keyframes rating-particle-burst{0%{transform:translate(0, 0) rotate(0deg) scale(0);opacity:1}15%{transform:translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) rotate(45deg) scale(1.2)}100%{transform:translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0);opacity:0}}.rating-invalid .rating-icon-bg{color:var(--rating-danger, var(--color-danger, #ef4444));opacity:0.2}.rating-invalid .rating-icon-fill{color:var(--rating-danger, var(--color-danger, #ef4444))}.rating-invalid.rating-glow .rating-item-active{filter:drop-shadow(0 0 8px rgba(var(--color-danger-rgb, 239, 68, 68), 0.4))}.rating-helper{margin-top:8px;font-size:11px;color:var(--text-muted, #64748b);display:flex;align-items:center;gap:6px}.rating-helper.rating-error{color:var(--color-danger, #ef4444)}.rating-histogram{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle, #e2e8f0);width:100%}.histogram-row{display:flex;align-items:center;gap:12px;font-size:11px}.histogram-label{display:flex;align-items:center;gap:4px;min-width:40px;font-weight:600;color:var(--text-standard, #475569)}.histogram-bar-container{flex:1;height:8px;background:var(--bg-secondary, #f1f5f9);border-radius:4px;overflow:hidden}.histogram-bar-fill{height:100%;border-radius:4px;transition:width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.histogram-count{min-width:30px;text-align:right;font-weight:500;color:var(--text-muted, #94a3b8)}.rating-container:focus{outline:none}.rating-container:focus .rating-items{box-shadow:0 0 0 3px var(--rating-active-color, #fbbf24) 44;border-radius:8px;padding:4px;margin:-4px}`;
|
|
988
|
+
const ratingCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block;--rating-primary:var(--color-primary, #10b981);--rating-warning:var(--color-warning, #f59e0b);--rating-success:var(--color-success, #10b981);--rating-danger:var(--color-danger, #ef4444)}.rating-container{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;user-select:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.rating-container.rating-victory .rating-item-active:last-child{animation:rating-victory-pulse 0.8s cubic-bezier(0.4, 0, 0.2, 1)}.rating-container.rating-victory .rating-item-active .rating-icon-container::after{content:"";position:absolute;width:6px;height:6px;background:currentColor;border-radius:50%;filter:blur(2px);animation:rating-particle-burst 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;box-shadow:10px -20px 0 0 currentColor, -15px -25px 0 0 currentColor, 20px -30px 0 0 currentColor}.rating-container.rating-glow .rating-item-active .rating-icon-fill{filter:drop-shadow(0 0 8px currentColor);animation:rating-shimmer 2s infinite linear}@keyframes rating-shimmer{0%{opacity:0.8}50%{opacity:1}100%{opacity:0.8}}.rating-items{display:flex;align-items:center;justify-content:center;gap:8px;}.rating-items:has(.smiley-item-wrapper){display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;justify-items:center;gap:4px}.rating-rtl .rating-items{flex-direction:row-reverse}.rating-item{background:none !important;border:none !important;padding:0 !important;margin:0 !important;cursor:pointer;outline:none !important;box-shadow:none !important;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:flex;align-items:center;justify-content:center;position:relative}.rating-item:hover:not(:disabled){transform:scale(1.25);z-index:2}.rating-item.rating-item-active{transform:scale(1.15);z-index:5}.rating-item.rating-item-selected{transform:scale(1.3);z-index:10}.rating-item.rating-item-emoji{background:var(--bg-secondary, #f1f5f9) !important;border-radius:50% !important;padding:10px !important;font-size:1.5em;filter:grayscale(1);opacity:0.5;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.02) !important}.rating-item.rating-item-emoji.rating-item-active,.rating-item.rating-item-emoji.rating-item-selected{filter:grayscale(0);opacity:1;background:var(--bg-primary, #ffffff) !important;transform:scale(1.3) !important;box-shadow:0 8px 16px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;z-index:20}.rating-item.rating-item-emoji .emoji-display{transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:inline-block}.rating-item:disabled{cursor:not-allowed;opacity:0.5}.rating-icon-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px}.rating-size-xxxs .rating-icon-container{width:14px;height:14px}.rating-size-xxs .rating-icon-container{width:18px;height:18px}.rating-size-xs .rating-icon-container{width:22px;height:22px}.rating-size-sm .rating-icon-container{width:26px;height:26px}.rating-size-md .rating-icon-container{width:34px;height:34px}.rating-size-lg .rating-icon-container{width:44px;height:44px}.rating-size-xl .rating-icon-container{width:56px;height:56px}.rating-size-xxl .rating-icon-container{width:72px;height:72px}.rating-size-xxxl .rating-icon-container{width:96px;height:96px}.rating-icon-bg{color:var(--text-muted, #94a3b8);opacity:0.4 !important;transition:all 0.3s;display:block;width:100% !important;height:100% !important;position:absolute;top:0;left:0}.rating-glass .rating-icon-bg{color:rgba(255, 255, 255, 0.4);opacity:0.5}.rating-icon-bg.img,.rating-icon-bg img{filter:grayscale(100%);opacity:0.5}.rating-icon-fill{position:absolute;top:0;left:0;height:100%;width:0%;overflow:hidden;color:var(--rating-active-color, var(--color-warning, #f59e0b));transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.rating-icon-fill ui-icon,.rating-icon-fill img{display:block;position:absolute;top:0;left:0;width:34px !important;height:34px !important;flex-shrink:0}.rating-size-xxxs .rating-icon-fill ui-icon,.rating-size-xxxs .rating-icon-fill img{width:14px !important;height:14px !important}.rating-size-xxs .rating-icon-fill ui-icon,.rating-size-xxs .rating-icon-fill img{width:18px !important;height:18px !important}.rating-size-xs .rating-icon-fill ui-icon,.rating-size-xs .rating-icon-fill img{width:22px !important;height:22px !important}.rating-size-sm .rating-icon-fill ui-icon,.rating-size-sm .rating-icon-fill img{width:26px !important;height:26px !important}.rating-size-md .rating-icon-fill ui-icon,.rating-size-md .rating-icon-fill img{width:34px !important;height:34px !important}.rating-size-lg .rating-icon-fill ui-icon,.rating-size-lg .rating-icon-fill img{width:44px !important;height:44px !important}.rating-size-xl .rating-icon-fill ui-icon,.rating-size-xl .rating-icon-fill img{width:56px !important;height:56px !important}.rating-size-xxl .rating-icon-fill ui-icon,.rating-size-xxl .rating-icon-fill img{width:72px !important;height:72px !important}.rating-size-xxxl .rating-icon-fill ui-icon,.rating-size-xxxl .rating-icon-fill img{width:96px !important;height:96px !important}.rating-icon-fill img{filter:none;opacity:1;max-width:none}.rating-item-smiley{background:none !important;border:none !important;box-shadow:none !important;outline:none !important;padding:0 !important;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;cursor:pointer;width:auto !important;height:auto !important}.rating-size-xxxs .rating-item-smiley{padding:0 !important}.rating-size-xxs .rating-item-smiley{padding:0 !important}.rating-size-xs .rating-item-smiley{padding:0 !important}.rating-size-sm .rating-item-smiley{padding:0 !important}.rating-size-md .rating-item-smiley{padding:0 !important}.rating-size-lg .rating-item-smiley{padding:0 !important}.rating-size-xl .rating-item-smiley{padding:0 !important}.rating-size-xxl .rating-item-smiley{padding:0 !important}.rating-size-xxxl .rating-item-smiley{padding:0 !important}.rating-item-smiley{}.rating-item-smiley:hover:not(:disabled){transform:scale(1.2);z-index:2;background:none !important;border:none !important;box-shadow:none !important;outline:none !important}.rating-item-smiley.rating-item-active,.rating-item-smiley.rating-item-selected{background:none !important;transform:scale(1.2);color:var(--rating-active-color);box-shadow:none !important;border:none !important;outline:none !important;z-index:5}.rating-glass .rating-item-smiley{background:none !important}.rating-glass .rating-item-smiley.rating-item-selected{background:none !important}.rating-item-thumb{padding:0 !important;background:none !important;border:none !important;border-radius:0 !important;box-shadow:none !important;outline:none !important}.rating-item-thumb.rating-item-active{background:none !important;box-shadow:none !important;border:none !important;outline:none !important}.rating-item-thumb.rating-item-thumb-up:hover:not(:disabled){color:var(--rating-success);background:none !important;border:none !important;box-shadow:none !important;outline:none !important}.rating-item-thumb.rating-item-thumb-down:hover:not(:disabled){color:var(--rating-danger);background:none !important;border:none !important;box-shadow:none !important;outline:none !important}.smiley-item-wrapper{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px}.rating-size-xxxs .smiley-item-wrapper{min-width:30px;gap:4px}.rating-size-xxs .smiley-item-wrapper{min-width:34px;gap:4px}.rating-size-xs .smiley-item-wrapper{min-width:40px;gap:4px}.rating-size-sm .smiley-item-wrapper{min-width:46px;gap:5px}.rating-size-md .smiley-item-wrapper{min-width:52px;gap:6px}.rating-size-lg .smiley-item-wrapper{min-width:70px;gap:8px}.rating-size-xl .smiley-item-wrapper{min-width:84px;gap:10px}.rating-size-xxl .smiley-item-wrapper{min-width:100px;gap:12px}.rating-size-xxxl .smiley-item-wrapper{min-width:118px;gap:14px}.smiley-label{font-size:11px;font-weight:600;color:var(--text-secondary, #94a3b8);text-transform:capitalize;letter-spacing:-0.2px;white-space:nowrap;text-align:center;width:100%;opacity:0.55;transition:color 0.2s ease, opacity 0.2s ease, font-weight 0.2s ease;}.rating-item-smiley.rating-item-active~.smiley-label,.rating-item-smiley.rating-item-selected~.smiley-label,.rating-item-smiley.rating-item-hover~.smiley-label{color:var(--rating-active-color, var(--color-success, #10b981));opacity:1;font-weight:700}.rating-size-lg .smiley-label{font-size:12px}.rating-size-xl .smiley-label{font-size:14px}.rating-size-xxl .smiley-label{font-size:15px}.rating-total-reviews{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px;color:var(--color-primary, #94a3b8);font-size:11px;font-weight:500;font-style:italic}.rating-rtl .rating-total-reviews{flex-direction:row-reverse}.rating-total-reviews .review-dot{opacity:0.5}.rating-primary{--rating-active-color:var(--rating-primary)}.rating-warning{--rating-active-color:var(--rating-warning)}.rating-success{--rating-active-color:var(--rating-success)}.rating-danger{--rating-active-color:var(--rating-danger)}.rating-size-xxxs .rating-icon-container,.rating-size-xxxs .rating-item-smiley{width:14px;height:14px}.rating-size-xxxs ui-icon{--size:14px}.rating-size-xxxs img{width:14px;height:14px}.rating-size-xxs .rating-icon-container,.rating-size-xxs .rating-item-smiley{width:18px;height:18px}.rating-size-xxs ui-icon{--size:18px}.rating-size-xxs img{width:18px;height:18px}.rating-size-xs .rating-icon-container,.rating-size-xs .rating-item-smiley{width:22px;height:22px}.rating-size-xs ui-icon{--size:22px}.rating-size-xs img{width:22px;height:22px}.rating-size-sm .rating-icon-container,.rating-size-sm .rating-item-smiley{width:26px;height:26px}.rating-size-sm ui-icon{--size:26px}.rating-size-sm img{width:26px;height:26px}.rating-size-md .rating-icon-container,.rating-size-md .rating-item-smiley{width:34px;height:34px}.rating-size-md ui-icon{--size:34px}.rating-size-md img{width:34px;height:34px}.rating-size-lg .rating-icon-container,.rating-size-lg .rating-item-smiley{width:44px;height:44px}.rating-size-lg ui-icon{--size:44px}.rating-size-lg img{width:44px;height:44px}.rating-size-xl .rating-icon-container,.rating-size-xl .rating-item-smiley{width:56px;height:56px}.rating-size-xl ui-icon{--size:56px}.rating-size-xl img{width:56px;height:56px}.rating-size-xxl .rating-icon-container,.rating-size-xxl .rating-item-smiley{width:72px;height:72px}.rating-size-xxl ui-icon{--size:72px}.rating-size-xxl img{width:72px;height:72px}.rating-size-xxxl .rating-icon-container,.rating-size-xxxl .rating-item-smiley{width:96px;height:96px}.rating-size-xxxl ui-icon{--size:96px}.rating-size-xxxl img{width:96px;height:96px}.rating-glass{background:rgba(255, 255, 255, 0.05);backdrop-filter:blur(12px);padding:16px;border-radius:16px;border:1px solid rgba(255, 255, 255, 0.1);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.rating-raised{background:var(--bg-primary, #f8fafc);padding:20px;border-radius:20px;box-shadow:8px 8px 16px rgba(0, 0, 0, 0.05), -4px -4px 12px var(--bg-primary, #ffffff);border:1px solid rgba(0, 0, 0, 0.02)}@keyframes rating-particle-burst{0%{transform:scale(0);opacity:1}100%{transform:scale(1.5) translateY(-60px);opacity:0}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes rating-victory-pulse{from{transform:scale(1.1);filter:drop-shadow(0 0 0px var(--rating-active-color))}to{transform:scale(1.4);filter:drop-shadow(0 0 12px var(--rating-active-color))}}.rating-items-container{display:flex;align-items:center;gap:24px}.rating-summary{display:flex;align-items:center;gap:16px}.rating-summary .summary-divider{width:1px;height:24px;background:var(--bg-primary, #e2e8f0)}.rating-size-lg .rating-summary .summary-divider,.rating-size-xl .rating-summary .summary-divider{height:32px}.rating-summary .summary-content{display:flex;flex-direction:column;justify-content:center;line-height:1.2}.rating-summary .summary-content .summary-label{font-size:14px;font-weight:800;color:var(--rating-active-color, #1e293b);margin:0}.rating-summary .summary-content .summary-value{font-size:12px;font-weight:600;color:var(--rating-active-color, var(--color-success, #10b981));opacity:0.6;margin:0}.rating-summary-bottom{margin-top:12px;justify-content:center}.rating-summary-bottom .summary-divider{display:none}.rating-summary-bottom .summary-content{flex-direction:row;align-items:center;gap:8px}.rating-value{display:flex;flex-direction:column;align-items:center;gap:2px}.rating-label{font-size:13px;font-weight:700;color:var(--rating-active-color);text-transform:uppercase;letter-spacing:0.5px}.rating-number{font-size:11px;font-weight:500;color:var(--color-primary, #94a3b8)}.rating-description{color:var(--color-primary, #94a3b8);font-size:10px;font-weight:400;line-height:1.4;opacity:0.8;max-width:200px}.rating-description-side{margin-inline-start:12px;padding-inline-start:12px;border-inline-start:1px solid rgba(0, 0, 0, 0.08);display:flex;align-items:center}.rating-description-bottom{margin-top:8px;text-align:center;width:100%}.rating-victory-particle{position:absolute;width:var(--size, 6px);height:var(--size, 6px);background:var(--clr, #fbbf24);border-radius:2px;pointer-events:none;z-index:50;animation:rating-particle-burst 1s cubic-bezier(0, 0, 0.2, 1) forwards}@keyframes rating-particle-burst{0%{transform:translate(0, 0) rotate(0deg) scale(0);opacity:1}15%{transform:translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) rotate(45deg) scale(1.2)}100%{transform:translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0);opacity:0}}.rating-invalid .rating-icon-bg{color:var(--rating-danger, var(--color-danger, #ef4444));opacity:0.2}.rating-invalid .rating-icon-fill{color:var(--rating-danger, var(--color-danger, #ef4444))}.rating-invalid.rating-glow .rating-item-active{filter:drop-shadow(0 0 8px rgba(var(--color-danger-rgb, 239, 68, 68), 0.4))}.rating-helper{margin-top:8px;font-size:11px;color:var(--text-muted, #64748b);display:flex;align-items:center;gap:6px}.rating-helper.rating-error{color:var(--color-danger, #ef4444)}.rating-histogram{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle, #e2e8f0);width:100%}.histogram-row{display:flex;align-items:center;gap:12px;font-size:11px}.histogram-label{display:flex;align-items:center;gap:4px;min-width:40px;font-weight:600;color:var(--text-standard, #475569)}.histogram-bar-container{flex:1;height:8px;background:var(--bg-secondary, #f1f5f9);border-radius:4px;overflow:hidden}.histogram-bar-fill{height:100%;border-radius:4px;transition:width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.histogram-count{min-width:30px;text-align:right;font-weight:500;color:var(--text-muted, #94a3b8)}.rating-container:focus{outline:none}.rating-container:focus .rating-items{box-shadow:0 0 0 3px var(--rating-active-color, #fbbf24) 44;border-radius:8px;padding:4px;margin:-4px}`;
|
|
989
989
|
|
|
990
990
|
const Rating = class {
|
|
991
991
|
constructor(hostRef) {
|
|
@@ -1114,24 +1114,28 @@ const Rating = class {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
return [];
|
|
1116
1116
|
}
|
|
1117
|
-
handleClick = (rating) => {
|
|
1117
|
+
handleClick = (rating, event) => {
|
|
1118
1118
|
if (this.readonly || this.disabled)
|
|
1119
1119
|
return;
|
|
1120
|
+
let effectiveRating = rating;
|
|
1121
|
+
if (this.allowHalf && event) {
|
|
1122
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
1123
|
+
effectiveRating = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
|
|
1124
|
+
}
|
|
1120
1125
|
if (this.type === 'thumb') {
|
|
1121
|
-
|
|
1122
|
-
if (this.value === rating) {
|
|
1126
|
+
if (this.value === effectiveRating) {
|
|
1123
1127
|
this.value = 0;
|
|
1124
1128
|
}
|
|
1125
1129
|
else {
|
|
1126
|
-
this.value =
|
|
1130
|
+
this.value = effectiveRating;
|
|
1127
1131
|
}
|
|
1128
1132
|
}
|
|
1129
1133
|
else {
|
|
1130
|
-
if (this.clearable && this.value ===
|
|
1134
|
+
if (this.clearable && this.value === effectiveRating) {
|
|
1131
1135
|
this.value = 0;
|
|
1132
1136
|
}
|
|
1133
1137
|
else {
|
|
1134
|
-
this.value =
|
|
1138
|
+
this.value = effectiveRating;
|
|
1135
1139
|
}
|
|
1136
1140
|
}
|
|
1137
1141
|
if (this.haptic && 'vibrate' in navigator) {
|
|
@@ -1200,10 +1204,24 @@ const Rating = class {
|
|
|
1200
1204
|
this.particles = [];
|
|
1201
1205
|
}, 1500);
|
|
1202
1206
|
};
|
|
1203
|
-
handleMouseEnter = (rating) => {
|
|
1207
|
+
handleMouseEnter = (rating, event) => {
|
|
1204
1208
|
if (this.readonly || this.disabled)
|
|
1205
1209
|
return;
|
|
1206
|
-
this.
|
|
1210
|
+
if (this.allowHalf && event) {
|
|
1211
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
1212
|
+
this.hoverValue = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
|
|
1213
|
+
}
|
|
1214
|
+
else {
|
|
1215
|
+
this.hoverValue = rating;
|
|
1216
|
+
}
|
|
1217
|
+
};
|
|
1218
|
+
handleMouseMove = (rating, event) => {
|
|
1219
|
+
if (this.readonly || this.disabled || !this.allowHalf)
|
|
1220
|
+
return;
|
|
1221
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
1222
|
+
const next = (event.clientX - rect.left) < rect.width / 2 ? rating - 0.5 : rating;
|
|
1223
|
+
if (this.hoverValue !== next)
|
|
1224
|
+
this.hoverValue = next;
|
|
1207
1225
|
};
|
|
1208
1226
|
handleMouseLeave = () => {
|
|
1209
1227
|
if (this.readonly || this.disabled)
|
|
@@ -1226,7 +1244,7 @@ const Rating = class {
|
|
|
1226
1244
|
'rating-item-half': isHalf,
|
|
1227
1245
|
'rating-item-hover': isHovered,
|
|
1228
1246
|
[`rating-color-${itemColor}`]: !!itemColor,
|
|
1229
|
-
}, onClick: () => this.handleClick(i), onMouseEnter: () => this.handleMouseEnter(i), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": `Rate ${i} out of ${this.max}` }, h("div", { class: "rating-icon-container" }, this.image ? (h("img", { src: this.image, class: "rating-icon-bg", alt: "rating" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, class: "rating-icon-bg" })), h("div", { class: "rating-icon-fill", style: { width: isHalf ? '50%' : (isActive ? '100% ' : '0%') } }, this.image ? (h("img", { src: this.image, alt: "rating active" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, fill: activeFill }))))));
|
|
1247
|
+
}, onClick: (e) => this.handleClick(i, e), onMouseEnter: (e) => this.handleMouseEnter(i, e), onMouseMove: (e) => this.handleMouseMove(i, e), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": `Rate ${i} out of ${this.max}` }, h("div", { class: "rating-icon-container" }, this.image ? (h("img", { src: this.image, class: "rating-icon-bg", alt: "rating" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, class: "rating-icon-bg" })), h("div", { class: "rating-icon-fill", style: { width: isHalf ? '50%' : (isActive ? '100% ' : '0%') } }, this.image ? (h("img", { src: this.image, alt: "rating active" })) : (h("ui-icon", { name: this.iconName, color: "currentColor", library: this.iconLibrary, size: this.size, fill: activeFill }))))));
|
|
1230
1248
|
}
|
|
1231
1249
|
return items;
|
|
1232
1250
|
}
|
|
@@ -1281,13 +1299,13 @@ const Rating = class {
|
|
|
1281
1299
|
'rating-item-thumb': true,
|
|
1282
1300
|
'rating-item-active': thumbUpActive,
|
|
1283
1301
|
'rating-item-thumb-up': true,
|
|
1284
|
-
}, onClick: () => this.handleClick(1), onMouseEnter: () => this.handleMouseEnter(1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs up" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbUpActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide" })))),
|
|
1302
|
+
}, onClick: () => this.handleClick(1), onMouseEnter: () => this.handleMouseEnter(1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs up" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", size: this.size, class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbUpActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-up", color: "currentColor", library: "lucide", size: this.size })))),
|
|
1285
1303
|
h("button", { type: "button", class: {
|
|
1286
1304
|
'rating-item': true,
|
|
1287
1305
|
'rating-item-thumb': true,
|
|
1288
1306
|
'rating-item-active': thumbDownActive,
|
|
1289
1307
|
'rating-item-thumb-down': true,
|
|
1290
|
-
}, onClick: () => this.handleClick(-1), onMouseEnter: () => this.handleMouseEnter(-1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs down" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-down", library: "lucide", class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbDownActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-down", library: "lucide" })))),
|
|
1308
|
+
}, onClick: () => this.handleClick(-1), onMouseEnter: () => this.handleMouseEnter(-1), onMouseLeave: this.handleMouseLeave, disabled: this.disabled || this.readonly, "aria-label": "Thumbs down" }, h("div", { class: "rating-icon-container" }, h("ui-icon", { name: "thumbs-down", library: "lucide", size: this.size, class: "rating-icon-bg" }), h("div", { class: "rating-icon-fill", style: { width: thumbDownActive ? '100%' : '0%' } }, h("ui-icon", { name: "thumbs-down", library: "lucide", size: this.size })))),
|
|
1291
1309
|
];
|
|
1292
1310
|
}
|
|
1293
1311
|
render() {
|
|
@@ -1307,14 +1325,14 @@ const Rating = class {
|
|
|
1307
1325
|
const currentLabel = this.type === 'thumb'
|
|
1308
1326
|
? (this.value === 1 ? 'Liked' : this.value === -1 ? 'Disliked' : '')
|
|
1309
1327
|
: labels[(this.hoverValue || this.value) - 1];
|
|
1310
|
-
const descriptionElement = this.description && (h("div", { key: '
|
|
1328
|
+
const descriptionElement = this.description && (h("div", { key: '89ffcb9eb6ff980caf55a0663e2a70699e15fd2c', class: `rating-description rating-description-${this.descriptionPosition}` }, this.description));
|
|
1311
1329
|
const helperElement = (this.invalid && this.errorMessage) ? (h("div", { class: "rating-helper rating-error" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "12px" }), h("span", null, this.errorMessage))) : this.helperText ? (h("div", { class: "rating-helper" }, this.helperText)) : null;
|
|
1312
1330
|
const dynamicStyle = {
|
|
1313
1331
|
'--rating-active-color': this.activeColor || `var(--rating-${this.color})`,
|
|
1314
1332
|
'--rating-fill-color': this.activeFillColor || 'currentColor',
|
|
1315
1333
|
};
|
|
1316
1334
|
const summaryElement = (this.showSummary && currentLabel) ? (h("div", { class: `rating-summary rating-summary-${this.summaryPosition}` }, h("div", { class: "summary-divider" }), h("div", { class: "summary-content" }, h("p", { class: "summary-label" }, currentLabel), h("p", { class: "summary-value" }, (this.hoverValue || this.value).toFixed(0), " / ", this.max)))) : null;
|
|
1317
|
-
return (h("div", { key: '
|
|
1335
|
+
return (h("div", { key: '70e8a2549d236825559aff795abfe0238f47e761', class: classes, style: dynamicStyle, tabindex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, role: "group", "aria-label": "Rating component" }, h("div", { key: '98fcc1a5aa1ca18db16541257d3787b9efd84118', class: "rating-items-container" }, h("div", { key: 'e43ca0715fc16c29d45260d4afda67111db5333c', class: "rating-items" }, this.type === 'star' && this.renderStarRating(), this.type === 'smiley' && this.renderSmileyRating(), this.type === 'thumb' && this.renderThumbRating(), this.descriptionPosition === 'side' && descriptionElement), this.summaryPosition === 'side' && summaryElement), this.showValue && !this.showSummary && this.type !== 'thumb' && (h("div", { key: 'ed9c47ff5e17d3a6922bf4fa82f92770906d525c', class: "rating-value" }, currentLabel && h("span", { key: 'b2f03c3e6a02b0f95ef64c29b91b3bb58929bef8', class: "rating-label" }, currentLabel), h("span", { key: '7c84b5ac8489269655807fe6ac8b76e3e4d72a86', class: "rating-number" }, (this.hoverValue || this.value).toFixed(this.allowHalf ? 1 : 0), " / ", this.max))), this.showReviews && this.totalReviews > 0 && (h("div", { key: '50ddb5ffd3f21e4fdc89dad4499517c36fcccc38', class: "rating-total-reviews" }, h("span", { key: '1cda24daf1daba68f08347b0b0c89510a5ac5622', class: "review-dot" }, "\u2022"), h("span", { key: 'e05517a82ba1507bfbdad8c7a2d75633bcf8d791', class: "review-count" }, "(", this.totalReviews, " reviews)"))), this.descriptionPosition === 'bottom' && descriptionElement, this.summaryPosition === 'bottom' && summaryElement, this.showHistogram && this.renderHistogram(), helperElement, this.particles.map(p => (h("div", { key: p.id, class: "rating-victory-particle", style: {
|
|
1318
1336
|
'--tx': `${p.tx}px`,
|
|
1319
1337
|
'--ty': `${p.ty}px`,
|
|
1320
1338
|
'--rot': `${p.rot}deg`,
|
|
@@ -1327,492 +1345,4 @@ const Rating = class {
|
|
|
1327
1345
|
};
|
|
1328
1346
|
Rating.style = ratingCss();
|
|
1329
1347
|
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
const SkeletonLoader = class {
|
|
1333
|
-
constructor(hostRef) {
|
|
1334
|
-
registerInstance(this, hostRef);
|
|
1335
|
-
this.skeletonShow = createEvent(this, "skeletonShow");
|
|
1336
|
-
this.skeletonHide = createEvent(this, "skeletonHide");
|
|
1337
|
-
}
|
|
1338
|
-
/** ARIA label for accessibility */
|
|
1339
|
-
ariaLabel;
|
|
1340
|
-
/** ARIA live region (off, polite, assertive) */
|
|
1341
|
-
ariaLive = 'off';
|
|
1342
|
-
/** ARIA role override (status, progressbar, etc.) */
|
|
1343
|
-
ariaRole;
|
|
1344
|
-
/** Progress value (0-100) for determinate skeletons */
|
|
1345
|
-
progress;
|
|
1346
|
-
/** Show in dark mode (auto, light, dark) */
|
|
1347
|
-
dark = 'auto';
|
|
1348
|
-
/** RTL shimmer direction */
|
|
1349
|
-
rtl = false;
|
|
1350
|
-
/** Fires when skeleton is shown */
|
|
1351
|
-
skeletonShow;
|
|
1352
|
-
/** Fires when skeleton is hidden */
|
|
1353
|
-
skeletonHide;
|
|
1354
|
-
/**
|
|
1355
|
-
* Layout template to use for automatic skeleton generation.
|
|
1356
|
-
* If set to something other than 'none', the `shape` prop is overridden for the template layout.
|
|
1357
|
-
*/
|
|
1358
|
-
template = 'none';
|
|
1359
|
-
/**
|
|
1360
|
-
* Number of items to replicate (useful for lists, cards, etc.)
|
|
1361
|
-
* Default: 1
|
|
1362
|
-
*/
|
|
1363
|
-
count = 1;
|
|
1364
|
-
/**
|
|
1365
|
-
* Layout direction for replicated items ('row' or 'column')
|
|
1366
|
-
*/
|
|
1367
|
-
direction = 'column';
|
|
1368
|
-
/**
|
|
1369
|
-
* If true, animations will automatically pause when the component is not in the viewport.
|
|
1370
|
-
* Dramatically improves performance and battery life for long lists.
|
|
1371
|
-
*/
|
|
1372
|
-
lazyAnimation = true;
|
|
1373
|
-
/**
|
|
1374
|
-
* Animation speed
|
|
1375
|
-
*/
|
|
1376
|
-
speed = 'normal';
|
|
1377
|
-
/**
|
|
1378
|
-
* Color variant or custom color (hex/rgba)
|
|
1379
|
-
*/
|
|
1380
|
-
color = 'neutral';
|
|
1381
|
-
radius;
|
|
1382
|
-
/**
|
|
1383
|
-
* Stagger delay in ms between replicated items
|
|
1384
|
-
* Makes the animation feel more organic as it flows down the page.
|
|
1385
|
-
*/
|
|
1386
|
-
stagger = 0;
|
|
1387
|
-
/**
|
|
1388
|
-
* Layout gap between replicated items (e.g. '12px', '1rem')
|
|
1389
|
-
*/
|
|
1390
|
-
gap = '16px';
|
|
1391
|
-
/**
|
|
1392
|
-
* Optional explicit highlight/shimmer color for the wave animation.
|
|
1393
|
-
* If not provided, it is auto-derived from `color` by lightening it.
|
|
1394
|
-
*/
|
|
1395
|
-
highlightColor;
|
|
1396
|
-
/**
|
|
1397
|
-
* Elevation / shadow intensity (0-4) to match the UI component it mimics
|
|
1398
|
-
*/
|
|
1399
|
-
elevation = 0;
|
|
1400
|
-
/**
|
|
1401
|
-
* Shape of the skeleton
|
|
1402
|
-
*/
|
|
1403
|
-
shape = 'rectangle';
|
|
1404
|
-
/**
|
|
1405
|
-
* If true, the skeleton acts as a mask over its children.
|
|
1406
|
-
* Useful for wrapping text or components to skeletonize them seamlessly.
|
|
1407
|
-
*/
|
|
1408
|
-
mask = false;
|
|
1409
|
-
/**
|
|
1410
|
-
* If true, keeps the children visible at low opacity and blurred behind the skeleton.
|
|
1411
|
-
* Only works when `mask` is true.
|
|
1412
|
-
*/
|
|
1413
|
-
ghost = false;
|
|
1414
|
-
/**
|
|
1415
|
-
* Predefined size of the skeleton (xs, sm, md, lg, xl, 2xl)
|
|
1416
|
-
*/
|
|
1417
|
-
size = 'md';
|
|
1418
|
-
/**
|
|
1419
|
-
* Width of the skeleton
|
|
1420
|
-
*/
|
|
1421
|
-
width = '100%';
|
|
1422
|
-
/**
|
|
1423
|
-
* Height of the skeleton
|
|
1424
|
-
*/
|
|
1425
|
-
height = '20px';
|
|
1426
|
-
/**
|
|
1427
|
-
* Border radius for rounded shapes
|
|
1428
|
-
*/
|
|
1429
|
-
borderRadius = '4px';
|
|
1430
|
-
/**
|
|
1431
|
-
* Whether to show animation
|
|
1432
|
-
*/
|
|
1433
|
-
animated = true;
|
|
1434
|
-
/**
|
|
1435
|
-
* Animation type: 'pulse' or 'wave'
|
|
1436
|
-
*/
|
|
1437
|
-
animationType = 'pulse';
|
|
1438
|
-
/**
|
|
1439
|
-
* Custom class for additional styling
|
|
1440
|
-
*/
|
|
1441
|
-
customClass = '';
|
|
1442
|
-
/**
|
|
1443
|
-
* Delay in milliseconds before showing the skeleton.
|
|
1444
|
-
* Prevents "flicker" for high-speed connections.
|
|
1445
|
-
*/
|
|
1446
|
-
delay = 0;
|
|
1447
|
-
/**
|
|
1448
|
-
* Angle of the wave animation (e.g. '45deg', '90deg').
|
|
1449
|
-
* Default: '90deg' (horizontal)
|
|
1450
|
-
*/
|
|
1451
|
-
waveAngle = '90deg';
|
|
1452
|
-
/**
|
|
1453
|
-
* Duration of the wave animation cycle (e.g. '1.5s', '3s').
|
|
1454
|
-
* Default: '1.5s'
|
|
1455
|
-
*/
|
|
1456
|
-
waveSpeed = '1.5s';
|
|
1457
|
-
/**
|
|
1458
|
-
* Number of rows (lines) to render when shape is 'text'
|
|
1459
|
-
*/
|
|
1460
|
-
rows = 1;
|
|
1461
|
-
/**
|
|
1462
|
-
* Width of the last row when multi-line text is used (e.g. '60%')
|
|
1463
|
-
*/
|
|
1464
|
-
lastRowWidth = '80%';
|
|
1465
|
-
isActuallyVisible = false;
|
|
1466
|
-
isInView = true;
|
|
1467
|
-
delayTimer;
|
|
1468
|
-
observer;
|
|
1469
|
-
componentDidLoad() {
|
|
1470
|
-
if (this.lazyAnimation) {
|
|
1471
|
-
this.setupObserver();
|
|
1472
|
-
}
|
|
1473
|
-
}
|
|
1474
|
-
setupObserver() {
|
|
1475
|
-
if (typeof globalThis.IntersectionObserver === 'undefined') {
|
|
1476
|
-
this.isInView = true;
|
|
1477
|
-
return;
|
|
1478
|
-
}
|
|
1479
|
-
this.observer = new IntersectionObserver((entries) => {
|
|
1480
|
-
entries.forEach(entry => {
|
|
1481
|
-
this.isInView = entry.isIntersecting;
|
|
1482
|
-
});
|
|
1483
|
-
}, { threshold: 0.1 });
|
|
1484
|
-
if (this.el) {
|
|
1485
|
-
this.observer.observe(this.el);
|
|
1486
|
-
}
|
|
1487
|
-
}
|
|
1488
|
-
handleDelayChange() {
|
|
1489
|
-
this.handleVisibility();
|
|
1490
|
-
}
|
|
1491
|
-
componentWillLoad() {
|
|
1492
|
-
this.handleVisibility();
|
|
1493
|
-
}
|
|
1494
|
-
get el() { return getElement(this); }
|
|
1495
|
-
handleVisibility() {
|
|
1496
|
-
if (this.delay <= 0) {
|
|
1497
|
-
if (!this.isActuallyVisible)
|
|
1498
|
-
this.skeletonShow?.emit();
|
|
1499
|
-
this.isActuallyVisible = true;
|
|
1500
|
-
return;
|
|
1501
|
-
}
|
|
1502
|
-
if (this.delayTimer)
|
|
1503
|
-
clearTimeout(this.delayTimer);
|
|
1504
|
-
if (this.isActuallyVisible)
|
|
1505
|
-
this.skeletonHide?.emit();
|
|
1506
|
-
this.isActuallyVisible = false;
|
|
1507
|
-
this.delayTimer = setTimeout(() => {
|
|
1508
|
-
this.isActuallyVisible = true;
|
|
1509
|
-
this.skeletonShow?.emit();
|
|
1510
|
-
}, this.delay);
|
|
1511
|
-
}
|
|
1512
|
-
disconnectedCallback() {
|
|
1513
|
-
if (this.delayTimer)
|
|
1514
|
-
clearTimeout(this.delayTimer);
|
|
1515
|
-
if (this.observer)
|
|
1516
|
-
this.observer.disconnect();
|
|
1517
|
-
}
|
|
1518
|
-
getSizeDimensions() {
|
|
1519
|
-
const sizeMap = {
|
|
1520
|
-
'3xs': { width: '12px', height: '12px' },
|
|
1521
|
-
'2xs': { width: '16px', height: '16px' },
|
|
1522
|
-
'xs': { width: '20px', height: '20px' },
|
|
1523
|
-
'sm': { width: '24px', height: '24px' },
|
|
1524
|
-
'md': { width: '32px', height: '32px' },
|
|
1525
|
-
'lg': { width: '48px', height: '48px' },
|
|
1526
|
-
'xl': { width: '64px', height: '64px' },
|
|
1527
|
-
'2xl': { width: '80px', height: '80px' },
|
|
1528
|
-
'3xl': { width: '120px', height: '120px' },
|
|
1529
|
-
'4xl': { width: '160px', height: '160px' },
|
|
1530
|
-
};
|
|
1531
|
-
return sizeMap[this.size] || sizeMap['md'];
|
|
1532
|
-
}
|
|
1533
|
-
getSkeletonStyles() {
|
|
1534
|
-
// Use size dimensions as defaults if width/height are not explicitly set
|
|
1535
|
-
const sizeDims = this.getSizeDimensions();
|
|
1536
|
-
const baseStyles = {
|
|
1537
|
-
width: this.width !== '100%' ? this.width : sizeDims.width,
|
|
1538
|
-
height: this.height !== '20px' ? this.height : sizeDims.height,
|
|
1539
|
-
};
|
|
1540
|
-
switch (this.shape) {
|
|
1541
|
-
case 'circle':
|
|
1542
|
-
baseStyles.borderRadius = '50%';
|
|
1543
|
-
// Ensure width and height are equal for circles
|
|
1544
|
-
const circleSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
|
|
1545
|
-
baseStyles.width = `${circleSize}px`;
|
|
1546
|
-
baseStyles.height = `${circleSize}px`;
|
|
1547
|
-
break;
|
|
1548
|
-
case 'square':
|
|
1549
|
-
// Ensure width and height are equal for squares
|
|
1550
|
-
const squareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
|
|
1551
|
-
baseStyles.width = `${squareSize}px`;
|
|
1552
|
-
baseStyles.height = `${squareSize}px`;
|
|
1553
|
-
baseStyles.borderRadius = '0';
|
|
1554
|
-
break;
|
|
1555
|
-
case 'oval':
|
|
1556
|
-
baseStyles.borderRadius = '50%';
|
|
1557
|
-
// Oval allows different width and height (ellipse)
|
|
1558
|
-
break;
|
|
1559
|
-
case 'rounded-square':
|
|
1560
|
-
// Ensure width and height are equal for rounded squares
|
|
1561
|
-
const roundedSquareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
|
|
1562
|
-
baseStyles.width = `${roundedSquareSize}px`;
|
|
1563
|
-
baseStyles.height = `${roundedSquareSize}px`;
|
|
1564
|
-
baseStyles.borderRadius = this.borderRadius;
|
|
1565
|
-
break;
|
|
1566
|
-
case 'rounded-rectangle':
|
|
1567
|
-
baseStyles.borderRadius = this.borderRadius;
|
|
1568
|
-
// Rounded rectangle allows different width and height
|
|
1569
|
-
break;
|
|
1570
|
-
case 'rounded':
|
|
1571
|
-
baseStyles.borderRadius = this.borderRadius;
|
|
1572
|
-
break;
|
|
1573
|
-
case 'text':
|
|
1574
|
-
baseStyles.borderRadius = '4px';
|
|
1575
|
-
// Text shapes use smer heights based on size
|
|
1576
|
-
const textSizeMap = {
|
|
1577
|
-
'3xs': '10px',
|
|
1578
|
-
'2xs': '12px',
|
|
1579
|
-
'xs': '14px',
|
|
1580
|
-
'sm': '16px',
|
|
1581
|
-
'md': '18px',
|
|
1582
|
-
'lg': '24px',
|
|
1583
|
-
'xl': '32px',
|
|
1584
|
-
'2xl': '40px',
|
|
1585
|
-
'3xl': '48px',
|
|
1586
|
-
'4xl': '64px',
|
|
1587
|
-
};
|
|
1588
|
-
baseStyles.height = textSizeMap[this.size] || '18px';
|
|
1589
|
-
break;
|
|
1590
|
-
case 'avatar':
|
|
1591
|
-
baseStyles.borderRadius = '50%';
|
|
1592
|
-
const avatarSize = this.getSizeDimensions();
|
|
1593
|
-
baseStyles.width = this.width !== '100%' ? this.width : avatarSize.width;
|
|
1594
|
-
baseStyles.height = this.height !== '20px' ? this.height : avatarSize.height;
|
|
1595
|
-
break;
|
|
1596
|
-
case 'button':
|
|
1597
|
-
baseStyles.borderRadius = '6px';
|
|
1598
|
-
const buttonHeightMap = {
|
|
1599
|
-
'xs': '24px',
|
|
1600
|
-
'sm': '28px',
|
|
1601
|
-
'md': '32px',
|
|
1602
|
-
'lg': '36px',
|
|
1603
|
-
'xl': '40px',
|
|
1604
|
-
'2xl': '44px',
|
|
1605
|
-
};
|
|
1606
|
-
baseStyles.height = this.height !== '20px' ? this.height : (buttonHeightMap[this.size] || '32px');
|
|
1607
|
-
break;
|
|
1608
|
-
case 'pill':
|
|
1609
|
-
baseStyles.borderRadius = '20px';
|
|
1610
|
-
const pillHeightMap = {
|
|
1611
|
-
'xs': '20px',
|
|
1612
|
-
'sm': '24px',
|
|
1613
|
-
'md': '28px',
|
|
1614
|
-
'lg': '32px',
|
|
1615
|
-
};
|
|
1616
|
-
baseStyles.height = this.height !== '20px' ? this.height : (pillHeightMap[this.size] || '28px');
|
|
1617
|
-
baseStyles.width = this.width !== '100%' ? this.width : '60px';
|
|
1618
|
-
break;
|
|
1619
|
-
case 'card':
|
|
1620
|
-
baseStyles.borderRadius = '8px';
|
|
1621
|
-
const cardHeightMap = {
|
|
1622
|
-
'xs': '80px',
|
|
1623
|
-
'sm': '100px',
|
|
1624
|
-
'md': '120px',
|
|
1625
|
-
'lg': '160px',
|
|
1626
|
-
'xl': '200px',
|
|
1627
|
-
'2xl': '240px',
|
|
1628
|
-
};
|
|
1629
|
-
baseStyles.minHeight = this.height !== '20px' ? this.height : (cardHeightMap[this.size] || '120px');
|
|
1630
|
-
break;
|
|
1631
|
-
case 'list-item':
|
|
1632
|
-
baseStyles.borderRadius = '4px';
|
|
1633
|
-
const listItemHeightMap = {
|
|
1634
|
-
'xs': '32px',
|
|
1635
|
-
'sm': '36px',
|
|
1636
|
-
'md': '40px',
|
|
1637
|
-
'lg': '48px',
|
|
1638
|
-
'xl': '56px',
|
|
1639
|
-
'2xl': '64px',
|
|
1640
|
-
};
|
|
1641
|
-
baseStyles.height = this.height !== '20px' ? this.height : (listItemHeightMap[this.size] || '40px');
|
|
1642
|
-
break;
|
|
1643
|
-
case 'image':
|
|
1644
|
-
baseStyles.borderRadius = '8px';
|
|
1645
|
-
const imageHeightMap = {
|
|
1646
|
-
'xs': '100px',
|
|
1647
|
-
'sm': '150px',
|
|
1648
|
-
'md': '200px',
|
|
1649
|
-
'lg': '250px',
|
|
1650
|
-
'xl': '300px',
|
|
1651
|
-
'2xl': '400px',
|
|
1652
|
-
};
|
|
1653
|
-
baseStyles.height = this.height !== '20px' ? this.height : (imageHeightMap[this.size] || '200px');
|
|
1654
|
-
baseStyles.display = 'flex';
|
|
1655
|
-
baseStyles.alignItems = 'center';
|
|
1656
|
-
baseStyles.justifyContent = 'center';
|
|
1657
|
-
break;
|
|
1658
|
-
case 'none':
|
|
1659
|
-
baseStyles.background = 'transparent';
|
|
1660
|
-
baseStyles.width = 'auto';
|
|
1661
|
-
baseStyles.height = 'auto';
|
|
1662
|
-
break;
|
|
1663
|
-
default: // rectangle
|
|
1664
|
-
baseStyles.borderRadius = '0';
|
|
1665
|
-
break;
|
|
1666
|
-
}
|
|
1667
|
-
return baseStyles;
|
|
1668
|
-
}
|
|
1669
|
-
/**
|
|
1670
|
-
* Resolves the actual color value based on variant or custom string
|
|
1671
|
-
*/
|
|
1672
|
-
// private getBaseColor(): string {
|
|
1673
|
-
// const colorMap: Record<string, string> = {
|
|
1674
|
-
// primary: '#3DCD58',
|
|
1675
|
-
// secondary: '#64748b',
|
|
1676
|
-
// success: '#22c55e',
|
|
1677
|
-
// danger: '#ef4444',
|
|
1678
|
-
// warning: '#f59e0b',
|
|
1679
|
-
// info: '#3bf673',
|
|
1680
|
-
// neutral: 'var(--skeleton-bg, #e2e8f0)',
|
|
1681
|
-
// };
|
|
1682
|
-
// const resolved = colorMap[this.color] || this.color;
|
|
1683
|
-
// // Handle theme-based defaults if empty or neutral
|
|
1684
|
-
// if (!this.color || this.color === 'neutral') {
|
|
1685
|
-
// return 'var(red, #e2e8f0)';
|
|
1686
|
-
// }
|
|
1687
|
-
// return resolved;
|
|
1688
|
-
// }
|
|
1689
|
-
// /**
|
|
1690
|
-
// * Derives a lighter shimmer color from the base color.
|
|
1691
|
-
// * Works for most hex colors; for others falls back to the theme wave variable.
|
|
1692
|
-
// */
|
|
1693
|
-
// private getHighlightColor(base: string): string {
|
|
1694
|
-
// // If user explicitly provided a highlight, use it
|
|
1695
|
-
// if (this.highlightColor) return this.highlightColor;
|
|
1696
|
-
// // Handle generic theme variables
|
|
1697
|
-
// if (base.includes('--skeleton-bg')) {
|
|
1698
|
-
// return 'var(--skeleton-wave-bg, #f3f4f6)';
|
|
1699
|
-
// }
|
|
1700
|
-
// // Try to parse hex and lighten
|
|
1701
|
-
// const hex = base.trim();
|
|
1702
|
-
// if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
|
|
1703
|
-
// let full = hex.slice(1);
|
|
1704
|
-
// if (full.length === 3) {
|
|
1705
|
-
// full = full.split('').map(c => c + c).join('');
|
|
1706
|
-
// }
|
|
1707
|
-
// const r = Math.min(255, parseInt(full.substring(0, 2), 16) + 30);
|
|
1708
|
-
// const g = Math.min(255, parseInt(full.substring(2, 4), 16) + 30);
|
|
1709
|
-
// const b = Math.min(255, parseInt(full.substring(4, 6), 16) + 30);
|
|
1710
|
-
// return `rgb(${r}, ${g}, ${b})`;
|
|
1711
|
-
// }
|
|
1712
|
-
// // For other types of strings, fallback to the theme wave variable if available
|
|
1713
|
-
// return 'var(--skeleton-wave-bg, #f3f4f6)';
|
|
1714
|
-
// }
|
|
1715
|
-
render() {
|
|
1716
|
-
if (!this.isActuallyVisible)
|
|
1717
|
-
return null;
|
|
1718
|
-
const countArr = Array.from({ length: Math.max(1, this.count) });
|
|
1719
|
-
// ARIA role logic
|
|
1720
|
-
const ariaRole = this.ariaRole || (typeof this.progress === 'number' ? 'progressbar' : 'status');
|
|
1721
|
-
const ariaProps = {
|
|
1722
|
-
role: ariaRole,
|
|
1723
|
-
'aria-busy': true,
|
|
1724
|
-
'aria-label': this.ariaLabel,
|
|
1725
|
-
'aria-live': this.ariaLive,
|
|
1726
|
-
};
|
|
1727
|
-
if (ariaRole === 'progressbar' && typeof this.progress === 'number') {
|
|
1728
|
-
ariaProps['aria-valuenow'] = this.progress;
|
|
1729
|
-
ariaProps['aria-valuemin'] = 0;
|
|
1730
|
-
ariaProps['aria-valuemax'] = 100;
|
|
1731
|
-
}
|
|
1732
|
-
// Dark mode/RTL
|
|
1733
|
-
const darkThemes = ['dark', 'blue', 'violet', 'green', 'pink'];
|
|
1734
|
-
const docTheme = document.documentElement.getAttribute('data-theme') || '';
|
|
1735
|
-
const isDarkAuto = this.dark === 'auto' && ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
|
|
1736
|
-
darkThemes.some(t => document.documentElement.classList.contains('theme-' + t) || document.body.classList.contains('theme-' + t)) ||
|
|
1737
|
-
darkThemes.includes(docTheme) ||
|
|
1738
|
-
!!this.el.closest(darkThemes.map(t => `.theme-${t}, [data-theme="${t}"]`).join(', ')));
|
|
1739
|
-
const darkClass = this.dark === 'dark' || isDarkAuto ? 'skeleton-dark' : '';
|
|
1740
|
-
const rtlClass = this.rtl ? 'skeleton-rtl' : '';
|
|
1741
|
-
return (h("div", { class: `skeleton-replication-container skeleton-direction-${this.direction} ${darkClass} ${rtlClass}`, style: { display: 'flex', flexDirection: this.direction, gap: this.gap }, ...ariaProps }, countArr.map((_, index) => {
|
|
1742
|
-
// ...existing code...
|
|
1743
|
-
const staggerDelay = this.stagger > 0 ? `${index * this.stagger}ms` : '0ms';
|
|
1744
|
-
const isAnimating = this.animated && (!this.lazyAnimation || this.isInView);
|
|
1745
|
-
// ...existing code...
|
|
1746
|
-
const namedColors = ['neutral', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'];
|
|
1747
|
-
const isCustomColor = !namedColors.includes(this.color);
|
|
1748
|
-
const skeletonClass = {
|
|
1749
|
-
'skeleton': true,
|
|
1750
|
-
'skeleton-animated': isAnimating,
|
|
1751
|
-
[`skeleton-${this.animationType}`]: isAnimating,
|
|
1752
|
-
[`skeleton-${this.shape}`]: true,
|
|
1753
|
-
[`skeleton-speed-${this.speed}`]: true,
|
|
1754
|
-
[`skeleton-color-${this.color}`]: !isCustomColor && this.color !== 'neutral',
|
|
1755
|
-
'skeleton-mask': this.mask,
|
|
1756
|
-
'skeleton-ghost': this.ghost && this.mask,
|
|
1757
|
-
'skeleton-elevated': this.elevation > 0,
|
|
1758
|
-
[this.customClass]: !!this.customClass,
|
|
1759
|
-
};
|
|
1760
|
-
const customStyles = {
|
|
1761
|
-
'--skeleton-stagger-delay': staggerDelay,
|
|
1762
|
-
'--skeleton-wave-angle': this.waveAngle,
|
|
1763
|
-
'--skeleton-wave-speed': this.waveSpeed,
|
|
1764
|
-
'--skeleton-gap': this.gap,
|
|
1765
|
-
'--skeleton-elevation': this.elevation > 0 ? `var(--ui-shadow-${this.elevation}, 0 2px 8px rgba(0,0,0,0.05))` : 'none',
|
|
1766
|
-
};
|
|
1767
|
-
// Custom hex/rgba colors: set as CSS vars so animations still work via gradients
|
|
1768
|
-
if (isCustomColor) {
|
|
1769
|
-
customStyles['--skeleton-bg'] = this.color;
|
|
1770
|
-
customStyles['--skeleton-wave-bg'] = this.highlightColor || this.color;
|
|
1771
|
-
}
|
|
1772
|
-
if (this.radius) {
|
|
1773
|
-
customStyles['--skeleton-border-radius'] = this.radius;
|
|
1774
|
-
}
|
|
1775
|
-
const isCircular = ['circle', 'avatar', 'oval'].includes(this.shape);
|
|
1776
|
-
const styles = {
|
|
1777
|
-
...this.getSkeletonStyles(),
|
|
1778
|
-
...customStyles,
|
|
1779
|
-
animationDelay: staggerDelay,
|
|
1780
|
-
...(isCircular ? {} : (this.radius || this.borderRadius !== '4px' ? { borderRadius: this.radius || this.borderRadius } : {}))
|
|
1781
|
-
};
|
|
1782
|
-
return (h("div", { class: skeletonClass, style: styles, key: index }, this.renderContent(), typeof this.progress === 'number' && (h("div", { class: "skeleton-progress-bar", style: { width: this.progress + '%', height: '4px', background: 'var(--skeleton-wave-bg, #fff)', borderRadius: '2px', marginTop: '4px' } }))));
|
|
1783
|
-
}), h("slot", { name: "custom" })));
|
|
1784
|
-
}
|
|
1785
|
-
renderContent() {
|
|
1786
|
-
const isText = this.shape === 'text';
|
|
1787
|
-
const hasRows = isText && this.rows > 1;
|
|
1788
|
-
return [
|
|
1789
|
-
(this.mask || this.shape === 'none') ? h("slot", null) : null,
|
|
1790
|
-
hasRows && !this.mask ? (h("div", { class: "skeleton-text-rows", style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' } }, Array.from({ length: this.rows }).map((_, i) => {
|
|
1791
|
-
const isLast = i === this.rows - 1;
|
|
1792
|
-
const rowWidth = isLast ? this.lastRowWidth : (i > 0 && i % 2 === 0 ? '92%' : '100%');
|
|
1793
|
-
return (h("div", { class: "skeleton-text-row", style: {
|
|
1794
|
-
height: '1em',
|
|
1795
|
-
width: rowWidth,
|
|
1796
|
-
backgroundColor: 'inherit',
|
|
1797
|
-
borderRadius: '4px',
|
|
1798
|
-
animation: 'inherit'
|
|
1799
|
-
} }));
|
|
1800
|
-
}))) : null,
|
|
1801
|
-
this.shape === 'card' && !this.mask ? (h("div", { class: "skeleton-card-content" }, h("div", { class: "skeleton-card-header" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-card-title" }, h("div", { class: "skeleton-text", style: { width: '60%', height: '16px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '40%', height: '12px', borderRadius: '4px' } }))), h("div", { class: "skeleton-card-body" }, h("div", { class: "skeleton-text", style: { width: '100%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '80%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '90%', height: '14px', borderRadius: '4px' } })))) : null,
|
|
1802
|
-
this.shape === 'list-item' && !this.mask ? (h("div", { class: "skeleton-list-content" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-list-text" }, h("div", { class: "skeleton-text", style: { width: '70%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '50%', height: '12px', borderRadius: '4px' } })))) : null,
|
|
1803
|
-
this.shape === 'image' && !this.mask ? (h("div", { class: "skeleton-image-icon" }, h("ui-icon", { name: "image", library: "lucide", size: "25%", style: { opacity: '0.2' } }))) : null,
|
|
1804
|
-
this.template === 'profile' ? (h("div", { class: "skeleton-profile-template" }, h("ui-skeleton-loader", { shape: "circle", size: this.size, color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-profile-lines" }, h("ui-skeleton-loader", { shape: "text", size: this.size, width: "120px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
|
|
1805
|
-
this.template === 'media-object' ? (h("div", { class: "skeleton-media-object-template" }, h("ui-skeleton-loader", { shape: "rounded-rectangle", width: "48px", height: "48px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-media-lines", style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "md", width: "70%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "40%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "90%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '8px' } })))) : null,
|
|
1806
|
-
this.template === 'feed-item' ? (h("div", { class: "skeleton-feed-template" }, h("div", { class: "feed-header", style: { display: 'flex', gap: '12px', marginBottom: '16px' } }, h("ui-skeleton-loader", { shape: "circle", size: "md", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "xs", width: "100px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }))), h("ui-skeleton-loader", { shape: "rectangle", width: "100%", height: "200px", "border-radius": "8px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "feed-footer", style: { marginTop: '12px', display: 'flex', gap: '8px' } }, h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
|
|
1807
|
-
this.template === 'table-row' ? (h("div", { class: "skeleton-table-row-template", style: { display: 'flex', gap: '20px', alignItems: 'center', width: '100%', padding: '12px 0' } }, h("ui-skeleton-loader", { shape: "rectangle", width: "20px", height: "20px", "border-radius": "4px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "15%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "35%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "20%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "pill", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginLeft: 'auto' } }))) : null,
|
|
1808
|
-
];
|
|
1809
|
-
}
|
|
1810
|
-
static get watchers() { return {
|
|
1811
|
-
"delay": [{
|
|
1812
|
-
"handleDelayChange": 0
|
|
1813
|
-
}]
|
|
1814
|
-
}; }
|
|
1815
|
-
};
|
|
1816
|
-
SkeletonLoader.style = skeletonLoaderCss();
|
|
1817
|
-
|
|
1818
|
-
export { Pagination as ui_pagination, Radio as ui_radio, Rating as ui_rating, SkeletonLoader as ui_skeleton };
|
|
1348
|
+
export { Pagination as ui_pagination, Radio as ui_radio, Rating as ui_rating };
|