atomicuilibrary 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/category-section.cjs.entry.js +1 -1
- package/dist/cjs/exploration-project-tailwind.cjs.js +1 -1
- package/dist/cjs/layout-manager.cjs.entry.js +1 -1
- package/dist/cjs/library-card.cjs.entry.js +1 -1
- package/dist/cjs/lm-container_2.cjs.entry.js +1 -1
- package/dist/cjs/lm-panel_3.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/my-step.cjs.entry.js +1 -1
- package/dist/cjs/nav-bar.cjs.entry.js +2 -2
- package/dist/cjs/{security-E1JcwxGc.js → security-CNaNip8F.js} +88 -154
- package/dist/cjs/smart-step.cjs.entry.js +2 -2
- package/dist/cjs/timeline-item.cjs.entry.js +1 -1
- package/dist/cjs/{ui-accordion_10.cjs.entry.js → ui-accordion_11.cjs.entry.js} +613 -26
- package/dist/cjs/ui-advanced-data-table.cjs.entry.js +1 -1
- package/dist/cjs/ui-anchor.cjs.entry.js +1 -1
- package/dist/cjs/ui-aside-panel.cjs.entry.js +5 -5
- package/dist/cjs/ui-avatar-group_3.cjs.entry.js +5 -5
- package/dist/cjs/ui-callout-banner.cjs.entry.js +1 -1
- package/dist/cjs/ui-card.cjs.entry.js +26 -4
- package/dist/cjs/ui-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-editor.cjs.entry.js +2 -2
- package/dist/cjs/ui-code-preview.cjs.entry.js +1 -1
- package/dist/cjs/ui-color-controller.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog-box.cjs.entry.js +1 -1
- package/dist/cjs/ui-dock-host.cjs.entry.js +3 -3
- package/dist/cjs/ui-drag-drop.cjs.entry.js +1 -1
- package/dist/cjs/ui-empty-state.cjs.entry.js +1 -1
- package/dist/cjs/ui-fab-item.cjs.entry.js +1 -1
- package/dist/cjs/ui-fab.cjs.entry.js +2 -2
- package/dist/cjs/ui-library.cjs.entry.js +1 -1
- package/dist/cjs/ui-list-group_2.cjs.entry.js +9 -5
- package/dist/cjs/ui-list.cjs.entry.js +4 -4
- package/dist/cjs/ui-navigation-item.cjs.entry.js +3 -3
- package/dist/cjs/ui-otp-input.cjs.entry.js +2 -2
- package/dist/cjs/{ui-pagination_3.cjs.entry.js → ui-pagination_4.cjs.entry.js} +202 -0
- package/dist/cjs/ui-pattern-input.cjs.entry.js +5 -5
- package/dist/cjs/ui-popover.cjs.entry.js +1 -1
- package/dist/cjs/ui-progress.cjs.entry.js +101 -17
- package/dist/cjs/ui-resizable-panel.cjs.entry.js +1 -1
- package/dist/cjs/ui-smart-location-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/ui-smart-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-step.cjs.entry.js +1 -1
- package/dist/cjs/ui-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +9 -9
- package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ui-timeline.cjs.entry.js +1 -1
- package/dist/cjs/ui-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/ui-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ui-transfer-list.cjs.entry.js +1 -1
- package/dist/cjs/ui-workspace-manager.cjs.entry.js +1 -1
- package/dist/collection/assets/js/demo-loader.js +0 -1
- package/dist/collection/assets/js/demos/accordion-demo.js +189 -0
- package/dist/collection/assets/js/demos/advanced-data-table-demo.js +213 -214
- package/dist/collection/assets/js/demos/aside-panel-demo.js +6 -6
- package/dist/collection/assets/js/demos/button-demo.js +60 -1
- package/dist/collection/assets/js/demos/callout-banner-demo.js +324 -34
- package/dist/collection/assets/js/demos/card-demo.js +108 -61
- package/dist/collection/assets/js/demos/context-menu-demo.js +433 -12
- package/dist/collection/assets/js/demos/dock-demo.js +80 -60
- package/dist/collection/assets/js/demos/documentation-demo.js +227 -22
- package/dist/collection/assets/js/demos/empty-state-demo.js +10 -10
- package/dist/collection/assets/js/demos/list-demo.js +41 -18
- package/dist/collection/assets/js/demos/masonry-demo.js +164 -0
- package/dist/collection/assets/js/demos/progress-demo.js +701 -8
- package/dist/collection/assets/js/demos/radio-demo.js +1 -1
- package/dist/collection/assets/js/demos/splitter-demo.js +137 -0
- package/dist/collection/assets/js/demos/tag-demo.js +48 -18
- package/dist/collection/assets/js/demos/timeline-demo.js +20 -7
- package/dist/collection/assets/js/demos/tooltip-demo.js +26 -26
- package/dist/collection/assets/js/demos/tree-demo.js +28 -10
- package/dist/collection/collection-manifest.json +1 -4
- package/dist/collection/components/accordion/accordion.css +301 -0
- package/dist/collection/components/accordion/accordion.js +40 -8
- package/dist/collection/components/advanced-data-table/advanced-data-table.css +19 -5
- package/dist/collection/components/anchor/anchor.css +0 -2
- package/dist/collection/components/aside-panel/aside-panel.css +1 -3
- package/dist/collection/components/aside-panel/aside-panel.js +5 -5
- package/dist/collection/components/avatar/avatar.js +1 -1
- package/dist/collection/components/badge/badge.css +1 -0
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/button/button.css +131 -0
- package/dist/collection/components/button/button.js +128 -9
- package/dist/collection/components/card/card.css +83 -31
- package/dist/collection/components/card/card.js +46 -3
- package/dist/collection/components/checkbox/checkbox.css +8 -10
- package/dist/collection/components/checkbox/checkbox.js +2 -2
- package/dist/collection/components/code-editor/code-editor.js +1 -1
- package/dist/collection/components/code-preview/ui-code-preview.js +1 -1
- package/dist/collection/components/color-controller/color-controller.js +1 -1
- package/dist/collection/components/context-menu/context-menu.css +3 -3
- package/dist/collection/components/dialog-box/dialog-box.js +1 -1
- package/dist/collection/components/dialog-header/dialog-header.js +1 -1
- package/dist/collection/components/dock-host/ui-dock-host.js +3 -3
- package/dist/collection/components/drag-drop/drag-drop.js +1 -1
- package/dist/collection/components/empty-state/empty-state.js +1 -1
- package/dist/collection/components/fab/fab.js +2 -2
- package/dist/collection/components/fab-item/fab-item.js +1 -1
- package/dist/collection/components/horizontal-nav/horizontal-nav.js +2 -2
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/input/input.js +4 -4
- package/dist/collection/components/layout-manager/layout-manager.js +1 -1
- package/dist/collection/components/layout-manager/lm-floating-window/lm-floating-window.js +1 -1
- package/dist/collection/components/layout-manager/lm-panel/lm-panel.js +1 -1
- package/dist/collection/components/layout-manager/lm-splitter/lm-splitter.js +1 -1
- package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js +1 -1
- package/dist/collection/components/library/category-section.js +1 -1
- package/dist/collection/components/library/library-card.js +1 -1
- package/dist/collection/components/library/library.js +1 -1
- package/dist/collection/components/list/list.js +4 -4
- package/dist/collection/components/list-item/list-item.css +24 -0
- package/dist/collection/components/list-item/list-item.js +35 -4
- package/dist/collection/components/loader/loader.css +1635 -0
- package/dist/collection/components/loader/loader.js +1120 -0
- package/dist/collection/components/my-step/my-step.js +1 -1
- package/dist/collection/components/nav-bar/nav-bar.js +6 -6
- package/dist/collection/components/otp-input/otp-input.js +2 -2
- package/dist/collection/components/pattern-input/pattern-input.js +5 -5
- package/dist/collection/components/progress/progress.css +150 -15
- package/dist/collection/components/progress/progress.js +180 -18
- package/dist/collection/components/radio/radio.css +3 -3
- package/dist/collection/components/radio/radio.js +1 -1
- package/dist/collection/components/resizable-panel/resizable-panel.js +1 -1
- package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js +2 -2
- package/dist/collection/components/smart-stepper/smart-step.js +2 -2
- package/dist/collection/components/smart-stepper/smart-stepper.js +1 -1
- package/dist/collection/components/snackbar/snackbar.js +1 -1
- package/dist/collection/components/speed-dial/speed-dial.js +1 -1
- package/dist/collection/components/stack/stack.js +2 -2
- package/dist/collection/components/step/step.js +1 -1
- package/dist/collection/components/switch/switch.js +10 -10
- package/dist/collection/components/tag-group/tag-group.js +2 -2
- package/dist/collection/components/timeline-item/timeline-item.js +1 -1
- package/dist/collection/components/toolbar/toolbar.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/collection/components/top-bar/top-bar.js +2 -2
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css +19 -4
- package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js +6 -6
- package/dist/collection/components/ui-navigation-bar/navigation-item.js +3 -3
- package/dist/collection/components.js +1 -0
- package/dist/components/avatar-group.js +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/button-toggle.js +1 -1
- package/dist/components/category-section2.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog-header.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/icon.js +2 -2
- package/dist/components/input.js +1 -1
- package/dist/components/layout-manager.js +1 -1
- package/dist/components/library-card2.js +1 -1
- package/dist/components/list-group.js +1 -1
- package/dist/components/list-item.js +1 -1
- package/dist/components/lm-container2.js +1 -1
- package/dist/components/lm-floating-window2.js +1 -1
- package/dist/components/lm-panel2.js +1 -1
- package/dist/components/lm-splitter2.js +1 -1
- package/dist/components/lm-tabs2.js +1 -1
- package/dist/components/loader.js +1 -0
- package/dist/components/my-step.js +1 -1
- package/dist/components/nav-bar.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/range-slider.js +1 -1
- package/dist/components/rating.js +1 -1
- package/dist/components/resizable-panel.js +1 -1
- package/dist/components/skeleton-loader.js +1 -1
- package/dist/components/smart-step.js +1 -1
- package/dist/components/stack.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/tag-group.js +1 -1
- package/dist/components/tag.js +1 -1
- package/dist/components/timeline-item.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/ui-accordion.js +1 -1
- package/dist/components/ui-advanced-data-table.js +1 -1
- package/dist/components/ui-anchor.js +1 -1
- package/dist/components/ui-aside-panel.js +1 -1
- package/dist/components/ui-breadcrumb-item.js +1 -1
- package/dist/components/ui-breadcrumb.js +1 -1
- package/dist/components/ui-button-toggle-group.js +1 -1
- package/dist/components/ui-callout-banner.js +1 -1
- package/dist/components/ui-card.js +1 -1
- package/dist/components/ui-carousel.js +1 -1
- package/dist/components/ui-code-editor.js +1 -1
- package/dist/components/ui-code-preview.js +1 -1
- package/dist/components/ui-color-controller.js +1 -1
- package/dist/components/ui-color-picker.js +1 -1
- package/dist/components/ui-command-palette.js +1 -1
- package/dist/components/ui-dialog-box.js +1 -1
- package/dist/components/ui-divider.js +1 -1
- package/dist/components/ui-dock-host.js +1 -1
- package/dist/components/ui-dock.js +1 -1
- package/dist/components/ui-drag-drop.js +1 -1
- package/dist/components/ui-empty-state.js +1 -1
- package/dist/components/ui-fab-item.js +1 -1
- package/dist/components/ui-fab.js +1 -1
- package/dist/components/ui-file-upload.js +1 -1
- package/dist/components/ui-horizontal-nav.js +1 -1
- package/dist/components/ui-knob.js +1 -1
- package/dist/components/ui-library.js +1 -1
- package/dist/components/ui-list.js +1 -1
- package/dist/components/{ui-input-pair.d.ts → ui-loader.d.ts} +4 -4
- package/dist/components/ui-loader.js +1 -0
- package/dist/components/ui-masonry.js +1 -1
- package/dist/components/ui-meter-group.js +1 -1
- package/dist/components/ui-navigation-bar.js +1 -1
- package/dist/components/ui-navigation-item.js +1 -1
- package/dist/components/ui-number-input.js +1 -1
- package/dist/components/ui-otp-input.js +1 -1
- package/dist/components/ui-panel.js +1 -1
- package/dist/components/ui-pattern-input.js +1 -1
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-progress.js +1 -1
- package/dist/components/ui-scroll-top.js +1 -1
- package/dist/components/ui-smart-context-menu.js +1 -1
- package/dist/components/ui-smart-location-dropdown.js +1 -1
- package/dist/components/ui-smart-stepper.js +1 -1
- package/dist/components/ui-snackbar.js +1 -1
- package/dist/components/ui-speed-dial.js +1 -1
- package/dist/components/ui-splitter.js +1 -1
- package/dist/components/ui-step.js +1 -1
- package/dist/components/ui-stepper.js +1 -1
- package/dist/components/ui-tabs.js +1 -1
- package/dist/components/ui-timeline.js +1 -1
- package/dist/components/ui-timer.js +1 -1
- package/dist/components/ui-toolbar.js +1 -1
- package/dist/components/ui-top-bar.js +1 -1
- package/dist/components/ui-transfer-list.js +1 -1
- package/dist/components/ui-tree.js +1 -1
- package/dist/components/ui-workspace-manager.js +1 -1
- package/dist/esm/category-section.entry.js +1 -1
- package/dist/esm/exploration-project-tailwind.js +1 -1
- package/dist/esm/layout-manager.entry.js +1 -1
- package/dist/esm/library-card.entry.js +1 -1
- package/dist/esm/lm-container_2.entry.js +1 -1
- package/dist/esm/lm-panel_3.entry.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/my-step.entry.js +1 -1
- package/dist/esm/nav-bar.entry.js +2 -2
- package/dist/esm/{security-D2WzX6vR.js → security-Dyu3Nplq.js} +88 -154
- package/dist/esm/smart-step.entry.js +2 -2
- package/dist/esm/timeline-item.entry.js +1 -1
- package/dist/esm/{ui-accordion_10.entry.js → ui-accordion_11.entry.js} +613 -27
- package/dist/esm/ui-advanced-data-table.entry.js +1 -1
- package/dist/esm/ui-anchor.entry.js +1 -1
- package/dist/esm/ui-aside-panel.entry.js +5 -5
- package/dist/esm/ui-avatar-group_3.entry.js +5 -5
- package/dist/esm/ui-callout-banner.entry.js +1 -1
- package/dist/esm/ui-card.entry.js +26 -4
- package/dist/esm/ui-checkbox.entry.js +2 -2
- package/dist/esm/ui-code-editor.entry.js +2 -2
- package/dist/esm/ui-code-preview.entry.js +1 -1
- package/dist/esm/ui-color-controller.entry.js +1 -1
- package/dist/esm/ui-dialog-box.entry.js +1 -1
- package/dist/esm/ui-dock-host.entry.js +3 -3
- package/dist/esm/ui-drag-drop.entry.js +1 -1
- package/dist/esm/ui-empty-state.entry.js +1 -1
- package/dist/esm/ui-fab-item.entry.js +1 -1
- package/dist/esm/ui-fab.entry.js +2 -2
- package/dist/esm/ui-library.entry.js +1 -1
- package/dist/esm/ui-list-group_2.entry.js +9 -5
- package/dist/esm/ui-list.entry.js +4 -4
- package/dist/esm/ui-navigation-item.entry.js +3 -3
- package/dist/esm/ui-otp-input.entry.js +2 -2
- package/dist/esm/{ui-pagination_3.entry.js → ui-pagination_4.entry.js} +202 -1
- package/dist/esm/ui-pattern-input.entry.js +5 -5
- package/dist/esm/ui-popover.entry.js +1 -1
- package/dist/esm/ui-progress.entry.js +101 -17
- package/dist/esm/ui-resizable-panel.entry.js +1 -1
- package/dist/esm/ui-smart-location-dropdown.entry.js +2 -2
- package/dist/esm/ui-smart-stepper.entry.js +1 -1
- package/dist/esm/ui-snackbar.entry.js +1 -1
- package/dist/esm/ui-step.entry.js +1 -1
- package/dist/esm/ui-stepper.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +9 -9
- package/dist/esm/ui-tabs.entry.js +1 -1
- package/dist/esm/ui-timeline.entry.js +1 -1
- package/dist/esm/ui-toolbar.entry.js +1 -1
- package/dist/esm/ui-tooltip.entry.js +4 -4
- package/dist/esm/ui-transfer-list.entry.js +1 -1
- package/dist/esm/ui-workspace-manager.entry.js +1 -1
- package/dist/exploration-project-tailwind/exploration-project-tailwind.esm.js +1 -1
- package/dist/exploration-project-tailwind/{p-c7e87fbb.entry.js → p-036d2a44.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-62352ef2.entry.js → p-05a436d3.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-a4f52a76.entry.js → p-16bdd162.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-85bf89fd.entry.js → p-20ecc116.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-2347d21b.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-3d381f75.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-e5322e59.entry.js → p-4288c158.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-2f1aebb3.entry.js → p-4417a9d8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-049744f9.entry.js → p-44742ddd.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-73d29a4a.entry.js → p-4aaa8e40.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-6fa9dc15.entry.js → p-4bef8bed.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-64e3a484.entry.js → p-4efd63ce.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c5ddc817.entry.js → p-54965530.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-5c835d90.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-4de419d5.entry.js → p-6b838549.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-c174a372.entry.js → p-6ddbee42.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-7515b1e3.entry.js → p-70bacda8.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-9fa70359.entry.js → p-71d95bb1.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-2d273118.entry.js → p-7889bfc4.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-0b004861.entry.js → p-790556f0.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-f5719913.entry.js → p-7ba2258a.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-81961fb1.entry.js → p-81ebba11.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-5e3e80ae.entry.js → p-8578b616.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-3d3d48fd.entry.js → p-8b57fe4e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-ffb1754a.entry.js → p-97af03cc.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-f0830120.entry.js → p-98e91da5.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d2308a00.entry.js → p-9bd14f69.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-Dyu3Nplq.js +2 -0
- package/dist/exploration-project-tailwind/{p-ba21fed3.entry.js → p-a27f59d2.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-70d82d79.entry.js → p-a7b07cf4.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-5508874f.entry.js → p-bd89d060.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-9d0c8760.entry.js → p-c02284ea.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d419eaf0.entry.js → p-c1c8ac28.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-c63c522e.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c90722ec.entry.js → p-cbee2607.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-287dbf09.entry.js → p-d114a347.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-8d951aef.entry.js → p-d2e45c5e.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-77cc333a.entry.js → p-d59da767.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-46596a28.entry.js → p-d6ce9721.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-875be805.entry.js → p-dc92a343.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-4f6bba75.entry.js → p-e22317c1.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-d16c9635.entry.js → p-e76318c7.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-e8c6d395.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-c2ca71ac.entry.js → p-eab5ad36.entry.js} +1 -1
- package/dist/exploration-project-tailwind/p-f0bc5d7e.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f1beee72.entry.js +1 -0
- package/dist/exploration-project-tailwind/p-f543392f.entry.js +1 -0
- package/dist/exploration-project-tailwind/{p-46efdea3.entry.js → p-f61cfb7c.entry.js} +1 -1
- package/dist/exploration-project-tailwind/{p-77124686.entry.js → p-fb4aca69.entry.js} +1 -1
- package/dist/types/components/accordion/accordion.d.ts +10 -2
- package/dist/types/components/button/button.d.ts +9 -0
- package/dist/types/components/card/card.d.ts +4 -0
- package/dist/types/components/list-item/list-item.d.ts +1 -0
- package/dist/types/components/loader/loader.d.ts +145 -0
- package/dist/types/components/progress/progress.d.ts +34 -2
- package/dist/types/components.d.ts +509 -993
- package/dist/types/types/common.d.ts +1 -1
- package/dist/types/types/common.type.d.ts +1 -1
- package/package.json +8 -7
- package/dist/cjs/ui-checkbox-group.cjs.entry.js +0 -330
- package/dist/cjs/ui-image-button.cjs.entry.js +0 -67
- package/dist/cjs/ui-input-pair.cjs.entry.js +0 -44
- package/dist/cjs/ui-radio-group.cjs.entry.js +0 -205
- package/dist/cjs/ui-radio.cjs.entry.js +0 -206
- package/dist/collection/components/checkbox-group/checkbox-group.css +0 -223
- package/dist/collection/components/checkbox-group/checkbox-group.js +0 -1001
- package/dist/collection/components/checkbox-group/types.js +0 -1
- package/dist/collection/components/image-button/image-button.css +0 -154
- package/dist/collection/components/image-button/image-button.js +0 -310
- package/dist/collection/components/image-button/types.js +0 -1
- package/dist/collection/components/input-pair/input-pair.css +0 -72
- package/dist/collection/components/input-pair/input-pair.js +0 -309
- package/dist/collection/components/radio-group/radio-group.css +0 -202
- package/dist/collection/components/radio-group/radio-group.js +0 -903
- package/dist/collection/components/radio-group/types.js +0 -1
- package/dist/components/ui-checkbox-group.d.ts +0 -11
- package/dist/components/ui-checkbox-group.js +0 -1
- package/dist/components/ui-image-button.d.ts +0 -11
- package/dist/components/ui-image-button.js +0 -1
- package/dist/components/ui-input-pair.js +0 -1
- package/dist/components/ui-radio-group.d.ts +0 -11
- package/dist/components/ui-radio-group.js +0 -1
- package/dist/esm/ui-checkbox-group.entry.js +0 -328
- package/dist/esm/ui-image-button.entry.js +0 -65
- package/dist/esm/ui-input-pair.entry.js +0 -42
- package/dist/esm/ui-radio-group.entry.js +0 -203
- package/dist/esm/ui-radio.entry.js +0 -204
- package/dist/exploration-project-tailwind/p-01c7db7a.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-5ce0dbd8.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-6ab80ead.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-6e9694f2.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-7376ac95.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-77a21491.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-7f91d949.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-807c6555.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-D2WzX6vR.js +0 -2
- package/dist/exploration-project-tailwind/p-ab752761.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ce1222a1.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-e90d5307.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-ecda1cc3.entry.js +0 -1
- package/dist/exploration-project-tailwind/p-f11e5cae.entry.js +0 -1
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +0 -87
- package/dist/types/components/checkbox-group/types.d.ts +0 -8
- package/dist/types/components/image-button/image-button.d.ts +0 -31
- package/dist/types/components/image-button/types.d.ts +0 -1
- package/dist/types/components/input-pair/input-pair.d.ts +0 -28
- package/dist/types/components/radio-group/radio-group.d.ts +0 -74
- package/dist/types/components/radio-group/types.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as 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";const n=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{top:80px;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}]}]),s=n,h=function(){"undefined"!=typeof customElements&&["ui-anchor","ui-icon"].forEach((t=>{switch(t){case"ui-anchor":customElements.get(r(t))||customElements.define(r(t),n);break;case"ui-icon":customElements.get(r(t))||a()}}))};export{s as UiAnchor,h 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{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 e,HTMLElement as i,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{d as o,a as r}from"./badge.js";import{d}from"./context-menu.js";import{d as l}from"./icon.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="1s";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:"96228f17ee1f0fab8f11427ee6055f42234418cb",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:"5dae19f30e04a7fc18cb0fef62a8319f79296160",class:{overlay:!0,visible:this.open},style:{backdropFilter:"0"!==this.backdropBlur?`blur(${this.backdropBlur})`:"none"},onClick:this.handleOverlayClick}),t("div",{key:"688ced9dccc2bfe6ee489e8283146f8863044224",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:"e78d13a733dbd6e9b2949634c8b107cab6225d24",class:"loading-overlay"},t("div",{key:"c7db0694fba52bfbc8d6a90440976556a85056c6",class:"spinner"})),this.resizable&&!this.mini&&t("div",{key:"ecc06e0c68c743eff86b12e2bb978369743924d7",class:"resize-handle resize-handle-"+this.direction,style:this.resizeHandleColor?{backgroundColor:this.resizeHandleColor}:{},onMouseDown:this.handleResizeStart},this.showResizeIndicator&&t("div",{key:"28156c16815117726861da00bb93165c174fc1fe",class:"resize-indicator"},t("span",{key:"6b4e06e9ae3935a5a68dfbd2a51b53b1172fdd0f"}),t("span",{key:"82558b01333dff587f0afd3d723a7e592a757ede"}),t("span",{key:"c8e3a7ab11462c951e1477b5abcae131e2019129"}))),t("div",{key:"ab67f36b3f4dd65dffdb6fd4e12bb09d04fa4d59",class:"panel-header-toolbar"},t("div",{key:"627055ac7880157e1ccdb43587832fb151800202",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:"67bd0e21f1411391f2ee3bfc9d752ce267012401",variant:"ghost",size:"sm",icon:"mic",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Voice Interaction",class:this.isListening?"active":"",onClick:()=>this.initVoice()})),t("div",{key:"fa9bad7d620cab7d18cf9234f50f985378b472f5",class:"toolbar-right"},this.showActions&&t("ui-button",{key:"7688f94038ec6a27423be56b787873631614cdc2",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:"32daa2cbf1311059c80058a3ad587946f24b8e59",items:this.actionItems,target:"#aside-actions-trigger",openOn:"click",placement:"bottom",onItemSelect:e=>this.asideActionClick.emit(e.detail)}),this.pinned&&t("ui-icon",{key:"a3e70a59b575c0376c151e0c6a1db1553a9dd1e9",name:"pin",library:"lucide",size:"14px",class:"pin-status"}),this.closeable&&!this.pinned&&t("ui-button",{key:"c686337c8755a0375b4c87239bf95d2838f8bd36",variant:"ghost",size:"sm",icon:"x",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"Close panel",onClick:this.handleClose}))),t("div",{key:"b4c1294140c10f94287ba98fa86f16627c61bb5b",class:"panel-header"},t("div",{key:"cd0533b0730d96b11136e68ce6a1e0372885ff4f",class:"header-main"},t("slot",{key:"687c43c34a171ff4351e8a41778da102826ce2f8",name:"header"}),this.badge&&t("span",{key:"830f3cb27cf809029f686bacbd488a6dcbcedad3",class:"header-badge"},this.badge)),this.progress>-1&&t("div",{key:"6c37bd10a8d7bfac71cc7aa619c44b4145400681",class:"header-progress"},t("div",{key:"07fbdc20712c119f1e345fcd070f2eb33f7380e6",class:"progress-bar",style:{width:Math.min(100,Math.max(0,this.progress))+"%"}}))),t("div",{key:"569c75c3b02918bb22d3ffc4322a882267b92bb9",class:"panel-content"},t("slot",{key:"9255c9b298178ae03bae04acd856d8b528ddf808",name:"content"}),t("slot",{key:"0c071717c63c6baabfd5350cad38f57621989c6c"})),!this.mini&&t("div",{key:"d2a629a5864e57d917ca7a5a8256125a8a8ec0a4",class:"panel-footer"},t("slot",{key:"9b79d14c480eefa03ef84e73e5363bca9cd63e6e",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:1s;--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);transition-delay:var(--aside-transition-duration);z-index:var(--aside-z-index-overlay)}.overlay.visible{opacity:1;visibility:visible;transition-delay:0s}.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}]}]),h=c,p=function(){"undefined"!=typeof customElements&&["ui-aside-panel","ui-badge","ui-button","ui-context-menu","ui-icon"].forEach((e=>{switch(e){case"ui-aside-panel":customElements.get(n(e))||customElements.define(n(e),c);break;case"ui-badge":customElements.get(n(e))||r();break;case"ui-button":customElements.get(n(e))||o();break;case"ui-context-menu":customElements.get(n(e))||d();break;case"ui-icon":customElements.get(n(e))||l()}}))};export{h as UiAsidePanel,p 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 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 +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";const
|
|
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:"7247bee3f00e6cc3de54c9860d014243b5d9c4cb",class:"breadcrumb-content"},this.icon&&a("span",{key:"2537f399d8d557033b72f63a9bc190b208ebdf88",class:"breadcrumb-icon"},a("ui-icon",{key:"951ece78e4e9936fd8f459bb041940c9f6632390",name:this.icon,library:this.iconLibrary,size:"1.1em"})),a("span",{key:"9b2cc37dc1ae16e0b4f73ee0b12ecd168c930c49",class:"breadcrumb-label"},a("slot",{key:"d150b1d67baaa1f1ee0a679a4eded9fb2fe70e88"},this.label)),void 0!==this.badge&&a("span",{key:"90d28ba9ab8e41cb81e4956fb4eb2a06fc940145",class:"breadcrumb-badge"},this.badge));return a(i,{key:"867a980816ed6ca77aeedd631e00f284a8cccbf5",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";const d=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]}]),b=d,p=function(){"undefined"!=typeof customElements&&["ui-breadcrumb","ui-badge","ui-button","ui-icon"].forEach((r=>{switch(r){case"ui-breadcrumb":customElements.get(o(r))||customElements.define(o(r),d);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()}}))};export{b as UiBreadcrumb,p 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,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 +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";const h=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}]}]),p=h,d=function(){"undefined"!=typeof customElements&&["ui-button-toggle-group","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-button-toggle-group":customElements.get(r(t))||customElements.define(r(t),h);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()}}))};export{p as UiButtonToggleGroup,d as defineCustomElement}
|
|
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 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{s as l,d as r}from"./icon.js";import{d as n,a as c}from"./badge.js";const u=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.calloutDismiss=e(this,"calloutDismiss",7),this.calloutShow=e(this,"calloutShow",7),this.calloutAction=e(this,"calloutAction",7)}ariaRole;testId;focusOnShow=!1;progress;i18n;_id=Math.random().toString(36).slice(2,10);variant="info";heading;message;icon;iconLibrary="lucide";closable=!0;dismissLabel="Dismiss";outlined=!1;compact=!1;banner=!1;autoClose=0;loading=!1;pulse=!1;noIcon=!1;solid=!1;accentBar=!1;pauseOnHover=!1;sticky=!1;truncate=0;size="md";persistKey;marquee=!1;marqueeSpeed=18;visible=!0;closing=!1;paused=!1;expanded=!1;closeReady=!0;slottedHTML="";get el(){return this}calloutDismiss;calloutShow;calloutAction;autoCloseTimer;closeBtnTimer;dismissTimer;remainingTime=0;timerStart=0;handlePersistKeyChange(){this.checkPersistence()}componentWillLoad(){this.checkPersistence()}checkPersistence(){if(this.persistKey&&"undefined"!=typeof window){const t=localStorage.getItem("ui-callout-dismissed-"+this.persistKey);"true"!==t&&"1"!==t||(this.visible=!1)}}connectedCallback(){this.focusOnShow&&setTimeout((()=>{const t=this.hostElement?.shadowRoot?.querySelector(".callout-close");t?t.focus():this.hostElement?.focus()}),100),this.scheduleAutoClose(),this.closableAfter>0&&this.closable?(this.closeReady=!1,this.closeBtnTimer=setTimeout((()=>{this.closeReady=!0}),this.closableAfter)):this.closeReady=!0,this.readSlottedContent()}readSlottedContent(){this.marquee&&setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".callout-message slot:not([name])");if(t){const a=t.assignedNodes().map((t=>3===t.nodeType?t.textContent:t.outerHTML||t.innerHTML||t.textContent||"")).join("");this.slottedHTML=l(a)}}),50)}disconnectedCallback(){clearTimeout(this.autoCloseTimer),clearTimeout(this.closeBtnTimer),clearTimeout(this.dismissTimer)}enterFrom="top";href;target;closableAfter=0;async update(t){Object.entries(t).forEach((([t,a])=>{t in this&&(this[t]=a)}))}handleActionClick=t=>{t.target&&t.target.closest('[slot="actions"]')&&this.calloutAction.emit()};onAutoCloseChange(){clearTimeout(this.autoCloseTimer),this.scheduleAutoClose()}scheduleAutoClose(t){const a=t??this.autoClose;a>0&&this.visible&&(this.timerStart=Date.now(),this.remainingTime=a,this.autoCloseTimer=setTimeout((()=>this.dismiss()),a))}dismiss(){this.persistKey&&"undefined"!=typeof window&&localStorage.setItem("ui-callout-dismissed-"+this.persistKey,"true"),this.closing=!0,clearTimeout(this.dismissTimer),this.dismissTimer=setTimeout((()=>{this.visible=!1,this.closing=!1,this.calloutDismiss.emit()}),250)}async hide(){this.dismiss()}async show(){this.persistKey&&"undefined"!=typeof window&&localStorage.removeItem("ui-callout-dismissed-"+this.persistKey),this.visible=!0,this.closing=!1,this.calloutShow.emit(),this.scheduleAutoClose()}handleDismiss=()=>{this.dismiss()};handleMouseEnter=()=>{if(this.pauseOnHover&&this.autoClose>0&&this.visible&&!this.closing){clearTimeout(this.autoCloseTimer);const t=Date.now()-this.timerStart;this.remainingTime=Math.max(0,this.remainingTime-t),this.paused=!0}};handleMouseLeave=()=>{this.pauseOnHover&&this.paused&&(this.paused=!1,this.timerStart=Date.now(),this.autoCloseTimer=setTimeout((()=>this.dismiss()),this.remainingTime))};toggleExpand=()=>{this.expanded=!this.expanded};defaultIcon(){return{info:"info",success:"check-circle",warning:"triangle-alert",danger:"circle-x",neutral:"bell"}[this.variant]??"info"}getIcon(){const t=this.icon??this.defaultIcon();return o("ui-icon",{name:t,library:this.iconLibrary,size:"1.25em"})}render(){if(!this.visible)return null;const t={["variant-"+this.variant]:!0,outlined:this.outlined,compact:this.compact,banner:this.banner,closing:this.closing,loading:this.loading,pulse:this.pulse,"no-icon":this.noIcon,solid:this.solid,"accent-bar":this.accentBar,sticky:this.sticky,marquee:this.marquee,paused:this.paused,["size-"+this.size]:!0,["enter-"+this.enterFrom]:!0},a="callout-title-"+this._id,e="callout-msg-"+this._id,s=!!this.href,r=this.autoClose>0?"assertive":"polite",n=this.i18n||{},c=o("div",{class:"callout-inner",role:s?"button":"status","aria-live":r,"aria-labelledby":a,"aria-describedby":e,tabIndex:s&&!this.href?0:void 0,onKeyDown:s&&!this.href?t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleActionClick(t))}:void 0,"data-testid":this.testId},!this.noIcon&&o("div",{class:"callout-icon",part:"icon"},this.loading?o("span",{class:"callout-spinner","aria-hidden":"true"}):o("slot",{name:"icon"},this.getIcon())),o("div",{class:"callout-content",part:"content"},o("div",{class:"callout-title",part:"title",id:a},o("slot",{name:"title"},this.heading)),!this.compact&&o("div",{class:{"callout-message":!0,truncated:this.truncate>0&&!this.expanded},part:"message",id:e,style:this.truncate>0?{"--callout-truncate-lines":this.truncate+""}:{}},this.marquee?o("div",{class:"callout-marquee-track",style:{"--marquee-speed":12*this.marqueeSpeed+"s"}},o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{style:{display:"none"}},o("slot",null,this.message))):o("slot",null,this.message)),!this.compact&&this.truncate>0&&o("ui-button",{variant:"ghost",class:"callout-show-more",onClick:this.toggleExpand,size:"sm",label:this.expanded?n.showLessLabel||"Show less ↑":n.showMoreLabel||"Show more ↓"}),!this.compact&&o("div",{class:"callout-actions",part:"actions",onClick:this.handleActionClick},o("slot",{name:"actions"}))),this.compact&&o("div",{class:"callout-inline-message",part:"message",id:e},o("slot",null,this.message)),this.closable&&this.closeReady&&o("ui-button",{variant:"ghost",class:"callout-close",onClick:this.handleDismiss,ariaLabel:n.dismissLabel||this.dismissLabel,icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),u="number"==typeof this.progress?o("div",{class:"callout-progress-bar",style:{width:this.progress+"%"},"aria-valuenow":this.progress,"aria-valuemin":"0","aria-valuemax":"100",role:"progressbar"}):this.autoClose>0&&this.visible&&!this.closing&&o("div",{class:{"callout-progress":!0,paused:this.paused},part:"progress",style:{animationDuration:this.autoClose+"ms"}});return this.href?o("a",{href:this.href,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u):o(i,{class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u)}static get watchers(){return{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange: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}@media (prefers-color-scheme: dark){:host(.variant-info) .callout-inner{--callout-bg:#1e293b;--callout-text:#60a5fa;--callout-border:rgba(59, 130, 246, 0.35);--callout-icon-bg:rgba(59, 130, 246, 0.18);--callout-shadow:rgba(59, 130, 246, 0.13)}:host(.variant-success) .callout-inner{--callout-bg:#052e16;--callout-text:#4ade80;--callout-border:rgba(34,197,94,0.35);--callout-icon-bg:rgba(34,197,94,0.18);--callout-shadow:rgba(34,197,94,0.13)}:host(.variant-warning) .callout-inner{--callout-bg:#78350f;--callout-text:#facc15;--callout-border:rgba(251,191,36,0.35);--callout-icon-bg:rgba(251,191,36,0.18);--callout-shadow:rgba(251,191,36,0.13)}:host(.variant-danger) .callout-inner{--callout-bg:#7f1d1d;--callout-text:#f87171;--callout-border:rgba(239,68,68,0.35);--callout-icon-bg:rgba(239,68,68,0.18);--callout-shadow:rgba(239,68,68,0.13)}:host(.variant-neutral) .callout-inner{--callout-bg:#0f172a;--callout-text:#f1f5f9;--callout-border:rgba(148,163,184,0.25);--callout-icon-bg:rgba(148,163,184,0.13);--callout-shadow:rgba(148,163,184,0.09)}}a[part=callout]{text-decoration:none;color:inherit;display:block;transition:box-shadow 0.15s, filter 0.15s}a[part=callout]:hover,a[part=callout]:focus-visible{filter:brightness(1.04);box-shadow:0 6px 24px var(--callout-shadow, rgba(15, 23, 42, 0.13))}a[part=callout]:active{filter:brightness(0.98)}@keyframes callout-slide-in-top{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-top{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(-16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-bottom{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-bottom{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-left{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-left{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(-32px);max-width:0;padding:0;margin:0}}@keyframes callout-slide-in-right{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-right{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(32px);max-width:0;padding:0;margin:0}}@keyframes callout-fade-in{from{opacity:0}to{opacity:1}}@keyframes callout-fade-out{from{opacity:1}to{opacity:0}}@keyframes callout-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes callout-spin{to{transform:rotate(360deg)}}@keyframes callout-pulse{0%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 var(--callout-border)}70%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 7px transparent}100%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 transparent}}:host{display:block;width:100%}:host(.enter-top){animation:callout-slide-in-top 0.25s ease both}:host(.enter-bottom){animation:callout-slide-in-bottom 0.25s ease both}:host(.enter-left){animation:callout-slide-in-left 0.25s ease both}:host(.enter-right){animation:callout-slide-in-right 0.25s ease both}:host(.enter-fade){animation:callout-fade-in 0.25s ease both}:host(.closing.enter-top){animation:callout-slide-out-top 0.25s ease both;pointer-events:none}:host(.closing.enter-bottom){animation:callout-slide-out-bottom 0.25s ease both;pointer-events:none}:host(.closing.enter-left){animation:callout-slide-out-left 0.25s ease both;pointer-events:none}:host(.closing.enter-right){animation:callout-slide-out-right 0.25s ease both;pointer-events:none}:host(.closing.enter-fade){animation:callout-fade-out 0.25s ease both;pointer-events:none}:host(.banner){border-radius:0}.callout-inner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;position:relative;background:var(--callout-bg, #eff6ff);color:var(--callout-text, #1e3a8a);border:1px solid var(--callout-border, transparent);box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07));overflow:hidden}:host(.compact) .callout-inner{padding:8px 14px;gap:10px;border-radius:999px;align-items:center;grid-template-columns:auto auto 1fr auto}:host(.size-sm) .callout-inner{padding:6px 10px;border-radius:8px;gap:7px}:host(.size-sm) .callout-title,:host(.size-sm) .callout-message,:host(.size-sm) .callout-inline-message{font-size:0.78rem}:host(.size-sm) .callout-icon{width:22px;height:22px;font-size:1em}:host(.size-md) .callout-inner{padding:14px 18px;border-radius:14px;gap:12px}:host(.size-md) .callout-title,:host(.size-md) .callout-message,:host(.size-md) .callout-inline-message{font-size:0.95rem}:host(.size-md) .callout-icon{width:38px;height:38px;font-size:1.25em}:host(.size-lg) .callout-inner{padding:22px 28px;border-radius:22px;gap:18px}:host(.size-lg) .callout-title,:host(.size-lg) .callout-message,:host(.size-lg) .callout-inline-message{font-size:1.15rem}:host(.size-lg) .callout-icon{width:54px;height:54px;font-size:1.5em}:host(.compact) .callout-icon{width:28px;height:28px;border-radius:50%}:host(.compact) .callout-title{font-size:0.85rem}.callout-inline-message{font-size:0.85rem;opacity:0.8;flex:1}:host(.banner) .callout-inner{border-radius:0;border-left:none;border-right:none;box-shadow:none}.callout-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--callout-icon-bg, rgba(255, 255, 255, 0.5))}.callout-content{display:flex;flex-direction:column;gap:3px;min-width:0}.callout-title{font-weight:600;letter-spacing:-0.01em;font-size:0.95rem;line-height:1.3}.callout-message{font-size:0.875rem;opacity:0.85;line-height:1.5}.callout-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.callout-close{background:transparent;border:none;padding:5px;flex-shrink:0;border-radius:999px;cursor:pointer;color:inherit;opacity:0.6;transition:opacity 0.15s ease, background 0.15s ease;display:inline-flex;align-items:center;justify-content:center}.callout-close:hover{opacity:1;background:rgba(15, 23, 42, 0.08)}.callout-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.callout-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:0.3;transform-origin:left center;animation:callout-progress linear both}:host(.outlined) .callout-inner{box-shadow:none;background:transparent;border-color:var(--callout-text, currentColor) !important}:host(.variant-info) .callout-inner{--callout-bg:#eff6ff;--callout-text:#1d4ed8;--callout-border:rgba(59, 130, 246, 0.3);--callout-icon-bg:rgba(59, 130, 246, 0.12);--callout-shadow:rgba(59, 130, 246, 0.08)}:host(.variant-success) .callout-inner{--callout-bg:#f0fdf4;--callout-text:#15803d;--callout-border:rgba(22, 163, 74, 0.3);--callout-icon-bg:rgba(22, 163, 74, 0.12);--callout-shadow:rgba(22, 163, 74, 0.08)}:host(.variant-warning) .callout-inner{--callout-bg:#fffbeb;--callout-text:#b45309;--callout-border:rgba(217, 119, 6, 0.3);--callout-icon-bg:rgba(217, 119, 6, 0.12);--callout-shadow:rgba(217, 119, 6, 0.08)}:host(.variant-danger) .callout-inner{--callout-bg:#fef2f2;--callout-text:#dc2626;--callout-border:rgba(220, 38, 38, 0.3);--callout-icon-bg:rgba(220, 38, 38, 0.12);--callout-shadow:rgba(220, 38, 38, 0.08)}:host(.variant-neutral) .callout-inner{--callout-bg:#f8fafc;--callout-text:#334155;--callout-border:rgba(100, 116, 139, 0.25);--callout-icon-bg:rgba(100, 116, 139, 0.1);--callout-shadow:rgba(15, 23, 42, 0.06)}@media (max-width: 640px){.callout-inner{grid-template-columns:auto 1fr auto;padding:12px 14px}}.callout-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--callout-icon-bg, rgba(255, 255, 255, 0.3));border-top-color:var(--callout-text, currentColor);border-radius:50%;animation:callout-spin 0.7s linear infinite;flex-shrink:0}:host(.no-icon) .callout-inner{grid-template-columns:1fr auto}:host(.compact.no-icon) .callout-inner{grid-template-columns:auto 1fr auto}:host(.pulse) .callout-inner{animation:callout-pulse 1.8s ease-in-out infinite}:host(.solid) .callout-close:hover{background:rgba(255, 255, 255, 0.15)}:host(.solid.variant-info) .callout-inner{--callout-bg:#1d4ed8;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(29, 78, 216, 0.3)}:host(.solid.variant-success) .callout-inner{--callout-bg:#15803d;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(21, 128, 61, 0.3)}:host(.solid.variant-warning) .callout-inner{--callout-bg:#d97706;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(217, 119, 6, 0.3)}:host(.solid.variant-danger) .callout-inner{--callout-bg:#dc2626;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(220, 38, 38, 0.3)}:host(.solid.variant-neutral) .callout-inner{--callout-bg:#334155;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.15);--callout-shadow:rgba(51, 65, 85, 0.3)}:host(.accent-bar) .callout-inner{border-left:4px solid var(--callout-text, currentColor);border-radius:0 14px 14px 0;padding-left:14px}:host(.accent-bar.banner) .callout-inner{border-radius:0}:host(.accent-bar.compact) .callout-inner{border-radius:0 999px 999px 0}:host(.sticky){position:sticky;top:0;z-index:200}.callout-progress.paused,:host(.paused) .callout-marquee-content{animation-play-state:paused}.callout-message.truncated{display:-webkit-box;-webkit-line-clamp:var(--callout-truncate-lines, 3);line-clamp:var(--callout-truncate-lines, 3);-webkit-box-orient:vertical;overflow:hidden}.callout-show-more{background:none;border:none;padding:0;margin-top:4px;font-size:0.8rem;font-weight:600;color:var(--callout-text, currentColor);cursor:pointer;opacity:0.75;text-decoration:underline;text-underline-offset:2px;display:inline-block;line-height:1.4}.callout-show-more:hover{opacity:1}.callout-show-more:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}:host(.marquee) .callout-inner{overflow:hidden}.callout-marquee-track{display:flex;width:100%;overflow:hidden;user-select:none;gap:3rem;}.callout-marquee-group{flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;gap:3rem;min-width:100%;animation:callout-scroll var(--marquee-speed, 18s) linear infinite;will-change:transform}.callout-marquee-item{display:flex;align-items:center;white-space:nowrap}@keyframes callout-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 3rem))}}:host(.paused) .callout-marquee-group{animation-play-state:paused}:host(.marquee) .callout-message{overflow:hidden}'}},[769,"ui-callout-banner",{ariaRole:[1,"aria-role"],testId:[1,"test-id"],focusOnShow:[4,"focus-on-show"],progress:[2],i18n:[16],variant:[1],heading:[1],message:[1],icon:[1],iconLibrary:[1,"icon-library"],closable:[4],dismissLabel:[1,"dismiss-label"],outlined:[4],compact:[4],banner:[4],autoClose:[2,"auto-close"],loading:[4],pulse:[4],noIcon:[4,"no-icon"],solid:[4],accentBar:[4,"accent-bar"],pauseOnHover:[4,"pause-on-hover"],sticky:[4],truncate:[2],size:[1],persistKey:[1,"persist-key"],marquee:[4],marqueeSpeed:[2,"marquee-speed"],enterFrom:[1,"enter-from"],href:[1],target:[1],closableAfter:[2,"closable-after"],visible:[32],closing:[32],paused:[32],expanded:[32],closeReady:[32],slottedHTML:[32],update:[64],hide:[64],show:[64]},void 0,{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange:0}]}]),h=u,d=function(){"undefined"!=typeof customElements&&["ui-callout-banner","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-callout-banner":customElements.get(s(t))||customElements.define(s(t),u);break;case"ui-badge":customElements.get(s(t))||c();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||r()}}))};export{h as UiCalloutBanner,d as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{s as l,d as r}from"./icon.js";import{d as n,a as c}from"./badge.js";import{d as u}from"./loader.js";const h=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.calloutDismiss=e(this,"calloutDismiss",7),this.calloutShow=e(this,"calloutShow",7),this.calloutAction=e(this,"calloutAction",7)}ariaRole;testId;focusOnShow=!1;progress;i18n;_id=Math.random().toString(36).slice(2,10);variant="info";heading;message;icon;iconLibrary="lucide";closable=!0;dismissLabel="Dismiss";outlined=!1;compact=!1;banner=!1;autoClose=0;loading=!1;pulse=!1;noIcon=!1;solid=!1;accentBar=!1;pauseOnHover=!1;sticky=!1;truncate=0;size="md";persistKey;marquee=!1;marqueeSpeed=18;visible=!0;closing=!1;paused=!1;expanded=!1;closeReady=!0;slottedHTML="";get el(){return this}calloutDismiss;calloutShow;calloutAction;autoCloseTimer;closeBtnTimer;dismissTimer;remainingTime=0;timerStart=0;handlePersistKeyChange(){this.checkPersistence()}componentWillLoad(){this.checkPersistence()}checkPersistence(){if(this.persistKey&&"undefined"!=typeof window){const t=localStorage.getItem("ui-callout-dismissed-"+this.persistKey);"true"!==t&&"1"!==t||(this.visible=!1)}}connectedCallback(){this.focusOnShow&&setTimeout((()=>{const t=this.hostElement?.shadowRoot?.querySelector(".callout-close");t?t.focus():this.hostElement?.focus()}),100),this.scheduleAutoClose(),this.closableAfter>0&&this.closable?(this.closeReady=!1,this.closeBtnTimer=setTimeout((()=>{this.closeReady=!0}),this.closableAfter)):this.closeReady=!0,this.readSlottedContent()}readSlottedContent(){this.marquee&&setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".callout-message slot:not([name])");if(t){const a=t.assignedNodes().map((t=>3===t.nodeType?t.textContent:t.outerHTML||t.innerHTML||t.textContent||"")).join("");this.slottedHTML=l(a)}}),50)}disconnectedCallback(){clearTimeout(this.autoCloseTimer),clearTimeout(this.closeBtnTimer),clearTimeout(this.dismissTimer)}enterFrom="top";href;target;closableAfter=0;async update(t){Object.entries(t).forEach((([t,a])=>{t in this&&(this[t]=a)}))}handleActionClick=t=>{t.target&&t.target.closest('[slot="actions"]')&&this.calloutAction.emit()};onAutoCloseChange(){clearTimeout(this.autoCloseTimer),this.scheduleAutoClose()}scheduleAutoClose(t){const a=t??this.autoClose;a>0&&this.visible&&(this.timerStart=Date.now(),this.remainingTime=a,this.autoCloseTimer=setTimeout((()=>this.dismiss()),a))}dismiss(){this.persistKey&&"undefined"!=typeof window&&localStorage.setItem("ui-callout-dismissed-"+this.persistKey,"true"),this.closing=!0,clearTimeout(this.dismissTimer),this.dismissTimer=setTimeout((()=>{this.visible=!1,this.closing=!1,this.calloutDismiss.emit()}),250)}async hide(){this.dismiss()}async show(){this.persistKey&&"undefined"!=typeof window&&localStorage.removeItem("ui-callout-dismissed-"+this.persistKey),this.visible=!0,this.closing=!1,this.calloutShow.emit(),this.scheduleAutoClose()}handleDismiss=()=>{this.dismiss()};handleMouseEnter=()=>{if(this.pauseOnHover&&this.autoClose>0&&this.visible&&!this.closing){clearTimeout(this.autoCloseTimer);const t=Date.now()-this.timerStart;this.remainingTime=Math.max(0,this.remainingTime-t),this.paused=!0}};handleMouseLeave=()=>{this.pauseOnHover&&this.paused&&(this.paused=!1,this.timerStart=Date.now(),this.autoCloseTimer=setTimeout((()=>this.dismiss()),this.remainingTime))};toggleExpand=()=>{this.expanded=!this.expanded};defaultIcon(){return{info:"info",success:"check-circle",warning:"triangle-alert",danger:"circle-x",neutral:"bell"}[this.variant]??"info"}getIcon(){const t=this.icon??this.defaultIcon();return o("ui-icon",{name:t,library:this.iconLibrary,size:"1.25em"})}render(){if(!this.visible)return null;const t={["variant-"+this.variant]:!0,outlined:this.outlined,compact:this.compact,banner:this.banner,closing:this.closing,loading:this.loading,pulse:this.pulse,"no-icon":this.noIcon,solid:this.solid,"accent-bar":this.accentBar,sticky:this.sticky,marquee:this.marquee,paused:this.paused,["size-"+this.size]:!0,["enter-"+this.enterFrom]:!0},a="callout-title-"+this._id,e="callout-msg-"+this._id,s=!!this.href,r=this.autoClose>0?"assertive":"polite",n=this.i18n||{},c=o("div",{class:"callout-inner",role:s?"button":"status","aria-live":r,"aria-labelledby":a,"aria-describedby":e,tabIndex:s&&!this.href?0:void 0,onKeyDown:s&&!this.href?t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleActionClick(t))}:void 0,"data-testid":this.testId},!this.noIcon&&o("div",{class:"callout-icon",part:"icon"},this.loading?o("span",{class:"callout-spinner","aria-hidden":"true"}):o("slot",{name:"icon"},this.getIcon())),o("div",{class:"callout-content",part:"content"},o("div",{class:"callout-title",part:"title",id:a},o("slot",{name:"title"},this.heading)),!this.compact&&o("div",{class:{"callout-message":!0,truncated:this.truncate>0&&!this.expanded},part:"message",id:e,style:this.truncate>0?{"--callout-truncate-lines":this.truncate+""}:{}},this.marquee?o("div",{class:"callout-marquee-track",style:{"--marquee-speed":12*this.marqueeSpeed+"s"}},o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{style:{display:"none"}},o("slot",null,this.message))):o("slot",null,this.message)),!this.compact&&this.truncate>0&&o("ui-button",{variant:"ghost",class:"callout-show-more",onClick:this.toggleExpand,size:"sm",label:this.expanded?n.showLessLabel||"Show less ↑":n.showMoreLabel||"Show more ↓"}),!this.compact&&o("div",{class:"callout-actions",part:"actions",onClick:this.handleActionClick},o("slot",{name:"actions"}))),this.compact&&o("div",{class:"callout-inline-message",part:"message",id:e},o("slot",null,this.message)),this.closable&&this.closeReady&&o("ui-button",{variant:"ghost",class:"callout-close",onClick:this.handleDismiss,ariaLabel:n.dismissLabel||this.dismissLabel,icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),u="number"==typeof this.progress?o("div",{class:"callout-progress-bar",style:{width:this.progress+"%"},"aria-valuenow":this.progress,"aria-valuemin":"0","aria-valuemax":"100",role:"progressbar"}):this.autoClose>0&&this.visible&&!this.closing&&o("div",{class:{"callout-progress":!0,paused:this.paused},part:"progress",style:{animationDuration:this.autoClose+"ms"}});return this.href?o("a",{href:this.href,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u):o(i,{class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u)}static get watchers(){return{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange: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}@media (prefers-color-scheme: dark){:host(.variant-info) .callout-inner{--callout-bg:#1e293b;--callout-text:#60a5fa;--callout-border:rgba(59, 130, 246, 0.35);--callout-icon-bg:rgba(59, 130, 246, 0.18);--callout-shadow:rgba(59, 130, 246, 0.13)}:host(.variant-success) .callout-inner{--callout-bg:#052e16;--callout-text:#4ade80;--callout-border:rgba(34,197,94,0.35);--callout-icon-bg:rgba(34,197,94,0.18);--callout-shadow:rgba(34,197,94,0.13)}:host(.variant-warning) .callout-inner{--callout-bg:#78350f;--callout-text:#facc15;--callout-border:rgba(251,191,36,0.35);--callout-icon-bg:rgba(251,191,36,0.18);--callout-shadow:rgba(251,191,36,0.13)}:host(.variant-danger) .callout-inner{--callout-bg:#7f1d1d;--callout-text:#f87171;--callout-border:rgba(239,68,68,0.35);--callout-icon-bg:rgba(239,68,68,0.18);--callout-shadow:rgba(239,68,68,0.13)}:host(.variant-neutral) .callout-inner{--callout-bg:#0f172a;--callout-text:#f1f5f9;--callout-border:rgba(148,163,184,0.25);--callout-icon-bg:rgba(148,163,184,0.13);--callout-shadow:rgba(148,163,184,0.09)}}a[part=callout]{text-decoration:none;color:inherit;display:block;transition:box-shadow 0.15s, filter 0.15s}a[part=callout]:hover,a[part=callout]:focus-visible{filter:brightness(1.04);box-shadow:0 6px 24px var(--callout-shadow, rgba(15, 23, 42, 0.13))}a[part=callout]:active{filter:brightness(0.98)}@keyframes callout-slide-in-top{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-top{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(-16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-bottom{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-bottom{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-left{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-left{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(-32px);max-width:0;padding:0;margin:0}}@keyframes callout-slide-in-right{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-right{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(32px);max-width:0;padding:0;margin:0}}@keyframes callout-fade-in{from{opacity:0}to{opacity:1}}@keyframes callout-fade-out{from{opacity:1}to{opacity:0}}@keyframes callout-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes callout-spin{to{transform:rotate(360deg)}}@keyframes callout-pulse{0%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 var(--callout-border)}70%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 7px transparent}100%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 transparent}}:host{display:block;width:100%}:host(.enter-top){animation:callout-slide-in-top 0.25s ease both}:host(.enter-bottom){animation:callout-slide-in-bottom 0.25s ease both}:host(.enter-left){animation:callout-slide-in-left 0.25s ease both}:host(.enter-right){animation:callout-slide-in-right 0.25s ease both}:host(.enter-fade){animation:callout-fade-in 0.25s ease both}:host(.closing.enter-top){animation:callout-slide-out-top 0.25s ease both;pointer-events:none}:host(.closing.enter-bottom){animation:callout-slide-out-bottom 0.25s ease both;pointer-events:none}:host(.closing.enter-left){animation:callout-slide-out-left 0.25s ease both;pointer-events:none}:host(.closing.enter-right){animation:callout-slide-out-right 0.25s ease both;pointer-events:none}:host(.closing.enter-fade){animation:callout-fade-out 0.25s ease both;pointer-events:none}:host(.banner){border-radius:0}.callout-inner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;position:relative;background:var(--callout-bg, #eff6ff);color:var(--callout-text, #1e3a8a);border:1px solid var(--callout-border, transparent);box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07));overflow:hidden}:host(.compact) .callout-inner{padding:8px 14px;gap:10px;border-radius:999px;align-items:center;grid-template-columns:auto auto 1fr auto}:host(.size-sm) .callout-inner{padding:6px 10px;border-radius:8px;gap:7px}:host(.size-sm) .callout-title,:host(.size-sm) .callout-message,:host(.size-sm) .callout-inline-message{font-size:0.78rem}:host(.size-sm) .callout-icon{width:22px;height:22px;font-size:1em}:host(.size-md) .callout-inner{padding:14px 18px;border-radius:14px;gap:12px}:host(.size-md) .callout-title,:host(.size-md) .callout-message,:host(.size-md) .callout-inline-message{font-size:0.95rem}:host(.size-md) .callout-icon{width:38px;height:38px;font-size:1.25em}:host(.size-lg) .callout-inner{padding:22px 28px;border-radius:22px;gap:18px}:host(.size-lg) .callout-title,:host(.size-lg) .callout-message,:host(.size-lg) .callout-inline-message{font-size:1.15rem}:host(.size-lg) .callout-icon{width:54px;height:54px;font-size:1.5em}:host(.compact) .callout-icon{width:28px;height:28px;border-radius:50%}:host(.compact) .callout-title{font-size:0.85rem}.callout-inline-message{font-size:0.85rem;opacity:0.8;flex:1}:host(.banner) .callout-inner{border-radius:0;border-left:none;border-right:none;box-shadow:none}.callout-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--callout-icon-bg, rgba(255, 255, 255, 0.5))}.callout-content{display:flex;flex-direction:column;gap:3px;min-width:0}.callout-title{font-weight:600;letter-spacing:-0.01em;font-size:0.95rem;line-height:1.3}.callout-message{font-size:0.875rem;opacity:0.85;line-height:1.5}.callout-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.callout-close{background:transparent;border:none;padding:5px;flex-shrink:0;border-radius:999px;cursor:pointer;color:inherit;opacity:0.6;transition:opacity 0.15s ease, background 0.15s ease;display:inline-flex;align-items:center;justify-content:center}.callout-close:hover{opacity:1;background:rgba(15, 23, 42, 0.08)}.callout-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.callout-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:0.3;transform-origin:left center;animation:callout-progress linear both}:host(.outlined) .callout-inner{box-shadow:none;background:transparent;border-color:var(--callout-text, currentColor) !important}:host(.variant-info) .callout-inner{--callout-bg:#eff6ff;--callout-text:#1d4ed8;--callout-border:rgba(59, 130, 246, 0.3);--callout-icon-bg:rgba(59, 130, 246, 0.12);--callout-shadow:rgba(59, 130, 246, 0.08)}:host(.variant-success) .callout-inner{--callout-bg:#f0fdf4;--callout-text:#15803d;--callout-border:rgba(22, 163, 74, 0.3);--callout-icon-bg:rgba(22, 163, 74, 0.12);--callout-shadow:rgba(22, 163, 74, 0.08)}:host(.variant-warning) .callout-inner{--callout-bg:#fffbeb;--callout-text:#b45309;--callout-border:rgba(217, 119, 6, 0.3);--callout-icon-bg:rgba(217, 119, 6, 0.12);--callout-shadow:rgba(217, 119, 6, 0.08)}:host(.variant-danger) .callout-inner{--callout-bg:#fef2f2;--callout-text:#dc2626;--callout-border:rgba(220, 38, 38, 0.3);--callout-icon-bg:rgba(220, 38, 38, 0.12);--callout-shadow:rgba(220, 38, 38, 0.08)}:host(.variant-neutral) .callout-inner{--callout-bg:#f8fafc;--callout-text:#334155;--callout-border:rgba(100, 116, 139, 0.25);--callout-icon-bg:rgba(100, 116, 139, 0.1);--callout-shadow:rgba(15, 23, 42, 0.06)}@media (max-width: 640px){.callout-inner{grid-template-columns:auto 1fr auto;padding:12px 14px}}.callout-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--callout-icon-bg, rgba(255, 255, 255, 0.3));border-top-color:var(--callout-text, currentColor);border-radius:50%;animation:callout-spin 0.7s linear infinite;flex-shrink:0}:host(.no-icon) .callout-inner{grid-template-columns:1fr auto}:host(.compact.no-icon) .callout-inner{grid-template-columns:auto 1fr auto}:host(.pulse) .callout-inner{animation:callout-pulse 1.8s ease-in-out infinite}:host(.solid) .callout-close:hover{background:rgba(255, 255, 255, 0.15)}:host(.solid.variant-info) .callout-inner{--callout-bg:#1d4ed8;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(29, 78, 216, 0.3)}:host(.solid.variant-success) .callout-inner{--callout-bg:#15803d;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(21, 128, 61, 0.3)}:host(.solid.variant-warning) .callout-inner{--callout-bg:#d97706;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(217, 119, 6, 0.3)}:host(.solid.variant-danger) .callout-inner{--callout-bg:#dc2626;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(220, 38, 38, 0.3)}:host(.solid.variant-neutral) .callout-inner{--callout-bg:#334155;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.15);--callout-shadow:rgba(51, 65, 85, 0.3)}:host(.accent-bar) .callout-inner{border-left:4px solid var(--callout-text, currentColor);border-radius:0 14px 14px 0;padding-left:14px}:host(.accent-bar.banner) .callout-inner{border-radius:0}:host(.accent-bar.compact) .callout-inner{border-radius:0 999px 999px 0}:host(.sticky){position:sticky;top:0;z-index:200}.callout-progress.paused,:host(.paused) .callout-marquee-content{animation-play-state:paused}.callout-message.truncated{display:-webkit-box;-webkit-line-clamp:var(--callout-truncate-lines, 3);line-clamp:var(--callout-truncate-lines, 3);-webkit-box-orient:vertical;overflow:hidden}.callout-show-more{background:none;border:none;padding:0;margin-top:4px;font-size:0.8rem;font-weight:600;color:var(--callout-text, currentColor);cursor:pointer;opacity:0.75;text-decoration:underline;text-underline-offset:2px;display:inline-block;line-height:1.4}.callout-show-more:hover{opacity:1}.callout-show-more:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}:host(.marquee) .callout-inner{overflow:hidden}.callout-marquee-track{display:flex;width:100%;overflow:hidden;user-select:none;gap:3rem;}.callout-marquee-group{flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;gap:3rem;min-width:100%;animation:callout-scroll var(--marquee-speed, 18s) linear infinite;will-change:transform}.callout-marquee-item{display:flex;align-items:center;white-space:nowrap}@keyframes callout-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 3rem))}}:host(.paused) .callout-marquee-group{animation-play-state:paused}:host(.marquee) .callout-message{overflow:hidden}'}},[769,"ui-callout-banner",{ariaRole:[1,"aria-role"],testId:[1,"test-id"],focusOnShow:[4,"focus-on-show"],progress:[2],i18n:[16],variant:[1],heading:[1],message:[1],icon:[1],iconLibrary:[1,"icon-library"],closable:[4],dismissLabel:[1,"dismiss-label"],outlined:[4],compact:[4],banner:[4],autoClose:[2,"auto-close"],loading:[4],pulse:[4],noIcon:[4,"no-icon"],solid:[4],accentBar:[4,"accent-bar"],pauseOnHover:[4,"pause-on-hover"],sticky:[4],truncate:[2],size:[1],persistKey:[1,"persist-key"],marquee:[4],marqueeSpeed:[2,"marquee-speed"],enterFrom:[1,"enter-from"],href:[1],target:[1],closableAfter:[2,"closable-after"],visible:[32],closing:[32],paused:[32],expanded:[32],closeReady:[32],slottedHTML:[32],update:[64],hide:[64],show:[64]},void 0,{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange:0}]}]),d=h,p=function(){"undefined"!=typeof customElements&&["ui-callout-banner","ui-badge","ui-button","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-callout-banner":customElements.get(s(t))||customElements.define(s(t),h);break;case"ui-badge":customElements.get(s(t))||c();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||r();break;case"ui-loader":customElements.get(s(t))||u()}}))};export{d as UiCalloutBanner,p as defineCustomElement}
|