@actabldesign/bellhop-core 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -0
- package/bellhop-core/bellhop-core.css +7 -0
- package/bellhop-core/bellhop-core.esm.js +2 -0
- package/bellhop-core/bellhop-core.esm.js.map +1 -0
- package/bellhop-core/bh-accordion-item.entry.esm.js.map +1 -0
- package/bellhop-core/bh-accordion.entry.esm.js.map +1 -0
- package/bellhop-core/bh-appbar.entry.esm.js.map +1 -0
- package/bellhop-core/bh-autocomplete-menu.bh-tag.entry.esm.js.map +1 -0
- package/bellhop-core/bh-avatar-add.entry.esm.js.map +1 -0
- package/bellhop-core/bh-avatar-stacked.entry.esm.js.map +1 -0
- package/bellhop-core/bh-avatar.entry.esm.js.map +1 -0
- package/bellhop-core/bh-badge-dot.bh-breadcrumbs.entry.esm.js.map +1 -0
- package/bellhop-core/bh-badge.entry.esm.js.map +1 -0
- package/bellhop-core/bh-bar-chart.entry.esm.js.map +1 -0
- package/bellhop-core/bh-button-icon.entry.esm.js.map +1 -0
- package/bellhop-core/bh-button.bh-loader-spinner.entry.esm.js.map +1 -0
- package/bellhop-core/bh-card-footer.entry.esm.js.map +1 -0
- package/bellhop-core/bh-card-header.entry.esm.js.map +1 -0
- package/bellhop-core/bh-card.entry.esm.js.map +1 -0
- package/bellhop-core/bh-chart-tooltip.entry.esm.js.map +1 -0
- package/bellhop-core/bh-checkbox-group-item.entry.esm.js.map +1 -0
- package/bellhop-core/bh-checkbox-group.entry.esm.js.map +1 -0
- package/bellhop-core/bh-checkbox.entry.esm.js.map +1 -0
- package/bellhop-core/bh-container-footer.entry.esm.js.map +1 -0
- package/bellhop-core/bh-container.entry.esm.js.map +1 -0
- package/bellhop-core/bh-data-grid.entry.esm.js.map +1 -0
- package/bellhop-core/bh-date-picker-content.bh-picker-menu.entry.esm.js.map +1 -0
- package/bellhop-core/bh-date-picker.bh-empty-state.entry.esm.js.map +1 -0
- package/bellhop-core/bh-date-range-picker-content.entry.esm.js.map +1 -0
- package/bellhop-core/bh-date-range-picker.entry.esm.js.map +1 -0
- package/bellhop-core/bh-dropdown-menu.entry.esm.js.map +1 -0
- package/bellhop-core/bh-dropdown.bh-logo-box.bh-nav-item.entry.esm.js.map +1 -0
- package/bellhop-core/bh-featured-icon.entry.esm.js.map +1 -0
- package/bellhop-core/bh-illustrations.entry.esm.js.map +1 -0
- package/bellhop-core/bh-input-autocomplete.entry.esm.js.map +1 -0
- package/bellhop-core/bh-input-number.entry.esm.js.map +1 -0
- package/bellhop-core/bh-input-password.entry.esm.js.map +1 -0
- package/bellhop-core/bh-input-text.entry.esm.js.map +1 -0
- package/bellhop-core/bh-input-verification.entry.esm.js.map +1 -0
- package/bellhop-core/bh-label.bh-tooltip.entry.esm.js.map +1 -0
- package/bellhop-core/bh-modal-actions.entry.esm.js.map +1 -0
- package/bellhop-core/bh-modal-header.entry.esm.js.map +1 -0
- package/bellhop-core/bh-modal.entry.esm.js.map +1 -0
- package/bellhop-core/bh-month-picker-content.entry.esm.js.map +1 -0
- package/bellhop-core/bh-month-picker.entry.esm.js.map +1 -0
- package/bellhop-core/bh-notification.entry.esm.js.map +1 -0
- package/bellhop-core/bh-page-navigation-child.entry.esm.js.map +1 -0
- package/bellhop-core/bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.esm.js.map +1 -0
- package/bellhop-core/bh-page-navigation.entry.esm.js.map +1 -0
- package/bellhop-core/bh-pie-chart.entry.esm.js.map +1 -0
- package/bellhop-core/bh-popover.entry.esm.js.map +1 -0
- package/bellhop-core/bh-product-switcher.entry.esm.js.map +1 -0
- package/bellhop-core/bh-property-switcher.entry.esm.js.map +1 -0
- package/bellhop-core/bh-radio-button.entry.esm.js.map +1 -0
- package/bellhop-core/bh-sidebar.entry.esm.js.map +1 -0
- package/bellhop-core/bh-skeleton-loader.entry.esm.js.map +1 -0
- package/bellhop-core/bh-tab-item.entry.esm.js.map +1 -0
- package/bellhop-core/bh-tabs.entry.esm.js.map +1 -0
- package/bellhop-core/bh-textarea.entry.esm.js.map +1 -0
- package/bellhop-core/bh-toggle.entry.esm.js.map +1 -0
- package/bellhop-core/bh-trend-chart.entry.esm.js.map +1 -0
- package/bellhop-core/index.esm.js +2 -0
- package/bellhop-core/index.esm.js.map +1 -0
- package/bellhop-core/loader.esm.js.map +1 -0
- package/bellhop-core/p-051a25aa.entry.js +2 -0
- package/bellhop-core/p-051a25aa.entry.js.map +1 -0
- package/bellhop-core/p-0579ce8d.entry.js +2 -0
- package/bellhop-core/p-0579ce8d.entry.js.map +1 -0
- package/bellhop-core/p-05c13d72.entry.js +2 -0
- package/bellhop-core/p-05c13d72.entry.js.map +1 -0
- package/bellhop-core/p-0e013732.entry.js +2 -0
- package/bellhop-core/p-0e013732.entry.js.map +1 -0
- package/bellhop-core/p-1960c2d0.entry.js +2 -0
- package/bellhop-core/p-1960c2d0.entry.js.map +1 -0
- package/bellhop-core/p-2735c901.entry.js +2 -0
- package/bellhop-core/p-2735c901.entry.js.map +1 -0
- package/bellhop-core/p-2c80bc07.entry.js +2 -0
- package/bellhop-core/p-2c80bc07.entry.js.map +1 -0
- package/bellhop-core/p-2cc0c4cf.entry.js +2 -0
- package/bellhop-core/p-2cc0c4cf.entry.js.map +1 -0
- package/bellhop-core/p-3038cc1a.entry.js +2 -0
- package/bellhop-core/p-3038cc1a.entry.js.map +1 -0
- package/bellhop-core/p-324cad08.entry.js +2 -0
- package/bellhop-core/p-324cad08.entry.js.map +1 -0
- package/bellhop-core/p-3bf098fd.entry.js +2 -0
- package/bellhop-core/p-3bf098fd.entry.js.map +1 -0
- package/bellhop-core/p-3c739eea.entry.js +2 -0
- package/bellhop-core/p-3c739eea.entry.js.map +1 -0
- package/bellhop-core/p-4c71a0b6.entry.js +2 -0
- package/bellhop-core/p-4c71a0b6.entry.js.map +1 -0
- package/bellhop-core/p-5a220f12.entry.js +2 -0
- package/bellhop-core/p-5a220f12.entry.js.map +1 -0
- package/bellhop-core/p-5d844699.entry.js +2 -0
- package/bellhop-core/p-5d844699.entry.js.map +1 -0
- package/bellhop-core/p-5e8d2fc0.entry.js +2 -0
- package/bellhop-core/p-5e8d2fc0.entry.js.map +1 -0
- package/bellhop-core/p-71391701.entry.js +2 -0
- package/bellhop-core/p-71391701.entry.js.map +1 -0
- package/bellhop-core/p-7e67af77.entry.js +2 -0
- package/bellhop-core/p-7e67af77.entry.js.map +1 -0
- package/bellhop-core/p-7e908d03.entry.js +2 -0
- package/bellhop-core/p-7e908d03.entry.js.map +1 -0
- package/bellhop-core/p-8053e945.entry.js +2 -0
- package/bellhop-core/p-8053e945.entry.js.map +1 -0
- package/bellhop-core/p-852564d6.entry.js +2 -0
- package/bellhop-core/p-852564d6.entry.js.map +1 -0
- package/bellhop-core/p-86bbff38.entry.js +2 -0
- package/bellhop-core/p-86bbff38.entry.js.map +1 -0
- package/bellhop-core/p-87d1ed92.entry.js +2 -0
- package/bellhop-core/p-87d1ed92.entry.js.map +1 -0
- package/bellhop-core/p-94156013.entry.js +2 -0
- package/bellhop-core/p-94156013.entry.js.map +1 -0
- package/bellhop-core/p-954b9c38.entry.js +2 -0
- package/bellhop-core/p-954b9c38.entry.js.map +1 -0
- package/bellhop-core/p-9693180e.entry.js +2 -0
- package/bellhop-core/p-9693180e.entry.js.map +1 -0
- package/bellhop-core/p-98a336f7.entry.js +2 -0
- package/bellhop-core/p-98a336f7.entry.js.map +1 -0
- package/bellhop-core/p-98cc729f.entry.js +2 -0
- package/bellhop-core/p-98cc729f.entry.js.map +1 -0
- package/bellhop-core/p-9e7e64dc.entry.js +2 -0
- package/bellhop-core/p-9e7e64dc.entry.js.map +1 -0
- package/bellhop-core/p-9fe1fd2e.entry.js +2 -0
- package/bellhop-core/p-9fe1fd2e.entry.js.map +1 -0
- package/bellhop-core/p-CPgx0iFq.js +2 -0
- package/bellhop-core/p-CPgx0iFq.js.map +1 -0
- package/bellhop-core/p-DANVSPII.js +2 -0
- package/bellhop-core/p-DANVSPII.js.map +1 -0
- package/bellhop-core/p-DKeuA-TM.js +2 -0
- package/bellhop-core/p-DKeuA-TM.js.map +1 -0
- package/bellhop-core/p-DtVghh5W.js +3 -0
- package/bellhop-core/p-DtVghh5W.js.map +1 -0
- package/bellhop-core/p-a901ae33.entry.js +2 -0
- package/bellhop-core/p-a901ae33.entry.js.map +1 -0
- package/bellhop-core/p-abd6ade0.entry.js +2 -0
- package/bellhop-core/p-abd6ade0.entry.js.map +1 -0
- package/bellhop-core/p-abf68de4.entry.js +2 -0
- package/bellhop-core/p-abf68de4.entry.js.map +1 -0
- package/bellhop-core/p-ad15a4b9.entry.js +2 -0
- package/bellhop-core/p-ad15a4b9.entry.js.map +1 -0
- package/bellhop-core/p-b1affa8d.entry.js +2 -0
- package/bellhop-core/p-b1affa8d.entry.js.map +1 -0
- package/bellhop-core/p-b4104ae5.entry.js +2 -0
- package/bellhop-core/p-b4104ae5.entry.js.map +1 -0
- package/bellhop-core/p-c194883a.entry.js +2 -0
- package/bellhop-core/p-c194883a.entry.js.map +1 -0
- package/bellhop-core/p-c48ca590.entry.js +2 -0
- package/bellhop-core/p-c48ca590.entry.js.map +1 -0
- package/bellhop-core/p-c82e73aa.entry.js +2 -0
- package/bellhop-core/p-c82e73aa.entry.js.map +1 -0
- package/bellhop-core/p-d14192df.entry.js +2 -0
- package/bellhop-core/p-d14192df.entry.js.map +1 -0
- package/bellhop-core/p-d5fb8d0f.entry.js +2 -0
- package/bellhop-core/p-d5fb8d0f.entry.js.map +1 -0
- package/bellhop-core/p-d9106838.entry.js +2 -0
- package/bellhop-core/p-d9106838.entry.js.map +1 -0
- package/bellhop-core/p-d941cdba.entry.js +2 -0
- package/bellhop-core/p-d941cdba.entry.js.map +1 -0
- package/bellhop-core/p-d94b296e.entry.js +2 -0
- package/bellhop-core/p-d94b296e.entry.js.map +1 -0
- package/bellhop-core/p-df2728a1.entry.js +2 -0
- package/bellhop-core/p-df2728a1.entry.js.map +1 -0
- package/bellhop-core/p-df45027c.entry.js +2 -0
- package/bellhop-core/p-df45027c.entry.js.map +1 -0
- package/bellhop-core/p-dfe0574c.entry.js +2 -0
- package/bellhop-core/p-dfe0574c.entry.js.map +1 -0
- package/bellhop-core/p-e3c5d1e3.entry.js +2 -0
- package/bellhop-core/p-e3c5d1e3.entry.js.map +1 -0
- package/bellhop-core/p-e3d79592.entry.js +2 -0
- package/bellhop-core/p-e3d79592.entry.js.map +1 -0
- package/bellhop-core/p-e44539e9.entry.js +2 -0
- package/bellhop-core/p-e44539e9.entry.js.map +1 -0
- package/bellhop-core/p-e5b9a3de.entry.js +2 -0
- package/bellhop-core/p-e5b9a3de.entry.js.map +1 -0
- package/bellhop-core/p-e8e0739d.entry.js +2 -0
- package/bellhop-core/p-e8e0739d.entry.js.map +1 -0
- package/bellhop-core/p-ebb2492c.entry.js +2 -0
- package/bellhop-core/p-ebb2492c.entry.js.map +1 -0
- package/bellhop-core/p-ec894e11.entry.js +2 -0
- package/bellhop-core/p-ec894e11.entry.js.map +1 -0
- package/bellhop-core/p-f0cfc744.entry.js +2 -0
- package/bellhop-core/p-f0cfc744.entry.js.map +1 -0
- package/bellhop-core/p-f261bdae.entry.js +2 -0
- package/bellhop-core/p-f261bdae.entry.js.map +1 -0
- package/bellhop-core/p-f4c4c70d.entry.js +2 -0
- package/bellhop-core/p-f4c4c70d.entry.js.map +1 -0
- package/cjs/bellhop-core.cjs.js +25 -0
- package/cjs/bellhop-core.cjs.js.map +1 -0
- package/cjs/bh-accordion-item.cjs.entry.js +82 -0
- package/cjs/bh-accordion-item.entry.cjs.js.map +1 -0
- package/cjs/bh-accordion.cjs.entry.js +119 -0
- package/cjs/bh-accordion.entry.cjs.js.map +1 -0
- package/cjs/bh-appbar.cjs.entry.js +83 -0
- package/cjs/bh-appbar.entry.cjs.js.map +1 -0
- package/cjs/bh-autocomplete-menu.bh-tag.entry.cjs.js.map +1 -0
- package/cjs/bh-autocomplete-menu_2.cjs.entry.js +177 -0
- package/cjs/bh-avatar-add.cjs.entry.js +75 -0
- package/cjs/bh-avatar-add.entry.cjs.js.map +1 -0
- package/cjs/bh-avatar-stacked.cjs.entry.js +94 -0
- package/cjs/bh-avatar-stacked.entry.cjs.js.map +1 -0
- package/cjs/bh-avatar.cjs.entry.js +93 -0
- package/cjs/bh-avatar.entry.cjs.js.map +1 -0
- package/cjs/bh-badge-dot.bh-breadcrumbs.entry.cjs.js.map +1 -0
- package/cjs/bh-badge-dot_2.cjs.entry.js +134 -0
- package/cjs/bh-badge.cjs.entry.js +71 -0
- package/cjs/bh-badge.entry.cjs.js.map +1 -0
- package/cjs/bh-bar-chart.cjs.entry.js +164 -0
- package/cjs/bh-bar-chart.entry.cjs.js.map +1 -0
- package/cjs/bh-button-BKVcf-nK.js +117 -0
- package/cjs/bh-button-BKVcf-nK.js.map +1 -0
- package/cjs/bh-button-icon.cjs.entry.js +74 -0
- package/cjs/bh-button-icon.entry.cjs.js.map +1 -0
- package/cjs/bh-button.bh-loader-spinner.entry.cjs.js.map +1 -0
- package/cjs/bh-button_2.cjs.entry.js +47 -0
- package/cjs/bh-card-footer.cjs.entry.js +30 -0
- package/cjs/bh-card-footer.entry.cjs.js.map +1 -0
- package/cjs/bh-card-header.cjs.entry.js +74 -0
- package/cjs/bh-card-header.entry.cjs.js.map +1 -0
- package/cjs/bh-card.cjs.entry.js +48 -0
- package/cjs/bh-card.entry.cjs.js.map +1 -0
- package/cjs/bh-chart-tooltip.cjs.entry.js +57 -0
- package/cjs/bh-chart-tooltip.entry.cjs.js.map +1 -0
- package/cjs/bh-checkbox-group-item.cjs.entry.js +142 -0
- package/cjs/bh-checkbox-group-item.entry.cjs.js.map +1 -0
- package/cjs/bh-checkbox-group.cjs.entry.js +100 -0
- package/cjs/bh-checkbox-group.entry.cjs.js.map +1 -0
- package/cjs/bh-checkbox.cjs.entry.js +144 -0
- package/cjs/bh-checkbox.entry.cjs.js.map +1 -0
- package/cjs/bh-container-footer.cjs.entry.js +38 -0
- package/cjs/bh-container-footer.entry.cjs.js.map +1 -0
- package/cjs/bh-container.cjs.entry.js +26 -0
- package/cjs/bh-container.entry.cjs.js.map +1 -0
- package/cjs/bh-data-grid.cjs.entry.js +812 -0
- package/cjs/bh-data-grid.entry.cjs.js.map +1 -0
- package/cjs/bh-date-picker-content.bh-picker-menu.entry.cjs.js.map +1 -0
- package/cjs/bh-date-picker-content_2.cjs.entry.js +525 -0
- package/cjs/bh-date-picker.bh-empty-state.entry.cjs.js.map +1 -0
- package/cjs/bh-date-picker_2.cjs.entry.js +252 -0
- package/cjs/bh-date-range-picker-content.cjs.entry.js +151 -0
- package/cjs/bh-date-range-picker-content.entry.cjs.js.map +1 -0
- package/cjs/bh-date-range-picker.cjs.entry.js +167 -0
- package/cjs/bh-date-range-picker.entry.cjs.js.map +1 -0
- package/cjs/bh-dropdown-menu.cjs.entry.js +114 -0
- package/cjs/bh-dropdown-menu.entry.cjs.js.map +1 -0
- package/cjs/bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js.map +1 -0
- package/cjs/bh-dropdown_3.cjs.entry.js +307 -0
- package/cjs/bh-featured-icon.cjs.entry.js +41 -0
- package/cjs/bh-featured-icon.entry.cjs.js.map +1 -0
- package/cjs/bh-illustrations.cjs.entry.js +65 -0
- package/cjs/bh-illustrations.entry.cjs.js.map +1 -0
- package/cjs/bh-input-autocomplete.cjs.entry.js +342 -0
- package/cjs/bh-input-autocomplete.entry.cjs.js.map +1 -0
- package/cjs/bh-input-number.cjs.entry.js +307 -0
- package/cjs/bh-input-number.entry.cjs.js.map +1 -0
- package/cjs/bh-input-password.cjs.entry.js +182 -0
- package/cjs/bh-input-password.entry.cjs.js.map +1 -0
- package/cjs/bh-input-text.cjs.entry.js +192 -0
- package/cjs/bh-input-text.entry.cjs.js.map +1 -0
- package/cjs/bh-input-verification.cjs.entry.js +203 -0
- package/cjs/bh-input-verification.entry.cjs.js.map +1 -0
- package/cjs/bh-label-DBqucnaO.js +110 -0
- package/cjs/bh-label-DBqucnaO.js.map +1 -0
- package/cjs/bh-label.bh-tooltip.entry.cjs.js.map +1 -0
- package/cjs/bh-label_2.cjs.entry.js +48 -0
- package/cjs/bh-modal-actions.cjs.entry.js +66 -0
- package/cjs/bh-modal-actions.entry.cjs.js.map +1 -0
- package/cjs/bh-modal-header.cjs.entry.js +76 -0
- package/cjs/bh-modal-header.entry.cjs.js.map +1 -0
- package/cjs/bh-modal.cjs.entry.js +56 -0
- package/cjs/bh-modal.entry.cjs.js.map +1 -0
- package/cjs/bh-month-picker-content.cjs.entry.js +189 -0
- package/cjs/bh-month-picker-content.entry.cjs.js.map +1 -0
- package/cjs/bh-month-picker.cjs.entry.js +152 -0
- package/cjs/bh-month-picker.entry.cjs.js.map +1 -0
- package/cjs/bh-notification.cjs.entry.js +128 -0
- package/cjs/bh-notification.entry.cjs.js.map +1 -0
- package/cjs/bh-page-navigation-child.cjs.entry.js +48 -0
- package/cjs/bh-page-navigation-child.entry.cjs.js.map +1 -0
- package/cjs/bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.cjs.js.map +1 -0
- package/cjs/bh-page-navigation-multi-level_2.cjs.entry.js +146 -0
- package/cjs/bh-page-navigation.cjs.entry.js +72 -0
- package/cjs/bh-page-navigation.entry.cjs.js.map +1 -0
- package/cjs/bh-pie-chart.cjs.entry.js +157 -0
- package/cjs/bh-pie-chart.entry.cjs.js.map +1 -0
- package/cjs/bh-popover.cjs.entry.js +100 -0
- package/cjs/bh-popover.entry.cjs.js.map +1 -0
- package/cjs/bh-product-switcher.cjs.entry.js +102 -0
- package/cjs/bh-product-switcher.entry.cjs.js.map +1 -0
- package/cjs/bh-property-switcher.cjs.entry.js +231 -0
- package/cjs/bh-property-switcher.entry.cjs.js.map +1 -0
- package/cjs/bh-radio-button.cjs.entry.js +124 -0
- package/cjs/bh-radio-button.entry.cjs.js.map +1 -0
- package/cjs/bh-sidebar.cjs.entry.js +110 -0
- package/cjs/bh-sidebar.entry.cjs.js.map +1 -0
- package/cjs/bh-skeleton-loader.cjs.entry.js +34 -0
- package/cjs/bh-skeleton-loader.entry.cjs.js.map +1 -0
- package/cjs/bh-tab-item.cjs.entry.js +54 -0
- package/cjs/bh-tab-item.entry.cjs.js.map +1 -0
- package/cjs/bh-tabs.cjs.entry.js +52 -0
- package/cjs/bh-tabs.entry.cjs.js.map +1 -0
- package/cjs/bh-textarea.cjs.entry.js +161 -0
- package/cjs/bh-textarea.entry.cjs.js.map +1 -0
- package/cjs/bh-toggle.cjs.entry.js +141 -0
- package/cjs/bh-toggle.entry.cjs.js.map +1 -0
- package/cjs/bh-trend-chart.cjs.entry.js +121 -0
- package/cjs/bh-trend-chart.entry.cjs.js.map +1 -0
- package/cjs/form-9mbajZ3y.js +64 -0
- package/cjs/form-9mbajZ3y.js.map +1 -0
- package/cjs/index-tZqSQc8E.js +1951 -0
- package/cjs/index-tZqSQc8E.js.map +1 -0
- package/cjs/index.cjs.js +32 -0
- package/cjs/index.cjs.js.map +1 -0
- package/cjs/loader.cjs.js +13 -0
- package/cjs/loader.cjs.js.map +1 -0
- package/collection/collection-manifest.json +77 -0
- package/collection/components/bh-accordion/bh-accordion.css +30 -0
- package/collection/components/bh-accordion/bh-accordion.js +227 -0
- package/collection/components/bh-accordion/bh-accordion.js.map +1 -0
- package/collection/components/bh-accordion-item/bh-accordion-item.css +119 -0
- package/collection/components/bh-accordion-item/bh-accordion-item.js +207 -0
- package/collection/components/bh-accordion-item/bh-accordion-item.js.map +1 -0
- package/collection/components/bh-appbar/bh-appbar.css +80 -0
- package/collection/components/bh-appbar/bh-appbar.js +270 -0
- package/collection/components/bh-appbar/bh-appbar.js.map +1 -0
- package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.css +142 -0
- package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.js +301 -0
- package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.js.map +1 -0
- package/collection/components/bh-avatar/bh-avatar.css +257 -0
- package/collection/components/bh-avatar/bh-avatar.js +266 -0
- package/collection/components/bh-avatar/bh-avatar.js.map +1 -0
- package/collection/components/bh-avatar-add/bh-avatar-add.css +145 -0
- package/collection/components/bh-avatar-add/bh-avatar-add.js +194 -0
- package/collection/components/bh-avatar-add/bh-avatar-add.js.map +1 -0
- package/collection/components/bh-avatar-stacked/bh-avatar-stacked.css +29 -0
- package/collection/components/bh-avatar-stacked/bh-avatar-stacked.js +211 -0
- package/collection/components/bh-avatar-stacked/bh-avatar-stacked.js.map +1 -0
- package/collection/components/bh-badge/bh-badge.css +348 -0
- package/collection/components/bh-badge/bh-badge.js +250 -0
- package/collection/components/bh-badge/bh-badge.js.map +1 -0
- package/collection/components/bh-badge-dot/bh-badge-dot.css +77 -0
- package/collection/components/bh-badge-dot/bh-badge-dot.js +113 -0
- package/collection/components/bh-badge-dot/bh-badge-dot.js.map +1 -0
- package/collection/components/bh-bar-chart/bh-bar-chart.css +363 -0
- package/collection/components/bh-bar-chart/bh-bar-chart.js +316 -0
- package/collection/components/bh-bar-chart/bh-bar-chart.js.map +1 -0
- package/collection/components/bh-breadcrumbs/bh-breadcrumbs.css +158 -0
- package/collection/components/bh-breadcrumbs/bh-breadcrumbs.js +231 -0
- package/collection/components/bh-breadcrumbs/bh-breadcrumbs.js.map +1 -0
- package/collection/components/bh-button/bh-button.css +467 -0
- package/collection/components/bh-button/bh-button.js +350 -0
- package/collection/components/bh-button/bh-button.js.map +1 -0
- package/collection/components/bh-button-icon/bh-button-icon.css +187 -0
- package/collection/components/bh-button-icon/bh-button-icon.js +259 -0
- package/collection/components/bh-button-icon/bh-button-icon.js.map +1 -0
- package/collection/components/bh-card/bh-card.css +57 -0
- package/collection/components/bh-card/bh-card.js +139 -0
- package/collection/components/bh-card/bh-card.js.map +1 -0
- package/collection/components/bh-card-footer/bh-card-footer.css +54 -0
- package/collection/components/bh-card-footer/bh-card-footer.js +81 -0
- package/collection/components/bh-card-footer/bh-card-footer.js.map +1 -0
- package/collection/components/bh-card-header/bh-card-header.css +68 -0
- package/collection/components/bh-card-header/bh-card-header.js +348 -0
- package/collection/components/bh-card-header/bh-card-header.js.map +1 -0
- package/collection/components/bh-chart-tooltip/bh-chart-tooltip.css +301 -0
- package/collection/components/bh-chart-tooltip/bh-chart-tooltip.js +226 -0
- package/collection/components/bh-chart-tooltip/bh-chart-tooltip.js.map +1 -0
- package/collection/components/bh-checkbox/bh-checkbox.css +179 -0
- package/collection/components/bh-checkbox/bh-checkbox.js +378 -0
- package/collection/components/bh-checkbox/bh-checkbox.js.map +1 -0
- package/collection/components/bh-checkbox-group/bh-checkbox-group.css +10 -0
- package/collection/components/bh-checkbox-group/bh-checkbox-group.js +218 -0
- package/collection/components/bh-checkbox-group/bh-checkbox-group.js.map +1 -0
- package/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.css +118 -0
- package/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.js +402 -0
- package/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.js.map +1 -0
- package/collection/components/bh-container/bh-container.css +21 -0
- package/collection/components/bh-container/bh-container.js +51 -0
- package/collection/components/bh-container/bh-container.js.map +1 -0
- package/collection/components/bh-container-footer/bh-container-footer.css +22 -0
- package/collection/components/bh-container-footer/bh-container-footer.js +106 -0
- package/collection/components/bh-container-footer/bh-container-footer.js.map +1 -0
- package/collection/components/bh-data-grid/bh-data-grid.css +602 -0
- package/collection/components/bh-data-grid/bh-data-grid.js +1488 -0
- package/collection/components/bh-data-grid/bh-data-grid.js.map +1 -0
- package/collection/components/bh-date-picker/bh-date-picker.css +251 -0
- package/collection/components/bh-date-picker/bh-date-picker.js +485 -0
- package/collection/components/bh-date-picker/bh-date-picker.js.map +1 -0
- package/collection/components/bh-date-picker-content/bh-date-picker-content.css +541 -0
- package/collection/components/bh-date-picker-content/bh-date-picker-content.js +711 -0
- package/collection/components/bh-date-picker-content/bh-date-picker-content.js.map +1 -0
- package/collection/components/bh-date-range-picker/bh-date-range-picker.css +247 -0
- package/collection/components/bh-date-range-picker/bh-date-range-picker.js +528 -0
- package/collection/components/bh-date-range-picker/bh-date-range-picker.js.map +1 -0
- package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.css +275 -0
- package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.js +338 -0
- package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.js.map +1 -0
- package/collection/components/bh-dropdown/bh-dropdown.css +64 -0
- package/collection/components/bh-dropdown/bh-dropdown.js +512 -0
- package/collection/components/bh-dropdown/bh-dropdown.js.map +1 -0
- package/collection/components/bh-dropdown-menu/bh-dropdown-menu.css +227 -0
- package/collection/components/bh-dropdown-menu/bh-dropdown-menu.js +262 -0
- package/collection/components/bh-dropdown-menu/bh-dropdown-menu.js.map +1 -0
- package/collection/components/bh-empty-state/bh-empty-state.css +89 -0
- package/collection/components/bh-empty-state/bh-empty-state.js +306 -0
- package/collection/components/bh-empty-state/bh-empty-state.js.map +1 -0
- package/collection/components/bh-featured-icon/bh-featured-icon.css +198 -0
- package/collection/components/bh-featured-icon/bh-featured-icon.js +144 -0
- package/collection/components/bh-featured-icon/bh-featured-icon.js.map +1 -0
- package/collection/components/bh-illustrations/bh-illustrations.css +328 -0
- package/collection/components/bh-illustrations/bh-illustrations.js +174 -0
- package/collection/components/bh-illustrations/bh-illustrations.js.map +1 -0
- package/collection/components/bh-input-autocomplete/bh-input-autocomplete.css +301 -0
- package/collection/components/bh-input-autocomplete/bh-input-autocomplete.js +872 -0
- package/collection/components/bh-input-autocomplete/bh-input-autocomplete.js.map +1 -0
- package/collection/components/bh-input-number/bh-input-number.css +192 -0
- package/collection/components/bh-input-number/bh-input-number.js +818 -0
- package/collection/components/bh-input-number/bh-input-number.js.map +1 -0
- package/collection/components/bh-input-password/bh-input-password.css +164 -0
- package/collection/components/bh-input-password/bh-input-password.js +581 -0
- package/collection/components/bh-input-password/bh-input-password.js.map +1 -0
- package/collection/components/bh-input-text/bh-input-text.css +153 -0
- package/collection/components/bh-input-text/bh-input-text.js +696 -0
- package/collection/components/bh-input-text/bh-input-text.js.map +1 -0
- package/collection/components/bh-input-verification/bh-input-verification.css +125 -0
- package/collection/components/bh-input-verification/bh-input-verification.js +523 -0
- package/collection/components/bh-input-verification/bh-input-verification.js.map +1 -0
- package/collection/components/bh-label/bh-label.css +143 -0
- package/collection/components/bh-label/bh-label.js +302 -0
- package/collection/components/bh-label/bh-label.js.map +1 -0
- package/collection/components/bh-loader-spinner/bh-loader-spinner.css +153 -0
- package/collection/components/bh-loader-spinner/bh-loader-spinner.js +182 -0
- package/collection/components/bh-loader-spinner/bh-loader-spinner.js.map +1 -0
- package/collection/components/bh-logo-box/bh-logo-box.css +85 -0
- package/collection/components/bh-logo-box/bh-logo-box.js +184 -0
- package/collection/components/bh-logo-box/bh-logo-box.js.map +1 -0
- package/collection/components/bh-modal/bh-modal.css +87 -0
- package/collection/components/bh-modal/bh-modal.js +144 -0
- package/collection/components/bh-modal/bh-modal.js.map +1 -0
- package/collection/components/bh-modal-actions/bh-modal-actions.css +124 -0
- package/collection/components/bh-modal-actions/bh-modal-actions.js +208 -0
- package/collection/components/bh-modal-actions/bh-modal-actions.js.map +1 -0
- package/collection/components/bh-modal-header/bh-modal-header.css +106 -0
- package/collection/components/bh-modal-header/bh-modal-header.js +275 -0
- package/collection/components/bh-modal-header/bh-modal-header.js.map +1 -0
- package/collection/components/bh-month-picker/bh-month-picker.css +251 -0
- package/collection/components/bh-month-picker/bh-month-picker.js +444 -0
- package/collection/components/bh-month-picker/bh-month-picker.js.map +1 -0
- package/collection/components/bh-month-picker-content/bh-month-picker-content.css +406 -0
- package/collection/components/bh-month-picker-content/bh-month-picker-content.js +437 -0
- package/collection/components/bh-month-picker-content/bh-month-picker-content.js.map +1 -0
- package/collection/components/bh-notification/bh-notification.css +117 -0
- package/collection/components/bh-notification/bh-notification.js +324 -0
- package/collection/components/bh-notification/bh-notification.js.map +1 -0
- package/collection/components/bh-page-navigation/bh-page-navigation.css +253 -0
- package/collection/components/bh-page-navigation/bh-page-navigation.js +146 -0
- package/collection/components/bh-page-navigation/bh-page-navigation.js.map +1 -0
- package/collection/components/bh-page-navigation-child/bh-page-navigation-child.css +281 -0
- package/collection/components/bh-page-navigation-child/bh-page-navigation-child.js +148 -0
- package/collection/components/bh-page-navigation-child/bh-page-navigation-child.js.map +1 -0
- package/collection/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.css +372 -0
- package/collection/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.js +268 -0
- package/collection/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.js.map +1 -0
- package/collection/components/bh-page-navigation-single-level/bh-page-navigation-single-level.css +294 -0
- package/collection/components/bh-page-navigation-single-level/bh-page-navigation-single-level.js +126 -0
- package/collection/components/bh-page-navigation-single-level/bh-page-navigation-single-level.js.map +1 -0
- package/collection/components/bh-picker-menu/bh-picker-menu.css +284 -0
- package/collection/components/bh-picker-menu/bh-picker-menu.js +470 -0
- package/collection/components/bh-picker-menu/bh-picker-menu.js.map +1 -0
- package/collection/components/bh-pie-chart/bh-pie-chart.css +292 -0
- package/collection/components/bh-pie-chart/bh-pie-chart.js +280 -0
- package/collection/components/bh-pie-chart/bh-pie-chart.js.map +1 -0
- package/collection/components/bh-popover/bh-popover.css +310 -0
- package/collection/components/bh-popover/bh-popover.js +326 -0
- package/collection/components/bh-popover/bh-popover.js.map +1 -0
- package/collection/components/bh-product-switcher/bh-product-switcher.css +128 -0
- package/collection/components/bh-product-switcher/bh-product-switcher.js +226 -0
- package/collection/components/bh-product-switcher/bh-product-switcher.js.map +1 -0
- package/collection/components/bh-property-switcher/bh-property-switcher.css +346 -0
- package/collection/components/bh-property-switcher/bh-property-switcher.js +360 -0
- package/collection/components/bh-property-switcher/bh-property-switcher.js.map +1 -0
- package/collection/components/bh-radio-button/bh-radio-button.css +159 -0
- package/collection/components/bh-radio-button/bh-radio-button.js +292 -0
- package/collection/components/bh-radio-button/bh-radio-button.js.map +1 -0
- package/collection/components/bh-sidebar/bh-nav-item.css +114 -0
- package/collection/components/bh-sidebar/bh-nav-item.js +157 -0
- package/collection/components/bh-sidebar/bh-nav-item.js.map +1 -0
- package/collection/components/bh-sidebar/bh-sidebar.css +178 -0
- package/collection/components/bh-sidebar/bh-sidebar.js +344 -0
- package/collection/components/bh-sidebar/bh-sidebar.js.map +1 -0
- package/collection/components/bh-skeleton-loader/bh-skeleton-loader.css +50 -0
- package/collection/components/bh-skeleton-loader/bh-skeleton-loader.js +99 -0
- package/collection/components/bh-skeleton-loader/bh-skeleton-loader.js.map +1 -0
- package/collection/components/bh-tab-item/bh-tab-item.css +132 -0
- package/collection/components/bh-tab-item/bh-tab-item.js +158 -0
- package/collection/components/bh-tab-item/bh-tab-item.js.map +1 -0
- package/collection/components/bh-tabs/bh-tabs.css +71 -0
- package/collection/components/bh-tabs/bh-tabs.js +178 -0
- package/collection/components/bh-tabs/bh-tabs.js.map +1 -0
- package/collection/components/bh-tag/bh-tag.css +180 -0
- package/collection/components/bh-tag/bh-tag.js +238 -0
- package/collection/components/bh-tag/bh-tag.js.map +1 -0
- package/collection/components/bh-textarea/bh-textarea.css +115 -0
- package/collection/components/bh-textarea/bh-textarea.js +569 -0
- package/collection/components/bh-textarea/bh-textarea.js.map +1 -0
- package/collection/components/bh-toggle/bh-toggle.css +290 -0
- package/collection/components/bh-toggle/bh-toggle.js +369 -0
- package/collection/components/bh-toggle/bh-toggle.js.map +1 -0
- package/collection/components/bh-tooltip/bh-tooltip.css +88 -0
- package/collection/components/bh-tooltip/bh-tooltip.js +162 -0
- package/collection/components/bh-tooltip/bh-tooltip.js.map +1 -0
- package/collection/components/bh-trend-chart/bh-trend-chart.css +299 -0
- package/collection/components/bh-trend-chart/bh-trend-chart.js +256 -0
- package/collection/components/bh-trend-chart/bh-trend-chart.js.map +1 -0
- package/collection/index.js +22 -0
- package/collection/index.js.map +1 -0
- package/collection/utils/form.js +68 -0
- package/collection/utils/form.js.map +1 -0
- package/components/bh-accordion-item.d.ts +11 -0
- package/components/bh-accordion-item.js +111 -0
- package/components/bh-accordion-item.js.map +1 -0
- package/components/bh-accordion.d.ts +11 -0
- package/components/bh-accordion.js +147 -0
- package/components/bh-accordion.js.map +1 -0
- package/components/bh-appbar.d.ts +11 -0
- package/components/bh-appbar.js +128 -0
- package/components/bh-appbar.js.map +1 -0
- package/components/bh-autocomplete-menu.d.ts +11 -0
- package/components/bh-autocomplete-menu.js +9 -0
- package/components/bh-autocomplete-menu.js.map +1 -0
- package/components/bh-avatar-add.d.ts +11 -0
- package/components/bh-avatar-add.js +9 -0
- package/components/bh-avatar-add.js.map +1 -0
- package/components/bh-avatar-stacked.d.ts +11 -0
- package/components/bh-avatar-stacked.js +141 -0
- package/components/bh-avatar-stacked.js.map +1 -0
- package/components/bh-avatar.d.ts +11 -0
- package/components/bh-avatar.js +9 -0
- package/components/bh-avatar.js.map +1 -0
- package/components/bh-badge-dot.d.ts +11 -0
- package/components/bh-badge-dot.js +9 -0
- package/components/bh-badge-dot.js.map +1 -0
- package/components/bh-badge.d.ts +11 -0
- package/components/bh-badge.js +9 -0
- package/components/bh-badge.js.map +1 -0
- package/components/bh-bar-chart.d.ts +11 -0
- package/components/bh-bar-chart.js +205 -0
- package/components/bh-bar-chart.js.map +1 -0
- package/components/bh-breadcrumbs.d.ts +11 -0
- package/components/bh-breadcrumbs.js +9 -0
- package/components/bh-breadcrumbs.js.map +1 -0
- package/components/bh-button-icon.d.ts +11 -0
- package/components/bh-button-icon.js +9 -0
- package/components/bh-button-icon.js.map +1 -0
- package/components/bh-button.d.ts +11 -0
- package/components/bh-button.js +9 -0
- package/components/bh-button.js.map +1 -0
- package/components/bh-card-footer.d.ts +11 -0
- package/components/bh-card-footer.js +9 -0
- package/components/bh-card-footer.js.map +1 -0
- package/components/bh-card-header.d.ts +11 -0
- package/components/bh-card-header.js +9 -0
- package/components/bh-card-header.js.map +1 -0
- package/components/bh-card.d.ts +11 -0
- package/components/bh-card.js +9 -0
- package/components/bh-card.js.map +1 -0
- package/components/bh-chart-tooltip.d.ts +11 -0
- package/components/bh-chart-tooltip.js +9 -0
- package/components/bh-chart-tooltip.js.map +1 -0
- package/components/bh-checkbox-group-item.d.ts +11 -0
- package/components/bh-checkbox-group-item.js +9 -0
- package/components/bh-checkbox-group-item.js.map +1 -0
- package/components/bh-checkbox-group.d.ts +11 -0
- package/components/bh-checkbox-group.js +9 -0
- package/components/bh-checkbox-group.js.map +1 -0
- package/components/bh-checkbox.d.ts +11 -0
- package/components/bh-checkbox.js +9 -0
- package/components/bh-checkbox.js.map +1 -0
- package/components/bh-container-footer.d.ts +11 -0
- package/components/bh-container-footer.js +74 -0
- package/components/bh-container-footer.js.map +1 -0
- package/components/bh-container.d.ts +11 -0
- package/components/bh-container.js +49 -0
- package/components/bh-container.js.map +1 -0
- package/components/bh-data-grid.d.ts +11 -0
- package/components/bh-data-grid.js +9 -0
- package/components/bh-data-grid.js.map +1 -0
- package/components/bh-date-picker-content.d.ts +11 -0
- package/components/bh-date-picker-content.js +9 -0
- package/components/bh-date-picker-content.js.map +1 -0
- package/components/bh-date-picker.d.ts +11 -0
- package/components/bh-date-picker.js +9 -0
- package/components/bh-date-picker.js.map +1 -0
- package/components/bh-date-range-picker-content.d.ts +11 -0
- package/components/bh-date-range-picker-content.js +9 -0
- package/components/bh-date-range-picker-content.js.map +1 -0
- package/components/bh-date-range-picker.d.ts +11 -0
- package/components/bh-date-range-picker.js +269 -0
- package/components/bh-date-range-picker.js.map +1 -0
- package/components/bh-dropdown-menu.d.ts +11 -0
- package/components/bh-dropdown-menu.js +9 -0
- package/components/bh-dropdown-menu.js.map +1 -0
- package/components/bh-dropdown.d.ts +11 -0
- package/components/bh-dropdown.js +9 -0
- package/components/bh-dropdown.js.map +1 -0
- package/components/bh-empty-state.d.ts +11 -0
- package/components/bh-empty-state.js +9 -0
- package/components/bh-empty-state.js.map +1 -0
- package/components/bh-featured-icon.d.ts +11 -0
- package/components/bh-featured-icon.js +9 -0
- package/components/bh-featured-icon.js.map +1 -0
- package/components/bh-illustrations.d.ts +11 -0
- package/components/bh-illustrations.js +92 -0
- package/components/bh-illustrations.js.map +1 -0
- package/components/bh-input-autocomplete.d.ts +11 -0
- package/components/bh-input-autocomplete.js +433 -0
- package/components/bh-input-autocomplete.js.map +1 -0
- package/components/bh-input-number.d.ts +11 -0
- package/components/bh-input-number.js +370 -0
- package/components/bh-input-number.js.map +1 -0
- package/components/bh-input-password.d.ts +11 -0
- package/components/bh-input-password.js +229 -0
- package/components/bh-input-password.js.map +1 -0
- package/components/bh-input-text.d.ts +11 -0
- package/components/bh-input-text.js +9 -0
- package/components/bh-input-text.js.map +1 -0
- package/components/bh-input-verification.d.ts +11 -0
- package/components/bh-input-verification.js +255 -0
- package/components/bh-input-verification.js.map +1 -0
- package/components/bh-label.d.ts +11 -0
- package/components/bh-label.js +9 -0
- package/components/bh-label.js.map +1 -0
- package/components/bh-loader-spinner.d.ts +11 -0
- package/components/bh-loader-spinner.js +9 -0
- package/components/bh-loader-spinner.js.map +1 -0
- package/components/bh-logo-box.d.ts +11 -0
- package/components/bh-logo-box.js +9 -0
- package/components/bh-logo-box.js.map +1 -0
- package/components/bh-modal-actions.d.ts +11 -0
- package/components/bh-modal-actions.js +105 -0
- package/components/bh-modal-actions.js.map +1 -0
- package/components/bh-modal-header.d.ts +11 -0
- package/components/bh-modal-header.js +119 -0
- package/components/bh-modal-header.js.map +1 -0
- package/components/bh-modal.d.ts +11 -0
- package/components/bh-modal.js +9 -0
- package/components/bh-modal.js.map +1 -0
- package/components/bh-month-picker-content.d.ts +11 -0
- package/components/bh-month-picker-content.js +9 -0
- package/components/bh-month-picker-content.js.map +1 -0
- package/components/bh-month-picker.d.ts +11 -0
- package/components/bh-month-picker.js +233 -0
- package/components/bh-month-picker.js.map +1 -0
- package/components/bh-nav-item.d.ts +11 -0
- package/components/bh-nav-item.js +9 -0
- package/components/bh-nav-item.js.map +1 -0
- package/components/bh-notification.d.ts +11 -0
- package/components/bh-notification.js +175 -0
- package/components/bh-notification.js.map +1 -0
- package/components/bh-page-navigation-child.d.ts +11 -0
- package/components/bh-page-navigation-child.js +9 -0
- package/components/bh-page-navigation-child.js.map +1 -0
- package/components/bh-page-navigation-multi-level.d.ts +11 -0
- package/components/bh-page-navigation-multi-level.js +9 -0
- package/components/bh-page-navigation-multi-level.js.map +1 -0
- package/components/bh-page-navigation-single-level.d.ts +11 -0
- package/components/bh-page-navigation-single-level.js +9 -0
- package/components/bh-page-navigation-single-level.js.map +1 -0
- package/components/bh-page-navigation.d.ts +11 -0
- package/components/bh-page-navigation.js +129 -0
- package/components/bh-page-navigation.js.map +1 -0
- package/components/bh-picker-menu.d.ts +11 -0
- package/components/bh-picker-menu.js +9 -0
- package/components/bh-picker-menu.js.map +1 -0
- package/components/bh-pie-chart.d.ts +11 -0
- package/components/bh-pie-chart.js +194 -0
- package/components/bh-pie-chart.js.map +1 -0
- package/components/bh-popover.d.ts +11 -0
- package/components/bh-popover.js +131 -0
- package/components/bh-popover.js.map +1 -0
- package/components/bh-product-switcher.d.ts +11 -0
- package/components/bh-product-switcher.js +9 -0
- package/components/bh-product-switcher.js.map +1 -0
- package/components/bh-property-switcher.d.ts +11 -0
- package/components/bh-property-switcher.js +261 -0
- package/components/bh-property-switcher.js.map +1 -0
- package/components/bh-radio-button.d.ts +11 -0
- package/components/bh-radio-button.js +9 -0
- package/components/bh-radio-button.js.map +1 -0
- package/components/bh-sidebar.d.ts +11 -0
- package/components/bh-sidebar.js +195 -0
- package/components/bh-sidebar.js.map +1 -0
- package/components/bh-skeleton-loader.d.ts +11 -0
- package/components/bh-skeleton-loader.js +59 -0
- package/components/bh-skeleton-loader.js.map +1 -0
- package/components/bh-tab-item.d.ts +11 -0
- package/components/bh-tab-item.js +80 -0
- package/components/bh-tab-item.js.map +1 -0
- package/components/bh-tabs.d.ts +11 -0
- package/components/bh-tabs.js +78 -0
- package/components/bh-tabs.js.map +1 -0
- package/components/bh-tag.d.ts +11 -0
- package/components/bh-tag.js +9 -0
- package/components/bh-tag.js.map +1 -0
- package/components/bh-textarea.d.ts +11 -0
- package/components/bh-textarea.js +207 -0
- package/components/bh-textarea.js.map +1 -0
- package/components/bh-toggle.d.ts +11 -0
- package/components/bh-toggle.js +9 -0
- package/components/bh-toggle.js.map +1 -0
- package/components/bh-tooltip.d.ts +11 -0
- package/components/bh-tooltip.js +9 -0
- package/components/bh-tooltip.js.map +1 -0
- package/components/bh-trend-chart.d.ts +11 -0
- package/components/bh-trend-chart.js +149 -0
- package/components/bh-trend-chart.js.map +1 -0
- package/components/index.d.ts +33 -0
- package/components/index.js +16 -0
- package/components/index.js.map +1 -0
- package/components/p-2KjdCYlS.js +59 -0
- package/components/p-2KjdCYlS.js.map +1 -0
- package/components/p-54wXxbeh.js +213 -0
- package/components/p-54wXxbeh.js.map +1 -0
- package/components/p-9a7sQzad.js +1463 -0
- package/components/p-9a7sQzad.js.map +1 -0
- package/components/p-B3doeS-4.js +158 -0
- package/components/p-B3doeS-4.js.map +1 -0
- package/components/p-B4TBDBoW.js +71 -0
- package/components/p-B4TBDBoW.js.map +1 -0
- package/components/p-BBenNW93.js +184 -0
- package/components/p-BBenNW93.js.map +1 -0
- package/components/p-BLRNfy0t.js +84 -0
- package/components/p-BLRNfy0t.js.map +1 -0
- package/components/p-BYhYSIIs.js +941 -0
- package/components/p-BYhYSIIs.js.map +1 -0
- package/components/p-Bbo_Dwmk.js +70 -0
- package/components/p-Bbo_Dwmk.js.map +1 -0
- package/components/p-BdcGkck5.js +72 -0
- package/components/p-BdcGkck5.js.map +1 -0
- package/components/p-Bk8GbEQp.js +132 -0
- package/components/p-Bk8GbEQp.js.map +1 -0
- package/components/p-CDPKBnfQ.js +92 -0
- package/components/p-CDPKBnfQ.js.map +1 -0
- package/components/p-CDgBIIbC.js +224 -0
- package/components/p-CDgBIIbC.js.map +1 -0
- package/components/p-CErNA5c8.js +204 -0
- package/components/p-CErNA5c8.js.map +1 -0
- package/components/p-CQBqn1IO.js +67 -0
- package/components/p-CQBqn1IO.js.map +1 -0
- package/components/p-CTjPiCcp.js +51 -0
- package/components/p-CTjPiCcp.js.map +1 -0
- package/components/p-CciWcvHP.js +123 -0
- package/components/p-CciWcvHP.js.map +1 -0
- package/components/p-CiQqgc-m.js +434 -0
- package/components/p-CiQqgc-m.js.map +1 -0
- package/components/p-CsRNKalM.js +166 -0
- package/components/p-CsRNKalM.js.map +1 -0
- package/components/p-CuVsQ9St.js +123 -0
- package/components/p-CuVsQ9St.js.map +1 -0
- package/components/p-D3OkBDd3.js +100 -0
- package/components/p-D3OkBDd3.js.map +1 -0
- package/components/p-D6cM-mvE.js +64 -0
- package/components/p-D6cM-mvE.js.map +1 -0
- package/components/p-D6kh9oF2.js +70 -0
- package/components/p-D6kh9oF2.js.map +1 -0
- package/components/p-DHSWIF-h.js +214 -0
- package/components/p-DHSWIF-h.js.map +1 -0
- package/components/p-DNhCX5eS.js +153 -0
- package/components/p-DNhCX5eS.js.map +1 -0
- package/components/p-DRGkYX1u.js +78 -0
- package/components/p-DRGkYX1u.js.map +1 -0
- package/components/p-DRJW4zBc.js +58 -0
- package/components/p-DRJW4zBc.js.map +1 -0
- package/components/p-DTgHvmlL.js +149 -0
- package/components/p-DTgHvmlL.js.map +1 -0
- package/components/p-DVhHZCku.js +220 -0
- package/components/p-DVhHZCku.js.map +1 -0
- package/components/p-DWpdUpK5.js +264 -0
- package/components/p-DWpdUpK5.js.map +1 -0
- package/components/p-D_DKZMpk.js +78 -0
- package/components/p-D_DKZMpk.js.map +1 -0
- package/components/p-Dbl0HXBJ.js +241 -0
- package/components/p-Dbl0HXBJ.js.map +1 -0
- package/components/p-DecYIvq4.js +124 -0
- package/components/p-DecYIvq4.js.map +1 -0
- package/components/p-DfXkVfrE.js +129 -0
- package/components/p-DfXkVfrE.js.map +1 -0
- package/components/p-HEcFS8Jc.js +125 -0
- package/components/p-HEcFS8Jc.js.map +1 -0
- package/components/p-MIbEYjCv.js +142 -0
- package/components/p-MIbEYjCv.js.map +1 -0
- package/components/p-NXL0pYS_.js +97 -0
- package/components/p-NXL0pYS_.js.map +1 -0
- package/components/p-X9MH3dtg.js +154 -0
- package/components/p-X9MH3dtg.js.map +1 -0
- package/components/p-YJm8-pxX.js +118 -0
- package/components/p-YJm8-pxX.js.map +1 -0
- package/components/p-ghuDbZwh.js +148 -0
- package/components/p-ghuDbZwh.js.map +1 -0
- package/components/p-p8W0xKpn.js +106 -0
- package/components/p-p8W0xKpn.js.map +1 -0
- package/esm/bellhop-core.js +21 -0
- package/esm/bellhop-core.js.map +1 -0
- package/esm/bh-accordion-item.entry.js +80 -0
- package/esm/bh-accordion-item.entry.js.map +1 -0
- package/esm/bh-accordion.entry.js +117 -0
- package/esm/bh-accordion.entry.js.map +1 -0
- package/esm/bh-appbar.entry.js +81 -0
- package/esm/bh-appbar.entry.js.map +1 -0
- package/esm/bh-autocomplete-menu.bh-tag.entry.js.map +1 -0
- package/esm/bh-autocomplete-menu_2.entry.js +174 -0
- package/esm/bh-avatar-add.entry.js +73 -0
- package/esm/bh-avatar-add.entry.js.map +1 -0
- package/esm/bh-avatar-stacked.entry.js +92 -0
- package/esm/bh-avatar-stacked.entry.js.map +1 -0
- package/esm/bh-avatar.entry.js +91 -0
- package/esm/bh-avatar.entry.js.map +1 -0
- package/esm/bh-badge-dot.bh-breadcrumbs.entry.js.map +1 -0
- package/esm/bh-badge-dot_2.entry.js +131 -0
- package/esm/bh-badge.entry.js +69 -0
- package/esm/bh-badge.entry.js.map +1 -0
- package/esm/bh-bar-chart.entry.js +162 -0
- package/esm/bh-bar-chart.entry.js.map +1 -0
- package/esm/bh-button-CBZGiLVh.js +115 -0
- package/esm/bh-button-CBZGiLVh.js.map +1 -0
- package/esm/bh-button-icon.entry.js +72 -0
- package/esm/bh-button-icon.entry.js.map +1 -0
- package/esm/bh-button.bh-loader-spinner.entry.js.map +1 -0
- package/esm/bh-button_2.entry.js +44 -0
- package/esm/bh-card-footer.entry.js +28 -0
- package/esm/bh-card-footer.entry.js.map +1 -0
- package/esm/bh-card-header.entry.js +72 -0
- package/esm/bh-card-header.entry.js.map +1 -0
- package/esm/bh-card.entry.js +46 -0
- package/esm/bh-card.entry.js.map +1 -0
- package/esm/bh-chart-tooltip.entry.js +55 -0
- package/esm/bh-chart-tooltip.entry.js.map +1 -0
- package/esm/bh-checkbox-group-item.entry.js +140 -0
- package/esm/bh-checkbox-group-item.entry.js.map +1 -0
- package/esm/bh-checkbox-group.entry.js +98 -0
- package/esm/bh-checkbox-group.entry.js.map +1 -0
- package/esm/bh-checkbox.entry.js +142 -0
- package/esm/bh-checkbox.entry.js.map +1 -0
- package/esm/bh-container-footer.entry.js +36 -0
- package/esm/bh-container-footer.entry.js.map +1 -0
- package/esm/bh-container.entry.js +24 -0
- package/esm/bh-container.entry.js.map +1 -0
- package/esm/bh-data-grid.entry.js +810 -0
- package/esm/bh-data-grid.entry.js.map +1 -0
- package/esm/bh-date-picker-content.bh-picker-menu.entry.js.map +1 -0
- package/esm/bh-date-picker-content_2.entry.js +522 -0
- package/esm/bh-date-picker.bh-empty-state.entry.js.map +1 -0
- package/esm/bh-date-picker_2.entry.js +249 -0
- package/esm/bh-date-range-picker-content.entry.js +149 -0
- package/esm/bh-date-range-picker-content.entry.js.map +1 -0
- package/esm/bh-date-range-picker.entry.js +165 -0
- package/esm/bh-date-range-picker.entry.js.map +1 -0
- package/esm/bh-dropdown-menu.entry.js +112 -0
- package/esm/bh-dropdown-menu.entry.js.map +1 -0
- package/esm/bh-dropdown.bh-logo-box.bh-nav-item.entry.js.map +1 -0
- package/esm/bh-dropdown_3.entry.js +303 -0
- package/esm/bh-featured-icon.entry.js +39 -0
- package/esm/bh-featured-icon.entry.js.map +1 -0
- package/esm/bh-illustrations.entry.js +63 -0
- package/esm/bh-illustrations.entry.js.map +1 -0
- package/esm/bh-input-autocomplete.entry.js +340 -0
- package/esm/bh-input-autocomplete.entry.js.map +1 -0
- package/esm/bh-input-number.entry.js +305 -0
- package/esm/bh-input-number.entry.js.map +1 -0
- package/esm/bh-input-password.entry.js +180 -0
- package/esm/bh-input-password.entry.js.map +1 -0
- package/esm/bh-input-text.entry.js +190 -0
- package/esm/bh-input-text.entry.js.map +1 -0
- package/esm/bh-input-verification.entry.js +201 -0
- package/esm/bh-input-verification.entry.js.map +1 -0
- package/esm/bh-label-DqsVrCg_.js +108 -0
- package/esm/bh-label-DqsVrCg_.js.map +1 -0
- package/esm/bh-label.bh-tooltip.entry.js.map +1 -0
- package/esm/bh-label_2.entry.js +45 -0
- package/esm/bh-modal-actions.entry.js +64 -0
- package/esm/bh-modal-actions.entry.js.map +1 -0
- package/esm/bh-modal-header.entry.js +74 -0
- package/esm/bh-modal-header.entry.js.map +1 -0
- package/esm/bh-modal.entry.js +54 -0
- package/esm/bh-modal.entry.js.map +1 -0
- package/esm/bh-month-picker-content.entry.js +187 -0
- package/esm/bh-month-picker-content.entry.js.map +1 -0
- package/esm/bh-month-picker.entry.js +150 -0
- package/esm/bh-month-picker.entry.js.map +1 -0
- package/esm/bh-notification.entry.js +126 -0
- package/esm/bh-notification.entry.js.map +1 -0
- package/esm/bh-page-navigation-child.entry.js +46 -0
- package/esm/bh-page-navigation-child.entry.js.map +1 -0
- package/esm/bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.js.map +1 -0
- package/esm/bh-page-navigation-multi-level_2.entry.js +143 -0
- package/esm/bh-page-navigation.entry.js +70 -0
- package/esm/bh-page-navigation.entry.js.map +1 -0
- package/esm/bh-pie-chart.entry.js +155 -0
- package/esm/bh-pie-chart.entry.js.map +1 -0
- package/esm/bh-popover.entry.js +98 -0
- package/esm/bh-popover.entry.js.map +1 -0
- package/esm/bh-product-switcher.entry.js +100 -0
- package/esm/bh-product-switcher.entry.js.map +1 -0
- package/esm/bh-property-switcher.entry.js +229 -0
- package/esm/bh-property-switcher.entry.js.map +1 -0
- package/esm/bh-radio-button.entry.js +122 -0
- package/esm/bh-radio-button.entry.js.map +1 -0
- package/esm/bh-sidebar.entry.js +108 -0
- package/esm/bh-sidebar.entry.js.map +1 -0
- package/esm/bh-skeleton-loader.entry.js +32 -0
- package/esm/bh-skeleton-loader.entry.js.map +1 -0
- package/esm/bh-tab-item.entry.js +52 -0
- package/esm/bh-tab-item.entry.js.map +1 -0
- package/esm/bh-tabs.entry.js +50 -0
- package/esm/bh-tabs.entry.js.map +1 -0
- package/esm/bh-textarea.entry.js +159 -0
- package/esm/bh-textarea.entry.js.map +1 -0
- package/esm/bh-toggle.entry.js +139 -0
- package/esm/bh-toggle.entry.js.map +1 -0
- package/esm/bh-trend-chart.entry.js +119 -0
- package/esm/bh-trend-chart.entry.js.map +1 -0
- package/esm/form-CPgx0iFq.js +59 -0
- package/esm/form-CPgx0iFq.js.map +1 -0
- package/esm/index-DtVghh5W.js +1922 -0
- package/esm/index-DtVghh5W.js.map +1 -0
- package/esm/index.js +15 -0
- package/esm/index.js.map +1 -0
- package/esm/loader.js +11 -0
- package/esm/loader.js.map +1 -0
- package/index.cjs.js +1 -0
- package/index.js +1 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +32 -0
- package/types/components/bh-accordion/bh-accordion.d.ts +42 -0
- package/types/components/bh-accordion-item/bh-accordion-item.d.ts +41 -0
- package/types/components/bh-appbar/bh-appbar.d.ts +54 -0
- package/types/components/bh-autocomplete-menu/bh-autocomplete-menu.d.ts +54 -0
- package/types/components/bh-avatar/bh-avatar.d.ts +43 -0
- package/types/components/bh-avatar-add/bh-avatar-add.d.ts +35 -0
- package/types/components/bh-avatar-stacked/bh-avatar-stacked.d.ts +42 -0
- package/types/components/bh-badge/bh-badge.d.ts +40 -0
- package/types/components/bh-badge-dot/bh-badge-dot.d.ts +17 -0
- package/types/components/bh-bar-chart/bh-bar-chart.d.ts +50 -0
- package/types/components/bh-breadcrumbs/bh-breadcrumbs.d.ts +40 -0
- package/types/components/bh-button/bh-button.d.ts +57 -0
- package/types/components/bh-button-icon/bh-button-icon.d.ts +44 -0
- package/types/components/bh-card/bh-card.d.ts +23 -0
- package/types/components/bh-card-footer/bh-card-footer.d.ts +12 -0
- package/types/components/bh-card-header/bh-card-header.d.ts +59 -0
- package/types/components/bh-chart-tooltip/bh-chart-tooltip.d.ts +40 -0
- package/types/components/bh-checkbox/bh-checkbox.d.ts +45 -0
- package/types/components/bh-checkbox-group/bh-checkbox-group.d.ts +34 -0
- package/types/components/bh-checkbox-group-item/bh-checkbox-group-item.d.ts +67 -0
- package/types/components/bh-container/bh-container.d.ts +7 -0
- package/types/components/bh-container-footer/bh-container-footer.d.ts +18 -0
- package/types/components/bh-data-grid/bh-data-grid.d.ts +235 -0
- package/types/components/bh-date-picker/bh-date-picker.d.ts +78 -0
- package/types/components/bh-date-picker-content/bh-date-picker-content.d.ts +112 -0
- package/types/components/bh-date-range-picker/bh-date-range-picker.d.ts +85 -0
- package/types/components/bh-date-range-picker-content/bh-date-range-picker-content.d.ts +55 -0
- package/types/components/bh-dropdown/bh-dropdown.d.ts +78 -0
- package/types/components/bh-dropdown-menu/bh-dropdown-menu.d.ts +51 -0
- package/types/components/bh-empty-state/bh-empty-state.d.ts +52 -0
- package/types/components/bh-featured-icon/bh-featured-icon.d.ts +22 -0
- package/types/components/bh-illustrations/bh-illustrations.d.ts +25 -0
- package/types/components/bh-input-autocomplete/bh-input-autocomplete.d.ts +130 -0
- package/types/components/bh-input-number/bh-input-number.d.ts +137 -0
- package/types/components/bh-input-password/bh-input-password.d.ts +111 -0
- package/types/components/bh-input-text/bh-input-text.d.ts +126 -0
- package/types/components/bh-input-verification/bh-input-verification.d.ts +79 -0
- package/types/components/bh-label/bh-label.d.ts +54 -0
- package/types/components/bh-loader-spinner/bh-loader-spinner.d.ts +19 -0
- package/types/components/bh-logo-box/bh-logo-box.d.ts +28 -0
- package/types/components/bh-modal/bh-modal.d.ts +23 -0
- package/types/components/bh-modal-actions/bh-modal-actions.d.ts +38 -0
- package/types/components/bh-modal-header/bh-modal-header.d.ts +45 -0
- package/types/components/bh-month-picker/bh-month-picker.d.ts +73 -0
- package/types/components/bh-month-picker-content/bh-month-picker-content.d.ts +77 -0
- package/types/components/bh-notification/bh-notification.d.ts +51 -0
- package/types/components/bh-page-navigation/bh-page-navigation.d.ts +45 -0
- package/types/components/bh-page-navigation-child/bh-page-navigation-child.d.ts +26 -0
- package/types/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.d.ts +60 -0
- package/types/components/bh-page-navigation-single-level/bh-page-navigation-single-level.d.ts +22 -0
- package/types/components/bh-picker-menu/bh-picker-menu.d.ts +76 -0
- package/types/components/bh-pie-chart/bh-pie-chart.d.ts +50 -0
- package/types/components/bh-popover/bh-popover.d.ts +60 -0
- package/types/components/bh-product-switcher/bh-product-switcher.d.ts +40 -0
- package/types/components/bh-property-switcher/bh-property-switcher.d.ts +63 -0
- package/types/components/bh-radio-button/bh-radio-button.d.ts +56 -0
- package/types/components/bh-sidebar/bh-nav-item.d.ts +26 -0
- package/types/components/bh-sidebar/bh-sidebar.d.ts +70 -0
- package/types/components/bh-skeleton-loader/bh-skeleton-loader.d.ts +15 -0
- package/types/components/bh-tab-item/bh-tab-item.d.ts +29 -0
- package/types/components/bh-tabs/bh-tabs.d.ts +30 -0
- package/types/components/bh-tag/bh-tag.d.ts +25 -0
- package/types/components/bh-textarea/bh-textarea.d.ts +101 -0
- package/types/components/bh-toggle/bh-toggle.d.ts +66 -0
- package/types/components/bh-tooltip/bh-tooltip.d.ts +25 -0
- package/types/components/bh-trend-chart/bh-trend-chart.d.ts +34 -0
- package/types/components.d.ts +7199 -0
- package/types/index.d.ts +12 -0
- package/types/stencil-public-runtime.d.ts +1756 -0
- package/types/utils/form.d.ts +39 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-month-picker-content.entry.esm.js","sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n width: 100%;\n overflow-x: hidden;\n font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n max-height: 340px;\n overflow-y: auto;\n overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n background: transparent;\n border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: var(--radius-xs);\n transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.year-month-container {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n width: auto;\n height: auto;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n font-family: var(--font-inter);\n font-weight: var(--weight-bold);\n font-size: var(--text-sm-size);\n line-height: var(--text-md-line);\n color: var(--color-neutral-700);\n flex-shrink: 0;\n min-width: 50px;\n padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n display: flex;\n flex-direction: column;\n /* flex: 1;\n width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n width: 40px;\n height: 40px;\n border-radius: var(--radius-full);\n border: 2px solid transparent;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--leading-sm);\n color: var(--color-neutral-500);\n cursor: pointer;\n transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n flex-shrink: 0;\n text-align: center;\n overflow: hidden;\n}\n\n.month-row {\n display: flex;\n gap: var(--spacing-sm);\n justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n background: var(--color-neutral-50);\n color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n background: var(--color-brand-600);\n color: var(--color-white);\n font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n background: var(--color-brand-100);\n color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n width: 100%;\n margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.divider-line {\n width: 100%;\n height: 1px;\n background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n month: number; // 0-11 (January = 0, December = 11)\n year: number;\n}\n\nexport interface DisabledMonth {\n month: number;\n year: number;\n}\n\n@Component({\n tag: 'bh-month-picker-content',\n styleUrl: 'bh-month-picker-content.css',\n shadow: true,\n})\nexport class BhMonthPickerContent {\n @Element() el!: HTMLElement;\n\n /**\n * Minimum year in the picker\n */\n @Prop() minYear: number = 1998;\n\n /**\n * Maximum year in the picker\n */\n @Prop() maxYear: number = 2060;\n\n /**\n * Whether the picker is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Array of disabled months\n */\n @Prop() disabledMonths: DisabledMonth[] = [];\n\n /**\n * Whether the content is scrollable\n */\n @Prop() scrollable: boolean = true;\n\n /**\n * Currently selected month (0-11)\n */\n @Prop() selectedMonth?: number;\n\n /**\n * Currently selected year\n */\n @Prop() selectedYear?: number;\n\n /**\n * Height of the content area\n */\n @Prop() height: string = '375px';\n\n /**\n * Value object with month and year\n */\n @Prop() value?: MonthYear;\n\n @State() internalSelectedMonth: number | null = null;\n @State() internalSelectedYear: number | null = null;\n @State() isUsingKeyboard: boolean = false;\n\n /**\n * Event emitted when a month is selected\n */\n @Event() bhChange!: EventEmitter<MonthYear>;\n\n /**\n * Event emitted when a month/year is selected\n */\n @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n private currentDate = new Date();\n private currentMonth = this.currentDate.getMonth();\n private currentYear = this.currentDate.getFullYear();\n\n @Watch('value')\n handleValueChange(newValue: MonthYear | undefined) {\n if (newValue) {\n this.internalSelectedMonth = newValue.month;\n this.internalSelectedYear = newValue.year;\n }\n }\n\n @Watch('selectedMonth')\n handleSelectedMonthChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedMonth = newValue;\n }\n }\n\n @Watch('selectedYear')\n handleSelectedYearChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedYear = newValue;\n }\n }\n\n componentWillLoad() {\n // Initialize with props or current date\n if (this.value) {\n this.internalSelectedMonth = this.value.month;\n this.internalSelectedYear = this.value.year;\n } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n } else {\n // Initialize with current date if within range\n if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear;\n } else {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n }\n }\n }\n\n componentDidLoad() {\n if (this.scrollable) {\n setTimeout(() => this.scrollToSelectedYear(), 0);\n }\n }\n\n private scrollToSelectedYear() {\n if (this.internalSelectedYear === null) return;\n\n const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n if (!container || !yearElement) return;\n\n const containerHeight = container.clientHeight;\n const yearElementTop = yearElement.offsetTop;\n const yearElementHeight = yearElement.offsetHeight;\n\n const isFirstYear = this.internalSelectedYear === this.minYear;\n const isLastYear = this.internalSelectedYear === this.maxYear;\n\n if (!isFirstYear && !isLastYear) {\n const scrollOffset = 50;\n const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n container.scrollTop = Math.max(0, scrollTop);\n } else if (isFirstYear) {\n container.scrollTop = 0;\n } else {\n container.scrollTop = container.scrollHeight;\n }\n }\n\n private getYears(): number[] {\n return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n }\n\n private isCurrentMonth(monthIndex: number, year: number): boolean {\n return this.currentMonth === monthIndex && this.currentYear === year;\n }\n\n private isMonthSelectable(monthIndex: number, year: number): boolean {\n if (year < this.minYear || year > this.maxYear) {\n return false;\n }\n\n return !this.disabledMonths.some(\n disabled => disabled.month === monthIndex && disabled.year === year\n );\n }\n\n private selectMonth(monthIndex: number, year: number) {\n if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n return;\n }\n\n this.internalSelectedMonth = monthIndex;\n this.internalSelectedYear = year;\n\n const selection: MonthYear = { month: monthIndex, year };\n this.bhChange.emit(selection);\n this.bhMonthYearSelect.emit(selection);\n }\n\n private handleKeyDown = () => {\n this.isUsingKeyboard = true;\n };\n\n private handleMouseDown = () => {\n this.isUsingKeyboard = false;\n };\n\n private getMonthButtonClasses(monthIndex: number, year: number): string {\n const classes = ['month-button'];\n\n if (!this.isMonthSelectable(monthIndex, year)) {\n classes.push('inactive');\n }\n if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n classes.push('selected');\n }\n if (this.isCurrentMonth(monthIndex, year)) {\n classes.push('today');\n }\n\n return classes.join(' ');\n }\n\n render() {\n const years = this.getYears();\n\n return (\n <Host>\n <div\n class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n style={{ height: this.height }}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <div class=\"calendar\">\n {years.map((year, yearIndex) => (\n <div key={year} class=\"year-section\" id={`year-${year}`}>\n <div class=\"year-month-container\">\n <div class=\"year-label\">{year}</div>\n\n <div class=\"months-row\">\n {/* First row: Jan-Jun */}\n <div class=\"month-row\">\n {this.months.slice(0, 6).map((_, monthIndex) => (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n ))}\n </div>\n\n {/* Second row: Jul-Dec */}\n <div class=\"month-row\">\n {this.months.slice(6, 12).map((_, idx) => {\n const monthIndex = idx + 6;\n return (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n );\n })}\n </div>\n </div>\n </div>\n\n {/* Section Divider (not for last year) */}\n {yearIndex < years.length - 1 && (\n <div class=\"section-divider\">\n <div class=\"divider-container\">\n <div class=\"divider-line\"></div>\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-month-picker.entry.esm.js","sources":["src/components/bh-month-picker/bh-month-picker.css?tag=bh-month-picker&encapsulation=shadow","src/components/bh-month-picker/bh-month-picker.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n.month-picker-container {\n position: relative;\n display: inline-block;\n}\n\n.month-picker-trigger {\n cursor: pointer;\n}\n\n.month-picker-trigger.input-field-container {\n position: relative;\n}\n\n.calendar-icon-overlay {\n position: absolute;\n top: 0;\n right: 0;\n width: 40px;\n height: 100%;\n cursor: pointer;\n z-index: 1;\n}\n\n.month-picker-menu-container {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n margin-top: var(--spacing-xs);\n}\n\n.month-picker-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 999;\n background: transparent;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { MonthYear, DisabledMonth } from '../bh-month-picker-content/bh-month-picker-content';\n\nexport type MonthPickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n tag: 'bh-month-picker',\n styleUrl: 'bh-month-picker.css',\n shadow: true,\n})\nexport class BhMonthPicker {\n /**\n * Variant of the month picker trigger\n */\n @Prop() variant: MonthPickerVariant = 'dropdown-outlined';\n\n /**\n * Minimum year in the picker\n */\n @Prop() minYear: number = 1998;\n\n /**\n * Maximum year in the picker\n */\n @Prop() maxYear: number = 2060;\n\n /**\n * Whether the picker is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Array of disabled months\n */\n @Prop() disabledMonths: DisabledMonth[] = [];\n\n /**\n * Label for input variant\n */\n @Prop() label: string = 'Select Month';\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string = 'Choose month and year';\n\n /**\n * Width for input variant\n */\n @Prop() inputWidth: string = '200px';\n\n /**\n * Whether to show the label\n */\n @Prop() showLabel: boolean = true;\n\n /**\n * Whether to show the footer\n */\n @Prop() showFooter: boolean = true;\n\n /**\n * Currently selected value\n */\n @Prop() value?: MonthYear;\n\n @State() selectedValue: MonthYear | null = null;\n @State() tempSelection: MonthYear | null = null;\n @State() isMenuOpen: boolean = false;\n @State() isMenuClosing: boolean = false;\n\n /**\n * Event emitted when value changes\n */\n @Event() bhChange!: EventEmitter<MonthYear | null>;\n\n /**\n * Event emitted when a month/year is selected\n */\n @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n @Watch('value')\n handleValueChange(newValue: MonthYear | undefined) {\n if (newValue !== undefined) {\n this.selectedValue = newValue;\n }\n }\n\n componentWillLoad() {\n if (this.value) {\n this.selectedValue = this.value;\n }\n }\n\n private getDisplayValue(): string {\n if (!this.selectedValue) return '';\n // US convention: MM/YYYY (01/2025)\n const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n return `${month}/${this.selectedValue.year}`;\n }\n\n private getButtonLabel(): string {\n return this.getDisplayValue() || this.placeholder;\n }\n\n private handleTriggerClick = () => {\n if (this.disabled) return;\n if (!this.isMenuOpen && this.showFooter) {\n this.tempSelection = this.selectedValue;\n }\n this.isMenuOpen = !this.isMenuOpen;\n };\n\n private handleInputFocus = () => {\n if (this.disabled) return;\n if (!this.isMenuOpen && this.showFooter) {\n this.tempSelection = this.selectedValue;\n }\n this.isMenuOpen = true;\n };\n\n private handleMonthYearSelect = (event: CustomEvent<MonthYear | null>) => {\n const monthYear = event.detail;\n if (!monthYear) return;\n if (this.showFooter) {\n this.tempSelection = monthYear;\n } else {\n this.selectedValue = monthYear;\n this.bhChange.emit(monthYear);\n this.bhMonthYearSelect.emit(monthYear);\n this.closeMenu();\n }\n };\n\n private handleMenuCancel = () => {\n this.tempSelection = null;\n this.closeMenu();\n };\n\n private handleMenuApply = () => {\n if (this.tempSelection) {\n this.selectedValue = this.tempSelection;\n this.bhChange.emit(this.tempSelection);\n this.bhMonthYearSelect.emit(this.tempSelection);\n this.tempSelection = null;\n }\n this.closeMenu();\n };\n\n private closeMenu() {\n this.isMenuClosing = true;\n setTimeout(() => {\n this.isMenuOpen = false;\n this.isMenuClosing = false;\n }, 150);\n }\n\n private handleBackdropClick = () => {\n this.handleMenuCancel();\n };\n\n render() {\n return (\n <Host>\n <div class=\"month-picker-container\">\n {/* Dropdown Outlined Variant */}\n {this.variant === 'dropdown-outlined' && (\n <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n <bh-button\n hierarchy=\"secondary\"\n \n size=\"sm\"\n icon=\"trailing\"\n label={this.getButtonLabel()}\n iconName=\"expand_more\"\n disabled={this.disabled}\n ></bh-button>\n </div>\n )}\n\n {/* Dropdown Ghost Variant */}\n {this.variant === 'dropdown-ghost' && (\n <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n <bh-button\n hierarchy=\"tertiary\"\n \n size=\"sm\"\n icon=\"trailing\"\n label={this.getButtonLabel()}\n iconName=\"expand_more\"\n disabled={this.disabled}\n ></bh-button>\n </div>\n )}\n\n {/* Input Variant */}\n {this.variant === 'input' && (\n <div class=\"month-picker-trigger input-field-container\">\n <bh-input-text\n label={this.label}\n placeholder={this.placeholder}\n value={this.getDisplayValue()}\n disabled={this.disabled}\n showTrailingIcon={true}\n trailingIcon=\"calendar_month\"\n showHelpIcon={false}\n showHintText={false}\n showLabel={this.showLabel}\n width={this.inputWidth}\n onBhFocus={this.handleInputFocus}\n ></bh-input-text>\n <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n </div>\n )}\n\n {/* Month Picker Menu */}\n <div class=\"month-picker-menu-container\">\n <bh-picker-menu\n visible={this.isMenuOpen}\n minYear={this.minYear}\n maxYear={this.maxYear}\n disabled={this.disabled}\n disabledMonths={this.disabledMonths}\n showFooter={this.showFooter}\n value={this.tempSelection || this.selectedValue || undefined}\n onBhChange={this.handleMonthYearSelect}\n onBhMonthYearSelect={this.handleMonthYearSelect}\n onBhCancel={this.handleMenuCancel}\n onBhApply={this.handleMenuApply}\n ></bh-picker-menu>\n </div>\n </div>\n\n {/* Backdrop */}\n {(this.isMenuOpen || this.isMenuClosing) && (\n <div class=\"month-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-notification.entry.esm.js","sources":["src/components/bh-notification/bh-notification.css?tag=bh-notification&encapsulation=shadow","src/components/bh-notification/bh-notification.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(\n --font-inter,\n 'Inter',\n -apple-system,\n BlinkMacSystemFont,\n sans-serif\n );\n}\n\n/* Base Notification */\n.notification {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: var(--color-white, #ffffff);\n border: 1px solid var(--color-neutral-200, #eaecf0);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);\n position: relative;\n}\n\n/* Content Area */\n.notification-content {\n display: flex;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n/* Icon Wrapper */\n.notification-icon-wrapper {\n flex-shrink: 0;\n}\n\n/* Text Content */\n.notification-text {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.notification-text-wrapper {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.notification-title {\n font-size: var(--text-sm-size, 14px);\n font-weight: 600;\n color: var(--color-neutral-900, #101828);\n margin: 0;\n line-height: 1.43;\n}\n\n.notification-description {\n font-size: var(--text-sm-size, 14px);\n font-weight: 400;\n color: var(--color-neutral-600, #475467);\n margin: 0;\n line-height: 1.43;\n}\n\n/* Actions */\n.notification-actions {\n display: flex;\n gap: 12px;\n}\n\n/* Close Button */\n.notification-close {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.2s ease-in-out;\n}\n\n.notification-close:hover {\n background: var(--color-neutral-100, #f2f4f7);\n}\n\n.close-icon {\n font-size: 16px;\n color: var(--color-neutral-400, #98a2b3);\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n font-family: 'Material Symbols Outlined';\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type NotificationType =\n | 'primary'\n | 'default'\n | 'success'\n | 'error'\n | 'warning'\n | 'feature';\n\n@Component({\n tag: 'bh-notification',\n styleUrl: 'bh-notification.css',\n shadow: true,\n})\nexport class BhNotification {\n /**\n * Type of notification (determines color and icon)\n */\n @Prop() type: NotificationType = 'default';\n\n /**\n * Notification title\n */\n @Prop() notificationTitle: string = '';\n\n /**\n * Notification description\n */\n @Prop() description: string = '';\n\n /**\n * Text for the action button\n */\n @Prop() actionText: string = '';\n\n /**\n * Text for the dismiss button\n */\n @Prop() dismissText: string = '';\n\n /**\n * Whether to show the close button\n */\n @Prop() dismissible: boolean = true;\n\n /**\n * Custom icon name (overrides type-based icon)\n */\n @Prop() icon: string = '';\n\n /**\n * Emitted when action button is clicked\n */\n @Event() bhAction!: EventEmitter<void>;\n\n /**\n * Emitted when dismiss button is clicked\n */\n @Event() bhDismiss!: EventEmitter<void>;\n\n /**\n * Emitted when close button is clicked\n */\n @Event() bhClose!: EventEmitter<void>;\n\n private getIconName(): string {\n if (this.icon) return this.icon;\n\n switch (this.type) {\n case 'primary':\n return 'new_releases';\n case 'success':\n return 'check_circle';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'feature':\n return 'rocket_launch';\n case 'default':\n return 'info';\n default:\n return 'info';\n }\n }\n\n private getIconColor(): 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight' {\n switch (this.type) {\n case 'primary':\n return 'brand';\n case 'success':\n return 'success';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'feature':\n return 'highlight';\n case 'default':\n default:\n return 'gray';\n }\n }\n\n private getIconStyle(): 'outlined' | 'filled' {\n switch (this.type) {\n case 'primary':\n return 'outlined';\n case 'success':\n return 'filled';\n case 'error':\n return 'filled';\n case 'warning':\n return 'filled';\n case 'feature':\n return 'outlined';\n case 'default':\n default:\n return 'outlined';\n }\n }\n\n private handleAction = (): void => {\n this.bhAction.emit();\n };\n\n private handleDismiss = (): void => {\n this.bhDismiss.emit();\n };\n\n private handleClose = (): void => {\n this.bhClose.emit();\n };\n\n render() {\n const notificationClasses = {\n notification: true,\n [`notification-${this.type}`]: true,\n };\n\n return (\n <div class={notificationClasses} role=\"alert\" part=\"container\">\n <div class=\"notification-content\">\n {/* Icon */}\n <div class=\"notification-icon-wrapper\">\n <bh-featured-icon\n icon={this.getIconName()}\n color={this.getIconColor()}\n size=\"sm\"\n iconStyle={this.getIconStyle()}\n />\n </div>\n\n {/* Text Content */}\n <div class=\"notification-text\">\n <div class=\"notification-text-wrapper\">\n {this.notificationTitle && (\n <h3 class=\"notification-title\">{this.notificationTitle}</h3>\n )}\n {this.description && (\n <p class=\"notification-description\">{this.description}</p>\n )}\n </div>\n\n {/* Actions */}\n {(this.actionText || this.dismissText) && (\n <div class=\"notification-actions\">\n {this.dismissText && (\n <bh-button\n hierarchy=\"quaternary\"\n size=\"sm\"\n label={this.dismissText}\n icon=\"none\"\n onBhClick={this.handleDismiss}\n />\n )}\n {this.actionText && (\n <bh-button\n hierarchy=\"quaternary\"\n size=\"sm\"\n label={this.actionText}\n icon=\"none\"\n onBhClick={this.handleAction}\n />\n )}\n </div>\n )}\n </div>\n </div>\n\n {/* Close Button */}\n {this.dismissible && (\n <button\n class=\"notification-close\"\n onClick={this.handleClose}\n aria-label=\"Close notification\"\n >\n <span class=\"material-symbols-outlined close-icon\">close</span>\n </button>\n )}\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-page-navigation-child.entry.esm.js","sources":["src/components/bh-page-navigation-child/bh-page-navigation-child.css?tag=bh-page-navigation-child&encapsulation=shadow","src/components/bh-page-navigation-child/bh-page-navigation-child.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n.page-navigation-child {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 36px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n margin: var(--spacing-none) var(--spacing-xs);\n background-color: transparent;\n border: 1px solid transparent;\n margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n background-color: var(--color-neutral-50);\n position: relative;\n z-index: 1;\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n content: '';\n position: absolute;\n left: -4.5px;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n height: 24px;\n background-color: var(--color-brand-600);\n z-index: 3;\n}\n\n.page-navigation-child-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n width: 100%;\n}\n\n.page-navigation-child-label {\n font-family: var(--font-inter);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-neutral-600);\n flex: 1;\n transition: all 0.15s ease;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n color: var(--color-brand-600);\n font-weight: 600;\n}\n\n.page-navigation-child-badge {\n margin-left: auto;\n font-family: var(--font-inter);\n font-size: 12px;\n font-weight: 500;\n color: var(--color-neutral-500);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'bh-page-navigation-child',\n styleUrl: 'bh-page-navigation-child.css',\n shadow: true,\n})\nexport class BhPageNavigationChild {\n /**\n * Label text for the navigation item\n */\n @Prop() label!: string;\n\n /**\n * Optional badge text/number to display\n */\n @Prop() badge?: string | number;\n\n /**\n * Whether to show the badge (when badge prop is provided)\n */\n @Prop() showBadge: boolean = true;\n\n /**\n * Whether the item is currently active/selected\n */\n @Prop() isActive: boolean = false;\n\n /**\n * Event emitted when the navigation item is clicked\n */\n @Event() bhItemClick!: EventEmitter<void>;\n\n private handleClick = () => {\n this.bhItemClick.emit();\n };\n\n private getItemClasses() {\n return {\n 'page-navigation-child': true,\n 'active': this.isActive,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.getItemClasses()} onClick={this.handleClick}>\n <div class=\"page-navigation-child-content\">\n <span class=\"page-navigation-child-label\">{this.label}</span>\n {this.badge !== undefined && this.showBadge && (\n <span class=\"page-navigation-child-badge\">{this.badge}</span>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,u2LAAu2L;;MCO33L,qBAAqB,GAAA,MAAA;;;;;AAChC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KACzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACG,CACF,CACD;;;;;;;"}
|
package/bellhop-core/bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.esm.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.esm.js","sources":["src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.css?tag=bh-page-navigation-multi-level&encapsulation=shadow","src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.tsx","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.css?tag=bh-page-navigation-single-level&encapsulation=shadow","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n.page-navigation-multi-level {\n margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n display: flex;\n align-items: center;\n padding: var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 40px;\n max-height: 44px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n margin-top: var(--spacing-xs);\n margin-bottom: var(--spacing-xs);\n position: relative;\n margin-left: var(--spacing-xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n max-height: 1000px;\n opacity: 1;\n transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n max-height: 0;\n opacity: 0;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n content: '';\n position: absolute;\n left: 0;\n top: -2px;\n height: calc(100% + 4px);\n width: 2px;\n background-color: var(--color-neutral-200);\n margin-left: var(--spacing-sm);\n z-index: 2;\n}\n\n/* Animation classes */\n.page-navigation-children.animate-slide-down-enter {\n animation: slideDownEnter 0.15s ease-out forwards;\n}\n\n.page-navigation-children.animate-slide-down-exit {\n animation: slideDownExit 0.15s ease-out forwards;\n}\n\n@keyframes slideDownEnter {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n}\n\n@keyframes slideDownExit {\n from {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n max-height: 0;\n transform: translateY(-10px);\n }\n}\n\n/* Item content and common elements */\n.page-navigation-item-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n flex-shrink: 0;\n color: var(--color-neutral-600);\n font-size: 20px;\n width: 20px;\n height: 20px;\n transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n transform-origin: top center;\n transition: all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease);\n}\n\n/* Chevron icon styling */\n.page-navigation-chevron-icon {\n flex-shrink: 0;\n color: var(--color-neutral-600);\n font-size: 20px;\n width: 20px;\n height: 20px;\n transition: color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label {\n font-family: var(--font-inter);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-neutral-600);\n flex: 1;\n transition: all 0.15s ease;\n}\n\n/* Label color and weight changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n color: var(--color-neutral-900);\n font-weight: 600;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\n\nexport interface ChildItem {\n label: string;\n badge?: string | number;\n showBadge?: boolean;\n isActive?: boolean;\n}\n\n@Component({\n tag: 'bh-page-navigation-multi-level',\n styleUrl: 'bh-page-navigation-multi-level.css',\n shadow: true,\n})\nexport class BhPageNavigationMultiLevel {\n /**\n * Label text for the navigation item\n */\n @Prop() label!: string;\n\n /**\n * Material icon name\n */\n @Prop() icon: string = 'radio_button_unchecked';\n\n /**\n * Optional badge text/number to display\n */\n @Prop() badge?: string | number;\n\n /**\n * Child navigation items\n */\n @Prop() childItems: ChildItem[] = [];\n\n /**\n * Whether the item is expanded to show children\n */\n @Prop({ mutable: true }) isExpanded: boolean = false;\n\n /**\n * Internal state for hover\n */\n @State() isHovered: boolean = false;\n\n /**\n * Internal state for animation\n */\n @State() isAnimating: boolean = false;\n\n /**\n * Animation class\n */\n @State() animationClass: string = '';\n\n /**\n * Event emitted when the parent item is clicked (to toggle expansion)\n */\n @Event() bhToggle!: EventEmitter<void>;\n\n /**\n * Event emitted when a child item is clicked\n */\n @Event() bhChildClick!: EventEmitter<number>;\n\n /**\n * Event emitted when add button is clicked\n */\n @Event() bhAddClick!: EventEmitter<void>;\n\n @Watch('isExpanded')\n handleExpandedChange(newValue: boolean) {\n if (newValue) {\n this.isAnimating = true;\n this.animationClass = 'animate-slide-down-enter';\n } else if (this.isAnimating) {\n this.animationClass = 'animate-slide-down-exit';\n setTimeout(() => {\n this.isAnimating = false;\n this.animationClass = '';\n }, 150);\n }\n }\n\n private get hasActiveChild(): boolean {\n return this.childItems.some(child => child.isActive);\n }\n\n private handleParentClick = () => {\n this.bhToggle.emit();\n };\n\n private handleChildClick = (index: number) => {\n this.bhChildClick.emit(index);\n };\n\n private handleAddClick = (e: MouseEvent) => {\n e.stopPropagation();\n this.bhAddClick.emit();\n };\n\n private getItemClasses() {\n return {\n 'page-navigation-multi-level': true,\n 'page-navigation-animate-smooth': true,\n 'has-active-child': this.hasActiveChild,\n 'expanded': this.isExpanded,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.getItemClasses()}>\n <div\n class=\"page-navigation-multi-level-parent\"\n onClick={this.handleParentClick}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n >\n <div class=\"page-navigation-item-content\">\n {!this.isHovered && (\n <span class=\"page-navigation-item-icon material-symbols-outlined\">\n {this.icon}\n </span>\n )}\n {this.isHovered && (\n <span\n class={{\n 'page-navigation-chevron-icon': true,\n 'material-symbols-outlined': true,\n 'expanded': this.isExpanded,\n }}\n >\n expand_more\n </span>\n )}\n <span class=\"page-navigation-item-label\">{this.label}</span>\n <bh-button\n hierarchy=\"tertiary\"\n icon=\"only\"\n size=\"xs\"\n iconName=\"add\"\n onClick={this.handleAddClick}\n ></bh-button>\n </div>\n </div>\n\n {(this.isExpanded || this.isAnimating) && (\n <div class={`page-navigation-children ${this.animationClass}`}>\n {this.childItems.map((child, index) => (\n <bh-page-navigation-child\n key={index}\n label={child.label}\n badge={child.badge}\n showBadge={child.showBadge}\n isActive={child.isActive}\n onBhItemClick={() => this.handleChildClick(index)}\n ></bh-page-navigation-child>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","/* ==========================================================================\n PAGE NAVIGATION COMPONENT - REACT IMPLEMENTATION\n Unified styles for page navigation matching Angular functionality\n ========================================================================== */\n\n/* Main Page Navigation Container */\n.page-navigation {\n width: 320px;\n min-width: 280px;\n background-color: var(--color-white);\n padding: var(--spacing-xl) var(--spacing-md);\n font-family: var(--font-inter);\n height: 100vh;\n overflow-y: auto;\n border-right: 1px solid var(--color-neutral-200);\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.page-navigation-header {\n margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n font-size: var(--text-xl-size);\n font-weight: var(--weight-semibold);\n line-height: var(--text-xl-line);\n color: var(--color-neutral-900);\n padding: var(--spacing-none) var(--spacing-xl);\n margin: 0;\n}\n\n.page-navigation-list {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n}\n\n/* ==========================================================================\n SINGLE LEVEL NAVIGATION ITEMS\n ========================================================================== */\n\n.page-navigation-single-level {\n display: flex;\n align-items: center;\n padding: var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 40px;\n max-height: 44px;\n box-sizing: border-box;\n border-radius: 6px;\n margin: var(--spacing-none) var(--spacing-xs);\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Active/Selected state for single level */\n.page-navigation-single-level.active {\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Hover state for single level */\n.page-navigation-single-level:hover {\n background-color: var(--color-neutral-50) !important;\n}\n\n/* ==========================================================================\n MULTI LEVEL NAVIGATION ITEMS\n ========================================================================== */\n\n.page-navigation-multi-level {\n margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n display: flex;\n align-items: center;\n padding: var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 40px;\n max-height: 44px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n background-color: transparent;\n border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n margin-top: var(--spacing-xs);\n margin-bottom: var(--spacing-xs);\n position: relative;\n margin-left: var(--spacing-xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n /*overflow: hidden;*/\n max-height: 1000px;\n opacity: 1;\n transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n max-height: 0;\n opacity: 0;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n content: '';\n position: absolute;\n left: 0;\n top: -2px;\n height: calc(100% + 4px);\n width: 2px;\n background-color: var(--color-neutral-200);\n margin-left: var(--spacing-sm);\n z-index: 2;\n}\n\n/* ==========================================================================\n CHILD NAVIGATION ITEMS\n ========================================================================== */\n\n.page-navigation-child {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 36px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n margin: var(--spacing-none) var(--spacing-xs);\n background-color: transparent;\n border: 1px solid transparent;\n margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n background-color: var(--color-neutral-50);\n position: relative;\n z-index: 1;\n}\n\n/* Hover overlay to cover the vertical line */\n.page-navigation-child:hover:not(.active)::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n width: 20px;\n background-color: var(--color-neutral-100);\n z-index: 1;\n border-radius: var(--radius-sm);\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n content: '';\n position: absolute;\n left: -4.5px;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n height: 24px;\n background-color: var(--color-brand-600);\n z-index: 3;\n}\n\n/* ==========================================================================\n ITEM CONTENT AND COMMON ELEMENTS\n ========================================================================== */\n\n.page-navigation-item-content,\n.page-navigation-child-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n flex-shrink: 0;\n color: var(--color-neutral-600);\n font-size: 20px;\n width: 20px;\n height: 20px;\n transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n transform-origin: top center;\n transition: all var(--animation-duration-normal) var(--animation-ease-enter);\n}\n\n/* Chevron icon styling - separate from main icons */\n.page-navigation-chevron-icon {\n flex-shrink: 0;\n color: var(--color-neutral-600);\n font-size: 20px;\n width: 20px;\n height: 20px;\n transition: color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-single-level.active .page-navigation-item-icon,\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label,\n.page-navigation-child-label {\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-neutral-600);\n flex: 1;\n transition: all 0.15s ease;\n}\n\n\n/* Label color and weight changes for active states */\n.page-navigation-single-level.active .page-navigation-item-label,\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n color: var(--color-neutral-900);\n font-weight: 600;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n color: var(--color-brand-600);\n font-weight: 600;\n}\n\n/* Badges */\n.page-navigation-item-badge,\n.page-navigation-child-badge {\n margin-left: auto;\n}\n\n/* ==========================================================================\n RESPONSIVE DESIGN\n ========================================================================== */\n\n@media (max-width: 768px) {\n .page-navigation {\n width: 280px;\n min-width: 280px;\n }\n}","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'bh-page-navigation-single-level',\n styleUrl: 'bh-page-navigation-single-level.css',\n shadow: true,\n})\nexport class BhPageNavigationSingleLevel {\n /**\n * Label text for the navigation item\n */\n @Prop() label!: string;\n\n /**\n * Material icon name\n */\n @Prop() icon: string = 'radio_button_unchecked';\n\n /**\n * Whether the item is currently active/selected\n */\n @Prop() isActive: boolean = false;\n\n /**\n * Event emitted when the navigation item is clicked\n */\n @Event() bhItemClick!: EventEmitter<void>;\n\n private handleClick = () => {\n this.bhItemClick.emit();\n };\n\n private getItemClasses() {\n return {\n 'page-navigation-single-level': true,\n 'page-navigation-animate-smooth': true,\n 'active': this.isActive,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.getItemClasses()} onClick={() => this.handleClick()}>\n <div class=\"page-navigation-item-content\">\n <span class=\"page-navigation-item-icon material-symbols-outlined\">\n {this.icon}\n </span>\n <span class=\"page-navigation-item-label\">{this.label}</span>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-page-navigation.entry.esm.js","sources":["src/components/bh-page-navigation/bh-page-navigation.css?tag=bh-page-navigation&encapsulation=shadow","src/components/bh-page-navigation/bh-page-navigation.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n/* Main Page Navigation Container */\n.page-navigation {\n width: 320px;\n min-width: 280px;\n background-color: var(--color-white);\n padding: var(--spacing-xl) var(--spacing-md);\n font-family: var(--font-inter);\n height: 100vh;\n overflow-y: auto;\n border-right: 1px solid var(--color-neutral-200);\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.page-navigation-header {\n margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n font-size: var(--text-xl-size);\n font-weight: var(--weight-semibold);\n line-height: var(--text-xl-line);\n color: var(--color-neutral-900);\n padding: var(--spacing-none) var(--spacing-xl);\n margin: 0;\n}\n\n.page-navigation-list {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .page-navigation {\n width: 280px;\n min-width: 280px;\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\n\nexport interface ChildItem {\n label: string;\n badge?: string | number;\n showBadge?: boolean;\n isActive?: boolean;\n}\n\nexport interface NavigationItem {\n id: string;\n label: string;\n icon?: string;\n type: 'single' | 'expandable';\n isActive?: boolean;\n isExpanded?: boolean;\n badge?: string | number;\n children?: ChildItem[];\n}\n\n@Component({\n tag: 'bh-page-navigation',\n styleUrl: 'bh-page-navigation.css',\n shadow: true,\n})\nexport class BhPageNavigation {\n /**\n * Title displayed at the top of the navigation\n */\n @Prop() navTitle: string = 'Navigation';\n\n /**\n * Array of navigation items\n */\n @Prop() navigationItems: NavigationItem[] = [];\n\n /**\n * Internal state to track navigation items\n */\n @State() items: NavigationItem[] = [];\n\n /**\n * Event emitted when a navigation item is clicked\n */\n @Event() bhItemClick!: EventEmitter<{ itemId: string; childIndex?: number }>;\n\n @Watch('navigationItems')\n handleNavigationItemsChange(newValue: NavigationItem[]) {\n this.items = [...newValue];\n }\n\n componentWillLoad() {\n this.items = [...this.navigationItems];\n }\n\n private clearAllSelections() {\n this.items = this.items.map(item => ({\n ...item,\n isActive: false,\n children: item.children?.map(child => ({ ...child, isActive: false })),\n }));\n }\n\n private handleSingleLevelClick = (itemId: string) => {\n this.clearAllSelections();\n this.items = this.items.map(item =>\n item.id === itemId ? { ...item, isActive: true } : item,\n );\n this.bhItemClick.emit({ itemId });\n };\n\n private handleMultiLevelToggle = (itemId: string) => {\n this.items = this.items.map(item =>\n item.id === itemId ? { ...item, isExpanded: !item.isExpanded } : item,\n );\n };\n\n private handleMultiLevelChildClick = (itemId: string, childIndex: number) => {\n this.clearAllSelections();\n this.items = this.items.map(item =>\n item.id === itemId && item.children\n ? {\n ...item,\n children: item.children.map((child, index) => ({\n ...child,\n isActive: index === childIndex,\n })),\n }\n : item,\n );\n this.bhItemClick.emit({ itemId, childIndex });\n };\n\n render() {\n return (\n <Host>\n <div class=\"page-navigation\">\n <div class=\"page-navigation-header\">\n <h2 class=\"page-navigation-title\">{this.navTitle}</h2>\n </div>\n\n <nav class=\"page-navigation-list\">\n {this.items.map(item =>\n item.type === 'single' ? (\n <bh-page-navigation-single-level\n key={item.id}\n label={item.label}\n icon={item.icon}\n isActive={item.isActive || false}\n onBhItemClick={() => this.handleSingleLevelClick(item.id)}\n ></bh-page-navigation-single-level>\n ) : (\n <bh-page-navigation-multi-level\n key={item.id}\n label={item.label}\n icon={item.icon}\n childItems={item.children || []}\n isExpanded={item.isExpanded || false}\n onBhToggle={() => this.handleMultiLevelToggle(item.id)}\n onBhChildClick={(e: CustomEvent<number>) =>\n this.handleMultiLevelChildClick(item.id, e.detail)\n }\n ></bh-page-navigation-multi-level>\n ),\n )}\n </nav>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-pie-chart.entry.esm.js","sources":["src/components/bh-pie-chart/bh-pie-chart.css?tag=bh-pie-chart&encapsulation=shadow","src/components/bh-pie-chart/bh-pie-chart.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: inline-block;\n}\n\n.pie-chart-container {\n display: inline-block;\n width: 160px;\n height: 160px;\n overflow: visible;\n}\n\n.pie-chart-svg {\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n.pie-segment {\n cursor: pointer;\n transition: opacity var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n transform-origin: 80px 80px;\n}\n\n.pie-segment.animated {\n opacity: 0;\n transform: scale(0.3) rotate(-180deg);\n animation: pieSliceReveal 0.8s var(--animation-ease-enter, ease-out) forwards;\n}\n\n.pie-segment:hover {\n opacity: 0.85;\n transform: scale(1.05);\n filter: brightness(1.1);\n transition: all var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n}\n\n.pie-background {\n pointer-events: none;\n}\n\n.pie-inner-hole {\n pointer-events: none;\n}\n\n.pie-segment-group {\n pointer-events: auto;\n}\n\n@keyframes pieSliceReveal {\n 0% {\n opacity: 0;\n transform: scale(0.3) rotate(-180deg);\n }\n 15% {\n opacity: 0.2;\n transform: scale(0.45) rotate(-135deg);\n }\n 30% {\n opacity: 0.5;\n transform: scale(0.7) rotate(-70deg);\n }\n 45% {\n opacity: 0.7;\n transform: scale(0.9) rotate(-25deg);\n }\n 60% {\n opacity: 0.85;\n transform: scale(1.05) rotate(-8deg);\n }\n 80% {\n opacity: 0.95;\n transform: scale(1.01) rotate(-1deg);\n }\n 100% {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .pie-segment.animated {\n animation: none;\n opacity: 1;\n transform: none;\n }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\n\nexport interface PieChartSeriesItem {\n name: string;\n value: number;\n color?: string;\n}\n\nexport interface PieChartData {\n series: PieChartSeriesItem[];\n}\n\nexport interface PieSegment {\n value: number;\n percentage: number;\n startAngle: number;\n endAngle: number;\n color: string;\n name: string;\n path: string;\n}\n\nexport type PieChartHole = 'none' | '25%' | '50%' | '75%' | '85%';\n\nconst DEFAULT_COLORS = [\n '#2642CF', // Blue\n '#8E4B9B', // Purple\n '#BB81BA', // Light Purple\n '#E14C94', // Pink\n '#E47789', // Coral\n '#E9AAAE', // Light Coral\n '#BACEFC', // Light Blue\n];\n\n@Component({\n tag: 'bh-pie-chart',\n styleUrl: 'bh-pie-chart.css',\n shadow: true,\n})\nexport class BhPieChart {\n /**\n * Chart data containing series\n */\n @Prop() data: PieChartData = {\n series: [\n { name: 'Series 1', value: 30, color: '#2642CF' },\n { name: 'Series 2', value: 25, color: '#8E4B9B' },\n { name: 'Series 3', value: 20, color: '#BB81BA' },\n { name: 'Series 4', value: 15, color: '#E14C94' },\n { name: 'Series 5', value: 10, color: '#E47789' },\n ],\n };\n\n /**\n * Size of the donut hole\n */\n @Prop() hole: PieChartHole = 'none';\n\n /**\n * Size of the chart in pixels\n */\n @Prop() size: number = 160;\n\n /**\n * Whether to animate the chart\n */\n @Prop() animated: boolean = true;\n\n /**\n * Gap between segments in degrees\n */\n @Prop() gap: number = 0;\n\n @State() tooltipVisible: boolean = false;\n @State() tooltipX: number = 0;\n @State() tooltipY: number = 0;\n @State() tooltipSegment: PieSegment | null = null;\n\n private getInnerRadius(): number {\n switch (this.hole) {\n case '25%':\n return 20;\n case '50%':\n return 40;\n case '75%':\n return 60;\n case '85%':\n return 68;\n default:\n return 0;\n }\n }\n\n private createArcPath(\n centerX: number,\n centerY: number,\n outerRadius: number,\n innerRadius: number,\n startAngle: number,\n endAngle: number\n ): string {\n const startAngleRad = (startAngle * Math.PI) / 180;\n const endAngleRad = (endAngle * Math.PI) / 180;\n\n const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);\n const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);\n const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);\n const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);\n\n const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;\n\n if (innerRadius === 0) {\n return [\n 'M', centerX, centerY,\n 'L', outerStartX, outerStartY,\n 'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,\n 'Z',\n ].join(' ');\n } else {\n const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);\n const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);\n const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);\n const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);\n\n return [\n 'M', outerStartX, outerStartY,\n 'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,\n 'L', innerEndX, innerEndY,\n 'A', innerRadius, innerRadius, 0, largeArcFlag, 0, innerStartX, innerStartY,\n 'Z',\n ].join(' ');\n }\n }\n\n private getSegments(): PieSegment[] {\n if (!this.data.series?.length) {\n return [];\n }\n\n const total = this.data.series.reduce((sum, item) => sum + item.value, 0);\n if (total === 0) {\n return [];\n }\n\n const segments: PieSegment[] = [];\n let currentAngle = -90;\n const radius = 80;\n const centerX = 80;\n const centerY = 80;\n const innerRadius = this.getInnerRadius();\n\n const totalGaps = this.data.series.length * this.gap;\n const availableAngle = 360 - totalGaps;\n\n this.data.series.forEach((item, index) => {\n const percentage = (item.value / total) * 100;\n const angleSize = (item.value / total) * availableAngle;\n const startAngle = currentAngle;\n const endAngle = currentAngle + angleSize;\n\n const path = this.createArcPath(centerX, centerY, radius, innerRadius, startAngle, endAngle);\n\n segments.push({\n value: item.value,\n percentage,\n startAngle,\n endAngle,\n color: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],\n name: item.name,\n path,\n });\n\n currentAngle = endAngle + this.gap;\n });\n\n return segments;\n }\n\n private handleSegmentHover = (event: MouseEvent, segment: PieSegment) => {\n this.tooltipVisible = true;\n this.tooltipX = event.clientX;\n this.tooltipY = event.clientY;\n this.tooltipSegment = segment;\n };\n\n private handleSegmentLeave = () => {\n this.tooltipVisible = false;\n };\n\n render() {\n const segments = this.getSegments();\n const innerRadius = this.getInnerRadius();\n\n return (\n <Host>\n <div class=\"pie-chart-container\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n <svg\n width={this.size}\n height={this.size}\n viewBox=\"0 0 160 160\"\n class=\"pie-chart-svg\"\n >\n {/* Background circle */}\n <circle cx=\"80\" cy=\"80\" r=\"80\" fill=\"transparent\" class=\"pie-background\" />\n\n {/* Pie segments */}\n {segments.map((segment, index) => (\n <g key={index} class=\"pie-segment-group\">\n <path\n d={segment.path}\n fill={segment.color}\n class={{ 'pie-segment': true, animated: this.animated }}\n style={{ animationDelay: this.animated ? `${index * 0.03}s` : '0s' }}\n onMouseEnter={(e) => this.handleSegmentHover(e, segment)}\n onMouseLeave={this.handleSegmentLeave}\n />\n </g>\n ))}\n\n {/* Inner hole for donut charts */}\n {this.hole !== 'none' && (\n <circle cx=\"80\" cy=\"80\" r={innerRadius} fill=\"white\" class=\"pie-inner-hole\" />\n )}\n </svg>\n </div>\n\n {/* Tooltip */}\n <bh-chart-tooltip\n visible={this.tooltipVisible}\n x={this.tooltipX}\n y={this.tooltipY}\n items={\n this.tooltipSegment\n ? [\n {\n label: this.tooltipSegment.name,\n value: `${this.tooltipSegment.percentage.toFixed(0)}%`,\n color: this.tooltipSegment.color,\n },\n ]\n : []\n }\n />\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-popover.entry.esm.js","sources":["src/components/bh-popover/bh-popover.css?tag=bh-popover&encapsulation=shadow","src/components/bh-popover/bh-popover.tsx"],"sourcesContent":["/* Popover Container */\n.popover {\n position: relative;\n border-radius: var(--radius-md);\n width: 320px;\n}\n\n.popover-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.popover-menu {\n background-color: #ffffff;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n overflow: hidden;\n position: relative;\n border-radius: var(--radius-md);\n flex-shrink: 0;\n width: 100%;\n max-height: 400px;\n border: 1px solid #dcdfea;\n box-shadow: var(--shadow-popover);\n}\n\n/* Header */\n.popover-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: var(--spacing-lg) var(--spacing-xl);\n position: relative;\n flex-shrink: 0;\n width: 100%;\n border-bottom: 1px solid #dcdfea;\n}\n\n.avatar-group {\n display: flex;\n gap: var(--spacing-lg);\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.avatar {\n background-color: #ffffff;\n position: relative;\n border-radius: var(--radius-full);\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border: 0.75px solid rgba(0, 0, 0, 0.08);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.brand-info {\n flex-basis: 0;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: flex-start;\n justify-content: flex-start;\n line-height: 0;\n min-height: 1px;\n min-width: 1px;\n position: relative;\n flex-shrink: 0;\n}\n\n.brand-name {\n font-family: var(--font-inter);\n font-weight: 600;\n position: relative;\n flex-shrink: 0;\n color: #404968;\n font-size: 14px;\n line-height: 20px;\n width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.portfolio-link {\n font-family: var(--font-inter);\n font-weight: 400;\n position: relative;\n flex-shrink: 0;\n color: #2642cf;\n font-size: 14px;\n line-height: 20px;\n width: 100%;\n text-decoration: underline;\n text-decoration-skip-ink: none;\n text-underline-position: from-font;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n padding: 0;\n}\n\n.portfolio-link:hover {\n color: #1a2bb8;\n}\n\n/* Search Container */\n.search-container {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: center;\n justify-content: center;\n overflow: visible;\n padding: 0;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.search-input {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n padding: var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);\n align-items: flex-start;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.search-content {\n background-color: #ffffff;\n box-sizing: border-box;\n display: flex;\n gap: var(--spacing-md);\n height: var(--spacing-4xl);\n align-items: center;\n justify-content: flex-start;\n overflow: hidden;\n padding: var(--spacing-none);\n position: relative;\n border-radius: var(--radius-md);\n flex-shrink: 0;\n width: 100%;\n border: none;\n}\n\n.search-icon {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: #5d6b98;\n}\n\n.search-field {\n flex-basis: 0;\n font-family: var(--font-inter);\n font-weight: 500;\n flex-grow: 1;\n line-height: 0;\n min-height: 1px;\n min-width: 1px;\n overflow: hidden;\n text-overflow: ellipsis;\n position: relative;\n flex-shrink: 0;\n color: #404968;\n font-size: 14px;\n line-height: 20px;\n white-space: nowrap;\n border: none;\n outline: none;\n background: none;\n}\n\n.search-field::placeholder {\n color: #5d6b98;\n}\n\n/* Menu Items */\n.menu-items {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n overflow-y: auto;\n padding: var(--spacing-xs) var(--spacing-none);\n position: relative;\n flex-grow: 1;\n width: 100%;\n max-height: calc(400px - 180px);\n}\n\n.menu-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: var(--spacing-lg) var(--spacing-xl);\n position: relative;\n flex-shrink: 0;\n width: 100%;\n border-top: 1px solid #dcdfea;\n border-bottom: 1px solid #dcdfea;\n font-family: var(--font-inter);\n font-weight: 600;\n line-height: 0;\n color: #404968;\n font-size: 14px;\n line-height: 20px;\n}\n\n.menu-item-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--spacing-xxs) var(--spacing-sm);\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.menu-item {\n flex-basis: 0;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: flex-start;\n min-height: 1px;\n min-width: 1px;\n overflow: hidden;\n padding: var(--spacing-md) var(--spacing-lg);\n position: relative;\n border-radius: var(--radius-sm);\n flex-shrink: 0;\n font-family: var(--font-inter);\n font-weight: 500;\n line-height: 0;\n color: #404968;\n font-size: 14px;\n line-height: 20px;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n width: 100%;\n transition: all 0.2s ease;\n}\n\n.menu-item:hover {\n background-color: #f9f9fb;\n color: #30374f;\n}\n\n.menu-item.selected {\n background-color: #f9f9fb;\n color: #30374f;\n}\n\n/* Property Type Styling */\n.menu-item-portfolio {\n font-weight: 600;\n color: #2642cf;\n}\n\n.menu-item-portfolio:hover {\n color: #1a2bb8;\n}\n\n.menu-item-region {\n font-weight: 500;\n padding-left: 26px;\n color: #404968;\n font-size: 13px;\n}\n\n.menu-item-property {\n color: #5d6b98;\n font-size: 13px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface PopoverItem {\n id: string;\n label: string;\n type?: 'portfolio' | 'region' | 'property' | 'header';\n selected?: boolean;\n}\n\n@Component({\n tag: 'bh-popover',\n styleUrl: 'bh-popover.css',\n shadow: true,\n})\nexport class BhPopover {\n /**\n * Title displayed in the header\n */\n @Prop() popoverTitle: string = 'Brand Name';\n\n /**\n * Text for the portfolio link\n */\n @Prop() viewPortfolioText: string = 'view portfolio';\n\n /**\n * Placeholder text for search input\n */\n @Prop() searchPlaceholder: string = 'Search by name or region';\n\n /**\n * Width of the popover\n */\n @Prop() width: string = '240px';\n\n /**\n * Whether to show search input\n */\n @Prop() showSearch: boolean = true;\n\n /**\n * Whether to show avatar section\n */\n @Prop() showAvatar: boolean = true;\n\n /**\n * Avatar image source URL\n */\n @Prop() avatarSrc?: string;\n\n /**\n * Menu items array (JSON string or array)\n */\n @Prop() items: PopoverItem[] | string = [];\n\n @State() searchTerm: string = '';\n\n /**\n * Event emitted when a menu item is selected\n */\n @Event() bhItemSelect!: EventEmitter<PopoverItem>;\n\n /**\n * Event emitted when portfolio link is clicked\n */\n @Event() bhPortfolioClick!: EventEmitter<void>;\n\n /**\n * Event emitted when search input changes\n */\n @Event() bhSearchChange!: EventEmitter<string>;\n\n private get parsedItems(): PopoverItem[] {\n if (typeof this.items === 'string') {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n return this.items || [];\n }\n\n private handleItemClick = (item: PopoverItem) => {\n if (item.type !== 'header') {\n this.bhItemSelect.emit(item);\n }\n };\n\n private handlePortfolioClick = () => {\n this.bhPortfolioClick.emit();\n };\n\n private handleSearchInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.searchTerm = target.value;\n this.bhSearchChange.emit(this.searchTerm);\n };\n\n private getItemClasses(item: PopoverItem): Record<string, boolean> {\n return {\n 'menu-item': true,\n 'selected': !!item.selected,\n 'menu-item-portfolio': item.type === 'portfolio',\n 'menu-item-region': item.type === 'region',\n 'menu-item-property': item.type === 'property',\n };\n }\n\n render() {\n const items = this.parsedItems;\n\n return (\n <Host>\n <div class=\"popover\" style={{ width: this.width }}>\n <div class=\"popover-content\">\n <div class=\"popover-menu\">\n {/* Header with Brand/Avatar */}\n {this.showAvatar && (\n <div class=\"popover-header\">\n <div class=\"avatar-group\">\n <div class=\"avatar\">\n {this.avatarSrc ? (\n <img src={this.avatarSrc} alt={this.popoverTitle} class=\"avatar-image\" />\n ) : (\n <slot name=\"avatar\" />\n )}\n </div>\n <div class=\"brand-info\">\n <div class=\"brand-name\">{this.popoverTitle}</div>\n {this.viewPortfolioText && (\n <button\n class=\"portfolio-link\"\n onClick={this.handlePortfolioClick}\n type=\"button\"\n >\n {this.viewPortfolioText}\n </button>\n )}\n </div>\n </div>\n </div>\n )}\n\n {/* Search Input */}\n {this.showSearch && (\n <div class=\"search-container\">\n <div class=\"search-input\">\n <div class=\"search-content\">\n <span class=\"material-symbols-outlined search-icon\">search</span>\n <input\n type=\"text\"\n placeholder={this.searchPlaceholder}\n value={this.searchTerm}\n onInput={this.handleSearchInput}\n class=\"search-field\"\n />\n </div>\n </div>\n </div>\n )}\n\n {/* Menu Items */}\n <div class=\"menu-items\">\n {items.map((item) => (\n <div key={item.id}>\n {/* Header Item */}\n {item.type === 'header' && (\n <div class=\"menu-header\">{item.label}</div>\n )}\n\n {/* Regular Item */}\n {item.type !== 'header' && (\n <div class=\"menu-item-container\">\n <button\n class={this.getItemClasses(item)}\n onClick={() => this.handleItemClick(item)}\n type=\"button\"\n >\n {item.label}\n </button>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-product-switcher.entry.esm.js","sources":["src/components/bh-product-switcher/bh-product-switcher.css?tag=bh-product-switcher&encapsulation=shadow","src/components/bh-product-switcher/bh-product-switcher.tsx"],"sourcesContent":["/* Container wrapper */\n.product-switcher-container {\n position: fixed;\n z-index: 10000;\n animation: popoverSlideIn 0.3s ease-out;\n transform-origin: top center;\n}\n\n/* Backdrop */\n.product-switcher-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: transparent;\n z-index: 9999;\n}\n\n/* Product Switcher Popover */\n.product-switcher-popover {\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid var(--color-neutral-100);\n border-radius: var(--radius-lg);\n -webkit-backdrop-filter: blur(8px);\n backdrop-filter: blur(3px);\n box-shadow: 0px 24px 48px -12px rgba(64, 73, 104, 0.1);\n padding: var(--spacing-lg);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-md);\n min-width: 250px;\n position: relative;\n z-index: 10001;\n}\n\n@keyframes popoverSlideIn {\n 0% {\n opacity: 0;\n transform: translateY(-12px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.product-switcher-container.closing {\n animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-12px);\n }\n}\n\n/* Product Item */\n.product-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-lg);\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n\n.product-item:hover {\n background-color: var(--color-neutral-100);\n}\n\n.product-item.current {\n background-color: var(--color-brand-50);\n}\n\n/* Product Icon Container */\n.product-icon-container {\n width: 36px;\n height: 36px;\n background: var(--color-white);\n border: 1px solid var(--color-neutral-100);\n border-radius: var(--radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: var(--spacing-xs);\n}\n\n.product-icon {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n filter: invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%);\n}\n\n.product-icon svg path {\n fill: var(--color-brand-600);\n}\n\n/* Product Info */\n.product-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n.product-name {\n font-weight: var(--weight-semibold);\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n color: var(--color-neutral-900);\n}\n\n.product-description {\n font-weight: var(--weight-regular);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-600);\n}","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface BhProduct {\n id: string;\n name: string;\n description: string;\n logo: string;\n current?: boolean;\n}\n\nexport interface AnchorPosition {\n top: number;\n left: number;\n}\n\n@Component({\n tag: 'bh-product-switcher',\n styleUrl: 'bh-product-switcher.css',\n shadow: true,\n})\nexport class BhProductSwitcher {\n /**\n * Whether the product switcher is open\n */\n @Prop() isOpen: boolean = false;\n\n /**\n * Position to anchor the popover\n */\n @Prop() anchorPosition: AnchorPosition = { top: 0, left: 0 };\n\n /**\n * Array of products to display\n */\n @Prop() products: BhProduct[] = [\n {\n id: 'alice',\n name: 'Alice',\n description: 'Housekeeping & Guest Services',\n logo: './assets/logos/AL.svg',\n },\n {\n id: 'hotel-effectiveness',\n name: 'Hotel Effectiveness',\n description: 'Labor planning',\n logo: './assets/logos/HE.svg',\n },\n {\n id: 'profit-sword',\n name: 'ProfitSword',\n description: 'B.I and Finance',\n logo: './assets/logos/PS.svg',\n },\n {\n id: 'transcendent',\n name: 'Transcendent',\n description: 'Asset Management & CapEx',\n logo: './assets/logos/TR.svg',\n },\n ];\n\n /**\n * Event emitted when the switcher should close\n */\n @Event() bhClose!: EventEmitter<void>;\n\n /**\n * Event emitted when a product is selected\n */\n @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n @State() isClosing: boolean = false;\n\n private containerRef?: HTMLDivElement;\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n if (\n this.isOpen &&\n this.containerRef &&\n !this.containerRef.contains(target) &&\n !target.closest('.logo-active')\n ) {\n this.handleClose();\n }\n }\n\n private handleClose = () => {\n this.isClosing = true;\n setTimeout(() => {\n this.bhClose.emit();\n this.isClosing = false;\n }, 200);\n };\n\n private handleProductClick = (product: BhProduct) => {\n this.bhProductSelect.emit(product);\n this.handleClose();\n };\n\n render() {\n if (!this.isOpen) return null;\n\n const containerClasses = {\n 'product-switcher-container': true,\n 'closing': this.isClosing,\n };\n\n return (\n <Host>\n {/* Backdrop */}\n <div class=\"product-switcher-backdrop\" onClick={this.handleClose}></div>\n\n {/* Product Switcher Container */}\n <div\n ref={(el) => this.containerRef = el}\n class={containerClasses}\n style={{\n top: `${this.anchorPosition.top}px`,\n left: `${this.anchorPosition.left}px`,\n }}\n >\n <div class=\"product-switcher-popover\">\n {this.products.map((product) => {\n const itemClasses = {\n 'product-item': true,\n 'current': product.current || false,\n };\n\n return (\n <div\n key={product.id}\n class={itemClasses}\n onClick={() => this.handleProductClick(product)}\n >\n <div class=\"product-icon-container\">\n <img\n src={product.logo}\n alt={`${product.name} logo`}\n class=\"product-icon\"\n />\n </div>\n\n <div class=\"product-info\">\n <div class=\"product-name\">{product.name}</div>\n <div class=\"product-description\">{product.description}</div>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-property-switcher.entry.esm.js","sources":["src/components/bh-property-switcher/bh-property-switcher.css?tag=bh-property-switcher&encapsulation=shadow","src/components/bh-property-switcher/bh-property-switcher.tsx"],"sourcesContent":[".property-switcher {\n position: relative;\n display: inline-block;\n width: 220px;\n}\n\n.property-selector {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--spacing-xs);\n padding: var(--spacing-xs) var(--spacing-sm);\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: var(--radius-sm);\n transition: background-color 0.2s ease;\n width: 100%;\n height: 36px;\n min-width: 0;\n}\n\n.property-selector:hover {\n background-color: var(--color-neutral-100);\n}\n\n.selector-icon {\n font-size: 18px;\n color: var(--color-neutral-500);\n flex-shrink: 0;\n}\n\n.property-name {\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-700);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n flex-grow: 1;\n min-width: 0;\n text-align: left;\n}\n\n.expand-icon {\n font-size: 18px;\n flex-shrink: 0;\n color: var(--color-neutral-400);\n transition: color 0.2s ease;\n}\n\n/* Dropdown Panel */\n.dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n margin-top: var(--spacing-xs);\n background-color: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-lg);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);\n min-width: 280px;\n max-width: 360px;\n animation: dropdownSlideIn 0.15s ease-out;\n overflow: hidden;\n}\n\n@keyframes dropdownSlideIn {\n 0% {\n opacity: 0;\n transform: translateY(-8px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Search Container */\n.search-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-sm);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.search-icon {\n font-size: 20px;\n color: var(--color-neutral-500);\n flex-shrink: 0;\n}\n\n.search-input {\n flex: 1;\n border: none;\n outline: none;\n font-family: var(--font-inter);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-900);\n background: transparent;\n min-width: 0;\n}\n\n.search-input::placeholder {\n color: var(--color-neutral-400);\n}\n\n.clear-search {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: var(--radius-sm);\n color: var(--color-neutral-400);\n transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.clear-search:hover {\n color: var(--color-neutral-600);\n background-color: var(--color-neutral-200);\n}\n\n.clear-search .material-symbols-outlined {\n font-size: 18px;\n}\n\n/* Dropdown Content */\n.dropdown-content {\n max-height: 360px;\n overflow-y: auto;\n}\n\n/* Flat List Container */\n.flat-list-container {\n padding: var(--spacing-xs) 0;\n}\n\n/* Groups Container */\n.groups-container {\n padding: var(--spacing-xs) 0;\n}\n\n/* Property Group */\n.property-group {\n border-bottom: 1px solid var(--color-neutral-100);\n}\n\n.property-group:last-child {\n border-bottom: none;\n}\n\n/* Group Header */\n.group-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-md);\n border: none;\n background: var(--color-neutral-50);\n cursor: pointer;\n font-family: var(--font-inter);\n font-size: var(--text-xs-size);\n font-weight: var(--weight-semibold);\n color: var(--color-neutral-600);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: background-color 0.15s ease;\n}\n\n.group-header:hover {\n background-color: var(--color-neutral-200);\n}\n\n.group-expand-icon {\n font-size: 18px;\n color: var(--color-neutral-500);\n transition: transform 0.15s ease;\n}\n\n.group-name {\n flex: 1;\n text-align: left;\n}\n\n.group-count {\n font-size: 11px;\n font-weight: var(--weight-semibold);\n color: var(--color-neutral-500);\n background-color: var(--color-neutral-200);\n padding: 2px 8px;\n border-radius: var(--radius-full);\n min-width: 20px;\n text-align: center;\n}\n\n/* Group Properties */\n.group-properties {\n padding: var(--spacing-xs) 0;\n}\n\n/* Property Item */\n.property-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-md);\n padding-left: calc(var(--spacing-md) + 26px);\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: var(--font-inter);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-700);\n text-align: left;\n transition: background-color 0.15s ease;\n}\n\n.flat-list-container .property-item {\n padding-left: var(--spacing-md);\n}\n\n.property-item:hover {\n background-color: var(--color-neutral-100);\n}\n\n.property-item.selected {\n background-color: var(--color-brand-50);\n color: var(--color-brand-700);\n}\n\n.property-item.selected .property-icon {\n color: var(--color-brand-600);\n}\n\n.property-icon {\n font-size: 20px;\n color: var(--color-neutral-400);\n flex-shrink: 0;\n}\n\n.property-item-name {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: var(--weight-regular);\n}\n\n.property-item.selected .property-item-name {\n font-weight: var(--weight-medium);\n}\n\n.check-icon {\n font-size: 18px;\n color: var(--color-brand-600);\n flex-shrink: 0;\n}\n\n/* Menu Divider */\n.menu-divider {\n height: 1px;\n background-color: var(--color-neutral-150);\n margin: var(--spacing-xs) var(--spacing-md);\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-2xl) var(--spacing-lg);\n gap: var(--spacing-sm);\n}\n\n.empty-icon {\n font-size: 40px;\n color: var(--color-neutral-300);\n}\n\n.empty-text {\n font-family: var(--font-inter);\n font-size: var(--text-sm-size);\n color: var(--color-neutral-500);\n}\n\n/* Legacy dropdown menu container (for backwards compatibility) */\n.dropdown-menu-container {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n margin-top: var(--spacing-xs);\n max-height: 320px;\n}\n\n/* Legacy popover animations */\n.popover-container {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n margin-top: var(--spacing-xs);\n animation: popoverSlideIn 0.3s ease-out;\n transform-origin: top center;\n}\n\n@keyframes popoverSlideIn {\n 0% {\n opacity: 0;\n transform: translateY(calc(-1 * var(--spacing-lg)));\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.popover-container.closing {\n animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(calc(-1 * var(--spacing-lg)));\n }\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface PropertyOption {\n id: string;\n name: string;\n type: 'portfolio' | 'region' | 'property';\n group?: string;\n}\n\nexport interface PropertyGroup {\n id: string;\n name: string;\n properties: PropertyOption[];\n}\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n divider?: boolean;\n}\n\n@Component({\n tag: 'bh-property-switcher',\n styleUrl: 'bh-property-switcher.css',\n shadow: true,\n})\nexport class BhPropertySwitcher {\n /**\n * Selected property name to display (initial value)\n */\n @Prop() selectedProperty: string = 'Select a property';\n\n /**\n * Array of property options\n */\n @Prop() properties: PropertyOption[] = [];\n\n /**\n * Whether to group properties by their group field\n */\n @Prop() grouped: boolean = false;\n\n /**\n * Placeholder text for search input\n */\n @Prop() searchPlaceholder: string = 'Search properties...';\n\n /**\n * Event emitted when a property is selected\n */\n @Event() bhPropertyChange!: EventEmitter<PropertyOption>;\n\n @State() isExpanded: boolean = false;\n @State() searchQuery: string = '';\n @State() expandedGroups: Set<string> = new Set();\n @State() internalSelectedProperty: string = '';\n\n private switcherRef?: HTMLDivElement;\n private searchInputRef?: HTMLInputElement;\n\n componentWillLoad() {\n this.internalSelectedProperty = this.selectedProperty;\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.isExpanded) {\n return;\n }\n\n // Check if click is on this component or inside it using composedPath for Shadow DOM\n const clickedInside = event.composedPath().includes(this.switcherRef as any);\n\n if (!clickedInside) {\n this.isExpanded = false;\n }\n }\n\n private handleToggle = () => {\n this.isExpanded = !this.isExpanded;\n if (this.isExpanded) {\n this.searchQuery = '';\n // Initialize all groups as expanded when opening\n if (this.grouped) {\n const groups = this.getPropertyGroups();\n this.expandedGroups = new Set(groups.map(g => g.id));\n }\n // Focus search input when opening\n setTimeout(() => {\n if (this.searchInputRef) {\n this.searchInputRef.focus();\n }\n }, 50);\n }\n }\n\n private handleSearchInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n }\n\n private handleGroupToggle = (groupId: string) => {\n const newSet = new Set(this.expandedGroups);\n if (newSet.has(groupId)) {\n newSet.delete(groupId);\n } else {\n newSet.add(groupId);\n }\n this.expandedGroups = newSet;\n }\n\n private handlePropertySelect = (property: PropertyOption) => {\n this.internalSelectedProperty = property.name;\n this.bhPropertyChange.emit(property);\n this.isExpanded = false;\n this.searchQuery = '';\n }\n\n private getPropertyGroups = (): PropertyGroup[] => {\n const groupMap = new Map<string, PropertyOption[]>();\n const ungrouped: PropertyOption[] = [];\n\n this.properties.forEach((property) => {\n if (property.group) {\n const existing = groupMap.get(property.group) || [];\n existing.push(property);\n groupMap.set(property.group, existing);\n } else {\n ungrouped.push(property);\n }\n });\n\n const groups: PropertyGroup[] = [];\n\n groupMap.forEach((properties, name) => {\n groups.push({\n id: name.toLowerCase().replace(/\\s+/g, '-'),\n name,\n properties,\n });\n });\n\n // Add ungrouped properties as a special group if any exist\n if (ungrouped.length > 0) {\n groups.push({\n id: 'ungrouped',\n name: 'Other',\n properties: ungrouped,\n });\n }\n\n return groups;\n }\n\n private filterProperties = (properties: PropertyOption[]): PropertyOption[] => {\n if (!this.searchQuery.trim()) {\n return properties;\n }\n const query = this.searchQuery.toLowerCase();\n return properties.filter((p) =>\n p.name.toLowerCase().includes(query)\n );\n }\n\n private filterGroups = (groups: PropertyGroup[]): PropertyGroup[] => {\n if (!this.searchQuery.trim()) {\n return groups;\n }\n const query = this.searchQuery.toLowerCase();\n\n return groups\n .map((group) => {\n // Check if group name matches\n const groupMatches = group.name.toLowerCase().includes(query);\n // Filter properties within the group\n const filteredProperties = group.properties.filter((p) =>\n p.name.toLowerCase().includes(query)\n );\n\n // Include group if group name matches (show all properties) or if any properties match\n if (groupMatches) {\n return { ...group }; // Return group with all properties\n } else if (filteredProperties.length > 0) {\n return { ...group, properties: filteredProperties };\n }\n return null;\n })\n .filter((g): g is PropertyGroup => g !== null);\n }\n\n private getPropertyIcon = (type: PropertyOption['type']): string => {\n switch (type) {\n case 'portfolio':\n return 'business';\n case 'region':\n return 'public';\n case 'property':\n default:\n return 'location_on';\n }\n }\n\n private renderSearchInput() {\n return (\n <div class=\"search-container\">\n <span class=\"material-symbols-outlined search-icon\">search</span>\n <input\n ref={(el) => (this.searchInputRef = el)}\n type=\"text\"\n class=\"search-input\"\n placeholder={this.searchPlaceholder}\n value={this.searchQuery}\n onInput={this.handleSearchInput}\n onClick={(e) => e.stopPropagation()}\n />\n {this.searchQuery && (\n <button\n class=\"clear-search\"\n onClick={(e) => {\n e.stopPropagation();\n this.searchQuery = '';\n this.searchInputRef?.focus();\n }}\n aria-label=\"Clear search\"\n >\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n )}\n </div>\n );\n }\n\n private renderPropertyItem(property: PropertyOption) {\n const isSelected = property.name === this.internalSelectedProperty;\n return (\n <button\n class={{\n 'property-item': true,\n 'selected': isSelected,\n }}\n onClick={() => this.handlePropertySelect(property)}\n >\n <span class=\"material-symbols-outlined property-icon\">\n {this.getPropertyIcon(property.type)}\n </span>\n <span class=\"property-item-name\" title={property.name}>\n {property.name}\n </span>\n {isSelected && (\n <span class=\"material-symbols-outlined check-icon\">check</span>\n )}\n </button>\n );\n }\n\n private renderGroupedView() {\n const groups = this.getPropertyGroups();\n const filteredGroups = this.filterGroups(groups);\n\n if (filteredGroups.length === 0) {\n return this.renderEmptyState();\n }\n\n return (\n <div class=\"groups-container\">\n {filteredGroups.map((group) => {\n const isExpanded = this.expandedGroups.has(group.id);\n return (\n <div class=\"property-group\" key={group.id}>\n <button\n class={{\n 'group-header': true,\n 'expanded': isExpanded,\n }}\n onClick={() => this.handleGroupToggle(group.id)}\n aria-expanded={isExpanded ? 'true' : 'false'}\n >\n <span class=\"material-symbols-outlined group-expand-icon\">\n {isExpanded ? 'expand_more' : 'chevron_right'}\n </span>\n <span class=\"group-name\">{group.name}</span>\n <span class=\"group-count\">{group.properties.length}</span>\n </button>\n {isExpanded && (\n <div class=\"group-properties\">\n {group.properties.map((property) => (\n <div key={property.id}>\n {this.renderPropertyItem(property)}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n\n private renderFlatView() {\n const filteredProperties = this.filterProperties(this.properties);\n\n if (filteredProperties.length === 0) {\n return this.renderEmptyState();\n }\n\n // Legacy behavior: render portfolios with dividers, skip regions\n const items: (PropertyOption | { divider: true })[] = [];\n\n filteredProperties.forEach((property) => {\n if (property.type === 'portfolio') {\n items.push(property);\n items.push({ divider: true });\n } else if (property.type === 'property') {\n items.push(property);\n }\n });\n\n return (\n <div class=\"flat-list-container\">\n {items.map((item, index) => {\n if ('divider' in item) {\n return <div class=\"menu-divider\" key={`divider-${index}`} />;\n }\n return (\n <div key={item.id}>\n {this.renderPropertyItem(item)}\n </div>\n );\n })}\n </div>\n );\n }\n\n private renderEmptyState() {\n return (\n <div class=\"empty-state\">\n <span class=\"material-symbols-outlined empty-icon\">search_off</span>\n <span class=\"empty-text\">No properties found</span>\n </div>\n );\n }\n\n private getSelectedProperty(): PropertyOption | undefined {\n return this.properties.find(p => p.name === this.internalSelectedProperty);\n }\n\n render() {\n const containerClasses = {\n 'property-switcher': true,\n 'expanded': this.isExpanded,\n };\n\n const selectedProp = this.getSelectedProperty();\n const displayName = this.internalSelectedProperty || this.selectedProperty;\n\n return (\n <Host>\n <div\n ref={(el) => (this.switcherRef = el)}\n class={containerClasses}\n >\n <button\n class=\"property-selector\"\n onClick={() => this.handleToggle()}\n aria-expanded={this.isExpanded ? 'true' : 'false'}\n aria-label={`Property selector: ${displayName}`}\n >\n {selectedProp && (\n <span class=\"material-symbols-outlined selector-icon\">\n {this.getPropertyIcon(selectedProp.type)}\n </span>\n )}\n <span class=\"property-name\">{displayName}</span>\n <span\n class=\"material-symbols-outlined expand-icon\"\n aria-label={this.isExpanded ? 'Collapse Options' : 'Expand Options'}\n >\n {this.isExpanded ? 'unfold_less' : 'unfold_more'}\n </span>\n </button>\n\n {this.isExpanded && (\n <div class=\"dropdown-panel\">\n {this.renderSearchInput()}\n <div class=\"dropdown-content\">\n {this.grouped\n ? this.renderGroupedView()\n : this.renderFlatView()\n }\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-radio-button.entry.esm.js","sources":["src/components/bh-radio-button/bh-radio-button.css?tag=bh-radio-button&encapsulation=shadow","src/components/bh-radio-button/bh-radio-button.tsx"],"sourcesContent":["/* ==========================================================================\n BH-RADIO-BUTTON COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n RADIO BUTTON STYLES\n ========================================================================== */\n\n.radio {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n user-select: none;\n transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n border-radius: var(--radius-full);\n position: relative;\n flex-shrink: 0;\n}\n\n/* Size Variants */\n.radio-sm {\n width: 16px;\n height: 16px;\n}\n\n.radio-md {\n width: 20px;\n height: 20px;\n}\n\n/* State: Selected */\n.radio.radio-selected {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n animation: fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* State: Hover */\n.radio:hover:not(.radio-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.radio.radio-selected:hover:not(.radio-disabled) {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n}\n\n/* State: Focused */\n.radio.radio-focused:not(.radio-disabled) {\n border-color: var(--color-neutral-300);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n.radio.radio-selected.radio-focused:not(.radio-disabled) {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.radio.radio-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.radio.radio-selected.radio-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n}\n\n/* Radio Dot (inner circle) */\n.radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--radius-full);\n background: var(--color-white);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n/* Radio Dot for small size */\n.radio-sm .radio-dot {\n width: 4px;\n height: 4px;\n}\n\n/* Disabled radio dot */\n.radio-disabled .radio-dot {\n background: var(--color-neutral-300);\n}\n\n/* Focus outline for accessibility */\n.radio:focus {\n outline: none;\n}\n\n.radio:focus:not(.radio-disabled) {\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n/* Animation for fill effect */\n@keyframes fillExpand {\n 0% {\n transform: scale(0.95);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n/* ==========================================================================\n RADIO CONTROL AND WRAPPER STYLES\n ========================================================================== */\n\n.radio-wrapper {\n display: inline-block;\n}\n\n.radio-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n outline: none;\n}\n\n.radio-wrapper-disabled .radio-control {\n cursor: not-allowed;\n}\n\n/* Adjust radio position when with label */\n.radio-wrapper-with-label .radio-sm {\n margin-top: 3px;\n}\n\n.radio-wrapper-with-label .radio-md {\n margin-top: 2px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue } from '../../utils/form';\n\nexport type RadioButtonSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-radio-button',\n styleUrl: 'bh-radio-button.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhRadioButton {\n @AttachInternals() internals!: ElementInternals;\n /**\n * The size of the radio button\n */\n @Prop() size: RadioButtonSize = 'md';\n\n /**\n * Whether the radio button is selected\n */\n @Prop({ mutable: true }) selected: boolean = false;\n\n /**\n * Whether the radio button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The value associated with this radio button\n */\n @Prop() value: string = '';\n\n /**\n * The name of the radio group\n */\n @Prop() name: string = '';\n\n /**\n * Optional label text - when provided, renders radio with label\n */\n @Prop() label: string = '';\n\n /**\n * Optional supporting text below the label\n */\n @Prop() supportingText: string = '';\n\n /**\n * Track focus state internally\n */\n @State() isFocused: boolean = false;\n\n /**\n * Track hover state internally\n */\n @State() isHovered: boolean = false;\n\n /**\n * Emitted when the radio button selection changes\n */\n @Event() bhChange!: EventEmitter<string>;\n\n componentDidLoad() {\n syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n }\n\n formResetCallback() {\n this.selected = false;\n syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n }\n\n private handleClick = (): void => {\n if (this.disabled || this.selected) return;\n\n this.selected = true;\n syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n this.bhChange.emit(this.value);\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n private handleFocus = (): void => {\n this.isFocused = true;\n };\n\n private handleBlur = (): void => {\n this.isFocused = false;\n };\n\n private handleMouseEnter = (): void => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = (): void => {\n this.isHovered = false;\n };\n\n private uniqueId = `bh-radio-${Math.random().toString(36).substring(2, 9)}`;\n\n private renderRadioControl() {\n const radioClasses = {\n 'radio': true,\n [`radio-${this.size}`]: true,\n 'radio-selected': this.selected,\n 'radio-disabled': this.disabled,\n 'radio-focused': this.isFocused && !this.disabled,\n 'radio-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"radio-control\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n tabIndex={this.disabled ? -1 : 0}\n role=\"radio\"\n aria-checked={String(this.selected)}\n aria-disabled={String(this.disabled)}\n >\n <div class={radioClasses} part=\"radio\">\n {this.selected && <div class=\"radio-dot\"></div>}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'radio-wrapper': true,\n 'radio-wrapper-with-label': !!hasLabel,\n 'radio-wrapper-disabled': this.disabled,\n };\n\n // Render with bh-label when label/supportingText is provided\n if (hasLabel) {\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n <bh-label\n layout=\"inline-start\"\n label={this.label}\n supportingText={this.supportingText}\n disabled={this.disabled}\n for={this.uniqueId}\n >\n {this.renderRadioControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone radio button without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderRadioControl()}\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-sidebar.entry.esm.js","sources":["src/components/bh-sidebar/bh-sidebar.css?tag=bh-sidebar&encapsulation=shadow","src/components/bh-sidebar/bh-sidebar.tsx"],"sourcesContent":["/* ==========================================================================\n SIDEBAR COMPONENT\n Vertical navigation sidebar with gradient bar\n ========================================================================== */\n\n.sidebar-container {\n width: fit-content;\n height: 100vh;\n background-color: var(--color-white);\n position: relative;\n display: flex;\n}\n\n.navigation {\n background-color: var(--color-white);\n display: flex;\n height: 100%;\n align-items: flex-start;\n justify-content: flex-start;\n position: relative;\n border-right: 1px solid var(--color-neutral-200);\n z-index: 100;\n}\n\n/* Gradient bar on the left edge */\n.gradient-bar {\n position: relative;\n width: var(--spacing-xs);\n height: 100%;\n flex-shrink: 0;\n}\n\n.detail-bar {\n position: absolute;\n background: linear-gradient(\n 180deg,\n var(--color-accent-300) 0%,\n var(--color-brand-400) 51%,\n var(--color-brand-800) 100%\n );\n inset: 0;\n}\n\n/* Main sidebar content */\n.sidebar-content {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2xl);\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n var(--spacing-md);\n position: relative;\n flex-shrink: 0;\n width: 60px;\n}\n\n/* Navigation section that contains search and nav items */\n.navigation-section {\n flex: 1 1 0%;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n flex-grow: 1;\n align-items: center;\n justify-content: flex-start;\n min-height: 0;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Search container */\n.search-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/* Nav items container */\n.nav-items {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/* Footer section with footer nav and avatar */\n.sidebar-footer {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-lg);\n align-items: center;\n justify-content: end;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.footer-navigation {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/* Collapsed state */\n.sidebar-collapsed .sidebar-content {\n width: 60px;\n}\n\n.sidebar-collapsed .nav-item-label {\n display: none;\n}\n\n/* Scrollbar styling for navigation section */\n.navigation-section::-webkit-scrollbar {\n width: 4px;\n}\n\n.navigation-section::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.navigation-section::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n border-radius: var(--radius-xs);\n}\n\n.navigation-section::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.navigation-section {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Expanded state (optional future enhancement) */\n.sidebar-expanded .sidebar-content {\n width: 240px;\n}\n\n.sidebar-expanded .nav-items {\n align-items: flex-start;\n}\n\n.sidebar-expanded .nav-item {\n width: 100%;\n flex-direction: row;\n justify-content: flex-start;\n gap: var(--spacing-md);\n}\n\n.sidebar-expanded .nav-item-label {\n display: block;\n text-align: left;\n font-size: var(--text-sm-size);\n height: auto;\n line-height: var(--text-sm-line);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { LogoType } from '../bh-logo-box/bh-logo-box';\n\nexport interface MenuItem {\n label: string;\n icon: string;\n isActive?: boolean;\n}\n\nexport interface FooterItem {\n label: string;\n icon: string;\n}\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n shortcut?: string;\n divider?: boolean;\n}\n\n@Component({\n tag: 'bh-sidebar',\n styleUrl: 'bh-sidebar.css',\n shadow: true,\n})\nexport class BhSidebar {\n /**\n * Type of logo to display\n */\n @Prop() logoType: LogoType = 'actabl';\n\n /**\n * Avatar image URL\n */\n @Prop() avatarUrl?: string;\n\n /**\n * Avatar initials (used if avatarUrl is not provided)\n */\n @Prop() avatarInitials: string = 'DM';\n\n /**\n * Avatar name for dropdown\n */\n @Prop() avatarName: string = 'Daniel Mobara';\n\n /**\n * Avatar email for dropdown\n */\n @Prop() avatarEmail: string = 'daniel@solsticehospitality.com';\n\n /**\n * Main menu navigation items\n */\n @Prop() menuItems: MenuItem[] = [\n { label: 'Dashboard', icon: 'dashboard', isActive: true },\n { label: 'Analytics', icon: 'analytics', isActive: false },\n { label: 'Reports', icon: 'assessment', isActive: false },\n { label: 'Calendar', icon: 'calendar_today', isActive: false },\n { label: 'Messages', icon: 'message', isActive: false },\n { label: 'Contacts', icon: 'contacts', isActive: false },\n { label: 'Files', icon: 'folder', isActive: false },\n ];\n\n /**\n * Footer navigation items\n */\n @Prop() footerItems: FooterItem[] = [\n { label: 'Help', icon: 'help_outline' },\n { label: 'Settings', icon: 'settings' },\n ];\n\n /**\n * Whether sidebar is collapsed\n */\n @Prop() collapsed: boolean = false;\n\n /**\n * Event emitted when a menu item is clicked\n */\n @Event() bhMenuItemClick!: EventEmitter<string>;\n\n /**\n * Event emitted when search button is clicked\n */\n @Event() bhSearchClick!: EventEmitter<void>;\n\n /**\n * Event emitted when avatar menu item is clicked\n */\n @Event() bhAvatarMenuClick!: EventEmitter<DropdownMenuItem>;\n\n @State() activeItem: string = '';\n\n componentWillLoad() {\n const activeMenuItem = this.menuItems.find(item => item.isActive);\n this.activeItem = activeMenuItem?.label || '';\n }\n\n private handleNavItemClick = (label: string) => {\n this.activeItem = label;\n this.bhMenuItemClick.emit(label);\n };\n\n private handleSearchClick = () => {\n this.bhSearchClick.emit();\n };\n\n private handleAvatarMenuClick = (event: CustomEvent<DropdownMenuItem>) => {\n this.bhAvatarMenuClick.emit(event.detail);\n };\n\n render() {\n const sidebarClasses = {\n 'sidebar-container': true,\n 'sidebar-collapsed': this.collapsed,\n };\n\n const avatarMenuItems: DropdownMenuItem[] = [\n { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },\n { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },\n { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },\n { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },\n { id: '5', divider: true },\n { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },\n { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },\n { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },\n { id: '9', divider: true },\n { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },\n { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },\n { id: '12', divider: true },\n { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },\n ];\n\n return (\n <Host>\n <div class={sidebarClasses}>\n <div class=\"navigation\">\n {/* Gradient bar */}\n <div class=\"gradient-bar\">\n <div class=\"detail-bar\"></div>\n </div>\n\n {/* Main content */}\n <div class=\"sidebar-content\">\n {/* Logo box */}\n <bh-logo-box logoType={this.logoType}></bh-logo-box>\n\n {/* Navigation section */}\n <div class=\"navigation-section\">\n {/* Search */}\n <div class=\"search-container\">\n <bh-button-icon\n hierarchy=\"secondary\"\n size=\"sm\"\n iconName=\"search\"\n onClick={this.handleSearchClick}\n ></bh-button-icon>\n </div>\n\n {/* Nav items */}\n <div class=\"nav-items\">\n {this.menuItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={this.activeItem === item.label}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n </div>\n\n {/* Footer */}\n <div class=\"sidebar-footer\">\n <div class=\"footer-navigation\">\n {this.footerItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={false}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n\n {/* Avatar Dropdown */}\n <bh-dropdown\n variant=\"avatar\"\n size=\"md\"\n avatarSize=\"md\"\n avatarSrc={this.avatarUrl}\n avatarName={this.avatarName}\n avatarEmail={this.avatarEmail}\n menuItems={avatarMenuItems}\n showIcons={true}\n onBhItemClick={this.handleAvatarMenuClick}\n ></bh-dropdown>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,qgFAAqgF;;MC2B7gF,SAAS,GAAA,MAAA;;;;;;;AACpB;;AAEG;IACK,QAAQ,GAAa,QAAQ;AAErC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;IACK,cAAc,GAAW,IAAI;AAErC;;AAEG;IACK,UAAU,GAAW,eAAe;AAE5C;;AAEG;IACK,WAAW,GAAW,gCAAgC;AAE9D;;AAEG;AACK,IAAA,SAAS,GAAe;QAC9B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE;QACzD,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1D,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC9D,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QACvD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;QACxD,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;KACpD;AAED;;AAEG;AACK,IAAA,WAAW,GAAiB;AAClC,QAAA,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE;AACvC,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;KACxC;AAED;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;AACM,IAAA,eAAe;AAExB;;AAEG;AACM,IAAA,aAAa;AAEtB;;AAEG;AACM,IAAA,iBAAiB;IAEjB,UAAU,GAAW,EAAE;IAEhC,iBAAiB,GAAA;AACf,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;QACjE,IAAI,CAAC,UAAU,GAAG,cAAc,EAAE,KAAK,IAAI,EAAE;;AAGvC,IAAA,kBAAkB,GAAG,CAAC,KAAa,KAAI;AAC7C,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,KAAC;IAEO,iBAAiB,GAAG,MAAK;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AAC3B,KAAC;AAEO,IAAA,qBAAqB,GAAG,CAAC,KAAoC,KAAI;QACvE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC3C,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,mBAAmB,EAAE,IAAI;YACzB,mBAAmB,EAAE,IAAI,CAAC,SAAS;SACpC;AAED,QAAA,MAAM,eAAe,GAAuB;AAC1C,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;AAClE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;AACxE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC1E,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;AACxE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;AAClE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;AACpE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE;AACrE,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B,YAAA,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;AAChE,YAAA,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC1E,YAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,YAAA,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;SACjE;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAErB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,CAAO,CAC1B,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1B,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAgB,CAAA,EAGpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GACf,CACd,EAGN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,MACvB,CACE,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,EACxC,SAAS,EAAE,MAAM,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,CACvC,CAChB,CAAC,CACE,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAC3B,EAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,MACzB,CAAA,CAAA,aAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,MAAM,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,CACvC,CAChB,CAAC,CACE,EAGN,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,IAAI,EACT,UAAU,EAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,IAAI,CAAC,qBAAqB,EAC5B,CAAA,CACX,CACF,CACF,CACF,CACD;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-skeleton-loader.entry.esm.js","sources":["src/components/bh-skeleton-loader/bh-skeleton-loader.css?tag=bh-skeleton-loader&encapsulation=shadow","src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"sourcesContent":["/* ==========================================================================\n BH-SKELETON-LOADER COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n.skeleton {\n display: inline-block;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.06) 25%,\n rgba(0, 0, 0, 0.03) 50%,\n rgba(0, 0, 0, 0.06) 75%\n );\n background-size: 400% 100%;\n animation: shimmer 1.5s ease-in-out infinite;\n border-radius: var(--radius-sm);\n line-height: 1;\n}\n\n.skeleton-circle {\n border-radius: 50%;\n}\n\n.skeleton::before {\n content: '\\00a0';\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0 50%;\n }\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'bh-skeleton-loader',\n styleUrl: 'bh-skeleton-loader.css',\n shadow: true,\n})\nexport class BhSkeletonLoader {\n /**\n * Width of the skeleton (CSS value)\n */\n @Prop() width: string = '100%';\n\n /**\n * Height of the skeleton (CSS value)\n */\n @Prop() height: string = '1em';\n\n /**\n * Whether the skeleton should be circular\n */\n @Prop() circle: boolean = false;\n\n render() {\n const skeletonClasses = {\n 'skeleton': true,\n 'skeleton-circle': this.circle,\n };\n\n return (\n <span\n class={skeletonClasses}\n style={{ width: this.width, height: this.height }}\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n part=\"skeleton\"\n >\n <span class=\"visually-hidden\">Loading...</span>\n </span>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,8lBAA8lB;;MCO7mB,gBAAgB,GAAA,MAAA;;;;AAC3B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,MAAM,GAAW,KAAK;AAE9B;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACR,WAAA,EAAA,MAAM,EAChB,IAAI,EAAC,UAAU,EAAA,EAEf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAkB,EAAA,YAAA,CAAA,CAC1C;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-tab-item.entry.esm.js","sources":["src/components/bh-tab-item/bh-tab-item.css?tag=bh-tab-item&encapsulation=shadow","src/components/bh-tab-item/bh-tab-item.tsx"],"sourcesContent":["/* ==========================================================================\n BH-TAB-ITEM COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: flex;\n}\n\n/* Full Width for Tab Items inside Full Width Tabs */\n:host(.tab-item-full) {\n flex: 1 0 0;\n min-width: 0;\n}\n\n/* Tab Button Base */\n.tab-button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-sm) var(--spacing-md);\n min-height: 36px;\n font-family: var(--font-inter);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n font-weight: var(--weight-semibold);\n color: var(--color-neutral-600);\n background: transparent;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n white-space: nowrap;\n outline: none;\n width: 100%;\n}\n\n/* Underline Type Specific Styles */\n:host-context(.tabs-underline) .tab-button {\n border-radius: 0;\n padding-top: var(--spacing-xs);\n padding-bottom: var(--spacing-md);\n border-bottom: 2px solid transparent;\n}\n\n/* Full Width Tab Items */\n:host-context(.tabs-full-width) .tab-button {\n justify-content: center;\n}\n\n/* Active State - Contained Type */\n:host-context(.tabs-contained) .tab-button-active {\n color: var(--color-brand-600);\n background-color: var(--color-brand-50);\n}\n\n/* Active State - Underline Type */\n:host-context(.tabs-underline) .tab-button-active {\n color: var(--color-brand-600);\n border-bottom-color: var(--color-brand-600);\n}\n\n/* Hover State - Contained Type */\n:host-context(.tabs-contained)\n .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active) {\n background-color: var(--color-neutral-50);\n color: var(--color-neutral-700);\n}\n\n/* Hover State - Underline Type */\n:host-context(.tabs-underline)\n .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active) {\n color: var(--color-neutral-700);\n}\n\n/* Active/Pressed State - Contained Type */\n:host-context(.tabs-contained) .tab-button:active:not(.tab-button-disabled) {\n background-color: var(--color-neutral-100);\n}\n\n/* Focus State */\n.tab-button:focus-visible {\n outline: 2px solid var(--color-brand-500);\n outline-offset: 2px;\n}\n\n/* Disabled State */\n.tab-button-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Tab Label */\n.tab-label {\n display: inline-block;\n}\n\n/* ==========================================================================\n VERTICAL ORIENTATION STYLES\n ========================================================================== */\n\n/* Vertical Tab Items take full width */\n:host-context(.tabs-vertical) {\n width: 100%;\n}\n\n:host-context(.tabs-vertical) .tab-button {\n justify-content: flex-start;\n width: 100%;\n}\n\n/* Vertical Contained - Active State */\n:host-context(.tabs-vertical.tabs-contained) .tab-button-active {\n color: var(--color-brand-600);\n background-color: var(--color-brand-50);\n}\n\n/* Vertical Underline - Uses left border instead of bottom */\n:host-context(.tabs-vertical.tabs-underline) .tab-button {\n border-radius: 0;\n border-bottom: none;\n border-left: 2px solid transparent;\n padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);\n}\n\n/* Vertical Underline - Active State */\n:host-context(.tabs-vertical.tabs-underline) .tab-button-active {\n color: var(--color-brand-600);\n border-left-color: var(--color-brand-600);\n border-bottom-color: transparent;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n Host,\n Element,\n} from '@stencil/core';\n\n/**\n * @slot - Tab content (usually just text, but can include badges)\n */\n@Component({\n tag: 'bh-tab-item',\n styleUrl: 'bh-tab-item.css',\n shadow: true,\n})\nexport class BhTabItem {\n @Element() el!: HTMLElement;\n\n /**\n * Unique identifier for this tab\n */\n @Prop() value!: string;\n\n /**\n * The label text for the tab\n */\n @Prop() label!: string;\n\n /**\n * Whether this tab is currently active\n */\n @Prop() active: boolean = false;\n\n /**\n * Whether this tab is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Emitted when the tab is clicked\n */\n @Event({ bubbles: true, composed: true })\n bhTabItemClick!: EventEmitter<string>;\n\n private handleClick = (): void => {\n if (!this.disabled) {\n this.bhTabItemClick.emit(this.value);\n }\n };\n\n render() {\n const buttonClasses = {\n 'tab-button': true,\n 'tab-button-active': this.active,\n 'tab-button-disabled': this.disabled,\n };\n\n return (\n <Host\n class={{\n 'tab-item': true,\n 'tab-item-active': this.active,\n 'tab-item-disabled': this.disabled,\n }}\n >\n <button\n class={buttonClasses}\n part=\"button\"\n role=\"tab\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n disabled={this.disabled}\n onClick={this.handleClick}\n type=\"button\"\n >\n <span class=\"tab-label\" part=\"label\">\n {this.label}\n </span>\n <slot />\n </button>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,orEAAorE;;MCkB5rE,SAAS,GAAA,MAAA;;;;;;AAGpB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,MAAM,GAAY,KAAK;AAE/B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AAEH,IAAA,cAAc;IAEN,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;AAExC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,YAAY,EAAE,IAAI;YAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;YAChC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,EAAA,EAED,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC9B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EACjC,EAAA,IAAI,CAAC,KAAK,CACN,EACP,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACJ;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-tabs.entry.esm.js","sources":["src/components/bh-tabs/bh-tabs.css?tag=bh-tabs&encapsulation=shadow","src/components/bh-tabs/bh-tabs.tsx"],"sourcesContent":["/* ==========================================================================\n BH-TABS COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: block;\n width: 100%;\n}\n\n/* Tabs Container */\n.tabs-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/* Tabs List */\n.tabs-list {\n display: flex;\n gap: var(--spacing-xs);\n padding: var(--spacing-none);\n position: relative;\n}\n\n/* Full Width */\n.tabs-full-width .tabs-list {\n width: 100%;\n gap: var(--spacing-lg);\n justify-content: center;\n}\n\n/* Underline Type - Horizontal */\n.tabs-underline.tabs-horizontal .tabs-container {\n border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.tabs-underline.tabs-horizontal .tabs-list {\n gap: var(--spacing-lg);\n}\n\n.tabs-underline.tabs-horizontal.tabs-full-width .tabs-list {\n gap: var(--spacing-lg);\n}\n\n/* Contained Type */\n.tabs-contained .tabs-list {\n gap: var(--spacing-xs);\n}\n\n/* ==========================================================================\n VERTICAL ORIENTATION\n ========================================================================== */\n\n.tabs-vertical {\n width: auto;\n}\n\n.tabs-vertical .tabs-container {\n width: auto;\n}\n\n.tabs-vertical .tabs-list {\n flex-direction: column;\n gap: var(--spacing-xs);\n width: 204px;\n}\n\n/* Vertical Underline Type - Left border instead of bottom */\n.tabs-underline.tabs-vertical .tabs-container {\n border-bottom: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n} from '@stencil/core';\n\nexport type TabsType = 'underline' | 'contained';\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\n/**\n * @slot - Tab items (bh-tab-item components)\n */\n@Component({\n tag: 'bh-tabs',\n styleUrl: 'bh-tabs.css',\n shadow: true,\n})\nexport class BhTabs {\n /**\n * The type of tabs: underline or contained style\n */\n @Prop() type: TabsType = 'contained';\n\n /**\n * The orientation of the tabs: horizontal or vertical\n */\n @Prop() orientation: TabsOrientation = 'horizontal';\n\n /**\n * Whether the tabs should take up the full width of the container\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The value of the currently active tab\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Emitted when the active tab changes\n */\n @Event({ bubbles: true, composed: true }) bhTabChange!: EventEmitter<string>;\n\n @Listen('bhTabItemClick')\n handleTabItemClick(event: CustomEvent<string>): void {\n const value = event.detail;\n if (this.value !== value) {\n this.value = value;\n this.bhTabChange.emit(value);\n }\n }\n\n render() {\n const hostClasses = {\n tabs: true,\n [`tabs-${this.type}`]: true,\n [`tabs-${this.orientation}`]: true,\n 'tabs-full-width': this.fullWidth,\n };\n\n return (\n <Host class={hostClasses}>\n <div class=\"tabs-container\" part=\"container\">\n <div\n class=\"tabs-list\"\n part=\"list\"\n role=\"tablist\"\n aria-orientation={this.orientation}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,0wBAA0wB;;MCqB/wB,MAAM,GAAA,MAAA;;;;;AACjB;;AAEG;IACK,IAAI,GAAa,WAAW;AAEpC;;AAEG;IACK,WAAW,GAAoB,YAAY;AAEnD;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACsB,KAAK,GAAW,EAAE;AAE3C;;AAEG;AACuC,IAAA,WAAW;AAGrD,IAAA,kBAAkB,CAAC,KAA0B,EAAA;AAC3C,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE;AACxB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAIhC,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YAClC,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,WAAW,EAAA,EAC1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACI,kBAAA,EAAA,IAAI,CAAC,WAAW,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-textarea.entry.esm.js","sources":["src/components/bh-textarea/bh-textarea.css?tag=bh-textarea&encapsulation=shadow","src/components/bh-textarea/bh-textarea.tsx"],"sourcesContent":["/* ==========================================================================\n BH-TEXTAREA COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n width: 100%;\n}\n\n/* Container */\n.textarea-container {\n position: relative;\n display: flex;\n flex-direction: column;\n background: var(--color-white);\n border: 1px solid var(--color-neutral-300);\n border-radius: 8px;\n box-shadow: 0px 1px 2px rgba(64, 73, 104, 0.06);\n transition: all 0.2s ease-in-out;\n min-height: 128px;\n}\n\n.textarea-container:hover:not(.textarea-container-disabled):not(.textarea-container-focused) {\n border-color: var(--color-brand-500);\n}\n\n.textarea-container-focused {\n border-color: var(--color-brand-500);\n box-shadow: 0 0 0 1px var(--color-brand-500);\n}\n\n.textarea-container-error {\n border-color: var(--color-error-300);\n}\n\n.textarea-container-error:hover:not(.textarea-container-focused) {\n border-color: var(--color-error-500);\n}\n\n.textarea-container-error.textarea-container-focused {\n border-color: var(--color-brand-500);\n box-shadow: 0 0 0 1px var(--color-brand-500);\n}\n\n.textarea-container-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background: var(--color-neutral-50);\n}\n\n/* Textarea Content */\n.textarea-content {\n width: 100%;\n}\n\n/* Textarea */\n.textarea {\n box-sizing: border-box;\n padding: 12px 14px;\n background: transparent;\n border: none;\n outline: none;\n font-family: var(--font-inter);\n font-weight: 400;\n font-size: var(--text-sm-size);\n line-height: 1.5;\n color: var(--color-neutral-900);\n width: 100%;\n min-height: 96px;\n resize: none;\n caret-color: var(--color-brand-500);\n flex: 1;\n box-shadow: none;\n}\n\n.textarea:focus {\n outline: none;\n border: none;\n box-shadow: none;\n}\n\n.textarea::placeholder {\n color: var(--color-neutral-400);\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--color-neutral-400);\n}\n\n/* Hint Text */\n.hint-text {\n font-family: var(--font-inter);\n font-weight: 400;\n font-size: var(--text-sm-size);\n line-height: 1.43;\n color: var(--color-neutral-600);\n}\n\n.hint-text.hint-error {\n color: var(--color-error-600);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .textarea {\n font-size: 16px; /* Prevent zoom on iOS */\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\nexport type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';\n\n@Component({\n tag: 'bh-textarea',\n styleUrl: 'bh-textarea.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhTextarea {\n @AttachInternals() internals!: ElementInternals;\n\n private textareaEl?: HTMLTextAreaElement;\n /**\n * The label for the textarea\n */\n @Prop() label: string = 'Comment';\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string = 'Write a message...';\n\n /**\n * Hint text shown below the textarea\n */\n @Prop() hintText: string = '';\n\n /**\n * Whether to show the label\n */\n @Prop() showLabel: boolean = true;\n\n /**\n * Whether to show hint text\n */\n @Prop() showHintText: boolean = true;\n\n /**\n * Whether to show the help icon\n */\n @Prop() showHelpIcon: boolean = false;\n\n /**\n * Whether the field has an error\n */\n @Prop() error: boolean = false;\n\n /**\n * Whether the textarea is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the field is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Tooltip text for the help icon\n */\n @Prop() helpIconTooltip: string = 'Help';\n\n /**\n * The textarea value\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Name attribute for form submission\n */\n @Prop() name: string = '';\n\n /**\n * Default value for form reset\n */\n @Prop() defaultValue: string = '';\n\n /**\n * Custom validation message\n */\n @Prop() validationMessage: string = '';\n\n /**\n * Number of visible rows\n */\n @Prop() rows: number = 4;\n\n /**\n * Resize behavior\n */\n @Prop() resize: TextareaResize = 'none';\n\n /**\n * Maximum character length\n */\n @Prop() maxLength?: number;\n\n /**\n * Track focus state\n */\n @State() isFocused: boolean = false;\n\n /**\n * Emitted when the value changes\n */\n @Event() bhInput!: EventEmitter<string>;\n\n /**\n * Emitted when the textarea gains focus\n */\n @Event() bhFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea loses focus\n */\n @Event() bhBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the help icon is clicked\n */\n @Event() bhHelpClick!: EventEmitter<void>;\n\n componentDidLoad() {\n syncFormValue(this);\n updateValidity(this.internals, this.textareaEl, this.validationMessage);\n }\n\n formResetCallback() {\n this.value = this.defaultValue;\n if (this.textareaEl) {\n this.textareaEl.value = this.defaultValue;\n }\n syncFormValue(this);\n updateValidity(this.internals, this.textareaEl);\n }\n\n private handleInput = (event: Event): void => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.bhInput.emit(this.value);\n syncFormValue(this);\n updateValidity(this.internals, this.textareaEl, this.validationMessage);\n };\n\n private handleFocus = (): void => {\n this.isFocused = true;\n this.bhFocus.emit();\n };\n\n private handleBlur = (): void => {\n this.isFocused = false;\n this.bhBlur.emit();\n };\n\n private handleHelpClick = (): void => {\n this.bhHelpClick.emit();\n };\n\n render() {\n const containerClasses = {\n 'textarea-container': true,\n 'textarea-container-focused': this.isFocused,\n 'textarea-container-error': this.error,\n 'textarea-container-disabled': this.disabled,\n };\n\n const textareaClasses = {\n 'textarea': true,\n 'textarea-error': this.error,\n };\n\n return (\n <div class=\"textarea-wrapper\" part=\"wrapper\">\n <bh-label\n label={this.showLabel ? this.label : ''}\n required={this.required}\n showHelpIcon={this.showHelpIcon}\n helpIconTooltip={this.helpIconTooltip}\n disabled={this.disabled}\n onBhHelpClick={this.handleHelpClick}\n >\n <div class={containerClasses}>\n <div class=\"textarea-content\">\n <textarea\n ref={(el) => (this.textareaEl = el)}\n class={textareaClasses}\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n rows={this.rows}\n maxLength={this.maxLength}\n style={{ resize: this.resize }}\n aria-label={this.label}\n aria-describedby={this.showHintText && this.hintText ? 'hint-text' : undefined}\n aria-invalid={String(this.error)}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n part=\"textarea\"\n />\n </div>\n </div>\n </bh-label>\n\n {this.showHintText && this.hintText && (\n <div\n class={{ 'hint-text': true, 'hint-error': this.error }}\n id=\"hint-text\"\n >\n {this.hintText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,iuDAAiuD;;MCW1uD,UAAU,GAAA,MAAA;;;;;;;;;;;;;;;AACF,IAAA,SAAS;AAEpB,IAAA,UAAU;AAClB;;AAEG;IACK,KAAK,GAAW,SAAS;AAEjC;;AAEG;IACK,WAAW,GAAW,oBAAoB;AAElD;;AAEG;IACK,QAAQ,GAAW,EAAE;AAE7B;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,YAAY,GAAY,IAAI;AAEpC;;AAEG;IACK,YAAY,GAAY,KAAK;AAErC;;AAEG;IACK,KAAK,GAAY,KAAK;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,eAAe,GAAW,MAAM;AAExC;;AAEG;IACsB,KAAK,GAAW,EAAE;AAE3C;;AAEG;IACK,IAAI,GAAW,EAAE;AAEzB;;AAEG;IACK,YAAY,GAAW,EAAE;AAEjC;;AAEG;IACK,iBAAiB,GAAW,EAAE;AAEtC;;AAEG;IACK,IAAI,GAAW,CAAC;AAExB;;AAEG;IACK,MAAM,GAAmB,MAAM;AAEvC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;IACM,SAAS,GAAY,KAAK;AAEnC;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,MAAM;AAEf;;AAEG;AACM,IAAA,WAAW;IAEpB,gBAAgB,GAAA;QACd,aAAa,CAAC,IAAI,CAAC;AACnB,QAAA,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;;IAGzE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;AAC9B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;QAE3C,aAAa,CAAC,IAAI,CAAC;QACnB,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;;AAGzC,IAAA,WAAW,GAAG,CAAC,KAAY,KAAU;AAC3C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B;AAClD,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,aAAa,CAAC,IAAI,CAAC;AACnB,QAAA,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;AACzE,KAAC;IAEO,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAEO,UAAU,GAAG,MAAW;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,KAAC;IAEO,eAAe,GAAG,MAAW;AACnC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,oBAAoB,EAAE,IAAI;YAC1B,4BAA4B,EAAE,IAAI,CAAC,SAAS;YAC5C,0BAA0B,EAAE,IAAI,CAAC,KAAK;YACtC,6BAA6B,EAAE,IAAI,CAAC,QAAQ;SAC7C;AAED,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,gBAAgB,EAAE,IAAI,CAAC,KAAK;SAC7B;AAED,QAAA,QACE,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,SAAS,EAAA,EAC1C,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,eAAe,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAClB,YAAA,EAAA,IAAI,CAAC,KAAK,EACJ,kBAAA,EAAA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,SAAS,EAChE,cAAA,EAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,IAAI,EAAC,UAAU,EAAA,CACf,CACE,CACF,CACG,EAEV,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,KACjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EACtD,EAAE,EAAC,WAAW,EAEb,EAAA,IAAI,CAAC,QAAQ,CACV,CACP,CACG;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bh-toggle.entry.esm.js","sources":["src/components/bh-toggle/bh-toggle.css?tag=bh-toggle&encapsulation=shadow","src/components/bh-toggle/bh-toggle.tsx"],"sourcesContent":["/* ==========================================================================\n BH-TOGGLE COMPONENT STYLES - Material You Design\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n/* Toggle Wrapper */\n.toggle-wrapper {\n display: flex;\n align-items: center;\n gap: 0;\n}\n\n.toggle-with-text.toggle-size-sm {\n gap: var(--spacing-md);\n}\n\n.toggle-with-text.toggle-size-md {\n gap: var(--spacing-lg);\n}\n\n/* Toggle Switch Base */\n.toggle-switch {\n position: relative;\n display: inline-block;\n border-radius: var(--radius-full);\n cursor: pointer;\n transition: background-color 0.2s ease;\n outline: none;\n border: 1px solid transparent;\n background: transparent;\n overflow: visible;\n padding: 0;\n}\n\n.toggle-switch:focus {\n outline: none;\n}\n\n.toggle-switch.toggle-disabled {\n cursor: not-allowed;\n opacity: 0.38;\n}\n\n/* Toggle Switch Sizes */\n.toggle-switch.toggle-sm {\n width: 36px;\n height: 20px;\n}\n\n.toggle-switch.toggle-md {\n width: 40px;\n height: 24px;\n}\n\n/* Toggle Switch States - Unpressed (False) */\n.toggle-switch.toggle-unpressed {\n background-color: var(--color-neutral-300);\n border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover {\n background-color: var(--color-neutral-400);\n border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-focus {\n background-color: var(--color-neutral-200);\n border-color: transparent;\n}\n\n/* Focus ring for unpressed state */\n.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {\n content: '';\n position: absolute;\n top: -6px;\n left: -6px;\n right: -6px;\n bottom: -6px;\n border-radius: var(--radius-full);\n background: var(--color-neutral-600);\n opacity: 0.12;\n pointer-events: none;\n}\n\n.toggle-switch.toggle-unpressed.toggle-disabled {\n background-color: var(--color-neutral-100);\n border-color: transparent;\n}\n\n/* Toggle Switch States - Pressed (True) */\n.toggle-switch.toggle-pressed {\n background-color: var(--color-brand-600);\n border-color: var(--color-brand-600);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover {\n background-color: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n.toggle-switch.toggle-pressed.toggle-focus {\n background-color: var(--color-brand-600);\n border-color: var(--color-brand-600);\n}\n\n/* Focus ring for pressed state */\n.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {\n content: '';\n position: absolute;\n top: -6px;\n left: -6px;\n right: -6px;\n bottom: -6px;\n border-radius: var(--radius-full);\n background: var(--color-brand-100);\n opacity: 0.24;\n pointer-events: none;\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled {\n background-color: var(--color-neutral-200);\n border-color: var(--color-neutral-200);\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {\n background-color: var(--color-neutral-100);\n}\n\n/* Toggle Button (Handle) */\n.toggle-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n border-radius: var(--radius-full);\n background-color: var(--color-neutral-600);\n transition: all 0.2s ease;\n}\n\n/* Toggle Button States - Unpressed */\n.toggle-switch.toggle-unpressed .toggle-button {\n background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {\n width: 16px;\n height: 16px;\n left: 1px;\n}\n\n.toggle-switch.toggle-md.toggle-unpressed .toggle-button {\n width: 20px;\n height: 20px;\n left: 1px;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {\n background-color: var(--color-white);\n box-shadow: var(--shadow-sm);\n}\n\n/* Toggle Button States - Pressed */\n.toggle-switch.toggle-pressed .toggle-button {\n background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed .toggle-button {\n width: 16px;\n height: 16px;\n left: calc(100% - 17px);\n}\n\n.toggle-switch.toggle-md.toggle-pressed .toggle-button {\n width: 20px;\n height: 20px; \n left: calc(100% - 21px);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover .toggle-button {\n background-color: var(--color-white);\n}\n\n/* Toggle Button Disabled State */\n.toggle-switch.toggle-disabled .toggle-button {\n background-color: var(--color-neutral-400);\n box-shadow: none;\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {\n width: 16px;\n height: 16px;\n left: 2px;\n background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {\n width: 16px;\n height: 16px;\n left: 4px;\n background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {\n width: 16px;\n height: 16px;\n left: calc(100% - 17px);\n background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {\n width: 20px;\n height: 20px;\n left: calc(100% - 21px);\n background-color: var(--color-white);\n}\n\n/* Toggle Text Container */\n.toggle-text {\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* Toggle Label */\n.toggle-label {\n color: var(--color-neutral-700);\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n text-align: left;\n margin: 0;\n line-height: 1.5;\n}\n\n.toggle-label.toggle-label-sm {\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n}\n\n.toggle-label.toggle-label-md {\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n/* Toggle Supporting Text */\n.toggle-supporting-text {\n color: var(--color-neutral-600);\n font-family: var(--font-inter);\n font-weight: var(--weight-regular);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n text-align: left;\n margin: 0;\n margin-top: var(--spacing-xxs);\n}\n\n/* ==========================================================================\n ACCESSIBILITY\n ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .toggle-switch,\n .toggle-button {\n transition: none;\n }\n}\n\n@media (prefers-contrast: high) {\n .toggle-switch.toggle-unpressed {\n border: 2px solid currentColor;\n }\n\n .toggle-switch.toggle-pressed {\n border: 2px solid currentColor;\n }\n}\n\n.toggle-switch:focus-visible .toggle-button::after {\n content: '';\n position: absolute;\n top: -6px;\n left: -6px;\n right: -6px;\n bottom: -6px;\n border-radius: var(--radius-full);\n background: currentColor;\n opacity: 0.24;\n pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type ToggleSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-toggle',\n styleUrl: 'bh-toggle.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhToggle {\n @AttachInternals() internals!: ElementInternals;\n /**\n * The size of the toggle\n */\n @Prop() size: ToggleSize = 'md';\n\n /**\n * Whether to show the label and supporting text\n */\n @Prop() showText: boolean = false;\n\n /**\n * The label text\n */\n @Prop() label: string = '';\n\n /**\n * Supporting text below the label\n */\n @Prop() supportingText: string = '';\n\n /**\n * Whether the toggle is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the toggle is checked (controlled mode)\n */\n @Prop({ mutable: true }) checked: boolean = false;\n\n /**\n * Name attribute for form submission\n */\n @Prop() name: string = '';\n\n /**\n * Value when checked (default: 'on')\n */\n @Prop() value: string = 'on';\n\n /**\n * Whether the toggle is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Default checked state for form reset\n */\n @Prop() defaultChecked: boolean = false;\n\n /**\n * Internal focus state\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal hover state\n */\n @State() isHovered: boolean = false;\n\n /**\n * Emitted when the toggle state changes\n */\n @Event() bhChange!: EventEmitter<boolean>;\n\n componentDidLoad() {\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n formResetCallback() {\n this.checked = this.defaultChecked;\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleToggle = (): void => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n this.bhChange.emit(this.checked);\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleToggle();\n }\n };\n\n private handleMouseEnter = (): void => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = (): void => {\n this.isHovered = false;\n };\n\n private handleFocus = (): void => {\n this.isFocused = true;\n };\n\n private handleBlur = (): void => {\n this.isFocused = false;\n };\n\n render() {\n const wrapperClasses = {\n 'toggle-wrapper': true,\n 'toggle-with-text': this.showText,\n [`toggle-size-${this.size}`]: true,\n };\n\n const switchClasses = {\n 'toggle-switch': true,\n 'toggle-pressed': this.checked,\n 'toggle-unpressed': !this.checked,\n [`toggle-${this.size}`]: true,\n 'toggle-disabled': this.disabled,\n 'toggle-focus': this.isFocused && !this.disabled,\n 'toggle-hover': this.isHovered && !this.disabled,\n };\n\n const buttonClasses = {\n 'toggle-button': true,\n 'toggle-button-pressed': this.checked,\n 'toggle-button-unpressed': !this.checked,\n [`toggle-button-${this.size}`]: true,\n 'toggle-button-disabled': this.disabled,\n };\n\n const labelClasses = {\n 'toggle-label': true,\n [`toggle-label-${this.size}`]: true,\n };\n\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n <div\n class={switchClasses}\n onClick={this.handleToggle}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n tabIndex={this.disabled ? -1 : 0}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-label={this.label || undefined}\n part=\"switch\"\n >\n <div class={buttonClasses} part=\"button\"></div>\n </div>\n\n {this.showText && (this.label || this.supportingText) && (\n <div class=\"toggle-text\">\n {this.label && (\n <span class={labelClasses}>{this.label}</span>\n )}\n {this.supportingText && (\n <div class=\"toggle-supporting-text\">{this.supportingText}</div>\n )}\n </div>\n )}\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|