bromcom-ui-next 0.1.21 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bromcom-ui/bcm-accordion-group.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-accordion.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-alert.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-avatar.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-badge.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-basic-badge.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-button-group.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-button.bcm-drawer.bcm-dropdown.bcm-dropdown-item.bcm-input.bcm-linked.bcm-shortcut.bcm-text.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-checkbox.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-chip.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-divider.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-pop-confirm.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-popover.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-radio-group.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-radio.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-segmented-picker-option.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-segmented-picker.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-switch.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-tabs-content.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-tabs-list.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-tabs-trigger.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-tabs.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-textarea.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bcm-tooltip.entry.esm.js.map +1 -0
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js.map +1 -1
- package/dist/bromcom-ui/index.esm.js.map +1 -1
- package/dist/bromcom-ui/loader.esm.js.map +1 -0
- package/dist/bromcom-ui/p-07b05abd.entry.js +2 -0
- package/dist/bromcom-ui/p-07b05abd.entry.js.map +1 -0
- package/dist/bromcom-ui/p-2d3a0ad4.entry.js +2 -0
- package/dist/bromcom-ui/p-2d3a0ad4.entry.js.map +1 -0
- package/dist/bromcom-ui/p-319d3937.entry.js +2 -0
- package/dist/bromcom-ui/p-319d3937.entry.js.map +1 -0
- package/dist/bromcom-ui/p-361073bc.entry.js +2 -0
- package/dist/bromcom-ui/p-361073bc.entry.js.map +1 -0
- package/dist/bromcom-ui/p-378bf83e.entry.js +2 -0
- package/dist/bromcom-ui/p-378bf83e.entry.js.map +1 -0
- package/dist/bromcom-ui/p-3866ae3e.entry.js +2 -0
- package/dist/bromcom-ui/p-3866ae3e.entry.js.map +1 -0
- package/dist/bromcom-ui/p-3fbed81b.entry.js +2 -0
- package/dist/bromcom-ui/p-3fbed81b.entry.js.map +1 -0
- package/dist/bromcom-ui/p-45158141.entry.js +2 -0
- package/dist/bromcom-ui/p-45158141.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-a03922f8.entry.js → p-50505dd6.entry.js} +2 -2
- package/dist/bromcom-ui/p-50505dd6.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-b1f9ad67.entry.js → p-62c14cc4.entry.js} +2 -2
- package/dist/bromcom-ui/p-62c14cc4.entry.js.map +1 -0
- package/dist/bromcom-ui/p-67f62d75.entry.js +2 -0
- package/dist/bromcom-ui/p-67f62d75.entry.js.map +1 -0
- package/dist/bromcom-ui/p-6fa6b826.entry.js +2 -0
- package/dist/bromcom-ui/p-6fa6b826.entry.js.map +1 -0
- package/dist/bromcom-ui/p-778c0de1.entry.js +2 -0
- package/dist/bromcom-ui/p-778c0de1.entry.js.map +1 -0
- package/dist/bromcom-ui/p-7d366ff2.entry.js +2 -0
- package/dist/bromcom-ui/p-7d366ff2.entry.js.map +1 -0
- package/dist/bromcom-ui/p-813cffad.entry.js +2 -0
- package/dist/bromcom-ui/p-813cffad.entry.js.map +1 -0
- package/dist/bromcom-ui/p-90b65db8.entry.js +2 -0
- package/dist/bromcom-ui/p-90b65db8.entry.js.map +1 -0
- package/dist/bromcom-ui/p-9293a2ce.entry.js +2 -0
- package/dist/bromcom-ui/p-9293a2ce.entry.js.map +1 -0
- package/dist/bromcom-ui/p-9d4212ac.entry.js +2 -0
- package/dist/bromcom-ui/p-9d4212ac.entry.js.map +1 -0
- package/dist/bromcom-ui/p-BfTCfPZ1.js +7 -0
- package/dist/bromcom-ui/p-BfTCfPZ1.js.map +1 -0
- package/dist/bromcom-ui/p-CEcVC0yX.js +2 -0
- package/dist/bromcom-ui/p-CEcVC0yX.js.map +1 -0
- package/dist/bromcom-ui/{p-13a245f6.js → p-CUvT12BL.js} +1 -1
- package/dist/bromcom-ui/p-CUvT12BL.js.map +1 -0
- package/dist/bromcom-ui/p-CrZxEeDA.js +3 -0
- package/dist/bromcom-ui/p-CrZxEeDA.js.map +1 -0
- package/dist/bromcom-ui/p-DxMLMJ3r.js +2 -0
- package/dist/bromcom-ui/p-DxMLMJ3r.js.map +1 -0
- package/dist/bromcom-ui/{p-ba2410ef.js → p-IBjzkjef.js} +2 -2
- package/dist/bromcom-ui/p-IBjzkjef.js.map +1 -0
- package/dist/bromcom-ui/p-a4ace572.entry.js +2 -0
- package/dist/bromcom-ui/p-a4ace572.entry.js.map +1 -0
- package/dist/bromcom-ui/p-a8b66a90.entry.js +2 -0
- package/dist/bromcom-ui/p-a8b66a90.entry.js.map +1 -0
- package/dist/bromcom-ui/p-b566bad4.entry.js +2 -0
- package/dist/bromcom-ui/p-b566bad4.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-06d42346.entry.js → p-e00fa939.entry.js} +2 -2
- package/dist/bromcom-ui/p-e00fa939.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-11227d96.entry.js → p-e91676ff.entry.js} +2 -2
- package/dist/bromcom-ui/p-e91676ff.entry.js.map +1 -0
- package/dist/bromcom-ui/p-fdc1df0c.entry.js +2 -0
- package/dist/bromcom-ui/p-fdc1df0c.entry.js.map +1 -0
- package/dist/cjs/bcm-accordion-group.cjs.entry.js +3 -5
- package/dist/cjs/bcm-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-accordion-group.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-accordion.cjs.entry.js +4 -6
- package/dist/cjs/bcm-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-accordion.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-alert.cjs.entry.js +4 -6
- package/dist/cjs/bcm-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-alert.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-avatar.cjs.entry.js +4 -6
- package/dist/cjs/bcm-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-avatar.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-badge.cjs.entry.js +4 -6
- package/dist/cjs/bcm-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-badge.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-basic-badge.cjs.entry.js +5 -7
- package/dist/cjs/bcm-basic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-basic-badge.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-button-group.cjs.entry.js +4 -6
- package/dist/cjs/bcm-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-button-group.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-button.bcm-drawer.bcm-dropdown.bcm-dropdown-item.bcm-input.bcm-linked.bcm-shortcut.bcm-text.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-button_8.cjs.entry.js +28 -37
- package/dist/cjs/bcm-button_8.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-checkbox.cjs.entry.js +5 -7
- package/dist/cjs/bcm-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-checkbox.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-chip.cjs.entry.js +4 -6
- package/dist/cjs/bcm-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-chip.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-divider.cjs.entry.js +4 -6
- package/dist/cjs/bcm-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-divider.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js +7 -9
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-pop-confirm.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-popover.cjs.entry.js +8 -10
- package/dist/cjs/bcm-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-popover.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-radio-group.cjs.entry.js +6 -8
- package/dist/cjs/bcm-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-radio-group.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-radio.cjs.entry.js +4 -6
- package/dist/cjs/bcm-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js +4 -6
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-segmented-picker-option.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js +4 -6
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-segmented-picker.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-switch.cjs.entry.js +5 -7
- package/dist/cjs/bcm-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-switch.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-tabs-content.cjs.entry.js +3 -5
- package/dist/cjs/bcm-tabs-content.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-content.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-tabs-list.cjs.entry.js +4 -6
- package/dist/cjs/bcm-tabs-list.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-list.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +4 -6
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-trigger.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-tabs.cjs.entry.js +4 -6
- package/dist/cjs/bcm-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-textarea.cjs.entry.js +8 -10
- package/dist/cjs/bcm-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-textarea.entry.cjs.js.map +1 -0
- package/dist/cjs/bcm-tooltip.cjs.entry.js +8 -10
- package/dist/cjs/bcm-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tooltip.entry.cjs.js.map +1 -0
- package/dist/cjs/bromcom-ui.cjs.js +8 -8
- package/dist/cjs/bromcom-ui.cjs.js.map +1 -1
- package/dist/cjs/{floating-ui.dom.esm-3ec8404c.js → floating-ui.dom-DyKmFgkP.js} +32 -512
- package/dist/cjs/floating-ui.dom-DyKmFgkP.js.map +1 -0
- package/dist/cjs/{generate-id-f6982042.js → generate-id-CG_BkTJu.js} +4 -13
- package/dist/cjs/generate-id-CG_BkTJu.js.map +1 -0
- package/dist/cjs/index-Bp6Dd2i1.js +97 -0
- package/dist/cjs/index-Bp6Dd2i1.js.map +1 -0
- package/dist/cjs/{index-6710808e.js → index-DFpZVb11.js} +461 -279
- package/dist/cjs/index-DFpZVb11.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +4 -6
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/tv-ngpIbGlG.js +2624 -0
- package/dist/cjs/tv-ngpIbGlG.js.map +1 -0
- package/dist/cjs/{validation-messages-18389279.js → validation-messages-BjfpSEWk.js} +2 -1
- package/dist/cjs/validation-messages-BjfpSEWk.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/accordion/accordion.component.js +4 -4
- package/dist/collection/components/accordion-group/accordion-group.component.js +1 -1
- package/dist/collection/components/alert/alert.component.js +5 -5
- package/dist/collection/components/avatar/avatar.component.js +9 -9
- package/dist/collection/components/badge/badge.component.js +9 -9
- package/dist/collection/components/basic-badge/basic-badge.component.js +5 -5
- package/dist/collection/components/basic-badge/basic-badge.css +1 -1
- package/dist/collection/components/button/button.component.js +20 -20
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/button-group/button-group.component.js +7 -7
- package/dist/collection/components/checkbox/checkbox.component.js +9 -9
- package/dist/collection/components/chip/chip.component.js +6 -6
- package/dist/collection/components/divider/divider.component.js +3 -3
- package/dist/collection/components/drawer/drawer.component.js +6 -6
- package/dist/collection/components/dropdown/dropdown.component.js +1 -1
- package/dist/collection/components/dropdown-item/dropdown-item.component.js +6 -5
- package/dist/collection/components/dropdown-item/dropdown-item.component.js.map +1 -1
- package/dist/collection/components/input/input.component.js +32 -31
- package/dist/collection/components/input/input.component.js.map +1 -1
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/linked/linked.component.js +13 -12
- package/dist/collection/components/linked/linked.component.js.map +1 -1
- package/dist/collection/components/linked/linked.css +1 -1
- package/dist/collection/components/pop-confirm/pop-confirm.component.js +10 -10
- package/dist/collection/components/popover/popover.component.js +7 -7
- package/dist/collection/components/radio/radio.component.js +9 -9
- package/dist/collection/components/radio-group/radio-group.component.js +9 -9
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js +5 -5
- package/dist/collection/components/segmented-picker/segmented-picker.component.js +4 -4
- package/dist/collection/components/shortcut/shortcut.js +2 -2
- package/dist/collection/components/switch/switch.component.js +11 -11
- package/dist/collection/components/tabs/tabs-content.component.js +1 -1
- package/dist/collection/components/tabs/tabs-trigger.component.js +4 -4
- package/dist/collection/components/tabs/tabs.component.js +2 -2
- package/dist/collection/components/text/text.component.js +4 -4
- package/dist/collection/components/textarea/textarea.component.js +25 -24
- package/dist/collection/components/textarea/textarea.component.js.map +1 -1
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/tooltip/tooltip.component.js +5 -5
- package/dist/components/bcm-accordion-group.js +4 -4
- package/dist/components/bcm-accordion-group.js.map +1 -1
- package/dist/components/bcm-accordion.js +5 -5
- package/dist/components/bcm-accordion.js.map +1 -1
- package/dist/components/bcm-alert.js +5 -5
- package/dist/components/bcm-alert.js.map +1 -1
- package/dist/components/bcm-avatar.js +6 -6
- package/dist/components/bcm-avatar.js.map +1 -1
- package/dist/components/bcm-badge.js +2 -1
- package/dist/components/bcm-basic-badge.js +6 -6
- package/dist/components/bcm-basic-badge.js.map +1 -1
- package/dist/components/bcm-button-group.js +5 -5
- package/dist/components/bcm-button-group.js.map +1 -1
- package/dist/components/bcm-button.js +2 -1
- package/dist/components/bcm-checkbox.js +6 -6
- package/dist/components/bcm-checkbox.js.map +1 -1
- package/dist/components/bcm-chip.js +5 -5
- package/dist/components/bcm-chip.js.map +1 -1
- package/dist/components/bcm-divider.js +5 -5
- package/dist/components/bcm-divider.js.map +1 -1
- package/dist/components/bcm-drawer.js +5 -5
- package/dist/components/bcm-drawer.js.map +1 -1
- package/dist/components/bcm-dropdown-item.js +6 -6
- package/dist/components/bcm-dropdown-item.js.map +1 -1
- package/dist/components/bcm-dropdown.js +7 -7
- package/dist/components/bcm-dropdown.js.map +1 -1
- package/dist/components/bcm-input.js +14 -14
- package/dist/components/bcm-input.js.map +1 -1
- package/dist/components/bcm-linked.js +2 -1
- package/dist/components/bcm-pop-confirm.js +7 -7
- package/dist/components/bcm-pop-confirm.js.map +1 -1
- package/dist/components/bcm-popover.js +6 -6
- package/dist/components/bcm-popover.js.map +1 -1
- package/dist/components/bcm-radio-group.js +7 -7
- package/dist/components/bcm-radio-group.js.map +1 -1
- package/dist/components/bcm-radio.js +5 -5
- package/dist/components/bcm-radio.js.map +1 -1
- package/dist/components/bcm-segmented-picker-option.js +5 -5
- package/dist/components/bcm-segmented-picker-option.js.map +1 -1
- package/dist/components/bcm-segmented-picker.js +5 -5
- package/dist/components/bcm-segmented-picker.js.map +1 -1
- package/dist/components/bcm-shortcut.js +5 -5
- package/dist/components/bcm-shortcut.js.map +1 -1
- package/dist/components/bcm-switch.js +6 -6
- package/dist/components/bcm-switch.js.map +1 -1
- package/dist/components/bcm-tabs-content.js +4 -4
- package/dist/components/bcm-tabs-content.js.map +1 -1
- package/dist/components/bcm-tabs-list.js +5 -5
- package/dist/components/bcm-tabs-list.js.map +1 -1
- package/dist/components/bcm-tabs-trigger.js +5 -5
- package/dist/components/bcm-tabs-trigger.js.map +1 -1
- package/dist/components/bcm-tabs.js +5 -5
- package/dist/components/bcm-tabs.js.map +1 -1
- package/dist/components/bcm-text.js +5 -5
- package/dist/components/bcm-text.js.map +1 -1
- package/dist/components/bcm-textarea.js +9 -9
- package/dist/components/bcm-textarea.js.map +1 -1
- package/dist/components/bcm-tooltip.js +6 -6
- package/dist/components/bcm-tooltip.js.map +1 -1
- package/dist/components/index.js +1706 -2
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-bf273460.js → p-A70Ppz6C.js} +6 -6
- package/dist/components/p-A70Ppz6C.js.map +1 -0
- package/dist/components/{p-39872cdf.js → p-BHwftRkk.js} +8 -8
- package/dist/components/p-BHwftRkk.js.map +1 -0
- package/dist/components/{p-c491a7c9.js → p-BdGAZ8M0.js} +7 -7
- package/dist/components/p-BdGAZ8M0.js.map +1 -0
- package/dist/components/p-BfTCfPZ1.js +95 -0
- package/dist/components/p-BfTCfPZ1.js.map +1 -0
- package/dist/components/p-CEcVC0yX.js +2622 -0
- package/dist/components/p-CEcVC0yX.js.map +1 -0
- package/dist/{esm/validation-messages-af4512f0.js → components/p-CUvT12BL.js} +2 -1
- package/dist/components/p-CUvT12BL.js.map +1 -0
- package/dist/components/{p-50133556.js → p-CzcTU1ty.js} +32 -512
- package/dist/components/p-CzcTU1ty.js.map +1 -0
- package/dist/components/{p-ba2410ef.js → p-IBjzkjef.js} +4 -13
- package/dist/components/p-IBjzkjef.js.map +1 -0
- package/dist/esm/bcm-accordion-group.entry.js +3 -3
- package/dist/esm/bcm-accordion-group.entry.js.map +1 -1
- package/dist/esm/bcm-accordion.entry.js +4 -4
- package/dist/esm/bcm-accordion.entry.js.map +1 -1
- package/dist/esm/bcm-alert.entry.js +4 -4
- package/dist/esm/bcm-alert.entry.js.map +1 -1
- package/dist/esm/bcm-avatar.entry.js +4 -4
- package/dist/esm/bcm-avatar.entry.js.map +1 -1
- package/dist/esm/bcm-badge.entry.js +4 -4
- package/dist/esm/bcm-badge.entry.js.map +1 -1
- package/dist/esm/bcm-basic-badge.entry.js +5 -5
- package/dist/esm/bcm-basic-badge.entry.js.map +1 -1
- package/dist/esm/bcm-button-group.entry.js +4 -4
- package/dist/esm/bcm-button-group.entry.js.map +1 -1
- package/dist/esm/bcm-button.bcm-drawer.bcm-dropdown.bcm-dropdown-item.bcm-input.bcm-linked.bcm-shortcut.bcm-text.entry.js.map +1 -0
- package/dist/esm/bcm-button_8.entry.js +23 -30
- package/dist/esm/bcm-button_8.entry.js.map +1 -1
- package/dist/esm/bcm-checkbox.entry.js +5 -5
- package/dist/esm/bcm-checkbox.entry.js.map +1 -1
- package/dist/esm/bcm-chip.entry.js +4 -4
- package/dist/esm/bcm-chip.entry.js.map +1 -1
- package/dist/esm/bcm-divider.entry.js +4 -4
- package/dist/esm/bcm-divider.entry.js.map +1 -1
- package/dist/esm/bcm-pop-confirm.entry.js +5 -5
- package/dist/esm/bcm-pop-confirm.entry.js.map +1 -1
- package/dist/esm/bcm-popover.entry.js +5 -5
- package/dist/esm/bcm-popover.entry.js.map +1 -1
- package/dist/esm/bcm-radio-group.entry.js +6 -6
- package/dist/esm/bcm-radio-group.entry.js.map +1 -1
- package/dist/esm/bcm-radio.entry.js +4 -4
- package/dist/esm/bcm-radio.entry.js.map +1 -1
- package/dist/esm/bcm-segmented-picker-option.entry.js +4 -4
- package/dist/esm/bcm-segmented-picker-option.entry.js.map +1 -1
- package/dist/esm/bcm-segmented-picker.entry.js +4 -4
- package/dist/esm/bcm-segmented-picker.entry.js.map +1 -1
- package/dist/esm/bcm-switch.entry.js +5 -5
- package/dist/esm/bcm-switch.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-content.entry.js +3 -3
- package/dist/esm/bcm-tabs-content.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-list.entry.js +4 -4
- package/dist/esm/bcm-tabs-list.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +4 -4
- package/dist/esm/bcm-tabs-trigger.entry.js.map +1 -1
- package/dist/esm/bcm-tabs.entry.js +4 -4
- package/dist/esm/bcm-tabs.entry.js.map +1 -1
- package/dist/esm/bcm-textarea.entry.js +8 -8
- package/dist/esm/bcm-textarea.entry.js.map +1 -1
- package/dist/esm/bcm-tooltip.entry.js +5 -5
- package/dist/esm/bcm-tooltip.entry.js.map +1 -1
- package/dist/esm/bromcom-ui.js +6 -5
- package/dist/esm/bromcom-ui.js.map +1 -1
- package/dist/esm/{floating-ui.dom.esm-b7749b71.js → floating-ui.dom-DxMLMJ3r.js} +33 -513
- package/dist/esm/floating-ui.dom-DxMLMJ3r.js.map +1 -0
- package/dist/esm/{generate-id-3b2fcb93.js → generate-id-IBjzkjef.js} +4 -13
- package/dist/esm/generate-id-IBjzkjef.js.map +1 -0
- package/dist/esm/index-BfTCfPZ1.js +95 -0
- package/dist/esm/index-BfTCfPZ1.js.map +1 -0
- package/dist/esm/{index-18b75a47.js → index-CrZxEeDA.js} +461 -260
- package/dist/esm/index-CrZxEeDA.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/tv-CEcVC0yX.js +2622 -0
- package/dist/esm/tv-CEcVC0yX.js.map +1 -0
- package/dist/{components/p-13a245f6.js → esm/validation-messages-CUvT12BL.js} +2 -1
- package/dist/esm/validation-messages-CUvT12BL.js.map +1 -0
- package/dist/types/components.d.ts +280 -0
- package/dist/types/stencil-public-runtime.d.ts +35 -6
- package/package.json +1 -1
- package/dist/bromcom-ui/p-06d42346.entry.js.map +0 -1
- package/dist/bromcom-ui/p-0c8a9725.entry.js +0 -2
- package/dist/bromcom-ui/p-0c8a9725.entry.js.map +0 -1
- package/dist/bromcom-ui/p-11227d96.entry.js.map +0 -1
- package/dist/bromcom-ui/p-12360e4c.js +0 -7
- package/dist/bromcom-ui/p-12360e4c.js.map +0 -1
- package/dist/bromcom-ui/p-13a245f6.js.map +0 -1
- package/dist/bromcom-ui/p-1b4ccb21.entry.js +0 -2
- package/dist/bromcom-ui/p-1b4ccb21.entry.js.map +0 -1
- package/dist/bromcom-ui/p-1e726978.entry.js +0 -2
- package/dist/bromcom-ui/p-1e726978.entry.js.map +0 -1
- package/dist/bromcom-ui/p-2c58fcb7.js +0 -2
- package/dist/bromcom-ui/p-2c58fcb7.js.map +0 -1
- package/dist/bromcom-ui/p-2e469cb9.entry.js +0 -2
- package/dist/bromcom-ui/p-2e469cb9.entry.js.map +0 -1
- package/dist/bromcom-ui/p-350c97e1.entry.js +0 -2
- package/dist/bromcom-ui/p-350c97e1.entry.js.map +0 -1
- package/dist/bromcom-ui/p-4027f5c4.entry.js +0 -2
- package/dist/bromcom-ui/p-4027f5c4.entry.js.map +0 -1
- package/dist/bromcom-ui/p-45f4c75b.entry.js +0 -2
- package/dist/bromcom-ui/p-45f4c75b.entry.js.map +0 -1
- package/dist/bromcom-ui/p-4652635d.entry.js +0 -2
- package/dist/bromcom-ui/p-4652635d.entry.js.map +0 -1
- package/dist/bromcom-ui/p-50133556.js +0 -2
- package/dist/bromcom-ui/p-50133556.js.map +0 -1
- package/dist/bromcom-ui/p-67ceb7f3.entry.js +0 -2
- package/dist/bromcom-ui/p-67ceb7f3.entry.js.map +0 -1
- package/dist/bromcom-ui/p-77122bc2.entry.js +0 -2
- package/dist/bromcom-ui/p-77122bc2.entry.js.map +0 -1
- package/dist/bromcom-ui/p-78d8f63c.entry.js +0 -2
- package/dist/bromcom-ui/p-78d8f63c.entry.js.map +0 -1
- package/dist/bromcom-ui/p-87a0f20b.entry.js +0 -2
- package/dist/bromcom-ui/p-87a0f20b.entry.js.map +0 -1
- package/dist/bromcom-ui/p-881ccea1.entry.js +0 -2
- package/dist/bromcom-ui/p-881ccea1.entry.js.map +0 -1
- package/dist/bromcom-ui/p-8ae92b62.entry.js +0 -2
- package/dist/bromcom-ui/p-8ae92b62.entry.js.map +0 -1
- package/dist/bromcom-ui/p-9a6cec21.entry.js +0 -2
- package/dist/bromcom-ui/p-9a6cec21.entry.js.map +0 -1
- package/dist/bromcom-ui/p-9d0aeb92.js +0 -3
- package/dist/bromcom-ui/p-9d0aeb92.js.map +0 -1
- package/dist/bromcom-ui/p-a03922f8.entry.js.map +0 -1
- package/dist/bromcom-ui/p-a20f6baf.entry.js +0 -2
- package/dist/bromcom-ui/p-a20f6baf.entry.js.map +0 -1
- package/dist/bromcom-ui/p-b1f9ad67.entry.js.map +0 -1
- package/dist/bromcom-ui/p-ba2410ef.js.map +0 -1
- package/dist/bromcom-ui/p-bf213fe6.entry.js +0 -2
- package/dist/bromcom-ui/p-bf213fe6.entry.js.map +0 -1
- package/dist/bromcom-ui/p-c89f7997.entry.js +0 -2
- package/dist/bromcom-ui/p-c89f7997.entry.js.map +0 -1
- package/dist/bromcom-ui/p-ddf64315.js +0 -2
- package/dist/bromcom-ui/p-ddf64315.js.map +0 -1
- package/dist/bromcom-ui/p-f56b22de.entry.js +0 -2
- package/dist/bromcom-ui/p-f56b22de.entry.js.map +0 -1
- package/dist/bromcom-ui/p-fdcb9dbd.entry.js +0 -2
- package/dist/bromcom-ui/p-fdcb9dbd.entry.js.map +0 -1
- package/dist/cjs/app-globals-e0eef2e9.js +0 -47
- package/dist/cjs/app-globals-e0eef2e9.js.map +0 -1
- package/dist/cjs/floating-ui.dom.esm-3ec8404c.js.map +0 -1
- package/dist/cjs/generate-id-f6982042.js.map +0 -1
- package/dist/cjs/index-5a88e57b.js +0 -84
- package/dist/cjs/index-5a88e57b.js.map +0 -1
- package/dist/cjs/index-6710808e.js.map +0 -1
- package/dist/cjs/tv-d2e35446.js +0 -2597
- package/dist/cjs/tv-d2e35446.js.map +0 -1
- package/dist/cjs/validation-messages-18389279.js.map +0 -1
- package/dist/components/p-12360e4c.js +0 -82
- package/dist/components/p-12360e4c.js.map +0 -1
- package/dist/components/p-13a245f6.js.map +0 -1
- package/dist/components/p-2c58fcb7.js +0 -2595
- package/dist/components/p-2c58fcb7.js.map +0 -1
- package/dist/components/p-30135590.js +0 -1567
- package/dist/components/p-30135590.js.map +0 -1
- package/dist/components/p-39872cdf.js.map +0 -1
- package/dist/components/p-50133556.js.map +0 -1
- package/dist/components/p-ba2410ef.js.map +0 -1
- package/dist/components/p-bf273460.js.map +0 -1
- package/dist/components/p-c491a7c9.js.map +0 -1
- package/dist/esm/app-globals-f7994f55.js +0 -45
- package/dist/esm/app-globals-f7994f55.js.map +0 -1
- package/dist/esm/floating-ui.dom.esm-b7749b71.js.map +0 -1
- package/dist/esm/generate-id-3b2fcb93.js.map +0 -1
- package/dist/esm/index-097075ad.js +0 -82
- package/dist/esm/index-097075ad.js.map +0 -1
- package/dist/esm/index-18b75a47.js.map +0 -1
- package/dist/esm/tv-6dcd2224.js +0 -2595
- package/dist/esm/tv-6dcd2224.js.map +0 -1
- package/dist/esm/validation-messages-af4512f0.js.map +0 -1
- package/loader/package.json +0 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /** Reference to the host element */\n @Element() el: HTMLElement;\n\n /**\n * Unique ID for the component. Automatically generated if not specified.\n */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /**\n * Label text to display next to the checkbox\n */\n @Prop()\n label?: string;\n\n /**\n * Name attribute for the checkbox when used in a form\n */\n @Prop()\n name: string;\n\n /**\n * Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n */\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Size variant of the checkbox\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Determines if the checkbox is checked\n */\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n */\n @Prop()\n error: boolean = false;\n\n /**\n * Determines if the checkbox is disabled\n */\n @Prop()\n disabled: boolean = false;\n\n /**\n * Controls the position of the label relative to the checkbox\n */\n @Prop()\n labelPosition: 'left' | 'right' = 'right';\n\n /**\n * Internal state to track checked status\n */\n @State() internalChecked: boolean;\n\n /**\n * Event emitted when the checked state changes\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /** Reference to the underlying input element */\n private inputElement: HTMLInputElement;\n\n /**\n * Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n */\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /**\n * Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n */\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /**\n * Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n */\n @Watch('checked')\n syncCheckedProp(newValue: boolean | undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /**\n * Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n */\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /**\n * Handles change events on the checkbox\n * Updates state and emits the change event\n */\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /**\n * Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n */\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /**\n * Tailwind Variants definition for the component\n * Configures styling based on component props\n */\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /**\n * Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' || this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label || 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"version":3,"file":"bcm-checkbox.entry.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /** Reference to the host element */\n @Element() el: HTMLElement;\n\n /**\n * Unique ID for the component. Automatically generated if not specified.\n */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /**\n * Label text to display next to the checkbox\n */\n @Prop()\n label?: string;\n\n /**\n * Name attribute for the checkbox when used in a form\n */\n @Prop()\n name: string;\n\n /**\n * Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n */\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Size variant of the checkbox\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Determines if the checkbox is checked\n */\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n */\n @Prop()\n error: boolean = false;\n\n /**\n * Determines if the checkbox is disabled\n */\n @Prop()\n disabled: boolean = false;\n\n /**\n * Controls the position of the label relative to the checkbox\n */\n @Prop()\n labelPosition: 'left' | 'right' = 'right';\n\n /**\n * Internal state to track checked status\n */\n @State() internalChecked: boolean;\n\n /**\n * Event emitted when the checked state changes\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /** Reference to the underlying input element */\n private inputElement: HTMLInputElement;\n\n /**\n * Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n */\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /**\n * Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n */\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /**\n * Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n */\n @Watch('checked')\n syncCheckedProp(newValue: boolean | undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /**\n * Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n */\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /**\n * Handles change events on the checkbox\n * Updates state and emits the change event\n */\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /**\n * Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n */\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /**\n * Tailwind Variants definition for the component\n * Configures styling based on component props\n */\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /**\n * Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' || this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label || 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-
|
|
2
|
-
import { t as tv } from './tv-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-CrZxEeDA.js';
|
|
2
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
3
3
|
|
|
4
4
|
const STATUS_COLORS = {
|
|
5
5
|
info: 'blue',
|
|
@@ -9,7 +9,6 @@ const STATUS_COLORS = {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
|
|
12
|
-
const BcmChipStyle0 = chipCss;
|
|
13
12
|
|
|
14
13
|
const BcmChip = class {
|
|
15
14
|
constructor(hostRef) {
|
|
@@ -119,8 +118,9 @@ const BcmChip = class {
|
|
|
119
118
|
return (h("div", { key: '0c57684b2042bcbc6b5950c8a51412eea46bf9e7', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5eef26442dbe670cfa317998b349fa1794c845f8' }), this.dismissible && h("bcm-icon", { key: '5ca7c5b1dfb83db893772208ea792d9272cea649', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
|
|
120
119
|
}
|
|
121
120
|
};
|
|
122
|
-
BcmChip.style =
|
|
121
|
+
BcmChip.style = chipCss;
|
|
123
122
|
|
|
124
123
|
export { BcmChip as bcm_chip };
|
|
124
|
+
//# sourceMappingURL=bcm-chip.entry.js.map
|
|
125
125
|
|
|
126
126
|
//# sourceMappingURL=bcm-chip.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /** Chip size variant */\n @Prop()\n size?: ChipSize = 'medium';\n\n /** Chip style variant */\n @Prop()\n kind?: ChipKind = 'filled';\n\n /** Chip status */\n @Prop()\n status?: ChipStatus = 'default';\n\n /** Whether chip can be dismissed */\n @Prop()\n dismissible?: boolean = false;\n\n /** Whether chip is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"version":3,"file":"bcm-chip.entry.js","sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /** Chip size variant */\n @Prop()\n size?: ChipSize = 'medium';\n\n /** Chip style variant */\n @Prop()\n kind?: ChipKind = 'filled';\n\n /** Chip status */\n @Prop()\n status?: ChipStatus = 'default';\n\n /** Whether chip can be dismissed */\n @Prop()\n dismissible?: boolean = false;\n\n /** Whether chip is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
2
|
-
import { t as tv } from './tv-
|
|
1
|
+
import { r as registerInstance, h } from './index-CrZxEeDA.js';
|
|
2
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
3
3
|
|
|
4
4
|
const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
|
|
5
|
-
const BcmDividerStyle0 = dividerCss;
|
|
6
5
|
|
|
7
6
|
const Divider = class {
|
|
8
7
|
constructor(hostRef) {
|
|
@@ -70,8 +69,9 @@ const Divider = class {
|
|
|
70
69
|
}) }));
|
|
71
70
|
}
|
|
72
71
|
};
|
|
73
|
-
Divider.style =
|
|
72
|
+
Divider.style = dividerCss;
|
|
74
73
|
|
|
75
74
|
export { Divider as bcm_divider };
|
|
75
|
+
//# sourceMappingURL=bcm-divider.entry.js.map
|
|
76
76
|
|
|
77
77
|
//# sourceMappingURL=bcm-divider.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-divider.entry.js","
|
|
1
|
+
{"version":3,"file":"bcm-divider.entry.js","sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /**\n * @prop {('horizontal'|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n */\n @Prop()\n direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * @prop {('solid'|'dashed'|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n */\n @Prop()\n variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n /**\n * @prop {('small'|'medium'|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,itBAAitB;;MCevtB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAG,EAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment,
|
|
2
|
-
import { c as computePosition, o as offset, f as flip, s as shift,
|
|
3
|
-
import { t as tv } from './tv-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-CrZxEeDA.js';
|
|
2
|
+
import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom-DxMLMJ3r.js';
|
|
3
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
4
4
|
|
|
5
5
|
const popConfirmCss = ".absolute{position:absolute}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
|
|
6
|
-
const BcmPopConfirmStyle0 = popConfirmCss;
|
|
7
6
|
|
|
8
7
|
// Status icons for different states
|
|
9
8
|
const statusIcons = {
|
|
@@ -241,8 +240,9 @@ const PopConfirm = class {
|
|
|
241
240
|
}
|
|
242
241
|
get el() { return getElement(this); }
|
|
243
242
|
};
|
|
244
|
-
PopConfirm.style =
|
|
243
|
+
PopConfirm.style = popConfirmCss;
|
|
245
244
|
|
|
246
245
|
export { PopConfirm as bcm_pop_confirm };
|
|
246
|
+
//# sourceMappingURL=bcm-pop-confirm.entry.js.map
|
|
247
247
|
|
|
248
248
|
//# sourceMappingURL=bcm-pop-confirm.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-pop-confirm.entry.js","mappings":"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","names":[],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n *\n * @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /**\n * The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n */\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /**\n * The text displayed on the cancel button.\n * @default 'Cancel'\n */\n @Prop()\n cancelText: string = 'Cancel';\n\n /**\n * The text displayed on the confirm button.\n * @default 'Yes'\n */\n @Prop()\n confirmText: string = 'Yes';\n\n /**\n * The description or body content of the pop-up.\n * @default ''\n */\n @Prop()\n description: string = '';\n\n /**\n * The header text displayed at the top of the pop-up.\n * @default ''\n */\n @Prop()\n headerText: string = '';\n\n /**\n * The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n */\n @Prop()\n placement: Placement = 'bottom';\n\n /**\n * The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n */\n @Prop()\n status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n /**\n * Whether to display a status icon based on the `status` prop.\n * @default true\n */\n @Prop()\n statusIcon: boolean = true;\n\n /**\n * The ID of the trigger element (e.g., a button) that opens the pop-up.\n */\n @Prop()\n targetId: string;\n\n // State variables\n /**\n * Indicates whether the pop-up is currently open or closed.\n * @default false\n */\n @State()\n isOpen: boolean = false;\n\n /**\n * The current placement position of the pop-up after computation.\n */\n @State()\n currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n // Event Emitters\n /**\n * Emits an event when the user confirms the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /**\n * Emits an event when the user cancels the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /**\n * Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n */\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /**\n * Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n */\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /**\n * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /**\n * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /**\n * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n */\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /**\n * Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n */\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /**\n * Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n */\n private updatePosition = async () => {\n if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /**\n * Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n */\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /**\n * Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n */\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /**\n * Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n */\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /**\n * Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n */\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/* Arrow */}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/* Header Content */}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/* Main Content */}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/* Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"version":3,"file":"bcm-pop-confirm.entry.js","sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n *\n * @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /**\n * The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n */\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /**\n * The text displayed on the cancel button.\n * @default 'Cancel'\n */\n @Prop()\n cancelText: string = 'Cancel';\n\n /**\n * The text displayed on the confirm button.\n * @default 'Yes'\n */\n @Prop()\n confirmText: string = 'Yes';\n\n /**\n * The description or body content of the pop-up.\n * @default ''\n */\n @Prop()\n description: string = '';\n\n /**\n * The header text displayed at the top of the pop-up.\n * @default ''\n */\n @Prop()\n headerText: string = '';\n\n /**\n * The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n */\n @Prop()\n placement: Placement = 'bottom';\n\n /**\n * The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n */\n @Prop()\n status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n /**\n * Whether to display a status icon based on the `status` prop.\n * @default true\n */\n @Prop()\n statusIcon: boolean = true;\n\n /**\n * The ID of the trigger element (e.g., a button) that opens the pop-up.\n */\n @Prop()\n targetId: string;\n\n // State variables\n /**\n * Indicates whether the pop-up is currently open or closed.\n * @default false\n */\n @State()\n isOpen: boolean = false;\n\n /**\n * The current placement position of the pop-up after computation.\n */\n @State()\n currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n // Event Emitters\n /**\n * Emits an event when the user confirms the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /**\n * Emits an event when the user cancels the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /**\n * Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n */\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /**\n * Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n */\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /**\n * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /**\n * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /**\n * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n */\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /**\n * Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n */\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /**\n * Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n */\n private updatePosition = async () => {\n if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /**\n * Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n */\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /**\n * Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n */\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /**\n * Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n */\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /**\n * Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n */\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/* Arrow */}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/* Header Content */}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/* Main Content */}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/* Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h,
|
|
2
|
-
import {
|
|
3
|
-
import { t as tv } from './tv-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
|
|
2
|
+
import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom-DxMLMJ3r.js';
|
|
3
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
4
4
|
|
|
5
5
|
const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
|
|
6
|
-
const BcmPopoverStyle0 = popoverCss;
|
|
7
6
|
|
|
8
7
|
const Popover = class {
|
|
9
8
|
constructor(hostRef) {
|
|
@@ -180,8 +179,9 @@ const Popover = class {
|
|
|
180
179
|
}
|
|
181
180
|
get el() { return getElement(this); }
|
|
182
181
|
};
|
|
183
|
-
Popover.style =
|
|
182
|
+
Popover.style = popoverCss;
|
|
184
183
|
|
|
185
184
|
export { Popover as bcm_popover };
|
|
185
|
+
//# sourceMappingURL=bcm-popover.entry.js.map
|
|
186
186
|
|
|
187
187
|
//# sourceMappingURL=bcm-popover.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-popover.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,o/CAAo/C,CAAC;AACxgD,yBAAe,UAAU;;MC8CZ,OAAO;IALpB;;;;;;;;;QAkBE,SAAI,GAAiC,QAAQ,CAAC;;;;;;QAO9C,cAAS,GAAwC,KAAK,CAAC;;;;;;QAOvD,YAAO,GAAsB,OAAO,CAAC;;;;;;QAOrC,eAAU,GAAW,GAAG,CAAC;;;;;;QAOzB,SAAI,GAAY,KAAK,CAAC;QA2Cd,kBAAa,GAAG;YACtB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;aAC7B;YACD,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;QAEM,gBAAW,GAAG;YACpB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;gBAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SACrB,CAAC;QAEM,gBAAW,GAAG;YACpB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;aAC7B,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SACrB,CAAC;QAsBM,qBAAgB,GAAG;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAgB,CAAC;YAEhD,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;gBACpE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACvE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAEvE,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;oBAC5B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;oBACjE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;iBACxE;gBAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;oBAC5B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;oBACpE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;iBACrE;gBAED,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;oBAClD,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;iBAC3G;aACF;SACF,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAY;YACxC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;gBACxD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE9E,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE;gBACzG,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aACzJ,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBACvC,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,GAAG,EAAE,GAAG,CAAC,IAAI;aACd,CAAC,CAAC;YAEH,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACxE,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAwC,CAAC;YACrF,MAAM,UAAU,GAAG;gBACjB,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,OAAO;aACd,CAAC,aAAa,CAAC,CAAC;YAEjB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACrC,IAAI,EAAE,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,EAAE;gBACzC,GAAG,EAAE,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,EAAE;gBACxC,CAAC,UAAU,GAAG,MAAM;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,EAAE,CAAC;YACxB,KAAK,EAAE;gBACL,GAAG,EAAE,wHAAwH;gBAC7H,MAAM,EAAE,0BAA0B;gBAClC,OAAO,EAAE,wBAAwB;gBACjC,KAAK,EAAE,wDAAwD;aAChE;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;oBAC7B,MAAM,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;oBAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;iBAC9B;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;oBACrB,KAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE;iBACzB;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;aACd;SACF,CAAC,CAAC;KAuBJ;IAzKC,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC7D;IAED,oBAAoB;;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACvE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SACxE;QACD,MAAA,IAAI,CAAC,iBAAiB,oDAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACjC;;;;;;IAmCD,MAAM,SAAS;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;;;;;;IAQD,MAAM,UAAU;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAuFD,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;YACxD,MAAM,EAAE,IAAI,CAAC,IAAI;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QAEH,QACE,4DAAK,KAAK,EAAC,UAAU,IACnB,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAS,EAC1D,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAC/H,4DAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,GAAO,EAC7E,4DAAK,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,QAAQ,IACjC,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAQ,CACxC,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IACnC,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACtC,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.openPopup(); // Opens the popover\n * popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() el: HTMLElement;\n private targetElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'click'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'click';\n /**\n * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n * Adds a delay to prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n hoverDelay: number = 150;\n /**\n * @prop {boolean} open - Indicates whether the popover is currently open.\n * Can be set programmatically or toggled by user interaction. Mutable.\n * Default: false\n */\n @Prop({ mutable: true })\n open: boolean = false;\n /**\n * @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n */\n @Prop()\n headerText: string;\n /**\n * @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n */\n @Prop()\n message: string;\n /**\n * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n */\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverOpen: EventEmitter<void>;\n\n /**\n * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n */\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverClose: EventEmitter<void>;\n\n connectedCallback() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private togglePopover = () => {\n this.open = !this.open;\n if (this.open) {\n this.bcmPopoverOpen.emit();\n } else {\n this.bcmPopoverClose.emit();\n }\n this.updatePosition();\n };\n\n private showPopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.bcmPopoverOpen.emit();\n this.updatePosition();\n }, this.hoverDelay);\n };\n\n private hidePopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.bcmPopoverClose.emit();\n }, this.hoverDelay);\n };\n\n /**\n * @method {Promise<void>} openPopup - Programmatically opens the popover.\n * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is opened.\n */\n @Method()\n async openPopup() {\n this.showPopover();\n }\n\n /**\n * @method {Promise<void>} closePopup - Programmatically closes the popover.\n * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is closed.\n */\n @Method()\n async closePopup() {\n this.hidePopover();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.togglePopover);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showPopover);\n this.targetElement.addEventListener('mouseleave', this.hidePopover);\n }\n\n if (this.popoverElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private popoverClass = tv({\n slots: {\n box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n isOpen: {\n true: { box: 'flex' },\n false: { box: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n });\n\n render() {\n const { box, header, content, arrow } = this.popoverClass({\n isOpen: this.open,\n size: this.size,\n });\n\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <div class={header()} part=\"header\">\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n <div class={content()} part=\"content\">\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"version":3,"file":"bcm-popover.entry.js","sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.openPopup(); // Opens the popover\n * popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() el: HTMLElement;\n private targetElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'click'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'click';\n /**\n * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n * Adds a delay to prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n hoverDelay: number = 150;\n /**\n * @prop {boolean} open - Indicates whether the popover is currently open.\n * Can be set programmatically or toggled by user interaction. Mutable.\n * Default: false\n */\n @Prop({ mutable: true })\n open: boolean = false;\n /**\n * @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n */\n @Prop()\n headerText: string;\n /**\n * @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n */\n @Prop()\n message: string;\n /**\n * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n */\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverOpen: EventEmitter<void>;\n\n /**\n * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n */\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverClose: EventEmitter<void>;\n\n connectedCallback() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private togglePopover = () => {\n this.open = !this.open;\n if (this.open) {\n this.bcmPopoverOpen.emit();\n } else {\n this.bcmPopoverClose.emit();\n }\n this.updatePosition();\n };\n\n private showPopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.bcmPopoverOpen.emit();\n this.updatePosition();\n }, this.hoverDelay);\n };\n\n private hidePopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.bcmPopoverClose.emit();\n }, this.hoverDelay);\n };\n\n /**\n * @method {Promise<void>} openPopup - Programmatically opens the popover.\n * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is opened.\n */\n @Method()\n async openPopup() {\n this.showPopover();\n }\n\n /**\n * @method {Promise<void>} closePopup - Programmatically closes the popover.\n * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is closed.\n */\n @Method()\n async closePopup() {\n this.hidePopover();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.togglePopover);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showPopover);\n this.targetElement.addEventListener('mouseleave', this.hidePopover);\n }\n\n if (this.popoverElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private popoverClass = tv({\n slots: {\n box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n isOpen: {\n true: { box: 'flex' },\n false: { box: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n });\n\n render() {\n const { box, header, content, arrow } = this.popoverClass({\n isOpen: this.open,\n size: this.size,\n });\n\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <div class={header()} part=\"header\">\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n <div class={content()} part=\"content\">\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h,
|
|
2
|
-
import { t as tv } from './tv-
|
|
3
|
-
import { g as generateId } from './generate-id-
|
|
4
|
-
import { c as classNames } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
|
|
2
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
3
|
+
import { g as generateId } from './generate-id-IBjzkjef.js';
|
|
4
|
+
import { c as classNames } from './index-BfTCfPZ1.js';
|
|
5
5
|
|
|
6
6
|
const radioGroupCss = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
|
|
7
|
-
const BcmRadioGroupStyle0 = radioGroupCss;
|
|
8
7
|
|
|
9
8
|
const BcmRadioGroup = class {
|
|
10
9
|
constructor(hostRef) {
|
|
@@ -160,8 +159,9 @@ const BcmRadioGroup = class {
|
|
|
160
159
|
"value": ["handleValueChange"]
|
|
161
160
|
}; }
|
|
162
161
|
};
|
|
163
|
-
BcmRadioGroup.style =
|
|
162
|
+
BcmRadioGroup.style = radioGroupCss;
|
|
164
163
|
|
|
165
164
|
export { BcmRadioGroup as bcm_radio_group };
|
|
165
|
+
//# sourceMappingURL=bcm-radio-group.entry.js.map
|
|
166
166
|
|
|
167
167
|
//# sourceMappingURL=bcm-radio-group.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'bcm-radio-group',\n styleUrl: 'radio-group.css',\n shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n @Element() host: HTMLBcmRadioGroupElement;\n\n /**\n * The name attribute for the radio group, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n name: string;\n\n /**\n * The currently selected value of the radio group.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n value: string;\n\n /**\n * Whether the radio group and its radio buttons are disabled.\n * @prop\n * @defaultValue false\n */\n @Prop()\n disabled: boolean = false;\n\n /**\n * Whether the radio group is required in a form.\n * @prop\n * @defaultValue false\n */\n @Prop()\n required: boolean = false;\n\n /**\n * Whether the radio group is in an error state.\n * @prop\n * @defaultValue false\n */\n @Prop()\n error: boolean = false;\n\n /**\n * The label text to display above the radio group.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n label: string;\n\n /**\n * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @prop\n * @defaultValue 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @prop\n * @defaultValue 'vertical'\n */\n @Prop()\n direction: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Optional caption text to display below the radio group, often used for error messages or hints.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n captionText?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioGroupChange',\n })\n bcmRadioGroupChange: EventEmitter<any>;\n\n private readonly radioGroupName = generateId('radio-group-name');\n\n get radios() {\n return this.host.querySelectorAll('bcm-radio');\n }\n\n componentWillLoad() {\n if (this.value) {\n this.updateRadios(this.value);\n }\n }\n\n /**\n * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n * @method\n */\n @Method()\n async setClear() {\n this.value = '';\n this.radios?.forEach(radio => {\n radio.checked = false;\n });\n }\n\n /**\n * Resets the error state and caption.\n * @method\n */\n @Method()\n async resetCaption() {\n this.error = false;\n this.captionText = undefined;\n }\n\n private handleSlotChange = () => {\n this.radios.forEach(radio => {\n radio.size = this.size;\n radio.name = this.name ?? this.radioGroupName;\n radio.disabled = this.disabled;\n radio.error = this.error;\n });\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.updateRadios(newValue);\n }\n\n @Listen('bcmRadioChange', { capture: true })\n handleRadioChange(event: CustomEvent) {\n const radio = event.target as HTMLBcmRadioElement;\n const radios = this.host.querySelectorAll('bcm-radio');\n radios.forEach(r => {\n if (r !== radio) {\n r.checked = false;\n }\n });\n this.bcmRadioGroupChange.emit({\n value: radio.value,\n element: radio,\n });\n }\n\n private updateRadios(value: string) {\n this.radios.forEach(radio => {\n radio.checked = radio.value === value;\n });\n }\n\n private radioGroupClass = tv({\n slots: {\n host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n container: ['flex'],\n },\n variants: {\n size: {\n small: {\n host: 'gap-1.5',\n container: 'gap-1.5',\n },\n medium: {\n host: 'gap-2',\n container: 'gap-2',\n },\n large: {\n host: 'gap-2.5',\n container: 'gap-2.5',\n },\n },\n direction: {\n horizontal: {\n container: ['flex-row flex-wrap'],\n },\n vertical: {\n container: ['flex-col'],\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n direction: 'vertical',\n },\n });\n\n render() {\n const { host, container } = this.radioGroupClass({\n size: this.size,\n direction: this.direction,\n });\n return (\n <div class={host()}>\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n <div class={container()}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n\n {this.captionText && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled,\n 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"version":3,"file":"bcm-radio-group.entry.js","sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'bcm-radio-group',\n styleUrl: 'radio-group.css',\n shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n @Element() host: HTMLBcmRadioGroupElement;\n\n /**\n * The name attribute for the radio group, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n name: string;\n\n /**\n * The currently selected value of the radio group.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n value: string;\n\n /**\n * Whether the radio group and its radio buttons are disabled.\n * @prop\n * @defaultValue false\n */\n @Prop()\n disabled: boolean = false;\n\n /**\n * Whether the radio group is required in a form.\n * @prop\n * @defaultValue false\n */\n @Prop()\n required: boolean = false;\n\n /**\n * Whether the radio group is in an error state.\n * @prop\n * @defaultValue false\n */\n @Prop()\n error: boolean = false;\n\n /**\n * The label text to display above the radio group.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n label: string;\n\n /**\n * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @prop\n * @defaultValue 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @prop\n * @defaultValue 'vertical'\n */\n @Prop()\n direction: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Optional caption text to display below the radio group, often used for error messages or hints.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n captionText?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioGroupChange',\n })\n bcmRadioGroupChange: EventEmitter<any>;\n\n private readonly radioGroupName = generateId('radio-group-name');\n\n get radios() {\n return this.host.querySelectorAll('bcm-radio');\n }\n\n componentWillLoad() {\n if (this.value) {\n this.updateRadios(this.value);\n }\n }\n\n /**\n * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n * @method\n */\n @Method()\n async setClear() {\n this.value = '';\n this.radios?.forEach(radio => {\n radio.checked = false;\n });\n }\n\n /**\n * Resets the error state and caption.\n * @method\n */\n @Method()\n async resetCaption() {\n this.error = false;\n this.captionText = undefined;\n }\n\n private handleSlotChange = () => {\n this.radios.forEach(radio => {\n radio.size = this.size;\n radio.name = this.name ?? this.radioGroupName;\n radio.disabled = this.disabled;\n radio.error = this.error;\n });\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.updateRadios(newValue);\n }\n\n @Listen('bcmRadioChange', { capture: true })\n handleRadioChange(event: CustomEvent) {\n const radio = event.target as HTMLBcmRadioElement;\n const radios = this.host.querySelectorAll('bcm-radio');\n radios.forEach(r => {\n if (r !== radio) {\n r.checked = false;\n }\n });\n this.bcmRadioGroupChange.emit({\n value: radio.value,\n element: radio,\n });\n }\n\n private updateRadios(value: string) {\n this.radios.forEach(radio => {\n radio.checked = radio.value === value;\n });\n }\n\n private radioGroupClass = tv({\n slots: {\n host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n container: ['flex'],\n },\n variants: {\n size: {\n small: {\n host: 'gap-1.5',\n container: 'gap-1.5',\n },\n medium: {\n host: 'gap-2',\n container: 'gap-2',\n },\n large: {\n host: 'gap-2.5',\n container: 'gap-2.5',\n },\n },\n direction: {\n horizontal: {\n container: ['flex-row flex-wrap'],\n },\n vertical: {\n container: ['flex-col'],\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n direction: 'vertical',\n },\n });\n\n render() {\n const { host, container } = this.radioGroupClass({\n size: this.size,\n direction: this.direction,\n });\n return (\n <div class={host()}>\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n <div class={container()}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n\n {this.captionText && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled,\n 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h,
|
|
2
|
-
import { t as tv } from './tv-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
|
|
2
|
+
import { t as tv } from './tv-CEcVC0yX.js';
|
|
3
3
|
|
|
4
4
|
const radioCss = ".block{display:block}:host{display:block}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
|
|
5
|
-
const BcmRadioStyle0 = radioCss;
|
|
6
5
|
|
|
7
6
|
const BcmRadio = class {
|
|
8
7
|
constructor(hostRef) {
|
|
@@ -162,8 +161,9 @@ const BcmRadio = class {
|
|
|
162
161
|
}
|
|
163
162
|
get host() { return getElement(this); }
|
|
164
163
|
};
|
|
165
|
-
BcmRadio.style =
|
|
164
|
+
BcmRadio.style = radioCss;
|
|
166
165
|
|
|
167
166
|
export { BcmRadio as bcm_radio };
|
|
167
|
+
//# sourceMappingURL=bcm-radio.entry.js.map
|
|
168
168
|
|
|
169
169
|
//# sourceMappingURL=bcm-radio.entry.js.map
|