atomicuilibrary 0.1.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/category-section.cjs.entry.js +2 -2
- package/dist/cjs/dom-BvBb0kmW.js +267 -0
- package/dist/cjs/exploration-project-tailwind.cjs.js +2 -2
- package/dist/cjs/{index-ClkOYpT8.js → index-C32cWsm5.js} +1 -1
- package/dist/cjs/layout-manager.cjs.entry.js +3 -3
- package/dist/cjs/library-card.cjs.entry.js +2 -2
- package/dist/cjs/lm-container_2.cjs.entry.js +2 -2
- package/dist/cjs/lm-panel_3.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/my-component.cjs.entry.js +1 -1
- package/dist/cjs/my-step.cjs.entry.js +2 -2
- package/dist/cjs/nav-bar.cjs.entry.js +4 -4
- package/dist/cjs/smart-step.cjs.entry.js +3 -3
- package/dist/cjs/timeline-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-accordion_11.cjs.entry.js +132 -50
- package/dist/cjs/ui-advanced-data-table.cjs.entry.js +2 -2
- package/dist/cjs/ui-anchor.cjs.entry.js +2 -2
- package/dist/cjs/ui-animate-on-scroll.cjs.entry.js +3 -3
- package/dist/cjs/ui-aside-panel.cjs.entry.js +10 -11
- package/dist/cjs/ui-avatar-group_5.cjs.entry.js +1694 -0
- package/dist/cjs/ui-breadcrumb-item.cjs.entry.js +3 -3
- package/dist/cjs/ui-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ui-callout-banner.cjs.entry.js +2 -2
- package/dist/cjs/ui-card.cjs.entry.js +4 -3
- package/dist/cjs/ui-carousel.cjs.entry.js +1 -1
- package/dist/cjs/ui-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/ui-code-editor.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-preview.cjs.entry.js +2 -2
- package/dist/cjs/ui-color-picker.cjs.entry.js +256 -22
- package/dist/cjs/ui-command-palette.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-box.cjs.entry.js +85 -11
- package/dist/cjs/ui-dialog-content.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-footer_2.cjs.entry.js +1 -1
- package/dist/cjs/ui-divider.cjs.entry.js +1 -1
- package/dist/cjs/ui-dock-host.cjs.entry.js +4 -4
- package/dist/cjs/ui-dock.cjs.entry.js +2 -2
- package/dist/cjs/ui-drag-drop.cjs.entry.js +2 -2
- package/dist/cjs/ui-dropdown_2.cjs.entry.js +104 -34
- package/dist/cjs/ui-empty-state.cjs.entry.js +2 -2
- package/dist/cjs/ui-fab-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-fab.cjs.entry.js +4 -4
- package/dist/cjs/ui-file-upload.cjs.entry.js +143 -44
- package/dist/cjs/ui-horizontal-nav.cjs.entry.js +2 -2
- package/dist/cjs/ui-knob.cjs.entry.js +1 -1
- package/dist/cjs/ui-label.cjs.entry.js +473 -0
- package/dist/cjs/ui-library.cjs.entry.js +2 -2
- package/dist/cjs/ui-list-group_2.cjs.entry.js +349 -60
- package/dist/cjs/ui-list.cjs.entry.js +76 -42
- package/dist/cjs/ui-masonry.cjs.entry.js +1 -1
- package/dist/cjs/ui-meter-group.cjs.entry.js +5 -4
- package/dist/cjs/ui-navigation-item.cjs.entry.js +5 -5
- package/dist/cjs/ui-number-input.cjs.entry.js +7 -3
- package/dist/cjs/ui-otp-input.cjs.entry.js +5 -5
- package/dist/cjs/{ui-pagination_4.cjs.entry.js → ui-pagination_3.cjs.entry.js} +35 -506
- package/dist/cjs/ui-panel.cjs.entry.js +1 -1
- package/dist/cjs/ui-pattern-input.cjs.entry.js +46 -11
- package/dist/cjs/ui-progress.cjs.entry.js +66 -9
- package/dist/cjs/ui-range-slider.cjs.entry.js +2 -2
- package/dist/cjs/ui-resizable-panel.cjs.entry.js +2 -2
- package/dist/cjs/ui-scroll-top.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-context-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ui-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-speed-dial.cjs.entry.js +1 -1
- package/dist/cjs/ui-speedometer.cjs.entry.js +28 -17
- package/dist/cjs/ui-splitter.cjs.entry.js +1 -1
- package/dist/cjs/ui-step.cjs.entry.js +2 -2
- package/dist/cjs/ui-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +14 -13
- package/dist/cjs/ui-tabs.cjs.entry.js +2 -2
- package/dist/cjs/ui-tag.cjs.entry.js +58 -13
- package/dist/cjs/ui-timeline.cjs.entry.js +10 -2
- package/dist/cjs/ui-timer.cjs.entry.js +2 -2
- package/dist/cjs/ui-toolbar.cjs.entry.js +2 -2
- package/dist/cjs/ui-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
- package/dist/cjs/ui-transfer-list.cjs.entry.js +6 -6
- package/dist/cjs/ui-tree.cjs.entry.js +30 -15
- package/dist/cjs/ui-workspace-manager.cjs.entry.js +2 -2
- package/dist/collection/assets/js/component-config.js +1 -0
- package/dist/collection/assets/js/demo-loader.js +2 -0
- package/dist/collection/assets/js/demos/about-demo.js +13 -13
- package/dist/collection/assets/js/demos/accordion-demo.js +66 -66
- package/dist/collection/assets/js/demos/advanced-data-table-demo.js +102 -102
- package/dist/collection/assets/js/demos/anchor-demo.js +27 -28
- package/dist/collection/assets/js/demos/animate-on-scroll-demo.js +12 -12
- package/dist/collection/assets/js/demos/aside-panel-demo.js +51 -51
- package/dist/collection/assets/js/demos/avatar-demo.js +433 -95
- package/dist/collection/assets/js/demos/badge-demo.js +51 -52
- package/dist/collection/assets/js/demos/breadcrumb-demo.js +7 -7
- package/dist/collection/assets/js/demos/button-demo.js +117 -107
- package/dist/collection/assets/js/demos/button-toggle-demo.js +199 -96
- package/dist/collection/assets/js/demos/callout-banner-demo.js +23 -23
- package/dist/collection/assets/js/demos/card-demo.js +23 -22
- package/dist/collection/assets/js/demos/carousel-demo.js +632 -360
- package/dist/collection/assets/js/demos/checkbox-demo.js +124 -7
- package/dist/collection/assets/js/demos/color-picker-demo.js +394 -100
- package/dist/collection/assets/js/demos/command-palette-demo.js +182 -65
- package/dist/collection/assets/js/demos/complex-form-demo.js +5 -5
- package/dist/collection/assets/js/demos/context-menu-demo.js +43 -43
- package/dist/collection/assets/js/demos/dialog-demo-temp.js +3 -3
- package/dist/collection/assets/js/demos/dialog-demo.js +336 -230
- package/dist/collection/assets/js/demos/divider-demo.js +59 -62
- package/dist/collection/assets/js/demos/dock-demo.js +12 -12
- package/dist/collection/assets/js/demos/dock-host-init.js +31 -31
- package/dist/collection/assets/js/demos/documentation-demo.js +34 -34
- package/dist/collection/assets/js/demos/drag-drop-demo.js +2 -2
- package/dist/collection/assets/js/demos/dropdown-demo.js +140 -136
- package/dist/collection/assets/js/demos/dropdown-subtitle-demo.js +2 -2
- package/dist/collection/assets/js/demos/empty-state-demo.js +294 -78
- package/dist/collection/assets/js/demos/fab-demo.js +95 -11
- package/dist/collection/assets/js/demos/file-upload-demo.js +641 -171
- package/dist/collection/assets/js/demos/home-components.js +2 -2
- package/dist/collection/assets/js/demos/horizontal-nav-demo.js +6 -6
- package/dist/collection/assets/js/demos/icon-demo.js +17 -17
- package/dist/collection/assets/js/demos/input-demo.js +147 -143
- package/dist/collection/assets/js/demos/knob-demo.js +29 -30
- package/dist/collection/assets/js/demos/label-demo.js +697 -0
- package/dist/collection/assets/js/demos/layout-manager-demo.js +55 -55
- package/dist/collection/assets/js/demos/list-demo.js +185 -122
- package/dist/collection/assets/js/demos/loader-demo.js +48 -48
- package/dist/collection/assets/js/demos/masonry-demo.js +568 -140
- package/dist/collection/assets/js/demos/meter-group-demo.js +14 -16
- package/dist/collection/assets/js/demos/multi-level-context-menu-demo.js +25 -25
- package/dist/collection/assets/js/demos/my-profile-demo.js +27 -27
- package/dist/collection/assets/js/demos/nav-bar-demo.js +1 -1
- package/dist/collection/assets/js/demos/number-input-demo.js +262 -211
- package/dist/collection/assets/js/demos/pagination-demo.js +29 -29
- package/dist/collection/assets/js/demos/panel-demo.js +18 -25
- package/dist/collection/assets/js/demos/pattern-input-demo.js +278 -40
- package/dist/collection/assets/js/demos/popover-demo.js +240 -149
- package/dist/collection/assets/js/demos/progress-demo.js +170 -156
- package/dist/collection/assets/js/demos/radio-demo.js +73 -12
- package/dist/collection/assets/js/demos/range-slider-demo.js +33 -33
- package/dist/collection/assets/js/demos/rating-demo.js +19 -19
- package/dist/collection/assets/js/demos/scroll-top-demo.js +8 -9
- package/dist/collection/assets/js/demos/skeleton-demo.js +110 -52
- package/dist/collection/assets/js/demos/skeleton-performance-demo.js +2 -2
- package/dist/collection/assets/js/demos/smart-dialog-demo.js +12 -12
- package/dist/collection/assets/js/demos/smart-menu-demo.js +17 -17
- package/dist/collection/assets/js/demos/snackbar-demo.js +53 -53
- package/dist/collection/assets/js/demos/speed-dial-demo.js +14 -14
- package/dist/collection/assets/js/demos/speedometer-demo.js +40 -32
- package/dist/collection/assets/js/demos/split-button-demo.js +2 -2
- package/dist/collection/assets/js/demos/splitter-demo.js +14 -14
- package/dist/collection/assets/js/demos/stack-demo.js +27 -27
- package/dist/collection/assets/js/demos/stepper-demo.js +49 -49
- package/dist/collection/assets/js/demos/switch-demo.js +561 -125
- package/dist/collection/assets/js/demos/tabs-demo.js +22 -22
- package/dist/collection/assets/js/demos/tag-demo.js +62 -62
- package/dist/collection/assets/js/demos/theme-selector-demo.js +27 -27
- package/dist/collection/assets/js/demos/timeline-demo.js +10 -10
- package/dist/collection/assets/js/demos/timeline-playground.js +2 -2
- package/dist/collection/assets/js/demos/timer-demo.js +10 -10
- package/dist/collection/assets/js/demos/toolbar-demo.js +17 -17
- package/dist/collection/assets/js/demos/tooltip-demo.js +92 -90
- package/dist/collection/assets/js/demos/top-bar-demo.js +6 -6
- package/dist/collection/assets/js/demos/transfer-list-demo.js +20 -20
- package/dist/collection/assets/js/demos/tree-demo.js +50 -66
- package/dist/collection/assets/js/demos/workspace-manager-demo.js +20 -20
- package/dist/collection/collection-manifest.json +1 -2
- package/dist/collection/components/accordion/accordion.css +275 -9
- package/dist/collection/components/accordion/accordion.js +7 -6
- package/dist/collection/components/advanced-data-table/advanced-data-table.css +5 -5
- package/dist/collection/components/advanced-data-table/advanced-data-table.js +2 -2
- package/dist/collection/components/anchor/anchor.css +1 -0
- package/dist/collection/components/animate-on-scroll/animate-on-scroll.js +2 -2
- package/dist/collection/components/aside-panel/aside-panel.css +2 -2
- package/dist/collection/components/aside-panel/aside-panel.js +10 -11
- package/dist/collection/components/avatar/avatar.css +6 -6
- package/dist/collection/components/avatar/avatar.js +63 -11
- package/dist/collection/components/badge/badge.css +27 -17
- package/dist/collection/components/badge/badge.js +6 -3
- package/dist/collection/components/breadcrumb/breadcrumb-item.js +2 -2
- package/dist/collection/components/button/button.css +1 -0
- package/dist/collection/components/button/button.js +3 -3
- package/dist/collection/components/button-toggle/button-toggle.js +2 -2
- package/dist/collection/components/button-toggle-group/button-toggle-group.css +161 -14
- package/dist/collection/components/button-toggle-group/button-toggle-group.js +2 -2
- package/dist/collection/components/callout-banner/callout-banner.css +75 -0
- package/dist/collection/components/callout-banner/callout-banner.js +1 -1
- package/dist/collection/components/card/card.css +221 -9
- package/dist/collection/components/card/card.js +3 -2
- package/dist/collection/components/checkbox/checkbox.js +3 -3
- package/dist/collection/components/code-editor/code-editor.js +1 -1
- package/dist/collection/components/code-preview/ui-code-preview.js +1 -1
- package/dist/collection/components/color-picker/color-picker.css +110 -6
- package/dist/collection/components/color-picker/color-picker.js +302 -26
- package/dist/collection/components/context-menu/context-menu.css +9 -9
- package/dist/collection/components/dialog-box/dialog-box.js +116 -14
- package/dist/collection/components/dialog-header/dialog-header.js +1 -1
- package/dist/collection/components/dock/dock.css +116 -3
- package/dist/collection/components/dock-host/ui-dock-host.js +3 -3
- package/dist/collection/components/drag-drop/drag-drop.js +1 -1
- package/dist/collection/components/dropdown/dropdown.css +101 -8
- package/dist/collection/components/dropdown/dropdown.js +94 -28
- package/dist/collection/components/empty-state/empty-state.js +1 -1
- package/dist/collection/components/fab/fab.css +87 -15
- package/dist/collection/components/fab/fab.js +3 -3
- package/dist/collection/components/fab-item/fab-item.js +1 -1
- package/dist/collection/components/file-upload/file-upload.css +1362 -31
- package/dist/collection/components/file-upload/file-upload.js +171 -50
- package/dist/collection/components/horizontal-nav/horizontal-nav.css +9 -9
- package/dist/collection/components/horizontal-nav/horizontal-nav.js +2 -2
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/input/input.css +9 -0
- package/dist/collection/components/input/input.js +20 -9
- package/dist/collection/components/label/label.css +583 -0
- package/dist/collection/components/label/label.js +1669 -0
- package/dist/collection/components/layout-manager/layout-manager.js +1 -1
- package/dist/collection/components/layout-manager/lm-floating-window/lm-floating-window.js +1 -1
- package/dist/collection/components/layout-manager/lm-panel/lm-panel.js +1 -1
- package/dist/collection/components/layout-manager/lm-splitter/lm-splitter.js +1 -1
- package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js +1 -1
- package/dist/collection/components/library/category-section.js +1 -1
- package/dist/collection/components/library/library-card.js +1 -1
- package/dist/collection/components/library/library.js +1 -1
- package/dist/collection/components/list/list.css +46 -5
- package/dist/collection/components/list/list.js +76 -42
- package/dist/collection/components/list-group/list-group.css +0 -2
- package/dist/collection/components/list-group/list-group.js +11 -5
- package/dist/collection/components/list-item/list-item.css +403 -131
- package/dist/collection/components/list-item/list-item.js +345 -61
- package/dist/collection/components/loader/loader.css +1 -1
- package/dist/collection/components/loader/loader.js +2 -2
- package/dist/collection/components/meter-group/meter-group.css +5 -0
- package/dist/collection/components/meter-group/meter-group.js +3 -2
- package/dist/collection/components/my-step/my-step.js +1 -1
- package/dist/collection/components/nav-bar/nav-bar.css +4 -4
- package/dist/collection/components/nav-bar/nav-bar.js +6 -6
- package/dist/collection/components/number-input/number-input.js +6 -2
- package/dist/collection/components/otp-input/otp-input.css +10 -0
- package/dist/collection/components/otp-input/otp-input.js +3 -3
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/pattern-input/pattern-input.css +0 -1
- package/dist/collection/components/pattern-input/pattern-input.js +44 -9
- package/dist/collection/components/popover/popover.css +35 -7
- package/dist/collection/components/popover/popover.js +64 -9
- package/dist/collection/components/progress/progress.css +176 -32
- package/dist/collection/components/progress/progress.js +66 -8
- package/dist/collection/components/radio/radio.css +2 -0
- package/dist/collection/components/radio/radio.js +2 -2
- package/dist/collection/components/range-slider/range-slider.css +284 -31
- package/dist/collection/components/range-slider/range-slider.js +5 -5
- package/dist/collection/components/rating/rating.css +151 -65
- package/dist/collection/components/rating/rating.js +31 -13
- package/dist/collection/components/resizable-panel/resizable-panel.js +1 -1
- package/dist/collection/components/skeleton/skeleton-loader.css +144 -44
- package/dist/collection/components/skeleton/skeleton-loader.js +11 -7
- package/dist/collection/components/smart-stepper/smart-step.js +2 -2
- package/dist/collection/components/smart-stepper/smart-stepper.js +1 -1
- package/dist/collection/components/speedometer/speedometer.css +26 -6
- package/dist/collection/components/speedometer/speedometer.js +26 -15
- package/dist/collection/components/stack/stack.js +2 -2
- package/dist/collection/components/step/step.js +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/switch/switch.css +367 -8
- package/dist/collection/components/switch/switch.js +13 -12
- package/dist/collection/components/tag/tag.css +38 -12
- package/dist/collection/components/tag/tag.js +58 -13
- package/dist/collection/components/tag-group/tag-group.css +0 -1
- package/dist/collection/components/tag-group/tag-group.js +3 -3
- package/dist/collection/components/timeline/timeline.css +380 -317
- package/dist/collection/components/timeline/timeline.js +8 -0
- package/dist/collection/components/timeline-item/timeline-item.js +1 -1
- package/dist/collection/components/timer/timer.js +1 -1
- package/dist/collection/components/toggle-group/toggle-group.css +7 -3
- package/dist/collection/components/toggle-group/toggle-group.js +7 -3
- package/dist/collection/components/toolbar/toolbar.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/components/top-bar/top-bar.js +2 -2
- package/dist/collection/components/transfer-list/transfer-list.css +13 -13
- package/dist/collection/components/transfer-list/transfer-list.js +4 -4
- package/dist/collection/components/tree/tree.css +35 -21
- package/dist/collection/components/tree/tree.js +28 -13
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css +34 -16
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js +46 -11
- package/dist/collection/components/ui-navigation-bar/navigation-item.css +7 -7
- package/dist/collection/components/ui-navigation-bar/navigation-item.js +3 -3
- package/dist/collection/utils/dom.js +151 -151
- package/dist/components/avatar-group.js +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/button-toggle.js +1 -1
- package/dist/components/button.js +1 -0
- package/dist/components/category-section2.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog-header.js +1 -1
- package/dist/components/dom.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/icon.js +2 -2
- package/dist/components/input.js +1 -1
- package/dist/components/layout-manager.js +1 -1
- package/dist/components/library-card2.js +1 -1
- package/dist/components/list-group.js +1 -1
- package/dist/components/list-item.js +1 -1
- package/dist/components/lm-container2.js +1 -1
- package/dist/components/lm-floating-window2.js +1 -1
- package/dist/components/lm-panel2.js +1 -1
- package/dist/components/lm-splitter2.js +1 -1
- package/dist/components/lm-tabs2.js +1 -1
- package/dist/components/loader.js +1 -1
- package/dist/components/my-step.js +1 -1
- package/dist/components/nav-bar.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -0
- package/dist/components/radio.js +1 -1
- package/dist/components/range-slider.js +1 -1
- package/dist/components/rating.js +1 -1
- package/dist/components/resizable-panel.js +1 -1
- package/dist/components/skeleton-loader.js +1 -1
- package/dist/components/smart-step.js +1 -1
- package/dist/components/stack.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/tag-group.js +1 -1
- package/dist/components/tag.js +1 -1
- package/dist/components/timeline-item.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/ui-accordion.js +1 -1
- package/dist/components/ui-advanced-data-table.js +1 -1
- package/dist/components/ui-anchor.js +1 -1
- package/dist/components/ui-animate-on-scroll.js +1 -1
- package/dist/components/ui-aside-panel.js +1 -1
- package/dist/components/ui-badge.js +1 -1
- package/dist/components/ui-breadcrumb-item.js +1 -1
- package/dist/components/ui-breadcrumb.js +1 -1
- package/dist/components/ui-button-toggle-group.js +1 -1
- package/dist/components/ui-button.js +1 -1
- package/dist/components/ui-callout-banner.js +1 -1
- package/dist/components/ui-card.js +1 -1
- package/dist/components/ui-carousel.js +1 -1
- package/dist/components/ui-code-editor.js +1 -1
- package/dist/components/ui-code-preview.js +1 -1
- package/dist/components/ui-color-picker.js +1 -1
- package/dist/components/ui-command-palette.js +1 -1
- package/dist/components/ui-dialog-box.js +1 -1
- package/dist/components/ui-dock-host.js +1 -1
- package/dist/components/ui-dock.js +1 -1
- package/dist/components/ui-drag-drop.js +1 -1
- package/dist/components/ui-empty-state.js +1 -1
- package/dist/components/ui-fab-item.js +1 -1
- package/dist/components/ui-fab.js +1 -1
- package/dist/components/ui-file-upload.js +1 -1
- package/dist/components/ui-horizontal-nav.js +1 -1
- package/dist/components/ui-knob.js +1 -1
- package/dist/components/{ui-color-controller.d.ts → ui-label.d.ts} +4 -4
- package/dist/components/ui-label.js +1 -0
- package/dist/components/ui-library.js +1 -1
- package/dist/components/ui-list.js +1 -1
- package/dist/components/ui-masonry.js +1 -1
- package/dist/components/ui-meter-group.js +1 -1
- package/dist/components/ui-navigation-bar.js +1 -1
- package/dist/components/ui-navigation-item.js +1 -1
- package/dist/components/ui-number-input.js +1 -1
- package/dist/components/ui-otp-input.js +1 -1
- package/dist/components/ui-panel.js +1 -1
- package/dist/components/ui-pattern-input.js +1 -1
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-progress.js +1 -1
- package/dist/components/ui-scroll-top.js +1 -1
- package/dist/components/ui-smart-stepper.js +1 -1
- package/dist/components/ui-snackbar.js +1 -1
- package/dist/components/ui-speed-dial.js +1 -1
- package/dist/components/ui-speedometer.js +1 -1
- package/dist/components/ui-splitter.js +1 -1
- package/dist/components/ui-step.js +1 -1
- package/dist/components/ui-stepper.js +1 -1
- package/dist/components/ui-tabs.js +1 -1
- package/dist/components/ui-timeline.js +1 -1
- package/dist/components/ui-timer.js +1 -1
- package/dist/components/ui-toolbar.js +1 -1
- package/dist/components/ui-top-bar.js +1 -1
- package/dist/components/ui-transfer-list.js +1 -1
- package/dist/components/ui-tree.js +1 -1
- package/dist/components/ui-workspace-manager.js +1 -1
- package/dist/esm/category-section.entry.js +2 -2
- package/dist/esm/dom-DFBTWhGw.js +262 -0
- package/dist/esm/exploration-project-tailwind.js +3 -3
- package/dist/esm/{index-DUsoYu9r.js → index-Dqu2zaH1.js} +1 -1
- package/dist/esm/layout-manager.entry.js +3 -3
- package/dist/esm/library-card.entry.js +2 -2
- package/dist/esm/lm-container_2.entry.js +2 -2
- package/dist/esm/lm-panel_3.entry.js +4 -4
- package/dist/esm/loader.js +3 -3
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/my-step.entry.js +2 -2
- package/dist/esm/nav-bar.entry.js +4 -4
- package/dist/esm/smart-step.entry.js +3 -3
- package/dist/esm/timeline-item.entry.js +2 -2
- package/dist/esm/ui-accordion_11.entry.js +132 -50
- package/dist/esm/ui-advanced-data-table.entry.js +2 -2
- package/dist/esm/ui-anchor.entry.js +2 -2
- package/dist/esm/ui-animate-on-scroll.entry.js +3 -3
- package/dist/esm/ui-aside-panel.entry.js +10 -11
- package/dist/esm/ui-avatar-group_5.entry.js +1688 -0
- package/dist/esm/ui-breadcrumb-item.entry.js +3 -3
- package/dist/esm/ui-breadcrumb.entry.js +1 -1
- package/dist/esm/ui-callout-banner.entry.js +2 -2
- package/dist/esm/ui-card.entry.js +4 -3
- package/dist/esm/ui-carousel.entry.js +1 -1
- package/dist/esm/ui-checkbox.entry.js +3 -3
- package/dist/esm/ui-code-editor.entry.js +2 -2
- package/dist/esm/ui-code-preview.entry.js +2 -2
- package/dist/esm/ui-color-picker.entry.js +256 -22
- package/dist/esm/ui-command-palette.entry.js +1 -1
- package/dist/esm/ui-dialog-box.entry.js +85 -11
- package/dist/esm/ui-dialog-content.entry.js +1 -1
- package/dist/esm/ui-dialog-footer_2.entry.js +1 -1
- package/dist/esm/ui-divider.entry.js +1 -1
- package/dist/esm/ui-dock-host.entry.js +4 -4
- package/dist/esm/ui-dock.entry.js +2 -2
- package/dist/esm/ui-drag-drop.entry.js +2 -2
- package/dist/esm/ui-dropdown_2.entry.js +104 -34
- package/dist/esm/ui-empty-state.entry.js +2 -2
- package/dist/esm/ui-fab-item.entry.js +2 -2
- package/dist/esm/ui-fab.entry.js +4 -4
- package/dist/esm/ui-file-upload.entry.js +143 -44
- package/dist/esm/ui-horizontal-nav.entry.js +2 -2
- package/dist/esm/ui-knob.entry.js +1 -1
- package/dist/esm/ui-label.entry.js +471 -0
- package/dist/esm/ui-library.entry.js +2 -2
- package/dist/esm/ui-list-group_2.entry.js +349 -60
- package/dist/esm/ui-list.entry.js +76 -42
- package/dist/esm/ui-masonry.entry.js +1 -1
- package/dist/esm/ui-meter-group.entry.js +5 -4
- package/dist/esm/ui-navigation-item.entry.js +5 -5
- package/dist/esm/ui-number-input.entry.js +7 -3
- package/dist/esm/ui-otp-input.entry.js +5 -5
- package/dist/esm/{ui-pagination_4.entry.js → ui-pagination_3.entry.js} +36 -506
- package/dist/esm/ui-panel.entry.js +1 -1
- package/dist/esm/ui-pattern-input.entry.js +46 -11
- package/dist/esm/ui-progress.entry.js +66 -9
- package/dist/esm/ui-range-slider.entry.js +2 -2
- package/dist/esm/ui-resizable-panel.entry.js +2 -2
- package/dist/esm/ui-scroll-top.entry.js +1 -1
- package/dist/esm/ui-smart-context-menu.entry.js +1 -1
- package/dist/esm/ui-smart-stepper.entry.js +2 -2
- package/dist/esm/ui-snackbar.entry.js +1 -1
- package/dist/esm/ui-speed-dial.entry.js +1 -1
- package/dist/esm/ui-speedometer.entry.js +28 -17
- package/dist/esm/ui-splitter.entry.js +1 -1
- package/dist/esm/ui-step.entry.js +2 -2
- package/dist/esm/ui-stepper.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +14 -13
- package/dist/esm/ui-tabs.entry.js +2 -2
- package/dist/esm/ui-tag.entry.js +58 -13
- package/dist/esm/ui-timeline.entry.js +10 -2
- package/dist/esm/ui-timer.entry.js +2 -2
- package/dist/esm/ui-toolbar.entry.js +2 -2
- package/dist/esm/ui-tooltip.entry.js +4 -4
- package/dist/esm/ui-top-bar.entry.js +1 -1
- package/dist/esm/ui-transfer-list.entry.js +6 -6
- package/dist/esm/ui-tree.entry.js +30 -15
- package/dist/esm/ui-workspace-manager.entry.js +2 -2
- package/dist/exploration-project-tailwind/exploration-project-tailwind.css +1 -1
- package/dist/exploration-project-tailwind/exploration-project-tailwind.esm.js +1 -1
- package/dist/exploration-project-tailwind/{p-7ba2258a.entry.js → p-024a299a.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-0a71896a.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-35296877.entry.js → p-0cdeb8d8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a42fdc33.entry.js → p-139cefbc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-036d2a44.entry.js → p-198c83e5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-236f47b1.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-81ebba11.entry.js → p-25530d0d.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-41cd6bf0.entry.js → p-298f2057.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-85e36111.entry.js → p-2b5a8e3e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-e8c6d395.entry.js → p-2b6aa7bc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-70bacda8.entry.js → p-2cfba753.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-cbee2607.entry.js → p-2fe22958.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-20ecc116.entry.js → p-3012e780.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-321c3f46.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-8b57fe4e.entry.js → p-3ab43638.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-3ad7e47e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3b1ca826.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3ee8ddae.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-e22317c1.entry.js → p-3efb44c8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-36861546.entry.js → p-42e3bc28.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-4360331a.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-2f961934.entry.js → p-443de32b.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-898dd0fa.entry.js → p-44d15451.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4288c158.entry.js → p-46071679.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a3f465d9.entry.js → p-497d6182.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-4ad8c55c.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-4aaa8e40.entry.js → p-4c46ac0b.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-98e91da5.entry.js → p-5042ddaa.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-60190e0e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-60530874.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-200241f8.entry.js → p-6108565d.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-fb4aca69.entry.js → p-62889cfe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c02284ea.entry.js → p-66f71613.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-7889bfc4.entry.js → p-67c440b2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c1c8ac28.entry.js → p-6f09503f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-721bdbc3.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-747b02ea.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c6fd72e1.entry.js → p-754cb046.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-97af03cc.entry.js → p-7ed3bba2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d59da767.entry.js → p-864cebb7.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4d73c143.entry.js → p-96ee3196.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-54965530.entry.js → p-97086868.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d114a347.entry.js → p-9c5ced88.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-9d3044d4.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-9e079be6.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-790556f0.entry.js → p-9e4c45f5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-9eee7394.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-DFBTWhGw.js +1 -0
- package/dist/exploration-project-tailwind/p-Dqu2zaH1.js +2 -0
- package/dist/exploration-project-tailwind/p-a7bdedc2.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c87aeab6.entry.js → p-a8ec29de.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6ddbee42.entry.js → p-ae617f62.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-05a436d3.entry.js → p-aef76052.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-b5f043fa.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-b637b91b.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-d2e45c5e.entry.js → p-bc49a088.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6b838549.entry.js → p-bd9a631f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-e8ba0c95.entry.js → p-bf4b6767.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c0fa400e.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-8578b616.entry.js → p-c4f3d990.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c68ddb2f.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-c79574c4.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-c840098d.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-a1ad32a2.entry.js → p-c8663cbe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-cb6e38a6.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-cb9f2df1.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-cfe8b696.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-d00e13ae.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c4ba7e52.entry.js → p-d01ed934.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-aa85ff78.entry.js → p-d4e57d94.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-ccb5c737.entry.js → p-d5bd3a3f.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-45482d86.entry.js → p-d987cebe.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-d9ae77c0.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-e9bae5c7.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f516fabc.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f68e2794.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-d30e24bd.entry.js → p-fa034f69.entry.js} +1 -1
- package/dist/types/components/aside-panel/aside-panel.d.ts +0 -3
- package/dist/types/components/avatar/avatar.d.ts +3 -0
- package/dist/types/components/avatar/types.d.ts +2 -0
- package/dist/types/components/badge/badge.d.ts +1 -0
- package/dist/types/components/color-picker/color-picker.d.ts +35 -2
- package/dist/types/components/dialog-box/dialog-box.d.ts +10 -0
- package/dist/types/components/dropdown/dropdown.d.ts +5 -0
- package/dist/types/components/file-upload/file-upload.d.ts +23 -6
- package/dist/types/components/label/label.d.ts +290 -0
- package/dist/types/components/label/types.d.ts +39 -0
- package/dist/types/components/list/list.d.ts +2 -1
- package/dist/types/components/list-group/list-group.d.ts +1 -0
- package/dist/types/components/list-item/list-item.d.ts +45 -17
- package/dist/types/components/pattern-input/pattern-input.d.ts +6 -0
- package/dist/types/components/popover/popover.d.ts +3 -0
- package/dist/types/components/progress/progress.d.ts +7 -0
- package/dist/types/components/range-slider/range-slider.d.ts +2 -2
- package/dist/types/components/rating/rating.d.ts +1 -0
- package/dist/types/components/skeleton/skeleton-loader.d.ts +1 -1
- package/dist/types/components/speedometer/speedometer.d.ts +1 -0
- package/dist/types/components/tag/tag.d.ts +4 -0
- package/dist/types/components/tree/tree.d.ts +1 -0
- package/dist/types/components/ui-navigation-bar/navigation-bar/navigation-bar.d.ts +1 -1
- package/dist/types/components.d.ts +742 -425
- package/dist/types/types/common.d.ts +2 -2
- package/dist/types/types/common.type.d.ts +2 -0
- package/dist/types/utils/dom.d.ts +4 -4
- package/package.json +4 -5
- package/dist/cjs/dom-oP1E4Rd3.js +0 -267
- package/dist/cjs/ui-avatar-group_3.cjs.entry.js +0 -634
- package/dist/cjs/ui-color-controller.cjs.entry.js +0 -150
- package/dist/cjs/ui-popover.cjs.entry.js +0 -517
- package/dist/cjs/ui-smart-location-dropdown.cjs.entry.js +0 -565
- package/dist/collection/components/color-controller/color-controller.css +0 -108
- package/dist/collection/components/color-controller/color-controller.js +0 -224
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.css +0 -357
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js +0 -1190
- package/dist/components/ui-color-controller.js +0 -1
- package/dist/components/ui-smart-location-dropdown.d.ts +0 -11
- package/dist/components/ui-smart-location-dropdown.js +0 -1
- package/dist/esm/dom-BMFah5q3.js +0 -262
- package/dist/esm/ui-avatar-group_3.entry.js +0 -630
- package/dist/esm/ui-color-controller.entry.js +0 -148
- package/dist/esm/ui-popover.entry.js +0 -515
- package/dist/esm/ui-smart-location-dropdown.entry.js +0 -563
- package/dist/exploration-project-tailwind/p-06f0c679.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-0d31c9e9.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-148e81df.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-16bdd162.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-2347d21b.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-3d381f75.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4417a9d8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-44742ddd.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-47e2a7ee.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4bef8bed.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-4efd63ce.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-5c835d90.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-61717490.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-717dad1f.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-71d95bb1.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-9bd14f69.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-9fc06ff0.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-BMFah5q3.js +0 -1
- package/dist/exploration-project-tailwind/p-DUsoYu9r.js +0 -2
- package/dist/exploration-project-tailwind/p-a27f59d2.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-a7b07cf4.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-bd89d060.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-c63c522e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-c69dd43e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-d6ce9721.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-dc92a343.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-debede45.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-e76318c7.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ea51c5d8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-eab5ad36.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f0bc5d7e.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f1beee72.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f543392f.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f61cfb7c.entry.js +0 -1
- package/dist/types/components/color-controller/color-controller.d.ts +0 -24
- package/dist/types/components/smart-location-dropdown/smart-location-dropdown.d.ts +0 -119
- package/dist/types/components/smart-location-dropdown/types.d.ts +0 -37
- /package/dist/collection/components/{smart-location-dropdown → label}/types.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as o,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as n}from"./loader.js";const s=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.anchorClick=e(this,"anchorClick",7),this.anchorItemClick=e(this,"anchorItemClick",7),this.activeItemChange=e(this,"activeItemChange",7),this.navigate=e(this,"navigate",7),this.affixChange=e(this,"affixChange",7),this.progressChange=e(this,"progressChange",7),this.expandChange=e(this,"expandChange",7)}get el(){return this}items=[];links="";mode="vertical";orientation="vertical";position="left";activeItem="";activeLink="";scrollOffset=80;routerNavigate=!1;loadIcons=!0;sticky=!0;scrollContainer="";smoothScroll=!0;showTooltip=!1;showIndicator=!0;observerRootMargin="";useSlot=!1;showNumbers=!1;numberStyle="numeric";size="md";theme="light";activeColor="#18ff3e";alignment="left";updateHash=!1;affix=!1;affixOffset=20;indicator="line";autoGenContainer="";showProgress=!1;arrowNavigation=!0;collapsible=!1;defaultExpanded=!0;derivedItems=[];currentActive="";isAffixed=!1;scrollProgress=0;expandedItems=new Set;indicatorStyle={};_observer=null;_onWindowScroll=null;_onContainerScroll=null;_onHashChange=null;linkElements=new Map;scrollTimeout;anchorClick;anchorItemClick;activeItemChange;navigate;affixChange;progressChange;expandChange;componentWillLoad(){this.autoGenContainer?this.generateLinksFromContainer():this.parseItems(),this.currentActive=this.activeItem||this.activeLink,this.defaultExpanded&&this.expandAll()}itemsChanged(){this.autoGenContainer||this.parseItems()}handleAutoGenContainerChange(){this.generateLinksFromContainer()}parseItems(){const t=this.items;if(t&&t.length>0){if("string"==typeof t)try{this.derivedItems=JSON.parse(t)}catch{this.derivedItems=[]}else this.derivedItems=[...t];return}if(this.links&&this.links.length>0){try{this.derivedItems=JSON.parse(this.links)}catch{this.derivedItems=[]}return}const i=Array.from(this.el.querySelectorAll("ui-anchor-item"));i.length>0&&(this.derivedItems=i.map((t=>({id:t.getAttribute("target")||t.getAttribute("id")||"",label:t.getAttribute("label")||"",icon:t.getAttribute("icon")??void 0,iconLibrary:t.getAttribute("iconLibrary")||t.getAttribute("icon-library"),disabled:t.hasAttribute("disabled"),badge:t.getAttribute("badge")??void 0,tooltip:t.getAttribute("tooltip")??void 0,href:t.getAttribute("href")??void 0,target:t.getAttribute("target")??void 0,rel:t.getAttribute("rel")??void 0}))))}generateLinksFromContainer(){if(!this.autoGenContainer)return;const t=document.querySelector(this.autoGenContainer);if(!t)return;const i=t.querySelectorAll("h1, h2, h3, h4");this.derivedItems=Array.from(i).map(((t,i)=>(t.id||(t.id="auto-anchor-"+i),{id:"link-"+i,label:t.innerText??t.textContent??"",target:t.id??""})))}componentDidLoad(){this.setupScrollSpy(),this.setupAffix(),this.setupProgress(),this.updateHash&&this.setupHashNavigation(),setTimeout((()=>this.updateIndicatorPosition(this.currentActive)),100)}disconnectedCallback(){if(this._observer)try{this._observer.disconnect()}catch(t){}this._onWindowScroll&&window.removeEventListener("scroll",this._onWindowScroll),this._onContainerScroll&&this.scrollContainer&&document.querySelector(this.scrollContainer)?.removeEventListener("scroll",this._onContainerScroll),this._onHashChange&&window.removeEventListener("hashchange",this._onHashChange),this.scrollTimeout&&clearTimeout(this.scrollTimeout)}getParsedItems(){return this.derivedItems}flattenItems(t){return t.reduce(((t,i)=>(t.push(i),i.children&&t.push(...this.flattenItems(i.children)),t)),[])}expandAll(){this.flattenItems(this.getParsedItems()).forEach((t=>{t.children&&t.children.length>0&&this.expandedItems.add(t.id)})),this.expandedItems=new Set(this.expandedItems)}setupAffix(){if(!this.affix)return;const t=()=>{const t=(window.pageYOffset||document.documentElement.scrollTop)>this.affixOffset;t!==this.isAffixed&&(this.isAffixed=t,this.affixChange.emit(this.isAffixed))};window.addEventListener("scroll",t),this._onWindowScroll=t,t()}setupProgress(){if(!this.showProgress)return;const t=()=>{this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{const t=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(t){const i=t.scrollHeight-t.clientHeight;this.scrollProgress=i>0?t.scrollTop/i*100:0}else{const t=window.pageYOffset||document.documentElement.scrollTop,i=document.documentElement.scrollHeight-window.innerHeight;this.scrollProgress=i>0?t/i*100:0}this.progressChange.emit(this.scrollProgress)}),50)};this.scrollContainer?(document.querySelector(this.scrollContainer)?.addEventListener("scroll",t),this._onContainerScroll=t):(window.addEventListener("scroll",t),this._onWindowScroll||(this._onWindowScroll=t)),t()}setupHashNavigation(){this._onHashChange=()=>{const t=window.location.hash.substring(1);t&&this.scrollToSection(t)},window.addEventListener("hashchange",this._onHashChange)}setupScrollSpy(){const t=this.flattenItems(this.getParsedItems());let i=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!i&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(i=t.querySelector(this.scrollContainer))}const e=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const e=i.target.getAttribute("id"),o=t.find((t=>t.target===e||t.id===e));e&&o&&this.setActiveState(o.id)}}))}),{root:i,rootMargin:this.observerRootMargin||`-${this.scrollOffset}px 0px -50% 0px`,threshold:0});t.forEach((t=>{const o=t.target||t.id;if(!o)return;let r=document.getElementById(o);!r&&i&&(r=i.querySelector("#"+o)),r&&e.observe(r)})),this._observer=e}setActiveState(t){if(this.currentActive===t)return;this.currentActive=t,this.activeItem=t,this.activeLink=t;const i=this.flattenItems(this.getParsedItems()).find((i=>i.id===t));i&&this.activeItemChange.emit({id:i.id,label:i.label??""}),this.updateIndicatorPosition(t),this.collapsible&&this.ensureVisible(t,this.getParsedItems())}ensureVisible(t,i,e=null){for(const o of i){if(o.id===t)return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0;if(o.children&&this.ensureVisible(t,o.children,o.id))return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0}return!1}scrollToSection(t){const i=document.getElementById(t)||document.querySelector("#"+t);if(!i)return;let e=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!e&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(e=t.querySelector(this.scrollContainer))}if(e){const t=e.getBoundingClientRect(),o=i.getBoundingClientRect();e.scrollTo({top:e.scrollTop+(o.top-t.top)-this.scrollOffset,behavior:this.smoothScroll?"smooth":"auto"})}else{const t=i.getBoundingClientRect().top+window.pageYOffset-this.scrollOffset;window.scrollTo({top:t,behavior:this.smoothScroll?"smooth":"auto"})}this.updateHash&&history.pushState(null,"","#"+t)}updateIndicatorPosition(t){this.showIndicator&&t&&requestAnimationFrame((()=>{const i=this.linkElements.get(t);if(!i)return;const e=this.el.shadowRoot?.querySelector(".anchor-list");if(!e)return;const o=e.getBoundingClientRect(),r=i.getBoundingClientRect();this.indicatorStyle="vertical"===(this.orientation||this.mode)?{transform:`translateY(${r.top-o.top}px)`,height:r.height+"px"}:{transform:`translateX(${r.left-o.left}px)`,width:r.width+"px"}}))}handleItemClick=(t,i)=>{if(i.metaKey||i.ctrlKey||i.shiftKey||i.altKey)return this.anchorItemClick.emit({id:t.id,label:t.label??""}),void this.anchorClick.emit({linkId:t.id,targetId:t.target||""});if(t.disabled)return;if(i.preventDefault(),i.stopPropagation(),this.anchorItemClick.emit({id:t.id,label:t.label??""}),this.anchorClick.emit({linkId:t.id,targetId:t.target||""}),this.setActiveState(t.id),t.href&&!t.href.startsWith("#")&&this.routerNavigate)return void this.navigate.emit({href:t.href,target:t.target,rel:t.rel});const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)};toggleExpand(t,i){const e=new Set(this.expandedItems),o=void 0!==i?i:!e.has(t);o?e.add(t):e.delete(t),this.expandedItems=e,this.expandChange.emit({id:t,expanded:o})}handleKeyDown=(t,i,e)=>{if(t.disabled)return;const o=i.key;if("Enter"!==o&&" "!==o){if(this.collapsible&&(t.children?.length??0)>0){if("ArrowRight"===o&&!this.expandedItems.has(t.id))return this.toggleExpand(t.id,!0),void i.preventDefault();if("ArrowLeft"===o&&this.expandedItems.has(t.id))return this.toggleExpand(t.id,!1),void i.preventDefault()}if(this.arrowNavigation&&("ArrowDown"===o||"ArrowUp"===o)){i.preventDefault();const t=(this.el.shadowRoot?.querySelectorAll(".anchor-item")??[])["ArrowDown"===o?e+1:e-1];t?.focus()}}else{i.preventDefault(),this.setActiveState(t.id);const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)}};watchActiveItem(t){if(t&&t!==this.currentActive){this.setActiveState(t);try{this.scrollToSection(t)}catch(t){}}}async setActive(t){t&&(this.setActiveState(t),this.scrollToSection(t))}getNumberPrefix(t,i=0,e=""){const o=t+1;let r;switch(this.numberStyle){case"decimal":r=(""+o).padStart(2,"0");break;case"alpha":r=String.fromCharCode(97+t);break;case"roman":r=["i","ii","iii","iv","v","vi","vii","viii","ix","x"][t]||o+"";break;default:r=o+""}return i>0&&e?`${e.endsWith(".")?e.slice(0,-1):e}.${r}.`:r+"."}renderItem(t,i,e=0,r="",a){const n=t.children&&t.children.length>0,s=this.expandedItems.has(t.id),h=this.showNumbers?this.getNumberPrefix(i,e,r):"",c=a.val++,l=this.currentActive===t.id,d=this.orientation||this.mode,p=n&&this.collapsible&&"vertical"===d?o("span",{class:"anchor-toggle "+(s?"expanded":""),onClick:i=>{i.stopPropagation(),this.toggleExpand(t.id)}},o("ui-icon",{name:"chevron-right",library:"fontawesome",size:"12px"})):null,m=o("div",{style:{display:"contents"}},this.showNumbers&&o("span",{class:"anchor-number"},h),p,t.icon&&o("span",{class:"anchor-icon"},o("ui-icon",{name:t.icon,library:t.iconLibrary||"lucide",size:"1.2em"})),"dot"===this.indicator?o("span",{class:"dot-marker"}):o("span",{class:"anchor-label"},t.label),t.badge&&o("span",{class:"anchor-badge"},t.badge));return o("div",{class:"anchor-item-wrapper"},o("li",{ref:i=>{i&&this.linkElements.set(t.id,i)},class:{"anchor-item":!0,active:l,disabled:!!t.disabled,"has-children":!!n,["level-"+e]:!0,"dot-type":"dot"===this.indicator},"data-id":t.id,title:"dot"===this.indicator?t.tooltip||t.label:this.showTooltip?t.tooltip:void 0,tabindex:t.disabled?-1:0,role:"button","aria-current":l?"true":"false","aria-disabled":t.disabled?"true":"false","aria-expanded":n?s+"":void 0,style:{paddingLeft:"vertical"===d?16+16*e+"px":void 0},onClick:i=>this.handleItemClick(t,i),onKeyDown:i=>this.handleKeyDown(t,i,c)},this.useSlot?o("slot",{name:"item-"+t.id},m):m),n&&s&&o("ul",{class:"anchor-sublist"},t.children.map(((t,i)=>this.renderItem(t,i,e+1,h,a)))))}render(){const t=this.getParsedItems(),i={val:0},e=this.orientation||this.mode,r=this.affix&&this.isAffixed?{position:"fixed",top:this.affixOffset+"px",zIndex:"1000"}:{};return o("nav",{key:"85e96011d2a9daae2ca20941ee3ab496961d1e6b",class:{anchor:!0,["anchor--"+e]:!0,["anchor--"+this.position]:!0,["anchor--"+this.size]:!0,["anchor--"+this.theme]:!0,["anchor--align-"+this.alignment]:!0,["anchor-type-"+this.indicator]:!0,"anchor--sticky":this.sticky,"anchor--affixed":this.affix&&this.isAffixed,"anchor--with-indicator":this.showIndicator,"anchor--with-numbers":this.showNumbers,"show-progress":this.showProgress},style:{"--anchor-active-color":this.activeColor,...r}},this.showProgress&&o("div",{key:"02805460ccef5d7c0ffc52d00de050d91fb1bd78",class:"anchor-progress"},o("div",{key:"dfa97ee018532f56e8d9c078f8980b3e52dd75a9",class:"anchor-progress-bar",style:{width:"horizontal"===e?this.scrollProgress+"%":"100%",height:"vertical"===e?this.scrollProgress+"%":"100%"}})),o("ul",{key:"d1ffe5c5041220ea11909ed67f52062bc5386953",class:"anchor-list",style:{position:"relative"}},t.map(((t,e)=>this.renderItem(t,e,0,"",i))),this.showIndicator&&o("div",{key:"40f921ba4343544049edb8589fce02f1e2e8f64d",class:"anchor-indicator",style:this.indicatorStyle})))}static get watchers(){return{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem:0}]}}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}.anchor{display:flex;padding:16px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative;--anchor-active-color:var(--color-primary-hover, #2563eb);transition:all 0.3s ease}.anchor--sm{padding:8px}.anchor--sm .anchor-item{padding:6px 12px;font-size:0.75rem}.anchor--md{padding:16px}.anchor--md .anchor-item{padding:12px 16px;font-size:0.875rem}.anchor--lg{padding:20px}.anchor--lg .anchor-item{padding:16px 20px;font-size:1rem}.anchor--dark{background:var(--bg-primary, #1f2937)}.anchor--dark .anchor-item{color:var(--text-muted, #9ca3af)}.anchor--dark .anchor-item:hover:not(.disabled){background:var(--color-primary, #374151);color:var(--text-standard, #f3f4f6)}.anchor--dark .anchor-item.active{background:var(--color-primary, #1e40af);color:var(--text-standard, #dbeafe)}.anchor--custom{background:var(--anchor-bg, var(--bg-primary, #ffffff))}.anchor--custom .anchor-item{color:var(--anchor-text, var(--text-muted, #6b7280))}.anchor--custom .anchor-item:hover:not(.disabled){background:var(--anchor-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--anchor-hover-text, var(--text-primary, #111827))}.anchor--custom .anchor-item.active{background:var(--anchor-active-bg, #eff6ff);color:var(--anchor-active-color)}.anchor--horizontal.anchor--align-center{justify-content:center}.anchor--horizontal.anchor--align-right{justify-content:flex-end}.anchor--horizontal.anchor--align-left{justify-content:flex-start}.anchor--vertical.anchor--align-center .anchor-item{justify-content:center;text-align:center}.anchor--vertical.anchor--align-right .anchor-item{justify-content:flex-end;text-align:right;flex-direction:row-reverse}.anchor--vertical.anchor--align-right .anchor-indicator{left:auto;right:0;border-radius:2px 0 0 2px}.anchor--affixed{position:fixed !important;animation:slideDown 0.3s ease}@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.anchor-progress{position:absolute;top:0;left:0;right:0;height:3px;background:var(--bg-primary, #e5e7eb);border-radius:8px 8px 0 0;overflow:hidden}.anchor-progress-bar{height:100%;background:var(--anchor-active-color);transition:width 0.1s ease}.anchor--vertical .anchor-progress{top:0;left:0;bottom:0;right:auto;width:3px;height:auto;border-radius:8px 0 0 8px}.anchor--vertical .anchor-progress-bar{width:100%;height:0;transition:height 0.1s ease}.anchor-indicator{position:absolute;background:var(--anchor-active-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:2px;pointer-events:none;z-index:2}.anchor--vertical.anchor--with-indicator .anchor-indicator{left:-16px;width:3px;height:24px}.anchor--horizontal.anchor--with-indicator .anchor-indicator{bottom:-16px;height:3px;width:60px}.anchor-type-dot .anchor-indicator{background:var(--anchor-active-color);width:8px;height:8px;border-radius:50%;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);transform-origin:center;box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.anchor-type-dot.anchor--vertical .anchor-indicator{left:-13px}.anchor-type-dot.anchor--horizontal .anchor-indicator{bottom:-19px}.anchor--sticky{position:sticky}.anchor--vertical.anchor--left{left:0}.anchor--vertical.anchor--right{right:0}.anchor--horizontal.anchor--top{top:0;left:0;right:0;z-index:100}.anchor--horizontal.anchor--bottom{bottom:0;left:0;right:0;z-index:100}.anchor-list{list-style:none;margin:0;padding:0;display:flex;gap:8px;width:100%}.anchor--vertical .anchor-list{flex-direction:column}.anchor--horizontal .anchor-list{flex-direction:row;flex-wrap:wrap}.anchor-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:6px;transition:all 0.2s ease;color:var(--text-muted, #6b7280);font-size:0.875rem;font-weight:500;position:relative;user-select:none;outline:none}.anchor-item:hover:not(.disabled){background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.anchor-item:focus-visible{box-shadow:0 0 0 2px var(--anchor-active-color);outline:2px solid transparent}.anchor-item.active{color:var(--anchor-active-color);font-weight:600}.anchor-item.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.anchor-item.dot-type{gap:12px}.dot-marker{width:8px;height:8px;border-radius:50%;background-color:var(--bg-secondary, #d1d5db);transition:all 0.3s ease;flex-shrink:0}.anchor-item.dot-type:hover .dot-marker{background-color:var(--text-muted, #9ca3af)}.anchor--horizontal .anchor-item.dot-type{flex-direction:column;align-items:center}.anchor-number{font-size:0.75rem;font-weight:600;color:inherit;opacity:0.7;min-width:24px}.anchor--with-numbers .anchor-item{gap:8px}.anchor-icon{font-size:1rem;display:flex;align-items:center;justify-content:center}.anchor-label{white-space:nowrap}.anchor--horizontal .anchor-item:not(.dot-type){flex-direction:column;gap:4px;text-align:center;min-width:80px}.anchor-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff);font-size:0.75rem;font-weight:600;border-radius:10px;line-height:1}.anchor-item.active .anchor-badge{background:var(--anchor-active-color)}.anchor-sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.anchor-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0.75rem;color:var(--text-muted, #9ca3af);transition:transform 0.2s ease;margin-right:-4px;border-radius:4px}.anchor-toggle:hover{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #4b5563)}.anchor-toggle.expanded{transform:rotate(90deg)}.anchor-item.has-children{font-weight:500}.anchor--vertical .anchor-item{position:relative}.anchor--vertical .anchor-indicator{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease, top 0.3s ease}"}},[769,"ui-anchor",{items:[1],links:[1],mode:[1],orientation:[1],position:[1],activeItem:[1025,"active-item"],activeLink:[1025,"active-link"],scrollOffset:[2,"scroll-offset"],routerNavigate:[4,"router-navigate"],loadIcons:[4,"load-icons"],sticky:[4],scrollContainer:[1,"scroll-container"],smoothScroll:[4,"smooth-scroll"],showTooltip:[4,"show-tooltip"],showIndicator:[4,"show-indicator"],observerRootMargin:[1,"observer-root-margin"],useSlot:[4,"use-slot"],showNumbers:[4,"show-numbers"],numberStyle:[1,"number-style"],size:[1],theme:[1],activeColor:[1,"active-color"],alignment:[1],updateHash:[4,"update-hash"],affix:[4],affixOffset:[2,"affix-offset"],indicator:[1],autoGenContainer:[1,"auto-gen-container"],showProgress:[4,"show-progress"],arrowNavigation:[4,"arrow-navigation"],collapsible:[4],defaultExpanded:[4,"default-expanded"],derivedItems:[32],currentActive:[32],isAffixed:[32],scrollProgress:[32],expandedItems:[32],indicatorStyle:[32],setActive:[64]},void 0,{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem:0}]}]),h=s,c=function(){"undefined"!=typeof customElements&&["ui-anchor","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-anchor":customElements.get(r(t))||customElements.define(r(t),s);break;case"ui-icon":customElements.get(r(t))||a();break;case"ui-loader":customElements.get(r(t))||n()}}))};export{h as UiAnchor,c as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as o,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as n}from"./loader.js";const s=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.anchorClick=e(this,"anchorClick",7),this.anchorItemClick=e(this,"anchorItemClick",7),this.activeItemChange=e(this,"activeItemChange",7),this.navigate=e(this,"navigate",7),this.affixChange=e(this,"affixChange",7),this.progressChange=e(this,"progressChange",7),this.expandChange=e(this,"expandChange",7)}get el(){return this}items=[];links="";mode="vertical";orientation="vertical";position="left";activeItem="";activeLink="";scrollOffset=80;routerNavigate=!1;loadIcons=!0;sticky=!0;scrollContainer="";smoothScroll=!0;showTooltip=!1;showIndicator=!0;observerRootMargin="";useSlot=!1;showNumbers=!1;numberStyle="numeric";size="md";theme="light";activeColor="#18ff3e";alignment="left";updateHash=!1;affix=!1;affixOffset=20;indicator="line";autoGenContainer="";showProgress=!1;arrowNavigation=!0;collapsible=!1;defaultExpanded=!0;derivedItems=[];currentActive="";isAffixed=!1;scrollProgress=0;expandedItems=new Set;indicatorStyle={};_observer=null;_onWindowScroll=null;_onContainerScroll=null;_onHashChange=null;linkElements=new Map;scrollTimeout;anchorClick;anchorItemClick;activeItemChange;navigate;affixChange;progressChange;expandChange;componentWillLoad(){this.autoGenContainer?this.generateLinksFromContainer():this.parseItems(),this.currentActive=this.activeItem||this.activeLink,this.defaultExpanded&&this.expandAll()}itemsChanged(){this.autoGenContainer||this.parseItems()}handleAutoGenContainerChange(){this.generateLinksFromContainer()}parseItems(){const t=this.items;if(t&&t.length>0){if("string"==typeof t)try{this.derivedItems=JSON.parse(t)}catch{this.derivedItems=[]}else this.derivedItems=[...t];return}if(this.links&&this.links.length>0){try{this.derivedItems=JSON.parse(this.links)}catch{this.derivedItems=[]}return}const i=Array.from(this.el.querySelectorAll("ui-anchor-item"));i.length>0&&(this.derivedItems=i.map((t=>({id:t.getAttribute("target")||t.getAttribute("id")||"",label:t.getAttribute("label")||"",icon:t.getAttribute("icon")??void 0,iconLibrary:t.getAttribute("iconLibrary")||t.getAttribute("icon-library"),disabled:t.hasAttribute("disabled"),badge:t.getAttribute("badge")??void 0,tooltip:t.getAttribute("tooltip")??void 0,href:t.getAttribute("href")??void 0,target:t.getAttribute("target")??void 0,rel:t.getAttribute("rel")??void 0}))))}generateLinksFromContainer(){if(!this.autoGenContainer)return;const t=document.querySelector(this.autoGenContainer);if(!t)return;const i=t.querySelectorAll("h1, h2, h3, h4");this.derivedItems=Array.from(i).map(((t,i)=>(t.id||(t.id="auto-anchor-"+i),{id:"link-"+i,label:t.innerText??t.textContent??"",target:t.id??""})))}componentDidLoad(){this.setupScrollSpy(),this.setupAffix(),this.setupProgress(),this.updateHash&&this.setupHashNavigation(),setTimeout((()=>this.updateIndicatorPosition(this.currentActive)),100)}disconnectedCallback(){if(this._observer)try{this._observer.disconnect()}catch(t){}this._onWindowScroll&&window.removeEventListener("scroll",this._onWindowScroll),this._onContainerScroll&&this.scrollContainer&&document.querySelector(this.scrollContainer)?.removeEventListener("scroll",this._onContainerScroll),this._onHashChange&&window.removeEventListener("hashchange",this._onHashChange),this.scrollTimeout&&clearTimeout(this.scrollTimeout)}getParsedItems(){return this.derivedItems}flattenItems(t){return t.reduce(((t,i)=>(t.push(i),i.children&&t.push(...this.flattenItems(i.children)),t)),[])}expandAll(){this.flattenItems(this.getParsedItems()).forEach((t=>{t.children&&t.children.length>0&&this.expandedItems.add(t.id)})),this.expandedItems=new Set(this.expandedItems)}setupAffix(){if(!this.affix)return;const t=()=>{const t=(window.pageYOffset||document.documentElement.scrollTop)>this.affixOffset;t!==this.isAffixed&&(this.isAffixed=t,this.affixChange.emit(this.isAffixed))};window.addEventListener("scroll",t),this._onWindowScroll=t,t()}setupProgress(){if(!this.showProgress)return;const t=()=>{this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{const t=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(t){const i=t.scrollHeight-t.clientHeight;this.scrollProgress=i>0?t.scrollTop/i*100:0}else{const t=window.pageYOffset||document.documentElement.scrollTop,i=document.documentElement.scrollHeight-window.innerHeight;this.scrollProgress=i>0?t/i*100:0}this.progressChange.emit(this.scrollProgress)}),50)};this.scrollContainer?(document.querySelector(this.scrollContainer)?.addEventListener("scroll",t),this._onContainerScroll=t):(window.addEventListener("scroll",t),this._onWindowScroll||(this._onWindowScroll=t)),t()}setupHashNavigation(){this._onHashChange=()=>{const t=window.location.hash.substring(1);t&&this.scrollToSection(t)},window.addEventListener("hashchange",this._onHashChange)}setupScrollSpy(){const t=this.flattenItems(this.getParsedItems());let i=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!i&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(i=t.querySelector(this.scrollContainer))}const e=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const e=i.target.getAttribute("id"),o=t.find((t=>t.target===e||t.id===e));e&&o&&this.setActiveState(o.id)}}))}),{root:i,rootMargin:this.observerRootMargin||`-${this.scrollOffset}px 0px -50% 0px`,threshold:0});t.forEach((t=>{const o=t.target||t.id;if(!o)return;let r=document.getElementById(o);!r&&i&&(r=i.querySelector("#"+o)),r&&e.observe(r)})),this._observer=e}setActiveState(t){if(this.currentActive===t)return;this.currentActive=t,this.activeItem=t,this.activeLink=t;const i=this.flattenItems(this.getParsedItems()).find((i=>i.id===t));i&&this.activeItemChange.emit({id:i.id,label:i.label??""}),this.updateIndicatorPosition(t),this.collapsible&&this.ensureVisible(t,this.getParsedItems())}ensureVisible(t,i,e=null){for(const o of i){if(o.id===t)return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0;if(o.children&&this.ensureVisible(t,o.children,o.id))return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0}return!1}scrollToSection(t){const i=document.getElementById(t)||document.querySelector("#"+t);if(!i)return;let e=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!e&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(e=t.querySelector(this.scrollContainer))}if(e){const t=e.getBoundingClientRect(),o=i.getBoundingClientRect();e.scrollTo({top:e.scrollTop+(o.top-t.top)-this.scrollOffset,behavior:this.smoothScroll?"smooth":"auto"})}else{const t=i.getBoundingClientRect().top+window.pageYOffset-this.scrollOffset;window.scrollTo({top:t,behavior:this.smoothScroll?"smooth":"auto"})}this.updateHash&&history.pushState(null,"","#"+t)}updateIndicatorPosition(t){this.showIndicator&&t&&requestAnimationFrame((()=>{const i=this.linkElements.get(t);if(!i)return;const e=this.el.shadowRoot?.querySelector(".anchor-list");if(!e)return;const o=e.getBoundingClientRect(),r=i.getBoundingClientRect();this.indicatorStyle="vertical"===(this.orientation||this.mode)?{transform:`translateY(${r.top-o.top}px)`,height:r.height+"px"}:{transform:`translateX(${r.left-o.left}px)`,width:r.width+"px"}}))}handleItemClick=(t,i)=>{if(i.metaKey||i.ctrlKey||i.shiftKey||i.altKey)return this.anchorItemClick.emit({id:t.id,label:t.label??""}),void this.anchorClick.emit({linkId:t.id,targetId:t.target||""});if(t.disabled)return;if(i.preventDefault(),i.stopPropagation(),this.anchorItemClick.emit({id:t.id,label:t.label??""}),this.anchorClick.emit({linkId:t.id,targetId:t.target||""}),this.setActiveState(t.id),t.href&&!t.href.startsWith("#")&&this.routerNavigate)return void this.navigate.emit({href:t.href,target:t.target,rel:t.rel});const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)};toggleExpand(t,i){const e=new Set(this.expandedItems),o=void 0!==i?i:!e.has(t);o?e.add(t):e.delete(t),this.expandedItems=e,this.expandChange.emit({id:t,expanded:o})}handleKeyDown=(t,i,e)=>{if(t.disabled)return;const o=i.key;if("Enter"!==o&&" "!==o){if(this.collapsible&&(t.children?.length??0)>0){if("ArrowRight"===o&&!this.expandedItems.has(t.id))return this.toggleExpand(t.id,!0),void i.preventDefault();if("ArrowLeft"===o&&this.expandedItems.has(t.id))return this.toggleExpand(t.id,!1),void i.preventDefault()}if(this.arrowNavigation&&("ArrowDown"===o||"ArrowUp"===o)){i.preventDefault();const t=(this.el.shadowRoot?.querySelectorAll(".anchor-item")??[])["ArrowDown"===o?e+1:e-1];t?.focus()}}else{i.preventDefault(),this.setActiveState(t.id);const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)}};watchActiveItem(t){if(t&&t!==this.currentActive){this.setActiveState(t);try{this.scrollToSection(t)}catch(t){}}}async setActive(t){t&&(this.setActiveState(t),this.scrollToSection(t))}getNumberPrefix(t,i=0,e=""){const o=t+1;let r;switch(this.numberStyle){case"decimal":r=(""+o).padStart(2,"0");break;case"alpha":r=String.fromCharCode(97+t);break;case"roman":r=["i","ii","iii","iv","v","vi","vii","viii","ix","x"][t]||o+"";break;default:r=o+""}return i>0&&e?`${e.endsWith(".")?e.slice(0,-1):e}.${r}.`:r+"."}renderItem(t,i,e=0,r="",a){const n=t.children&&t.children.length>0,s=this.expandedItems.has(t.id),h=this.showNumbers?this.getNumberPrefix(i,e,r):"",c=a.val++,l=this.currentActive===t.id,d=this.orientation||this.mode,p=n&&this.collapsible&&"vertical"===d?o("span",{class:"anchor-toggle "+(s?"expanded":""),onClick:i=>{i.stopPropagation(),this.toggleExpand(t.id)}},o("ui-icon",{name:"chevron-right",library:"fontawesome",size:"12px"})):null,m=o("div",{style:{display:"contents"}},this.showNumbers&&o("span",{class:"anchor-number"},h),p,t.icon&&o("span",{class:"anchor-icon"},o("ui-icon",{name:t.icon,library:t.iconLibrary||"lucide",size:"1.2em"})),"dot"===this.indicator?o("span",{class:"dot-marker"}):o("span",{class:"anchor-label"},t.label),t.badge&&o("span",{class:"anchor-badge"},t.badge));return o("div",{class:"anchor-item-wrapper"},o("li",{ref:i=>{i&&this.linkElements.set(t.id,i)},class:{"anchor-item":!0,active:l,disabled:!!t.disabled,"has-children":!!n,["level-"+e]:!0,"dot-type":"dot"===this.indicator},"data-id":t.id,title:"dot"===this.indicator?t.tooltip||t.label:this.showTooltip?t.tooltip:void 0,tabindex:t.disabled?-1:0,role:"button","aria-current":l?"true":"false","aria-disabled":t.disabled?"true":"false","aria-expanded":n?s+"":void 0,style:{paddingLeft:"vertical"===d?16+16*e+"px":void 0},onClick:i=>this.handleItemClick(t,i),onKeyDown:i=>this.handleKeyDown(t,i,c)},this.useSlot?o("slot",{name:"item-"+t.id},m):m),n&&s&&o("ul",{class:"anchor-sublist"},t.children.map(((t,i)=>this.renderItem(t,i,e+1,h,a)))))}render(){const t=this.getParsedItems(),i={val:0},e=this.orientation||this.mode,r=this.affix&&this.isAffixed?{position:"fixed",top:this.affixOffset+"px",zIndex:"1000"}:{};return o("nav",{key:"85e96011d2a9daae2ca20941ee3ab496961d1e6b",class:{anchor:!0,["anchor--"+e]:!0,["anchor--"+this.position]:!0,["anchor--"+this.size]:!0,["anchor--"+this.theme]:!0,["anchor--align-"+this.alignment]:!0,["anchor-type-"+this.indicator]:!0,"anchor--sticky":this.sticky,"anchor--affixed":this.affix&&this.isAffixed,"anchor--with-indicator":this.showIndicator,"anchor--with-numbers":this.showNumbers,"show-progress":this.showProgress},style:{"--anchor-active-color":this.activeColor,...r}},this.showProgress&&o("div",{key:"02805460ccef5d7c0ffc52d00de050d91fb1bd78",class:"anchor-progress"},o("div",{key:"dfa97ee018532f56e8d9c078f8980b3e52dd75a9",class:"anchor-progress-bar",style:{width:"horizontal"===e?this.scrollProgress+"%":"100%",height:"vertical"===e?this.scrollProgress+"%":"100%"}})),o("ul",{key:"d1ffe5c5041220ea11909ed67f52062bc5386953",class:"anchor-list",style:{position:"relative"}},t.map(((t,e)=>this.renderItem(t,e,0,"",i))),this.showIndicator&&o("div",{key:"40f921ba4343544049edb8589fce02f1e2e8f64d",class:"anchor-indicator",style:this.indicatorStyle})))}static get watchers(){return{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem:0}]}}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}.anchor{display:flex;padding:16px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative;--anchor-active-color:var(--color-primary-hover, #2563eb);transition:all 0.3s ease}.anchor--sm{padding:8px}.anchor--sm .anchor-item{padding:6px 12px;font-size:0.75rem}.anchor--md{padding:16px}.anchor--md .anchor-item{padding:12px 16px;font-size:0.875rem}.anchor--lg{padding:20px}.anchor--lg .anchor-item{padding:16px 20px;font-size:1rem}.anchor--dark{background:var(--bg-primary, #1f2937)}.anchor--dark .anchor-item{color:var(--text-muted, #9ca3af)}.anchor--dark .anchor-item:hover:not(.disabled){background:var(--color-primary, #374151);color:var(--text-standard, #f3f4f6)}.anchor--dark .anchor-item.active{background:var(--color-primary, #1e40af);color:var(--text-standard, #dbeafe)}.anchor--custom{background:var(--anchor-bg, var(--bg-primary, #ffffff))}.anchor--custom .anchor-item{color:var(--anchor-text, var(--text-muted, #6b7280))}.anchor--custom .anchor-item:hover:not(.disabled){background:var(--anchor-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--anchor-hover-text, var(--text-primary, #111827))}.anchor--custom .anchor-item.active{background:var(--anchor-active-bg, #eff6ff);color:var(--anchor-active-color)}.anchor--horizontal.anchor--align-center{justify-content:center}.anchor--horizontal.anchor--align-right{justify-content:flex-end}.anchor--horizontal.anchor--align-left{justify-content:flex-start}.anchor--vertical.anchor--align-center .anchor-item{justify-content:center;text-align:center}.anchor--vertical.anchor--align-right .anchor-item{justify-content:flex-end;text-align:right;flex-direction:row-reverse}.anchor--vertical.anchor--align-right .anchor-indicator{left:auto;right:0;border-radius:2px 0 0 2px}.anchor--affixed{position:fixed !important;animation:slideDown 0.3s ease}@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.anchor-progress{position:absolute;top:0;left:0;right:0;height:3px;background:var(--bg-primary, #e5e7eb);border-radius:8px 8px 0 0;overflow:hidden}.anchor-progress-bar{height:100%;background:var(--anchor-active-color);transition:width 0.1s ease}.anchor--vertical .anchor-progress{top:0;left:0;bottom:0;right:auto;width:3px;height:auto;border-radius:8px 0 0 8px}.anchor--vertical .anchor-progress-bar{width:100%;height:0;transition:height 0.1s ease}.anchor-indicator{position:absolute;background:var(--anchor-active-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:2px;pointer-events:none;z-index:2}.anchor--vertical.anchor--with-indicator .anchor-indicator{left:-16px;width:3px;height:24px}.anchor--horizontal.anchor--with-indicator .anchor-indicator{bottom:-16px;height:3px;width:60px}.anchor-type-dot .anchor-indicator{background:var(--anchor-active-color);width:8px;height:8px;border-radius:50%;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);transform-origin:center;box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.anchor-type-dot.anchor--vertical .anchor-indicator{left:-13px}.anchor-type-dot.anchor--horizontal .anchor-indicator{bottom:-19px}.anchor--sticky{position:sticky}.anchor--vertical.anchor--left{left:0}.anchor--vertical.anchor--right{top:80px;right:0}.anchor--horizontal.anchor--top{top:0;left:0;right:0;z-index:100}.anchor--horizontal.anchor--bottom{bottom:0;left:0;right:0;z-index:100}.anchor-list{list-style:none;margin:0;padding:0;display:flex;gap:8px;width:100%}.anchor--vertical .anchor-list{flex-direction:column}.anchor--horizontal .anchor-list{flex-direction:row;flex-wrap:wrap}.anchor-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:6px;transition:all 0.2s ease;color:var(--text-muted, #6b7280);font-size:0.875rem;font-weight:500;position:relative;user-select:none;outline:none}.anchor-item:hover:not(.disabled){background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.anchor-item:focus-visible{box-shadow:0 0 0 2px var(--anchor-active-color);outline:2px solid transparent}.anchor-item.active{color:var(--anchor-active-color);font-weight:600}.anchor-item.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.anchor-item.dot-type{gap:12px}.dot-marker{width:8px;height:8px;border-radius:50%;background-color:var(--bg-secondary, #d1d5db);transition:all 0.3s ease;flex-shrink:0}.anchor-item.dot-type:hover .dot-marker{background-color:var(--text-muted, #9ca3af)}.anchor--horizontal .anchor-item.dot-type{flex-direction:column;align-items:center}.anchor-number{font-size:0.75rem;font-weight:600;color:inherit;opacity:0.7;min-width:24px}.anchor--with-numbers .anchor-item{gap:8px}.anchor-icon{font-size:1rem;display:flex;align-items:center;justify-content:center}.anchor-label{white-space:nowrap}.anchor--horizontal .anchor-item:not(.dot-type){flex-direction:column;gap:4px;text-align:center;min-width:80px}.anchor-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff);font-size:0.75rem;font-weight:600;border-radius:10px;line-height:1}.anchor-item.active .anchor-badge{background:var(--anchor-active-color)}.anchor-sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.anchor-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0.75rem;color:var(--text-muted, #9ca3af);transition:transform 0.2s ease;margin-right:-4px;border-radius:4px}.anchor-toggle:hover{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #4b5563)}.anchor-toggle.expanded{transform:rotate(90deg)}.anchor-item.has-children{font-weight:500}.anchor--vertical .anchor-item{position:relative}.anchor--vertical .anchor-indicator{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease, top 0.3s ease}"}},[769,"ui-anchor",{items:[1],links:[1],mode:[1],orientation:[1],position:[1],activeItem:[1025,"active-item"],activeLink:[1025,"active-link"],scrollOffset:[2,"scroll-offset"],routerNavigate:[4,"router-navigate"],loadIcons:[4,"load-icons"],sticky:[4],scrollContainer:[1,"scroll-container"],smoothScroll:[4,"smooth-scroll"],showTooltip:[4,"show-tooltip"],showIndicator:[4,"show-indicator"],observerRootMargin:[1,"observer-root-margin"],useSlot:[4,"use-slot"],showNumbers:[4,"show-numbers"],numberStyle:[1,"number-style"],size:[1],theme:[1],activeColor:[1,"active-color"],alignment:[1],updateHash:[4,"update-hash"],affix:[4],affixOffset:[2,"affix-offset"],indicator:[1],autoGenContainer:[1,"auto-gen-container"],showProgress:[4,"show-progress"],arrowNavigation:[4,"arrow-navigation"],collapsible:[4],defaultExpanded:[4,"default-expanded"],derivedItems:[32],currentActive:[32],isAffixed:[32],scrollProgress:[32],expandedItems:[32],indicatorStyle:[32],setActive:[64]},void 0,{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem:0}]}]),h=s,c=function(){"undefined"!=typeof customElements&&["ui-anchor","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-anchor":customElements.get(r(t))||customElements.define(r(t),s);break;case"ui-icon":customElements.get(r(t))||a();break;case"ui-loader":customElements.get(r(t))||n()}}))};export{h as UiAnchor,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as r,transformTag as i}from"@stencil/core/internal/client";const n=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.scrollAnimationStart=e(this,"scrollAnimationStart",7),this.scrollAnimationEnd=e(this,"scrollAnimationEnd",7)}get el(){return this}enterClass="fade-in";leaveClass="";threshold=.5;rootMargin="0px";once=!1;duration=1e3;delay=0;easing="ease";anchor="";root="";blurAmount="";perspective="";stagger=0;transformOrigin="center";distance="50px";mirror=!1;respectReducedMotion=!0;scrub=!1;scrollAnimationStart;scrollAnimationEnd;isVisible=!1;hasAnimated=!1;observer;contentEl;rafId;animationTimer;componentDidLoad(){this.setupObserver(),this.scrub&&this.startScrubLoop()}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.rafId&&cancelAnimationFrame(this.rafId),clearTimeout(this.animationTimer)}headerScrubChange(t){t?this.startScrubLoop():(this.rafId&&cancelAnimationFrame(this.rafId),this.contentEl&&this.contentEl.style.removeProperty("--scroll-progress"))}startScrubLoop(){const t=()=>{this.isVisible&&this.contentEl&&this.calculateScrollProgress(),this.rafId=requestAnimationFrame(t)};t()}currentProgress=0;targetProgress=0;calculateScrollProgress(){const t=(this.anchor&&document.querySelector(this.anchor)||this.el).getBoundingClientRect(),a=window.innerHeight;this.targetProgress=Math.max(0,Math.min(1,(a-t.top)/(a+t.height))),this.currentProgress+=.1*(this.targetProgress-this.currentProgress),this.contentEl&&this.contentEl.style.setProperty("--scroll-progress",this.currentProgress.toFixed(4))}setupObserver(){const t={root:this.root?document.querySelector(this.root):null,rootMargin:this.rootMargin,threshold:this.scrub?0:this.threshold};this.observer=new IntersectionObserver((t=>{const a=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(this.respectReducedMotion&&a)return this.isVisible=!0,void(this.hasAnimated=!0);t.forEach((t=>{if(t.isIntersecting)this.once&&this.hasAnimated||(this.isVisible=!0,this.hasAnimated=!0,this.scrollAnimationStart.emit(),this.contentEl&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach(((t,a)=>{const e=t;e.style.setProperty("--animation-delay",this.delay+a*this.stagger+"ms"),e.style.setProperty("--animation-duration",this.duration+"ms"),e.style.setProperty("--animation-easing",this.easing),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.mirror&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):(this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),(this.leaveClass||this.mirror)&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t))))),this.scrub||(this.animationTimer=setTimeout((()=>{this.scrollAnimationEnd.emit()}),this.duration+this.delay+this.stagger*(this.contentEl?this.contentEl.children.length:0)))),this.once&&this.observer.disconnect();else{const a=t.boundingClientRect.top>(window.innerHeight||document.documentElement.clientHeight);if(this.mirror&&a){if(this.isVisible=!1,this.hasAnimated=!1,this.contentEl){const t=this.enterClass.split(" ").filter((t=>t.trim()));t.forEach((t=>this.contentEl.classList.remove(t))),this.stagger>0&&Array.from(this.contentEl.children).forEach((a=>{t.forEach((t=>a.classList.remove(t)))}))}}else!this.once&&this.isVisible&&(this.isVisible=!1,this.contentEl)&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach((t=>{this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):this.leaveClass&&(this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t)))))}}))}),t);const a=this.anchor?document.querySelector(this.anchor):this.contentEl;a&&this.observer.observe(a)}render(){const t="string"==typeof this.perspective?this.perspective:"1000px",a="string"==typeof this.transformOrigin?this.transformOrigin:"center";return o(r,{key:"47a9d6b0f874f646bf3ba94faf32fbf958ceb177",class:this.scrub?"scrubbing":""},o("div",{key:"4b44f83641692c3bdc3e4dad2ad7c3a25dfe5ac3",class:"animate-container",ref:t=>this.contentEl=t,style:{"--animation-duration":this.duration+"ms","--animation-delay":this.delay+"ms","--animation-easing":"string"==typeof this.easing?this.easing:"ease","--start-blur":("string"==typeof this.blurAmount?this.blurAmount:"0px")||"0px","--perspective":t||"1000px","--distance":"string"==typeof this.distance?this.distance:"50px","--transform-origin":a,perspective:t||"none","transform-origin":a}},o("slot",{key:"49dffe8ae575f94d9f94b9b0c076f88751e149c4"})))}static get watchers(){return{scrub:[{headerScrubChange:0}]}}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:block}:host(.scrubbing) .animate-container,:host(.scrubbing) ::slotted(*){animation-play-state:paused !important;animation-delay:calc(var(--scroll-progress, 0) * -1s) !important;animation-duration:1s !important;transition:none !important}.animate-container{animation-duration:var(--animation-duration, 1000ms);animation-delay:var(--animation-delay, 0ms);animation-timing-function:var(--animation-easing, ease);animation-fill-mode:both}.fade-in,::slotted(.fade-in){animation-name:fadeIn}.fade-out,::slotted(.fade-out){animation-name:fadeOut}@keyframes fadeIn{from{opacity:0;filter:blur(var(--start-blur, 0px))}to{opacity:1;filter:blur(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.slide-in-left,::slotted(.slide-in-left){animation-name:slideInLeft}.slide-in-right,::slotted(.slide-in-right){animation-name:slideInRight}.slide-in-up,::slotted(.slide-in-up){animation-name:slideInUp}.slide-in-down,::slotted(.slide-in-down){animation-name:slideInDown}.slide-out-left,::slotted(.slide-out-left){animation-name:slideOutLeft}.slide-out-right,::slotted(.slide-out-right){animation-name:slideOutRight}.slide-out-up,::slotted(.slide-out-up){animation-name:slideOutUp}.slide-out-down,::slotted(.slide-out-down){animation-name:slideOutDown}@keyframes slideInLeft{from{transform:translate3d(calc(var(--distance, 100%) * -1), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInRight{from{transform:translate3d(var(--distance, 100%), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInUp{from{transform:translate3d(0, var(--distance, 100%), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInDown{from{transform:translate3d(0, calc(var(--distance, 100%) * -1), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideOutLeft{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(-100%, 0, 0);opacity:0}}@keyframes slideOutRight{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(100%, 0, 0);opacity:0}}@keyframes slideOutUp{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, -100%, 0);opacity:0}}@keyframes slideOutDown{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, 100%, 0);opacity:0}}.zoom-in,::slotted(.zoom-in){animation-name:zoomIn}.zoom-out,::slotted(.zoom-out){animation-name:zoomOut}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.flip-in,::slotted(.flip-in){animation-name:flipIn}.flip-out,::slotted(.flip-out){animation-name:flipOut}.flip-in-x,::slotted(.flip-in-x){animation-name:flipInX}.flip-in-y,::slotted(.flip-in-y){animation-name:flipInY}.flip-out-x,::slotted(.flip-out-x){animation-name:flipOutX}.flip-out-y,::slotted(.flip-out-y){animation-name:flipOutY}@keyframes flipIn{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);animation-timing-function:ease-in}60%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 10deg);opacity:1}80%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -5deg)}to{transform:perspective(var(--perspective, 1000px))}}@keyframes flipOut{from{transform:perspective(var(--perspective, 1000px))}30%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipInX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}}@keyframes flipInY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}}@keyframes flipOutX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipOutY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}}.bounce-in,::slotted(.bounce-in){animation-name:bounceIn}.bounce-out,::slotted(.bounce-out){animation-name:bounceOut}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scale3d(1, 1, 1)}}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.rotate-in,::slotted(.rotate-in){animation-name:rotateIn}.rotate-out,::slotted(.rotate-out){animation-name:rotateOut}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0, 0, 1, -200deg);opacity:0}to{transform-origin:center;transform:translate3d(0, 0, 0);opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0, 0, 1, 200deg);opacity:0}}.shake,::slotted(.shake){animation-name:shake}@keyframes shake{from,to{transform:translate3d(0, 0, 0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.zoom-in-up,::slotted(.zoom-in-up){animation-name:zoomInUp}.zoom-in-down,::slotted(.zoom-in-down){animation-name:zoomInDown}.zoom-in-left,::slotted(.zoom-in-left){animation-name:zoomInLeft}.zoom-in-right,::slotted(.zoom-in-right){animation-name:zoomInRight}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.pulse,::slotted(.pulse){animation-name:pulse}.rubber-band,::slotted(.rubber-band){animation-name:rubberBand}.tada,::slotted(.tada){animation-name:tada}.jello,::slotted(.jello){animation-name:jello}.wobble,::slotted(.wobble){animation-name:wobble}@keyframes pulse{from,to{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}}@keyframes rubberBand{from,to{transform:scale3d(1, 1, 1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}}@keyframes tada{from,to{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}}@keyframes jello{from,11.1%,to{transform:translate3d(0, 0, 0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}@keyframes wobble{from,to{transform:translate3d(0, 0, 0)}15%{transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30%{transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45%{transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60%{transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75%{transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}}.roll-in,::slotted(.roll-in){animation-name:rollIn}.roll-out,::slotted(.roll-out){animation-name:rollOut}.blur-reveal,::slotted(.blur-reveal){animation-name:blurReveal}.back-in-up,::slotted(.back-in-up){animation-name:backInUp}.back-in-down,::slotted(.back-in-down){animation-name:backInDown}.back-in-left,::slotted(.back-in-left){animation-name:backInLeft}.back-in-right,::slotted(.back-in-right){animation-name:backInRight}.back-out-up,::slotted(.back-out-up){animation-name:backOutUp}.back-out-down,::slotted(.back-out-down){animation-name:backOutDown}.back-out-left,::slotted(.back-out-left){animation-name:backOutLeft}.back-out-right,::slotted(.back-out-right){animation-name:backOutRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(-700px) scale(0.7);opacity:0}}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(700px) scale(0.7);opacity:0}}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(-2000px) scale(0.7);opacity:0}}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(2000px) scale(0.7);opacity:0}}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}to{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}@keyframes blurReveal{from{opacity:0;filter:blur(var(--start-blur, 20px));transform:scale(0.9)}to{opacity:1;filter:blur(0);transform:scale(1)}}"}},[769,"ui-animate-on-scroll",{enterClass:[1,"enter-class"],leaveClass:[1,"leave-class"],threshold:[2],rootMargin:[1,"root-margin"],once:[4],duration:[2],delay:[2],easing:[1],anchor:[1],root:[1],blurAmount:[1,"blur-amount"],perspective:[1],stagger:[2],transformOrigin:[1,"transform-origin"],distance:[1],mirror:[4],respectReducedMotion:[4,"respect-reduced-motion"],scrub:[4],isVisible:[32],hasAnimated:[32]},void 0,{scrub:[{headerScrubChange:0}]}]),s=n,m=function(){"undefined"!=typeof customElements&&["ui-animate-on-scroll"].forEach((t=>{"ui-animate-on-scroll"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))};export{s as UiAnimateOnScroll,m as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as r,transformTag as i}from"@stencil/core/internal/client";const n=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.scrollAnimationStart=e(this,"scrollAnimationStart",7),this.scrollAnimationEnd=e(this,"scrollAnimationEnd",7)}get el(){return this}enterClass="fade-in";leaveClass="";threshold=.5;rootMargin="0px";once=!1;duration=1e3;delay=0;easing="ease";anchor="";root="";blurAmount="";perspective="";stagger=0;transformOrigin="center";distance="50px";mirror=!1;respectReducedMotion=!0;scrub=!1;scrollAnimationStart;scrollAnimationEnd;isVisible=!1;hasAnimated=!1;observer;contentEl;rafId;animationTimer;componentDidLoad(){this.setupObserver(),this.scrub&&this.startScrubLoop()}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.rafId&&cancelAnimationFrame(this.rafId),clearTimeout(this.animationTimer)}headerScrubChange(t){t?this.startScrubLoop():(this.rafId&&cancelAnimationFrame(this.rafId),this.contentEl&&this.contentEl.style.removeProperty("--scroll-progress"))}startScrubLoop(){const t=()=>{this.isVisible&&this.contentEl&&this.calculateScrollProgress(),this.rafId=requestAnimationFrame(t)};t()}currentProgress=0;targetProgress=0;calculateScrollProgress(){const t=(this.anchor&&document.querySelector(this.anchor)||this.el).getBoundingClientRect(),a=window.innerHeight;this.targetProgress=Math.max(0,Math.min(1,(a-t.top)/(a+t.height))),this.currentProgress+=.1*(this.targetProgress-this.currentProgress),this.contentEl&&this.contentEl.style.setProperty("--scroll-progress",this.currentProgress.toFixed(4))}setupObserver(){const t={root:this.root?document.querySelector(this.root):null,rootMargin:this.rootMargin,threshold:this.scrub?0:this.threshold};this.observer=new IntersectionObserver((t=>{const a=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(this.respectReducedMotion&&a)return this.isVisible=!0,void(this.hasAnimated=!0);t.forEach((t=>{if(t.isIntersecting)this.once&&this.hasAnimated||(this.isVisible=!0,this.hasAnimated=!0,this.scrollAnimationStart.emit(),this.contentEl&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach(((t,a)=>{const e=t;e.style.setProperty("--animation-delay",this.delay+a*this.stagger+"ms"),e.style.setProperty("--animation-duration",this.duration+"ms"),e.style.setProperty("--animation-easing",this.easing),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.mirror&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):(this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),(this.leaveClass||this.mirror)&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t))))),this.scrub||(this.animationTimer=setTimeout((()=>{this.scrollAnimationEnd.emit()}),this.duration+this.delay+this.stagger*(this.contentEl?this.contentEl.children.length:0)))),this.once&&this.observer.disconnect();else{const a=t.boundingClientRect.top>(window.innerHeight||document.documentElement.clientHeight);if(this.mirror&&a){if(this.isVisible=!1,this.hasAnimated=!1,this.contentEl){const t=this.enterClass.split(" ").filter((t=>t.trim()));t.forEach((t=>this.contentEl.classList.remove(t))),this.stagger>0&&Array.from(this.contentEl.children).forEach((a=>{t.forEach((t=>a.classList.remove(t)))}))}}else!this.once&&this.isVisible&&(this.isVisible=!1,this.contentEl)&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach((t=>{this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):this.leaveClass&&(this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t)))))}}))}),t);const a=this.anchor?document.querySelector(this.anchor):this.contentEl;a&&this.observer.observe(a)}render(){const t="string"==typeof this.perspective?this.perspective:"1000px",a="string"==typeof this.transformOrigin?this.transformOrigin:"center";return o(r,{key:"9da237e4b3bfbc89aa29a71e2ed4787caba7b6cd",class:this.scrub?"scrubbing":""},o("div",{key:"1970eca1813aa9361c9bf721e7398559529a1c8d",class:"animate-container",ref:t=>this.contentEl=t,style:{"--animation-duration":this.duration+"ms","--animation-delay":this.delay+"ms","--animation-easing":"string"==typeof this.easing?this.easing:"ease","--start-blur":("string"==typeof this.blurAmount?this.blurAmount:"0px")||"0px","--perspective":t||"1000px","--distance":"string"==typeof this.distance?this.distance:"50px","--transform-origin":a,perspective:t||"none","transform-origin":a}},o("slot",{key:"fd963246d2c5667d5467374576416e7ab98134e9"})))}static get watchers(){return{scrub:[{headerScrubChange:0}]}}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:block}:host(.scrubbing) .animate-container,:host(.scrubbing) ::slotted(*){animation-play-state:paused !important;animation-delay:calc(var(--scroll-progress, 0) * -1s) !important;animation-duration:1s !important;transition:none !important}.animate-container{animation-duration:var(--animation-duration, 1000ms);animation-delay:var(--animation-delay, 0ms);animation-timing-function:var(--animation-easing, ease);animation-fill-mode:both}.fade-in,::slotted(.fade-in){animation-name:fadeIn}.fade-out,::slotted(.fade-out){animation-name:fadeOut}@keyframes fadeIn{from{opacity:0;filter:blur(var(--start-blur, 0px))}to{opacity:1;filter:blur(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.slide-in-left,::slotted(.slide-in-left){animation-name:slideInLeft}.slide-in-right,::slotted(.slide-in-right){animation-name:slideInRight}.slide-in-up,::slotted(.slide-in-up){animation-name:slideInUp}.slide-in-down,::slotted(.slide-in-down){animation-name:slideInDown}.slide-out-left,::slotted(.slide-out-left){animation-name:slideOutLeft}.slide-out-right,::slotted(.slide-out-right){animation-name:slideOutRight}.slide-out-up,::slotted(.slide-out-up){animation-name:slideOutUp}.slide-out-down,::slotted(.slide-out-down){animation-name:slideOutDown}@keyframes slideInLeft{from{transform:translate3d(calc(var(--distance, 100%) * -1), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInRight{from{transform:translate3d(var(--distance, 100%), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInUp{from{transform:translate3d(0, var(--distance, 100%), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInDown{from{transform:translate3d(0, calc(var(--distance, 100%) * -1), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideOutLeft{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(-100%, 0, 0);opacity:0}}@keyframes slideOutRight{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(100%, 0, 0);opacity:0}}@keyframes slideOutUp{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, -100%, 0);opacity:0}}@keyframes slideOutDown{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, 100%, 0);opacity:0}}.zoom-in,::slotted(.zoom-in){animation-name:zoomIn}.zoom-out,::slotted(.zoom-out){animation-name:zoomOut}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.flip-in,::slotted(.flip-in){animation-name:flipIn}.flip-out,::slotted(.flip-out){animation-name:flipOut}.flip-in-x,::slotted(.flip-in-x){animation-name:flipInX}.flip-in-y,::slotted(.flip-in-y){animation-name:flipInY}.flip-out-x,::slotted(.flip-out-x){animation-name:flipOutX}.flip-out-y,::slotted(.flip-out-y){animation-name:flipOutY}@keyframes flipIn{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);animation-timing-function:ease-in}60%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 10deg);opacity:1}80%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -5deg)}to{transform:perspective(var(--perspective, 1000px))}}@keyframes flipOut{from{transform:perspective(var(--perspective, 1000px))}30%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipInX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}}@keyframes flipInY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}}@keyframes flipOutX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipOutY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}}.bounce-in,::slotted(.bounce-in){animation-name:bounceIn}.bounce-out,::slotted(.bounce-out){animation-name:bounceOut}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scale3d(1, 1, 1)}}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.rotate-in,::slotted(.rotate-in){animation-name:rotateIn}.rotate-out,::slotted(.rotate-out){animation-name:rotateOut}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0, 0, 1, -200deg);opacity:0}to{transform-origin:center;transform:translate3d(0, 0, 0);opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0, 0, 1, 200deg);opacity:0}}.shake,::slotted(.shake){animation-name:shake}@keyframes shake{from,to{transform:translate3d(0, 0, 0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.zoom-in-up,::slotted(.zoom-in-up){animation-name:zoomInUp}.zoom-in-down,::slotted(.zoom-in-down){animation-name:zoomInDown}.zoom-in-left,::slotted(.zoom-in-left){animation-name:zoomInLeft}.zoom-in-right,::slotted(.zoom-in-right){animation-name:zoomInRight}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.pulse,::slotted(.pulse){animation-name:pulse}.rubber-band,::slotted(.rubber-band){animation-name:rubberBand}.tada,::slotted(.tada){animation-name:tada}.jello,::slotted(.jello){animation-name:jello}.wobble,::slotted(.wobble){animation-name:wobble}@keyframes pulse{from,to{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}}@keyframes rubberBand{from,to{transform:scale3d(1, 1, 1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}}@keyframes tada{from,to{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}}@keyframes jello{from,11.1%,to{transform:translate3d(0, 0, 0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}@keyframes wobble{from,to{transform:translate3d(0, 0, 0)}15%{transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30%{transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45%{transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60%{transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75%{transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}}.roll-in,::slotted(.roll-in){animation-name:rollIn}.roll-out,::slotted(.roll-out){animation-name:rollOut}.blur-reveal,::slotted(.blur-reveal){animation-name:blurReveal}.back-in-up,::slotted(.back-in-up){animation-name:backInUp}.back-in-down,::slotted(.back-in-down){animation-name:backInDown}.back-in-left,::slotted(.back-in-left){animation-name:backInLeft}.back-in-right,::slotted(.back-in-right){animation-name:backInRight}.back-out-up,::slotted(.back-out-up){animation-name:backOutUp}.back-out-down,::slotted(.back-out-down){animation-name:backOutDown}.back-out-left,::slotted(.back-out-left){animation-name:backOutLeft}.back-out-right,::slotted(.back-out-right){animation-name:backOutRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(-700px) scale(0.7);opacity:0}}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(700px) scale(0.7);opacity:0}}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(-2000px) scale(0.7);opacity:0}}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(2000px) scale(0.7);opacity:0}}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}to{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}@keyframes blurReveal{from{opacity:0;filter:blur(var(--start-blur, 20px));transform:scale(0.9)}to{opacity:1;filter:blur(0);transform:scale(1)}}"}},[769,"ui-animate-on-scroll",{enterClass:[1,"enter-class"],leaveClass:[1,"leave-class"],threshold:[2],rootMargin:[1,"root-margin"],once:[4],duration:[2],delay:[2],easing:[1],anchor:[1],root:[1],blurAmount:[1,"blur-amount"],perspective:[1],stagger:[2],transformOrigin:[1,"transform-origin"],distance:[1],mirror:[4],respectReducedMotion:[4,"respect-reduced-motion"],scrub:[4],isVisible:[32],hasAnimated:[32]},void 0,{scrub:[{headerScrubChange:0}]}]),s=n,m=function(){"undefined"!=typeof customElements&&["ui-animate-on-scroll"].forEach((t=>{"ui-animate-on-scroll"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))};export{s as UiAnimateOnScroll,m as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as t,Host as s,transformTag as o}from"@stencil/core/internal/client";import{d as n,a as r}from"./badge.js";import{d}from"./context-menu.js";import{d as l}from"./icon.js";import{d as h}from"./loader.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.asideClosed=a(this,"asideClosed",7),this.asideOpened=a(this,"asideOpened",7),this.asideResized=a(this,"asideResized",7),this.asideActionClick=a(this,"asideActionClick",7),this.asideStateChange=a(this,"asideStateChange",7)}open=!1;direction="right";size="320px";mini=!1;miniSize="64px";pinned=!1;variant="default";theme="default";haptic=!1;enableParallax=!1;enableVoiceControl=!1;syncGroup="";maximized=!1;autoMini=!0;toggleShortcut="";showActions=!1;actionItems=[];stackOffset=0;scope="body";closeable=!0;closeOnOverlayClick=!0;showOverlay=!1;closeOnEscape=!0;resizable=!1;resizeHandleColor="";showResizeIndicator=!0;minSize=200;rtl=!1;maxSize=1200;backdropBlur="0";transitionDuration="0.3s";animationType="slide-in-out";loading=!1;progress=-1;badge="";persistKey;floatingOffset="20px";secondarySize="auto";floatingAlign="stretch";backgroundColor="white";asideClosed;asideOpened;asideResized;asideActionClick;asideStateChange;currentSize;isResizing=!1;isListening=!1;mouseRotation={x:0,y:0};get hostElement(){return this}startPos=0;startSize=0;firstFocusableEl;lastFocusableEl;watchOpenHandler(e){e?(this.playHaptic("open"),this.asideOpened.emit(),this.handleFocusTrap(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.add("ui-aside-open")):(this.playHaptic("close"),this.asideClosed.emit(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.remove("ui-aside-open")),this.asideStateChange.emit({open:this.open,mini:this.mini})}watchMiniHandler(){this.playHaptic("toggle"),this.asideStateChange.emit({open:this.open,mini:this.mini}),this.saveState()}handleWindowResize(){this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}componentWillLoad(){this.loadState(),this.currentSize||(this.currentSize=parseInt(this.size)),this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}handleRemoteSync(e){this.syncGroup&&e.detail.group===this.syncGroup&&e.detail.sourceId!==this.hostElement.id&&(this.open=e.detail.open,this.mini=e.detail.mini)}broadcastState(){this.syncGroup&&window.dispatchEvent(new CustomEvent("asideRemoteState",{detail:{group:this.syncGroup,sourceId:this.hostElement.id,open:this.open,mini:this.mini}}))}playHaptic(e){if(this.haptic)try{const i=new(window.AudioContext||window.webkitAudioContext),a=i.createOscillator(),t=i.createGain();a.connect(t),t.connect(i.destination);const s=i.currentTime;"open"===e?(a.frequency.setValueAtTime(440,s),a.frequency.exponentialRampToValueAtTime(880,s+.1)):"close"===e?(a.frequency.setValueAtTime(880,s),a.frequency.exponentialRampToValueAtTime(220,s+.15)):(a.frequency.setValueAtTime(660,s),a.frequency.exponentialRampToValueAtTime(440,s+.1)),t.gain.setValueAtTime(.1,s),t.gain.exponentialRampToValueAtTime(.01,s+.15),a.start(),a.stop(s+.15)}catch(e){}}disconnectedCallback(){"body"===this.scope&&document.body.classList.remove("ui-aside-open")}watchSizeHandler(e){e&&(this.currentSize=parseInt(e))}componentDidLoad(){this.open&&this.handleFocusTrap()}loadState(){if(this.persistKey){const e=localStorage.getItem("aside-panel-"+this.persistKey);if(e)try{const{open:i,mini:a,size:t}=JSON.parse(e);this.open=i,this.mini=a,this.currentSize=t}catch(e){console.warn("Failed to load aside-panel state",e)}}}saveState(){this.persistKey&&localStorage.setItem("aside-panel-"+this.persistKey,JSON.stringify({open:this.open,mini:this.mini,size:this.currentSize}))}handleFocusTrap(){this.open&&!this.mini&&setTimeout((()=>{const e=this.hostElement.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');e&&e.length>0&&(this.firstFocusableEl=e[0],this.lastFocusableEl=e[e.length-1],this.firstFocusableEl.focus())}),100)}handleKeyDown(e){if(this.toggleShortcut&&e.ctrlKey&&e.key.toLowerCase()===this.toggleShortcut.toLowerCase())return e.preventDefault(),void this.toggle();if(this.open){if(this.closeOnEscape&&"Escape"===e.key&&!this.pinned&&this.handleClose(),this.resizable&&e.altKey){const i=e.shiftKey?50:10;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)){e.preventDefault();let a=0;"ArrowLeft"===e.key&&(a="left"===this.direction?-i:"right"===this.direction?i:0),"ArrowRight"===e.key&&(a="left"===this.direction?i:"right"===this.direction?-i:0),"ArrowUp"===e.key&&(a="top"===this.direction?-i:"bottom"===this.direction?i:0),"ArrowDown"===e.key&&(a="top"===this.direction?i:"bottom"===this.direction?-i:0),this.currentSize=Math.max(this.minSize,Math.min(this.maxSize,this.currentSize+a)),this.asideResized.emit({size:this.currentSize}),this.saveState(),this.playHaptic("toggle")}}if("Tab"===e.key){const i=this.hostElement.shadowRoot,a=i?i.activeElement:document.activeElement;e.shiftKey?a===this.firstFocusableEl&&(this.lastFocusableEl.focus(),e.preventDefault()):a===this.lastFocusableEl&&(this.firstFocusableEl.focus(),e.preventDefault())}}}async toggleMaximize(){this.maximized=!this.maximized,this.playHaptic("toggle")}async toggle(){this.open=!this.open}async toggleMini(){this.mini=!this.mini}async show(){this.open=!0}async hide(){this.pinned||(this.open=!1)}async initVoice(){if(!this.enableVoiceControl||!("webkitSpeechRecognition"in window))return;const e=new window.webkitSpeechRecognition;e.continuous=!1,e.interimResults=!1,e.lang="en-US",e.onstart=()=>{this.isListening=!0},e.onend=()=>{this.isListening=!1},e.onresult=e=>{const i=e.results[0][0].transcript.toLowerCase();(i.includes("side")||i.includes("panel"))&&((i.includes("open")||i.includes("show"))&&this.show(),(i.includes("close")||i.includes("hide"))&&this.hide(),(i.includes("mini")||i.includes("collapse"))&&(this.mini=!0),i.includes("expand")&&(this.mini=!1))},e.start()}handleResizeStart=e=>{this.resizable&&!this.mini&&(e.preventDefault(),this.isResizing=!0,this.startPos="left"===this.direction||"right"===this.direction?e.clientX:e.clientY,this.startSize=this.currentSize,document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd))};handleResizeMove=e=>{if(!this.isResizing)return;let i=0,a=0;"left"===this.direction||"right"===this.direction?(a=.9*window.innerWidth,i="left"===this.direction?e.clientX-this.startPos:this.startPos-e.clientX):(a=.9*window.innerHeight,i="top"===this.direction?e.clientY-this.startPos:this.startPos-e.clientY);let t=this.startSize+i;t=Math.max(this.minSize,Math.min(Math.min(this.maxSize,a),t)),this.currentSize=t};handleResizeEnd=()=>{this.isResizing=!1,document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd),this.asideResized.emit({size:this.currentSize}),this.saveState()};handleClose=()=>{this.pinned||(this.open=!1)};handleOverlayClick=()=>{this.closeOnOverlayClick&&!this.pinned&&this.handleClose()};handleParallax=e=>{if(!this.enableParallax||!this.open||this.mini)return;const i=this.hostElement.getBoundingClientRect();this.mouseRotation={x:5*((e.clientY-i.top)/i.height-.5),y:5*-((e.clientX-i.left)/i.width-.5)}};resetParallax=()=>{this.mouseRotation={x:0,y:0}};hostStyle(){const e={},i=this.maximized?"90%":this.mini?this.miniSize:this.currentSize?this.currentSize+"px":this.size,a="floating"===this.variant,t=a?this.floatingOffset:this.stackOffset?this.stackOffset+"px":"0";let s="none";return"left"===this.direction||"right"===this.direction?(e.width=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.top=t,e.bottom=t,e.height=`calc(100vh - 2 * ${t})`):(e.height="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.top=t,e.bottom="auto"):"end"===this.floatingAlign?(e.bottom=t,e.top="auto"):(e.top="50%",s="translateY(-50%)")):(e.height="100vh",e.top="0",e.bottom="0")):(e.height=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.left=t,e.right=t,e.width=`calc(100vw - 2 * ${t})`):(e.width="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.left=t,e.right="auto"):"end"===this.floatingAlign?(e.right=t,e.left="auto"):(e.left="50%",s="translateX(-50%)")):(e.width="100vw",e.left="0",e.right="0")),!this.enableParallax||this.mini||this.maximized||(s="none"===s?"":s,s+=` perspective(1000px) rotateX(${this.mouseRotation.x}deg) rotateY(${this.mouseRotation.y}deg)`),e["--aside-center-transform"]=s.trim(),e["--aside-transition-duration"]=this.transitionDuration,e["--aside-bg"]=this.backgroundColor||"white",e.backgroundColor="var(--aside-bg, #ffffff)",e}render(){const e="default"!==this.theme?this.theme:this.variant;return t(s,{key:"6fe78ffb52aa0a9d3c2659ab49da7bbb8220cd73",class:{"aside-container":!0,open:this.open,mini:this.mini,maximized:this.maximized,["theme-"+e]:!0,["variant-"+e]:!0,["dir-"+this.direction]:!0,["animation-"+this.animationType]:!0,"is-pinned":this.pinned,rtl:this.rtl},style:this.hostStyle(),role:"complementary","aria-expanded":""+this.open,"aria-hidden":""+!this.open},this.showOverlay&&!this.mini&&t("div",{key:"b377c132e1a18b11fe14fea92fb42edea15e7931",class:{overlay:!0,visible:this.open},style:{backdropFilter:"0"!==this.backdropBlur?`blur(${this.backdropBlur})`:"none"},onClick:this.handleOverlayClick}),t("div",{key:"64557685915ff59acf459637b07eb27a2cdd7960",class:{panel:!0,["panel-"+this.direction]:!0,open:this.open,mini:this.mini,resizing:this.isResizing,loading:this.loading,"parallax-active":this.enableParallax},style:this.hostStyle(),onMouseMove:this.handleParallax,onMouseLeave:this.resetParallax},this.loading&&t("div",{key:"0944112418e5cff5052444dfe972b9097c8a87cc",class:"loading-overlay"},t("div",{key:"d78691ea1bd174e74431b7f1e937f5c3a15a7480",class:"spinner"})),this.resizable&&!this.mini&&t("div",{key:"b6c3327d7f2b2b390e7034f99f26baa9fb5a8e78",class:"resize-handle resize-handle-"+this.direction,style:this.resizeHandleColor?{backgroundColor:this.resizeHandleColor}:{},onMouseDown:this.handleResizeStart},this.showResizeIndicator&&t("div",{key:"7d0446ab14ce40d3de648647d10b825c4e17255b",class:"resize-indicator"},t("span",{key:"fd5a84994e2e84d3934404fe01d990b0741cf69d"}),t("span",{key:"3f5bb3beb076185b6b375485c2eda33a86ce1af4"}),t("span",{key:"1e2fc6fe5129ee60dc91816fb0aecb367a0f5d48"}))),t("div",{key:"d5f732ce0f5c0263a47821107c68fb42491423ac",class:"panel-header-toolbar"},t("div",{key:"f7c0483a59e5ca7b0e1a1b63f564f0662f92fbf4",class:"toolbar-left"},this.mini?t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-right",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Expand",onClick:()=>this.toggleMini()}):t("div",{style:{display:"flex",gap:"4px"}},t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-left",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Collapse to Mini",onClick:()=>this.toggleMini()}),!this.mini&&t("ui-button",{variant:"ghost",size:"sm",icon:this.maximized?"minimize":"maximize",iconLibrary:"lucide",iconSize:"14px",ariaLabel:this.maximized?"Restore":"Maximize",onClick:()=>this.toggleMaximize()})),this.enableVoiceControl&&t("ui-button",{key:"779b43eae11da432d5c6f093d8b18bbbb6555d90",variant:"ghost",size:"sm",icon:"mic",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Voice Interaction",class:this.isListening?"active":"",onClick:()=>this.initVoice()})),t("div",{key:"abb834e57587a11fc4cee2868cfdff72989aafa6",class:"toolbar-right"},this.showActions&&t("ui-button",{key:"727b404a4d895d83802bf906f77cbf78b79ed4df",id:"aside-actions-trigger",variant:"ghost",size:"sm",icon:"ellipsis-vertical",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"More Actions",onClick:()=>this.asideActionClick.emit()}),this.showActions&&t("ui-context-menu",{key:"b79ede6b5aafe1ab1bfe2dd48b1392aa261c6149",items:this.actionItems,target:"#aside-actions-trigger",openOn:"click",placement:"bottom",onItemSelect:e=>this.asideActionClick.emit(e.detail)}),this.pinned&&t("ui-icon",{key:"2c959558d6431ce998868df3f11d0a46e708a8c6",name:"pin",library:"lucide",size:"14px",class:"pin-status"}),this.closeable&&!this.pinned&&t("ui-button",{key:"3e09ac4d9d907ffa6479774ae1fe8af67dd48173",variant:"ghost",size:"sm",icon:"x",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"Close panel",onClick:this.handleClose}))),t("div",{key:"88b297a05ea5c189d4301b5fa6ae6da924234f9d",class:"panel-header"},t("div",{key:"769c42bf0fafef4cd5dd67e19a8c834edd47c212",class:"header-main"},t("slot",{key:"b2332bf17c6ad844421beba7842d1195c9b23dd2",name:"header"}),this.badge&&t("span",{key:"51ec6d287c748533e817a9d1ac6d5f08ef2a723e",class:"header-badge"},this.badge)),this.progress>-1&&t("div",{key:"20cef73dab1865d28bc0c116b55d1fdfed6fb315",class:"header-progress"},t("div",{key:"7f5ae92599c2625da1e29fb1b1e1d890a7de61d3",class:"progress-bar",style:{width:Math.min(100,Math.max(0,this.progress))+"%"}}))),t("div",{key:"d38f06820140b669ab0db1160adbd39718cf1d85",class:"panel-content"},t("slot",{key:"fd4171defde8576a75373d1f68f47b816fb7f638",name:"content"}),t("slot",{key:"ed33565d953da868b3039684239aae6029582e2f"})),!this.mini&&t("div",{key:"c58ffbd97eceba87ff9f85d1782cb357b5e87229",class:"panel-footer"},t("slot",{key:"5ddc80b5ca138471895d9f86733c524094f4da8d",name:"footer"}))))}static get watchers(){return{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler: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{display:contents;--aside-overlay-bg:rgba(0, 0, 0, 0.4);--aside-panel-bg:var(--aside-bg, var(--bg-primary, #ffffff));--aside-panel-shadow:0 10px 40px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.06);--aside-panel-text:var(--text-primary, #0f172a);--aside-close-btn-color:var(--text-muted, #64748b);--aside-close-btn-hover-color:var(--text-primary, #0f172a);--aside-close-btn-hover-bg:var(--bg-secondary, #f1f5f9);--aside-close-btn-focus:var(--color-primary, #10b981);--aside-resize-handle-hover:var(--color-primary, #10b981);--aside-resize-handle-active:var(--color-primary-hover, #2563eb);--aside-panel-padding:32px;--aside-transition-duration:0.3s;--aside-ease:cubic-bezier(0.65, 0, 0.35, 1);--aside-z-index-overlay:1500;--aside-z-index-panel:1501;--aside-mini-size:64px}.aside-container{display:block}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--aside-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);z-index:var(--aside-z-index-overlay)}.overlay.visible{opacity:1;visibility:visible}.panel{position:fixed;background-color:var(--aside-panel-bg);color:var(--aside-panel-text);box-shadow:var(--aside-panel-shadow);transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);z-index:var(--aside-z-index-panel);display:flex;flex-direction:column;overflow:hidden;visibility:hidden;pointer-events:none;transform-style:preserve-3d;--aside-dir-transform:translate(0, 0);transform:var(--aside-center-transform, none) var(--aside-dir-transform)}.panel-left{--aside-dir-transform:translateX(-110%)}.panel-right{--aside-dir-transform:translateX(110%)}.panel-top{--aside-dir-transform:translateY(-110%)}.panel-bottom{--aside-dir-transform:translateY(110%)}.panel.open{visibility:visible;pointer-events:auto;--aside-dir-transform:translate(0, 0)}.panel.maximized{width:90% !important;height:90% !important;border-radius:16px;z-index:1550;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5);margin:1%}.panel.maximized .resize-handle{display:none !important}.panel.resizing{transition:none !important;user-select:none}.parallax-active{transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease)}.panel.mini .panel-header,.panel.mini .panel-footer,.panel.mini .toolbar-right,.panel.mini .close-btn{display:none !important}.panel.mini .panel-content{opacity:0.1;filter:blur(4px);pointer-events:none}.panel-header-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0, 0, 0, 0.02);border-bottom:1px solid rgba(0, 0, 0, 0.05)}.panel-header-toolbar .toolbar-left,.panel-header-toolbar .toolbar-right{display:flex;align-items:center;gap:8px}.toolbar-btn{background:transparent;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--aside-close-btn-color);transition:all 0.2s ease}.toolbar-btn:hover{background:var(--aside-close-btn-hover-bg);color:var(--aside-close-btn-hover-color)}.voice-btn.active{color:var(--color-danger, #ef4444);animation:voice-breathing 1.5s infinite ease-in-out}.panel-header{padding:24px var(--aside-panel-padding);border-bottom:1px solid var(--border-subtle, #e2e8f0);position:relative}.panel-header .header-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.panel-header .header-badge{background:var(--border-subtle, #e2e8f0);color:var(--color-primary, #475569);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.panel-header .header-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(0, 0, 0, 0.05)}.panel-header .header-progress .progress-bar{height:100%;background:var(--color-primary, #10b981);transition:width 0.3s ease}.theme-zenith .header-badge{background:rgba(var(--color-success-rgb, 16, 185, 129), 0.2);color:var(--color-success, #10b981)}.theme-zenith .header-progress .progress-bar{background:var(--color-success, #10b981);box-shadow:0 0 5px var(--color-success, #10b981)}.panel-content{flex:1;padding:var(--aside-panel-padding);overflow-y:auto}.panel-footer{padding:20px var(--aside-panel-padding);border-top:1px solid var(--border-subtle, #e2e8f0);background-color:var(--bg-primary, #f8fafc)}.variant-glass .panel,.theme-glass .panel{background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.3)}.variant-glass.panel-left{border-right:1px solid rgba(255, 255, 255, 0.3)}.variant-floating .panel{border-radius:16px;border:1px solid rgba(0, 0, 0, 0.08);box-shadow:0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 15px -5px rgba(0, 0, 0, 0.1)}.variant-floating .panel.panel-right:not(.open){--aside-dir-transform:translateX(calc(100% + 80px))}.variant-floating .panel.panel-left:not(.open){--aside-dir-transform:translateX(calc(-100% - 80px))}.variant-floating .panel.panel-top:not(.open){--aside-dir-transform:translateY(calc(-100% - 80px))}.variant-floating .panel.panel-bottom:not(.open){--aside-dir-transform:translateY(calc(100% + 80px))}.theme-radiant .panel{background:linear-gradient(135deg, var(--bg-primary, #ffffff), var(--bg-primary, #f8fafc));border:2px solid transparent;background-clip:padding-box;box-shadow:0 20px 50px rgba(0, 0, 0, 0.15)}.theme-zenith .panel{background:var(--bg-secondary, #0f172a);color:var(--bg-primary, #ffffff);border-color:var(--bg-primary, var(--border-subtle, #1e293b))}.theme-zenith .panel .panel-header,.theme-zenith .panel .panel-footer{border-color:var(--bg-primary, var(--border-subtle, #1e293b));background:var(--bg-primary, var(--border-subtle, #1e293b))}.resize-handle{position:absolute;background-color:transparent;z-index:1510;transition:background-color 0.2s ease, opacity 0.2s ease;display:flex;align-items:center;justify-content:center}.resize-handle:hover{background-color:var(--aside-resize-handle-hover)}.resize-indicator{display:flex;gap:2px;pointer-events:none;opacity:0.5}.resize-handle:hover .resize-indicator{opacity:1}.resize-handle-left,.resize-handle-right{flex-direction:column}.resize-handle-left .resize-indicator,.resize-handle-right .resize-indicator{flex-direction:column}.resize-indicator span{width:3px;height:3px;background-color:currentColor;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.2)}.resize-handle-left{right:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-right{left:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-top{bottom:0;left:0;right:0;height:6px;cursor:ns-resize}.resize-handle-bottom{top:0;left:0;right:0;height:6px;cursor:ns-resize}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center;z-index:1600;backdrop-filter:blur(4px);overflow:hidden}.loading-overlay::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent);animation:aside-shimmer 2s infinite}.spinner{width:48px;height:48px;border:4px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:aside-spin 1s infinite linear}@keyframes aside-spin{to{transform:rotate(360deg)}}@keyframes aside-shimmer{100%{left:200%}}.theme-zenith .panel.open{animation:zenith-heartbeat 4s ease-in-out infinite}@keyframes zenith-heartbeat{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-success-rgb, 16, 185, 129), 0)}50%{box-shadow:0 0 20px 2px rgba(var(--color-success-rgb, 16, 185, 129), 0.2)}}@media (prefers-color-scheme: dark){:host{--aside-panel-bg:var(--bg-primary, #1e293b);--aside-panel-text:var(--bg-secondary, #f1f5f9)}.panel-header,.panel-footer{border-color:var(--color-primary, #334155)}.panel-footer{background:var(--bg-secondary, #0f172a)}.loading-overlay{background:rgba(15, 23, 42, 0.7)}}.aside-container.animation-slide-in-out .panel{opacity:1}.aside-container.animation-fade .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:translate(0, 0) !important}.aside-container.animation-fade .panel.open{opacity:1;visibility:visible}.aside-container.animation-scale .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:scale(0.95)}.aside-container.animation-scale .panel.open{opacity:1;visibility:visible;--aside-dir-transform:scale(1)}.variant-none .panel,.theme-none .panel{background:transparent !important;box-shadow:none !important;border:none !important}'}},[769,"ui-aside-panel",{open:[1540],direction:[1],size:[1],mini:[1540],miniSize:[1,"mini-size"],pinned:[4],variant:[1],theme:[1],haptic:[4],enableParallax:[4,"enable-parallax"],enableVoiceControl:[4,"enable-voice-control"],syncGroup:[1,"sync-group"],maximized:[1540],autoMini:[4,"auto-mini"],toggleShortcut:[1,"toggle-shortcut"],showActions:[4,"show-actions"],actionItems:[1,"action-items"],stackOffset:[2,"stack-offset"],scope:[1],closeable:[4],closeOnOverlayClick:[4,"close-on-overlay-click"],showOverlay:[4,"show-overlay"],closeOnEscape:[4,"close-on-escape"],resizable:[4],resizeHandleColor:[1,"resize-handle-color"],showResizeIndicator:[4,"show-resize-indicator"],minSize:[2,"min-size"],rtl:[4],maxSize:[2,"max-size"],backdropBlur:[1,"backdrop-blur"],transitionDuration:[1,"transition-duration"],animationType:[1,"animation-type"],loading:[4],progress:[2],badge:[1],persistKey:[1,"persist-key"],floatingOffset:[1,"floating-offset"],secondarySize:[1,"secondary-size"],floatingAlign:[1,"floating-align"],backgroundColor:[1,"background-color"],currentSize:[32],isResizing:[32],isListening:[32],mouseRotation:[32],toggleMaximize:[64],toggle:[64],toggleMini:[64],show:[64],hide:[64],initVoice:[64]},[[9,"resize","handleWindowResize"],[8,"asideRemoteState","handleRemoteSync"],[8,"keydown","handleKeyDown"]],{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler:0}]}]),p=c,b=function(){"undefined"!=typeof customElements&&["ui-aside-panel","ui-badge","ui-button","ui-context-menu","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-aside-panel":customElements.get(o(e))||customElements.define(o(e),c);break;case"ui-badge":customElements.get(o(e))||r();break;case"ui-button":customElements.get(o(e))||n();break;case"ui-context-menu":customElements.get(o(e))||d();break;case"ui-icon":customElements.get(o(e))||l();break;case"ui-loader":customElements.get(o(e))||h()}}))};export{p as UiAsidePanel,b as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as t,Host as s,transformTag as o}from"@stencil/core/internal/client";import{d as r}from"./badge.js";import{d as n}from"./button.js";import{d}from"./context-menu.js";import{d as l}from"./icon.js";import{d as c}from"./loader.js";const h=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.asideClosed=a(this,"asideClosed",7),this.asideOpened=a(this,"asideOpened",7),this.asideResized=a(this,"asideResized",7),this.asideActionClick=a(this,"asideActionClick",7),this.asideStateChange=a(this,"asideStateChange",7)}open=!1;direction="right";size="320px";mini=!1;miniSize="64px";pinned=!1;variant="default";theme="default";haptic=!1;enableParallax=!1;enableVoiceControl=!1;syncGroup="";maximized=!1;autoMini=!0;toggleShortcut="";showActions=!1;actionItems=[];stackOffset=0;scope="body";closeable=!0;closeOnOverlayClick=!0;showOverlay=!1;closeOnEscape=!0;resizable=!1;resizeHandleColor="";showResizeIndicator=!0;minSize=200;rtl=!1;maxSize=1200;backdropBlur="0";transitionDuration="0.3s";animationType="slide-in-out";loading=!1;progress=-1;badge="";persistKey;floatingOffset="20px";secondarySize="auto";floatingAlign="stretch";backgroundColor="";asideClosed;asideOpened;asideResized;asideActionClick;asideStateChange;currentSize;isResizing=!1;isListening=!1;mouseRotation={x:0,y:0};get hostElement(){return this}startPos=0;startSize=0;firstFocusableEl;lastFocusableEl;watchOpenHandler(e){e?(this.playHaptic("open"),this.asideOpened.emit(),this.handleFocusTrap(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.add("ui-aside-open")):(this.playHaptic("close"),this.asideClosed.emit(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.remove("ui-aside-open")),this.asideStateChange.emit({open:this.open,mini:this.mini})}watchMiniHandler(){this.playHaptic("toggle"),this.asideStateChange.emit({open:this.open,mini:this.mini}),this.saveState()}handleWindowResize(){this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}componentWillLoad(){this.loadState(),this.currentSize||(this.currentSize=parseInt(this.size)),this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}handleRemoteSync(e){this.syncGroup&&e.detail.group===this.syncGroup&&e.detail.sourceId!==this.hostElement.id&&(this.open=e.detail.open,this.mini=e.detail.mini)}broadcastState(){this.syncGroup&&window.dispatchEvent(new CustomEvent("asideRemoteState",{detail:{group:this.syncGroup,sourceId:this.hostElement.id,open:this.open,mini:this.mini}}))}playHaptic(e){if(this.haptic)try{const i=new(window.AudioContext||window.webkitAudioContext),a=i.createOscillator(),t=i.createGain();a.connect(t),t.connect(i.destination);const s=i.currentTime;"open"===e?(a.frequency.setValueAtTime(440,s),a.frequency.exponentialRampToValueAtTime(880,s+.1)):"close"===e?(a.frequency.setValueAtTime(880,s),a.frequency.exponentialRampToValueAtTime(220,s+.15)):(a.frequency.setValueAtTime(660,s),a.frequency.exponentialRampToValueAtTime(440,s+.1)),t.gain.setValueAtTime(.1,s),t.gain.exponentialRampToValueAtTime(.01,s+.15),a.start(),a.stop(s+.15)}catch(e){}}disconnectedCallback(){"body"===this.scope&&document.body.classList.remove("ui-aside-open")}watchSizeHandler(e){e&&(this.currentSize=parseInt(e))}componentDidLoad(){this.open&&this.handleFocusTrap()}loadState(){if(this.persistKey){const e=localStorage.getItem("aside-panel-"+this.persistKey);if(e)try{const{open:i,mini:a,size:t}=JSON.parse(e);this.open=i,this.mini=a,this.currentSize=t}catch(e){console.warn("Failed to load aside-panel state",e)}}}saveState(){this.persistKey&&localStorage.setItem("aside-panel-"+this.persistKey,JSON.stringify({open:this.open,mini:this.mini,size:this.currentSize}))}handleFocusTrap(){this.open&&!this.mini&&setTimeout((()=>{const e=this.hostElement.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');e&&e.length>0&&(this.firstFocusableEl=e[0],this.lastFocusableEl=e[e.length-1],this.firstFocusableEl.focus())}),100)}handleKeyDown(e){if(this.toggleShortcut&&e.ctrlKey&&e.key.toLowerCase()===this.toggleShortcut.toLowerCase())return e.preventDefault(),void this.toggle();if(this.open){if(this.closeOnEscape&&"Escape"===e.key&&!this.pinned&&this.handleClose(),this.resizable&&e.altKey){const i=e.shiftKey?50:10;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)){e.preventDefault();let a=0;"ArrowLeft"===e.key&&(a="left"===this.direction?-i:"right"===this.direction?i:0),"ArrowRight"===e.key&&(a="left"===this.direction?i:"right"===this.direction?-i:0),"ArrowUp"===e.key&&(a="top"===this.direction?-i:"bottom"===this.direction?i:0),"ArrowDown"===e.key&&(a="top"===this.direction?i:"bottom"===this.direction?-i:0),this.currentSize=Math.max(this.minSize,Math.min(this.maxSize,this.currentSize+a)),this.asideResized.emit({size:this.currentSize}),this.saveState(),this.playHaptic("toggle")}}if("Tab"===e.key){const i=this.hostElement.shadowRoot,a=i?i.activeElement:document.activeElement;e.shiftKey?a===this.firstFocusableEl&&(this.lastFocusableEl.focus(),e.preventDefault()):a===this.lastFocusableEl&&(this.firstFocusableEl.focus(),e.preventDefault())}}}async toggleMaximize(){this.maximized=!this.maximized,this.playHaptic("toggle")}async toggle(){this.open=!this.open}async toggleMini(){this.mini=!this.mini}async show(){this.open=!0}async hide(){this.pinned||(this.open=!1)}async initVoice(){if(!this.enableVoiceControl||!("webkitSpeechRecognition"in window))return;const e=new window.webkitSpeechRecognition;e.continuous=!1,e.interimResults=!1,e.lang="en-US",e.onstart=()=>{this.isListening=!0},e.onend=()=>{this.isListening=!1},e.onresult=e=>{const i=e.results[0][0].transcript.toLowerCase();(i.includes("side")||i.includes("panel"))&&((i.includes("open")||i.includes("show"))&&this.show(),(i.includes("close")||i.includes("hide"))&&this.hide(),(i.includes("mini")||i.includes("collapse"))&&(this.mini=!0),i.includes("expand")&&(this.mini=!1))},e.start()}handleResizeStart=e=>{this.resizable&&!this.mini&&(e.preventDefault(),this.isResizing=!0,this.startPos="left"===this.direction||"right"===this.direction?e.clientX:e.clientY,this.startSize=this.currentSize,document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd))};handleResizeMove=e=>{if(!this.isResizing)return;let i=0,a=0;"left"===this.direction||"right"===this.direction?(a=.9*window.innerWidth,i="left"===this.direction?e.clientX-this.startPos:this.startPos-e.clientX):(a=.9*window.innerHeight,i="top"===this.direction?e.clientY-this.startPos:this.startPos-e.clientY);let t=this.startSize+i;t=Math.max(this.minSize,Math.min(Math.min(this.maxSize,a),t)),this.currentSize=t};handleResizeEnd=()=>{this.isResizing=!1,document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd),this.asideResized.emit({size:this.currentSize}),this.saveState()};handleClose=()=>{this.pinned||(this.open=!1)};handleOverlayClick=()=>{this.closeOnOverlayClick&&!this.pinned&&this.handleClose()};handleParallax=e=>{if(!this.enableParallax||!this.open||this.mini)return;const i=this.hostElement.getBoundingClientRect();this.mouseRotation={x:5*((e.clientY-i.top)/i.height-.5),y:5*-((e.clientX-i.left)/i.width-.5)}};resetParallax=()=>{this.mouseRotation={x:0,y:0}};hostStyle(){const e={},i=this.maximized?"90%":this.mini?this.miniSize:this.currentSize?this.currentSize+"px":this.size,a="floating"===this.variant,t=a?this.floatingOffset:this.stackOffset?this.stackOffset+"px":"0";let s="none";return"left"===this.direction||"right"===this.direction?(e.width=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.top=t,e.bottom=t,e.height=`calc(100vh - 2 * ${t})`):(e.height="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.top=t,e.bottom="auto"):"end"===this.floatingAlign?(e.bottom=t,e.top="auto"):(e.top="50%",s="translateY(-50%)")):(e.height="100vh",e.top="0",e.bottom="0")):(e.height=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.left=t,e.right=t,e.width=`calc(100vw - 2 * ${t})`):(e.width="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.left=t,e.right="auto"):"end"===this.floatingAlign?(e.right=t,e.left="auto"):(e.left="50%",s="translateX(-50%)")):(e.width="100vw",e.left="0",e.right="0")),!this.enableParallax||this.mini||this.maximized||(s="none"===s?"":s,s+=` perspective(1000px) rotateX(${this.mouseRotation.x}deg) rotateY(${this.mouseRotation.y}deg)`),e["--aside-center-transform"]=s.trim(),e["--aside-transition-duration"]=this.transitionDuration,this.backgroundColor&&(e["--aside-bg"]=this.backgroundColor,e.backgroundColor="var(--aside-bg)"),e}render(){const e="default"!==this.theme?this.theme:this.variant;return t(s,{key:"92505a0012eb970501248a911a9c7bcfda231eb6",class:{"aside-container":!0,open:this.open,mini:this.mini,maximized:this.maximized,["theme-"+e]:!0,["variant-"+e]:!0,["dir-"+this.direction]:!0,["animation-"+this.animationType]:!0,"is-pinned":this.pinned,rtl:this.rtl},style:this.hostStyle(),role:"complementary","aria-expanded":""+this.open,"aria-hidden":""+!this.open},this.showOverlay&&!this.mini&&t("div",{key:"ddb0507a0fba0283f0fe2e1259cda57feacdc6c8",class:{overlay:!0,visible:this.open},style:{backdropFilter:"0"!==this.backdropBlur?`blur(${this.backdropBlur})`:"none"},onClick:this.handleOverlayClick}),t("div",{key:"1ba2ecd1a7fa2ffea0861057282501507613813c",class:{panel:!0,["panel-"+this.direction]:!0,open:this.open,mini:this.mini,resizing:this.isResizing,loading:this.loading,"parallax-active":this.enableParallax},style:this.hostStyle(),onMouseMove:this.handleParallax,onMouseLeave:this.resetParallax},this.loading&&t("div",{key:"fce1a24c4217fb33fcfde8ad8a46da7a24706b37",class:"loading-overlay"},t("div",{key:"2b651b1637c82f7f63c6c116947cb5abdbb6a181",class:"spinner"})),this.resizable&&!this.mini&&t("div",{key:"4d568b58f391c50e25fc9afe79c19eaef15df314",class:"resize-handle resize-handle-"+this.direction,style:this.resizeHandleColor?{backgroundColor:this.resizeHandleColor}:{},onMouseDown:this.handleResizeStart},this.showResizeIndicator&&t("div",{key:"de809bbc0d9dbe17fbe0677141236524c775468f",class:"resize-indicator"},t("span",{key:"aba11983437a5e90e4d28d056d85a00643c643c4"}),t("span",{key:"492e82796d84a56d19e4591573665979c9e067e4"}),t("span",{key:"9c36e8c6f0b13a81011c951ef6750be682964d29"}))),t("div",{key:"0cee1aabbb0c6c4a9ad77b2597f6e8e5ad7dd9a6",class:"panel-header-toolbar"},t("div",{key:"07843cc4dc362486386bec324c0ffeeb2ef235bf",class:"toolbar-left"},this.mini?t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-right",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Expand",onClick:()=>this.toggleMini()}):t("div",{style:{display:"flex",gap:"4px"}},t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-left",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Collapse to Mini",onClick:()=>this.toggleMini()}),!this.mini&&t("ui-button",{variant:"ghost",size:"sm",icon:this.maximized?"minimize":"maximize",iconLibrary:"lucide",iconSize:"14px",ariaLabel:this.maximized?"Restore":"Maximize",onClick:()=>this.toggleMaximize()})),this.enableVoiceControl&&t("ui-button",{key:"13d2146cbbbdb4a70ae25e42084cda4037cc39cf",variant:"ghost",size:"sm",icon:"mic",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Voice Interaction",class:this.isListening?"active":"",onClick:()=>this.initVoice()})),t("div",{key:"fe299acfd95ca4bca3be49069290b55880dcbefc",class:"toolbar-right"},this.showActions&&t("ui-button",{key:"a352376571490fc6acccfffd438e1b1b0a709ea7",id:"aside-actions-trigger",variant:"ghost",size:"sm",icon:"ellipsis-vertical",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"More Actions",onClick:()=>this.asideActionClick.emit()}),this.showActions&&t("ui-context-menu",{key:"ae3c9106f26433d2b131f7700e01170b794082d8",items:this.actionItems,target:"#aside-actions-trigger",openOn:"click",placement:"bottom",onItemSelect:e=>this.asideActionClick.emit(e.detail)}),this.pinned&&t("ui-icon",{key:"7f498e3efac649f652572eaa8ccefe14f6a2f527",name:"pin",library:"lucide",size:"14px",class:"pin-status"}),this.closeable&&!this.pinned&&t("ui-button",{key:"a35be0a257a261106ee9c015f30b0508bb0eb6e7",variant:"ghost",size:"sm",icon:"x",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"Close panel",onClick:this.handleClose}))),t("div",{key:"3d7ebe656bfead3da872c415985fe098f4e673e5",class:"panel-header"},t("div",{key:"0e74f91d71ccfd38fdf7449674cdf3f0eb02c3d1",class:"header-main"},t("slot",{key:"0e1d8d13735d4d5ff965752c4bdf5520a93ce978",name:"header"}),this.badge&&t("span",{key:"f6299260ad5dc6033b9ba6bccfd3d43742d8e875",class:"header-badge"},this.badge)),this.progress>-1&&t("div",{key:"2b73fba206a5edd1624ffbfecd13cfb71b8ea9b3",class:"header-progress"},t("div",{key:"22eaaae3fcdfa13fd8b094566c96aa7af067d343",class:"progress-bar",style:{width:Math.min(100,Math.max(0,this.progress))+"%"}}))),t("div",{key:"c68a4963fcaa2530f6953b9fa0b0317cab9ee62a",class:"panel-content"},t("slot",{key:"06394ff635128b6d8c0ce737e5a3dac3d4ee609c",name:"content"}),t("slot",{key:"e9e3afd0e7e4f5364cd44fcc665e9e241df38081"})),!this.mini&&t("div",{key:"f6ed2e0ad0f0c598008a80fcd3d3079469f4cd95",class:"panel-footer"},t("slot",{key:"72a1bb737d4a0db301aaf9a6b72a643b94066a3c",name:"footer"}))))}static get watchers(){return{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler: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{display:contents;--aside-overlay-bg:rgba(0, 0, 0, 0.4);--aside-panel-bg:var(--aside-bg, var(--bg-primary, #ffffff));--aside-panel-shadow:0 10px 40px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.06);--aside-panel-text:var(--text-primary, #0f172a);--aside-close-btn-color:var(--text-muted, #64748b);--aside-close-btn-hover-color:var(--text-primary, #0f172a);--aside-close-btn-hover-bg:var(--bg-secondary, #f1f5f9);--aside-close-btn-focus:var(--color-primary, #10b981);--aside-resize-handle-hover:var(--color-primary, #10b981);--aside-resize-handle-active:var(--color-primary-hover, #2563eb);--aside-panel-padding:32px;--aside-transition-duration:0.3s;--aside-ease:cubic-bezier(0.65, 0, 0.35, 1);--aside-z-index-overlay:1500;--aside-z-index-panel:1501;--aside-mini-size:64px}.aside-container{display:block}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--aside-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);z-index:var(--aside-z-index-overlay)}.overlay.visible{opacity:1;visibility:visible}.panel{position:fixed;background-color:var(--aside-panel-bg);color:var(--aside-panel-text);box-shadow:var(--aside-panel-shadow);transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);z-index:var(--aside-z-index-panel);display:flex;flex-direction:column;overflow:hidden;visibility:hidden;pointer-events:none;transform-style:preserve-3d;--aside-dir-transform:translate(0, 0);transform:var(--aside-center-transform, none) var(--aside-dir-transform)}.panel-left{--aside-dir-transform:translateX(-110%)}.panel-right{--aside-dir-transform:translateX(110%)}.panel-top{--aside-dir-transform:translateY(-110%)}.panel-bottom{--aside-dir-transform:translateY(110%)}.panel.open{visibility:visible;pointer-events:auto;--aside-dir-transform:translate(0, 0)}.panel.maximized{width:90% !important;height:90% !important;border-radius:16px;z-index:1550;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5);margin:1%}.panel.maximized .resize-handle{display:none !important}.panel.resizing{transition:none !important;user-select:none}.parallax-active{transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease)}.panel.mini .panel-header,.panel.mini .panel-footer,.panel.mini .toolbar-right,.panel.mini .close-btn{display:none !important}.panel.mini .panel-content{opacity:0.1;filter:blur(4px);pointer-events:none}.panel-header-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0, 0, 0, 0.02);border-bottom:1px solid var(--border-subtle, rgba(0, 0, 0, 0.05))}.panel-header-toolbar .toolbar-left,.panel-header-toolbar .toolbar-right{display:flex;align-items:center;gap:8px}.toolbar-btn{background:transparent;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--aside-close-btn-color);transition:all 0.2s ease}.toolbar-btn:hover{background:var(--aside-close-btn-hover-bg);color:var(--aside-close-btn-hover-color)}.voice-btn.active{color:var(--color-danger, #ef4444);animation:voice-breathing 1.5s infinite ease-in-out}.panel-header{padding:24px var(--aside-panel-padding);border-bottom:1px solid var(--border-subtle, #e2e8f0);position:relative}.panel-header .header-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.panel-header .header-badge{background:var(--border-subtle, #e2e8f0);color:var(--color-primary, #475569);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.panel-header .header-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(0, 0, 0, 0.05)}.panel-header .header-progress .progress-bar{height:100%;background:var(--color-primary, #10b981);transition:width 0.3s ease}.theme-zenith .header-badge{background:rgba(var(--color-success-rgb, 16, 185, 129), 0.2);color:var(--color-success, #10b981)}.theme-zenith .header-progress .progress-bar{background:var(--color-success, #10b981);box-shadow:0 0 5px var(--color-success, #10b981)}.panel-content{flex:1;padding:var(--aside-panel-padding);overflow-y:auto}.panel-footer{padding:20px var(--aside-panel-padding);border-top:1px solid var(--border-subtle, #e2e8f0);background-color:var(--bg-primary, #f8fafc)}.variant-glass .panel,.theme-glass .panel{background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.3)}.variant-glass.panel-left{border-right:1px solid rgba(255, 255, 255, 0.3)}.variant-floating .panel{border-radius:16px;border:1px solid rgba(0, 0, 0, 0.08);box-shadow:0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 15px -5px rgba(0, 0, 0, 0.1)}.variant-floating .panel.panel-right:not(.open){--aside-dir-transform:translateX(calc(100% + 80px))}.variant-floating .panel.panel-left:not(.open){--aside-dir-transform:translateX(calc(-100% - 80px))}.variant-floating .panel.panel-top:not(.open){--aside-dir-transform:translateY(calc(-100% - 80px))}.variant-floating .panel.panel-bottom:not(.open){--aside-dir-transform:translateY(calc(100% + 80px))}.theme-radiant .panel{background:linear-gradient(135deg, var(--bg-primary, #ffffff), var(--bg-primary, #f8fafc));border:2px solid transparent;background-clip:padding-box;box-shadow:0 20px 50px rgba(0, 0, 0, 0.15)}.theme-zenith .panel{background:var(--bg-secondary, #0f172a);color:var(--bg-primary, #ffffff);border-color:var(--bg-primary, var(--border-subtle, #1e293b))}.theme-zenith .panel .panel-header,.theme-zenith .panel .panel-footer{border-color:var(--bg-primary, var(--border-subtle, #1e293b));background:var(--bg-primary, var(--border-subtle, #1e293b))}.resize-handle{position:absolute;background-color:transparent;z-index:1510;transition:background-color 0.2s ease, opacity 0.2s ease;display:flex;align-items:center;justify-content:center}.resize-handle:hover{background-color:var(--aside-resize-handle-hover)}.resize-indicator{display:flex;gap:2px;pointer-events:none;opacity:0.5}.resize-handle:hover .resize-indicator{opacity:1}.resize-handle-left,.resize-handle-right{flex-direction:column}.resize-handle-left .resize-indicator,.resize-handle-right .resize-indicator{flex-direction:column}.resize-indicator span{width:3px;height:3px;background-color:currentColor;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.2)}.resize-handle-left{right:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-right{left:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-top{bottom:0;left:0;right:0;height:6px;cursor:ns-resize}.resize-handle-bottom{top:0;left:0;right:0;height:6px;cursor:ns-resize}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center;z-index:1600;backdrop-filter:blur(4px);overflow:hidden}.loading-overlay::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent);animation:aside-shimmer 2s infinite}.spinner{width:48px;height:48px;border:4px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:aside-spin 1s infinite linear}@keyframes aside-spin{to{transform:rotate(360deg)}}@keyframes aside-shimmer{100%{left:200%}}.theme-zenith .panel.open{animation:zenith-heartbeat 4s ease-in-out infinite}@keyframes zenith-heartbeat{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-success-rgb, 16, 185, 129), 0)}50%{box-shadow:0 0 20px 2px rgba(var(--color-success-rgb, 16, 185, 129), 0.2)}}@media (prefers-color-scheme: dark){:host{--aside-panel-bg:var(--bg-primary, #1e293b);--aside-panel-text:var(--text-primary, #f1f5f9)}.panel-header,.panel-footer{border-color:var(--color-primary, #334155)}.panel-footer{background:var(--bg-secondary, #0f172a)}.loading-overlay{background:rgba(15, 23, 42, 0.7)}}.aside-container.animation-slide-in-out .panel{opacity:1}.aside-container.animation-fade .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:translate(0, 0) !important}.aside-container.animation-fade .panel.open{opacity:1;visibility:visible}.aside-container.animation-scale .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:scale(0.95)}.aside-container.animation-scale .panel.open{opacity:1;visibility:visible;--aside-dir-transform:scale(1)}.variant-none .panel,.theme-none .panel{background:transparent !important;box-shadow:none !important;border:none !important}'}},[769,"ui-aside-panel",{open:[1540],direction:[1],size:[1],mini:[1540],miniSize:[1,"mini-size"],pinned:[4],variant:[1],theme:[1],haptic:[4],enableParallax:[4,"enable-parallax"],enableVoiceControl:[4,"enable-voice-control"],syncGroup:[1,"sync-group"],maximized:[1540],autoMini:[4,"auto-mini"],toggleShortcut:[1,"toggle-shortcut"],showActions:[4,"show-actions"],actionItems:[1,"action-items"],stackOffset:[2,"stack-offset"],scope:[1],closeable:[4],closeOnOverlayClick:[4,"close-on-overlay-click"],showOverlay:[4,"show-overlay"],closeOnEscape:[4,"close-on-escape"],resizable:[4],resizeHandleColor:[1,"resize-handle-color"],showResizeIndicator:[4,"show-resize-indicator"],minSize:[2,"min-size"],rtl:[4],maxSize:[2,"max-size"],backdropBlur:[1,"backdrop-blur"],transitionDuration:[1,"transition-duration"],animationType:[1,"animation-type"],loading:[4],progress:[2],badge:[1],persistKey:[1,"persist-key"],floatingOffset:[1,"floating-offset"],secondarySize:[1,"secondary-size"],floatingAlign:[1,"floating-align"],backgroundColor:[1,"background-color"],currentSize:[32],isResizing:[32],isListening:[32],mouseRotation:[32],toggleMaximize:[64],toggle:[64],toggleMini:[64],show:[64],hide:[64],initVoice:[64]},[[9,"resize","handleWindowResize"],[8,"asideRemoteState","handleRemoteSync"],[8,"keydown","handleKeyDown"]],{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler:0}]}]),p=h,b=function(){"undefined"!=typeof customElements&&["ui-aside-panel","ui-badge","ui-button","ui-context-menu","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-aside-panel":customElements.get(o(e))||customElements.define(o(e),h);break;case"ui-badge":customElements.get(o(e))||r();break;case"ui-button":customElements.get(o(e))||n();break;case"ui-context-menu":customElements.get(o(e))||d();break;case"ui-icon":customElements.get(o(e))||l();break;case"ui-loader":customElements.get(o(e))||c()}}))};export{p as UiAsidePanel,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as o,d as s}from"./badge.js";const a=o,r=s;export{a as UiBadge,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as r,HTMLElement as e,h as a,Host as i,transformTag as t}from"@stencil/core/internal/client";import{d as o}from"./icon.js";import{d as n}from"./loader.js";const d=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow()}label;href;icon;iconLibrary="default";active=!1;disabled=!1;badge;size="md";render(){const r={"breadcrumb-item":!0,active:this.active,disabled:this.disabled,["size-"+this.size]:!0},e=a("span",{key:"
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as e,h as a,Host as i,transformTag as t}from"@stencil/core/internal/client";import{d as o}from"./icon.js";import{d as n}from"./loader.js";const d=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow()}label;href;icon;iconLibrary="default";active=!1;disabled=!1;badge;size="md";render(){const r={"breadcrumb-item":!0,active:this.active,disabled:this.disabled,["size-"+this.size]:!0},e=a("span",{key:"05f34f83d3f1bf069dce5942c543969be61213b9",class:"breadcrumb-content"},this.icon&&a("span",{key:"a7f149671e841edc15caafb4c3f9bafc71a7271a",class:"breadcrumb-icon"},a("ui-icon",{key:"c3c58f5cd81851e138fbce645f57bfff0dc1cbb8",name:this.icon,library:this.iconLibrary,size:"1.1em"})),a("span",{key:"cf7f46a53174ffebe4d51288164b9ffc798fb428",class:"breadcrumb-label"},a("slot",{key:"d93e29958c18269d8fdb2c9e3fc46554cf191ed7"},this.label)),void 0!==this.badge&&a("span",{key:"96f4c6783184aedb03161046018c179a089c94b5",class:"breadcrumb-badge"},this.badge));return a(i,{key:"db0123ea2494998e20fa67557bdc2ea374811767",class:"breadcrumb-item-wrapper"},!this.href||this.disabled||this.active?a("span",{class:r,"aria-current":this.active?"page":void 0},e):a("a",{href:this.href,class:r,"aria-current":this.active?"page":void 0},e))}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:block}.breadcrumb{display:flex;align-items:center}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}.breadcrumb-item-wrapper{display:flex;align-items:center;gap:4px}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-muted, #64748b);text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-weight:500;cursor:pointer;background-color:transparent}.breadcrumb-item.size-sm{padding:4px 8px;font-size:12px;gap:4px}.breadcrumb-item.size-md{padding:6px 12px;font-size:14px;gap:6px}.breadcrumb-item.size-lg{padding:8px 16px;font-size:16px;gap:8px}.breadcrumb-item:hover:not(.active):not(.disabled){color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff)}.breadcrumb-item.active{color:var(--text-primary, #1e293b);font-weight:600;cursor:default;background-color:var(--bg-secondary, #f1f5f9)}.breadcrumb-item.disabled{color:var(--color-primary, #cbd5e1);cursor:not-allowed;opacity:0.6}.breadcrumb-item.home{padding:6px 10px}.breadcrumb-content{display:flex;align-items:center;gap:inherit}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1em;line-height:1}.breadcrumb-icon svg{width:1em;height:1em;fill:currentColor}.breadcrumb-label{white-space:nowrap}.breadcrumb-separator{display:inline-flex;align-items:center;color:var(--color-primary, #cbd5e1);font-size:0.875em;user-select:none;padding:0 4px}.breadcrumb-separator svg{width:1em;height:1em;fill:currentColor}.breadcrumb-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;margin-left:4px}.badge-neutral{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #475569)}.badge-primary{background:var(--bg-primary, #dbeafe);color:var(--color-primary, #1e40af)}.badge-success{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534)}.badge-warning{background:var(--bg-primary, #fef9c3);color:var(--color-danger, #854d0e)}.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.ellipsis-wrapper{position:relative}.breadcrumb-ellipsis-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:4px 8px;color:var(--color-primary, #94a3b8);cursor:pointer;border-radius:4px;transition:all 0.2s}.breadcrumb-ellipsis-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.breadcrumb-dropdown{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);border:1px solid var(--border-subtle, #e2e8f0);margin-top:8px;padding:4px;animation:dropdownIn 0.2s ease-out}@keyframes dropdownIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-list{list-style:none;margin:0;padding:0}.dropdown-item a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--color-primary, #475569);text-decoration:none;font-size:13px;font-weight:500;border-radius:6px;transition:background 0.2s}.dropdown-item a:hover{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #10b981)}.dropdown-item .item-icon{font-size:14px}.breadcrumb-variant-pills .breadcrumb-item{background:var(--bg-secondary, #f1f5f9);border-radius:999px;margin:0 2px}.breadcrumb-variant-pills .breadcrumb-item:hover{background:var(--bg-primary, #e2e8f0)}.breadcrumb-variant-pills .breadcrumb-item.active{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.breadcrumb-variant-glass{background:rgba(15, 23, 42, 0.3);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item{color:rgba(255, 255, 255, 0.7)}.breadcrumb-variant-glass .breadcrumb-item:hover{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item.active{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.2)}.breadcrumb-variant-glass .breadcrumb-separator{color:rgba(255, 255, 255, 0.3)}@media (max-width: 640px){.breadcrumb-item.size-md{padding:4px 8px;font-size:12px}.breadcrumb-item.size-lg{padding:6px 12px;font-size:14px}}"}},[769,"ui-breadcrumb-item",{label:[1],href:[1],icon:[1],iconLibrary:[1,"icon-library"],active:[4],disabled:[4],badge:[1],size:[1]}]),c=d,b=function(){"undefined"!=typeof customElements&&["ui-breadcrumb-item","ui-icon","ui-loader"].forEach((r=>{switch(r){case"ui-breadcrumb-item":customElements.get(t(r))||customElements.define(t(r),d);break;case"ui-icon":customElements.get(t(r))||o();break;case"ui-loader":customElements.get(t(r))||n()}}))};export{c as UiBreadcrumbItem,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as i,Host as t,transformTag as o}from"@stencil/core/internal/client";import{d as s,a as n}from"./badge.js";import{d as c}from"./icon.js";import{d}from"./loader.js";const b=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.breadcrumbClick=a(this,"breadcrumbClick",7)}get el(){return this}isDropdownOpen=!1;items=[];separator="/";separatorIcon;maxItems=0;showHome=!1;homeIcon="🏠";size="md";iconLibrary="default";separatorIconLibrary="default";variant="default";structuredData=!1;baseUrl="";breadcrumbClick;parseItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(r){return console.error("Failed to parse items JSON:",r),[]}return this.items}handleItemClick=(r,e)=>{r.disabled||r.active?e.preventDefault():this.breadcrumbClick.emit(r)};toggleDropdown=r=>{r.stopPropagation(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen?document.addEventListener("click",this.closeDropdown):document.removeEventListener("click",this.closeDropdown)};closeDropdown=()=>{this.isDropdownOpen=!1,document.removeEventListener("click",this.closeDropdown)};disconnectedCallback(){document.removeEventListener("click",this.closeDropdown)}getItems(){const r=this.parseItems();return r.length>0?r:Array.from(this.el.querySelectorAll("ui-breadcrumb-item")).map((r=>({label:r.label||r.textContent,href:r.href,icon:r.icon,iconLibrary:r.iconLibrary,active:r.active,disabled:r.disabled,badge:r.badge})))}renderStructuredData(r){if(!this.structuredData)return null;const e={"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r.map(((r,e)=>({"@type":"ListItem",position:e+1,name:r.label,item:r.href?r.href.startsWith("http")?r.href:`${this.baseUrl}${r.href}`:void 0})))};return i("script",{type:"application/ld+json",innerHTML:JSON.stringify(e)})}renderSeparator(r){return i("li",{class:"breadcrumb-separator",key:r,"aria-hidden":"true"},i("slot",{name:"separator"},this.separatorIcon?i("ui-icon",{name:this.separatorIcon,library:this.iconLibrary,size:"1.1em"}):this.separator))}renderItem(r,e){const a={"breadcrumb-item":!0,active:!!r.active,disabled:!!r.disabled,["size-"+this.size]:!0},t=i("span",{class:"breadcrumb-content"},r.icon&&i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"breadcrumb-label"},r.label),void 0!==r.badge&&i("span",{class:"breadcrumb-badge badge-"+(r.badgeVariant||"neutral")},r.badge)),o=!r.href||r.disabled||r.active?i("span",{class:a,"aria-current":r.active?"page":void 0},t):i("a",{href:r.href,class:a,onClick:e=>this.handleItemClick(r,e),"aria-current":r.active?"page":void 0},t);return i("li",{key:"item-"+e,class:"breadcrumb-item-wrapper"},o)}renderHome(){return i("li",{class:"breadcrumb-item-wrapper"},i("a",{href:"/",class:"breadcrumb-item home size-"+this.size},i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:this.homeIcon,library:this.iconLibrary,size:"1.2em"}))))}render(){const r=this.getItems(),e=[];if(this.showHome&&(e.push(this.renderHome()),r.length>0&&e.push(this.renderSeparator("home-sep"))),this.maxItems>0&&r.length>this.maxItems){const a=Math.max(1,this.maxItems-2),t=r.slice(1,r.length-a);e.push(this.renderItem(r[0],0)),e.push(this.renderSeparator("sep-0")),e.push(i("li",{key:"ellipsis",class:"breadcrumb-item-wrapper ellipsis-wrapper "+(this.isDropdownOpen?"is-open":"")},i("ui-button",{variant:"ghost",onClick:this.toggleDropdown,ariaLabel:"Show hidden breadcrumbs",size:"sm",label:"..."}),this.isDropdownOpen&&i("div",{class:"breadcrumb-dropdown"},i("ul",{class:"dropdown-list"},t.map(((r,e)=>i("li",{key:"collapsed-"+e,class:"dropdown-item"},i("a",{href:r.href||"#",onClick:e=>this.handleItemClick(r,e)},r.icon&&i("span",{class:"item-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1em"})),i("span",{class:"item-label"},r.label))))))))),e.push(this.renderSeparator("sep-ellipsis"));const o=r.slice(-a);o.forEach(((i,t)=>{const s=r.length-a+t;e.push(this.renderItem(i,s)),t<o.length-1&&e.push(this.renderSeparator("sep-"+s))}))}else r.forEach(((a,i)=>{e.push(this.renderItem(a,i)),i<r.length-1&&e.push(this.renderSeparator("sep-"+i))}));const a=["breadcrumb","breadcrumb-"+this.size,"breadcrumb-variant-"+this.variant].join(" ");return i(t,{key:"cc58f67d87e5fa59d510a9eaca3fa6bbb165e790","aria-label":"Breadcrumb"},this.renderStructuredData(r),i("nav",{key:"b88aceaa493445a9cc47f9e72fb40d84f57ceefd",class:a},i("ol",{key:"fecb2561f7b18d68971352a0096e4bb855813306",class:"breadcrumb-list"},e,i("slot",{key:"352d383a94182b58709fd670f75c11f0a4e53b99"}))))}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:block}.breadcrumb{display:flex;align-items:center}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}.breadcrumb-item-wrapper{display:flex;align-items:center;gap:4px}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-muted, #64748b);text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-weight:500;cursor:pointer;background-color:transparent}.breadcrumb-item.size-sm{padding:4px 8px;font-size:12px;gap:4px}.breadcrumb-item.size-md{padding:6px 12px;font-size:14px;gap:6px}.breadcrumb-item.size-lg{padding:8px 16px;font-size:16px;gap:8px}.breadcrumb-item:hover:not(.active):not(.disabled){color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff)}.breadcrumb-item.active{color:var(--text-primary, #1e293b);font-weight:600;cursor:default;background-color:var(--bg-secondary, #f1f5f9)}.breadcrumb-item.disabled{color:var(--color-primary, #cbd5e1);cursor:not-allowed;opacity:0.6}.breadcrumb-item.home{padding:6px 10px}.breadcrumb-content{display:flex;align-items:center;gap:inherit}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1em;line-height:1}.breadcrumb-icon svg{width:1em;height:1em;fill:currentColor}.breadcrumb-label{white-space:nowrap}.breadcrumb-separator{display:inline-flex;align-items:center;color:var(--color-primary, #cbd5e1);font-size:0.875em;user-select:none;padding:0 4px}.breadcrumb-separator svg{width:1em;height:1em;fill:currentColor}.breadcrumb-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;margin-left:4px}.badge-neutral{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #475569)}.badge-primary{background:var(--bg-primary, #dbeafe);color:var(--color-primary, #1e40af)}.badge-success{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534)}.badge-warning{background:var(--bg-primary, #fef9c3);color:var(--color-danger, #854d0e)}.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.ellipsis-wrapper{position:relative}.breadcrumb-ellipsis-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:4px 8px;color:var(--color-primary, #94a3b8);cursor:pointer;border-radius:4px;transition:all 0.2s}.breadcrumb-ellipsis-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.breadcrumb-dropdown{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);border:1px solid var(--border-subtle, #e2e8f0);margin-top:8px;padding:4px;animation:dropdownIn 0.2s ease-out}@keyframes dropdownIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-list{list-style:none;margin:0;padding:0}.dropdown-item a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--color-primary, #475569);text-decoration:none;font-size:13px;font-weight:500;border-radius:6px;transition:background 0.2s}.dropdown-item a:hover{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #10b981)}.dropdown-item .item-icon{font-size:14px}.breadcrumb-variant-pills .breadcrumb-item{background:var(--bg-secondary, #f1f5f9);border-radius:999px;margin:0 2px}.breadcrumb-variant-pills .breadcrumb-item:hover{background:var(--bg-primary, #e2e8f0)}.breadcrumb-variant-pills .breadcrumb-item.active{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.breadcrumb-variant-glass{background:rgba(15, 23, 42, 0.3);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item{color:rgba(255, 255, 255, 0.7)}.breadcrumb-variant-glass .breadcrumb-item:hover{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item.active{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.2)}.breadcrumb-variant-glass .breadcrumb-separator{color:rgba(255, 255, 255, 0.3)}@media (max-width: 640px){.breadcrumb-item.size-md{padding:4px 8px;font-size:12px}.breadcrumb-item.size-lg{padding:6px 12px;font-size:14px}}"}},[769,"ui-breadcrumb",{items:[1],separator:[1],separatorIcon:[1,"separator-icon"],maxItems:[2,"max-items"],showHome:[4,"show-home"],homeIcon:[1,"home-icon"],size:[1],iconLibrary:[1,"icon-library"],separatorIconLibrary:[1,"separator-icon-library"],variant:[1],structuredData:[4,"structured-data"],baseUrl:[1,"base-url"],isDropdownOpen:[32]}]),p=b,l=function(){"undefined"!=typeof customElements&&["ui-breadcrumb","ui-badge","ui-button","ui-icon","ui-loader"].forEach((r=>{switch(r){case"ui-breadcrumb":customElements.get(o(r))||customElements.define(o(r),b);break;case"ui-badge":customElements.get(o(r))||n();break;case"ui-button":customElements.get(o(r))||s();break;case"ui-icon":customElements.get(o(r))||c();break;case"ui-loader":customElements.get(o(r))||d()}}))};export{p as UiBreadcrumb,l as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as i,Host as t,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./badge.js";import{d as n}from"./button.js";import{d as c}from"./icon.js";import{d}from"./loader.js";const b=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.breadcrumbClick=a(this,"breadcrumbClick",7)}get el(){return this}isDropdownOpen=!1;items=[];separator="/";separatorIcon;maxItems=0;showHome=!1;homeIcon="🏠";size="md";iconLibrary="default";separatorIconLibrary="default";variant="default";structuredData=!1;baseUrl="";breadcrumbClick;parseItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(r){return console.error("Failed to parse items JSON:",r),[]}return this.items}handleItemClick=(r,e)=>{r.disabled||r.active?e.preventDefault():this.breadcrumbClick.emit(r)};toggleDropdown=r=>{r.stopPropagation(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen?document.addEventListener("click",this.closeDropdown):document.removeEventListener("click",this.closeDropdown)};closeDropdown=()=>{this.isDropdownOpen=!1,document.removeEventListener("click",this.closeDropdown)};disconnectedCallback(){document.removeEventListener("click",this.closeDropdown)}getItems(){const r=this.parseItems();return r.length>0?r:Array.from(this.el.querySelectorAll("ui-breadcrumb-item")).map((r=>({label:r.label||r.textContent,href:r.href,icon:r.icon,iconLibrary:r.iconLibrary,active:r.active,disabled:r.disabled,badge:r.badge})))}renderStructuredData(r){if(!this.structuredData)return null;const e={"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r.map(((r,e)=>({"@type":"ListItem",position:e+1,name:r.label,item:r.href?r.href.startsWith("http")?r.href:`${this.baseUrl}${r.href}`:void 0})))};return i("script",{type:"application/ld+json",innerHTML:JSON.stringify(e)})}renderSeparator(r){return i("li",{class:"breadcrumb-separator",key:r,"aria-hidden":"true"},i("slot",{name:"separator"},this.separatorIcon?i("ui-icon",{name:this.separatorIcon,library:this.iconLibrary,size:"1.1em"}):this.separator))}renderItem(r,e){const a={"breadcrumb-item":!0,active:!!r.active,disabled:!!r.disabled,["size-"+this.size]:!0},t=i("span",{class:"breadcrumb-content"},r.icon&&i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"breadcrumb-label"},r.label),void 0!==r.badge&&i("span",{class:"breadcrumb-badge badge-"+(r.badgeVariant||"neutral")},r.badge)),o=!r.href||r.disabled||r.active?i("span",{class:a,"aria-current":r.active?"page":void 0},t):i("a",{href:r.href,class:a,onClick:e=>this.handleItemClick(r,e),"aria-current":r.active?"page":void 0},t);return i("li",{key:"item-"+e,class:"breadcrumb-item-wrapper"},o)}renderHome(){return i("li",{class:"breadcrumb-item-wrapper"},i("a",{href:"/",class:"breadcrumb-item home size-"+this.size},i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:this.homeIcon,library:this.iconLibrary,size:"1.2em"}))))}render(){const r=this.getItems(),e=[];if(this.showHome&&(e.push(this.renderHome()),r.length>0&&e.push(this.renderSeparator("home-sep"))),this.maxItems>0&&r.length>this.maxItems){const a=Math.max(1,this.maxItems-2),t=r.slice(1,r.length-a);e.push(this.renderItem(r[0],0)),e.push(this.renderSeparator("sep-0")),e.push(i("li",{key:"ellipsis",class:"breadcrumb-item-wrapper ellipsis-wrapper "+(this.isDropdownOpen?"is-open":"")},i("ui-button",{variant:"ghost",onClick:this.toggleDropdown,ariaLabel:"Show hidden breadcrumbs",size:"sm",label:"..."}),this.isDropdownOpen&&i("div",{class:"breadcrumb-dropdown"},i("ul",{class:"dropdown-list"},t.map(((r,e)=>i("li",{key:"collapsed-"+e,class:"dropdown-item"},i("a",{href:r.href||"#",onClick:e=>this.handleItemClick(r,e)},r.icon&&i("span",{class:"item-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1em"})),i("span",{class:"item-label"},r.label))))))))),e.push(this.renderSeparator("sep-ellipsis"));const o=r.slice(-a);o.forEach(((i,t)=>{const s=r.length-a+t;e.push(this.renderItem(i,s)),t<o.length-1&&e.push(this.renderSeparator("sep-"+s))}))}else r.forEach(((a,i)=>{e.push(this.renderItem(a,i)),i<r.length-1&&e.push(this.renderSeparator("sep-"+i))}));const a=["breadcrumb","breadcrumb-"+this.size,"breadcrumb-variant-"+this.variant].join(" ");return i(t,{key:"cc58f67d87e5fa59d510a9eaca3fa6bbb165e790","aria-label":"Breadcrumb"},this.renderStructuredData(r),i("nav",{key:"b88aceaa493445a9cc47f9e72fb40d84f57ceefd",class:a},i("ol",{key:"fecb2561f7b18d68971352a0096e4bb855813306",class:"breadcrumb-list"},e,i("slot",{key:"352d383a94182b58709fd670f75c11f0a4e53b99"}))))}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:block}.breadcrumb{display:flex;align-items:center}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}.breadcrumb-item-wrapper{display:flex;align-items:center;gap:4px}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-muted, #64748b);text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-weight:500;cursor:pointer;background-color:transparent}.breadcrumb-item.size-sm{padding:4px 8px;font-size:12px;gap:4px}.breadcrumb-item.size-md{padding:6px 12px;font-size:14px;gap:6px}.breadcrumb-item.size-lg{padding:8px 16px;font-size:16px;gap:8px}.breadcrumb-item:hover:not(.active):not(.disabled){color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff)}.breadcrumb-item.active{color:var(--text-primary, #1e293b);font-weight:600;cursor:default;background-color:var(--bg-secondary, #f1f5f9)}.breadcrumb-item.disabled{color:var(--color-primary, #cbd5e1);cursor:not-allowed;opacity:0.6}.breadcrumb-item.home{padding:6px 10px}.breadcrumb-content{display:flex;align-items:center;gap:inherit}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1em;line-height:1}.breadcrumb-icon svg{width:1em;height:1em;fill:currentColor}.breadcrumb-label{white-space:nowrap}.breadcrumb-separator{display:inline-flex;align-items:center;color:var(--color-primary, #cbd5e1);font-size:0.875em;user-select:none;padding:0 4px}.breadcrumb-separator svg{width:1em;height:1em;fill:currentColor}.breadcrumb-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;margin-left:4px}.badge-neutral{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #475569)}.badge-primary{background:var(--bg-primary, #dbeafe);color:var(--color-primary, #1e40af)}.badge-success{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534)}.badge-warning{background:var(--bg-primary, #fef9c3);color:var(--color-danger, #854d0e)}.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.ellipsis-wrapper{position:relative}.breadcrumb-ellipsis-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:4px 8px;color:var(--color-primary, #94a3b8);cursor:pointer;border-radius:4px;transition:all 0.2s}.breadcrumb-ellipsis-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.breadcrumb-dropdown{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);border:1px solid var(--border-subtle, #e2e8f0);margin-top:8px;padding:4px;animation:dropdownIn 0.2s ease-out}@keyframes dropdownIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-list{list-style:none;margin:0;padding:0}.dropdown-item a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--color-primary, #475569);text-decoration:none;font-size:13px;font-weight:500;border-radius:6px;transition:background 0.2s}.dropdown-item a:hover{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #10b981)}.dropdown-item .item-icon{font-size:14px}.breadcrumb-variant-pills .breadcrumb-item{background:var(--bg-secondary, #f1f5f9);border-radius:999px;margin:0 2px}.breadcrumb-variant-pills .breadcrumb-item:hover{background:var(--bg-primary, #e2e8f0)}.breadcrumb-variant-pills .breadcrumb-item.active{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.breadcrumb-variant-glass{background:rgba(15, 23, 42, 0.3);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item{color:rgba(255, 255, 255, 0.7)}.breadcrumb-variant-glass .breadcrumb-item:hover{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item.active{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.2)}.breadcrumb-variant-glass .breadcrumb-separator{color:rgba(255, 255, 255, 0.3)}@media (max-width: 640px){.breadcrumb-item.size-md{padding:4px 8px;font-size:12px}.breadcrumb-item.size-lg{padding:6px 12px;font-size:14px}}"}},[769,"ui-breadcrumb",{items:[1],separator:[1],separatorIcon:[1,"separator-icon"],maxItems:[2,"max-items"],showHome:[4,"show-home"],homeIcon:[1,"home-icon"],size:[1],iconLibrary:[1,"icon-library"],separatorIconLibrary:[1,"separator-icon-library"],variant:[1],structuredData:[4,"structured-data"],baseUrl:[1,"base-url"],isDropdownOpen:[32]}]),p=b,l=function(){"undefined"!=typeof customElements&&["ui-breadcrumb","ui-badge","ui-button","ui-icon","ui-loader"].forEach((r=>{switch(r){case"ui-breadcrumb":customElements.get(o(r))||customElements.define(o(r),b);break;case"ui-badge":customElements.get(o(r))||s();break;case"ui-button":customElements.get(o(r))||n();break;case"ui-icon":customElements.get(o(r))||c();break;case"ui-loader":customElements.get(o(r))||d()}}))};export{p as UiBreadcrumb,l as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as i,createEvent as o,h as e,transformTag as r}from"@stencil/core/internal/client";import{d as n,a as s}from"./badge.js";import{d as a}from"./icon.js";import{d as l}from"./input.js";import{d as h}from"./loader.js";const p=t(class extends i{get el(){return this}internals;focusFrameId=null;constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonToggleGroupChange=o(this,"buttonToggleGroupChange",7),this.buttonToggleGroupAction=o(this,"buttonToggleGroupAction",7),this.buttonToggleGroupBatch=o(this,"buttonToggleGroupBatch",7),this.buttonToggleGroupSearch=o(this,"buttonToggleGroupSearch",7),this.buttonToggleGroupExport=o(this,"buttonToggleGroupExport",7),this.buttonToggleGroupImport=o(this,"buttonToggleGroupImport",7),this.buttonToggleGroupAnalytics=o(this,"buttonToggleGroupAnalytics",7),this.internals=this.el.attachInternals()}value="";name="";disabled=!1;readonly=!1;required=!1;invalid=!1;label="";helperText="";errorMessage="";orientation="horizontal";size="md";color="primary";variant="soft";options=[];fullWidth=!1;iconPosition="left";iconLibrary="default";library;iconOnly=!1;mode="segmented";buttonAction;buttonActionLabel="Action";keepButtonLabel=!1;customContent=!1;loading=!1;shape="rounded";multiSelect=!1;batchActions=!1;searchEnabled=!1;exportEnabled=!1;importEnabled=!1;analyticsEnabled=!1;advancedTheme="";reveal="none";revealDelay=0;revealStagger=50;magneticIndicator=!1;rtl=!1;wrap=!1;width="";persistKey="";buttons=[];isDropdownOpen=!1;searchQuery="";selectedValues=[];analytics={};focusIndex=-1;ariaLive="";selectionIndicatorRef;resizeObserver;mutationObserver;buttonToggleGroupChange;buttonToggleGroupAction;buttonToggleGroupBatch;buttonToggleGroupSearch;buttonToggleGroupExport;buttonToggleGroupImport;buttonToggleGroupAnalytics;componentWillLoad(){if(this.normalizeProps(),this.updateOptions(),this.syncButtons(),this.updateOptionsFromChildren(),this.persistKey)try{const t=localStorage.getItem(this.persistKey);null!==t&&(this.value=JSON.parse(t))}catch{}}componentDidLoad(){"dropdown"===this.mode&&document.addEventListener("click",this.handleClickOutside),this.el.addEventListener("keydown",this.handleKeyDown),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateIndicator())),this.resizeObserver.observe(this.el)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updateOptionsFromChildren())),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0})),setTimeout((()=>this.updateIndicator()),100)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),this.el.removeEventListener("keydown",this.handleKeyDown),null!==this.focusFrameId&&(cancelAnimationFrame(this.focusFrameId),this.focusFrameId=null),this.resizeObserver&&this.resizeObserver.disconnect(),this.mutationObserver&&this.mutationObserver.disconnect()}handleMouseMove=t=>{if(!this.magneticIndicator||!this.selectionIndicatorRef||"dropdown"===this.mode||this.multiSelect)return;const i=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).find((t=>t.value===this.value));if(!i)return;const o=i.getBoundingClientRect(),e=o.left+o.width/2,r=o.top+o.height/2;if(Math.hypot(t.clientX-e,t.clientY-r)<150){const o=4;this.selectionIndicatorRef.style.transform=`translate(${i.offsetLeft+(t.clientX-e)/8+o}px, ${i.offsetTop+(t.clientY-r)/8+o}px) scale(1.02)`}else{const t=4;this.selectionIndicatorRef.style.transform=`translate(${i.offsetLeft+t}px, ${i.offsetTop+t}px) scale(1)`}};updateIndicator(){this.selectionIndicatorRef&&"dropdown"!==this.mode&&!this.multiSelect&&requestAnimationFrame((()=>{const t=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]),i=t.find((t=>t.value===this.value));if(i){const o=i.offsetLeft,e=i.offsetTop,r=i.offsetHeight,n=4;this.selectionIndicatorRef.style.width=i.offsetWidth-2*n+"px",this.selectionIndicatorRef.style.height=r-2*n+"px",this.selectionIndicatorRef.style.transform=`translate(${o+n}px, ${e+n}px)`,this.selectionIndicatorRef.style.opacity="1",t.forEach((t=>{t.style.setProperty("--hide-button-selection","1")}))}else this.selectionIndicatorRef.style.opacity="0",t.forEach((t=>{t.style.setProperty("--hide-button-selection","0")}))}))}handleClickOutside=t=>{this.el.contains(t.target)||(this.isDropdownOpen=!1)};componentDidUpdate(){this.syncButtons(),this.updateIndicator()}watchValue(){this.syncButtons(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+(Array.isArray(this.value)?this.value.join(", "):this.value),this.internals.setFormValue(Array.isArray(this.value)?this.value.join(","):this.value||"")}handleColorChange(){this.normalizeProps()}handleOptionsChange(){this.updateOptions()}normalizeProps(){try{"string"==typeof this.color&&this.color.startsWith("{")&&(this.color=JSON.parse(this.color)),"string"==typeof this.options&&(this.buttons=JSON.parse(this.options))}catch(t){console.warn("Failed to parse complex button-toggle-group prop",t)}}updateOptions(){if("string"==typeof this.options)try{this.buttons=JSON.parse(this.options)}catch{console.error("Invalid options JSON"),this.buttons=[]}else Array.isArray(this.options)&&this.options.length>0?this.buttons=[...this.options]:this.updateOptionsFromChildren()}updateOptionsFromChildren(){const t=Array.from(this.el.children);if(0===t.length)return;const i=t.filter((t=>"ui-button-toggle"===t.tagName.toLowerCase()||"ui-button"===t.tagName.toLowerCase())).map(((t,i)=>{const o=t;return{value:o.value||t.getAttribute("value")||"opt-"+i,label:o.label||t.getAttribute("label")||t.textContent?.trim(),icon:o.icon||t.getAttribute("icon"),disabled:o.disabled||t.hasAttribute("disabled"),description:o.description||t.getAttribute("description"),descriptionPosition:o.descriptionPosition||t.getAttribute("description-position"),iconLibrary:o.library||o.iconLibrary||t.getAttribute("icon-library")||t.getAttribute("library")}}));JSON.stringify(this.buttons)!==JSON.stringify(i)&&(this.buttons=i)}handleButtonToggleChange(t){const i=t.detail.value;this.multiSelect?(this.selectedValues=this.selectedValues.includes(i)?this.selectedValues.filter((t=>t!==i)):[...this.selectedValues,i],this.value=[...this.selectedValues],this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("multiSelect",this.value),this.ariaLive="Selection changed: "+this.selectedValues.join(", ")):this.value!==i?(this.value=i,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+this.value):this.required||(this.value="",this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("deselect",this.value),this.ariaLive="Selection cleared")}handleDropdownToggle=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.isDropdownOpen=!this.isDropdownOpen)};handleButtonAction=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.buttonAction&&this.buttonAction(),this.buttonToggleGroupAction.emit({value:this.value}))};handleOptionSelect=(t,i)=>{i.stopPropagation(),this.disabled||this.readonly||(this.value=t,this.isDropdownOpen=!1,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue())};_persistValue(){if(this.persistKey)try{localStorage.setItem(this.persistKey,JSON.stringify(this.value))}catch{}}syncButtons(){(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).forEach(this.multiSelect&&Array.isArray(this.value)?t=>{t.selected=this.value.includes(t.value)}:t=>{t.selected=t.value===this.value})}renderLabel(){return this.label?e("div",{class:"button-group-label"},this.label,this.required&&e("span",{class:"required-indicator"},"*"),this.searchEnabled&&e("ui-input",{class:"button-group-search",placeholder:"Search...",value:this.searchQuery,prefixIcon:"search",iconLibrary:this.iconLibrary,showClear:!0,size:"sm",onInputChange:t=>this.handleSearch(t.detail),onInputClear:()=>this.handleSearch(""),"aria-label":"Search toggles"})):null}renderHelperText(){return this.invalid&&this.errorMessage?e("div",{class:"helper-text error"},e("ui-icon",{name:"exclamation-circle",library:"fontawesome",size:"14px"}),this.errorMessage):this.helperText?e("div",{class:"helper-text"},this.helperText):this.ariaLive?e("div",{class:"sr-only","aria-live":"polite"},this.ariaLive):null}getFilteredButtons(){return this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons}renderDropdownButton(){const t=this.getFilteredButtons(),i=this.buttons.find((t=>t.value===this.value)),o=this.keepButtonLabel?this.buttonActionLabel:i?.label||this.buttonActionLabel,r=this.keepButtonLabel?null:i?.icon,n={"dropdown-menu":!0,"dropdown-menu-open":this.isDropdownOpen};return e("div",{class:"dropdown-container"},e("div",{class:{"dropdown-button":!0,"dropdown-button-open":this.isDropdownOpen,"dropdown-button-disabled":this.disabled,"dropdown-button-readonly":this.readonly,["dropdown-button-"+this.size]:!0,["dropdown-button-"+this.color]:!0,["dropdown-button-"+this.variant]:!0,["dropdown-button-"+this.shape]:!0}},e("ui-button",{variant:"ghost",class:"dropdown-action-button",onClick:this.handleButtonAction,disabled:this.disabled||this.loading,loading:this.loading,icon:r,iconLibrary:this.iconLibrary,label:o,size:this.size,color:this.color,justify:"center"}),e("ui-button",{variant:"ghost",class:"dropdown-toggle-button",onClick:this.handleDropdownToggle,disabled:this.disabled||this.loading,ariaLabel:this.isDropdownOpen?"Close dropdown":"Open dropdown",icon:this.isDropdownOpen?"chevron-up":"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:this.size,color:this.color})),e("div",{class:n},this.searchEnabled&&e("div",{class:"dropdown-search"},e("input",{type:"text",value:this.searchQuery,onInput:t=>this.searchQuery=t.target.value,placeholder:"Search..."})),this.customContent?e("div",{class:"dropdown-custom-content"},e("slot",{name:"dropdown-content"})):t.map(((t,i)=>{const o=this.value===t.value;return e("div",{class:{"dropdown-option":!0,"dropdown-option-selected":o,"dropdown-option-disabled":t.disabled},onClick:i=>!t.disabled&&this.handleOptionSelect(t.value,i),role:"option","aria-selected":""+o,style:{"--index":""+i}},t.icon&&e("div",{class:"option-icon"},e("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"16px"})),t.avatarSrc&&e("div",{class:"option-avatar"},e("img",{src:t.avatarSrc,alt:t.avatarAlt||t.label}),t.status&&e("span",{class:"status-dot status-"+t.status})),e("span",{class:"option-label"},t.label||t.value),o&&e("div",{class:"option-check"},e("ui-icon",{name:"check",library:"lucide",size:"14px"})))}))))}render(){const t={"ui-button-toggle-group":!0,["group-"+this.orientation]:!0,"group-disabled":this.disabled,"group-invalid":this.invalid,"group-full-width":this.fullWidth,"group-rtl":this.rtl,"group-multi-select":this.multiSelect,"group-single-select":!this.multiSelect,"group-dropdown-mode":"dropdown"===this.mode,["group-"+this.color]:!0,["group-variant-"+this.variant]:!0,["group-size-"+this.size]:!0,["group-shape-"+this.shape]:!0,["theme-"+this.advancedTheme]:!!this.advancedTheme,["group-reveal-"+this.reveal]:"none"!==this.reveal},i={"button-list":!0,["button-list-"+this.orientation]:!0},o=this.getFilteredButtons();let r="var(--color-primary, #10b981)",n="var(--color-primary-contrast, #ffffff)";if("string"==typeof this.color)this.color.startsWith("#")||this.color.startsWith("rgb")?(r=this.color,this.color.startsWith("#")&&7===this.color.length&&(n=(299*parseInt(this.color.slice(1,3),16)+587*parseInt(this.color.slice(3,5),16)+114*parseInt(this.color.slice(5,7),16))/1e3>=128?"#1a1a1a":"#ffffff")):(r=`var(--color-${this.color})`,n=`var(--color-${this.color}-contrast, #ffffff)`);else if(this.color&&"object"==typeof this.color){const t=this.color.from||"#10b981";r=`linear-gradient(135deg, ${t}, ${this.color.to||t})`,n="#ffffff"}return e("div",{key:"2a8531e523b28208a24139e5424eaa90be9c7073",class:t,role:this.multiSelect?"group":"radiogroup","aria-label":this.label,tabIndex:0,style:{width:this.width,"--indicator-bg":r,"--indicator-text-color":n},onMouseMove:t=>this.handleMouseMove(t),onMouseLeave:()=>this.updateIndicator()},this.renderLabel(),this.batchActions&&e("div",{key:"e30632897c55499283fe0e6886bd7a3e7f590bad",class:"batch-actions"},e("ui-button",{key:"407de40948622de1cc9e14fcdae9d9ce06d8ec8c",variant:"ghost",onClick:this.selectAll,disabled:this.disabled,label:"Select All",size:"sm"}),e("ui-button",{key:"19699cfd346bb5d7fa4bab0f56f0b8b55333d148",variant:"ghost",onClick:this.clearAll,disabled:this.disabled,label:"Clear All",size:"sm"}),this.exportEnabled&&e("ui-button",{key:"a3e66305b6edca7fc19394bd7413af5f5801fc5f",variant:"ghost",onClick:this.exportSelection,label:"Export",size:"sm"}),this.importEnabled&&e("ui-button",{key:"de9512a60ee5bfdef71b409f17be20f0c1d575a8",variant:"ghost",onClick:this.importSelection,label:"Import",size:"sm"})),"dropdown"===this.mode?this.renderDropdownButton():e("div",{class:i},!this.multiSelect&&e("div",{class:"selection-indicator",ref:t=>this.selectionIndicatorRef=t}),o.map(((t,i)=>e("ui-button",{key:t.value,value:t.value,label:t.label,icon:t.icon,iconPosition:t.icon?this.iconPosition:"none",iconOnly:this.iconOnly,name:this.name,selected:this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,disabled:this.disabled||t.disabled,readonly:this.readonly,loading:this.loading,size:this.size,variant:this.variant,description:t.description,"description-position":t.descriptionPosition,"full-width":this.fullWidth,reveal:this.reveal,"reveal-delay":this.revealDelay+i*this.revealStagger,tabIndex:this.focusIndex===i?0:-1,"aria-checked":this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,"aria-label":t.label||t.value,onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur,onClick:i=>{i.stopPropagation(),this.disabled||t.disabled||this.handleButtonToggleChange({detail:{value:t.value}})},shape:this.shape,iconLibrary:t.iconLibrary||this.library||this.iconLibrary})))),this.renderHelperText(),this.analyticsEnabled&&e("div",{key:"cefc7fae744e3cc636c5b014a53fbb3ac07051f2",class:"analytics-info"},e("pre",{key:"00a1e53ab91350e9a5c7cc753e782f64a48e4f99"},JSON.stringify(this.analytics,null,2))))}handleKeyDown=t=>{if(this.disabled||this.readonly)return;const i=this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons;if(0!==i.length)if("ArrowRight"===t.key||"ArrowDown"===t.key)this.focusIndex=(this.focusIndex+1)%i.length,this.focusButton(this.focusIndex),t.preventDefault();else if("ArrowLeft"===t.key||"ArrowUp"===t.key)this.focusIndex=(this.focusIndex-1+i.length)%i.length,this.focusButton(this.focusIndex),t.preventDefault();else if(" "===t.key||"Enter"===t.key){const o=i[this.focusIndex];o&&!o.disabled&&this.handleButtonToggleChange({detail:{value:o.value}}),t.preventDefault()}};focusButton(t){const i=this.el.shadowRoot?.querySelectorAll("ui-button")??[];i[t]&&i[t].focus()}scheduleFocusIndexUpdate(t,i=!1){null!==this.focusFrameId&&cancelAnimationFrame(this.focusFrameId),this.focusFrameId=requestAnimationFrame((()=>{if(this.focusFrameId=null,i){const t=this.el.shadowRoot?.activeElement||document.activeElement;if(t&&this.el.contains(t))return}this.focusIndex!==t&&(this.focusIndex=t)}))}handleFocus(t){this.scheduleFocusIndexUpdate(t)}handleBlur=()=>{this.scheduleFocusIndexUpdate(-1,!0)};handleSearch(t){this.searchQuery=t,this.buttonToggleGroupSearch.emit({query:t})}selectAll=()=>{this.multiSelect&&(this.selectedValues=this.buttons.map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupBatch.emit({values:this.selectedValues}),this.ariaLive="All selected: "+this.selectedValues.join(", "))};clearAll=()=>{this.multiSelect&&(this.selectedValues=[],this.value=[],this.buttonToggleGroupBatch.emit({values:[]}),this.ariaLive="Selection cleared")};exportSelection=()=>{if(!this.exportEnabled)return;let t;t=this.multiSelect?Array.isArray(this.selectedValues)?this.selectedValues:[]:"string"==typeof this.value?[this.value]:[],this.buttonToggleGroupExport.emit({values:t}),this.ariaLive="Exported: "+t.join(", ")};importSelection=()=>{this.importEnabled&&(this.selectedValues=this.buttons.slice(0,2).map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupImport.emit({values:this.selectedValues}),this.ariaLive="Imported: "+this.selectedValues.join(", "))};trackAnalytics(t,i){this.analyticsEnabled&&(this.analytics[t]||(this.analytics[t]=[]),this.analytics[t].push({value:i,timestamp:Date.now()}),this.buttonToggleGroupAnalytics.emit({event:t,value:i}))}static get formAssociated(){return!0}static get watchers(){return{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange:0}]}}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}.ui-button-toggle-group{display:inline-flex;flex-direction:column;gap:12px;width:max-content;min-width:fit-content;font-family:inherit}.ui-button-toggle-group.group-rtl{direction:rtl}.ui-button-toggle-group.group-wrap .button-list{flex-wrap:wrap}.ui-button-toggle-group{}.ui-button-toggle-group.group-shape-round{--group-radius:12px;--indicator-radius:8px}.ui-button-toggle-group.group-shape-pill{--group-radius:99px;--indicator-radius:99px}.ui-button-toggle-group.group-shape-square{--group-radius:0px;--indicator-radius:0px}.ui-button-toggle-group{}.ui-button-toggle-group.group-variant-chip .button-list{background:transparent;padding:4px;gap:10px;box-shadow:none;flex-wrap:wrap;border:none !important;overflow:visible}.ui-button-toggle-group.group-variant-chip ui-button{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.ui-button-toggle-group.group-variant-chip ui-button:hover{transform:translateY(-2px)}.ui-button-toggle-group.group-variant-chip ui-button::part(button){background:rgba(255, 255, 255, 0.5) !important;backdrop-filter:blur(8px);border:1px solid rgba(0, 0, 0, 0.05) !important;border-radius:99px !important;color:#64748b !important;font-weight:500 !important;--button-padding:8px 18px;--ui-button-height:auto;min-height:32px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.02) !important}.ui-button-toggle-group.group-variant-chip ui-button:hover::part(button){border-color:rgba(var(--color-primary-rgb, 16, 185, 129), 0.2) !important;background:#ffffff !important;color:var(--color-primary, #10b981) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05) !important}.ui-button-toggle-group.group-variant-chip ui-button[selected]::part(button){background:var(--indicator-bg, var(--color-primary, #10b981)) !important;color:#ffffff !important;opacity:1 !important;border-color:transparent !important;font-weight:700 !important;box-shadow:0 8px 20px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;transform:translateY(-1px)}.ui-button-toggle-group.group-variant-chip ui-button[selected]:hover::part(button){filter:brightness(1.1);box-shadow:0 10px 25px rgba(var(--color-primary-rgb, 16, 185, 129), 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important}.button-group-label{font-weight:700;color:var(--label-color, #1e293b);font-size:0.9375rem;margin-bottom:6px;display:flex;align-items:center}.required-indicator{color:var(--color-danger-hover, #dc2626);margin-left:4px}.button-list{display:flex;padding:var(--group-padding, 6px);padding:var(--group-padding, 4px);border-radius:var(--group-radius, 10px);position:relative;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);overflow:hidden;transform:translateZ(0);isolation:isolate;background-clip:padding-box;color:var(--text-color, #64748b);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.03)}.selection-indicator{position:absolute;top:0;left:0;background:var(--indicator-bg, #10b981);opacity:0;pointer-events:none;transition:transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), width 0.3s cubic-bezier(0.19, 1, 0.22, 1), height 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;z-index:1;border-radius:var(--indicator-radius, 99px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.3);border:1px solid rgba(255, 255, 255, 0.1);box-sizing:border-box;}.selection-indicator::after{content:"";position:absolute;inset:0;background:rgba(0, 0, 0, 0.05);border-radius:inherit;opacity:0;transition:opacity 0.2s}.button-list:hover .selection-indicator::after{opacity:0.2}.button-list-horizontal{flex-direction:row;align-items:stretch}.button-list-vertical{flex-direction:column;align-items:stretch}.button-list ui-button{flex:none;position:relative;z-index:2;--button-padding:8px 16px;--ui-button-height:auto;min-height:44px}.button-list-vertical ui-button{width:100%}.button-list ui-button[icon-only]{width:44px !important;--button-padding:0 !important;--ui-button-height:44px !important;flex:0 0 44px !important}.button-list-full-width ui-button{flex:1}.button-list ui-button::part(button){background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.02) !important;color:inherit !important;border:none !important;box-shadow:none !important;font-weight:600 !important;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--button-border-radius:var(--indicator-radius, 8px);opacity:1}.button-list ui-button::part(subtitle){opacity:0.7;color:inherit !important}.button-list ui-button:hover::part(button){opacity:1;background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.05) !important;color:var(--indicator-bg, var(--color-primary-dark, #059669)) !important}.button-list:not(.group-multi-select) ui-button[selected]::part(button){color:var(--indicator-text-color, #ffffff);z-index:5;opacity:1}.ui-button-toggle-group .button-list ui-button[selected]::part(title),.ui-button-toggle-group .button-list ui-button[selected]::part(subtitle),.ui-button-toggle-group .button-list ui-button[selected]::part(icon){color:var(--indicator-text-color, #ffffff);opacity:1}.group-multi-select .button-list ui-button[selected]::part(button){background:var(--indicator-bg, #10b981);color:var(--indicator-text-color, #ffffff);opacity:1;box-shadow:0 4px 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);border-radius:var(--indicator-radius, 30px);border:1px solid rgba(255, 255, 255, 0.1);z-index:5;transform:scale(0.96)}.button-list-horizontal:not([style*="--group-padding"]) ui-button:not(:last-child)::after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);z-index:3;transition:opacity 0.2s ease}.button-list ui-button[selected]::after,.button-list ui-button[selected]+ui-button::after{opacity:0 !important}.helper-text{font-size:0.875rem;color:var(--text-muted, #64748b);margin-top:6px;font-weight:400}.helper-text.error{color:#ef4444}.ui-button-toggle-group[variant=dropdown] .button-list{--group-padding:0;--indicator-radius:4px}.dropdown-container{position:relative;display:inline-flex}.dropdown-button{display:flex;align-items:stretch;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--group-radius, 10px);overflow:hidden;transition:all 0.2s ease}.dropdown-button.dropdown-button-open{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.1)}.dropdown-action-button{border-radius:0 !important;flex:1;--button-padding:0 16px;--ui-button-height:44px}.dropdown-toggle-button{border-radius:0 !important;width:44px;border-left:1px solid rgba(0, 0, 0, 0.05) !important;--button-padding:0;--ui-button-height:44px}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);z-index:1000;display:flex;flex-direction:column;padding:6px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-menu.dropdown-menu-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-option{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;cursor:pointer;color:#475569;font-size:0.9375rem;font-weight:500;transition:all 0.15s ease;white-space:nowrap}.dropdown-option:hover{background:#f1f5f9;color:#1e293b}.dropdown-option.dropdown-option-selected{background:rgba(16, 185, 129, 0.1);color:#10b981}.dropdown-option.dropdown-option-disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.dropdown-option .option-icon{display:flex;align-items:center;justify-content:center;color:inherit;font-size:1.1em}.dropdown-option .option-label{flex:1}.dropdown-option .option-check{color:#10b981;margin-left:auto;display:flex;align-items:center}.dropdown-search{padding:4px 8px 8px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}.dropdown-search input{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.8125rem;outline:none;transition:all 0.2s}.dropdown-search input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16, 185, 129, 0.1)}'}},[833,"ui-button-toggle-group",{value:[1025],name:[1],disabled:[4],readonly:[4],required:[4],invalid:[4],label:[1],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],orientation:[1],size:[8],color:[1025],variant:[8],options:[1025],fullWidth:[4,"full-width"],iconPosition:[1,"icon-position"],iconLibrary:[1,"icon-library"],library:[1],iconOnly:[4,"icon-only"],mode:[1],buttonAction:[16],buttonActionLabel:[1,"button-action-label"],keepButtonLabel:[4,"keep-button-label"],customContent:[4,"custom-content"],loading:[4],shape:[8],multiSelect:[4,"multi-select"],batchActions:[4,"batch-actions"],searchEnabled:[4,"search-enabled"],exportEnabled:[4,"export-enabled"],importEnabled:[4,"import-enabled"],analyticsEnabled:[4,"analytics-enabled"],advancedTheme:[1,"advanced-theme"],reveal:[1],revealDelay:[2,"reveal-delay"],revealStagger:[2,"reveal-stagger"],magneticIndicator:[4,"magnetic-indicator"],rtl:[4],wrap:[4],width:[1],persistKey:[1,"persist-key"],buttons:[32],isDropdownOpen:[32],searchQuery:[32],selectedValues:[32],analytics:[32],focusIndex:[32],ariaLive:[32]},[[0,"buttonToggleChange","handleButtonToggleChange"]],{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange:0}]}]),d=p,u=function(){"undefined"!=typeof customElements&&["ui-button-toggle-group","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-button-toggle-group":customElements.get(r(t))||customElements.define(r(t),p);break;case"ui-badge":customElements.get(r(t))||s();break;case"ui-button":customElements.get(r(t))||n();break;case"ui-icon":customElements.get(r(t))||a();break;case"ui-input":customElements.get(r(t))||l();break;case"ui-loader":customElements.get(r(t))||h()}}))};export{d as UiButtonToggleGroup,u as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as i,transformTag as r}from"@stencil/core/internal/client";import{d as n}from"./badge.js";import{d as a}from"./button.js";import{d as s}from"./icon.js";import{d}from"./input.js";import{d as h}from"./loader.js";const l=t(class extends o{get el(){return this}internals;focusFrameId=null;constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonToggleGroupChange=e(this,"buttonToggleGroupChange",7),this.buttonToggleGroupAction=e(this,"buttonToggleGroupAction",7),this.buttonToggleGroupBatch=e(this,"buttonToggleGroupBatch",7),this.buttonToggleGroupSearch=e(this,"buttonToggleGroupSearch",7),this.buttonToggleGroupExport=e(this,"buttonToggleGroupExport",7),this.buttonToggleGroupImport=e(this,"buttonToggleGroupImport",7),this.buttonToggleGroupAnalytics=e(this,"buttonToggleGroupAnalytics",7),this.internals=this.el.attachInternals()}value="";name="";disabled=!1;readonly=!1;required=!1;invalid=!1;label="";helperText="";errorMessage="";orientation="horizontal";size="md";color="primary";variant="soft";options=[];fullWidth=!1;iconPosition="left";iconLibrary="default";library;iconOnly=!1;mode="segmented";buttonAction;buttonActionLabel="Action";keepButtonLabel=!1;customContent=!1;loading=!1;shape="rounded";multiSelect=!1;batchActions=!1;searchEnabled=!1;exportEnabled=!1;importEnabled=!1;analyticsEnabled=!1;advancedTheme="";reveal="none";revealDelay=0;revealStagger=50;magneticIndicator=!1;rtl=!1;wrap=!1;width="";persistKey="";buttons=[];isDropdownOpen=!1;searchQuery="";selectedValues=[];analytics={};focusIndex=-1;ariaLive="";selectionIndicatorRef;resizeObserver;mutationObserver;buttonToggleGroupChange;buttonToggleGroupAction;buttonToggleGroupBatch;buttonToggleGroupSearch;buttonToggleGroupExport;buttonToggleGroupImport;buttonToggleGroupAnalytics;componentWillLoad(){if(this.normalizeProps(),this.updateOptions(),this.syncButtons(),this.updateOptionsFromChildren(),this.persistKey)try{const t=localStorage.getItem(this.persistKey);null!==t&&(this.value=JSON.parse(t))}catch{}}componentDidLoad(){"dropdown"===this.mode&&document.addEventListener("click",this.handleClickOutside),this.el.addEventListener("keydown",this.handleKeyDown),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateIndicator())),this.resizeObserver.observe(this.el)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updateOptionsFromChildren())),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0})),setTimeout((()=>this.updateIndicator()),100)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),this.el.removeEventListener("keydown",this.handleKeyDown),null!==this.focusFrameId&&(cancelAnimationFrame(this.focusFrameId),this.focusFrameId=null),this.resizeObserver&&this.resizeObserver.disconnect(),this.mutationObserver&&this.mutationObserver.disconnect()}handleMouseMove=t=>{if(!this.magneticIndicator||!this.selectionIndicatorRef||"dropdown"===this.mode||this.multiSelect)return;const o=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).find((t=>t.value===this.value));if(!o)return;const e=o.getBoundingClientRect(),i=e.left+e.width/2,r=e.top+e.height/2;if(Math.hypot(t.clientX-i,t.clientY-r)<150){const e=4;this.selectionIndicatorRef.style.transform=`translate(${o.offsetLeft+(t.clientX-i)/8+e}px, ${o.offsetTop+(t.clientY-r)/8+e}px) scale(1.02)`}else{const t=4;this.selectionIndicatorRef.style.transform=`translate(${o.offsetLeft+t}px, ${o.offsetTop+t}px) scale(1)`}};updateIndicator(){this.selectionIndicatorRef&&"dropdown"!==this.mode&&!this.multiSelect&&requestAnimationFrame((()=>{const t=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]),o=t.find((t=>t.value===this.value));if(o){const e=o.offsetLeft,i=o.offsetTop,r=o.offsetHeight,n=4;this.selectionIndicatorRef.style.width=o.offsetWidth-2*n+"px",this.selectionIndicatorRef.style.height=r-2*n+"px",this.selectionIndicatorRef.style.transform=`translate(${e+n}px, ${i+n}px)`,this.selectionIndicatorRef.style.opacity="1",t.forEach((t=>{t.style.setProperty("--hide-button-selection","1")}))}else this.selectionIndicatorRef.style.opacity="0",t.forEach((t=>{t.style.setProperty("--hide-button-selection","0")}))}))}handleClickOutside=t=>{this.el.contains(t.target)||(this.isDropdownOpen=!1)};componentDidUpdate(){this.syncButtons(),this.updateIndicator()}watchValue(){this.syncButtons(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+(Array.isArray(this.value)?this.value.join(", "):this.value),this.internals.setFormValue(Array.isArray(this.value)?this.value.join(","):this.value||"")}handleColorChange(){this.normalizeProps()}handleOptionsChange(){this.updateOptions()}normalizeProps(){try{"string"==typeof this.color&&this.color.startsWith("{")&&(this.color=JSON.parse(this.color)),"string"==typeof this.options&&(this.buttons=JSON.parse(this.options))}catch(t){console.warn("Failed to parse complex button-toggle-group prop",t)}}updateOptions(){if("string"==typeof this.options)try{this.buttons=JSON.parse(this.options)}catch{console.error("Invalid options JSON"),this.buttons=[]}else Array.isArray(this.options)&&this.options.length>0?this.buttons=[...this.options]:this.updateOptionsFromChildren()}updateOptionsFromChildren(){const t=Array.from(this.el.children);if(0===t.length)return;const o=t.filter((t=>"ui-button-toggle"===t.tagName.toLowerCase()||"ui-button"===t.tagName.toLowerCase())).map(((t,o)=>{const e=t;return{value:e.value||t.getAttribute("value")||"opt-"+o,label:e.label||t.getAttribute("label")||t.textContent?.trim(),icon:e.icon||t.getAttribute("icon"),disabled:e.disabled||t.hasAttribute("disabled"),description:e.description||t.getAttribute("description"),descriptionPosition:e.descriptionPosition||t.getAttribute("description-position"),iconLibrary:e.library||e.iconLibrary||t.getAttribute("icon-library")||t.getAttribute("library")}}));JSON.stringify(this.buttons)!==JSON.stringify(o)&&(this.buttons=o)}handleButtonToggleChange(t){const o=t.detail.value;this.multiSelect?(this.selectedValues=this.selectedValues.includes(o)?this.selectedValues.filter((t=>t!==o)):[...this.selectedValues,o],this.value=[...this.selectedValues],this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("multiSelect",this.value),this.ariaLive="Selection changed: "+this.selectedValues.join(", ")):this.value!==o?(this.value=o,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+this.value):this.required||(this.value="",this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("deselect",this.value),this.ariaLive="Selection cleared")}handleDropdownToggle=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.isDropdownOpen=!this.isDropdownOpen)};handleButtonAction=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.buttonAction&&this.buttonAction(),this.buttonToggleGroupAction.emit({value:this.value}))};handleOptionSelect=(t,o)=>{o.stopPropagation(),this.disabled||this.readonly||(this.value=t,this.isDropdownOpen=!1,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue())};_persistValue(){if(this.persistKey)try{localStorage.setItem(this.persistKey,JSON.stringify(this.value))}catch{}}syncButtons(){(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).forEach(this.multiSelect&&Array.isArray(this.value)?t=>{t.selected=this.value.includes(t.value)}:t=>{t.selected=t.value===this.value})}renderLabel(){return this.label?i("div",{class:"button-group-label"},this.label,this.required&&i("span",{class:"required-indicator"},"*"),this.searchEnabled&&i("ui-input",{class:"button-group-search",placeholder:"Search...",value:this.searchQuery,prefixIcon:"search",iconLibrary:this.iconLibrary,showClear:!0,size:"sm",onInputChange:t=>this.handleSearch(t.detail),onInputClear:()=>this.handleSearch(""),"aria-label":"Search toggles"})):null}renderHelperText(){return this.invalid&&this.errorMessage?i("div",{class:"helper-text error"},i("ui-icon",{name:"exclamation-circle",library:"fontawesome",size:"14px"}),this.errorMessage):this.helperText?i("div",{class:"helper-text"},this.helperText):this.ariaLive?i("div",{class:"sr-only","aria-live":"polite"},this.ariaLive):null}getFilteredButtons(){return this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons}renderDropdownButton(){const t=this.getFilteredButtons(),o=this.buttons.find((t=>t.value===this.value)),e=this.keepButtonLabel?this.buttonActionLabel:o?.label||this.buttonActionLabel,r=this.keepButtonLabel?null:o?.icon,n={"dropdown-menu":!0,"dropdown-menu-open":this.isDropdownOpen};return i("div",{class:"dropdown-container"},i("div",{class:{"dropdown-button":!0,"dropdown-button-open":this.isDropdownOpen,"dropdown-button-disabled":this.disabled,"dropdown-button-readonly":this.readonly,["dropdown-button-"+this.size]:!0,["dropdown-button-"+this.color]:!0,["dropdown-button-"+this.variant]:!0,["dropdown-button-"+this.shape]:!0}},i("ui-button",{variant:"ghost",class:"dropdown-action-button",onClick:this.handleButtonAction,disabled:this.disabled||this.loading,loading:this.loading,icon:r,iconLibrary:this.iconLibrary,label:e,size:this.size,color:this.color,justify:"center"}),i("ui-button",{variant:"ghost",class:"dropdown-toggle-button",onClick:this.handleDropdownToggle,disabled:this.disabled||this.loading,ariaLabel:this.isDropdownOpen?"Close dropdown":"Open dropdown",icon:this.isDropdownOpen?"chevron-up":"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:this.size,color:this.color})),i("div",{class:n},this.searchEnabled&&i("div",{class:"dropdown-search"},i("input",{type:"text",value:this.searchQuery,onInput:t=>this.searchQuery=t.target.value,placeholder:"Search..."})),this.customContent?i("div",{class:"dropdown-custom-content"},i("slot",{name:"dropdown-content"})):t.map(((t,o)=>{const e=this.value===t.value;return i("div",{class:{"dropdown-option":!0,"dropdown-option-selected":e,"dropdown-option-disabled":t.disabled},onClick:o=>!t.disabled&&this.handleOptionSelect(t.value,o),role:"option","aria-selected":""+e,style:{"--index":""+o}},t.icon&&i("div",{class:"option-icon"},i("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"16px"})),t.avatarSrc&&i("div",{class:"option-avatar"},i("img",{src:t.avatarSrc,alt:t.avatarAlt||t.label}),t.status&&i("span",{class:"status-dot status-"+t.status})),i("span",{class:"option-label"},t.label||t.value),e&&i("div",{class:"option-check"},i("ui-icon",{name:"check",library:"lucide",size:"14px"})))}))))}render(){const t={"ui-button-toggle-group":!0,["group-"+this.orientation]:!0,"group-disabled":this.disabled,"group-invalid":this.invalid,"group-full-width":this.fullWidth,"group-rtl":this.rtl,"group-multi-select":this.multiSelect,"group-single-select":!this.multiSelect,"group-dropdown-mode":"dropdown"===this.mode,["group-"+this.color]:!0,["group-variant-"+this.variant]:!0,["group-size-"+this.size]:!0,["group-shape-"+this.shape]:!0,["theme-"+this.advancedTheme]:!!this.advancedTheme,["group-reveal-"+this.reveal]:"none"!==this.reveal},o={"button-list":!0,["button-list-"+this.orientation]:!0},e=this.getFilteredButtons();let r="var(--color-primary, #10b981)",n="var(--color-primary-contrast, #ffffff)";if("string"==typeof this.color)this.color.startsWith("#")||this.color.startsWith("rgb")?(r=this.color,this.color.startsWith("#")&&7===this.color.length&&(n=(299*parseInt(this.color.slice(1,3),16)+587*parseInt(this.color.slice(3,5),16)+114*parseInt(this.color.slice(5,7),16))/1e3>=128?"#1a1a1a":"#ffffff")):(r=`var(--color-${this.color})`,n=`var(--color-${this.color}-contrast, #ffffff)`);else if(this.color&&"object"==typeof this.color){const t=this.color.from||"#10b981";r=`linear-gradient(135deg, ${t}, ${this.color.to||t})`,n="#ffffff"}return i("div",{key:"5826e0db706109891e74fc0a4ee04e1df381687b",class:t,role:this.multiSelect?"group":"radiogroup","aria-label":this.label,tabIndex:0,style:{width:this.width,"--indicator-bg":r,"--indicator-text-color":n},onMouseMove:t=>this.handleMouseMove(t),onMouseLeave:()=>this.updateIndicator()},this.renderLabel(),this.batchActions&&i("div",{key:"fbf7ab8ce6a8548a53438eb613040a78f58bbaa4",class:"batch-actions"},i("ui-button",{key:"b4b34241bf9a24158472ad3714ca63d898493869",variant:"ghost",onClick:this.selectAll,disabled:this.disabled,label:"Select All",size:"sm"}),i("ui-button",{key:"5cf67b5f2a749f6ee2975be469f03ba0c7374906",variant:"ghost",onClick:this.clearAll,disabled:this.disabled,label:"Clear All",size:"sm"}),this.exportEnabled&&i("ui-button",{key:"15d1e37dbccf82fb1f0097301c4de451e0931273",variant:"ghost",onClick:this.exportSelection,label:"Export",size:"sm"}),this.importEnabled&&i("ui-button",{key:"3a82d6a1896cca92f0314c8b423c0a9df823eba6",variant:"ghost",onClick:this.importSelection,label:"Import",size:"sm"})),"dropdown"===this.mode?this.renderDropdownButton():i("div",{class:o},!this.multiSelect&&i("div",{class:"selection-indicator",ref:t=>this.selectionIndicatorRef=t}),e.map(((t,o)=>i("ui-button",{key:t.value,value:t.value,label:t.label,icon:t.icon,iconPosition:t.icon?this.iconPosition:"none",iconOnly:this.iconOnly,name:this.name,selected:this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,disabled:this.disabled||t.disabled,readonly:this.readonly,loading:this.loading,size:this.size,variant:this.variant,description:t.description,"description-position":t.descriptionPosition,"full-width":this.fullWidth,reveal:this.reveal,"reveal-delay":this.revealDelay+o*this.revealStagger,tabIndex:this.focusIndex===o?0:-1,"aria-checked":this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,"aria-label":t.label||t.value,onFocus:()=>this.handleFocus(o),onBlur:this.handleBlur,onClick:o=>{o.stopPropagation(),this.disabled||t.disabled||this.handleButtonToggleChange({detail:{value:t.value}})},shape:this.shape,iconLibrary:t.iconLibrary||this.library||this.iconLibrary})))),this.renderHelperText(),this.analyticsEnabled&&i("div",{key:"10b18efe0af543838aa8b835a931951d9b17ab78",class:"analytics-info"},i("pre",{key:"1e7ac3662e57728b24e3ab14f4846c2d2b9c3991"},JSON.stringify(this.analytics,null,2))))}handleKeyDown=t=>{if(this.disabled||this.readonly)return;const o=this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons;if(0!==o.length)if("ArrowRight"===t.key||"ArrowDown"===t.key)this.focusIndex=(this.focusIndex+1)%o.length,this.focusButton(this.focusIndex),t.preventDefault();else if("ArrowLeft"===t.key||"ArrowUp"===t.key)this.focusIndex=(this.focusIndex-1+o.length)%o.length,this.focusButton(this.focusIndex),t.preventDefault();else if(" "===t.key||"Enter"===t.key){const e=o[this.focusIndex];e&&!e.disabled&&this.handleButtonToggleChange({detail:{value:e.value}}),t.preventDefault()}};focusButton(t){const o=this.el.shadowRoot?.querySelectorAll("ui-button")??[];o[t]&&o[t].focus()}scheduleFocusIndexUpdate(t,o=!1){null!==this.focusFrameId&&cancelAnimationFrame(this.focusFrameId),this.focusFrameId=requestAnimationFrame((()=>{if(this.focusFrameId=null,o){const t=this.el.shadowRoot?.activeElement||document.activeElement;if(t&&this.el.contains(t))return}this.focusIndex!==t&&(this.focusIndex=t)}))}handleFocus(t){this.scheduleFocusIndexUpdate(t)}handleBlur=()=>{this.scheduleFocusIndexUpdate(-1,!0)};handleSearch(t){this.searchQuery=t,this.buttonToggleGroupSearch.emit({query:t})}selectAll=()=>{this.multiSelect&&(this.selectedValues=this.buttons.map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupBatch.emit({values:this.selectedValues}),this.ariaLive="All selected: "+this.selectedValues.join(", "))};clearAll=()=>{this.multiSelect&&(this.selectedValues=[],this.value=[],this.buttonToggleGroupBatch.emit({values:[]}),this.ariaLive="Selection cleared")};exportSelection=()=>{if(!this.exportEnabled)return;let t;t=this.multiSelect?Array.isArray(this.selectedValues)?this.selectedValues:[]:"string"==typeof this.value?[this.value]:[],this.buttonToggleGroupExport.emit({values:t}),this.ariaLive="Exported: "+t.join(", ")};importSelection=()=>{this.importEnabled&&(this.selectedValues=this.buttons.slice(0,2).map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupImport.emit({values:this.selectedValues}),this.ariaLive="Imported: "+this.selectedValues.join(", "))};trackAnalytics(t,o){this.analyticsEnabled&&(this.analytics[t]||(this.analytics[t]=[]),this.analytics[t].push({value:o,timestamp:Date.now()}),this.buttonToggleGroupAnalytics.emit({event:t,value:o}))}static get formAssociated(){return!0}static get watchers(){return{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange:0}]}}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}.ui-button-toggle-group{display:inline-flex;flex-direction:column;gap:12px;width:max-content;min-width:fit-content;font-family:inherit}.ui-button-toggle-group.group-rtl{direction:rtl}.ui-button-toggle-group.group-wrap .button-list{flex-wrap:wrap}.ui-button-toggle-group{}.ui-button-toggle-group.group-shape-round{--group-radius:12px;--indicator-radius:8px}.ui-button-toggle-group.group-shape-pill{--group-radius:99px;--indicator-radius:99px}.ui-button-toggle-group.group-shape-square{--group-radius:0px;--indicator-radius:0px}.ui-button-toggle-group{}.ui-button-toggle-group.group-variant-chip .button-list{background:transparent;padding:4px;gap:10px;box-shadow:none;flex-wrap:wrap;border:none !important;overflow:visible}.ui-button-toggle-group.group-variant-chip ui-button{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.ui-button-toggle-group.group-variant-chip ui-button:hover{transform:translateY(-2px)}.ui-button-toggle-group.group-variant-chip ui-button::part(button){background:rgba(255, 255, 255, 0.5) !important;backdrop-filter:blur(8px);border:1px solid rgba(0, 0, 0, 0.05) !important;border-radius:99px !important;color:#64748b !important;font-weight:500 !important;--button-padding:8px 18px;--ui-button-height:auto;min-height:32px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.02) !important}.ui-button-toggle-group.group-variant-chip ui-button:hover::part(button){border-color:rgba(var(--color-primary-rgb, 16, 185, 129), 0.2) !important;background:#ffffff !important;color:var(--color-primary, #10b981) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05) !important}.ui-button-toggle-group.group-variant-chip ui-button[selected]::part(button){background:var(--indicator-bg, var(--color-primary, #10b981)) !important;color:#ffffff !important;opacity:1 !important;border-color:transparent !important;font-weight:700 !important;box-shadow:0 8px 20px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;transform:translateY(-1px)}.ui-button-toggle-group.group-variant-chip ui-button[selected]:hover::part(button){filter:brightness(1.1);box-shadow:0 10px 25px rgba(var(--color-primary-rgb, 16, 185, 129), 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important}.button-group-label{font-weight:700;color:var(--label-color, #1e293b);font-size:0.9375rem;margin-bottom:6px;display:flex;align-items:center}.required-indicator{color:var(--color-danger-hover, #dc2626);margin-left:4px}.button-list{display:flex;padding:var(--group-padding, 6px);padding:var(--group-padding, 4px);border-radius:var(--group-radius, 10px);position:relative;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);overflow:hidden;transform:translateZ(0);isolation:isolate;background-clip:padding-box;color:var(--text-color, #64748b);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.03)}.selection-indicator{position:absolute;top:0;left:0;background:var(--indicator-bg, var(--color-primary, #10b981));opacity:0;pointer-events:none;transition:transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), width 0.3s cubic-bezier(0.19, 1, 0.22, 1), height 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;z-index:1;border-radius:var(--indicator-radius, 99px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.3);border:1px solid rgba(255, 255, 255, 0.1);box-sizing:border-box;}.selection-indicator::after{content:"";position:absolute;inset:0;background:rgba(0, 0, 0, 0.05);border-radius:inherit;opacity:0;transition:opacity 0.2s}.button-list:hover .selection-indicator::after{opacity:0.2}.button-list-horizontal{flex-direction:row;align-items:stretch}.button-list-vertical{flex-direction:column;align-items:stretch}.button-list ui-button{flex:none;position:relative;z-index:2;--button-padding:8px 16px;--ui-button-height:auto;min-height:44px;color:var(--text-color, #64748b) !important}.button-list-vertical ui-button{width:100%}.button-list ui-button[icon-only]{width:44px !important;--button-padding:0 !important;--ui-button-height:44px !important;flex:0 0 44px !important}.button-list-full-width ui-button{flex:1}.button-list ui-button::part(button){background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.02) !important;color:inherit !important;border:none !important;box-shadow:none !important;font-weight:600 !important;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--button-border-radius:var(--indicator-radius, 8px);opacity:1}.button-list ui-button::part(subtitle){opacity:0.7;color:inherit !important}.button-list ui-button:hover::part(button){opacity:1;background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.05) !important;color:var(--indicator-bg, var(--color-primary-dark, #059669)) !important}.button-list:not(.group-multi-select) ui-button[selected]::part(button){color:var(--indicator-text-color, #ffffff) !important;z-index:5;opacity:1 !important}.ui-button-toggle-group .button-list ui-button[selected]::part(title),.ui-button-toggle-group .button-list ui-button[selected]::part(subtitle),.ui-button-toggle-group .button-list ui-button[selected]::part(icon){color:var(--indicator-text-color, #ffffff) !important;opacity:1 !important}.group-multi-select .button-list ui-button[selected]::part(button){background:var(--indicator-bg, var(--color-primary, #10b981)) !important;color:var(--indicator-text-color, #ffffff) !important;opacity:1 !important;box-shadow:0 4px 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;border-radius:var(--indicator-radius, 30px) !important;border:1px solid rgba(255, 255, 255, 0.1) !important;z-index:5;transform:scale(0.96)}.button-list-horizontal:not([style*="--group-padding"]) ui-button:not(:last-child)::after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);z-index:3;transition:opacity 0.2s ease}.button-list ui-button[selected]::after,.button-list ui-button[selected]+ui-button::after{opacity:0 !important}.helper-text{font-size:0.875rem;color:var(--text-muted, #64748b);margin-top:6px;font-weight:400}.helper-text.error{color:#ef4444}.ui-button-toggle-group[variant=dropdown] .button-list{--group-padding:0;--indicator-radius:4px}.dropdown-container{position:relative;display:inline-flex}.dropdown-button{display:flex;align-items:stretch;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--group-radius, 10px);overflow:hidden;transition:all 0.2s ease}.dropdown-button.dropdown-button-open{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.1)}.dropdown-action-button{border-radius:0 !important;flex:1;--button-padding:0 16px;--ui-button-height:44px}.dropdown-toggle-button{border-radius:0 !important;width:44px;border-left:1px solid rgba(0, 0, 0, 0.05) !important;--button-padding:0;--ui-button-height:44px}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);z-index:1000;display:flex;flex-direction:column;padding:6px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-menu.dropdown-menu-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-option{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;cursor:pointer;color:#475569;font-size:0.9375rem;font-weight:500;transition:all 0.15s ease;white-space:nowrap}.dropdown-option:hover{background:#f1f5f9;color:#1e293b}.dropdown-option.dropdown-option-selected{background:var(--color-primary-subtle, rgba(var(--color-primary-rgb, 16, 185, 129), 0.1));color:var(--color-primary, #10b981)}.dropdown-option.dropdown-option-disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.dropdown-option .option-icon{display:flex;align-items:center;justify-content:center;color:inherit;font-size:1.1em}.dropdown-option .option-label{flex:1}.dropdown-option .option-check{color:var(--color-primary, #10b981);margin-left:auto;display:flex;align-items:center}.dropdown-search{padding:4px 8px 8px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}.dropdown-search input{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.8125rem;outline:none;transition:all 0.2s}.dropdown-search input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16, 185, 129, 0.1)}:host-context([data-theme=dark]) .button-group-label,:host([data-theme=dark]) .button-group-label,:host-context([data-theme=violet]) .button-group-label,:host([data-theme=violet]) .button-group-label,:host-context([data-theme=pink]) .button-group-label,:host([data-theme=pink]) .button-group-label,:host-context([data-theme=blue]) .button-group-label,:host([data-theme=blue]) .button-group-label{--label-color:var(--label-color, #f1f5f9)}:host-context([data-theme=dark]) .button-list,:host([data-theme=dark]) .button-list,:host-context([data-theme=violet]) .button-list,:host([data-theme=violet]) .button-list,:host-context([data-theme=pink]) .button-list,:host([data-theme=pink]) .button-list,:host-context([data-theme=blue]) .button-list,:host([data-theme=blue]) .button-list{--button-group-bg:var(--bg-secondary, #1e293b);--border-color:var(--border-color, #334155);--text-color:var(--text-secondary, #94a3b8)}:host-context([data-theme=dark]) .button-list ui-button:hover::part(button),:host([data-theme=dark]) .button-list ui-button:hover::part(button),:host-context([data-theme=violet]) .button-list ui-button:hover::part(button),:host([data-theme=violet]) .button-list ui-button:hover::part(button),:host-context([data-theme=pink]) .button-list ui-button:hover::part(button),:host([data-theme=pink]) .button-list ui-button:hover::part(button),:host-context([data-theme=blue]) .button-list ui-button:hover::part(button),:host([data-theme=blue]) .button-list ui-button:hover::part(button){background:rgba(255, 255, 255, 0.05) !important}:host-context([data-theme=dark]) .dropdown-button,:host([data-theme=dark]) .dropdown-button,:host-context([data-theme=violet]) .dropdown-button,:host([data-theme=violet]) .dropdown-button,:host-context([data-theme=pink]) .dropdown-button,:host([data-theme=pink]) .dropdown-button,:host-context([data-theme=blue]) .dropdown-button,:host([data-theme=blue]) .dropdown-button{--button-group-bg:var(--bg-secondary, #1e293b);--border-color:var(--border-color, #334155)}:host-context([data-theme=dark]) .dropdown-menu,:host([data-theme=dark]) .dropdown-menu,:host-context([data-theme=violet]) .dropdown-menu,:host([data-theme=violet]) .dropdown-menu,:host-context([data-theme=pink]) .dropdown-menu,:host([data-theme=pink]) .dropdown-menu,:host-context([data-theme=blue]) .dropdown-menu,:host([data-theme=blue]) .dropdown-menu{background:var(--bg-primary, #1e293b);border-color:var(--border-color, #334155)}:host-context([data-theme=dark]) .dropdown-option,:host([data-theme=dark]) .dropdown-option,:host-context([data-theme=violet]) .dropdown-option,:host([data-theme=violet]) .dropdown-option,:host-context([data-theme=pink]) .dropdown-option,:host([data-theme=pink]) .dropdown-option,:host-context([data-theme=blue]) .dropdown-option,:host([data-theme=blue]) .dropdown-option{color:var(--text-secondary, #cbd5e1)}:host-context([data-theme=dark]) .dropdown-option:hover,:host([data-theme=dark]) .dropdown-option:hover,:host-context([data-theme=violet]) .dropdown-option:hover,:host([data-theme=violet]) .dropdown-option:hover,:host-context([data-theme=pink]) .dropdown-option:hover,:host([data-theme=pink]) .dropdown-option:hover,:host-context([data-theme=blue]) .dropdown-option:hover,:host([data-theme=blue]) .dropdown-option:hover{background:var(--bg-secondary, #334155);color:var(--text-primary, #ffffff)}:host-context([data-theme=dark]) .dropdown-option.dropdown-option-selected,:host([data-theme=dark]) .dropdown-option.dropdown-option-selected,:host-context([data-theme=violet]) .dropdown-option.dropdown-option-selected,:host([data-theme=violet]) .dropdown-option.dropdown-option-selected,:host-context([data-theme=pink]) .dropdown-option.dropdown-option-selected,:host([data-theme=pink]) .dropdown-option.dropdown-option-selected,:host-context([data-theme=blue]) .dropdown-option.dropdown-option-selected,:host([data-theme=blue]) .dropdown-option.dropdown-option-selected{background:rgba(var(--color-primary-rgb, 16, 185, 129), 0.15);color:var(--color-primary, #10b981)}:host-context([data-theme=dark]) .dropdown-search input,:host([data-theme=dark]) .dropdown-search input,:host-context([data-theme=violet]) .dropdown-search input,:host([data-theme=violet]) .dropdown-search input,:host-context([data-theme=pink]) .dropdown-search input,:host([data-theme=pink]) .dropdown-search input,:host-context([data-theme=blue]) .dropdown-search input,:host([data-theme=blue]) .dropdown-search input{background:var(--bg-primary, #1e293b);border-color:var(--border-color, #334155);color:var(--text-primary, #ffffff)}:host-context([data-theme=green]) .button-group-label,:host([data-theme=green]) .button-group-label{--label-color:#f0fdf4}:host-context([data-theme=green]) .button-list,:host([data-theme=green]) .button-list{--button-group-bg:#064e3b;--border-color:#166534;--text-color:#a7f3d0}:host-context([data-theme=green]) .button-list ui-button:hover::part(button),:host([data-theme=green]) .button-list ui-button:hover::part(button){background:rgba(255, 255, 255, 0.08) !important}:host-context([data-theme=green]) .dropdown-button,:host([data-theme=green]) .dropdown-button{--button-group-bg:#064e3b;--border-color:#166534}:host-context([data-theme=green]) .dropdown-menu,:host([data-theme=green]) .dropdown-menu{background:#064e3b;border-color:#166534}:host-context([data-theme=green]) .dropdown-option,:host([data-theme=green]) .dropdown-option{color:#d1fae5}:host-context([data-theme=green]) .dropdown-option:hover,:host([data-theme=green]) .dropdown-option:hover{background:#166534;color:#ffffff}:host-context([data-theme=green]) .dropdown-option.dropdown-option-selected,:host([data-theme=green]) .dropdown-option.dropdown-option-selected{background:rgba(255, 255, 255, 0.15);color:#ffffff}:host-context([data-theme=green]) .dropdown-search input,:host([data-theme=green]) .dropdown-search input{background:#064e3b;border-color:#166534;color:#ffffff}'}},[833,"ui-button-toggle-group",{value:[1025],name:[1],disabled:[4],readonly:[4],required:[4],invalid:[4],label:[1],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],orientation:[1],size:[8],color:[1025],variant:[8],options:[1025],fullWidth:[4,"full-width"],iconPosition:[1,"icon-position"],iconLibrary:[1,"icon-library"],library:[1],iconOnly:[4,"icon-only"],mode:[1],buttonAction:[16],buttonActionLabel:[1,"button-action-label"],keepButtonLabel:[4,"keep-button-label"],customContent:[4,"custom-content"],loading:[4],shape:[8],multiSelect:[4,"multi-select"],batchActions:[4,"batch-actions"],searchEnabled:[4,"search-enabled"],exportEnabled:[4,"export-enabled"],importEnabled:[4,"import-enabled"],analyticsEnabled:[4,"analytics-enabled"],advancedTheme:[1,"advanced-theme"],reveal:[1],revealDelay:[2,"reveal-delay"],revealStagger:[2,"reveal-stagger"],magneticIndicator:[4,"magnetic-indicator"],rtl:[4],wrap:[4],width:[1],persistKey:[1,"persist-key"],buttons:[32],isDropdownOpen:[32],searchQuery:[32],selectedValues:[32],analytics:[32],focusIndex:[32],ariaLive:[32]},[[0,"buttonToggleChange","handleButtonToggleChange"]],{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange:0}]}]),p=l,u=function(){"undefined"!=typeof customElements&&["ui-button-toggle-group","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-button-toggle-group":customElements.get(r(t))||customElements.define(r(t),l);break;case"ui-badge":customElements.get(r(t))||n();break;case"ui-button":customElements.get(r(t))||a();break;case"ui-icon":customElements.get(r(t))||s();break;case"ui-input":customElements.get(r(t))||d();break;case"ui-loader":customElements.get(r(t))||h()}}))};export{p as UiButtonToggleGroup,u as defineCustomElement}
|