@actabldesign/bellhop-core 0.0.7 → 0.0.12
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 +132 -33
- package/components/bh-accordion-item.js +1 -1
- package/components/bh-avatar-add.js +1 -1
- package/components/bh-avatar-stacked.js +3 -3
- package/components/bh-avatar.js +1 -1
- package/components/bh-button.js +1 -1
- package/components/bh-card-header.js +1 -1
- package/components/bh-card.js +1 -1
- package/components/bh-checkbox-group-item.js +5 -5
- package/components/bh-checkbox.js +1 -1
- package/components/bh-data-grid.js +140 -67
- package/components/bh-data-grid.js.map +1 -1
- package/components/bh-date-picker-content.js +1 -1
- package/components/bh-date-picker.js +24 -19
- package/components/bh-date-picker.js.map +1 -1
- package/components/bh-date-range-picker-content.js +1 -1
- package/components/bh-date-range-picker.js +9 -9
- package/components/bh-dropdown-menu.js +1 -1
- package/components/bh-dropdown.js +1 -1
- package/components/bh-empty-state.js +1 -1
- package/components/bh-featured-icon.js +1 -1
- package/components/bh-illustrations.js +3 -3
- package/components/bh-input-autocomplete.js +7 -7
- package/components/bh-input-number.js +3 -3
- package/components/bh-input-password.js +3 -3
- package/components/bh-input-text.js +1 -1
- package/components/bh-input-verification.js +3 -3
- package/components/bh-label.js +1 -1
- package/components/bh-logo-box.js +1 -1
- package/components/bh-modal-actions.js +2 -2
- package/components/bh-modal-header.js +5 -5
- package/components/bh-month-picker-content.js +1 -1
- package/components/bh-month-picker.js +8 -8
- package/components/bh-month-picker.js.map +1 -1
- package/components/bh-nav-item.js +1 -1
- package/components/bh-notification.js +3 -3
- package/components/bh-page-navigation-child.js +1 -1
- package/components/bh-page-navigation-multi-level.js +1 -1
- package/components/bh-page-navigation-single-level.js +1 -1
- package/components/bh-page-navigation.js +5 -5
- package/components/bh-pagination.js +1 -1
- package/components/bh-picker-menu.js +1 -1
- package/components/bh-pie-chart.js +1 -1
- package/components/bh-popover.js +18 -85
- package/components/bh-popover.js.map +1 -1
- package/components/bh-property-switcher.js +1 -1
- package/components/bh-radio-button.js +1 -1
- package/components/bh-sidebar.js +18 -7
- package/components/bh-sidebar.js.map +1 -1
- package/components/bh-skeleton-loader.js +1 -1
- package/components/bh-tab-item.js +2 -2
- package/components/bh-tabs.js +1 -1
- package/components/bh-tag.js +1 -1
- package/components/bh-textarea.js +3 -3
- package/components/bh-toggle.js +1 -1
- package/components/bh-tooltip.js +1 -1
- package/components/bh-trend-chart.js +2 -2
- package/components/index.d.ts +0 -4
- package/components/index.js +0 -2
- package/components/index.js.map +1 -1
- package/components/{p-8bOZFmdg.js → p--S10V0sf.js} +5 -5
- package/components/p--S10V0sf.js.map +1 -0
- package/components/{p-BLCjD0ux.js → p-7nrZFsG8.js} +3 -3
- package/components/{p-BLCjD0ux.js.map → p-7nrZFsG8.js.map} +1 -1
- package/components/{p-C_wf2KGn.js → p-B0ADeWoj.js} +3 -3
- package/components/{p-C_wf2KGn.js.map → p-B0ADeWoj.js.map} +1 -1
- package/components/{p-D9aamyuM.js → p-BEm39SYP.js} +4 -4
- package/components/{p-D9aamyuM.js.map → p-BEm39SYP.js.map} +1 -1
- package/components/{p-BkK6rWZn.js → p-BYRvQ4u7.js} +4 -4
- package/components/{p-BkK6rWZn.js.map → p-BYRvQ4u7.js.map} +1 -1
- package/components/{p-D0Ba0gOA.js → p-BqYBdZ7I.js} +4 -4
- package/components/{p-D0Ba0gOA.js.map → p-BqYBdZ7I.js.map} +1 -1
- package/components/{p-Df8KgHhe.js → p-BrIid8rr.js} +3 -3
- package/components/{p-Df8KgHhe.js.map → p-BrIid8rr.js.map} +1 -1
- package/components/p-BsHlTsAN.js.map +1 -1
- package/components/{p-Npcwl1Z8.js → p-CDmCw7LX.js} +4 -4
- package/components/p-CDmCw7LX.js.map +1 -0
- package/components/{p-BQKx1tGq.js → p-CHYn9whC.js} +6 -6
- package/components/p-CHYn9whC.js.map +1 -0
- package/components/{p-CdwyUif-.js → p-CNwZh1xz.js} +5 -5
- package/components/p-CNwZh1xz.js.map +1 -0
- package/components/{p-B02xFf1P.js → p-CiEBtN9j.js} +3 -3
- package/components/{p-B02xFf1P.js.map → p-CiEBtN9j.js.map} +1 -1
- package/components/{p-Cmo_S3fO.js → p-CiZSLZTA.js} +4 -4
- package/components/{p-Cmo_S3fO.js.map → p-CiZSLZTA.js.map} +1 -1
- package/components/{p-DYC2IZEs.js → p-CmEb-mj5.js} +6 -6
- package/components/{p-DYC2IZEs.js.map → p-CmEb-mj5.js.map} +1 -1
- package/components/{p-Do29ZTL9.js → p-CppjlSaO.js} +3 -3
- package/components/{p-Do29ZTL9.js.map → p-CppjlSaO.js.map} +1 -1
- package/components/{p-D3FuyNC4.js → p-CyFUHAY1.js} +7 -7
- package/components/{p-D3FuyNC4.js.map → p-CyFUHAY1.js.map} +1 -1
- package/components/{p-B0vRPcr5.js → p-D8L5XpBP.js} +3 -3
- package/components/{p-B0vRPcr5.js.map → p-D8L5XpBP.js.map} +1 -1
- package/components/p-DH86TJ99.js +232 -0
- package/components/p-DH86TJ99.js.map +1 -0
- package/components/{p-BJLHKnwL.js → p-DVBd-54W.js} +5 -5
- package/components/{p-BJLHKnwL.js.map → p-DVBd-54W.js.map} +1 -1
- package/components/{p-CMoGgYqw.js → p-DmELCHDa.js} +3 -3
- package/components/p-DmELCHDa.js.map +1 -0
- package/components/{p-Bu0BcHwL.js → p-Du_cCBR7.js} +6 -6
- package/components/{p-Bu0BcHwL.js.map → p-Du_cCBR7.js.map} +1 -1
- package/components/{p-h6juyPoa.js → p-JJSN-gZI.js} +3 -3
- package/components/{p-h6juyPoa.js.map → p-JJSN-gZI.js.map} +1 -1
- package/components/{p-wPu4WTba.js → p-dsE158cF.js} +3 -3
- package/components/{p-wPu4WTba.js.map → p-dsE158cF.js.map} +1 -1
- package/components/{p-C0fcjlnS.js → p-eYcfeTFU.js} +3 -3
- package/components/{p-C0fcjlnS.js.map → p-eYcfeTFU.js.map} +1 -1
- package/components/{p-BSok41i-.js → p-oyeucMe6.js} +3 -3
- package/components/{p-BSok41i-.js.map → p-oyeucMe6.js.map} +1 -1
- package/dist/bellhop-core/bellhop-core.esm.js +1 -1
- package/dist/bellhop-core/bellhop-core.esm.js.map +1 -1
- package/dist/bellhop-core/bh-avatar.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-button.bh-loader-spinner.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-data-grid.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-date-picker-content.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-date-picker.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-empty-state.bh-pagination.bh-skeleton-loader.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-input-text.bh-picker-menu.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-label.bh-tooltip.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-month-picker-content.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-month-picker.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-popover.entry.esm.js.map +1 -1
- package/dist/bellhop-core/bh-sidebar.entry.esm.js.map +1 -1
- package/dist/bellhop-core/index.esm.js +1 -1
- package/dist/bellhop-core/index.esm.js.map +1 -1
- package/dist/bellhop-core/{p-Ck1gRAmI.js → p-04a00da6.entry.js} +2 -2
- package/dist/bellhop-core/p-04a00da6.entry.js.map +1 -0
- package/dist/bellhop-core/{p-bd00d5ad.entry.js → p-06b0ba5f.entry.js} +2 -2
- package/dist/bellhop-core/{p-4a8844ff.entry.js → p-0a232a85.entry.js} +2 -2
- package/dist/bellhop-core/p-0d5ce369.entry.js +13 -0
- package/dist/bellhop-core/p-0d5ce369.entry.js.map +1 -0
- package/dist/bellhop-core/{p-67956598.entry.js → p-0e773f4b.entry.js} +2 -2
- package/dist/bellhop-core/{p-df4498cd.entry.js → p-11e84742.entry.js} +2 -2
- package/dist/bellhop-core/{p-a41b3673.entry.js → p-20e65b2b.entry.js} +2 -2
- package/dist/bellhop-core/{p-a30e22f7.entry.js → p-2349cd39.entry.js} +2 -2
- package/dist/bellhop-core/{p-3a1c52a9.entry.js → p-2cc352e8.entry.js} +2 -2
- package/dist/bellhop-core/{p-defe9916.entry.js → p-31f60dac.entry.js} +2 -2
- package/dist/bellhop-core/{p-defe9916.entry.js.map → p-31f60dac.entry.js.map} +1 -1
- package/dist/bellhop-core/{p-f85a9eaa.entry.js → p-439f8477.entry.js} +2 -2
- package/dist/bellhop-core/{p-a42e8ddb.entry.js → p-4bc0e720.entry.js} +2 -2
- package/dist/bellhop-core/{p-a42e8ddb.entry.js.map → p-4bc0e720.entry.js.map} +1 -1
- package/dist/bellhop-core/{p-21bc4f77.entry.js → p-4cf74f24.entry.js} +2 -2
- package/dist/bellhop-core/p-53dbd8bd.entry.js +2 -0
- package/dist/bellhop-core/p-53dbd8bd.entry.js.map +1 -0
- package/dist/bellhop-core/p-59e4c008.entry.js +2 -0
- package/dist/bellhop-core/p-59e4c008.entry.js.map +1 -0
- package/dist/bellhop-core/{p-62235d6e.entry.js → p-5a0b2d81.entry.js} +2 -2
- package/dist/bellhop-core/{p-07c9b7fa.entry.js → p-6626f089.entry.js} +2 -2
- package/dist/bellhop-core/{p-36166900.entry.js → p-6b428841.entry.js} +2 -2
- package/dist/bellhop-core/{p-6bc81ebb.entry.js → p-6d4c6b6f.entry.js} +2 -2
- package/dist/bellhop-core/{p-c0e36166.entry.js → p-6dad737e.entry.js} +2 -2
- package/dist/bellhop-core/{p-5c4f74b8.entry.js → p-738f24c8.entry.js} +2 -2
- package/dist/bellhop-core/{p-49edd1bb.entry.js → p-7534a8d4.entry.js} +2 -2
- package/dist/bellhop-core/p-7b0a4c99.entry.js +2 -0
- package/dist/bellhop-core/{p-7a85db89.entry.js.map → p-7b0a4c99.entry.js.map} +1 -1
- package/dist/bellhop-core/{p-7b0cba50.entry.js → p-84ecaf3b.entry.js} +2 -2
- package/dist/bellhop-core/{p-DY76Ee-p.js → p-940af1e0.entry.js} +2 -2
- package/dist/bellhop-core/p-940af1e0.entry.js.map +1 -0
- package/dist/bellhop-core/p-c0dfca99.entry.js +2 -0
- package/dist/bellhop-core/{p-4e483d25.entry.js.map → p-c0dfca99.entry.js.map} +1 -1
- package/dist/bellhop-core/{p-d5bf49ab.entry.js → p-cad28e7e.entry.js} +2 -2
- package/dist/bellhop-core/{p-1540001e.entry.js → p-cb0e4e35.entry.js} +2 -2
- package/dist/bellhop-core/{p-091171da.entry.js → p-ce2aaf37.entry.js} +2 -2
- package/dist/bellhop-core/p-d64525f4.entry.js +2 -0
- package/dist/bellhop-core/p-d64525f4.entry.js.map +1 -0
- package/dist/bellhop-core/p-e0f7b6d1.entry.js +2 -0
- package/dist/bellhop-core/p-e0f7b6d1.entry.js.map +1 -0
- package/dist/bellhop-core/{p-b0dda4df.entry.js → p-e83a86d6.entry.js} +2 -2
- package/dist/bellhop-core/{p-2db7990e.entry.js → p-e96e5aa3.entry.js} +2 -2
- package/dist/bellhop-core/{p-c70d11a2.entry.js → p-ed780663.entry.js} +2 -2
- package/dist/bellhop-core/p-f30af956.entry.js +2 -0
- package/dist/bellhop-core/{p-ffb29d95.entry.js.map → p-f30af956.entry.js.map} +1 -1
- package/dist/bellhop-core/{p-0e34250c.entry.js → p-f4dd33af.entry.js} +2 -2
- package/dist/bellhop-core/{p-1be3e908.entry.js → p-fe7d5dcb.entry.js} +2 -2
- package/dist/bellhop-core/p-nAAobRRQ.js.map +1 -1
- package/dist/cjs/bellhop-core.cjs.js +1 -1
- package/dist/cjs/bellhop-core.cjs.js.map +1 -1
- package/dist/cjs/bh-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/bh-autocomplete-menu_2.cjs.entry.js +1 -1
- package/dist/cjs/bh-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bh-avatar.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-button.bh-loader-spinner.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-button_2.cjs.entry.js +110 -2
- package/dist/cjs/bh-card.cjs.entry.js +1 -1
- package/dist/cjs/bh-data-grid.cjs.entry.js +132 -59
- package/dist/cjs/bh-data-grid.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-date-picker-content.cjs.entry.js +2 -2
- package/dist/cjs/bh-date-picker-content.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-date-picker.cjs.entry.js +15 -12
- package/dist/cjs/bh-date-picker.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-date-range-picker-content.cjs.entry.js +1 -1
- package/dist/cjs/bh-date-range-picker.cjs.entry.js +1 -1
- package/dist/cjs/bh-dropdown_3.cjs.entry.js +4 -4
- package/dist/cjs/bh-empty-state.bh-pagination.bh-skeleton-loader.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-empty-state_3.cjs.entry.js +199 -6
- package/dist/cjs/bh-featured-icon.cjs.entry.js +1 -1
- package/dist/cjs/bh-illustrations.cjs.entry.js +3 -3
- package/dist/cjs/bh-input-autocomplete.cjs.entry.js +2 -2
- package/dist/cjs/bh-input-number.cjs.entry.js +1 -1
- package/dist/cjs/bh-input-password.cjs.entry.js +1 -1
- package/dist/cjs/bh-input-text.bh-picker-menu.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-input-text_2.cjs.entry.js +2 -2
- package/dist/cjs/bh-input-verification.cjs.entry.js +1 -1
- package/dist/cjs/bh-label.bh-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-label_2.cjs.entry.js +104 -3
- package/dist/cjs/bh-modal-actions.cjs.entry.js +1 -1
- package/dist/cjs/bh-modal-header.cjs.entry.js +4 -4
- package/dist/cjs/bh-month-picker-content.cjs.entry.js +2 -2
- package/dist/cjs/bh-month-picker-content.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-month-picker.cjs.entry.js +2 -2
- package/dist/cjs/bh-month-picker.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-notification.cjs.entry.js +1 -1
- package/dist/cjs/bh-page-navigation-child.cjs.entry.js +1 -1
- package/dist/cjs/bh-page-navigation-multi-level_2.cjs.entry.js +3 -3
- package/dist/cjs/bh-page-navigation.cjs.entry.js +1 -1
- package/dist/cjs/bh-pie-chart.cjs.entry.js +1 -1
- package/dist/cjs/bh-popover.cjs.entry.js +14 -76
- package/dist/cjs/bh-popover.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-property-switcher.cjs.entry.js +1 -1
- package/dist/cjs/bh-sidebar.cjs.entry.js +10 -1
- package/dist/cjs/bh-sidebar.entry.cjs.js.map +1 -1
- package/dist/cjs/bh-tab-item.cjs.entry.js +2 -2
- package/dist/cjs/bh-tabs.cjs.entry.js +1 -1
- package/dist/cjs/bh-textarea.cjs.entry.js +1 -1
- package/dist/cjs/bh-toggle.cjs.entry.js +1 -1
- package/dist/cjs/bh-trend-chart.cjs.entry.js +2 -2
- package/dist/cjs/index-DQwSUT6k.js +42 -50
- package/dist/cjs/index-DQwSUT6k.js.map +1 -1
- package/dist/cjs/index.cjs.js +0 -31
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -3
- package/dist/collection/components/bh-accordion/bh-accordion.js +1 -1
- package/dist/collection/components/bh-accordion-item/bh-accordion-item.js +1 -1
- package/dist/collection/components/bh-appbar/bh-appbar.js +2 -2
- package/dist/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.js +2 -2
- package/dist/collection/components/bh-avatar/bh-avatar.css +0 -1
- package/dist/collection/components/bh-avatar/bh-avatar.js +3 -3
- package/dist/collection/components/bh-avatar-add/bh-avatar-add.js +1 -1
- package/dist/collection/components/bh-avatar-stacked/bh-avatar-stacked.js +1 -1
- package/dist/collection/components/bh-badge/bh-badge.js +3 -3
- package/dist/collection/components/bh-badge-dot/bh-badge-dot.js +2 -2
- package/dist/collection/components/bh-bar-chart/bh-bar-chart.js +3 -3
- package/dist/collection/components/bh-breadcrumbs/bh-breadcrumbs.js +2 -2
- package/dist/collection/components/bh-button/bh-button.js +7 -7
- package/dist/collection/components/bh-button/bh-button.js.map +1 -1
- package/dist/collection/components/bh-button-icon/bh-button-icon.js +3 -3
- package/dist/collection/components/bh-card/bh-card.js +1 -1
- package/dist/collection/components/bh-card-footer/bh-card-footer.js +1 -1
- package/dist/collection/components/bh-card-header/bh-card-header.js +2 -2
- package/dist/collection/components/bh-chart-tooltip/bh-chart-tooltip.js +1 -1
- package/dist/collection/components/bh-checkbox/bh-checkbox.js +1 -1
- package/dist/collection/components/bh-checkbox-group/bh-checkbox-group.js +1 -1
- package/dist/collection/components/bh-checkbox-group-item/bh-checkbox-group-item.js +2 -2
- package/dist/collection/components/bh-data-grid/bh-data-grid.css +86 -68
- package/dist/collection/components/bh-data-grid/bh-data-grid.js +132 -59
- package/dist/collection/components/bh-data-grid/bh-data-grid.js.map +1 -1
- package/dist/collection/components/bh-date-picker/bh-date-picker.css +24 -214
- package/dist/collection/components/bh-date-picker/bh-date-picker.js +22 -12
- package/dist/collection/components/bh-date-picker/bh-date-picker.js.map +1 -1
- package/dist/collection/components/bh-date-picker-content/bh-date-picker-content.css +0 -206
- package/dist/collection/components/bh-date-picker-content/bh-date-picker-content.js +7 -7
- package/dist/collection/components/bh-date-range-picker/bh-date-range-picker.js +2 -2
- package/dist/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.js +4 -4
- package/dist/collection/components/bh-dropdown/bh-dropdown.js +5 -5
- package/dist/collection/components/bh-dropdown-menu/bh-dropdown-menu.js +3 -3
- package/dist/collection/components/bh-empty-state/bh-empty-state.js +2 -2
- package/dist/collection/components/bh-featured-icon/bh-featured-icon.js +4 -4
- package/dist/collection/components/bh-illustrations/bh-illustrations.js +4 -4
- package/dist/collection/components/bh-input-autocomplete/bh-input-autocomplete.js +3 -3
- package/dist/collection/components/bh-input-number/bh-input-number.js +1 -1
- package/dist/collection/components/bh-input-password/bh-input-password.js +1 -1
- package/dist/collection/components/bh-input-text/bh-input-text.js +1 -1
- package/dist/collection/components/bh-input-verification/bh-input-verification.js +3 -3
- package/dist/collection/components/bh-label/bh-label.js +1 -1
- package/dist/collection/components/bh-loader-spinner/bh-loader-spinner.js +2 -2
- package/dist/collection/components/bh-logo-box/bh-logo-box.js +2 -2
- package/dist/collection/components/bh-modal/bh-modal.js +1 -1
- package/dist/collection/components/bh-modal-actions/bh-modal-actions.js +2 -2
- package/dist/collection/components/bh-modal-header/bh-modal-header.js +4 -4
- package/dist/collection/components/bh-month-picker/bh-month-picker.css +0 -206
- package/dist/collection/components/bh-month-picker/bh-month-picker.js +2 -2
- package/dist/collection/components/bh-month-picker-content/bh-month-picker-content.css +0 -206
- package/dist/collection/components/bh-month-picker-content/bh-month-picker-content.js +5 -5
- package/dist/collection/components/bh-notification/bh-notification.js +2 -2
- package/dist/collection/components/bh-page-navigation/bh-page-navigation.js +2 -2
- package/dist/collection/components/bh-page-navigation-child/bh-page-navigation-child.js +1 -1
- package/dist/collection/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.js +3 -3
- package/dist/collection/components/bh-page-navigation-single-level/bh-page-navigation-single-level.js +1 -1
- package/dist/collection/components/bh-pagination/bh-pagination.css +122 -58
- package/dist/collection/components/bh-pagination/bh-pagination.js +74 -30
- package/dist/collection/components/bh-pagination/bh-pagination.js.map +1 -1
- package/dist/collection/components/bh-picker-menu/bh-picker-menu.css +1 -3
- package/dist/collection/components/bh-pie-chart/bh-pie-chart.js +3 -3
- package/dist/collection/components/bh-popover/bh-popover.css +77 -260
- package/dist/collection/components/bh-popover/bh-popover.js +33 -238
- package/dist/collection/components/bh-popover/bh-popover.js.map +1 -1
- package/dist/collection/components/bh-product-switcher/bh-product-switcher.js +3 -3
- package/dist/collection/components/bh-property-switcher/bh-property-switcher.js +3 -3
- package/dist/collection/components/bh-radio-button/bh-radio-button.js +1 -1
- package/dist/collection/components/bh-sidebar/bh-nav-item.js +1 -1
- package/dist/collection/components/bh-sidebar/bh-sidebar.js +54 -4
- package/dist/collection/components/bh-sidebar/bh-sidebar.js.map +1 -1
- package/dist/collection/components/bh-skeleton-loader/bh-skeleton-loader.css +9 -22
- package/dist/collection/components/bh-skeleton-loader/bh-skeleton-loader.js +2 -2
- package/dist/collection/components/bh-skeleton-loader/bh-skeleton-loader.js.map +1 -1
- package/dist/collection/components/bh-tab-item/bh-tab-item.js +2 -2
- package/dist/collection/components/bh-tabs/bh-tabs.js +3 -3
- package/dist/collection/components/bh-tag/bh-tag.js +3 -3
- package/dist/collection/components/bh-textarea/bh-textarea.js +2 -2
- package/dist/collection/components/bh-toggle/bh-toggle.js +2 -2
- package/dist/collection/components/bh-tooltip/bh-tooltip.js +3 -3
- package/dist/collection/components/bh-trend-chart/bh-trend-chart.js +4 -4
- package/dist/collection/index.js +1 -23
- package/dist/collection/index.js.map +1 -1
- package/dist/esm/bellhop-core.js +1 -1
- package/dist/esm/bellhop-core.js.map +1 -1
- package/dist/esm/bh-accordion-item.entry.js +1 -1
- package/dist/esm/bh-autocomplete-menu_2.entry.js +1 -1
- package/dist/esm/bh-avatar.entry.js +1 -1
- package/dist/esm/bh-avatar.entry.js.map +1 -1
- package/dist/esm/bh-button.bh-loader-spinner.entry.js.map +1 -1
- package/dist/esm/bh-button_2.entry.js +111 -3
- package/dist/esm/bh-card.entry.js +1 -1
- package/dist/esm/bh-data-grid.entry.js +132 -59
- package/dist/esm/bh-data-grid.entry.js.map +1 -1
- package/dist/esm/bh-date-picker-content.entry.js +2 -2
- package/dist/esm/bh-date-picker-content.entry.js.map +1 -1
- package/dist/esm/bh-date-picker.entry.js +16 -13
- package/dist/esm/bh-date-picker.entry.js.map +1 -1
- package/dist/esm/bh-date-range-picker-content.entry.js +1 -1
- package/dist/esm/bh-date-range-picker.entry.js +1 -1
- package/dist/esm/bh-dropdown_3.entry.js +4 -4
- package/dist/esm/bh-empty-state.bh-pagination.bh-skeleton-loader.entry.js.map +1 -1
- package/dist/esm/bh-empty-state_3.entry.js +199 -6
- package/dist/esm/bh-featured-icon.entry.js +1 -1
- package/dist/esm/bh-illustrations.entry.js +3 -3
- package/dist/esm/bh-input-autocomplete.entry.js +2 -2
- package/dist/esm/bh-input-number.entry.js +1 -1
- package/dist/esm/bh-input-password.entry.js +1 -1
- package/dist/esm/bh-input-text.bh-picker-menu.entry.js.map +1 -1
- package/dist/esm/bh-input-text_2.entry.js +2 -2
- package/dist/esm/bh-input-verification.entry.js +1 -1
- package/dist/esm/bh-label.bh-tooltip.entry.js.map +1 -1
- package/dist/esm/bh-label_2.entry.js +105 -4
- package/dist/esm/bh-modal-actions.entry.js +1 -1
- package/dist/esm/bh-modal-header.entry.js +4 -4
- package/dist/esm/bh-month-picker-content.entry.js +2 -2
- package/dist/esm/bh-month-picker-content.entry.js.map +1 -1
- package/dist/esm/bh-month-picker.entry.js +2 -2
- package/dist/esm/bh-month-picker.entry.js.map +1 -1
- package/dist/esm/bh-notification.entry.js +1 -1
- package/dist/esm/bh-page-navigation-child.entry.js +1 -1
- package/dist/esm/bh-page-navigation-multi-level_2.entry.js +3 -3
- package/dist/esm/bh-page-navigation.entry.js +1 -1
- package/dist/esm/bh-pie-chart.entry.js +1 -1
- package/dist/esm/bh-popover.entry.js +15 -77
- package/dist/esm/bh-popover.entry.js.map +1 -1
- package/dist/esm/bh-property-switcher.entry.js +1 -1
- package/dist/esm/bh-sidebar.entry.js +10 -1
- package/dist/esm/bh-sidebar.entry.js.map +1 -1
- package/dist/esm/bh-tab-item.entry.js +2 -2
- package/dist/esm/bh-tabs.entry.js +1 -1
- package/dist/esm/bh-textarea.entry.js +1 -1
- package/dist/esm/bh-toggle.entry.js +1 -1
- package/dist/esm/bh-trend-chart.entry.js +2 -2
- package/dist/esm/index-nAAobRRQ.js +42 -50
- package/dist/esm/index-nAAobRRQ.js.map +1 -1
- package/dist/esm/index.js +1 -15
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/bh-date-picker/bh-date-picker.d.ts +11 -1
- package/dist/types/components/bh-pagination/bh-pagination.d.ts +7 -7
- package/dist/types/components/bh-popover/bh-popover.d.ts +9 -49
- package/dist/types/components/bh-sidebar/bh-sidebar.d.ts +9 -0
- package/dist/types/components.d.ts +61 -193
- package/dist/types/index.d.ts +13 -13
- package/hydrate/index.js +294 -297
- package/hydrate/index.mjs +294 -297
- package/llms.txt +22000 -1428
- package/package.json +1 -1
- package/components/bh-container-footer.d.ts +0 -11
- package/components/bh-container-footer.js +0 -73
- package/components/bh-container-footer.js.map +0 -1
- package/components/bh-container.d.ts +0 -11
- package/components/bh-container.js +0 -48
- package/components/bh-container.js.map +0 -1
- package/components/p-8bOZFmdg.js.map +0 -1
- package/components/p-BQKx1tGq.js.map +0 -1
- package/components/p-CMoGgYqw.js.map +0 -1
- package/components/p-CdwyUif-.js.map +0 -1
- package/components/p-Npcwl1Z8.js.map +0 -1
- package/components/p-WibqGBGu.js +0 -182
- package/components/p-WibqGBGu.js.map +0 -1
- package/dist/bellhop-core/bh-container-footer.entry.esm.js.map +0 -1
- package/dist/bellhop-core/bh-container.entry.esm.js.map +0 -1
- package/dist/bellhop-core/p-233540f9.entry.js +0 -13
- package/dist/bellhop-core/p-233540f9.entry.js.map +0 -1
- package/dist/bellhop-core/p-3194a87d.entry.js +0 -2
- package/dist/bellhop-core/p-3194a87d.entry.js.map +0 -1
- package/dist/bellhop-core/p-43c41dfb.entry.js +0 -2
- package/dist/bellhop-core/p-43c41dfb.entry.js.map +0 -1
- package/dist/bellhop-core/p-4e483d25.entry.js +0 -2
- package/dist/bellhop-core/p-5514d7fb.entry.js +0 -2
- package/dist/bellhop-core/p-5514d7fb.entry.js.map +0 -1
- package/dist/bellhop-core/p-7a85db89.entry.js +0 -2
- package/dist/bellhop-core/p-80e07b3d.entry.js +0 -2
- package/dist/bellhop-core/p-80e07b3d.entry.js.map +0 -1
- package/dist/bellhop-core/p-8962e1a6.entry.js +0 -2
- package/dist/bellhop-core/p-8962e1a6.entry.js.map +0 -1
- package/dist/bellhop-core/p-9a19cbf7.entry.js +0 -2
- package/dist/bellhop-core/p-9a19cbf7.entry.js.map +0 -1
- package/dist/bellhop-core/p-CSYwm_Ke.js +0 -2
- package/dist/bellhop-core/p-CSYwm_Ke.js.map +0 -1
- package/dist/bellhop-core/p-Ck1gRAmI.js.map +0 -1
- package/dist/bellhop-core/p-DY76Ee-p.js.map +0 -1
- package/dist/bellhop-core/p-b878539a.entry.js +0 -2
- package/dist/bellhop-core/p-b878539a.entry.js.map +0 -1
- package/dist/bellhop-core/p-c33f6e73.entry.js +0 -2
- package/dist/bellhop-core/p-c33f6e73.entry.js.map +0 -1
- package/dist/bellhop-core/p-ffb29d95.entry.js +0 -2
- package/dist/cjs/bh-button-DD0c0ODJ.js +0 -117
- package/dist/cjs/bh-button-DD0c0ODJ.js.map +0 -1
- package/dist/cjs/bh-container-footer.cjs.entry.js +0 -38
- package/dist/cjs/bh-container-footer.entry.cjs.js.map +0 -1
- package/dist/cjs/bh-container.cjs.entry.js +0 -26
- package/dist/cjs/bh-container.entry.cjs.js.map +0 -1
- package/dist/cjs/bh-label-MpXjm9k0.js +0 -110
- package/dist/cjs/bh-label-MpXjm9k0.js.map +0 -1
- package/dist/cjs/bh-pagination-CgER63yz.js +0 -152
- package/dist/cjs/bh-pagination-CgER63yz.js.map +0 -1
- package/dist/collection/components/bh-container/bh-container.css +0 -21
- package/dist/collection/components/bh-container/bh-container.js +0 -51
- package/dist/collection/components/bh-container/bh-container.js.map +0 -1
- package/dist/collection/components/bh-container-footer/bh-container-footer.css +0 -22
- package/dist/collection/components/bh-container-footer/bh-container-footer.js +0 -106
- package/dist/collection/components/bh-container-footer/bh-container-footer.js.map +0 -1
- package/dist/esm/bh-button-ImGVvXaj.js +0 -115
- package/dist/esm/bh-button-ImGVvXaj.js.map +0 -1
- package/dist/esm/bh-container-footer.entry.js +0 -36
- package/dist/esm/bh-container-footer.entry.js.map +0 -1
- package/dist/esm/bh-container.entry.js +0 -24
- package/dist/esm/bh-container.entry.js.map +0 -1
- package/dist/esm/bh-label-PLT7t4We.js +0 -108
- package/dist/esm/bh-label-PLT7t4We.js.map +0 -1
- package/dist/esm/bh-pagination-CUeRSYsV.js +0 -150
- package/dist/esm/bh-pagination-CUeRSYsV.js.map +0 -1
- package/dist/types/components/bh-container/bh-container.d.ts +0 -7
- package/dist/types/components/bh-container-footer/bh-container-footer.d.ts +0 -18
- /package/dist/bellhop-core/{p-bd00d5ad.entry.js.map → p-06b0ba5f.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-4a8844ff.entry.js.map → p-0a232a85.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-67956598.entry.js.map → p-0e773f4b.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-df4498cd.entry.js.map → p-11e84742.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-a41b3673.entry.js.map → p-20e65b2b.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-a30e22f7.entry.js.map → p-2349cd39.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-3a1c52a9.entry.js.map → p-2cc352e8.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-f85a9eaa.entry.js.map → p-439f8477.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-21bc4f77.entry.js.map → p-4cf74f24.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-62235d6e.entry.js.map → p-5a0b2d81.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-07c9b7fa.entry.js.map → p-6626f089.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-36166900.entry.js.map → p-6b428841.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-6bc81ebb.entry.js.map → p-6d4c6b6f.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-c0e36166.entry.js.map → p-6dad737e.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-5c4f74b8.entry.js.map → p-738f24c8.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-49edd1bb.entry.js.map → p-7534a8d4.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-7b0cba50.entry.js.map → p-84ecaf3b.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-d5bf49ab.entry.js.map → p-cad28e7e.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-1540001e.entry.js.map → p-cb0e4e35.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-091171da.entry.js.map → p-ce2aaf37.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-b0dda4df.entry.js.map → p-e83a86d6.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-2db7990e.entry.js.map → p-e96e5aa3.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-c70d11a2.entry.js.map → p-ed780663.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-0e34250c.entry.js.map → p-f4dd33af.entry.js.map} +0 -0
- /package/dist/bellhop-core/{p-1be3e908.entry.js.map → p-fe7d5dcb.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BYRvQ4u7.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ynFAAynF;;MCU7nF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAER,OAAO,GAAe,WAAW;;IAGjC,IAAI,GAAY,IAAI;;IAGpB,KAAK,GAAW,OAAO;;IAGvB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGzB,QAAQ,GAAW,GAAG;;IAGtB,SAAS,GAAW,EAAE;;IAGrB,YAAY,GAAY,KAAK;;AAG7B,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;aAC1B,EAAE,GAAG,CAAC;;AAEX,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC;AAED,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,OAAO,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G,EAGD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAA,EACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH,EAGL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,SAAS,EAAA,EAEpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EAAA,OAAA,CAEjD,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* Tag Base Styles */\n:host {\n display: inline-block;\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-sm);\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n background-color: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-sm);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n padding: var(--spacing-xs) var(--spacing-lg);\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n color: var(--color-neutral-700);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: var(--spacing-xxs);\n border-radius: var(--radius-xs);\n transition: background-color 0.2s ease;\n width: var(--spacing-xl);\n height: var(--spacing-xl);\n flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n padding: var(--spacing-xs);\n width: var(--spacing-2xl);\n height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n font-size: var(--text-sm-size);\n color: var(--color-neutral-500);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.8);\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'bh-tag',\n styleUrl: 'bh-tag.css',\n shadow: true,\n})\nexport class BhTag {\n /** Tag variant */\n @Prop() variant: TagVariant = 'text-only';\n\n /** Tag size */\n @Prop() size: TagSize = 'md';\n\n /** Tag label text */\n @Prop() label: string = 'Label';\n\n /** Whether the tag is dismissible */\n @Prop() dismissible: boolean = false;\n\n /** Whether the tag is disabled */\n @Prop() disabled: boolean = false;\n\n /** Maximum width for the label (in pixels) */\n @Prop() maxWidth: number = 120;\n\n /** Avatar image source (for avatar variant) */\n @Prop() avatarSrc: string = '';\n\n /** Internal dismissing state */\n @State() isDismissing: boolean = false;\n\n /** Emitted when dismiss button is clicked */\n @Event() bhDismiss!: EventEmitter<void>;\n\n private handleDismiss = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (this.dismissible && !this.disabled && !this.isDismissing) {\n this.isDismissing = true;\n\n // Simulate animation duration\n setTimeout(() => {\n this.bhDismiss.emit();\n this.isDismissing = false;\n }, 200);\n }\n };\n\n render() {\n const classes = {\n 'tag': true,\n [`tag-${this.size}`]: true,\n [`tag-${this.variant}`]: true,\n 'tag-dismissible': this.dismissible,\n 'tag-disabled': this.disabled,\n 'animate-dismiss': this.isDismissing,\n };\n\n const labelStyle = {\n maxWidth: `${this.maxWidth}px`,\n };\n\n return (\n <span class={classes}>\n <div class=\"tag-content\">\n {/* Avatar variant */}\n {this.variant === 'avatar' && (\n <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n )}\n\n {/* Label */}\n <span class=\"tag-label-wrapper\">\n <span class=\"tag-label\" style={labelStyle}>\n {this.label}\n </span>\n </span>\n </div>\n\n {/* Dismiss button (if dismissible) */}\n {this.dismissible && (\n <button\n class=\"tag-dismiss\"\n onClick={this.handleDismiss}\n disabled={this.disabled}\n type=\"button\"\n aria-label=\"Dismiss\"\n >\n <span class=\"material-symbols-outlined tag-dismiss-icon\">\n close\n </span>\n </button>\n )}\n </span>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-BsHlTsAN.js';
|
|
2
2
|
import { s as syncCheckableFormValue, v as validateRequired } from './p-2KjdCYlS.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-BrIid8rr.js';
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-oyeucMe6.js';
|
|
5
5
|
|
|
6
6
|
const bhCheckboxCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.checkbox-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none;position:relative}.checkbox-wrapper-disabled{cursor:not-allowed}.checkbox{display:inline-flex;align-items:center;justify-content:center;outline:none;user-select:none;transition:all 0.2s ease;box-sizing:border-box;background:var(--color-white);border:2px solid var(--color-neutral-300);position:relative;flex-shrink:0;pointer-events:none}.checkbox-sm{width:16px;height:16px;border-radius:var(--radius-xs);margin-top:3px}.checkbox-md{width:20px;height:20px;border-radius:var(--radius-sm);margin-top:2px}.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md{margin-top:0}.checkbox.checkbox-checked{background:var(--color-brand-600);border-color:var(--color-brand-600);color:var(--color-white)}.checkbox.checkbox-hover:not(.checkbox-disabled){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled){background:var(--color-brand-700);border-color:var(--color-brand-700)}.checkbox.checkbox-focused:not(.checkbox-disabled){border-color:var(--color-neutral-300);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-disabled{background:var(--color-neutral-50);border-color:var(--color-neutral-300);cursor:not-allowed;opacity:1}.checkbox.checkbox-checked.checkbox-disabled{background:var(--color-neutral-50);border:2px solid var(--color-neutral-300);color:var(--color-neutral-300)}.checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);line-height:1;font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20}.checkbox .check-icon{color:var(--color-white)}.checkbox-disabled .check-icon{color:var(--color-neutral-300)}.checkbox .minus-icon{color:var(--color-white)}.checkbox-disabled .minus-icon{color:var(--color-neutral-300)}.checkbox-sm .checkbox-icon{font-size:14px}.checkbox-md .checkbox-icon{font-size:18px}.checkbox-control{display:inline-flex;align-items:flex-start;cursor:pointer}.checkbox-wrapper-disabled .checkbox-control{cursor:not-allowed}";
|
|
7
7
|
|
|
@@ -183,6 +183,6 @@ function defineCustomElement() {
|
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
export { BhCheckbox as B, defineCustomElement as d };
|
|
186
|
-
//# sourceMappingURL=p-
|
|
186
|
+
//# sourceMappingURL=p-BqYBdZ7I.js.map
|
|
187
187
|
|
|
188
|
-
//# sourceMappingURL=p-
|
|
188
|
+
//# sourceMappingURL=p-BqYBdZ7I.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-D0Ba0gOA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox/bh-checkbox.css?tag=bh-checkbox&encapsulation=shadow","src/components/bh-checkbox/bh-checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n CHECKBOX COMPONENT STYLES - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n VISUALLY HIDDEN NATIVE INPUT\n ========================================================================== */\n\n.checkbox-input {\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\n/* ==========================================================================\n WRAPPER STYLES\n ========================================================================== */\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.checkbox-wrapper-disabled {\n cursor: not-allowed;\n}\n\n/* ==========================================================================\n CHECKBOX BOX STYLES\n ========================================================================== */\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n user-select: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n position: relative;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Size Variants */\n.checkbox-sm {\n width: 16px;\n height: 16px;\n border-radius: var(--radius-xs);\n margin-top: 3px;\n}\n\n.checkbox-md {\n width: 20px;\n height: 20px;\n border-radius: var(--radius-sm);\n margin-top: 2px;\n}\n\n/* Remove margin when no label */\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {\n margin-top: 0;\n}\n\n/* State: Checked */\n.checkbox.checkbox-checked {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n color: var(--color-white);\n}\n\n/* State: Hover */\n.checkbox.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n/* State: Focused */\n.checkbox.checkbox-focused:not(.checkbox-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.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-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.checkbox.checkbox-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.checkbox.checkbox-checked.checkbox-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n color: var(--color-neutral-300);\n}\n\n/* ==========================================================================\n ICONS\n ========================================================================== */\n\n.checkbox-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;\n}\n\n.checkbox .check-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .check-icon {\n color: var(--color-neutral-300);\n}\n\n.checkbox .minus-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .minus-icon {\n color: var(--color-neutral-300);\n}\n\n/* Adjust icon sizes for different checkbox sizes */\n.checkbox-sm .checkbox-icon {\n font-size: 14px;\n}\n\n.checkbox-md .checkbox-icon {\n font-size: 18px;\n}\n\n/* ==========================================================================\n CHECKBOX CONTROL WRAPPER\n ========================================================================== */\n\n.checkbox-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n}\n\n.checkbox-wrapper-disabled .checkbox-control {\n cursor: not-allowed;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox',\n styleUrl: 'bh-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhCheckbox {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private inputRef?: HTMLInputElement;\n private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n /** Checkbox size */\n @Prop() size: CheckboxSize = 'md';\n\n /** Checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Indeterminate state */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n\n /** Disabled state */\n @Prop() disabled: boolean = false;\n\n /** Name attribute for form submission */\n @Prop() name: string = '';\n\n /** Value attribute for form submission */\n @Prop() value: string = 'on';\n\n /** Optional label text - when provided, renders checkbox with label */\n @Prop() label: string = '';\n\n /** Optional supporting text below the label */\n @Prop() supportingText: string = '';\n\n /** Whether the checkbox is required */\n @Prop() required: boolean = false;\n\n /** Default checked state for form reset */\n @Prop() defaultChecked: boolean = false;\n\n /** Internal hover state */\n @State() isHovered: boolean = false;\n\n /** Internal focus state */\n @State() isFocused: boolean = false;\n\n /** Emitted when checkbox state changes via user interaction */\n @Event() bhChange!: EventEmitter<boolean>;\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.checked = newValue;\n }\n }\n\n @Watch('indeterminate')\n handleIndeterminateChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.indeterminate = newValue;\n }\n }\n\n componentDidLoad() {\n if (this.inputRef) {\n this.inputRef.indeterminate = this.indeterminate;\n }\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 this.indeterminate = false;\n if (this.inputRef) {\n this.inputRef.checked = this.defaultChecked;\n this.inputRef.indeterminate = false;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n this.checked = false;\n if (this.inputRef) {\n this.inputRef.indeterminate = false;\n this.inputRef.checked = false;\n }\n } else {\n this.checked = input.checked;\n }\n\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 handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleControlClick = () => {\n if (this.disabled) return;\n this.inputRef?.click();\n };\n\n private renderCheckboxControl() {\n const isCheckedState = this.checked || this.indeterminate;\n\n const checkboxClasses = {\n 'checkbox': true,\n [`checkbox-${this.size}`]: true,\n 'checkbox-checked': isCheckedState,\n 'checkbox-disabled': this.disabled,\n 'checkbox-focused': this.isFocused && !this.disabled,\n 'checkbox-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"checkbox-control\"\n onClick={this.handleControlClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"checkbox\"\n id={this.uniqueId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n class=\"checkbox-input\"\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n />\n <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n {this.checked && !this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n check\n </span>\n )}\n {this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n remove\n </span>\n )}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'checkbox-wrapper': true,\n 'checkbox-wrapper-with-label': !!hasLabel,\n 'checkbox-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.renderCheckboxControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone checkbox without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderCheckboxControl()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BqYBdZ7I.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox/bh-checkbox.css?tag=bh-checkbox&encapsulation=shadow","src/components/bh-checkbox/bh-checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n CHECKBOX COMPONENT STYLES - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n VISUALLY HIDDEN NATIVE INPUT\n ========================================================================== */\n\n.checkbox-input {\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\n/* ==========================================================================\n WRAPPER STYLES\n ========================================================================== */\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.checkbox-wrapper-disabled {\n cursor: not-allowed;\n}\n\n/* ==========================================================================\n CHECKBOX BOX STYLES\n ========================================================================== */\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n user-select: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n position: relative;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Size Variants */\n.checkbox-sm {\n width: 16px;\n height: 16px;\n border-radius: var(--radius-xs);\n margin-top: 3px;\n}\n\n.checkbox-md {\n width: 20px;\n height: 20px;\n border-radius: var(--radius-sm);\n margin-top: 2px;\n}\n\n/* Remove margin when no label */\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {\n margin-top: 0;\n}\n\n/* State: Checked */\n.checkbox.checkbox-checked {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n color: var(--color-white);\n}\n\n/* State: Hover */\n.checkbox.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n/* State: Focused */\n.checkbox.checkbox-focused:not(.checkbox-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.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-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.checkbox.checkbox-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.checkbox.checkbox-checked.checkbox-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n color: var(--color-neutral-300);\n}\n\n/* ==========================================================================\n ICONS\n ========================================================================== */\n\n.checkbox-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;\n}\n\n.checkbox .check-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .check-icon {\n color: var(--color-neutral-300);\n}\n\n.checkbox .minus-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .minus-icon {\n color: var(--color-neutral-300);\n}\n\n/* Adjust icon sizes for different checkbox sizes */\n.checkbox-sm .checkbox-icon {\n font-size: 14px;\n}\n\n.checkbox-md .checkbox-icon {\n font-size: 18px;\n}\n\n/* ==========================================================================\n CHECKBOX CONTROL WRAPPER\n ========================================================================== */\n\n.checkbox-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n}\n\n.checkbox-wrapper-disabled .checkbox-control {\n cursor: not-allowed;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox',\n styleUrl: 'bh-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhCheckbox {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private inputRef?: HTMLInputElement;\n private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n /** Checkbox size */\n @Prop() size: CheckboxSize = 'md';\n\n /** Checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Indeterminate state */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n\n /** Disabled state */\n @Prop() disabled: boolean = false;\n\n /** Name attribute for form submission */\n @Prop() name: string = '';\n\n /** Value attribute for form submission */\n @Prop() value: string = 'on';\n\n /** Optional label text - when provided, renders checkbox with label */\n @Prop() label: string = '';\n\n /** Optional supporting text below the label */\n @Prop() supportingText: string = '';\n\n /** Whether the checkbox is required */\n @Prop() required: boolean = false;\n\n /** Default checked state for form reset */\n @Prop() defaultChecked: boolean = false;\n\n /** Internal hover state */\n @State() isHovered: boolean = false;\n\n /** Internal focus state */\n @State() isFocused: boolean = false;\n\n /** Emitted when checkbox state changes via user interaction */\n @Event() bhChange!: EventEmitter<boolean>;\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.checked = newValue;\n }\n }\n\n @Watch('indeterminate')\n handleIndeterminateChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.indeterminate = newValue;\n }\n }\n\n componentDidLoad() {\n if (this.inputRef) {\n this.inputRef.indeterminate = this.indeterminate;\n }\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 this.indeterminate = false;\n if (this.inputRef) {\n this.inputRef.checked = this.defaultChecked;\n this.inputRef.indeterminate = false;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n this.checked = false;\n if (this.inputRef) {\n this.inputRef.indeterminate = false;\n this.inputRef.checked = false;\n }\n } else {\n this.checked = input.checked;\n }\n\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 handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleControlClick = () => {\n if (this.disabled) return;\n this.inputRef?.click();\n };\n\n private renderCheckboxControl() {\n const isCheckedState = this.checked || this.indeterminate;\n\n const checkboxClasses = {\n 'checkbox': true,\n [`checkbox-${this.size}`]: true,\n 'checkbox-checked': isCheckedState,\n 'checkbox-disabled': this.disabled,\n 'checkbox-focused': this.isFocused && !this.disabled,\n 'checkbox-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"checkbox-control\"\n onClick={this.handleControlClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"checkbox\"\n id={this.uniqueId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n class=\"checkbox-input\"\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n />\n <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n {this.checked && !this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n check\n </span>\n )}\n {this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n remove\n </span>\n )}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'checkbox-wrapper': true,\n 'checkbox-wrapper-with-label': !!hasLabel,\n 'checkbox-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.renderCheckboxControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone checkbox without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderCheckboxControl()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-BsHlTsAN.js';
|
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-oyeucMe6.js';
|
|
3
3
|
|
|
4
4
|
const bhLabelCss = ":host{display:block;font-family:var(--font-inter, 'Inter', sans-serif)}.label-container{display:flex;flex-direction:column;gap:var(--spacing-xs, 6px)}.label-container.layout-block{flex-direction:column}.label-container.layout-inline{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline .label-wrapper{flex-shrink:0}.label-container.layout-inline-start{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-start .label-content{flex-shrink:0;width:auto}.label-container.layout-inline-start .label-text-group{display:flex;flex-direction:column;gap:2px}.label-container.layout-inline-start .label-wrapper{gap:var(--spacing-xxs, 4px)}.label-container.layout-inline-start .label-text{font-size:var(--text-md-size, 16px);color:var(--color-neutral-900, #101828);cursor:pointer}.label-container.layout-inline-start .supporting-text{font-size:var(--text-sm-size, 14px);color:var(--color-neutral-500, #667085)}.label-container.layout-inline-space-between{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-space-between .label-wrapper{flex-shrink:0}.label-container.layout-inline-space-between .label-content{flex-grow:1;display:flex;justify-content:flex-end}.label-wrapper{display:flex;align-items:center;gap:var(--spacing-xxs, 4px)}.label-text{font-family:inherit;font-weight:500;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-700, #344054);margin:0;cursor:default}.label-text.disabled{color:var(--color-neutral-400, #98a2b3)}.asterisk{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-error-600, #dc2626)}.supporting-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-500, #667085);margin:0}.supporting-text.disabled{color:var(--color-neutral-400, #98a2b3)}.label-content{width:100%}.icon-with-tooltip{position:relative;display:flex;align-items:center;flex-shrink:0;margin-left:auto}.help-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-400, #98a2b3);cursor:pointer;user-select:none;transition:color 0.2s ease-in-out}.help-icon:hover{color:var(--color-neutral-500, #667085)}.disabled .help-icon{color:var(--color-neutral-300, #d0d5dd);cursor:not-allowed}";
|
|
5
5
|
|
|
@@ -136,6 +136,6 @@ function defineCustomElement() {
|
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
export { BhLabel as B, defineCustomElement as d };
|
|
139
|
-
//# sourceMappingURL=p-
|
|
139
|
+
//# sourceMappingURL=p-BrIid8rr.js.map
|
|
140
140
|
|
|
141
|
-
//# sourceMappingURL=p-
|
|
141
|
+
//# sourceMappingURL=p-BrIid8rr.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Df8KgHhe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-label/bh-label.css?tag=bh-label&encapsulation=shadow","src/components/bh-label/bh-label.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-inter, 'Inter', sans-serif);\n}\n\n.label-container {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs, 6px);\n}\n\n.label-container.layout-block {\n flex-direction: column;\n}\n\n.label-container.layout-inline {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline .label-wrapper {\n flex-shrink: 0;\n}\n\n.label-container.layout-inline-start {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-start .label-content {\n flex-shrink: 0;\n width: auto;\n}\n\n.label-container.layout-inline-start .label-text-group {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.label-container.layout-inline-start .label-wrapper {\n gap: var(--spacing-xxs, 4px);\n}\n\n.label-container.layout-inline-start .label-text {\n font-size: var(--text-md-size, 16px);\n color: var(--color-neutral-900, #101828);\n cursor: pointer;\n}\n\n.label-container.layout-inline-start .supporting-text {\n font-size: var(--text-sm-size, 14px);\n color: var(--color-neutral-500, #667085);\n}\n\n.label-container.layout-inline-space-between {\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-space-between .label-wrapper {\n flex-shrink: 0;\n}\n\n.label-container.layout-inline-space-between .label-content {\n flex-grow: 1;\n display: flex;\n justify-content: flex-end;\n}\n\n.label-wrapper {\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs, 4px);\n}\n\n.label-text {\n font-family: inherit;\n font-weight: 500;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-neutral-700, #344054);\n margin: 0;\n cursor: default;\n}\n\n.label-text.disabled {\n color: var(--color-neutral-400, #98a2b3);\n}\n\n.asterisk {\n font-family: inherit;\n font-weight: 400;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-error-600, #dc2626);\n}\n\n.supporting-text {\n font-family: inherit;\n font-weight: 400;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-neutral-500, #667085);\n margin: 0;\n}\n\n.supporting-text.disabled {\n color: var(--color-neutral-400, #98a2b3);\n}\n\n.label-content {\n width: 100%;\n}\n\n.icon-with-tooltip {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.help-icon {\n font-size: var(--text-xl-size, 20px);\n color: var(--color-neutral-400, #98a2b3);\n cursor: pointer;\n user-select: none;\n transition: color 0.2s ease-in-out;\n}\n\n.help-icon:hover {\n color: var(--color-neutral-500, #667085);\n}\n\n.disabled .help-icon {\n color: var(--color-neutral-300, #d0d5dd);\n cursor: not-allowed;\n}\n","import { Component, Prop, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\nexport type LabelLayout = 'block' | 'inline' | 'inline-start' | 'inline-space-between';\n\n@Component({\n tag: 'bh-label',\n styleUrl: 'bh-label.css',\n shadow: true,\n})\nexport class BhLabel {\n @Element() el!: HTMLElement;\n\n private tooltipTimerRef?: ReturnType<typeof setTimeout>;\n\n /**\n * The label text to display\n */\n @Prop() label: string = '';\n\n /**\n * Layout style for the label container\n * - block: Label above content (default for form fields)\n * - inline: Label next to content (label first)\n * - inline-start: Content next to label (content first, for checkboxes/radios)\n * - inline-space-between: Label and content on opposite ends\n */\n @Prop() layout: LabelLayout = 'block';\n\n /**\n * The id of the form element the label is bound to.\n * Use when the labeled element is not a child of this component.\n */\n @Prop() for: string = '';\n\n /**\n * Supporting text displayed below the label (second line)\n * for instructions or additional description\n */\n @Prop() supportingText: string = '';\n\n /**\n * Whether to show the required asterisk\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the help icon\n */\n @Prop() showHelpIcon: boolean = false;\n\n /**\n * Tooltip text for the help icon\n */\n @Prop() helpIconTooltip: string = 'Help';\n\n /**\n * Whether the label is disabled\n */\n @Prop() disabled: boolean = false;\n\n @State() showHelpTooltip: boolean = false;\n\n /**\n * Emitted when the help icon is clicked\n */\n @Event() bhHelpClick!: EventEmitter<void>;\n\n disconnectedCallback() {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n }\n }\n\n private handleHelpIconMouseEnter = () => {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n }\n this.tooltipTimerRef = setTimeout(() => {\n this.showHelpTooltip = true;\n }, 300);\n };\n\n private handleHelpIconMouseLeave = () => {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n this.tooltipTimerRef = undefined;\n }\n this.showHelpTooltip = false;\n };\n\n private handleHelpIconClick = () => {\n this.bhHelpClick.emit();\n };\n\n render() {\n const wrapperClasses = {\n 'label-container': true,\n [`layout-${this.layout}`]: true,\n 'disabled': this.disabled,\n };\n\n const labelClasses = {\n 'label-text': true,\n 'disabled': this.disabled,\n };\n\n const supportingClasses = {\n 'supporting-text': true,\n 'disabled': this.disabled,\n };\n\n const labelWrapper = (\n <div class=\"label-wrapper\">\n {this.label && (\n <label class={labelClasses} htmlFor={this.for || undefined}>\n {this.label}\n </label>\n )}\n {this.required && <span class=\"asterisk\">*</span>}\n {this.showHelpIcon && (\n <div class=\"icon-with-tooltip\">\n <span\n class=\"help-icon material-symbols-outlined\"\n onClick={this.handleHelpIconClick}\n onMouseEnter={this.handleHelpIconMouseEnter}\n onMouseLeave={this.handleHelpIconMouseLeave}\n >\n help\n </span>\n <bh-tooltip\n text={this.helpIconTooltip}\n position=\"top\"\n visible={this.showHelpTooltip}\n />\n </div>\n )}\n </div>\n );\n\n const supportingTextEl = this.supportingText && (\n <p class={supportingClasses}>{this.supportingText}</p>\n );\n\n const contentSlot = (\n <div class=\"label-content\">\n <slot></slot>\n </div>\n );\n\n // For inline-start layout, content comes first (used for checkbox/radio)\n if (this.layout === 'inline-start') {\n return (\n <div class={wrapperClasses}>\n {contentSlot}\n <div class=\"label-text-group\">\n {labelWrapper}\n {supportingTextEl}\n </div>\n </div>\n );\n }\n\n // Default layout: label wrapper first, then content\n return (\n <div class={wrapperClasses}>\n {labelWrapper}\n {supportingTextEl}\n {contentSlot}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BrIid8rr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-label/bh-label.css?tag=bh-label&encapsulation=shadow","src/components/bh-label/bh-label.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-inter, 'Inter', sans-serif);\n}\n\n.label-container {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs, 6px);\n}\n\n.label-container.layout-block {\n flex-direction: column;\n}\n\n.label-container.layout-inline {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline .label-wrapper {\n flex-shrink: 0;\n}\n\n.label-container.layout-inline-start {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-start .label-content {\n flex-shrink: 0;\n width: auto;\n}\n\n.label-container.layout-inline-start .label-text-group {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.label-container.layout-inline-start .label-wrapper {\n gap: var(--spacing-xxs, 4px);\n}\n\n.label-container.layout-inline-start .label-text {\n font-size: var(--text-md-size, 16px);\n color: var(--color-neutral-900, #101828);\n cursor: pointer;\n}\n\n.label-container.layout-inline-start .supporting-text {\n font-size: var(--text-sm-size, 14px);\n color: var(--color-neutral-500, #667085);\n}\n\n.label-container.layout-inline-space-between {\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-space-between .label-wrapper {\n flex-shrink: 0;\n}\n\n.label-container.layout-inline-space-between .label-content {\n flex-grow: 1;\n display: flex;\n justify-content: flex-end;\n}\n\n.label-wrapper {\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs, 4px);\n}\n\n.label-text {\n font-family: inherit;\n font-weight: 500;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-neutral-700, #344054);\n margin: 0;\n cursor: default;\n}\n\n.label-text.disabled {\n color: var(--color-neutral-400, #98a2b3);\n}\n\n.asterisk {\n font-family: inherit;\n font-weight: 400;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-error-600, #dc2626);\n}\n\n.supporting-text {\n font-family: inherit;\n font-weight: 400;\n font-size: var(--text-sm-size, 14px);\n line-height: 1.43;\n color: var(--color-neutral-500, #667085);\n margin: 0;\n}\n\n.supporting-text.disabled {\n color: var(--color-neutral-400, #98a2b3);\n}\n\n.label-content {\n width: 100%;\n}\n\n.icon-with-tooltip {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.help-icon {\n font-size: var(--text-xl-size, 20px);\n color: var(--color-neutral-400, #98a2b3);\n cursor: pointer;\n user-select: none;\n transition: color 0.2s ease-in-out;\n}\n\n.help-icon:hover {\n color: var(--color-neutral-500, #667085);\n}\n\n.disabled .help-icon {\n color: var(--color-neutral-300, #d0d5dd);\n cursor: not-allowed;\n}\n","import { Component, Prop, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\nexport type LabelLayout = 'block' | 'inline' | 'inline-start' | 'inline-space-between';\n\n@Component({\n tag: 'bh-label',\n styleUrl: 'bh-label.css',\n shadow: true,\n})\nexport class BhLabel {\n @Element() el!: HTMLElement;\n\n private tooltipTimerRef?: ReturnType<typeof setTimeout>;\n\n /**\n * The label text to display\n */\n @Prop() label: string = '';\n\n /**\n * Layout style for the label container\n * - block: Label above content (default for form fields)\n * - inline: Label next to content (label first)\n * - inline-start: Content next to label (content first, for checkboxes/radios)\n * - inline-space-between: Label and content on opposite ends\n */\n @Prop() layout: LabelLayout = 'block';\n\n /**\n * The id of the form element the label is bound to.\n * Use when the labeled element is not a child of this component.\n */\n @Prop() for: string = '';\n\n /**\n * Supporting text displayed below the label (second line)\n * for instructions or additional description\n */\n @Prop() supportingText: string = '';\n\n /**\n * Whether to show the required asterisk\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the help icon\n */\n @Prop() showHelpIcon: boolean = false;\n\n /**\n * Tooltip text for the help icon\n */\n @Prop() helpIconTooltip: string = 'Help';\n\n /**\n * Whether the label is disabled\n */\n @Prop() disabled: boolean = false;\n\n @State() showHelpTooltip: boolean = false;\n\n /**\n * Emitted when the help icon is clicked\n */\n @Event() bhHelpClick!: EventEmitter<void>;\n\n disconnectedCallback() {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n }\n }\n\n private handleHelpIconMouseEnter = () => {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n }\n this.tooltipTimerRef = setTimeout(() => {\n this.showHelpTooltip = true;\n }, 300);\n };\n\n private handleHelpIconMouseLeave = () => {\n if (this.tooltipTimerRef) {\n clearTimeout(this.tooltipTimerRef);\n this.tooltipTimerRef = undefined;\n }\n this.showHelpTooltip = false;\n };\n\n private handleHelpIconClick = () => {\n this.bhHelpClick.emit();\n };\n\n render() {\n const wrapperClasses = {\n 'label-container': true,\n [`layout-${this.layout}`]: true,\n 'disabled': this.disabled,\n };\n\n const labelClasses = {\n 'label-text': true,\n 'disabled': this.disabled,\n };\n\n const supportingClasses = {\n 'supporting-text': true,\n 'disabled': this.disabled,\n };\n\n const labelWrapper = (\n <div class=\"label-wrapper\">\n {this.label && (\n <label class={labelClasses} htmlFor={this.for || undefined}>\n {this.label}\n </label>\n )}\n {this.required && <span class=\"asterisk\">*</span>}\n {this.showHelpIcon && (\n <div class=\"icon-with-tooltip\">\n <span\n class=\"help-icon material-symbols-outlined\"\n onClick={this.handleHelpIconClick}\n onMouseEnter={this.handleHelpIconMouseEnter}\n onMouseLeave={this.handleHelpIconMouseLeave}\n >\n help\n </span>\n <bh-tooltip\n text={this.helpIconTooltip}\n position=\"top\"\n visible={this.showHelpTooltip}\n />\n </div>\n )}\n </div>\n );\n\n const supportingTextEl = this.supportingText && (\n <p class={supportingClasses}>{this.supportingText}</p>\n );\n\n const contentSlot = (\n <div class=\"label-content\">\n <slot></slot>\n </div>\n );\n\n // For inline-start layout, content comes first (used for checkbox/radio)\n if (this.layout === 'inline-start') {\n return (\n <div class={wrapperClasses}>\n {contentSlot}\n <div class=\"label-text-group\">\n {labelWrapper}\n {supportingTextEl}\n </div>\n </div>\n );\n }\n\n // Default layout: label wrapper first, then content\n return (\n <div class={wrapperClasses}>\n {labelWrapper}\n {supportingTextEl}\n {contentSlot}\n </div>\n );\n }\n}\n"],"version":3}
|