atomicuilibrary 0.0.1 → 0.1.0
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 +1 -1
- package/dist/cjs/exploration-project-tailwind.cjs.js +1 -1
- package/dist/cjs/layout-manager.cjs.entry.js +1 -1
- package/dist/cjs/library-card.cjs.entry.js +1 -1
- package/dist/cjs/lm-container_2.cjs.entry.js +1 -1
- package/dist/cjs/lm-panel_3.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/my-step.cjs.entry.js +1 -1
- package/dist/cjs/nav-bar.cjs.entry.js +2 -2
- package/dist/cjs/{security-E1JcwxGc.js → security-CNaNip8F.js} +88 -154
- package/dist/cjs/smart-step.cjs.entry.js +2 -2
- package/dist/cjs/timeline-item.cjs.entry.js +1 -1
- package/dist/cjs/{ui-accordion_10.cjs.entry.js → ui-accordion_11.cjs.entry.js} +613 -26
- package/dist/cjs/ui-advanced-data-table.cjs.entry.js +1 -1
- package/dist/cjs/ui-anchor.cjs.entry.js +1 -1
- package/dist/cjs/ui-aside-panel.cjs.entry.js +5 -5
- package/dist/cjs/ui-avatar-group_3.cjs.entry.js +5 -5
- package/dist/cjs/ui-callout-banner.cjs.entry.js +1 -1
- package/dist/cjs/ui-card.cjs.entry.js +26 -4
- package/dist/cjs/ui-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-editor.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-preview.cjs.entry.js +1 -1
- package/dist/cjs/ui-color-controller.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-box.cjs.entry.js +1 -1
- package/dist/cjs/ui-dock-host.cjs.entry.js +3 -3
- package/dist/cjs/ui-drag-drop.cjs.entry.js +1 -1
- package/dist/cjs/ui-empty-state.cjs.entry.js +1 -1
- package/dist/cjs/ui-fab-item.cjs.entry.js +1 -1
- package/dist/cjs/ui-fab.cjs.entry.js +2 -2
- package/dist/cjs/ui-library.cjs.entry.js +1 -1
- package/dist/cjs/ui-list-group_2.cjs.entry.js +9 -5
- package/dist/cjs/ui-list.cjs.entry.js +4 -4
- package/dist/cjs/ui-navigation-item.cjs.entry.js +3 -3
- package/dist/cjs/ui-otp-input.cjs.entry.js +2 -2
- package/dist/cjs/{ui-pagination_3.cjs.entry.js → ui-pagination_4.cjs.entry.js} +202 -0
- package/dist/cjs/ui-pattern-input.cjs.entry.js +5 -5
- package/dist/cjs/ui-popover.cjs.entry.js +1 -1
- package/dist/cjs/ui-progress.cjs.entry.js +101 -17
- package/dist/cjs/ui-resizable-panel.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-location-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/ui-smart-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-step.cjs.entry.js +1 -1
- package/dist/cjs/ui-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +9 -9
- package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ui-timeline.cjs.entry.js +1 -1
- package/dist/cjs/ui-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ui-transfer-list.cjs.entry.js +1 -1
- package/dist/cjs/ui-workspace-manager.cjs.entry.js +1 -1
- package/dist/collection/assets/js/demo-loader.js +0 -1
- package/dist/collection/assets/js/demos/accordion-demo.js +189 -0
- package/dist/collection/assets/js/demos/advanced-data-table-demo.js +213 -214
- package/dist/collection/assets/js/demos/aside-panel-demo.js +6 -6
- package/dist/collection/assets/js/demos/button-demo.js +60 -1
- package/dist/collection/assets/js/demos/callout-banner-demo.js +324 -34
- package/dist/collection/assets/js/demos/card-demo.js +108 -61
- package/dist/collection/assets/js/demos/context-menu-demo.js +433 -12
- package/dist/collection/assets/js/demos/dock-demo.js +80 -60
- package/dist/collection/assets/js/demos/documentation-demo.js +227 -22
- package/dist/collection/assets/js/demos/empty-state-demo.js +10 -10
- package/dist/collection/assets/js/demos/list-demo.js +41 -18
- package/dist/collection/assets/js/demos/masonry-demo.js +164 -0
- package/dist/collection/assets/js/demos/progress-demo.js +701 -8
- package/dist/collection/assets/js/demos/radio-demo.js +1 -1
- package/dist/collection/assets/js/demos/splitter-demo.js +137 -0
- package/dist/collection/assets/js/demos/tag-demo.js +48 -18
- package/dist/collection/assets/js/demos/timeline-demo.js +20 -7
- package/dist/collection/assets/js/demos/tooltip-demo.js +26 -26
- package/dist/collection/assets/js/demos/tree-demo.js +28 -10
- package/dist/collection/collection-manifest.json +1 -4
- package/dist/collection/components/accordion/accordion.css +301 -0
- package/dist/collection/components/accordion/accordion.js +40 -8
- package/dist/collection/components/advanced-data-table/advanced-data-table.css +19 -5
- package/dist/collection/components/anchor/anchor.css +0 -2
- package/dist/collection/components/aside-panel/aside-panel.css +1 -3
- package/dist/collection/components/aside-panel/aside-panel.js +5 -5
- package/dist/collection/components/avatar/avatar.js +1 -1
- package/dist/collection/components/badge/badge.css +1 -0
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/button/button.css +131 -0
- package/dist/collection/components/button/button.js +128 -9
- package/dist/collection/components/card/card.css +83 -31
- package/dist/collection/components/card/card.js +46 -3
- package/dist/collection/components/checkbox/checkbox.css +8 -10
- package/dist/collection/components/checkbox/checkbox.js +2 -2
- 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-controller/color-controller.js +1 -1
- package/dist/collection/components/context-menu/context-menu.css +3 -3
- package/dist/collection/components/dialog-box/dialog-box.js +1 -1
- package/dist/collection/components/dialog-header/dialog-header.js +1 -1
- 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/empty-state/empty-state.js +1 -1
- package/dist/collection/components/fab/fab.js +2 -2
- package/dist/collection/components/fab-item/fab-item.js +1 -1
- 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.js +4 -4
- 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.js +4 -4
- package/dist/collection/components/list-item/list-item.css +24 -0
- package/dist/collection/components/list-item/list-item.js +35 -4
- package/dist/collection/components/loader/loader.css +1635 -0
- package/dist/collection/components/loader/loader.js +1120 -0
- package/dist/collection/components/my-step/my-step.js +1 -1
- package/dist/collection/components/nav-bar/nav-bar.js +6 -6
- package/dist/collection/components/otp-input/otp-input.js +2 -2
- package/dist/collection/components/pattern-input/pattern-input.js +5 -5
- package/dist/collection/components/progress/progress.css +150 -15
- package/dist/collection/components/progress/progress.js +180 -18
- package/dist/collection/components/radio/radio.css +3 -3
- package/dist/collection/components/radio/radio.js +1 -1
- package/dist/collection/components/resizable-panel/resizable-panel.js +1 -1
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js +2 -2
- 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/snackbar/snackbar.js +1 -1
- package/dist/collection/components/speed-dial/speed-dial.js +1 -1
- package/dist/collection/components/stack/stack.js +2 -2
- package/dist/collection/components/step/step.js +1 -1
- package/dist/collection/components/switch/switch.js +10 -10
- package/dist/collection/components/tag-group/tag-group.js +2 -2
- package/dist/collection/components/timeline-item/timeline-item.js +1 -1
- package/dist/collection/components/toolbar/toolbar.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/collection/components/top-bar/top-bar.js +2 -2
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css +19 -4
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js +6 -6
- package/dist/collection/components/ui-navigation-bar/navigation-item.js +3 -3
- package/dist/collection/components.js +1 -0
- 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/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/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 -0
- 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/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-aside-panel.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-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-controller.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-divider.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-library.js +1 -1
- package/dist/components/ui-list.js +1 -1
- package/dist/components/{ui-input-pair.d.ts → ui-loader.d.ts} +4 -4
- package/dist/components/ui-loader.js +1 -0
- 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-context-menu.js +1 -1
- package/dist/components/ui-smart-location-dropdown.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-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 +1 -1
- package/dist/esm/exploration-project-tailwind.js +1 -1
- package/dist/esm/layout-manager.entry.js +1 -1
- package/dist/esm/library-card.entry.js +1 -1
- package/dist/esm/lm-container_2.entry.js +1 -1
- package/dist/esm/lm-panel_3.entry.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/my-step.entry.js +1 -1
- package/dist/esm/nav-bar.entry.js +2 -2
- package/dist/esm/{security-D2WzX6vR.js → security-Dyu3Nplq.js} +88 -154
- package/dist/esm/smart-step.entry.js +2 -2
- package/dist/esm/timeline-item.entry.js +1 -1
- package/dist/esm/{ui-accordion_10.entry.js → ui-accordion_11.entry.js} +613 -27
- package/dist/esm/ui-advanced-data-table.entry.js +1 -1
- package/dist/esm/ui-anchor.entry.js +1 -1
- package/dist/esm/ui-aside-panel.entry.js +5 -5
- package/dist/esm/ui-avatar-group_3.entry.js +5 -5
- package/dist/esm/ui-callout-banner.entry.js +1 -1
- package/dist/esm/ui-card.entry.js +26 -4
- package/dist/esm/ui-checkbox.entry.js +2 -2
- package/dist/esm/ui-code-editor.entry.js +2 -2
- package/dist/esm/ui-code-preview.entry.js +1 -1
- package/dist/esm/ui-color-controller.entry.js +1 -1
- package/dist/esm/ui-dialog-box.entry.js +1 -1
- package/dist/esm/ui-dock-host.entry.js +3 -3
- package/dist/esm/ui-drag-drop.entry.js +1 -1
- package/dist/esm/ui-empty-state.entry.js +1 -1
- package/dist/esm/ui-fab-item.entry.js +1 -1
- package/dist/esm/ui-fab.entry.js +2 -2
- package/dist/esm/ui-library.entry.js +1 -1
- package/dist/esm/ui-list-group_2.entry.js +9 -5
- package/dist/esm/ui-list.entry.js +4 -4
- package/dist/esm/ui-navigation-item.entry.js +3 -3
- package/dist/esm/ui-otp-input.entry.js +2 -2
- package/dist/esm/{ui-pagination_3.entry.js → ui-pagination_4.entry.js} +202 -1
- package/dist/esm/ui-pattern-input.entry.js +5 -5
- package/dist/esm/ui-popover.entry.js +1 -1
- package/dist/esm/ui-progress.entry.js +101 -17
- package/dist/esm/ui-resizable-panel.entry.js +1 -1
- package/dist/esm/ui-smart-location-dropdown.entry.js +2 -2
- package/dist/esm/ui-smart-stepper.entry.js +1 -1
- package/dist/esm/ui-snackbar.entry.js +1 -1
- package/dist/esm/ui-step.entry.js +1 -1
- package/dist/esm/ui-stepper.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +9 -9
- package/dist/esm/ui-tabs.entry.js +1 -1
- package/dist/esm/ui-timeline.entry.js +1 -1
- package/dist/esm/ui-toolbar.entry.js +1 -1
- package/dist/esm/ui-tooltip.entry.js +4 -4
- package/dist/esm/ui-transfer-list.entry.js +1 -1
- package/dist/esm/ui-workspace-manager.entry.js +1 -1
- package/dist/exploration-project-tailwind/exploration-project-tailwind.esm.js +1 -1
- package/dist/exploration-project-tailwind/{p-c7e87fbb.entry.js → p-036d2a44.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-62352ef2.entry.js → p-05a436d3.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a4f52a76.entry.js → p-16bdd162.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-85bf89fd.entry.js → p-20ecc116.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-2347d21b.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3d381f75.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-e5322e59.entry.js → p-4288c158.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-2f1aebb3.entry.js → p-4417a9d8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-049744f9.entry.js → p-44742ddd.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-73d29a4a.entry.js → p-4aaa8e40.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6fa9dc15.entry.js → p-4bef8bed.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-64e3a484.entry.js → p-4efd63ce.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c5ddc817.entry.js → p-54965530.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-5c835d90.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-4de419d5.entry.js → p-6b838549.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c174a372.entry.js → p-6ddbee42.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-7515b1e3.entry.js → p-70bacda8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-9fa70359.entry.js → p-71d95bb1.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-2d273118.entry.js → p-7889bfc4.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-0b004861.entry.js → p-790556f0.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-f5719913.entry.js → p-7ba2258a.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-81961fb1.entry.js → p-81ebba11.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-5e3e80ae.entry.js → p-8578b616.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-3d3d48fd.entry.js → p-8b57fe4e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-ffb1754a.entry.js → p-97af03cc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-f0830120.entry.js → p-98e91da5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d2308a00.entry.js → p-9bd14f69.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-Dyu3Nplq.js +2 -0
- package/dist/exploration-project-tailwind/{p-ba21fed3.entry.js → p-a27f59d2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-70d82d79.entry.js → p-a7b07cf4.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-5508874f.entry.js → p-bd89d060.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-9d0c8760.entry.js → p-c02284ea.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d419eaf0.entry.js → p-c1c8ac28.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c63c522e.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c90722ec.entry.js → p-cbee2607.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-287dbf09.entry.js → p-d114a347.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-8d951aef.entry.js → p-d2e45c5e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-77cc333a.entry.js → p-d59da767.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-46596a28.entry.js → p-d6ce9721.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-875be805.entry.js → p-dc92a343.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4f6bba75.entry.js → p-e22317c1.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d16c9635.entry.js → p-e76318c7.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-e8c6d395.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c2ca71ac.entry.js → p-eab5ad36.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-f0bc5d7e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f1beee72.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f543392f.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-46efdea3.entry.js → p-f61cfb7c.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-77124686.entry.js → p-fb4aca69.entry.js} +1 -1
- package/dist/types/components/accordion/accordion.d.ts +10 -2
- package/dist/types/components/button/button.d.ts +9 -0
- package/dist/types/components/card/card.d.ts +4 -0
- package/dist/types/components/list-item/list-item.d.ts +1 -0
- package/dist/types/components/loader/loader.d.ts +145 -0
- package/dist/types/components/progress/progress.d.ts +34 -2
- package/dist/types/components.d.ts +509 -993
- package/dist/types/types/common.d.ts +1 -1
- package/dist/types/types/common.type.d.ts +1 -1
- package/package.json +8 -7
- package/dist/cjs/ui-checkbox-group.cjs.entry.js +0 -330
- package/dist/cjs/ui-image-button.cjs.entry.js +0 -67
- package/dist/cjs/ui-input-pair.cjs.entry.js +0 -44
- package/dist/cjs/ui-radio-group.cjs.entry.js +0 -205
- package/dist/cjs/ui-radio.cjs.entry.js +0 -206
- package/dist/collection/components/checkbox-group/checkbox-group.css +0 -223
- package/dist/collection/components/checkbox-group/checkbox-group.js +0 -1001
- package/dist/collection/components/checkbox-group/types.js +0 -1
- package/dist/collection/components/image-button/image-button.css +0 -154
- package/dist/collection/components/image-button/image-button.js +0 -310
- package/dist/collection/components/image-button/types.js +0 -1
- package/dist/collection/components/input-pair/input-pair.css +0 -72
- package/dist/collection/components/input-pair/input-pair.js +0 -309
- package/dist/collection/components/radio-group/radio-group.css +0 -202
- package/dist/collection/components/radio-group/radio-group.js +0 -903
- package/dist/collection/components/radio-group/types.js +0 -1
- package/dist/components/ui-checkbox-group.d.ts +0 -11
- package/dist/components/ui-checkbox-group.js +0 -1
- package/dist/components/ui-image-button.d.ts +0 -11
- package/dist/components/ui-image-button.js +0 -1
- package/dist/components/ui-input-pair.js +0 -1
- package/dist/components/ui-radio-group.d.ts +0 -11
- package/dist/components/ui-radio-group.js +0 -1
- package/dist/esm/ui-checkbox-group.entry.js +0 -328
- package/dist/esm/ui-image-button.entry.js +0 -65
- package/dist/esm/ui-input-pair.entry.js +0 -42
- package/dist/esm/ui-radio-group.entry.js +0 -203
- package/dist/esm/ui-radio.entry.js +0 -204
- package/dist/exploration-project-tailwind/p-01c7db7a.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-5ce0dbd8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-6ab80ead.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-6e9694f2.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-7376ac95.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-77a21491.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-7f91d949.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-807c6555.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-D2WzX6vR.js +0 -2
- package/dist/exploration-project-tailwind/p-ab752761.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ce1222a1.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-e90d5307.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ecda1cc3.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f11e5cae.entry.js +0 -1
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +0 -87
- package/dist/types/components/checkbox-group/types.d.ts +0 -8
- package/dist/types/components/image-button/image-button.d.ts +0 -31
- package/dist/types/components/image-button/types.d.ts +0 -1
- package/dist/types/components/input-pair/input-pair.d.ts +0 -28
- package/dist/types/components/radio-group/radio-group.d.ts +0 -74
- package/dist/types/components/radio-group/types.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as i,HTMLElement as t,createEvent as r,h as a,transformTag as e}from"@stencil/core/internal/client";import{d as n}from"./icon.js";const s=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.ratingChange=r(this,"ratingChange",7)}get el(){return this}type="star";value=0;max=5;size="md";color="warning";activeColor;activeFillColor;readonly=!1;disabled=!1;allowHalf=!1;showValue=!1;description;descriptionPosition="bottom";labels;glow=!1;haptic=!1;victoryGlow=!1;variant="default";clearable=!1;iconName="star";iconLibrary="lucide";image;colorMap;invalid=!1;errorMessage;showReviews=!1;totalReviews=0;helperText;showHistogram=!1;summaryData;useEmoji=!1;showSummary=!1;summaryPosition="side";rtl=!1;hoverValue=0;isVictory=!1;particles=[];ratingChange;getLabels(){if(this.labels)try{return"string"==typeof this.labels?JSON.parse(this.labels):this.labels}catch{return[]}return[]}handleClick=i=>{this.readonly||this.disabled||(this.value="thumb"===this.type?this.value===i?0:i:this.clearable&&this.value===i?0:i,this.haptic&&"vibrate"in navigator&&navigator.vibrate(this.value===this.max?[15,30,15]:10),this.value===this.max&&this.triggerVictory(),this.ratingChange.emit(this.value))};handleKeyDown=i=>{if(this.readonly||this.disabled)return;let t=this.value;const r=this.allowHalf?.5:1,a=this.rtl||"rtl"===this.el.dir||!!this.el.closest('[dir="rtl"]');switch(i.key){case"ArrowRight":case"ArrowUp":t=a?Math.max(0,this.value-r):Math.min(this.max,this.value+r),i.preventDefault();break;case"ArrowLeft":case"ArrowDown":t=a?Math.min(this.max,this.value+r):Math.max(0,this.value-r),i.preventDefault();break;case"Home":t=0,i.preventDefault();break;case"End":t=this.max,i.preventDefault();break;default:return}t!==this.value&&(this.value=t,this.ratingChange.emit(this.value),this.value===this.max&&this.triggerVictory())};triggerVictory=()=>{if(!this.victoryGlow)return;this.isVictory=!0;const i=Array.from({length:24}).map(((i,t)=>({id:Date.now()+t,tx:500*(Math.random()-.5),ty:-(300*Math.random()+100),rot:720*Math.random(),clr:["#fbbf24","#f59e0b","#3bf673","#10b981","#ef4444","#6366f1"][t%6],size:8*Math.random()+4})));this.particles=i,setTimeout((()=>{this.isVictory=!1,this.particles=[]}),1500)};handleMouseEnter=i=>{this.readonly||this.disabled||(this.hoverValue=i)};handleMouseLeave=()=>{this.readonly||this.disabled||(this.hoverValue=0)};renderStarRating(){const i=[],t=this.hoverValue||this.value,r=this.colorMap?JSON.parse(this.colorMap):null;for(let e=1;e<=this.max;e++){const n=t>=e,s=this.allowHalf&&t>=e-.5&&t<e,o=r&&r[e-1]?r[e-1]:this.activeColor||this.color,l=this.activeFillColor||"currentColor";i.push(a("button",{type:"button",class:{"rating-item":!0,"rating-item-active":n||s,"rating-item-half":s,"rating-item-hover":this.hoverValue>=e,[`rating-color-${o}`]:!!o},onClick:()=>this.handleClick(e),onMouseEnter:()=>this.handleMouseEnter(e),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":`Rate ${e} out of ${this.max}`},a("div",{class:"rating-icon-container"},this.image?a("img",{src:this.image,class:"rating-icon-bg",alt:"rating"}):a("ui-icon",{name:this.iconName,color:"currentColor",library:this.iconLibrary,size:this.size,class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:s?"50%":n?"100% ":"0%"}},this.image?a("img",{src:this.image,alt:"rating active"}):a("ui-icon",{name:this.iconName,color:"currentColor",library:this.iconLibrary,size:this.size,fill:l})))))}return i}renderHistogram(){if(!this.summaryData)return null;try{const i="string"==typeof this.summaryData?JSON.parse(this.summaryData):this.summaryData;if(!Array.isArray(i))return null;const t=i.reduce(((i,t)=>i+t),0),r=this.activeColor||`var(--rating-${this.color})`;return a("div",{class:"rating-histogram"},i.map(((e,n)=>{const s=t>0?e/t*100:0;return a("div",{class:"histogram-row"},a("span",{class:"histogram-label"},i.length-n," ",a("ui-icon",{name:"star",library:"lucide",size:"10px"})),a("div",{class:"histogram-bar-container"},a("div",{class:"histogram-bar-fill",style:{width:`${s}%`,backgroundColor:r}})),a("span",{class:"histogram-count"},e))})))}catch{return null}}renderSmileyRating(){const i=[],t=this.getLabels(),r=["frown","meh","smile","laugh","heart"],e=["😢","😕","😐","🙂","😄"],n=this.hoverValue||this.value;for(let s=1;s<=this.max;s++){const o=this.value===s,l=n===s||this.useEmoji&&n>=s,g=r[s-1]||"smile";i.push(a("div",{class:"smiley-item-wrapper"},a("button",{type:"button",class:{"rating-item":!0,"rating-item-smiley":!0,"rating-item-active":l,"rating-item-selected":o,"rating-item-hover":this.hoverValue===s,"rating-item-emoji":this.useEmoji},onClick:()=>this.handleClick(s),onMouseEnter:()=>this.handleMouseEnter(s),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":t[s-1]||`Rate ${s} out of ${this.max}`},this.useEmoji?a("span",{class:"emoji-display"},n>=s||o?e[s-1]||"🙂":"⚪"):a("div",{class:"rating-icon-container"},a("ui-icon",{name:g,color:"currentColor",library:"lucide",size:this.size,class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:l?"100%":"0%"}},a("ui-icon",{name:g,color:"currentColor",library:"lucide",size:this.size})))),t[s-1]&&a("span",{class:"smiley-label"},t[s-1])))}return i}renderThumbRating(){const i=1===this.value||1===this.hoverValue,t=-1===this.value||-1===this.hoverValue;return[a("button",{type:"button",class:{"rating-item":!0,"rating-item-thumb":!0,"rating-item-active":i,"rating-item-thumb-up":!0},onClick:()=>this.handleClick(1),onMouseEnter:()=>this.handleMouseEnter(1),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":"Thumbs up"},a("div",{class:"rating-icon-container"},a("ui-icon",{name:"thumbs-up",color:"currentColor",library:"lucide",class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:i?"100%":"0%"}},a("ui-icon",{name:"thumbs-up",color:"currentColor",library:"lucide"})))),a("button",{type:"button",class:{"rating-item":!0,"rating-item-thumb":!0,"rating-item-active":t,"rating-item-thumb-down":!0},onClick:()=>this.handleClick(-1),onMouseEnter:()=>this.handleMouseEnter(-1),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":"Thumbs down"},a("div",{class:"rating-icon-container"},a("ui-icon",{name:"thumbs-down",library:"lucide",class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:t?"100%":"0%"}},a("ui-icon",{name:"thumbs-down",library:"lucide"}))))]}render(){const i={"rating-container":!0,"rating-rtl":this.rtl||"rtl"===this.el.dir||!!this.el.closest('[dir="rtl"]'),[`rating-size-${this.size}`]:!0,[`rating-variant-${this.variant}`]:!0,"rating-readonly":this.readonly,"rating-disabled":this.disabled,"rating-glow":this.glow,"rating-victory":this.isVictory,"rating-invalid":this.invalid},t=this.getLabels(),r="thumb"===this.type?1===this.value?"Liked":-1===this.value?"Disliked":"":t[(this.hoverValue||this.value)-1],e=this.description&&a("div",{key:"ddad90f4a42a3c07145f31156cdc6495f33b0bee",class:`rating-description rating-description-${this.descriptionPosition}`},this.description),n=this.invalid&&this.errorMessage?a("div",{class:"rating-helper rating-error"},a("ui-icon",{name:"alert-circle",library:"lucide",size:"12px"}),a("span",null,this.errorMessage)):this.helperText?a("div",{class:"rating-helper"},this.helperText):null,s={"--rating-active-color":this.activeColor||`var(--rating-${this.color})`,"--rating-fill-color":this.activeFillColor||"currentColor"},o=this.showSummary&&r?a("div",{class:`rating-summary rating-summary-${this.summaryPosition}`},a("div",{class:"summary-divider"}),a("div",{class:"summary-content"},a("p",{class:"summary-label"},r),a("p",{class:"summary-value"},(this.hoverValue||this.value).toFixed(0)," / ",this.max))):null;return a("div",{key:"09946cb1ba974009053c5cdf39a92c904f485cc7",class:i,style:s,tabindex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,role:"group","aria-label":"Rating component"},a("div",{key:"8c56d47b79ddd22a69fd58dee44f13182ebabc3f",class:"rating-items-container"},a("div",{key:"6c9206ec1dc844689631a32799dd368bef1160b0",class:"rating-items"},"star"===this.type&&this.renderStarRating(),"smiley"===this.type&&this.renderSmileyRating(),"thumb"===this.type&&this.renderThumbRating(),"side"===this.descriptionPosition&&e),"side"===this.summaryPosition&&o),this.showValue&&!this.showSummary&&"thumb"!==this.type&&a("div",{key:"2b733f67e6c01f31e789b79ea1f652a63edcde39",class:"rating-value"},r&&a("span",{key:"d5ca42772c409783b2ef5dea7da47944df87eec9",class:"rating-label"},r),a("span",{key:"860c841ed2d7b2e642ad132d91bcd731e1a974c2",class:"rating-number"},(this.hoverValue||this.value).toFixed(this.allowHalf?1:0)," / ",this.max)),this.showReviews&&this.totalReviews>0&&a("div",{key:"d3f05521d7337580d120356ce44cc149211fe28f",class:"rating-total-reviews"},a("span",{key:"4f3c9863f74bb3e2a5f2d46cb94bef7e053471a1",class:"review-dot"},"•"),a("span",{key:"9eb1794ad9f571667afd26857719bc38c68f5dbf",class:"review-count"},"(",this.totalReviews," reviews)")),"bottom"===this.descriptionPosition&&e,"bottom"===this.summaryPosition&&o,this.showHistogram&&this.renderHistogram(),n,this.particles.map((i=>a("div",{key:i.id,class:"rating-victory-particle",style:{"--tx":`${i.tx}px`,"--ty":`${i.ty}px`,"--rot":`${i.rot}deg`,"--clr":i.clr,"--size":`${i.size}px`,left:"50%",top:"50%"}}))))}static get style(){return'.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}'}},[513,"ui-rating",{type:[1],value:[1026],max:[2],size:[1],color:[1],activeColor:[1,"active-color"],activeFillColor:[1,"active-fill-color"],readonly:[4],disabled:[4],allowHalf:[4,"allow-half"],showValue:[4,"show-value"],description:[1],descriptionPosition:[1,"description-position"],labels:[1],glow:[4],haptic:[4],victoryGlow:[4,"victory-glow"],variant:[1],clearable:[4],iconName:[1,"icon-name"],iconLibrary:[1,"icon-library"],image:[1],colorMap:[1,"color-map"],invalid:[4],errorMessage:[1,"error-message"],showReviews:[4,"show-reviews"],totalReviews:[2,"total-reviews"],helperText:[1,"helper-text"],showHistogram:[4,"show-histogram"],summaryData:[1,"summary-data"],useEmoji:[4,"use-emoji"],showSummary:[4,"show-summary"],summaryPosition:[1,"summary-position"],rtl:[4],hoverValue:[32],isVictory:[32],particles:[32]}]);function o(){"undefined"!=typeof customElements&&["ui-rating","ui-icon"].forEach((i=>{switch(i){case"ui-rating":customElements.get(e(i))||customElements.define(e(i),s);break;case"ui-icon":customElements.get(e(i))||n()}}))}export{s as R,o as d}
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as t,createEvent as r,h as a,transformTag as e}from"@stencil/core/internal/client";import{d as n}from"./icon.js";import{d as s}from"./loader.js";const o=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.ratingChange=r(this,"ratingChange",7)}get el(){return this}type="star";value=0;max=5;size="md";color="warning";activeColor;activeFillColor;readonly=!1;disabled=!1;allowHalf=!1;showValue=!1;description;descriptionPosition="bottom";labels;glow=!1;haptic=!1;victoryGlow=!1;variant="default";clearable=!1;iconName="star";iconLibrary="lucide";image;colorMap;invalid=!1;errorMessage;showReviews=!1;totalReviews=0;helperText;showHistogram=!1;summaryData;useEmoji=!1;showSummary=!1;summaryPosition="side";rtl=!1;hoverValue=0;isVictory=!1;particles=[];ratingChange;getLabels(){if(this.labels)try{return"string"==typeof this.labels?JSON.parse(this.labels):this.labels}catch{return[]}return[]}handleClick=i=>{this.readonly||this.disabled||(this.value="thumb"===this.type?this.value===i?0:i:this.clearable&&this.value===i?0:i,this.haptic&&"vibrate"in navigator&&navigator.vibrate(this.value===this.max?[15,30,15]:10),this.value===this.max&&this.triggerVictory(),this.ratingChange.emit(this.value))};handleKeyDown=i=>{if(this.readonly||this.disabled)return;let t=this.value;const r=this.allowHalf?.5:1,a=this.rtl||"rtl"===this.el.dir||!!this.el.closest('[dir="rtl"]');switch(i.key){case"ArrowRight":case"ArrowUp":t=a?Math.max(0,this.value-r):Math.min(this.max,this.value+r),i.preventDefault();break;case"ArrowLeft":case"ArrowDown":t=a?Math.min(this.max,this.value+r):Math.max(0,this.value-r),i.preventDefault();break;case"Home":t=0,i.preventDefault();break;case"End":t=this.max,i.preventDefault();break;default:return}t!==this.value&&(this.value=t,this.ratingChange.emit(this.value),this.value===this.max&&this.triggerVictory())};triggerVictory=()=>{if(!this.victoryGlow)return;this.isVictory=!0;const i=Array.from({length:24}).map(((i,t)=>({id:Date.now()+t,tx:500*(Math.random()-.5),ty:-(300*Math.random()+100),rot:720*Math.random(),clr:["#fbbf24","#f59e0b","#3bf673","#10b981","#ef4444","#6366f1"][t%6],size:8*Math.random()+4})));this.particles=i,setTimeout((()=>{this.isVictory=!1,this.particles=[]}),1500)};handleMouseEnter=i=>{this.readonly||this.disabled||(this.hoverValue=i)};handleMouseLeave=()=>{this.readonly||this.disabled||(this.hoverValue=0)};renderStarRating(){const i=[],t=this.hoverValue||this.value,r=this.colorMap?JSON.parse(this.colorMap):null;for(let e=1;e<=this.max;e++){const n=t>=e,s=this.allowHalf&&t>=e-.5&&t<e,o=r&&r[e-1]?r[e-1]:this.activeColor||this.color,l=this.activeFillColor||"currentColor";i.push(a("button",{type:"button",class:{"rating-item":!0,"rating-item-active":n||s,"rating-item-half":s,"rating-item-hover":this.hoverValue>=e,[`rating-color-${o}`]:!!o},onClick:()=>this.handleClick(e),onMouseEnter:()=>this.handleMouseEnter(e),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":`Rate ${e} out of ${this.max}`},a("div",{class:"rating-icon-container"},this.image?a("img",{src:this.image,class:"rating-icon-bg",alt:"rating"}):a("ui-icon",{name:this.iconName,color:"currentColor",library:this.iconLibrary,size:this.size,class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:s?"50%":n?"100% ":"0%"}},this.image?a("img",{src:this.image,alt:"rating active"}):a("ui-icon",{name:this.iconName,color:"currentColor",library:this.iconLibrary,size:this.size,fill:l})))))}return i}renderHistogram(){if(!this.summaryData)return null;try{const i="string"==typeof this.summaryData?JSON.parse(this.summaryData):this.summaryData;if(!Array.isArray(i))return null;const t=i.reduce(((i,t)=>i+t),0),r=this.activeColor||`var(--rating-${this.color})`;return a("div",{class:"rating-histogram"},i.map(((e,n)=>{const s=t>0?e/t*100:0;return a("div",{class:"histogram-row"},a("span",{class:"histogram-label"},i.length-n," ",a("ui-icon",{name:"star",library:"lucide",size:"10px"})),a("div",{class:"histogram-bar-container"},a("div",{class:"histogram-bar-fill",style:{width:`${s}%`,backgroundColor:r}})),a("span",{class:"histogram-count"},e))})))}catch{return null}}renderSmileyRating(){const i=[],t=this.getLabels(),r=["frown","meh","smile","laugh","heart"],e=["😢","😕","😐","🙂","😄"],n=this.hoverValue||this.value;for(let s=1;s<=this.max;s++){const o=this.value===s,l=n===s||this.useEmoji&&n>=s,g=r[s-1]||"smile";i.push(a("div",{class:"smiley-item-wrapper"},a("button",{type:"button",class:{"rating-item":!0,"rating-item-smiley":!0,"rating-item-active":l,"rating-item-selected":o,"rating-item-hover":this.hoverValue===s,"rating-item-emoji":this.useEmoji},onClick:()=>this.handleClick(s),onMouseEnter:()=>this.handleMouseEnter(s),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":t[s-1]||`Rate ${s} out of ${this.max}`},this.useEmoji?a("span",{class:"emoji-display"},n>=s||o?e[s-1]||"🙂":"⚪"):a("div",{class:"rating-icon-container"},a("ui-icon",{name:g,color:"currentColor",library:"lucide",size:this.size,class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:l?"100%":"0%"}},a("ui-icon",{name:g,color:"currentColor",library:"lucide",size:this.size})))),t[s-1]&&a("span",{class:"smiley-label"},t[s-1])))}return i}renderThumbRating(){const i=1===this.value||1===this.hoverValue,t=-1===this.value||-1===this.hoverValue;return[a("button",{type:"button",class:{"rating-item":!0,"rating-item-thumb":!0,"rating-item-active":i,"rating-item-thumb-up":!0},onClick:()=>this.handleClick(1),onMouseEnter:()=>this.handleMouseEnter(1),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":"Thumbs up"},a("div",{class:"rating-icon-container"},a("ui-icon",{name:"thumbs-up",color:"currentColor",library:"lucide",class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:i?"100%":"0%"}},a("ui-icon",{name:"thumbs-up",color:"currentColor",library:"lucide"})))),a("button",{type:"button",class:{"rating-item":!0,"rating-item-thumb":!0,"rating-item-active":t,"rating-item-thumb-down":!0},onClick:()=>this.handleClick(-1),onMouseEnter:()=>this.handleMouseEnter(-1),onMouseLeave:this.handleMouseLeave,disabled:this.disabled||this.readonly,"aria-label":"Thumbs down"},a("div",{class:"rating-icon-container"},a("ui-icon",{name:"thumbs-down",library:"lucide",class:"rating-icon-bg"}),a("div",{class:"rating-icon-fill",style:{width:t?"100%":"0%"}},a("ui-icon",{name:"thumbs-down",library:"lucide"}))))]}render(){const i={"rating-container":!0,"rating-rtl":this.rtl||"rtl"===this.el.dir||!!this.el.closest('[dir="rtl"]'),[`rating-size-${this.size}`]:!0,[`rating-variant-${this.variant}`]:!0,"rating-readonly":this.readonly,"rating-disabled":this.disabled,"rating-glow":this.glow,"rating-victory":this.isVictory,"rating-invalid":this.invalid},t=this.getLabels(),r="thumb"===this.type?1===this.value?"Liked":-1===this.value?"Disliked":"":t[(this.hoverValue||this.value)-1],e=this.description&&a("div",{key:"ddad90f4a42a3c07145f31156cdc6495f33b0bee",class:`rating-description rating-description-${this.descriptionPosition}`},this.description),n=this.invalid&&this.errorMessage?a("div",{class:"rating-helper rating-error"},a("ui-icon",{name:"alert-circle",library:"lucide",size:"12px"}),a("span",null,this.errorMessage)):this.helperText?a("div",{class:"rating-helper"},this.helperText):null,s={"--rating-active-color":this.activeColor||`var(--rating-${this.color})`,"--rating-fill-color":this.activeFillColor||"currentColor"},o=this.showSummary&&r?a("div",{class:`rating-summary rating-summary-${this.summaryPosition}`},a("div",{class:"summary-divider"}),a("div",{class:"summary-content"},a("p",{class:"summary-label"},r),a("p",{class:"summary-value"},(this.hoverValue||this.value).toFixed(0)," / ",this.max))):null;return a("div",{key:"09946cb1ba974009053c5cdf39a92c904f485cc7",class:i,style:s,tabindex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,role:"group","aria-label":"Rating component"},a("div",{key:"8c56d47b79ddd22a69fd58dee44f13182ebabc3f",class:"rating-items-container"},a("div",{key:"6c9206ec1dc844689631a32799dd368bef1160b0",class:"rating-items"},"star"===this.type&&this.renderStarRating(),"smiley"===this.type&&this.renderSmileyRating(),"thumb"===this.type&&this.renderThumbRating(),"side"===this.descriptionPosition&&e),"side"===this.summaryPosition&&o),this.showValue&&!this.showSummary&&"thumb"!==this.type&&a("div",{key:"2b733f67e6c01f31e789b79ea1f652a63edcde39",class:"rating-value"},r&&a("span",{key:"d5ca42772c409783b2ef5dea7da47944df87eec9",class:"rating-label"},r),a("span",{key:"860c841ed2d7b2e642ad132d91bcd731e1a974c2",class:"rating-number"},(this.hoverValue||this.value).toFixed(this.allowHalf?1:0)," / ",this.max)),this.showReviews&&this.totalReviews>0&&a("div",{key:"d3f05521d7337580d120356ce44cc149211fe28f",class:"rating-total-reviews"},a("span",{key:"4f3c9863f74bb3e2a5f2d46cb94bef7e053471a1",class:"review-dot"},"•"),a("span",{key:"9eb1794ad9f571667afd26857719bc38c68f5dbf",class:"review-count"},"(",this.totalReviews," reviews)")),"bottom"===this.descriptionPosition&&e,"bottom"===this.summaryPosition&&o,this.showHistogram&&this.renderHistogram(),n,this.particles.map((i=>a("div",{key:i.id,class:"rating-victory-particle",style:{"--tx":`${i.tx}px`,"--ty":`${i.ty}px`,"--rot":`${i.rot}deg`,"--clr":i.clr,"--size":`${i.size}px`,left:"50%",top:"50%"}}))))}static get style(){return'.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}'}},[513,"ui-rating",{type:[1],value:[1026],max:[2],size:[1],color:[1],activeColor:[1,"active-color"],activeFillColor:[1,"active-fill-color"],readonly:[4],disabled:[4],allowHalf:[4,"allow-half"],showValue:[4,"show-value"],description:[1],descriptionPosition:[1,"description-position"],labels:[1],glow:[4],haptic:[4],victoryGlow:[4,"victory-glow"],variant:[1],clearable:[4],iconName:[1,"icon-name"],iconLibrary:[1,"icon-library"],image:[1],colorMap:[1,"color-map"],invalid:[4],errorMessage:[1,"error-message"],showReviews:[4,"show-reviews"],totalReviews:[2,"total-reviews"],helperText:[1,"helper-text"],showHistogram:[4,"show-histogram"],summaryData:[1,"summary-data"],useEmoji:[4,"use-emoji"],showSummary:[4,"show-summary"],summaryPosition:[1,"summary-position"],rtl:[4],hoverValue:[32],isVictory:[32],particles:[32]}]);function l(){"undefined"!=typeof customElements&&["ui-rating","ui-icon","ui-loader"].forEach((i=>{switch(i){case"ui-rating":customElements.get(e(i))||customElements.define(e(i),o);break;case"ui-icon":customElements.get(e(i))||n();break;case"ui-loader":customElements.get(e(i))||s()}}))}export{o as R,l as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as l,a as n}from"./badge.js";import{d as o}from"./icon.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.panelResize=a(this,"panelResize",7),this.panelCollapse=a(this,"panelCollapse",7),this.resizeStart=a(this,"resizeStart",7),this.resizeEnd=a(this,"resizeEnd",7)}get el(){return this}direction="horizontal";panels=[];handleSize=8;handleColor="#d1d5db";handleHoverColor="#3DCD58";minPanelSize=10;maxPanelSize=-1;saveState=!1;stateKey="resizable-panel-state";theme="light";animated=!1;showHandleIcon=!0;snapToEdge=!1;snapThreshold=30;internalPanels=[];isDragging=!1;dragHandleIndex=-1;dragStartPos=0;dragStartSizes=[];panelResize;panelCollapse;resizeStart;resizeEnd;containerRef;panelRefs=[];hasMouseMoved=!1;applyResizeDelta(e,i,a){if(!a||e<0)return;const s=[...this.internalPanels],t=s[e],r=s[e+1];if(!t||!r)return;const l=(this.dragStartSizes[e]??t.size??0)+(this.dragStartSizes[e+1]??r.size??0),n=i/a*100;let o=(this.dragStartSizes[e]??t.size??0)+n,c=(this.dragStartSizes[e+1]??r.size??0)-n;const h=t.minSize??this.minPanelSize,d=r.minSize??this.minPanelSize,p=t.maxSize??this.maxPanelSize,b=r.maxSize??this.maxPanelSize;o<h&&(o=h,c=l-o),c<d&&(c=d,o=l-c),p>0&&o>p&&(o=p,c=l-o),b>0&&c>b&&(c=b,o=l-c);const z=this.snapToEdge&&this.snapThreshold>0&&a>0?this.snapThreshold/a*100:0,u=[];let m=o,f=c;if(z>0){if(m<=z){const e=t.collapsed;t.collapsed=!0,m=0,f=l,r.collapsed=!1,e||u.push({panel:t,collapsed:!0})}else t.collapsed&&m>z&&(t.collapsed=!1,m=Math.max(m,h),f=l-m,u.push({panel:t,collapsed:!1}));if(f<=z){const e=r.collapsed;r.collapsed=!0,f=0,m=l,t.collapsed=!1,e||u.push({panel:r,collapsed:!0})}else r.collapsed&&f>z&&(r.collapsed=!1,f=Math.max(f,d),m=l-f,u.push({panel:r,collapsed:!1}))}else t.collapsed&&m>0&&(t.collapsed=!1),r.collapsed&&f>0&&(r.collapsed=!1);const g=t.size!==m||r.size!==f||u.length>0;t.size=m,r.size=f,this.internalPanels=[...s],g&&(this.panelResize.emit({panels:this.internalPanels,index:e}),u.forEach((e=>this.panelCollapse.emit(e))))}componentWillLoad(){this.parsePanels(),this.saveState&&this.loadState()}handlePanelsChange(){this.isDragging||this.parsePanels()}parsePanels(){let e="string"==typeof this.panels?JSON.parse(this.panels):this.panels;e&&0!==e.length||(e=[{id:"panel-1",size:50},{id:"panel-2",size:50}]);const i=e.reduce(((e,i)=>e+(i.size||0)),0);e=i>0&&Math.abs(i-100)>.1?e.map((e=>({...e,size:(e.size||0)/i*100,minSize:e.minSize||this.minPanelSize,maxSize:e.maxSize||this.maxPanelSize,resizable:!1!==e.resizable,collapsible:e.collapsible||!1,collapsed:e.collapsed||!1,collapseDirection:e.collapseDirection||("horizontal"===this.direction?"left":"up")}))):e.map((e=>({...e,minSize:e.minSize||this.minPanelSize,maxSize:e.maxSize||this.maxPanelSize,resizable:!1!==e.resizable,collapsible:e.collapsible||!1,collapsed:e.collapsed||!1,collapseDirection:e.collapseDirection||("horizontal"===this.direction?"left":"up")}))),this.internalPanels=e}loadState(){if(this.saveState)try{const e=localStorage.getItem(this.stateKey);if(e){const i=JSON.parse(e);i&&i.length===this.internalPanels.length&&(this.internalPanels=this.internalPanels.map(((e,a)=>({...e,size:i[a]?.size||e.size,collapsed:i[a]?.collapsed||e.collapsed}))))}}catch(e){console.warn("Failed to load panel state:",e)}}saveStateToStorage(){if(this.saveState)try{const e=this.internalPanels.map((e=>({id:e.id,size:e.size,collapsed:e.collapsed})));localStorage.setItem(this.stateKey,JSON.stringify(e))}catch(e){console.warn("Failed to save panel state:",e)}}handleMouseDown(e,i){const a=this.internalPanels[e],s=this.internalPanels[e+1];a?.resizable&&!1!==s?.resizable&&(i.preventDefault(),this.isDragging=!0,this.dragHandleIndex=e,this.dragStartPos="horizontal"===this.direction?i.clientX:i.clientY,this.dragStartSizes=this.internalPanels.map((e=>e.size??0)),this.hasMouseMoved=!1,this.resizeStart.emit({index:e}),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}handleMouseMove=e=>{this.isDragging&&-1!==this.dragHandleIndex&&(e.preventDefault(),this.hasMouseMoved=!0,this.applyResizeDelta(this.dragHandleIndex,("horizontal"===this.direction?e.clientX:e.clientY)-this.dragStartPos,"horizontal"===this.direction?this.containerRef.offsetWidth:this.containerRef.offsetHeight))};handleMouseUp=()=>{if(this.isDragging){const e=this.hasMouseMoved,i=this.dragHandleIndex,a=this.internalPanels.map((e=>e.size??0));e&&(this.resizeEnd.emit({index:i,sizes:a.map((e=>e??0))}),this.saveStateToStorage()),this.dragHandleIndex=-1,this.hasMouseMoved=!1,this.isDragging=!1}document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)};handleTouchStart(e,i){const a=this.internalPanels[e],s=this.internalPanels[e+1];if(!a?.resizable||!1===s?.resizable)return;i.preventDefault();const t=i.touches[0];this.isDragging=!0,this.dragHandleIndex=e,this.dragStartPos="horizontal"===this.direction?t.clientX:t.clientY,this.dragStartSizes=this.internalPanels.map((e=>e.size??0)),this.hasMouseMoved=!1,this.resizeStart.emit({index:e}),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd)}handleTouchMove=e=>{if(!this.isDragging||-1===this.dragHandleIndex)return;e.preventDefault(),this.hasMouseMoved=!0;const i=e.touches[0];this.applyResizeDelta(this.dragHandleIndex,("horizontal"===this.direction?i.clientX:i.clientY)-this.dragStartPos,"horizontal"===this.direction?this.containerRef.offsetWidth:this.containerRef.offsetHeight)};handleTouchEnd=()=>{if(this.isDragging){const e=this.hasMouseMoved,i=this.dragHandleIndex,a=this.internalPanels.map((e=>e.size??0));e&&(this.resizeEnd.emit({index:i,sizes:a.map((e=>e??0))}),this.saveStateToStorage()),this.dragHandleIndex=-1,this.hasMouseMoved=!1,this.isDragging=!1}document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd)};toggleCollapse(e){const i=this.internalPanels[e];if(!i.collapsible)return;const a=[...this.internalPanels],s=i.collapseDirection||("horizontal"===this.direction?"left":"up");if(i.collapsed){const t=i.minSize||30;let r=-1;if("horizontal"===this.direction?"left"===s&&e<a.length-1?r=e+1:"right"===s&&e>0&&(r=e-1):"top"===s&&e<a.length-1?r=e+1:"bottom"===s&&e>0&&(r=e-1),-1===r||a[r].collapsed){const s=a.filter(((i,s)=>s!==e&&!a[s].collapsed));if(s.length>0){const i=t/s.length;a.forEach(((s,t)=>{t===e||s.collapsed||(a[t]={...s,size:Math.max(s.minSize||10,(s.size??0)-i)})}))}a[e]={...i,collapsed:!1,size:t}}else{const s=Math.min(t,(a[r].size??0)-(a[r].minSize||10));a[r]={...a[r],size:(a[r].size??0)-s},a[e]={...i,collapsed:!1,size:s}}}else{const t=a[e].size??0;let r=-1;if("horizontal"===this.direction?"left"===s&&e<a.length-1?r=e+1:"right"===s&&e>0&&(r=e-1):"up"===s&&e<a.length-1?r=e+1:"bottom"===s&&e>0&&(r=e-1),-1===r||a[r].collapsed){const i=a.filter(((i,s)=>s!==e&&!a[s].collapsed));if(i.length>0){const s=t/i.length;a.forEach(((i,t)=>{t===e||i.collapsed||(a[t]={...i,size:(i.size??0)+s})}))}}else a[r]={...a[r],size:(a[r].size??0)+t};a[e]={...i,collapsed:!0,size:0}}this.internalPanels=a,this.panelCollapse.emit({panel:a[e],collapsed:!!a[e].collapsed}),this.saveStateToStorage()}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd)}getCollapseIcon(e){const i=e.collapseDirection||("horizontal"===this.direction?"left":"up");if(!e.collapsed)return i;switch(i){case"left":default:return"right";case"right":return"left";case"top":return"bottom";case"bottom":return"top"}}render(){return s(t,{key:"222dabdb3f919a430a8dc35008607dd9ad21f670"},s("div",{key:"6fab04ac24283a3dc1be30ca97488639021e0c13",class:{"resizable-container":!0,[`resizable-${this.direction}`]:!0,[`resizable-theme-${this.theme}`]:!0,"resizable-dragging":this.isDragging,"resizable-animated":this.animated&&!this.isDragging},ref:e=>this.containerRef=e},this.internalPanels.map(((e,i)=>s("div",{key:e.id,class:"panel-wrapper",style:{["horizontal"===this.direction?"width":"height"]:e.collapsed?`${this.handleSize}px`:`${e.size}%`}},s("div",{class:{"resizable-panel":!0,"panel-collapsed":!!e.collapsed},ref:e=>this.panelRefs[i]=e},s("slot",{name:e.id})),i<this.internalPanels.length-1&&s("div",{class:{"resize-handle":!0,[`resize-handle-${this.direction}`]:!0,"resize-handle-active":this.dragHandleIndex===i,"resize-handle-disabled":!e.resizable||!1===this.internalPanels[i+1]?.resizable},style:{["horizontal"===this.direction?"width":"height"]:`${this.handleSize}px`,backgroundColor:this.dragHandleIndex===i?this.handleHoverColor:this.handleColor},onMouseDown:e=>this.handleMouseDown(i,e),onTouchStart:e=>this.handleTouchStart(i,e),onDblClick:()=>this.toggleCollapse(i)},this.showHandleIcon&&e.resizable&&!1!==this.internalPanels[i+1]?.resizable&&s("div",{class:"resize-handle-icon"},s("ui-icon",{name:"grip-"+("horizontal"===this.direction?"vertical":"lines"),library:"fontawesome"})),e.collapsible&&s("ui-button",{variant:"ghost",class:"collapse-button",onClick:e=>{e.stopPropagation(),e.preventDefault(),this.toggleCollapse(i)},onMouseDown:e=>{e.stopPropagation(),e.preventDefault()},ariaLabel:e.collapsed?"Expand":"Collapse",icon:`chevron-${this.getCollapseIcon(e)}`,iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))))))}static get watchers(){return{panels:[{handlePanelsChange:0}]}}static get style(){return'.sr-only.sc-ui-resizable-panel{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.sc-ui-resizable-panel{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}.sc-ui-resizable-panel-h{display:block;width:100%;height:100%;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.resizable-container.sc-ui-resizable-panel{display:flex;width:100%;height:100%;overflow:hidden;position:relative}.resizable-container.resizable-horizontal.sc-ui-resizable-panel{flex-direction:row}.resizable-container.resizable-vertical.sc-ui-resizable-panel{flex-direction:column}.resizable-container.resizable-theme-dark.sc-ui-resizable-panel{background:var(--bg-secondary, #0f172a);color:var(--text-standard, #f3f4f6)}.resizable-container.resizable-dragging.sc-ui-resizable-panel{cursor:col-resize}.resizable-container.resizable-dragging.resizable-vertical.sc-ui-resizable-panel{cursor:row-resize}.resizable-container.resizable-dragging.sc-ui-resizable-panel{user-select:none}.resizable-container.resizable-dragging.sc-ui-resizable-panel *.sc-ui-resizable-panel{pointer-events:none}.resizable-container.resizable-animated.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel{transition:width 0.2s ease, height 0.2s ease}.panel-wrapper.sc-ui-resizable-panel{display:flex;flex-direction:row;flex:0 0 auto;min-width:0;min-height:0}.resizable-vertical.sc-ui-resizable-panel .panel-wrapper.sc-ui-resizable-panel{flex-direction:column}.resizable-panel.sc-ui-resizable-panel{overflow:auto;position:relative;background:var(--bg-primary, #ffffff);border:none;min-width:0;min-height:0;width:100%;height:100%;flex-shrink:0}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar{width:8px;height:8px}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-track{background:var(--bg-secondary, #f3f4f6)}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:4px}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #9ca3af)}.resizable-panel.panel-collapsed.sc-ui-resizable-panel{display:none}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel{background:var(--bg-secondary, #0f172a);color:var(--text-standard, #f3f4f6)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-track{background:var(--bg-primary, #1f2937)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb{background:var(--color-primary, #4b5563)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #6b7280)}.resize-handle.sc-ui-resizable-panel{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;transition:all 0.2s;z-index:10}.resize-handle.resize-handle-horizontal.sc-ui-resizable-panel{cursor:col-resize;width:1px;height:100%}.resize-handle.resize-handle-horizontal.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);width:2px}.resize-handle.resize-handle-vertical.sc-ui-resizable-panel{cursor:row-resize;height:1px;width:100%}.resize-handle.resize-handle-vertical.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);height:2px}.resize-handle.resize-handle-active.sc-ui-resizable-panel{background:var(--color-success, #3dcd58)}.resize-handle.resize-handle-disabled.sc-ui-resizable-panel{cursor:not-allowed;opacity:0.5}.resize-handle.resize-handle-disabled.sc-ui-resizable-panel:hover{background:transparent}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.sc-ui-resizable-panel{background:transparent}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58)}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.resize-handle-disabled.sc-ui-resizable-panel:hover{background:transparent}.resize-handle-icon.sc-ui-resizable-panel{pointer-events:none;color:var(--text-muted, #6b7280);font-size:12px;opacity:0;transition:opacity 0.2s}.resize-handle.sc-ui-resizable-panel:hover .resize-handle-icon.sc-ui-resizable-panel{opacity:1}.resize-handle-active.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{opacity:1;color:var(--text-standard, #ffffff)}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{color:var(--text-muted, #9ca3af)}.resize-handle-active.sc-ui-resizable-panel .resizable-theme-dark.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{color:var(--text-standard, #ffffff)}.collapse-button.sc-ui-resizable-panel{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong, #d1d5db);background:var(--bg-primary, #ffffff);color:var(--text-muted, #6b7280);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all 0.2s;pointer-events:auto;z-index:20;opacity:0.8;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.resize-handle.sc-ui-resizable-panel:hover .collapse-button.sc-ui-resizable-panel{opacity:1;background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #9ca3af)}.collapse-button.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58) !important;border-color:var(--color-success, #3dcd58) !important;color:var(--text-standard, #ffffff) !important;transform:translate(-50%, -50%) scale(1.2)}.collapse-button.sc-ui-resizable-panel:active{transform:translate(-50%, -50%) scale(0.95)}.resizable-theme-dark.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{background:var(--color-primary, #374151);border-color:var(--border-strong, #4b5563);color:var(--text-muted, #9ca3af);opacity:0.8}.resizable-theme-dark.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);border-color:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.resize-handle-horizontal.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{top:50%;left:50%}.resize-handle-vertical.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{top:50%;left:50%}.resizable-panel.sc-ui-resizable-panel ui-resizable-panel.sc-ui-resizable-panel{width:100%;height:100%;border:none}'}},[774,"ui-resizable-panel",{direction:[1],panels:[1],handleSize:[2,"handle-size"],handleColor:[1,"handle-color"],handleHoverColor:[1,"handle-hover-color"],minPanelSize:[2,"min-panel-size"],maxPanelSize:[2,"max-panel-size"],saveState:[4,"save-state"],stateKey:[1,"state-key"],theme:[1],animated:[4],showHandleIcon:[4,"show-handle-icon"],snapToEdge:[4,"snap-to-edge"],snapThreshold:[2,"snap-threshold"],internalPanels:[32],isDragging:[32],dragHandleIndex:[32],dragStartPos:[32],dragStartSizes:[32]},void 0,{panels:[{handlePanelsChange:0}]}]);function h(){"undefined"!=typeof customElements&&["ui-resizable-panel","ui-badge","ui-button","ui-icon"].forEach((e=>{switch(e){case"ui-resizable-panel":customElements.get(r(e))||customElements.define(r(e),c);break;case"ui-badge":customElements.get(r(e))||n();break;case"ui-button":customElements.get(r(e))||l();break;case"ui-icon":customElements.get(r(e))||o()}}))}export{c as A,h as d}
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as l,a as n}from"./badge.js";import{d as o}from"./icon.js";import{d as c}from"./loader.js";const h=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.panelResize=a(this,"panelResize",7),this.panelCollapse=a(this,"panelCollapse",7),this.resizeStart=a(this,"resizeStart",7),this.resizeEnd=a(this,"resizeEnd",7)}get el(){return this}direction="horizontal";panels=[];handleSize=8;handleColor="#d1d5db";handleHoverColor="#3DCD58";minPanelSize=10;maxPanelSize=-1;saveState=!1;stateKey="resizable-panel-state";theme="light";animated=!1;showHandleIcon=!0;snapToEdge=!1;snapThreshold=30;internalPanels=[];isDragging=!1;dragHandleIndex=-1;dragStartPos=0;dragStartSizes=[];panelResize;panelCollapse;resizeStart;resizeEnd;containerRef;panelRefs=[];hasMouseMoved=!1;applyResizeDelta(e,i,a){if(!a||e<0)return;const s=[...this.internalPanels],t=s[e],r=s[e+1];if(!t||!r)return;const l=(this.dragStartSizes[e]??t.size??0)+(this.dragStartSizes[e+1]??r.size??0),n=i/a*100;let o=(this.dragStartSizes[e]??t.size??0)+n,c=(this.dragStartSizes[e+1]??r.size??0)-n;const h=t.minSize??this.minPanelSize,d=r.minSize??this.minPanelSize,p=t.maxSize??this.maxPanelSize,b=r.maxSize??this.maxPanelSize;o<h&&(o=h,c=l-o),c<d&&(c=d,o=l-c),p>0&&o>p&&(o=p,c=l-o),b>0&&c>b&&(c=b,o=l-c);const z=this.snapToEdge&&this.snapThreshold>0&&a>0?this.snapThreshold/a*100:0,u=[];let m=o,f=c;if(z>0){if(m<=z){const e=t.collapsed;t.collapsed=!0,m=0,f=l,r.collapsed=!1,e||u.push({panel:t,collapsed:!0})}else t.collapsed&&m>z&&(t.collapsed=!1,m=Math.max(m,h),f=l-m,u.push({panel:t,collapsed:!1}));if(f<=z){const e=r.collapsed;r.collapsed=!0,f=0,m=l,t.collapsed=!1,e||u.push({panel:r,collapsed:!0})}else r.collapsed&&f>z&&(r.collapsed=!1,f=Math.max(f,d),m=l-f,u.push({panel:r,collapsed:!1}))}else t.collapsed&&m>0&&(t.collapsed=!1),r.collapsed&&f>0&&(r.collapsed=!1);const g=t.size!==m||r.size!==f||u.length>0;t.size=m,r.size=f,this.internalPanels=[...s],g&&(this.panelResize.emit({panels:this.internalPanels,index:e}),u.forEach((e=>this.panelCollapse.emit(e))))}componentWillLoad(){this.parsePanels(),this.saveState&&this.loadState()}handlePanelsChange(){this.isDragging||this.parsePanels()}parsePanels(){let e="string"==typeof this.panels?JSON.parse(this.panels):this.panels;e&&0!==e.length||(e=[{id:"panel-1",size:50},{id:"panel-2",size:50}]);const i=e.reduce(((e,i)=>e+(i.size||0)),0);e=i>0&&Math.abs(i-100)>.1?e.map((e=>({...e,size:(e.size||0)/i*100,minSize:e.minSize||this.minPanelSize,maxSize:e.maxSize||this.maxPanelSize,resizable:!1!==e.resizable,collapsible:e.collapsible||!1,collapsed:e.collapsed||!1,collapseDirection:e.collapseDirection||("horizontal"===this.direction?"left":"up")}))):e.map((e=>({...e,minSize:e.minSize||this.minPanelSize,maxSize:e.maxSize||this.maxPanelSize,resizable:!1!==e.resizable,collapsible:e.collapsible||!1,collapsed:e.collapsed||!1,collapseDirection:e.collapseDirection||("horizontal"===this.direction?"left":"up")}))),this.internalPanels=e}loadState(){if(this.saveState)try{const e=localStorage.getItem(this.stateKey);if(e){const i=JSON.parse(e);i&&i.length===this.internalPanels.length&&(this.internalPanels=this.internalPanels.map(((e,a)=>({...e,size:i[a]?.size||e.size,collapsed:i[a]?.collapsed||e.collapsed}))))}}catch(e){console.warn("Failed to load panel state:",e)}}saveStateToStorage(){if(this.saveState)try{const e=this.internalPanels.map((e=>({id:e.id,size:e.size,collapsed:e.collapsed})));localStorage.setItem(this.stateKey,JSON.stringify(e))}catch(e){console.warn("Failed to save panel state:",e)}}handleMouseDown(e,i){const a=this.internalPanels[e],s=this.internalPanels[e+1];a?.resizable&&!1!==s?.resizable&&(i.preventDefault(),this.isDragging=!0,this.dragHandleIndex=e,this.dragStartPos="horizontal"===this.direction?i.clientX:i.clientY,this.dragStartSizes=this.internalPanels.map((e=>e.size??0)),this.hasMouseMoved=!1,this.resizeStart.emit({index:e}),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}handleMouseMove=e=>{this.isDragging&&-1!==this.dragHandleIndex&&(e.preventDefault(),this.hasMouseMoved=!0,this.applyResizeDelta(this.dragHandleIndex,("horizontal"===this.direction?e.clientX:e.clientY)-this.dragStartPos,"horizontal"===this.direction?this.containerRef.offsetWidth:this.containerRef.offsetHeight))};handleMouseUp=()=>{if(this.isDragging){const e=this.hasMouseMoved,i=this.dragHandleIndex,a=this.internalPanels.map((e=>e.size??0));e&&(this.resizeEnd.emit({index:i,sizes:a.map((e=>e??0))}),this.saveStateToStorage()),this.dragHandleIndex=-1,this.hasMouseMoved=!1,this.isDragging=!1}document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)};handleTouchStart(e,i){const a=this.internalPanels[e],s=this.internalPanels[e+1];if(!a?.resizable||!1===s?.resizable)return;i.preventDefault();const t=i.touches[0];this.isDragging=!0,this.dragHandleIndex=e,this.dragStartPos="horizontal"===this.direction?t.clientX:t.clientY,this.dragStartSizes=this.internalPanels.map((e=>e.size??0)),this.hasMouseMoved=!1,this.resizeStart.emit({index:e}),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd)}handleTouchMove=e=>{if(!this.isDragging||-1===this.dragHandleIndex)return;e.preventDefault(),this.hasMouseMoved=!0;const i=e.touches[0];this.applyResizeDelta(this.dragHandleIndex,("horizontal"===this.direction?i.clientX:i.clientY)-this.dragStartPos,"horizontal"===this.direction?this.containerRef.offsetWidth:this.containerRef.offsetHeight)};handleTouchEnd=()=>{if(this.isDragging){const e=this.hasMouseMoved,i=this.dragHandleIndex,a=this.internalPanels.map((e=>e.size??0));e&&(this.resizeEnd.emit({index:i,sizes:a.map((e=>e??0))}),this.saveStateToStorage()),this.dragHandleIndex=-1,this.hasMouseMoved=!1,this.isDragging=!1}document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd)};toggleCollapse(e){const i=this.internalPanels[e];if(!i.collapsible)return;const a=[...this.internalPanels],s=i.collapseDirection||("horizontal"===this.direction?"left":"up");if(i.collapsed){const t=i.minSize||30;let r=-1;if("horizontal"===this.direction?"left"===s&&e<a.length-1?r=e+1:"right"===s&&e>0&&(r=e-1):"top"===s&&e<a.length-1?r=e+1:"bottom"===s&&e>0&&(r=e-1),-1===r||a[r].collapsed){const s=a.filter(((i,s)=>s!==e&&!a[s].collapsed));if(s.length>0){const i=t/s.length;a.forEach(((s,t)=>{t===e||s.collapsed||(a[t]={...s,size:Math.max(s.minSize||10,(s.size??0)-i)})}))}a[e]={...i,collapsed:!1,size:t}}else{const s=Math.min(t,(a[r].size??0)-(a[r].minSize||10));a[r]={...a[r],size:(a[r].size??0)-s},a[e]={...i,collapsed:!1,size:s}}}else{const t=a[e].size??0;let r=-1;if("horizontal"===this.direction?"left"===s&&e<a.length-1?r=e+1:"right"===s&&e>0&&(r=e-1):"up"===s&&e<a.length-1?r=e+1:"bottom"===s&&e>0&&(r=e-1),-1===r||a[r].collapsed){const i=a.filter(((i,s)=>s!==e&&!a[s].collapsed));if(i.length>0){const s=t/i.length;a.forEach(((i,t)=>{t===e||i.collapsed||(a[t]={...i,size:(i.size??0)+s})}))}}else a[r]={...a[r],size:(a[r].size??0)+t};a[e]={...i,collapsed:!0,size:0}}this.internalPanels=a,this.panelCollapse.emit({panel:a[e],collapsed:!!a[e].collapsed}),this.saveStateToStorage()}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd)}getCollapseIcon(e){const i=e.collapseDirection||("horizontal"===this.direction?"left":"up");if(!e.collapsed)return i;switch(i){case"left":default:return"right";case"right":return"left";case"top":return"bottom";case"bottom":return"top"}}render(){return s(t,{key:"e95db5c4b7d28becf543e44ab2d80a1fb5a34f5a"},s("div",{key:"c8c49f4e023ba66b1535447b567eebe685e9f464",class:{"resizable-container":!0,[`resizable-${this.direction}`]:!0,[`resizable-theme-${this.theme}`]:!0,"resizable-dragging":this.isDragging,"resizable-animated":this.animated&&!this.isDragging},ref:e=>this.containerRef=e},this.internalPanels.map(((e,i)=>s("div",{key:e.id,class:"panel-wrapper",style:{["horizontal"===this.direction?"width":"height"]:e.collapsed?`${this.handleSize}px`:`${e.size}%`}},s("div",{class:{"resizable-panel":!0,"panel-collapsed":!!e.collapsed},ref:e=>this.panelRefs[i]=e},s("slot",{name:e.id})),i<this.internalPanels.length-1&&s("div",{class:{"resize-handle":!0,[`resize-handle-${this.direction}`]:!0,"resize-handle-active":this.dragHandleIndex===i,"resize-handle-disabled":!e.resizable||!1===this.internalPanels[i+1]?.resizable},style:{["horizontal"===this.direction?"width":"height"]:`${this.handleSize}px`,backgroundColor:this.dragHandleIndex===i?this.handleHoverColor:this.handleColor},onMouseDown:e=>this.handleMouseDown(i,e),onTouchStart:e=>this.handleTouchStart(i,e),onDblClick:()=>this.toggleCollapse(i)},this.showHandleIcon&&e.resizable&&!1!==this.internalPanels[i+1]?.resizable&&s("div",{class:"resize-handle-icon"},s("ui-icon",{name:"grip-"+("horizontal"===this.direction?"vertical":"lines"),library:"fontawesome"})),e.collapsible&&s("ui-button",{variant:"ghost",class:"collapse-button",onClick:e=>{e.stopPropagation(),e.preventDefault(),this.toggleCollapse(i)},onMouseDown:e=>{e.stopPropagation(),e.preventDefault()},ariaLabel:e.collapsed?"Expand":"Collapse",icon:`chevron-${this.getCollapseIcon(e)}`,iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))))))}static get watchers(){return{panels:[{handlePanelsChange:0}]}}static get style(){return'.sr-only.sc-ui-resizable-panel{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.sc-ui-resizable-panel{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}.sc-ui-resizable-panel-h{display:block;width:100%;height:100%;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.resizable-container.sc-ui-resizable-panel{display:flex;width:100%;height:100%;overflow:hidden;position:relative}.resizable-container.resizable-horizontal.sc-ui-resizable-panel{flex-direction:row}.resizable-container.resizable-vertical.sc-ui-resizable-panel{flex-direction:column}.resizable-container.resizable-theme-dark.sc-ui-resizable-panel{background:var(--bg-secondary, #0f172a);color:var(--text-standard, #f3f4f6)}.resizable-container.resizable-dragging.sc-ui-resizable-panel{cursor:col-resize}.resizable-container.resizable-dragging.resizable-vertical.sc-ui-resizable-panel{cursor:row-resize}.resizable-container.resizable-dragging.sc-ui-resizable-panel{user-select:none}.resizable-container.resizable-dragging.sc-ui-resizable-panel *.sc-ui-resizable-panel{pointer-events:none}.resizable-container.resizable-animated.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel{transition:width 0.2s ease, height 0.2s ease}.panel-wrapper.sc-ui-resizable-panel{display:flex;flex-direction:row;flex:0 0 auto;min-width:0;min-height:0}.resizable-vertical.sc-ui-resizable-panel .panel-wrapper.sc-ui-resizable-panel{flex-direction:column}.resizable-panel.sc-ui-resizable-panel{overflow:auto;position:relative;background:var(--bg-primary, #ffffff);border:none;min-width:0;min-height:0;width:100%;height:100%;flex-shrink:0}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar{width:8px;height:8px}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-track{background:var(--bg-secondary, #f3f4f6)}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:4px}.resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #9ca3af)}.resizable-panel.panel-collapsed.sc-ui-resizable-panel{display:none}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel{background:var(--bg-secondary, #0f172a);color:var(--text-standard, #f3f4f6)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-track{background:var(--bg-primary, #1f2937)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb{background:var(--color-primary, #4b5563)}.resizable-theme-dark.sc-ui-resizable-panel .resizable-panel.sc-ui-resizable-panel::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #6b7280)}.resize-handle.sc-ui-resizable-panel{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;transition:all 0.2s;z-index:10}.resize-handle.resize-handle-horizontal.sc-ui-resizable-panel{cursor:col-resize;width:1px;height:100%}.resize-handle.resize-handle-horizontal.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);width:2px}.resize-handle.resize-handle-vertical.sc-ui-resizable-panel{cursor:row-resize;height:1px;width:100%}.resize-handle.resize-handle-vertical.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);height:2px}.resize-handle.resize-handle-active.sc-ui-resizable-panel{background:var(--color-success, #3dcd58)}.resize-handle.resize-handle-disabled.sc-ui-resizable-panel{cursor:not-allowed;opacity:0.5}.resize-handle.resize-handle-disabled.sc-ui-resizable-panel:hover{background:transparent}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.sc-ui-resizable-panel{background:transparent}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58)}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle.resize-handle-disabled.sc-ui-resizable-panel:hover{background:transparent}.resize-handle-icon.sc-ui-resizable-panel{pointer-events:none;color:var(--text-muted, #6b7280);font-size:12px;opacity:0;transition:opacity 0.2s}.resize-handle.sc-ui-resizable-panel:hover .resize-handle-icon.sc-ui-resizable-panel{opacity:1}.resize-handle-active.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{opacity:1;color:var(--text-standard, #ffffff)}.resizable-theme-dark.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{color:var(--text-muted, #9ca3af)}.resize-handle-active.sc-ui-resizable-panel .resizable-theme-dark.sc-ui-resizable-panel .resize-handle-icon.sc-ui-resizable-panel{color:var(--text-standard, #ffffff)}.collapse-button.sc-ui-resizable-panel{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong, #d1d5db);background:var(--bg-primary, #ffffff);color:var(--text-muted, #6b7280);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all 0.2s;pointer-events:auto;z-index:20;opacity:0.8;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.resize-handle.sc-ui-resizable-panel:hover .collapse-button.sc-ui-resizable-panel{opacity:1;background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #9ca3af)}.collapse-button.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58) !important;border-color:var(--color-success, #3dcd58) !important;color:var(--text-standard, #ffffff) !important;transform:translate(-50%, -50%) scale(1.2)}.collapse-button.sc-ui-resizable-panel:active{transform:translate(-50%, -50%) scale(0.95)}.resizable-theme-dark.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{background:var(--color-primary, #374151);border-color:var(--border-strong, #4b5563);color:var(--text-muted, #9ca3af);opacity:0.8}.resizable-theme-dark.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel:hover{background:var(--color-success, #3dcd58);border-color:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.resize-handle-horizontal.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{top:50%;left:50%}.resize-handle-vertical.sc-ui-resizable-panel .collapse-button.sc-ui-resizable-panel{top:50%;left:50%}.resizable-panel.sc-ui-resizable-panel ui-resizable-panel.sc-ui-resizable-panel{width:100%;height:100%;border:none}'}},[774,"ui-resizable-panel",{direction:[1],panels:[1],handleSize:[2,"handle-size"],handleColor:[1,"handle-color"],handleHoverColor:[1,"handle-hover-color"],minPanelSize:[2,"min-panel-size"],maxPanelSize:[2,"max-panel-size"],saveState:[4,"save-state"],stateKey:[1,"state-key"],theme:[1],animated:[4],showHandleIcon:[4,"show-handle-icon"],snapToEdge:[4,"snap-to-edge"],snapThreshold:[2,"snap-threshold"],internalPanels:[32],isDragging:[32],dragHandleIndex:[32],dragStartPos:[32],dragStartSizes:[32]},void 0,{panels:[{handlePanelsChange:0}]}]);function d(){"undefined"!=typeof customElements&&["ui-resizable-panel","ui-badge","ui-button","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-resizable-panel":customElements.get(r(e))||customElements.define(r(e),h);break;case"ui-badge":customElements.get(r(e))||n();break;case"ui-button":customElements.get(r(e))||l();break;case"ui-icon":customElements.get(r(e))||o();break;case"ui-loader":customElements.get(r(e))||c()}}))}export{h as A,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./icon.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.skeletonShow=s(this,"skeletonShow",7),this.skeletonHide=s(this,"skeletonHide",7)}ariaLabel;ariaLive="off";ariaRole;progress;dark="auto";rtl=!1;skeletonShow;skeletonHide;template="none";count=1;direction="column";lazyAnimation=!0;speed="normal";color="neutral";radius;stagger=0;gap="16px";highlightColor;elevation=0;shape="rectangle";mask=!1;ghost=!1;size="md";width="100%";height="20px";borderRadius="4px";animated=!0;animationType="pulse";customClass="";delay=0;waveAngle="90deg";waveSpeed="1.5s";rows=1;lastRowWidth="80%";isActuallyVisible=!1;isInView=!0;delayTimer;observer;componentDidLoad(){this.lazyAnimation&&this.setupObserver()}setupObserver(){void 0!==globalThis.IntersectionObserver?(this.observer=new IntersectionObserver((e=>{e.forEach((e=>{this.isInView=e.isIntersecting}))}),{threshold:.1}),this.el&&this.observer.observe(this.el)):this.isInView=!0}handleDelayChange(){this.handleVisibility()}componentWillLoad(){this.handleVisibility()}get el(){return this}handleVisibility(){if(this.delay<=0)return this.isActuallyVisible||this.skeletonShow?.emit(),void(this.isActuallyVisible=!0);this.delayTimer&&clearTimeout(this.delayTimer),this.isActuallyVisible&&this.skeletonHide?.emit(),this.isActuallyVisible=!1,this.delayTimer=setTimeout((()=>{this.isActuallyVisible=!0,this.skeletonShow?.emit()}),this.delay)}disconnectedCallback(){this.delayTimer&&clearTimeout(this.delayTimer),this.observer&&this.observer.disconnect()}getSizeDimensions(){const e={"3xs":{width:"12px",height:"12px"},"2xs":{width:"16px",height:"16px"},xs:{width:"20px",height:"20px"},sm:{width:"24px",height:"24px"},md:{width:"32px",height:"32px"},lg:{width:"48px",height:"48px"},xl:{width:"64px",height:"64px"},"2xl":{width:"80px",height:"80px"},"3xl":{width:"120px",height:"120px"},"4xl":{width:"160px",height:"160px"}};return e[this.size]||e.md}getSkeletonStyles(){const e=this.getSizeDimensions(),t={width:"100%"!==this.width?this.width:e.width,height:"20px"!==this.height?this.height:e.height};switch(this.shape){case"circle":t.borderRadius="50%";const e=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${e}px`,t.height=`${e}px`;break;case"square":const s=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${s}px`,t.height=`${s}px`,t.borderRadius="0";break;case"oval":t.borderRadius="50%";break;case"rounded-square":const i=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${i}px`,t.height=`${i}px`,t.borderRadius=this.borderRadius;break;case"rounded-rectangle":case"rounded":t.borderRadius=this.borderRadius;break;case"text":t.borderRadius="4px",t.height={"3xs":"10px","2xs":"12px",xs:"14px",sm:"16px",md:"18px",lg:"24px",xl:"32px","2xl":"40px","3xl":"48px","4xl":"64px"}[this.size]||"18px";break;case"avatar":t.borderRadius="50%";const o=this.getSizeDimensions();t.width="100%"!==this.width?this.width:o.width,t.height="20px"!==this.height?this.height:o.height;break;case"button":t.borderRadius="6px",t.height="20px"!==this.height?this.height:{xs:"24px",sm:"28px",md:"32px",lg:"36px",xl:"40px","2xl":"44px"}[this.size]||"32px";break;case"pill":t.borderRadius="20px",t.height="20px"!==this.height?this.height:{xs:"20px",sm:"24px",md:"28px",lg:"32px"}[this.size]||"28px",t.width="100%"!==this.width?this.width:"60px";break;case"card":t.borderRadius="8px",t.minHeight="20px"!==this.height?this.height:{xs:"80px",sm:"100px",md:"120px",lg:"160px",xl:"200px","2xl":"240px"}[this.size]||"120px";break;case"list-item":t.borderRadius="4px",t.height="20px"!==this.height?this.height:{xs:"32px",sm:"36px",md:"40px",lg:"48px",xl:"56px","2xl":"64px"}[this.size]||"40px";break;case"image":t.borderRadius="8px",t.height="20px"!==this.height?this.height:{xs:"100px",sm:"150px",md:"200px",lg:"250px",xl:"300px","2xl":"400px"}[this.size]||"200px",t.display="flex",t.alignItems="center",t.justifyContent="center";break;case"none":t.background="transparent",t.width="auto",t.height="auto";break;default:t.borderRadius="0"}return t}render(){if(!this.isActuallyVisible)return null;const e=Array.from({length:Math.max(1,this.count)}),t=this.ariaRole||("number"==typeof this.progress?"progressbar":"status"),s={role:t,"aria-busy":!0,"aria-label":this.ariaLabel,"aria-live":this.ariaLive};"progressbar"===t&&"number"==typeof this.progress&&(s["aria-valuenow"]=this.progress,s["aria-valuemin"]=0,s["aria-valuemax"]=100);const o=["dark","blue","violet","green","pink"],a=document.documentElement.getAttribute("data-theme")||"",n="auto"===this.dark&&(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches||o.some((e=>document.documentElement.classList.contains("theme-"+e)||document.body.classList.contains("theme-"+e)))||o.includes(a)||!!this.el.closest(o.map((e=>`.theme-${e}, [data-theme="${e}"]`)).join(", ")));return i("div",{class:`skeleton-replication-container skeleton-direction-${this.direction} ${"dark"===this.dark||n?"skeleton-dark":""} ${this.rtl?"skeleton-rtl":""}`,style:{display:"flex",flexDirection:this.direction,gap:this.gap},...s},e.map(((e,t)=>{const s=this.stagger>0?t*this.stagger+"ms":"0ms",o=this.animated&&(!this.lazyAnimation||this.isInView),a=!["neutral","primary","secondary","success","danger","warning","info"].includes(this.color),n={skeleton:!0,"skeleton-animated":o,[`skeleton-${this.animationType}`]:o,[`skeleton-${this.shape}`]:!0,[`skeleton-speed-${this.speed}`]:!0,[`skeleton-color-${this.color}`]:!a&&"neutral"!==this.color,"skeleton-mask":this.mask,"skeleton-ghost":this.ghost&&this.mask,"skeleton-elevated":this.elevation>0,[this.customClass]:!!this.customClass},l={"--skeleton-stagger-delay":s,"--skeleton-wave-angle":this.waveAngle,"--skeleton-wave-speed":this.waveSpeed,"--skeleton-gap":this.gap,"--skeleton-elevation":this.elevation>0?`var(--ui-shadow-${this.elevation}, 0 2px 8px rgba(0,0,0,0.05))`:"none"};a&&(l["--skeleton-bg"]=this.color,l["--skeleton-wave-bg"]=this.highlightColor||this.color),this.radius&&(l["--skeleton-border-radius"]=this.radius);const r=["circle","avatar","oval"].includes(this.shape),h={...this.getSkeletonStyles(),...l,animationDelay:s,...r?{}:this.radius||"4px"!==this.borderRadius?{borderRadius:this.radius||this.borderRadius}:{}};return i("div",{class:n,style:h,key:t},this.renderContent(),"number"==typeof this.progress&&i("div",{class:"skeleton-progress-bar",style:{width:this.progress+"%",height:"4px",background:"var(--skeleton-wave-bg, #fff)",borderRadius:"2px",marginTop:"4px"}}))})),i("slot",{name:"custom"}))}renderContent(){const e="text"===this.shape&&this.rows>1;return[this.mask||"none"===this.shape?i("slot",null):null,e&&!this.mask?i("div",{class:"skeleton-text-rows",style:{display:"flex",flexDirection:"column",gap:"8px",width:"100%"}},Array.from({length:this.rows}).map(((e,t)=>i("div",{class:"skeleton-text-row",style:{height:"1em",width:t===this.rows-1?this.lastRowWidth:t>0&&t%2==0?"92%":"100%",backgroundColor:"inherit",borderRadius:"4px",animation:"inherit"}})))):null,"card"!==this.shape||this.mask?null:i("div",{class:"skeleton-card-content"},i("div",{class:"skeleton-card-header"},i("div",{class:"skeleton-circle",style:{width:"32px",height:"32px",borderRadius:"50%"}}),i("div",{class:"skeleton-card-title"},i("div",{class:"skeleton-text",style:{width:"60%",height:"16px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"40%",height:"12px",borderRadius:"4px"}}))),i("div",{class:"skeleton-card-body"},i("div",{class:"skeleton-text",style:{width:"100%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"80%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"90%",height:"14px",borderRadius:"4px"}}))),"list-item"!==this.shape||this.mask?null:i("div",{class:"skeleton-list-content"},i("div",{class:"skeleton-circle",style:{width:"32px",height:"32px",borderRadius:"50%"}}),i("div",{class:"skeleton-list-text"},i("div",{class:"skeleton-text",style:{width:"70%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"50%",height:"12px",borderRadius:"4px"}}))),"image"!==this.shape||this.mask?null:i("div",{class:"skeleton-image-icon"},i("ui-icon",{name:"image",library:"lucide",size:"25%",style:{opacity:"0.2"}})),"profile"===this.template?i("div",{class:"skeleton-profile-template"},i("ui-skeleton-loader",{shape:"circle",size:this.size,color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"skeleton-profile-lines"},i("ui-skeleton-loader",{shape:"text",size:this.size,width:"120px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"80px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}))):null,"media-object"===this.template?i("div",{class:"skeleton-media-object-template"},i("ui-skeleton-loader",{shape:"rounded-rectangle",width:"48px",height:"48px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"skeleton-media-lines",style:{flex:"1"}},i("ui-skeleton-loader",{shape:"text",size:"md",width:"70%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"40%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"4px"}}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"90%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"8px"}}))):null,"feed-item"===this.template?i("div",{class:"skeleton-feed-template"},i("div",{class:"feed-header",style:{display:"flex",gap:"12px",marginBottom:"16px"}},i("ui-skeleton-loader",{shape:"circle",size:"md",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{style:{flex:"1"}},i("ui-skeleton-loader",{shape:"text",size:"xs",width:"100px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"4px"}}))),i("ui-skeleton-loader",{shape:"rectangle",width:"100%",height:"200px","border-radius":"8px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"feed-footer",style:{marginTop:"12px",display:"flex",gap:"8px"}},i("ui-skeleton-loader",{shape:"button",size:"sm",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"button",size:"sm",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}))):null,"table-row"===this.template?i("div",{class:"skeleton-table-row-template",style:{display:"flex",gap:"20px",alignItems:"center",width:"100%",padding:"12px 0"}},i("ui-skeleton-loader",{shape:"rectangle",width:"20px",height:"20px","border-radius":"4px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"15%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"35%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"20%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"pill",width:"80px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginLeft:"auto"}})):null]}static get watchers(){return{delay:[{handleDelayChange:0}]}}static get style(){return'@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{--skeleton-bg:var(--skeleton-loader-bg, var(--bg-tertiary, #e2e8f0));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, var(--bg-secondary, #f3f4f6));--skeleton-border-radius:var(--skeleton-loader-border-radius, 4px);--skeleton-progress-bar-bg:var(--skeleton-loader-progress-bar-bg, var(--bg-primary, #ffffff));--skeleton-focus-ring:var(--skeleton-loader-focus-ring, var(--color-primary, #10b981));--skeleton-focus-shadow:var(--skeleton-loader-focus-shadow, #dbeafe)}:host-context([data-theme=dark]),:host-context([data-theme=blue]),:host-context([data-theme=violet]),:host-context([data-theme=green]),:host-context([data-theme=pink]),:host-context(.theme-dark),:host-context(.theme-blue),:host-context(.theme-violet),:host-context(.theme-green),:host-context(.theme-pink),:host(.theme-dark),:host([dark=dark]),:host-context(.skeleton-dark),.skeleton-dark{--skeleton-bg:var(--skeleton-loader-bg, var(--bg-secondary, #1e293b));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, var(--bg-tertiary, #334155))}.skeleton-color-primary{--skeleton-bg:color-mix(in srgb, var(--color-primary, #10b981) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-primary, #10b981) 40%, transparent)}.skeleton-color-secondary{--skeleton-bg:color-mix(in srgb, var(--color-secondary, #64748b) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-secondary, #64748b) 40%, transparent)}.skeleton-color-success{--skeleton-bg:color-mix(in srgb, var(--color-success, #22c55e) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent)}.skeleton-color-danger{--skeleton-bg:color-mix(in srgb, var(--color-danger, #ef4444) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-danger, #ef4444) 40%, transparent)}.skeleton-color-warning{--skeleton-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent)}.skeleton-color-info{--skeleton-bg:color-mix(in srgb, var(--color-info, #38bdf8) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-info, #38bdf8) 40%, transparent)}.skeleton-replication-container ::slotted([slot=custom]:focus-visible){outline:2px solid var(--color-primary, #10b981);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px var(--border-subtle, #dbeafe);transition:outline 0.2s, box-shadow 0.2s}.skeleton-rtl .skeleton{direction:rtl;--skeleton-wave-angle:-90deg;animation-direction:reverse}.skeleton-progress-bar{transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);background:var(--skeleton-wave-bg, var(--bg-primary, #ffffff));height:4px;border-radius:2px;margin-top:4px}.skeleton-replication-container slot[name=custom]{display:block;margin-top:8px}:host{display:block}.skeleton{background:var(--skeleton-bg, #f0f0f0);position:relative;overflow:hidden}.skeleton-animated.skeleton-pulse{animation:skeleton-pulse var(--skeleton-wave-speed, 1.5s) ease-in-out infinite}.skeleton-animated.skeleton-wave{background:linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #f0f0f0) 25%, var(--skeleton-wave-bg, #e0e0e0) 50%, var(--skeleton-bg, #f0f0f0) 75%);background-size:200% 100%;animation:skeleton-wave var(--skeleton-wave-speed, 1.5s) ease-in-out infinite;}.skeleton-dark .skeleton-animated.skeleton-wave{background:linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #1e293b) 25%, var(--skeleton-wave-bg, #334155) 50%, var(--skeleton-bg, #1e293b) 75%);background-size:200% 100%}.skeleton-animated.skeleton-shimmer{background:linear-gradient(110deg, var(--skeleton-bg, #f0f0f0) 8%, var(--skeleton-wave-bg, #e0e0e0) 18%, var(--skeleton-bg, #f0f0f0) 33%);background-size:200% 100%;animation:skeleton-shimmer var(--skeleton-wave-speed, 1.5s) linear infinite}.skeleton-animated.skeleton-sheen::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:skeleton-sheen var(--skeleton-wave-speed, 1.5s) infinite}.skeleton-animated.skeleton-glow{animation:skeleton-glow var(--skeleton-wave-speed, 1.5s) ease-in-out infinite alternate}.skeleton-animated.skeleton-flicker{animation:skeleton-flicker 0.2s infinite}.skeleton-circle{border-radius:50%}.skeleton-rounded{border-radius:var(--skeleton-border-radius, 4px)}.skeleton-text{border-radius:4px}.skeleton-avatar{border-radius:50%}.skeleton-button{border-radius:6px}.skeleton-card{border-radius:8px;padding:16px}.skeleton-list-item{border-radius:4px;padding:12px;display:flex;align-items:center;gap:12px}.skeleton-card-content{display:flex;flex-direction:column;gap:12px}.skeleton-card-header{display:flex;align-items:center;gap:12px}.skeleton-card-title{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card-body{display:flex;flex-direction:column;gap:8px}.skeleton-list-content{display:flex;align-items:center;gap:12px;width:100%}.skeleton-list-text{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card .skeleton-circle,.skeleton-card .skeleton-text,.skeleton-list-item .skeleton-circle,.skeleton-list-item .skeleton-text{background:var(--skeleton-bg, #f0f0f0);animation:inherit}.skeleton-image-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.skeleton-profile-template{display:flex;align-items:center;gap:16px}.skeleton-profile-template .skeleton-profile-lines{display:flex;flex-direction:column;gap:8px}.skeleton-media-object-template{display:flex;align-items:flex-start;gap:12px}.skeleton-media-object-template .skeleton-media-lines{display:flex;flex-direction:column;gap:6px}.skeleton-feed-template{width:100%;padding:16px;border:1px solid var(--ui-color-border, var(--border-default, #e5e7eb));border-radius:12px;background:var(--ui-color-surface, var(--bg-primary, #ffffff))}.skeleton-mask{width:fit-content;height:fit-content;min-width:20px;min-height:20px;display:inline-block}.skeleton-mask>*{visibility:hidden}.skeleton-mask.skeleton-ghost>*{visibility:visible !important;opacity:0.15 !important;filter:blur(2px) grayscale(1)}.skeleton-replication-container{width:100%;display:flex;gap:var(--skeleton-gap, 16px)}.skeleton-replication-container.skeleton-direction-row{flex-wrap:wrap;flex-direction:row !important}.skeleton-replication-container.skeleton-direction-column{flex-direction:column !important}.skeleton-elevated{box-shadow:var(--skeleton-elevation, none)}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.6}}@keyframes skeleton-wave{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-sheen{100%{transform:translateX(100%)}}@keyframes skeleton-glow{from{box-shadow:0 0 5px rgba(255, 255, 255, 0), inset 0 0 5px rgba(255, 255, 255, 0)}to{box-shadow:0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1)}}@keyframes skeleton-flicker{0%{opacity:0.95}25%{opacity:1}50%{opacity:0.9}75%{opacity:1}100%{opacity:0.95}}:host{--skeleton-border-radius:4px}.skeleton-speed-slow.skeleton-pulse{animation-duration:3s}.skeleton-speed-slow.skeleton-wave{animation-duration:3s}.skeleton-speed-slow.skeleton-shimmer{animation-duration:3.5s}.skeleton-speed-slow.skeleton-sheen::after{animation-duration:3.5s}.skeleton-speed-slow.skeleton-glow{animation-duration:3s}.skeleton-speed-normal.skeleton-pulse{animation-duration:1.5s}.skeleton-speed-normal.skeleton-wave{animation-duration:1.5s}.skeleton-speed-normal.skeleton-shimmer{animation-duration:1.8s}.skeleton-speed-normal.skeleton-sheen::after{animation-duration:1.8s}.skeleton-speed-normal.skeleton-glow{animation-duration:1.5s}.skeleton-speed-fast.skeleton-pulse{animation-duration:0.8s}.skeleton-speed-fast.skeleton-wave{animation-duration:0.8s}.skeleton-speed-fast.skeleton-shimmer{animation-duration:1s}.skeleton-speed-fast.skeleton-sheen::after{animation-duration:1s}.skeleton-speed-fast.skeleton-glow{animation-duration:0.8s}'}},[769,"ui-skeleton",{ariaLabel:[1,"aria-label"],ariaLive:[1,"aria-live"],ariaRole:[1,"aria-role"],progress:[2],dark:[513],rtl:[4],template:[1],count:[2],direction:[1],lazyAnimation:[4,"lazy-animation"],speed:[1],color:[1],radius:[1],stagger:[2],gap:[1],highlightColor:[1,"highlight-color"],elevation:[2],shape:[1],mask:[4],ghost:[4],size:[1],width:[1],height:[1],borderRadius:[1,"border-radius"],animated:[4],animationType:[1,"animation-type"],customClass:[1,"custom-class"],delay:[2],waveAngle:[1,"wave-angle"],waveSpeed:[1,"wave-speed"],rows:[2],lastRowWidth:[1,"last-row-width"],isActuallyVisible:[32],isInView:[32]},void 0,{delay:[{handleDelayChange:0}]}]);function l(){"undefined"!=typeof customElements&&["ui-skeleton","ui-icon"].forEach((e=>{switch(e){case"ui-skeleton":customElements.get(o(e))||customElements.define(o(e),n);break;case"ui-icon":customElements.get(o(e))||a()}}))}export{n as S,l as d}
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as n}from"./loader.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.skeletonShow=s(this,"skeletonShow",7),this.skeletonHide=s(this,"skeletonHide",7)}ariaLabel;ariaLive="off";ariaRole;progress;dark="auto";rtl=!1;skeletonShow;skeletonHide;template="none";count=1;direction="column";lazyAnimation=!0;speed="normal";color="neutral";radius;stagger=0;gap="16px";highlightColor;elevation=0;shape="rectangle";mask=!1;ghost=!1;size="md";width="100%";height="20px";borderRadius="4px";animated=!0;animationType="pulse";customClass="";delay=0;waveAngle="90deg";waveSpeed="1.5s";rows=1;lastRowWidth="80%";isActuallyVisible=!1;isInView=!0;delayTimer;observer;componentDidLoad(){this.lazyAnimation&&this.setupObserver()}setupObserver(){void 0!==globalThis.IntersectionObserver?(this.observer=new IntersectionObserver((e=>{e.forEach((e=>{this.isInView=e.isIntersecting}))}),{threshold:.1}),this.el&&this.observer.observe(this.el)):this.isInView=!0}handleDelayChange(){this.handleVisibility()}componentWillLoad(){this.handleVisibility()}get el(){return this}handleVisibility(){if(this.delay<=0)return this.isActuallyVisible||this.skeletonShow?.emit(),void(this.isActuallyVisible=!0);this.delayTimer&&clearTimeout(this.delayTimer),this.isActuallyVisible&&this.skeletonHide?.emit(),this.isActuallyVisible=!1,this.delayTimer=setTimeout((()=>{this.isActuallyVisible=!0,this.skeletonShow?.emit()}),this.delay)}disconnectedCallback(){this.delayTimer&&clearTimeout(this.delayTimer),this.observer&&this.observer.disconnect()}getSizeDimensions(){const e={"3xs":{width:"12px",height:"12px"},"2xs":{width:"16px",height:"16px"},xs:{width:"20px",height:"20px"},sm:{width:"24px",height:"24px"},md:{width:"32px",height:"32px"},lg:{width:"48px",height:"48px"},xl:{width:"64px",height:"64px"},"2xl":{width:"80px",height:"80px"},"3xl":{width:"120px",height:"120px"},"4xl":{width:"160px",height:"160px"}};return e[this.size]||e.md}getSkeletonStyles(){const e=this.getSizeDimensions(),t={width:"100%"!==this.width?this.width:e.width,height:"20px"!==this.height?this.height:e.height};switch(this.shape){case"circle":t.borderRadius="50%";const e=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${e}px`,t.height=`${e}px`;break;case"square":const s=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${s}px`,t.height=`${s}px`,t.borderRadius="0";break;case"oval":t.borderRadius="50%";break;case"rounded-square":const i=Math.min(parseInt(this.width),parseInt(this.height)||parseInt(this.width));t.width=`${i}px`,t.height=`${i}px`,t.borderRadius=this.borderRadius;break;case"rounded-rectangle":case"rounded":t.borderRadius=this.borderRadius;break;case"text":t.borderRadius="4px",t.height={"3xs":"10px","2xs":"12px",xs:"14px",sm:"16px",md:"18px",lg:"24px",xl:"32px","2xl":"40px","3xl":"48px","4xl":"64px"}[this.size]||"18px";break;case"avatar":t.borderRadius="50%";const o=this.getSizeDimensions();t.width="100%"!==this.width?this.width:o.width,t.height="20px"!==this.height?this.height:o.height;break;case"button":t.borderRadius="6px",t.height="20px"!==this.height?this.height:{xs:"24px",sm:"28px",md:"32px",lg:"36px",xl:"40px","2xl":"44px"}[this.size]||"32px";break;case"pill":t.borderRadius="20px",t.height="20px"!==this.height?this.height:{xs:"20px",sm:"24px",md:"28px",lg:"32px"}[this.size]||"28px",t.width="100%"!==this.width?this.width:"60px";break;case"card":t.borderRadius="8px",t.minHeight="20px"!==this.height?this.height:{xs:"80px",sm:"100px",md:"120px",lg:"160px",xl:"200px","2xl":"240px"}[this.size]||"120px";break;case"list-item":t.borderRadius="4px",t.height="20px"!==this.height?this.height:{xs:"32px",sm:"36px",md:"40px",lg:"48px",xl:"56px","2xl":"64px"}[this.size]||"40px";break;case"image":t.borderRadius="8px",t.height="20px"!==this.height?this.height:{xs:"100px",sm:"150px",md:"200px",lg:"250px",xl:"300px","2xl":"400px"}[this.size]||"200px",t.display="flex",t.alignItems="center",t.justifyContent="center";break;case"none":t.background="transparent",t.width="auto",t.height="auto";break;default:t.borderRadius="0"}return t}render(){if(!this.isActuallyVisible)return null;const e=Array.from({length:Math.max(1,this.count)}),t=this.ariaRole||("number"==typeof this.progress?"progressbar":"status"),s={role:t,"aria-busy":!0,"aria-label":this.ariaLabel,"aria-live":this.ariaLive};"progressbar"===t&&"number"==typeof this.progress&&(s["aria-valuenow"]=this.progress,s["aria-valuemin"]=0,s["aria-valuemax"]=100);const o=["dark","blue","violet","green","pink"],a=document.documentElement.getAttribute("data-theme")||"",n="auto"===this.dark&&(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches||o.some((e=>document.documentElement.classList.contains("theme-"+e)||document.body.classList.contains("theme-"+e)))||o.includes(a)||!!this.el.closest(o.map((e=>`.theme-${e}, [data-theme="${e}"]`)).join(", ")));return i("div",{class:`skeleton-replication-container skeleton-direction-${this.direction} ${"dark"===this.dark||n?"skeleton-dark":""} ${this.rtl?"skeleton-rtl":""}`,style:{display:"flex",flexDirection:this.direction,gap:this.gap},...s},e.map(((e,t)=>{const s=this.stagger>0?t*this.stagger+"ms":"0ms",o=this.animated&&(!this.lazyAnimation||this.isInView),a=!["neutral","primary","secondary","success","danger","warning","info"].includes(this.color),n={skeleton:!0,"skeleton-animated":o,[`skeleton-${this.animationType}`]:o,[`skeleton-${this.shape}`]:!0,[`skeleton-speed-${this.speed}`]:!0,[`skeleton-color-${this.color}`]:!a&&"neutral"!==this.color,"skeleton-mask":this.mask,"skeleton-ghost":this.ghost&&this.mask,"skeleton-elevated":this.elevation>0,[this.customClass]:!!this.customClass},l={"--skeleton-stagger-delay":s,"--skeleton-wave-angle":this.waveAngle,"--skeleton-wave-speed":this.waveSpeed,"--skeleton-gap":this.gap,"--skeleton-elevation":this.elevation>0?`var(--ui-shadow-${this.elevation}, 0 2px 8px rgba(0,0,0,0.05))`:"none"};a&&(l["--skeleton-bg"]=this.color,l["--skeleton-wave-bg"]=this.highlightColor||this.color),this.radius&&(l["--skeleton-border-radius"]=this.radius);const r=["circle","avatar","oval"].includes(this.shape),h={...this.getSkeletonStyles(),...l,animationDelay:s,...r?{}:this.radius||"4px"!==this.borderRadius?{borderRadius:this.radius||this.borderRadius}:{}};return i("div",{class:n,style:h,key:t},this.renderContent(),"number"==typeof this.progress&&i("div",{class:"skeleton-progress-bar",style:{width:this.progress+"%",height:"4px",background:"var(--skeleton-wave-bg, #fff)",borderRadius:"2px",marginTop:"4px"}}))})),i("slot",{name:"custom"}))}renderContent(){const e="text"===this.shape&&this.rows>1;return[this.mask||"none"===this.shape?i("slot",null):null,e&&!this.mask?i("div",{class:"skeleton-text-rows",style:{display:"flex",flexDirection:"column",gap:"8px",width:"100%"}},Array.from({length:this.rows}).map(((e,t)=>i("div",{class:"skeleton-text-row",style:{height:"1em",width:t===this.rows-1?this.lastRowWidth:t>0&&t%2==0?"92%":"100%",backgroundColor:"inherit",borderRadius:"4px",animation:"inherit"}})))):null,"card"!==this.shape||this.mask?null:i("div",{class:"skeleton-card-content"},i("div",{class:"skeleton-card-header"},i("div",{class:"skeleton-circle",style:{width:"32px",height:"32px",borderRadius:"50%"}}),i("div",{class:"skeleton-card-title"},i("div",{class:"skeleton-text",style:{width:"60%",height:"16px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"40%",height:"12px",borderRadius:"4px"}}))),i("div",{class:"skeleton-card-body"},i("div",{class:"skeleton-text",style:{width:"100%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"80%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"90%",height:"14px",borderRadius:"4px"}}))),"list-item"!==this.shape||this.mask?null:i("div",{class:"skeleton-list-content"},i("div",{class:"skeleton-circle",style:{width:"32px",height:"32px",borderRadius:"50%"}}),i("div",{class:"skeleton-list-text"},i("div",{class:"skeleton-text",style:{width:"70%",height:"14px",borderRadius:"4px"}}),i("div",{class:"skeleton-text",style:{width:"50%",height:"12px",borderRadius:"4px"}}))),"image"!==this.shape||this.mask?null:i("div",{class:"skeleton-image-icon"},i("ui-icon",{name:"image",library:"lucide",size:"25%",style:{opacity:"0.2"}})),"profile"===this.template?i("div",{class:"skeleton-profile-template"},i("ui-skeleton-loader",{shape:"circle",size:this.size,color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"skeleton-profile-lines"},i("ui-skeleton-loader",{shape:"text",size:this.size,width:"120px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"80px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}))):null,"media-object"===this.template?i("div",{class:"skeleton-media-object-template"},i("ui-skeleton-loader",{shape:"rounded-rectangle",width:"48px",height:"48px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"skeleton-media-lines",style:{flex:"1"}},i("ui-skeleton-loader",{shape:"text",size:"md",width:"70%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"40%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"4px"}}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"90%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"8px"}}))):null,"feed-item"===this.template?i("div",{class:"skeleton-feed-template"},i("div",{class:"feed-header",style:{display:"flex",gap:"12px",marginBottom:"16px"}},i("ui-skeleton-loader",{shape:"circle",size:"md",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{style:{flex:"1"}},i("ui-skeleton-loader",{shape:"text",size:"xs",width:"100px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",size:"xs",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginTop:"4px"}}))),i("ui-skeleton-loader",{shape:"rectangle",width:"100%",height:"200px","border-radius":"8px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("div",{class:"feed-footer",style:{marginTop:"12px",display:"flex",gap:"8px"}},i("ui-skeleton-loader",{shape:"button",size:"sm",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"button",size:"sm",width:"60px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}))):null,"table-row"===this.template?i("div",{class:"skeleton-table-row-template",style:{display:"flex",gap:"20px",alignItems:"center",width:"100%",padding:"12px 0"}},i("ui-skeleton-loader",{shape:"rectangle",width:"20px",height:"20px","border-radius":"4px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"15%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"35%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"text",width:"20%",color:this.color,"highlight-color":this.highlightColor,animated:this.animated}),i("ui-skeleton-loader",{shape:"pill",width:"80px",color:this.color,"highlight-color":this.highlightColor,animated:this.animated,style:{marginLeft:"auto"}})):null]}static get watchers(){return{delay:[{handleDelayChange:0}]}}static get style(){return'@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{--skeleton-bg:var(--skeleton-loader-bg, var(--bg-tertiary, #e2e8f0));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, var(--bg-secondary, #f3f4f6));--skeleton-border-radius:var(--skeleton-loader-border-radius, 4px);--skeleton-progress-bar-bg:var(--skeleton-loader-progress-bar-bg, var(--bg-primary, #ffffff));--skeleton-focus-ring:var(--skeleton-loader-focus-ring, var(--color-primary, #10b981));--skeleton-focus-shadow:var(--skeleton-loader-focus-shadow, #dbeafe)}:host-context([data-theme=dark]),:host-context([data-theme=blue]),:host-context([data-theme=violet]),:host-context([data-theme=green]),:host-context([data-theme=pink]),:host-context(.theme-dark),:host-context(.theme-blue),:host-context(.theme-violet),:host-context(.theme-green),:host-context(.theme-pink),:host(.theme-dark),:host([dark=dark]),:host-context(.skeleton-dark),.skeleton-dark{--skeleton-bg:var(--skeleton-loader-bg, var(--bg-secondary, #1e293b));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, var(--bg-tertiary, #334155))}.skeleton-color-primary{--skeleton-bg:color-mix(in srgb, var(--color-primary, #10b981) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-primary, #10b981) 40%, transparent)}.skeleton-color-secondary{--skeleton-bg:color-mix(in srgb, var(--color-secondary, #64748b) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-secondary, #64748b) 40%, transparent)}.skeleton-color-success{--skeleton-bg:color-mix(in srgb, var(--color-success, #22c55e) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent)}.skeleton-color-danger{--skeleton-bg:color-mix(in srgb, var(--color-danger, #ef4444) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-danger, #ef4444) 40%, transparent)}.skeleton-color-warning{--skeleton-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent)}.skeleton-color-info{--skeleton-bg:color-mix(in srgb, var(--color-info, #38bdf8) 20%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-info, #38bdf8) 40%, transparent)}.skeleton-replication-container ::slotted([slot=custom]:focus-visible){outline:2px solid var(--color-primary, #10b981);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px var(--border-subtle, #dbeafe);transition:outline 0.2s, box-shadow 0.2s}.skeleton-rtl .skeleton{direction:rtl;--skeleton-wave-angle:-90deg;animation-direction:reverse}.skeleton-progress-bar{transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);background:var(--skeleton-wave-bg, var(--bg-primary, #ffffff));height:4px;border-radius:2px;margin-top:4px}.skeleton-replication-container slot[name=custom]{display:block;margin-top:8px}:host{display:block}.skeleton{background:var(--skeleton-bg, #f0f0f0);position:relative;overflow:hidden}.skeleton-animated.skeleton-pulse{animation:skeleton-pulse var(--skeleton-wave-speed, 1.5s) ease-in-out infinite}.skeleton-animated.skeleton-wave{background:linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #f0f0f0) 25%, var(--skeleton-wave-bg, #e0e0e0) 50%, var(--skeleton-bg, #f0f0f0) 75%);background-size:200% 100%;animation:skeleton-wave var(--skeleton-wave-speed, 1.5s) ease-in-out infinite;}.skeleton-dark .skeleton-animated.skeleton-wave{background:linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #1e293b) 25%, var(--skeleton-wave-bg, #334155) 50%, var(--skeleton-bg, #1e293b) 75%);background-size:200% 100%}.skeleton-animated.skeleton-shimmer{background:linear-gradient(110deg, var(--skeleton-bg, #f0f0f0) 8%, var(--skeleton-wave-bg, #e0e0e0) 18%, var(--skeleton-bg, #f0f0f0) 33%);background-size:200% 100%;animation:skeleton-shimmer var(--skeleton-wave-speed, 1.5s) linear infinite}.skeleton-animated.skeleton-sheen::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:skeleton-sheen var(--skeleton-wave-speed, 1.5s) infinite}.skeleton-animated.skeleton-glow{animation:skeleton-glow var(--skeleton-wave-speed, 1.5s) ease-in-out infinite alternate}.skeleton-animated.skeleton-flicker{animation:skeleton-flicker 0.2s infinite}.skeleton-circle{border-radius:50%}.skeleton-rounded{border-radius:var(--skeleton-border-radius, 4px)}.skeleton-text{border-radius:4px}.skeleton-avatar{border-radius:50%}.skeleton-button{border-radius:6px}.skeleton-card{border-radius:8px;padding:16px}.skeleton-list-item{border-radius:4px;padding:12px;display:flex;align-items:center;gap:12px}.skeleton-card-content{display:flex;flex-direction:column;gap:12px}.skeleton-card-header{display:flex;align-items:center;gap:12px}.skeleton-card-title{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card-body{display:flex;flex-direction:column;gap:8px}.skeleton-list-content{display:flex;align-items:center;gap:12px;width:100%}.skeleton-list-text{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card .skeleton-circle,.skeleton-card .skeleton-text,.skeleton-list-item .skeleton-circle,.skeleton-list-item .skeleton-text{background:var(--skeleton-bg, #f0f0f0);animation:inherit}.skeleton-image-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.skeleton-profile-template{display:flex;align-items:center;gap:16px}.skeleton-profile-template .skeleton-profile-lines{display:flex;flex-direction:column;gap:8px}.skeleton-media-object-template{display:flex;align-items:flex-start;gap:12px}.skeleton-media-object-template .skeleton-media-lines{display:flex;flex-direction:column;gap:6px}.skeleton-feed-template{width:100%;padding:16px;border:1px solid var(--ui-color-border, var(--border-default, #e5e7eb));border-radius:12px;background:var(--ui-color-surface, var(--bg-primary, #ffffff))}.skeleton-mask{width:fit-content;height:fit-content;min-width:20px;min-height:20px;display:inline-block}.skeleton-mask>*{visibility:hidden}.skeleton-mask.skeleton-ghost>*{visibility:visible !important;opacity:0.15 !important;filter:blur(2px) grayscale(1)}.skeleton-replication-container{width:100%;display:flex;gap:var(--skeleton-gap, 16px)}.skeleton-replication-container.skeleton-direction-row{flex-wrap:wrap;flex-direction:row !important}.skeleton-replication-container.skeleton-direction-column{flex-direction:column !important}.skeleton-elevated{box-shadow:var(--skeleton-elevation, none)}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.6}}@keyframes skeleton-wave{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-sheen{100%{transform:translateX(100%)}}@keyframes skeleton-glow{from{box-shadow:0 0 5px rgba(255, 255, 255, 0), inset 0 0 5px rgba(255, 255, 255, 0)}to{box-shadow:0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1)}}@keyframes skeleton-flicker{0%{opacity:0.95}25%{opacity:1}50%{opacity:0.9}75%{opacity:1}100%{opacity:0.95}}:host{--skeleton-border-radius:4px}.skeleton-speed-slow.skeleton-pulse{animation-duration:3s}.skeleton-speed-slow.skeleton-wave{animation-duration:3s}.skeleton-speed-slow.skeleton-shimmer{animation-duration:3.5s}.skeleton-speed-slow.skeleton-sheen::after{animation-duration:3.5s}.skeleton-speed-slow.skeleton-glow{animation-duration:3s}.skeleton-speed-normal.skeleton-pulse{animation-duration:1.5s}.skeleton-speed-normal.skeleton-wave{animation-duration:1.5s}.skeleton-speed-normal.skeleton-shimmer{animation-duration:1.8s}.skeleton-speed-normal.skeleton-sheen::after{animation-duration:1.8s}.skeleton-speed-normal.skeleton-glow{animation-duration:1.5s}.skeleton-speed-fast.skeleton-pulse{animation-duration:0.8s}.skeleton-speed-fast.skeleton-wave{animation-duration:0.8s}.skeleton-speed-fast.skeleton-shimmer{animation-duration:1s}.skeleton-speed-fast.skeleton-sheen::after{animation-duration:1s}.skeleton-speed-fast.skeleton-glow{animation-duration:0.8s}'}},[769,"ui-skeleton",{ariaLabel:[1,"aria-label"],ariaLive:[1,"aria-live"],ariaRole:[1,"aria-role"],progress:[2],dark:[513],rtl:[4],template:[1],count:[2],direction:[1],lazyAnimation:[4,"lazy-animation"],speed:[1],color:[1],radius:[1],stagger:[2],gap:[1],highlightColor:[1,"highlight-color"],elevation:[2],shape:[1],mask:[4],ghost:[4],size:[1],width:[1],height:[1],borderRadius:[1,"border-radius"],animated:[4],animationType:[1,"animation-type"],customClass:[1,"custom-class"],delay:[2],waveAngle:[1,"wave-angle"],waveSpeed:[1,"wave-speed"],rows:[2],lastRowWidth:[1,"last-row-width"],isActuallyVisible:[32],isInView:[32]},void 0,{delay:[{handleDelayChange:0}]}]);function r(){"undefined"!=typeof customElements&&["ui-skeleton","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-skeleton":customElements.get(o(e))||customElements.define(o(e),l);break;case"ui-icon":customElements.get(o(e))||a();break;case"ui-loader":customElements.get(o(e))||n()}}))}export{l as S,r as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,h as s,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./icon.js";const
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,h as s,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as o}from"./loader.js";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}get host(){return this}label;status="default";description;icon;iconLibrary="default";disabled=!1;render(){return s("div",{key:"a2c117d2cec46a6f1fdafab7cb152026a1c637be",class:"smart-step-wrapper"},s("div",{key:"470c34c7b17ad9b6e829ebfb30e1b4c3848d1c09",class:{"step-header":!0,disabled:this.disabled,["status-"+this.status]:!0}},s("div",{key:"6a6cbddfd46581cbdb2e22ba9dfddad491faf93b",class:"step-icon"},this.icon?s("span",{class:"custom-icon"},s("ui-icon",{name:this.icon,library:this.iconLibrary,size:"1.2rem"})):s("span",{class:"step-number"})),s("div",{key:"2d11b3d888e9cc500723d0be29a8c6fc580372b7",class:"step-text"},s("span",{key:"8a13c5542cc413516b7a083e26330a34f7a43990",class:"step-title"},this.label),this.description&&s("span",{key:"1ad7e4e299a6d6faa338445a926279ec3d04c7b3",class:"step-desc"},this.description))),s("div",{key:"df61b0cb3ba51afbba28d4075c8e7a128616b74a",class:"stepper-content"},s("slot",{key:"277c02deb6d5ee2c2ac992e3ea3da964cf8dd9e2"})))}static get style(){return'@charset "UTF-8";.sr-only.sc-smart-step{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.sc-smart-step{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}.sc-smart-step-h{display:block;counter-increment:step-counter;flex:1}.smart-step-wrapper.sc-smart-step{display:flex;flex-direction:column}.step-header.sc-smart-step{padding:12px 16px;border-radius:6px;background:#fff;cursor:pointer;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);border:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;position:relative;user-select:none;margin-bottom:8px}.step-header.sc-smart-step:hover:not(.disabled):not(.active){background:#f9fafb;border-color:#d1d5db;transform:translateY(-1px)}.step-header.active.sc-smart-step{border-color:#3b82f6;background:#eff6ff;box-shadow:0 4px 6px -1px rgba(59, 130, 246, 0.1)}.step-header.completed.sc-smart-step{border-color:#10b981;background:#f0fdf4}.step-header.disabled.sc-smart-step{opacity:0.6;cursor:not-allowed;background:#f3f4f6;border-color:#e5e7eb}.step-icon.sc-smart-step{width:32px;height:32px;border-radius:50%;background:#f3f4f6;color:#6b7280;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;transition:all 0.3s ease;border:2px solid transparent}.step-header.active.sc-smart-step .step-icon.sc-smart-step{background:#3b82f6;color:#fff;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.2)}.step-header.completed.sc-smart-step .step-icon.sc-smart-step{background:#10b981;color:#fff}.step-header.status-error.sc-smart-step .step-icon.sc-smart-step{background:#ef4444;color:#fff}.custom-icon.sc-smart-step{line-height:1}.step-number.sc-smart-step::before{content:counter(step-counter)}.step-header.completed.sc-smart-step .step-number.sc-smart-step::before{content:"✓";font-size:16px}.step-text.sc-smart-step{display:flex;flex-direction:column;min-width:0;flex:1}.step-title.sc-smart-step{font-weight:600;font-size:14px;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.step-header.active.sc-smart-step .step-title.sc-smart-step{color:#1d4ed8}.step-header.completed.sc-smart-step .step-title.sc-smart-step{color:#15803d}.step-desc.sc-smart-step{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.sc-smart-step-h:not(:last-of-type) .step-header.sc-smart-step::after{content:"";position:absolute;right:-12px;top:50%;border:solid #d1d5db;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:translateY(-50%) rotate(-45deg);opacity:0.5;display:none}.stepper-content.sc-smart-step{background:#fff;border:1px solid #e5e7eb;border-radius:0 0 6px 6px;padding:24px;margin-top:-6px;display:none;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}'}},[774,"smart-step",{label:[1],status:[1],description:[1],icon:[1],iconLibrary:[1,"icon-library"],disabled:[4]}]),p=i,c=function(){"undefined"!=typeof customElements&&["smart-step","ui-icon","ui-loader"].forEach((e=>{switch(e){case"smart-step":customElements.get(r(e))||customElements.define(r(e),i);break;case"ui-icon":customElements.get(r(e))||a();break;case"ui-loader":customElements.get(r(e))||o()}}))};export{p as SmartStep,c as defineCustomElement}
|
package/dist/components/stack.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as r,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{s as o,d as s}from"./icon.js";import{d as n,a as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as r,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{s as o,d as s}from"./icon.js";import{d as n,a as d}from"./badge.js";import{d as c}from"./loader.js";const l=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}direction="horizontal";wrap="nowrap";spacing="8px";align="center";justify="start";max=0;overlap=!1;showDividers=!1;dividerType="solid";childrenCount=0;isRosterOpen=!1;mutationObserver;componentWillLoad(){this.updateChildrenCount()}componentDidLoad(){this.mutationObserver=new MutationObserver((()=>{this.updateChildrenCount()})),this.mutationObserver.observe(this.el,{childList:!0})}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}toggleRoster=()=>{this.isRosterOpen=!this.isRosterOpen};closeRoster=()=>{this.isRosterOpen=!1};updateChildrenVisibility(t){Array.from(this.el.children).forEach(((r,e)=>{r.style.display=e<t?"":"none"}))}updateChildrenCount(){this.childrenCount=this.el.children.length}renderRoster(t,r){return e("div",{class:"stack-roster-backdrop",onClick:this.closeRoster},e("div",{class:"stack-roster-content",onClick:t=>t.stopPropagation()},e("div",{class:"roster-header"},e("div",{class:"roster-titles"},e("h4",{class:"roster-main-title"},"Hidden Items"),e("span",{class:"roster-sub-title"},r," items total")),e("ui-button",{variant:"ghost",onClick:this.closeRoster,ariaLabel:"Close roster",icon:"times",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})),e("div",{class:"roster-list"},t.map(((t,r)=>e("div",{key:r,class:"roster-item"},e("div",{class:"roster-item-preview",innerHTML:o(t.outerHTML)}),e("span",{class:"roster-item-label"},"Item ",r+1)))))))}render(){const t=this.overlap||this.spacing.startsWith("-"),r=this.max>0?this.max:this.childrenCount,a=this.childrenCount-r,o=Array.from(this.el.children);return requestAnimationFrame((()=>this.updateChildrenVisibility(r))),e(i,{key:"6568eda1f5875356d720bc67a8c234f6f97effcf",class:{"ui-stack":!0,[`stack-${this.direction}`]:!0,[`stack-wrap-${this.wrap}`]:!0,"stack-overlap":t,"stack-show-dividers":this.showDividers&&!t,[`divider-${this.dividerType}`]:this.showDividers},style:{"--stack-spacing":t?"0":this.spacing,"--stack-overlap":t?this.spacing.startsWith("-")?this.spacing:"-12px":"0","align-items":this.align,"justify-content":this.justify,"flex-wrap":this.wrap}},e("div",{key:"3363f516615fadfd894b42961f94d83a7a254011",class:"stack-container"},e("slot",{key:"5f2c8cb4d62229c4439858f5433f30ed78d9bd71"}),a>0&&e("div",{key:"eb7614444d0beba127e9d1a9ca125265dbcd5e43",class:"stack-overflow-indicator",onClick:t=>{t.stopPropagation(),this.toggleRoster()},onKeyDown:t=>{"Enter"===t.key&&this.toggleRoster()},tabindex:"0",role:"button",title:`View ${a} more items`},"+",a)),this.isRosterOpen&&this.renderRoster(o,this.childrenCount))}static get style(){return'.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}:host(.stack-horizontal) .stack-container{flex-direction:row}:host(.stack-vertical) .stack-container{flex-direction:column}.stack-container{display:flex;gap:var(--stack-spacing, 8px)}:host(.stack-wrap-wrap) .stack-container{flex-wrap:wrap}:host(.stack-wrap-wrap-reverse) .stack-container{flex-wrap:wrap-reverse}:host(.stack-show-dividers) .stack-container{gap:0}:host(.stack-show-dividers) ::slotted(*:not(:last-child)){position:relative;margin-right:var(--stack-spacing, 8px);display:flex;align-items:center}:host(.stack-show-dividers) ::slotted(*:not(:last-child))::after{content:"";position:absolute;right:calc(var(--stack-spacing, 8px) / -2);background:var(--bg-primary, #e5e7eb)}:host(.stack-horizontal.stack-show-dividers) ::slotted(*:not(:last-child))::after{width:1px;height:60%;top:20%}:host(.stack-vertical.stack-show-dividers) ::slotted(*:not(:last-child))::after{height:1px;width:60%;left:20%;bottom:calc(var(--stack-spacing, 8px) / -2)}:host(.divider-dashed) ::slotted(*:not(:last-child))::after{border-right:1px dashed var(--border-default, #e5e7eb);background:none}:host(.divider-dotted) ::slotted(*:not(:last-child))::after{border-right:1px dotted var(--border-default, #e5e7eb);background:none}:host(.stack-overlap) .stack-container{padding-right:20px}:host(.stack-overlap) ::slotted(*){margin-right:var(--stack-overlap, -12px) !important;transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, filter 0.3s ease;position:relative;z-index:1;border:2px solid var(--bg-primary, #ffffff);box-sizing:border-box;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));cursor:pointer}:host(.stack-overlap) ::slotted(*:hover){transform:translateY(-8px) scale(1.1) rotate(1deg);z-index:100 !important;filter:drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2))}:host(.stack-overlap) ::slotted(*:last-child){margin-right:0 !important}.stack-roster-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.2s ease-out}.stack-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:400px;max-height:80vh;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:16px 20px;border-bottom:1px solid var(--border-subtle, #f1f5f9);display:flex;justify-content:space-between;align-items:center}.roster-header h4{margin:0;font-size:16px;font-weight:600;color:var(--text-primary, #1e293b)}.close-btn{background:var(--bg-secondary, #f1f5f9);border:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted, #64748b);font-size:18px;transition:all 0.2s}.close-btn:hover{background:var(--bg-primary, #e2e8f0);color:var(--text-primary, #0f172a)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{padding:10px;border-radius:10px;background:var(--bg-primary, #f8fafc);border:1px solid var(--border-subtle, #f1f5f9);display:flex;align-items:center;transition:background 0.2s}.roster-item:hover{background:var(--bg-secondary, #f1f5f9)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.stack-overflow-indicator{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);border:2px solid var(--bg-primary, #ffffff);color:var(--text-secondary, #4b5563);font-size:12px;font-weight:600;z-index:10;cursor:pointer;transition:transform 0.2s}.stack-overflow-indicator:hover{transform:scale(1.1);background:var(--bg-primary, #e5e7eb)}@media (prefers-color-scheme: dark){.stack-roster-content{background:var(--bg-primary, #1e293b)}.roster-header h4{color:var(--text-standard, #ffffff)}.roster-item{background:var(--color-primary, #334155);border-color:var(--color-primary, #475569)}.roster-item:hover{background:var(--color-primary, #475569)}.stack-overflow-indicator{background:var(--color-primary, #374151);border-color:var(--border-strong, #1f2937);color:var(--text-standard, #f3f4f6)}.stack-overflow-indicator:hover{background:var(--color-primary, #4b5563)}}'}},[769,"ui-stack",{direction:[1],wrap:[1],spacing:[1],align:[1],justify:[1],max:[2],overlap:[4],showDividers:[4,"show-dividers"],dividerType:[1,"divider-type"],childrenCount:[32],isRosterOpen:[32]}]);function p(){"undefined"!=typeof customElements&&["ui-stack","ui-badge","ui-button","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-stack":customElements.get(a(t))||customElements.define(a(t),l);break;case"ui-badge":customElements.get(a(t))||d();break;case"ui-button":customElements.get(a(t))||n();break;case"ui-icon":customElements.get(a(t))||s();break;case"ui-loader":customElements.get(a(t))||c()}}))}export{l as S,p as d}
|