bromcom-ui-next 0.1.4 → 0.1.6
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/bromcom-ui.css +1 -1
- 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/p-0d0d6483.entry.js +2 -0
- package/dist/bromcom-ui/{p-3b607038.entry.js.map → p-0d0d6483.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-13784cd7.entry.js +2 -0
- package/dist/bromcom-ui/p-13784cd7.entry.js.map +1 -0
- package/dist/bromcom-ui/p-13a245f6.js +2 -0
- package/dist/bromcom-ui/p-13a245f6.js.map +1 -0
- package/dist/bromcom-ui/p-25038cc8.entry.js +2 -0
- package/dist/bromcom-ui/p-25038cc8.entry.js.map +1 -0
- package/dist/bromcom-ui/p-308f865b.entry.js +2 -0
- package/dist/bromcom-ui/p-308f865b.entry.js.map +1 -0
- package/dist/bromcom-ui/p-385fa0f3.entry.js +2 -0
- package/dist/bromcom-ui/p-385fa0f3.entry.js.map +1 -0
- package/dist/bromcom-ui/p-389f1976.entry.js +2 -0
- package/dist/bromcom-ui/p-389f1976.entry.js.map +1 -0
- package/dist/bromcom-ui/p-3b230145.entry.js +2 -0
- package/dist/bromcom-ui/p-3b230145.entry.js.map +1 -0
- package/dist/bromcom-ui/p-49b0e982.entry.js +2 -0
- package/dist/bromcom-ui/p-49b0e982.entry.js.map +1 -0
- package/dist/bromcom-ui/p-55c4263c.entry.js +2 -0
- package/dist/bromcom-ui/p-55c4263c.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-ebed10d5.entry.js → p-58ee24a8.entry.js} +2 -2
- package/dist/bromcom-ui/{p-ebed10d5.entry.js.map → p-58ee24a8.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-729a870f.js.map +1 -1
- package/dist/bromcom-ui/p-9551c35e.entry.js +2 -0
- package/dist/bromcom-ui/p-9551c35e.entry.js.map +1 -0
- package/dist/bromcom-ui/p-9594cebb.js +2 -0
- package/dist/bromcom-ui/p-9594cebb.js.map +1 -0
- package/dist/bromcom-ui/p-98c76392.entry.js +2 -0
- package/dist/bromcom-ui/p-98c76392.entry.js.map +1 -0
- package/dist/bromcom-ui/p-a29e61a4.entry.js +2 -0
- package/dist/bromcom-ui/{p-cd437280.entry.js.map → p-a29e61a4.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-ba2410ef.js +2 -0
- package/dist/bromcom-ui/p-ba2410ef.js.map +1 -0
- package/dist/bromcom-ui/p-bd0f7e78.entry.js +2 -0
- package/dist/bromcom-ui/p-bd0f7e78.entry.js.map +1 -0
- package/dist/bromcom-ui/p-bf69fc8a.entry.js +2 -0
- package/dist/bromcom-ui/p-bf69fc8a.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-5d0838e9.entry.js → p-c1161950.entry.js} +2 -2
- package/dist/bromcom-ui/{p-5d0838e9.entry.js.map → p-c1161950.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-c2b3945e.entry.js +2 -0
- package/dist/bromcom-ui/p-c2b3945e.entry.js.map +1 -0
- package/dist/bromcom-ui/p-c427ffee.entry.js +2 -0
- package/dist/bromcom-ui/{p-dcea8d62.entry.js.map → p-c427ffee.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-c444235a.entry.js +2 -0
- package/dist/bromcom-ui/p-c444235a.entry.js.map +1 -0
- package/dist/bromcom-ui/p-c995a48c.entry.js +2 -0
- package/dist/bromcom-ui/p-c995a48c.entry.js.map +1 -0
- package/dist/bromcom-ui/p-c9b736d9.js +3 -0
- package/dist/{cjs/index-4795c073.js.map → bromcom-ui/p-c9b736d9.js.map} +1 -1
- package/dist/bromcom-ui/p-cd271b49.entry.js +2 -0
- package/dist/bromcom-ui/p-cd271b49.entry.js.map +1 -0
- package/dist/bromcom-ui/p-cee68279.entry.js +2 -0
- package/dist/bromcom-ui/{p-1d86c1cf.entry.js.map → p-cee68279.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-a590f793.entry.js → p-d57587e5.entry.js} +2 -2
- package/dist/bromcom-ui/{p-a590f793.entry.js.map → p-d57587e5.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-e89ab4a7.entry.js +2 -0
- package/dist/bromcom-ui/p-e89ab4a7.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-1b11150b.entry.js → p-f2d8aa70.entry.js} +2 -2
- package/dist/bromcom-ui/{p-1b11150b.entry.js.map → p-f2d8aa70.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-f4e8a47d.entry.js +2 -0
- package/dist/bromcom-ui/p-f4e8a47d.entry.js.map +1 -0
- package/dist/cjs/app-globals-29edfda4.js.map +1 -1
- package/dist/cjs/bcm-accordion-group.cjs.entry.js +2 -2
- package/dist/cjs/bcm-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-accordion.cjs.entry.js +2 -2
- package/dist/cjs/bcm-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-alert.cjs.entry.js +2 -2
- package/dist/cjs/bcm-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-avatar_4.cjs.entry.js +13 -7
- package/dist/cjs/bcm-avatar_4.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-button-group.cjs.entry.js +97 -0
- package/dist/cjs/bcm-button-group.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-checkbox.cjs.entry.js +226 -0
- package/dist/cjs/bcm-checkbox.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-chip.cjs.entry.js +3 -3
- package/dist/cjs/bcm-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-divider.cjs.entry.js +3 -3
- package/dist/cjs/bcm-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js +63 -0
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-dropdown.cjs.entry.js +56 -0
- package/dist/cjs/bcm-dropdown.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-input.cjs.entry.js +7 -6
- package/dist/cjs/bcm-input.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-linked.cjs.entry.js +91 -0
- package/dist/cjs/bcm-linked.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js +252 -0
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-popover.cjs.entry.js +191 -0
- package/dist/cjs/bcm-popover.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-radio-group.cjs.entry.js +171 -0
- package/dist/cjs/bcm-radio-group.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-radio.cjs.entry.js +173 -0
- package/dist/cjs/bcm-radio.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js +109 -0
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js +146 -0
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-switch.cjs.entry.js +188 -0
- package/dist/cjs/bcm-switch.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-tabs-content.cjs.entry.js +22 -0
- package/dist/cjs/bcm-tabs-content.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-tabs-list.cjs.entry.js +43 -0
- package/dist/cjs/bcm-tabs-list.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +92 -0
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-tabs.cjs.entry.js +211 -0
- package/dist/cjs/bcm-tabs.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-text.cjs.entry.js +3 -3
- package/dist/cjs/bcm-text.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-textarea.cjs.entry.js +8 -7
- package/dist/cjs/bcm-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tooltip.cjs.entry.js +187 -0
- package/dist/cjs/bcm-tooltip.cjs.entry.js.map +1 -0
- package/dist/cjs/bromcom-ui.cjs.js +2 -2
- package/dist/cjs/floating-ui.dom.esm-3ec8404c.js +2085 -0
- package/dist/cjs/floating-ui.dom.esm-3ec8404c.js.map +1 -0
- package/dist/{components/p-31354aaa.js → cjs/generate-id-f6982042.js} +4 -47
- package/dist/cjs/generate-id-f6982042.js.map +1 -0
- package/dist/cjs/{index-4795c073.js → index-9a2c5938.js} +36 -7
- package/dist/{bromcom-ui/p-15fe392b.js.map → cjs/index-9a2c5938.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/validation-messages-18389279.js +52 -0
- package/dist/cjs/validation-messages-18389279.js.map +1 -0
- package/dist/collection/collection-manifest.json +18 -1
- package/dist/collection/components/accordion/accordion.css +1 -1
- package/dist/collection/components/accordion-group/accordion-group.css +1 -1
- package/dist/collection/components/alert/alert.css +1 -1
- package/dist/collection/components/avatar/avatar.css +1 -1
- package/dist/collection/components/badge/badge.css +1 -1
- package/dist/collection/components/basic-badge/basic-badge.css +1 -1
- package/dist/collection/components/button/button.component.js +33 -2
- package/dist/collection/components/button/button.component.js.map +1 -1
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/button/types.js.map +1 -1
- package/dist/collection/components/button-group/button-group.component.js +252 -0
- package/dist/collection/components/button-group/button-group.component.js.map +1 -0
- package/dist/collection/components/button-group/button-group.css +1 -0
- package/dist/collection/components/button-group/types.js +2 -0
- package/dist/collection/components/button-group/types.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.component.js +440 -0
- package/dist/collection/components/checkbox/checkbox.component.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.css +1 -0
- package/dist/collection/components/chip/chip.component.js +1 -1
- package/dist/collection/components/chip/chip.css +1 -1
- package/dist/collection/components/divider/divider.component.js +1 -1
- package/dist/collection/components/divider/divider.css +1 -1
- package/dist/collection/components/dropdown/dropdown.component.js +110 -0
- package/dist/collection/components/dropdown/dropdown.component.js.map +1 -0
- package/dist/collection/components/dropdown/dropdown.css +1 -0
- package/dist/collection/components/dropdown-item/dropdown-item.component.js +198 -0
- package/dist/collection/components/dropdown-item/dropdown-item.component.js.map +1 -0
- package/dist/collection/components/dropdown-item/dropdown-item.css +1 -0
- package/dist/collection/components/input/input.component.js +2 -2
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/linked/linked.component.js +140 -0
- package/dist/collection/components/linked/linked.component.js.map +1 -0
- package/dist/collection/components/linked/linked.css +1 -0
- package/dist/collection/components/pop-confirm/pop-confirm.component.js +629 -0
- package/dist/collection/components/pop-confirm/pop-confirm.component.js.map +1 -0
- package/dist/collection/components/pop-confirm/pop-confirm.css +1 -0
- package/dist/collection/components/popover/popover.component.js +477 -0
- package/dist/collection/components/popover/popover.component.js.map +1 -0
- package/dist/collection/components/popover/popover.css +1 -0
- package/dist/collection/components/radio/radio.component.js +502 -0
- package/dist/collection/components/radio/radio.component.js.map +1 -0
- package/dist/collection/components/radio/radio.css +1 -0
- package/dist/collection/components/radio-group/radio-group.component.js +523 -0
- package/dist/collection/components/radio-group/radio-group.component.js.map +1 -0
- package/dist/collection/components/radio-group/radio-group.css +1 -0
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js +253 -0
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js.map +1 -0
- package/dist/collection/components/segmented-picker/segmented-picker-option.css +1 -0
- package/dist/collection/components/segmented-picker/segmented-picker.component.js +269 -0
- package/dist/collection/components/segmented-picker/segmented-picker.component.js.map +1 -0
- package/dist/collection/components/segmented-picker/segmented-picker.css +1 -0
- package/dist/collection/components/segmented-picker/types.js +2 -0
- package/dist/collection/components/segmented-picker/types.js.map +1 -0
- package/dist/collection/components/switch/switch.component.js +452 -0
- package/dist/collection/components/switch/switch.component.js.map +1 -0
- package/dist/collection/components/switch/switch.css +1 -0
- package/dist/collection/components/tabs/bcm-tabs.css +1 -0
- package/dist/collection/components/tabs/tabs-content.component.js +46 -0
- package/dist/collection/components/tabs/tabs-content.component.js.map +1 -0
- package/dist/collection/components/tabs/tabs-content.css +1 -0
- package/dist/collection/components/tabs/tabs-list.component.js +46 -0
- package/dist/collection/components/tabs/tabs-list.component.js.map +1 -0
- package/dist/collection/components/tabs/tabs-list.css +1 -0
- package/dist/collection/components/tabs/tabs-trigger.component.js +195 -0
- package/dist/collection/components/tabs/tabs-trigger.component.js.map +1 -0
- package/dist/collection/components/tabs/tabs-trigger.css +1 -0
- package/dist/collection/components/tabs/tabs.component.js +422 -0
- package/dist/collection/components/tabs/tabs.component.js.map +1 -0
- package/dist/collection/components/text/text.component.js +1 -1
- package/dist/collection/components/text/text.css +1 -1
- package/dist/collection/components/textarea/textarea.component.js +3 -3
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/tooltip/tooltip.component.js +385 -0
- package/dist/collection/components/tooltip/tooltip.component.js.map +1 -0
- package/dist/collection/components/tooltip/tooltip.css +1 -0
- package/dist/collection/styles/theme-variables.js +29 -0
- package/dist/collection/styles/theme-variables.js.map +1 -1
- package/dist/components/bcm-accordion-group.js +2 -2
- package/dist/components/bcm-accordion-group.js.map +1 -1
- package/dist/components/bcm-accordion.js +2 -2
- package/dist/components/bcm-accordion.js.map +1 -1
- package/dist/components/bcm-alert.js +2 -2
- package/dist/components/bcm-alert.js.map +1 -1
- package/dist/components/bcm-avatar.js +3 -3
- package/dist/components/bcm-avatar.js.map +1 -1
- package/dist/components/bcm-badge.js +1 -1
- package/dist/components/bcm-basic-badge.js +2 -2
- package/dist/components/bcm-basic-badge.js.map +1 -1
- package/dist/components/bcm-button-group.d.ts +11 -0
- package/dist/components/bcm-button-group.js +120 -0
- package/dist/components/bcm-button-group.js.map +1 -0
- package/dist/components/bcm-button.js +1 -327
- package/dist/components/bcm-button.js.map +1 -1
- package/dist/components/bcm-checkbox.d.ts +11 -0
- package/dist/components/bcm-checkbox.js +256 -0
- package/dist/components/bcm-checkbox.js.map +1 -0
- package/dist/components/bcm-chip.js +3 -3
- package/dist/components/bcm-chip.js.map +1 -1
- package/dist/components/bcm-divider.js +3 -3
- package/dist/components/bcm-divider.js.map +1 -1
- package/dist/components/bcm-dropdown-item.d.ts +11 -0
- package/dist/components/bcm-dropdown-item.js +85 -0
- package/dist/components/bcm-dropdown-item.js.map +1 -0
- package/dist/components/bcm-dropdown.d.ts +11 -0
- package/dist/components/bcm-dropdown.js +87 -0
- package/dist/components/bcm-dropdown.js.map +1 -0
- package/dist/components/bcm-input.js +6 -5
- package/dist/components/bcm-input.js.map +1 -1
- package/dist/components/bcm-linked.d.ts +11 -0
- package/dist/components/bcm-linked.js +8 -0
- package/dist/components/bcm-linked.js.map +1 -0
- package/dist/components/bcm-pop-confirm.d.ts +11 -0
- package/dist/components/bcm-pop-confirm.js +288 -0
- package/dist/components/bcm-pop-confirm.js.map +1 -0
- package/dist/components/bcm-popover.d.ts +11 -0
- package/dist/components/bcm-popover.js +216 -0
- package/dist/components/bcm-popover.js.map +1 -0
- package/dist/components/bcm-radio-group.d.ts +11 -0
- package/dist/components/bcm-radio-group.js +200 -0
- package/dist/components/bcm-radio-group.js.map +1 -0
- package/dist/components/bcm-radio.d.ts +11 -0
- package/dist/components/bcm-radio.js +198 -0
- package/dist/components/bcm-radio.js.map +1 -0
- package/dist/components/bcm-segmented-picker-option.d.ts +11 -0
- package/dist/components/bcm-segmented-picker-option.js +131 -0
- package/dist/components/bcm-segmented-picker-option.js.map +1 -0
- package/dist/components/bcm-segmented-picker.d.ts +11 -0
- package/dist/components/bcm-segmented-picker.js +170 -0
- package/dist/components/bcm-segmented-picker.js.map +1 -0
- package/dist/components/bcm-switch.d.ts +11 -0
- package/dist/components/bcm-switch.js +215 -0
- package/dist/components/bcm-switch.js.map +1 -0
- package/dist/components/bcm-tabs-content.d.ts +11 -0
- package/dist/components/bcm-tabs-content.js +39 -0
- package/dist/components/bcm-tabs-content.js.map +1 -0
- package/dist/components/bcm-tabs-list.d.ts +11 -0
- package/dist/components/bcm-tabs-list.js +58 -0
- package/dist/components/bcm-tabs-list.js.map +1 -0
- package/dist/components/bcm-tabs-trigger.d.ts +11 -0
- package/dist/components/bcm-tabs-trigger.js +112 -0
- package/dist/components/bcm-tabs-trigger.js.map +1 -0
- package/dist/components/bcm-tabs.d.ts +11 -0
- package/dist/components/bcm-tabs.js +239 -0
- package/dist/components/bcm-tabs.js.map +1 -0
- package/dist/components/bcm-text.js +3 -3
- package/dist/components/bcm-text.js.map +1 -1
- package/dist/components/bcm-textarea.js +7 -6
- package/dist/components/bcm-textarea.js.map +1 -1
- package/dist/components/bcm-tooltip.d.ts +11 -0
- package/dist/components/bcm-tooltip.js +211 -0
- package/dist/components/bcm-tooltip.js.map +1 -0
- package/dist/components/index.js +1 -1
- package/dist/components/p-13a245f6.js +48 -0
- package/dist/components/p-13a245f6.js.map +1 -0
- package/dist/components/{p-39637e05.js → p-49f20ff7.js} +3 -3
- package/dist/components/{p-39637e05.js.map → p-49f20ff7.js.map} +1 -1
- package/dist/components/{p-13582168.js → p-5377117d.js} +32 -6
- package/dist/components/p-5377117d.js.map +1 -0
- package/dist/components/p-5f7a0d0d.js +107 -0
- package/dist/components/p-5f7a0d0d.js.map +1 -0
- package/dist/components/p-9594cebb.js +2078 -0
- package/dist/components/p-9594cebb.js.map +1 -0
- package/dist/{esm/validation-messages-a29d53be.js → components/p-ba2410ef.js} +2 -47
- package/dist/components/p-ba2410ef.js.map +1 -0
- package/dist/components/p-c3a60937.js +338 -0
- package/dist/components/p-c3a60937.js.map +1 -0
- package/dist/esm/app-globals-bfa07b76.js.map +1 -1
- package/dist/esm/bcm-accordion-group.entry.js +2 -2
- package/dist/esm/bcm-accordion-group.entry.js.map +1 -1
- package/dist/esm/bcm-accordion.entry.js +2 -2
- package/dist/esm/bcm-accordion.entry.js.map +1 -1
- package/dist/esm/bcm-alert.entry.js +2 -2
- package/dist/esm/bcm-alert.entry.js.map +1 -1
- package/dist/esm/bcm-avatar_4.entry.js +13 -7
- package/dist/esm/bcm-avatar_4.entry.js.map +1 -1
- package/dist/esm/bcm-button-group.entry.js +93 -0
- package/dist/esm/bcm-button-group.entry.js.map +1 -0
- package/dist/esm/bcm-checkbox.entry.js +222 -0
- package/dist/esm/bcm-checkbox.entry.js.map +1 -0
- package/dist/esm/bcm-chip.entry.js +3 -3
- package/dist/esm/bcm-chip.entry.js.map +1 -1
- package/dist/esm/bcm-divider.entry.js +3 -3
- package/dist/esm/bcm-divider.entry.js.map +1 -1
- package/dist/esm/bcm-dropdown-item.entry.js +59 -0
- package/dist/esm/bcm-dropdown-item.entry.js.map +1 -0
- package/dist/esm/bcm-dropdown.entry.js +52 -0
- package/dist/esm/bcm-dropdown.entry.js.map +1 -0
- package/dist/esm/bcm-input.entry.js +6 -5
- package/dist/esm/bcm-input.entry.js.map +1 -1
- package/dist/esm/bcm-linked.entry.js +87 -0
- package/dist/esm/bcm-linked.entry.js.map +1 -0
- package/dist/esm/bcm-pop-confirm.entry.js +248 -0
- package/dist/esm/bcm-pop-confirm.entry.js.map +1 -0
- package/dist/esm/bcm-popover.entry.js +187 -0
- package/dist/esm/bcm-popover.entry.js.map +1 -0
- package/dist/esm/bcm-radio-group.entry.js +167 -0
- package/dist/esm/bcm-radio-group.entry.js.map +1 -0
- package/dist/esm/bcm-radio.entry.js +169 -0
- package/dist/esm/bcm-radio.entry.js.map +1 -0
- package/dist/esm/bcm-segmented-picker-option.entry.js +105 -0
- package/dist/esm/bcm-segmented-picker-option.entry.js.map +1 -0
- package/dist/esm/bcm-segmented-picker.entry.js +142 -0
- package/dist/esm/bcm-segmented-picker.entry.js.map +1 -0
- package/dist/esm/bcm-switch.entry.js +184 -0
- package/dist/esm/bcm-switch.entry.js.map +1 -0
- package/dist/esm/bcm-tabs-content.entry.js +18 -0
- package/dist/esm/bcm-tabs-content.entry.js.map +1 -0
- package/dist/esm/bcm-tabs-list.entry.js +39 -0
- package/dist/esm/bcm-tabs-list.entry.js.map +1 -0
- package/dist/esm/bcm-tabs-trigger.entry.js +88 -0
- package/dist/esm/bcm-tabs-trigger.entry.js.map +1 -0
- package/dist/esm/bcm-tabs.entry.js +207 -0
- package/dist/esm/bcm-tabs.entry.js.map +1 -0
- package/dist/esm/bcm-text.entry.js +3 -3
- package/dist/esm/bcm-text.entry.js.map +1 -1
- package/dist/esm/bcm-textarea.entry.js +7 -6
- package/dist/esm/bcm-textarea.entry.js.map +1 -1
- package/dist/esm/bcm-tooltip.entry.js +183 -0
- package/dist/esm/bcm-tooltip.entry.js.map +1 -0
- package/dist/esm/bromcom-ui.js +3 -3
- package/dist/esm/floating-ui.dom.esm-480e0f15.js +2078 -0
- package/dist/esm/floating-ui.dom.esm-480e0f15.js.map +1 -0
- package/dist/{cjs/validation-messages-c36e5c31.js → esm/generate-id-3b2fcb93.js} +2 -52
- package/dist/esm/generate-id-3b2fcb93.js.map +1 -0
- package/dist/esm/{index-27cc1bac.js → index-8571fbf7.js} +36 -8
- package/dist/esm/index-8571fbf7.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/validation-messages-af4512f0.js +48 -0
- package/dist/esm/validation-messages-af4512f0.js.map +1 -0
- package/dist/types/components/button/button.component.d.ts +3 -1
- package/dist/types/components/button/types.d.ts +4 -4
- package/dist/types/components/button-group/button-group.component.d.ts +25 -0
- package/dist/types/components/button-group/types.d.ts +2 -0
- package/dist/types/components/checkbox/checkbox.component.d.ts +99 -0
- package/dist/types/components/dropdown/dropdown.component.d.ts +14 -0
- package/dist/types/components/dropdown-item/dropdown-item.component.d.ts +14 -0
- package/dist/types/components/linked/linked.component.d.ts +16 -0
- package/dist/types/components/pop-confirm/pop-confirm.component.d.ts +195 -0
- package/dist/types/components/popover/popover.component.d.ts +118 -0
- package/dist/types/components/radio/radio.component.d.ts +105 -0
- package/dist/types/components/radio-group/radio-group.component.d.ts +124 -0
- package/dist/types/components/segmented-picker/segmented-picker-option.component.d.ts +30 -0
- package/dist/types/components/segmented-picker/segmented-picker.component.d.ts +35 -0
- package/dist/types/components/segmented-picker/types.d.ts +1 -0
- package/dist/types/components/switch/switch.component.d.ts +62 -0
- package/dist/types/components/tabs/tabs-content.component.d.ts +13 -0
- package/dist/types/components/tabs/tabs-list.component.d.ts +12 -0
- package/dist/types/components/tabs/tabs-trigger.component.d.ts +41 -0
- package/dist/types/components/tabs/tabs.component.d.ts +88 -0
- package/dist/types/components/tooltip/tooltip.component.d.ts +86 -0
- package/dist/types/components.d.ts +2495 -649
- package/dist/types/styles/theme-variables.d.ts +29 -0
- package/package.json +2 -1
- package/dist/bromcom-ui/p-04f6d730.entry.js +0 -2
- package/dist/bromcom-ui/p-04f6d730.entry.js.map +0 -1
- package/dist/bromcom-ui/p-15fe392b.js +0 -3
- package/dist/bromcom-ui/p-1d86c1cf.entry.js +0 -2
- package/dist/bromcom-ui/p-31354aaa.js +0 -2
- package/dist/bromcom-ui/p-31354aaa.js.map +0 -1
- package/dist/bromcom-ui/p-3b607038.entry.js +0 -2
- package/dist/bromcom-ui/p-cd437280.entry.js +0 -2
- package/dist/bromcom-ui/p-dcea8d62.entry.js +0 -2
- package/dist/cjs/validation-messages-c36e5c31.js.map +0 -1
- package/dist/components/p-13582168.js.map +0 -1
- package/dist/components/p-31354aaa.js.map +0 -1
- package/dist/esm/index-27cc1bac.js.map +0 -1
- package/dist/esm/validation-messages-a29d53be.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultIcons","search","email","tel","url","date","time","password","checkSlotContent","element","slotName","slot","_a","shadowRoot","querySelector","assignedNodes","length","inputCss","BcmInputStyle0","BcmInput","constructor","hostRef","this","isFocused","isValid","internalStatus","value","_id","generateId","size","status","fullWidth","type","disabled","readonly","required","useNativeValidation","onInput","event","input","target","bcmInput","emit","validateInput","onChange","bcmChange","onFocus","bcmFocus","onBlur","bcmBlur","onKeyDown","bcmKeyDown","onKeyUp","bcmKeyUp","styleClass","tv","slots","base","inputClass","variants","small","medium","large","default","error","success","warning","info","true","false","focused","defaultVariants","twMerge","handleValueChange","newValue","inputRef","watchStatus","watchErrorMessage","internalErrorMessage","setFocus","focus","setBlur","blur","select","setLocale","locale","messages","setValidationMessages","componentWillLoad","defaultValidationMessages","errorMessage","validationMessage","getValidationMessage","minLength","min","maxLength","max","pattern","RegExp","test","numValue","parseFloat","undefined","hasSlotContent","el","getDefaultIconForType","render","inputId","name","iconSize","h","key","class","label","classNames","htmlFor","prefixIcon","ref","id","placeholder","autocomplete","minlength","maxlength","step","labelledby","describedby","suffixIcon","captionText"],"sources":["src/components/input/types.ts","src/utils/slot/check-slot-content.ts","src/components/input/input.scss?tag=bcm-input&encapsulation=shadow","src/components/input/input.component.tsx"],"sourcesContent":["export type InputSize = 'small' | 'medium' | 'large';\nexport type InputStatus = 'default' | 'error' | 'success' | 'warning' | 'info';\nexport type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';\n\nexport const defaultIcons = {\n 'search': 'fa-regular fa-magnifying-glass',\n 'email': 'fa-regular fa-envelope',\n 'tel': 'fa-regular fa-phone',\n 'url': 'fa-regular fa-link',\n 'date': 'fa-regular fa-calendar',\n 'time': 'fa-regular fa-clock',\n 'datetime-local': 'fa-regular fa-calendar-clock',\n 'password': 'fa-regular fa-lock',\n} as const;\n","/**\n * Checks if a named slot has any content\n * @param element - The host element (component instance)\n * @param slotName - Name of the slot to check\n * @returns boolean indicating if the slot has any assigned nodes\n */\nexport const checkSlotContent = (element: HTMLElement, slotName: string): boolean => {\n const slot = element.shadowRoot?.querySelector(`slot[name=\"${slotName}\"]`) as HTMLSlotElement;\n if (!slot) return false;\n\n const assignedNodes = slot.assignedNodes();\n return assignedNodes.length > 0;\n};\n",":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType, defaultIcons } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-input',\n styleUrl: 'input.scss',\n shadow: true,\n})\nexport class BcmInput {\n @Element() el: HTMLElement;\n private inputRef: HTMLInputElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n\n /** Input value */\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /** Input placeholder text */\n @Prop()\n placeholder?: string;\n\n /** Input name */\n @Prop()\n name?: string;\n\n /** Input id */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('input');\n\n /** Controls the input size */\n @Prop()\n size: InputSize = 'medium';\n\n /** Defines the input's status/state */\n @Prop()\n status: InputStatus = 'default';\n\n /** Full width input */\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /** HTML input type */\n @Prop()\n type: InputType = 'text';\n\n /** Whether the input is disabled */\n @Prop()\n disabled = false;\n\n /** Whether the input is readonly */\n @Prop()\n readonly = false;\n\n /** Whether the input is required */\n @Prop()\n required = false;\n\n /** Input autocomplete attribute */\n @Prop()\n autocomplete?: string;\n\n /** Min length for text input */\n @Prop()\n minLength?: number;\n\n /** Max length for text input */\n @Prop()\n maxLength?: number;\n\n /** Min value for number input */\n @Prop()\n min?: number;\n\n /** Max value for number input */\n @Prop()\n max?: number;\n\n /** Step value for number input */\n @Prop()\n step?: number;\n\n /** Pattern for validation */\n @Prop()\n pattern?: string;\n\n /** Input label for accessibility */\n @Prop()\n label?: string;\n\n /** Error message to display */\n @Prop()\n errorMessage?: string;\n\n /** Caption text to display below input */\n @Prop()\n captionText?: string;\n\n /** ID of associated label element */\n @Prop()\n labelledby?: string;\n\n /** ID of associated caption/error text element */\n @Prop()\n describedby?: string;\n\n /** Prefix icon class name */\n @Prop()\n prefixIcon?: string;\n\n /** Suffix icon class name */\n @Prop()\n suffixIcon?: string;\n\n /** Whether to use native form validation\n * If false, component will handle validation internally\n */\n @Prop()\n useNativeValidation = true;\n\n /** Custom validation function */\n @Prop()\n validator?: (value: string) => string | undefined;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmInput: EventEmitter<InputEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<Event>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n if (this.inputRef) {\n this.inputRef.value = newValue;\n }\n }\n\n @Watch('status')\n watchStatus(newValue: InputStatus) {\n this.internalStatus = newValue;\n }\n\n @Watch('errorMessage')\n watchErrorMessage(newValue: string) {\n this.internalErrorMessage = newValue;\n }\n\n @Method()\n async setFocus() {\n this.inputRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.inputRef?.blur();\n }\n\n @Method()\n async select() {\n this.inputRef?.select();\n }\n\n /** Sets locale and messages for all inputs */\n @Method()\n async setLocale(locale: string, messages: Record<string, string>) {\n // Set messages and update validation immediately\n setValidationMessages(locale, messages);\n\n // Mevcut validasyon mesajını güncelle\n if (!this.isValid) {\n this.validateInput();\n }\n }\n\n componentWillLoad() {\n // I18n için default mesajları set et\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n private validateInput(): void {\n if (!this.inputRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.inputRef.value;\n\n // Required check\n if (this.required && !value) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('required');\n this.internalStatus = 'error';\n this.internalErrorMessage = this.validationMessage;\n return;\n }\n\n // Minimum length check\n else if (this.minLength && value.length < this.minLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n }\n // Maximum length check\n else if (this.maxLength && value.length > this.maxLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n }\n // Pattern check\n else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('pattern');\n }\n // Email check\n else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('email');\n }\n // Number range check\n else if (this.type === 'number' && value) {\n const numValue = parseFloat(value);\n if (this.min !== undefined && numValue < this.min) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('min', { min: this.min });\n } else if (this.max !== undefined && numValue > this.max) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('max', { max: this.max });\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\n }\n\n private onInput = (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.bcmInput.emit(event);\n this.validateInput();\n };\n\n private onChange = (event: Event) => {\n this.bcmChange.emit(event);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.bcmFocus.emit(event);\n };\n\n private onBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.bcmBlur.emit(event);\n this.validateInput();\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n this.bcmKeyDown.emit(event);\n };\n\n private onKeyUp = (event: KeyboardEvent) => {\n this.bcmKeyUp.emit(event);\n };\n\n private hasSlotContent(slotName: string): boolean {\n return checkSlotContent(this.el, slotName);\n }\n\n private styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-input bcm-input__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex items-center justify-between',\n 'transition-colors duration-200',\n 'px-2',\n ],\n inputClass: [\n 'input',\n 'w-full flex-1',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none text-ellipsis',\n 'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n 'font-sans antialiased font-medium',\n 'px-1',\n ],\n },\n variants: {\n size: {\n small: {\n base: '',\n inputClass: 'text-size-4 h-6',\n },\n medium: {\n base: '',\n inputClass: 'text-size-5 h-8',\n },\n large: {\n base: '',\n inputClass: 'text-size-6 h-10',\n },\n },\n status: {\n default: {\n base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n },\n error: {\n base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n },\n success: {\n base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n },\n warning: {\n base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n },\n info: {\n base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n },\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed',\n false: '',\n },\n focused: {\n true: {\n base: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n private getDefaultIconForType(): string | undefined {\n return defaultIcons[this.type as keyof typeof defaultIcons];\n }\n\n render() {\n const inputId = this._id + '-input' || this.name;\n\n const { base, inputClass } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n const iconSize = {\n small: 14,\n medium: 16,\n large: 18,\n }[this.size];\n\n return (\n <div class=\"bcm-ui-element\">\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 htmlFor={inputId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n\n <div class={base()}>\n {(this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (\n <div class=\"flex items-center gap-2 px-2\">\n {(this.prefixIcon || this.getDefaultIconForType()) && (\n <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon || this.getDefaultIconForType()} size={iconSize}></bcm-icon>\n )}\n <slot name=\"prefix\"></slot>\n </div>\n )}\n <input\n ref={el => (this.inputRef = el)}\n id={inputId}\n class={inputClass()}\n type={this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n autocomplete={this.autocomplete}\n minlength={this.minLength}\n maxlength={this.maxLength}\n min={this.min}\n max={this.max}\n step={this.step}\n pattern={this.pattern}\n aria-invalid={this.status === 'error'}\n aria-required={this.required}\n aria-labelledby={this.labelledby}\n aria-describedby={this.describedby}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {(this.hasSlotContent('suffix') || this.suffixIcon) && (\n <div class=\"flex items-center gap-2 px-2\">\n <slot name=\"suffix\"></slot>\n {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={iconSize}></bcm-icon>}\n </div>\n )}\n </div>\n {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n 'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n 'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\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.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["defaultIcons","search","email","tel","url","date","time","password","checkSlotContent","element","slotName","slot","_a","shadowRoot","querySelector","assignedNodes","length","inputCss","BcmInputStyle0","BcmInput","constructor","hostRef","this","isFocused","isValid","internalStatus","value","_id","generateId","size","status","fullWidth","type","disabled","readonly","required","useNativeValidation","onInput","event","input","target","bcmInput","emit","validateInput","onChange","bcmChange","onFocus","bcmFocus","onBlur","bcmBlur","onKeyDown","bcmKeyDown","onKeyUp","bcmKeyUp","styleClass","tv","slots","base","inputClass","variants","small","medium","large","default","error","success","warning","info","true","false","focused","defaultVariants","twMerge","handleValueChange","newValue","inputRef","watchStatus","watchErrorMessage","internalErrorMessage","setFocus","focus","setBlur","blur","select","setLocale","locale","messages","setValidationMessages","componentWillLoad","defaultValidationMessages","errorMessage","validationMessage","getValidationMessage","minLength","min","maxLength","max","pattern","RegExp","test","numValue","parseFloat","undefined","hasSlotContent","el","getDefaultIconForType","render","inputId","name","iconSize","h","key","class","label","classNames","htmlFor","prefixIcon","ref","id","placeholder","autocomplete","minlength","maxlength","step","labelledby","describedby","suffixIcon","captionText"],"sources":["src/components/input/types.ts","src/utils/slot/check-slot-content.ts","src/components/input/input.scss?tag=bcm-input&encapsulation=shadow","src/components/input/input.component.tsx"],"sourcesContent":["export type InputSize = 'small' | 'medium' | 'large';\nexport type InputStatus = 'default' | 'error' | 'success' | 'warning' | 'info';\nexport type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';\n\nexport const defaultIcons = {\n 'search': 'fa-regular fa-magnifying-glass',\n 'email': 'fa-regular fa-envelope',\n 'tel': 'fa-regular fa-phone',\n 'url': 'fa-regular fa-link',\n 'date': 'fa-regular fa-calendar',\n 'time': 'fa-regular fa-clock',\n 'datetime-local': 'fa-regular fa-calendar-clock',\n 'password': 'fa-regular fa-lock',\n} as const;\n","/**\n * Checks if a named slot has any content\n * @param element - The host element (component instance)\n * @param slotName - Name of the slot to check\n * @returns boolean indicating if the slot has any assigned nodes\n */\nexport const checkSlotContent = (element: HTMLElement, slotName: string): boolean => {\n const slot = element.shadowRoot?.querySelector(`slot[name=\"${slotName}\"]`) as HTMLSlotElement;\n if (!slot) return false;\n\n const assignedNodes = slot.assignedNodes();\n return assignedNodes.length > 0;\n};\n",":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType, defaultIcons } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-input',\n styleUrl: 'input.scss',\n shadow: true,\n})\nexport class BcmInput {\n @Element() el: HTMLElement;\n private inputRef: HTMLInputElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n\n /** Input value */\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /** Input placeholder text */\n @Prop()\n placeholder?: string;\n\n /** Input name */\n @Prop()\n name?: string;\n\n /** Input id */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('input');\n\n /** Controls the input size */\n @Prop()\n size: InputSize = 'medium';\n\n /** Defines the input's status/state */\n @Prop()\n status: InputStatus = 'default';\n\n /** Full width input */\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /** HTML input type */\n @Prop()\n type: InputType = 'text';\n\n /** Whether the input is disabled */\n @Prop()\n disabled = false;\n\n /** Whether the input is readonly */\n @Prop()\n readonly = false;\n\n /** Whether the input is required */\n @Prop()\n required = false;\n\n /** Input autocomplete attribute */\n @Prop()\n autocomplete?: string;\n\n /** Min length for text input */\n @Prop()\n minLength?: number;\n\n /** Max length for text input */\n @Prop()\n maxLength?: number;\n\n /** Min value for number input */\n @Prop()\n min?: number;\n\n /** Max value for number input */\n @Prop()\n max?: number;\n\n /** Step value for number input */\n @Prop()\n step?: number;\n\n /** Pattern for validation */\n @Prop()\n pattern?: string;\n\n /** Input label for accessibility */\n @Prop()\n label?: string;\n\n /** Error message to display */\n @Prop()\n errorMessage?: string;\n\n /** Caption text to display below input */\n @Prop()\n captionText?: string;\n\n /** ID of associated label element */\n @Prop()\n labelledby?: string;\n\n /** ID of associated caption/error text element */\n @Prop()\n describedby?: string;\n\n /** Prefix icon class name */\n @Prop()\n prefixIcon?: string;\n\n /** Suffix icon class name */\n @Prop()\n suffixIcon?: string;\n\n /** Whether to use native form validation\n * If false, component will handle validation internally\n */\n @Prop()\n useNativeValidation = true;\n\n /** Custom validation function */\n @Prop()\n validator?: (value: string) => string | undefined;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmInput: EventEmitter<InputEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<Event>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n if (this.inputRef) {\n this.inputRef.value = newValue;\n }\n }\n\n @Watch('status')\n watchStatus(newValue: InputStatus) {\n this.internalStatus = newValue;\n }\n\n @Watch('errorMessage')\n watchErrorMessage(newValue: string) {\n this.internalErrorMessage = newValue;\n }\n\n @Method()\n async setFocus() {\n this.inputRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.inputRef?.blur();\n }\n\n @Method()\n async select() {\n this.inputRef?.select();\n }\n\n /** Sets locale and messages for all inputs */\n @Method()\n async setLocale(locale: string, messages: Record<string, string>) {\n // Set messages and update validation immediately\n setValidationMessages(locale, messages);\n\n // Mevcut validasyon mesajını güncelle\n if (!this.isValid) {\n this.validateInput();\n }\n }\n\n componentWillLoad() {\n // I18n için default mesajları set et\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n private validateInput(): void {\n if (!this.inputRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.inputRef.value;\n\n // Required check\n if (this.required && !value) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('required');\n this.internalStatus = 'error';\n this.internalErrorMessage = this.validationMessage;\n return;\n }\n\n // Minimum length check\n else if (this.minLength && value.length < this.minLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n }\n // Maximum length check\n else if (this.maxLength && value.length > this.maxLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n }\n // Pattern check\n else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('pattern');\n }\n // Email check\n else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('email');\n }\n // Number range check\n else if (this.type === 'number' && value) {\n const numValue = parseFloat(value);\n if (this.min !== undefined && numValue < this.min) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('min', { min: this.min });\n } else if (this.max !== undefined && numValue > this.max) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('max', { max: this.max });\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\n }\n\n private onInput = (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.bcmInput.emit(event);\n this.validateInput();\n };\n\n private onChange = (event: Event) => {\n this.bcmChange.emit(event);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.bcmFocus.emit(event);\n };\n\n private onBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.bcmBlur.emit(event);\n this.validateInput();\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n this.bcmKeyDown.emit(event);\n };\n\n private onKeyUp = (event: KeyboardEvent) => {\n this.bcmKeyUp.emit(event);\n };\n\n private hasSlotContent(slotName: string): boolean {\n return checkSlotContent(this.el, slotName);\n }\n\n private styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-input bcm-input__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex items-center justify-between',\n 'transition-colors duration-200',\n 'px-2',\n ],\n inputClass: [\n 'input',\n 'w-full flex-1',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none text-ellipsis',\n 'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n 'font-sans antialiased font-medium',\n 'px-1',\n ],\n },\n variants: {\n size: {\n small: {\n base: '',\n inputClass: 'text-size-4 h-6',\n },\n medium: {\n base: '',\n inputClass: 'text-size-5 h-8',\n },\n large: {\n base: '',\n inputClass: 'text-size-6 h-10',\n },\n },\n status: {\n default: {\n base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n },\n error: {\n base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n },\n success: {\n base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n },\n warning: {\n base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n },\n info: {\n base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n },\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed',\n false: '',\n },\n focused: {\n true: {\n base: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n private getDefaultIconForType(): string | undefined {\n return defaultIcons[this.type as keyof typeof defaultIcons];\n }\n\n render() {\n const inputId = this._id + '-input' || this.name;\n\n const { base, inputClass } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n const iconSize = {\n small: 14,\n medium: 16,\n large: 18,\n }[this.size];\n\n return (\n <div class=\"bcm-ui-element\">\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 htmlFor={inputId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n\n <div class={base()}>\n {(this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (\n <div class=\"flex items-center gap-2 px-2\">\n {(this.prefixIcon || this.getDefaultIconForType()) && (\n <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon || this.getDefaultIconForType()} size={iconSize}></bcm-icon>\n )}\n <slot name=\"prefix\"></slot>\n </div>\n )}\n <input\n ref={el => (this.inputRef = el)}\n id={inputId}\n class={inputClass()}\n type={this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n autocomplete={this.autocomplete}\n minlength={this.minLength}\n maxlength={this.maxLength}\n min={this.min}\n max={this.max}\n step={this.step}\n pattern={this.pattern}\n aria-invalid={this.status === 'error'}\n aria-required={this.required}\n aria-labelledby={this.labelledby}\n aria-describedby={this.describedby}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {(this.hasSlotContent('suffix') || this.suffixIcon) && (\n <div class=\"flex items-center gap-2 px-2\">\n <slot name=\"suffix\"></slot>\n {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={iconSize}></bcm-icon>}\n </div>\n )}\n </div>\n {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n 'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n 'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\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.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const t=[];for(let r=0;r<256;++r){t.push((r+256).toString(16).slice(1))}function r(r,o=0){return(t[r[o+0]]+t[r[o+1]]+t[r[o+2]]+t[r[o+3]]+"-"+t[r[o+4]]+t[r[o+5]]+"-"+t[r[o+6]]+t[r[o+7]]+"-"+t[r[o+8]]+t[r[o+9]]+"-"+t[r[o+10]]+t[r[o+11]]+t[r[o+12]]+t[r[o+13]]+t[r[o+14]]+t[r[o+15]]).toLowerCase()}let o;const n=new Uint8Array(16);function e(){if(!o){if(typeof crypto==="undefined"||!crypto.getRandomValues){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}o=crypto.getRandomValues.bind(crypto)}return o(n)}const u=typeof crypto!=="undefined"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);const c={randomUUID:u};function f(t,o,n){if(c.randomUUID&&!o&&!t){return c.randomUUID()}t=t||{};const u=t.random??t.rng?.()??e();if(u.length<16){throw new Error("Random bytes length must be >= 16")}u[6]=u[6]&15|64;u[8]=u[8]&63|128;if(o){n=n||0;if(n<0||n+16>o.length){throw new RangeError(`UUID byte range ${n}:${n+15} is out of buffer bounds`)}for(let t=0;t<16;++t){o[n+t]=u[t]}return o}return r(u)}const i=(t="bcm")=>{if(!t){throw new Error("Prefix cannot be empty")}return`${t}-${f()}`};export{i as g};
|
|
2
|
+
//# sourceMappingURL=p-ba2410ef.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["byteToHex","i","push","toString","slice","unsafeStringify","arr","offset","toLowerCase","getRandomValues","rnds8","Uint8Array","rng","crypto","Error","bind","randomUUID","native","v4","options","buf","rnds","random","length","RangeError","generateId","prefix","uuidv4"],"sources":["node_modules/uuid/dist/esm-browser/stringify.js","node_modules/uuid/dist/esm-browser/rng.js","node_modules/uuid/dist/esm-browser/native.js","node_modules/uuid/dist/esm-browser/v4.js","src/utils/id/generate-id.ts"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n return (byteToHex[arr[offset + 0]] +\n byteToHex[arr[offset + 1]] +\n byteToHex[arr[offset + 2]] +\n byteToHex[arr[offset + 3]] +\n '-' +\n byteToHex[arr[offset + 4]] +\n byteToHex[arr[offset + 5]] +\n '-' +\n byteToHex[arr[offset + 6]] +\n byteToHex[arr[offset + 7]] +\n '-' +\n byteToHex[arr[offset + 8]] +\n byteToHex[arr[offset + 9]] +\n '-' +\n byteToHex[arr[offset + 10]] +\n byteToHex[arr[offset + 11]] +\n byteToHex[arr[offset + 12]] +\n byteToHex[arr[offset + 13]] +\n byteToHex[arr[offset + 14]] +\n byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset);\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n if (!getRandomValues) {\n if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n getRandomValues = crypto.getRandomValues.bind(crypto);\n }\n return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n options = options || {};\n const rnds = options.random ?? options.rng?.() ?? rng();\n if (rnds.length < 16) {\n throw new Error('Random bytes length must be >= 16');\n }\n rnds[6] = (rnds[6] & 0x0f) | 0x40;\n rnds[8] = (rnds[8] & 0x3f) | 0x80;\n if (buf) {\n offset = offset || 0;\n if (offset < 0 || offset + 16 > buf.length) {\n throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);\n }\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n return buf;\n }\n return unsafeStringify(rnds);\n}\nexport default v4;\n","import { v4 as uuidv4 } from 'uuid';\n\n/**\n * Generates a unique identifier with an optional prefix.\n * @param prefix - Optional prefix for the generated ID (default: 'bcm')\n * @returns A unique string ID in the format \"prefix-uuid\"\n * @example\n * const id = generateId('button'); // -> \"button-123e4567-e89b...\"\n * const defaultId = generateId(); // -> \"bcm-123e4567-e89b...\"\n */\nexport const generateId = (prefix = 'bcm'): string => {\n if (!prefix) {\n throw new Error('Prefix cannot be empty');\n }\n return `${prefix}-${uuidv4()}`;\n};\n"],"mappings":"AACA,MAAMA,EAAY,GAClB,IAAK,IAAIC,EAAI,EAAGA,EAAI,MAAOA,EAAG,CAC1BD,EAAUE,MAAMD,EAAI,KAAOE,SAAS,IAAIC,MAAM,GAClD,CACO,SAASC,EAAgBC,EAAKC,EAAS,GAC1C,OAAQP,EAAUM,EAAIC,EAAS,IAC3BP,EAAUM,EAAIC,EAAS,IACvBP,EAAUM,EAAIC,EAAS,IACvBP,EAAUM,EAAIC,EAAS,IACvB,IACAP,EAAUM,EAAIC,EAAS,IACvBP,EAAUM,EAAIC,EAAS,IACvB,IACAP,EAAUM,EAAIC,EAAS,IACvBP,EAAUM,EAAIC,EAAS,IACvB,IACAP,EAAUM,EAAIC,EAAS,IACvBP,EAAUM,EAAIC,EAAS,IACvB,IACAP,EAAUM,EAAIC,EAAS,KACvBP,EAAUM,EAAIC,EAAS,KACvBP,EAAUM,EAAIC,EAAS,KACvBP,EAAUM,EAAIC,EAAS,KACvBP,EAAUM,EAAIC,EAAS,KACvBP,EAAUM,EAAIC,EAAS,MAAMC,aACrC,CC1BA,IAAIC,EACJ,MAAMC,EAAQ,IAAIC,WAAW,IACd,SAASC,IACpB,IAAKH,EAAiB,CAClB,UAAWI,SAAW,cAAgBA,OAAOJ,gBAAiB,CAC1D,MAAM,IAAIK,MAAM,2GAC5B,CACQL,EAAkBI,OAAOJ,gBAAgBM,KAAKF,OACtD,CACI,OAAOJ,EAAgBC,EAC3B,CCVA,MAAMM,SAAoBH,SAAW,aAAeA,OAAOG,YAAcH,OAAOG,WAAWD,KAAKF,QAChG,MAAAI,EAAe,CAAED,cCEjB,SAASE,EAAGC,EAASC,EAAKb,GACtB,GAAIU,EAAOD,aAAeI,IAAQD,EAAS,CACvC,OAAOF,EAAOD,YACtB,CACIG,EAAUA,GAAW,GACrB,MAAME,EAAOF,EAAQG,QAAUH,EAAQP,SAAWA,IAClD,GAAIS,EAAKE,OAAS,GAAI,CAClB,MAAM,IAAIT,MAAM,oCACxB,CACIO,EAAK,GAAMA,EAAK,GAAK,GAAQ,GAC7BA,EAAK,GAAMA,EAAK,GAAK,GAAQ,IAC7B,GAAID,EAAK,CACLb,EAASA,GAAU,EACnB,GAAIA,EAAS,GAAKA,EAAS,GAAKa,EAAIG,OAAQ,CACxC,MAAM,IAAIC,WAAW,mBAAmBjB,KAAUA,EAAS,6BACvE,CACQ,IAAK,IAAIN,EAAI,EAAGA,EAAI,KAAMA,EAAG,CACzBmB,EAAIb,EAASN,GAAKoB,EAAKpB,EACnC,CACQ,OAAOmB,CACf,CACI,OAAOf,EAAgBgB,EAC3B,C,MCfaI,EAAa,CAACC,EAAS,SAClC,IAAKA,EAAQ,CACX,MAAM,IAAIZ,MAAM,yB,CAElB,MAAO,GAAGY,KAAUC,KAAU,S","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as i}from"./p-c9b736d9.js";import{c as a}from"./p-5fcf77f9.js";const o=".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.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}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.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)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";const e=o;const r=class{constructor(i){t(this,i);this.class=a({slots:{container:"flex flex-row items-center w-full relative",inkbar:"inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0",tabList:"tabs-list flex flex-row items-center w-full relative"}})}render(){const{container:t,inkbar:a,tabList:o}=this.class();return i("div",{key:"46066c8510c684347428f5a03f094fa857e40f57",class:t(),slot:"tabs-list"},i("div",{key:"c038e78bb7da88ece01600ff656ff820d2d8a4eb",class:a()}),i("div",{key:"4db7e8f301c7a0e863492fcd784fbcb6b5799709",class:o(),role:"tablist"},i("slot",{key:"ed29b088e1c19a455046804fcc5a090435351299"})))}};r.style=e;export{r as bcm_tabs_list};
|
|
2
|
+
//# sourceMappingURL=p-bd0f7e78.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tabsListCss","BcmTabsListStyle0","BcmTabsList","constructor","hostRef","this","class","tv","slots","container","inkbar","tabList","render","h","key","slot","role"],"sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n display: block;\n position: relative;\n width: 100%;\n}\n","import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n */\n@Component({\n tag: 'bcm-tabs-list',\n styleUrl: 'tabs-list.css',\n shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n /**\n * Tailwind variants configuration for styling the tabs list container and inkbar\n */\n private class = tv({\n slots: {\n /**\n * Main container that holds both the tablist and inkbar\n */\n container: 'flex flex-row items-center w-full relative',\n\n /**\n * The sliding indicator that appears under the active tab\n */\n inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n /**\n * The container for tab trigger elements\n */\n tabList: 'tabs-list flex flex-row items-center w-full relative',\n },\n });\n\n render() {\n const { container, inkbar, tabList } = this.class();\n return (\n <div class={container()} slot=\"tabs-list\">\n <div class={inkbar()}></div>\n <div class={tabList()} role=\"tablist\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}"],"mappings":"+EAAA,MAAMA,EAAc,kpCACpB,MAAAC,EAAeD,E,MCWFE,EAAW,MALxB,WAAAC,CAAAC,G,UASYC,KAAAC,MAAQC,EAAG,CACfC,MAAO,CAIHC,UAAW,6CAKXC,OAAQ,wIAKRC,QAAS,yD,CAIjB,MAAAC,GACI,MAAMH,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,GAAYN,KAAKC,QAC5C,OACIO,EAAA,OAAAC,IAAA,2CAAKR,MAAOG,IAAaM,KAAK,aAC1BF,EAAA,OAAAC,IAAA,2CAAKR,MAAOI,MACZG,EAAA,OAAAC,IAAA,2CAAKR,MAAOK,IAAWK,KAAK,WACxBH,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as o,H as s}from"./p-c9b736d9.js";const t=".block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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)}";const d=t;const r=class{constructor(o){a(this,o)}render(){return o(s,{key:"17ae2ab7a05db721e305764436befb99dd5571ff",role:"tabpanel"},o("slot",{key:"184a356d95d59b0f7795a065fd6ce5e8ba222a25"}))}};r.style=d;export{r as bcm_tabs_content};
|
|
2
|
+
//# sourceMappingURL=p-bf69fc8a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tabsContentCss","BcmTabsContentStyle0","BcmTabsContent","render","h","Host","key","role"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/**\n * @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n */\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /**\n * Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"mappings":"kDAAA,MAAMA,EAAiB,2SACvB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBAOvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,c as t,h as e,g as a}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,c as t,h as e,g as a}from"./p-c9b736d9.js";import{c as r}from"./p-5fcf77f9.js";const i=".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-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)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";const n=i;const c=class{constructor(e){o(this,e);this.bcmAccordionChange=t(this,"bcmAccordionChange",1);this.expanded=false;this.group=false;this.hasFooterContent=false;this.handleFooterSlotChange=o=>{const t=o.target;const e=t.assignedNodes();this.hasFooterContent=e.length>0};this.accordionClass=r({slots:{container:"accordion-container flex flex-col bcm-ui-element w-full",header:"accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer",content:"accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base",footer:"accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max",icon:"accordion-icon cursor-pointer transform transition-transform duration-300",rightSection:"accordion-right-section flex flex-row gap-2.5 items-center"},variants:{hasFooterContent:{false:{footer:"hidden"},true:{footer:"flex"}},expanded:{true:{icon:"rotate-180"},false:{icon:"rotate-0",content:""}}}},{twMerge:false})}async toggle(){this.expanded=!this.expanded;this.updateAccordion()}async expand(){if(!this.expanded){this.expanded=true;this.updateAccordion()}}async collapse(){if(this.expanded){this.expanded=false;this.updateAccordion()}}updateAccordion(){if(this.contentEl){this.contentEl.style.maxHeight=this.expanded?`${this.contentEl.scrollHeight}px`:"0px"}this.bcmAccordionChange.emit({expanded:this.expanded,source:this.host})}render(){const{container:o,header:t,content:a,footer:r,icon:i,rightSection:n}=this.accordionClass({hasFooterContent:this.hasFooterContent||!!this.hintText,expanded:this.expanded});return e("div",{key:"5db020dbcdd3eea89865e0da775aecc79d6e8e52",class:o()},e("header",{key:"e9a792911fea8dc6bd1f832a3f4ed9210bd5f1bf",class:t(),role:"button",tabindex:"0","aria-expanded":this.expanded.toString(),"aria-controls":"accordion-content",onKeyDown:o=>{if(o.key==="Enter"||o.key===" "){o.preventDefault();this.toggle()}},onClick:()=>this.toggle()},e("slot",{key:"2662c77cd56d3708e60bf09e085710587d9e2b37",name:"title"},this.headerTitle),e("div",{key:"af9c679afb9688bbf0634b3057888fdf49a2bdc3",class:n()},e("span",{key:"c06ea66737e34ffa1f79e2fa36618eb90c5dd801",onClick:o=>o.stopPropagation()},e("slot",{key:"8668f76dbf3967518332a188a5fef5e9bc160a0e",name:"actions"})),e("bcm-icon",{key:"870460d228f6ae0ff9de5b36dab05e0587124cc4",name:"fa-regular fa-chevron-down",class:i()}))),e("div",{key:"814408b9602a7045addd1040271328d372ce23ba",class:a(),style:{maxHeight:this.expanded?"auto":"0px"},ref:o=>this.contentEl=o},e("div",{key:"be99ad1f7b4864c7cfe9b87044197c21770b84f2",class:"px-4 py-2"},e("slot",{key:"49e0af56da6775b74f3915dd696270bcc077e171"})),e("footer",{key:"6339e900da8224563d94a787cffe253703874568",class:r()},e("slot",{key:"19027ba2389ff5677b1610b4430ab671bda2f95e",name:"footer",onSlotchange:this.handleFooterSlotChange},this.hintText))))}get host(){return a(this)}};c.style=n;export{c as bcm_accordion};
|
|
2
|
+
//# sourceMappingURL=p-c1161950.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["accordionCss","BcmAccordionStyle0","BcmAccordion","constructor","hostRef","this","expanded","group","hasFooterContent","handleFooterSlotChange","e","slot","target","assignedNodes","length","accordionClass","tv","slots","container","header","content","footer","icon","rightSection","variants","false","true","twMerge","toggle","updateAccordion","expand","collapse","contentEl","style","maxHeight","scrollHeight","bcmAccordionChange","emit","source","host","render","hintText","h","key","class","role","tabindex","toString","onKeyDown","preventDefault","onClick","name","headerTitle","stopPropagation","ref","el","onSlotchange"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n --bcm-accordion-text: var(--bcm-ui-color-text-header);\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n border: 1px solid var(--bcm-accordion-border);\n border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n border-bottom: 1px solid var(--bcm-accordion-border);\n border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n border-top-left-radius: var(--bcm-accordion-radius);\n border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n}\n::slotted([slot='actions']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n * <div slot=\"title\">Accordion Title</div>\n * <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n * <div slot=\"title\">Title</div>\n * <div slot=\"actions\">\n * <button>Action</button>\n * </div>\n * <div>Main content</div>\n * <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n * const { expanded, source } = event.detail;\n * console.log('Accordion expanded:', expanded);\n * console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n tag: 'bcm-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /**\n * Controls whether the accordion is expanded or collapsed.\n * @prop\n * @defaultValue false\n */\n @Prop({ reflect: true, mutable: true })\n expanded: boolean = false;\n\n /**\n * Optional title text to display in the header.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n headerTitle?: string;\n\n /**\n * Indicates if the accordion is part of a group.\n * Used for group behavior coordination.\n * @prop\n * @defaultValue false\n */\n\n @Prop({ reflect: true })\n group: boolean = false;\n\n /**\n * Optional text to display in the footer when no footer slot content is provided.\n * @prop\n */\n @Prop({ attribute: 'hint-text' })\n hintText?: string;\n\n /**\n * Tracks whether footer content is present.\n * @state\n */\n @State()\n hasFooterContent: boolean = false;\n\n /**\n * Emitted when the accordion's expanded state changes.\n * @event\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmAccordionChange',\n })\n bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n private contentEl?: HTMLElement;\n\n /**\n * Toggles the accordion's expanded state.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async toggle(): Promise<void> {\n this.expanded = !this.expanded;\n this.updateAccordion();\n }\n\n /**\n * Expands the accordion if it's not already expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async expand(): Promise<void> {\n if (!this.expanded) {\n this.expanded = true;\n this.updateAccordion();\n }\n }\n\n /**\n * Collapses the accordion if it's currently expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async collapse(): Promise<void> {\n if (this.expanded) {\n this.expanded = false;\n this.updateAccordion();\n }\n }\n\n /**\n * Updates the accordion's content height and emits change event.\n * @private\n */\n private updateAccordion(): void {\n if (this.contentEl) {\n this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n }\n this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n }\n\n /**\n * Handles changes to the footer slot content.\n * @private\n * @param e - Slot change event\n */\n private handleFooterSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n const assignedNodes = slot.assignedNodes();\n this.hasFooterContent = assignedNodes.length > 0;\n };\n\n private accordionClass = tv(\n {\n slots: {\n container: 'accordion-container flex flex-col bcm-ui-element w-full',\n header:\n 'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n },\n variants: {\n hasFooterContent: {\n false: { footer: 'hidden' },\n true: { footer: 'flex' },\n },\n expanded: {\n true: { icon: 'rotate-180' },\n false: {\n icon: 'rotate-0',\n content: '',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n hasFooterContent: this.hasFooterContent || !!this.hintText,\n expanded: this.expanded,\n });\n\n return (\n <div class={container()}>\n {/* Header */}\n <header\n class={header()}\n role=\"button\"\n tabindex=\"0\"\n aria-expanded={this.expanded.toString()}\n aria-controls=\"accordion-content\"\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggle();\n }\n }}\n onClick={() => this.toggle()}\n >\n <slot name=\"title\">{this.headerTitle}</slot>\n {/* Actions */}\n <div class={rightSection()}>\n <span onClick={e => e.stopPropagation()}>\n <slot name=\"actions\"></slot>\n </span>\n <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n </div>\n </header>\n {/* Content */}\n <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n <div class=\"px-4 py-2\">\n <slot></slot>\n </div>\n <footer class={footer()}>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n {this.hintText}\n </slot>\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,g3HACrB,MAAAC,EAAeD,E,MCyEFE,EAAY,MALzB,WAAAC,CAAAC,G,iEAeEC,KAAAC,SAAoB,MAkBpBD,KAAAE,MAAiB,MAcjBF,KAAAG,iBAA4B,MAqEpBH,KAAAI,uBAA0BC,IAChC,MAAMC,EAAOD,EAAEE,OACf,MAAMC,EAAgBF,EAAKE,gBAC3BR,KAAKG,iBAAmBK,EAAcC,OAAS,CAAC,EAG1CT,KAAAU,eAAiBC,EACvB,CACEC,MAAO,CACLC,UAAW,0DACXC,OACE,yNACFC,QAAS,gGACTC,OAAQ,0JACRC,KAAM,4EACNC,aAAc,8DAEhBC,SAAU,CACRhB,iBAAkB,CAChBiB,MAAO,CAAEJ,OAAQ,UACjBK,KAAM,CAAEL,OAAQ,SAElBf,SAAU,CACRoB,KAAM,CAAEJ,KAAM,cACdG,MAAO,CACLH,KAAM,WACNF,QAAS,OAKjB,CACEO,QAAS,O,CA/Eb,YAAMC,GACJvB,KAAKC,UAAYD,KAAKC,SACtBD,KAAKwB,iB,CASP,YAAMC,GACJ,IAAKzB,KAAKC,SAAU,CAClBD,KAAKC,SAAW,KAChBD,KAAKwB,iB,EAUT,cAAME,GACJ,GAAI1B,KAAKC,SAAU,CACjBD,KAAKC,SAAW,MAChBD,KAAKwB,iB,EAQD,eAAAA,GACN,GAAIxB,KAAK2B,UAAW,CAClB3B,KAAK2B,UAAUC,MAAMC,UAAY7B,KAAKC,SAAW,GAAGD,KAAK2B,UAAUG,iBAAmB,K,CAExF9B,KAAK+B,mBAAmBC,KAAK,CAAE/B,SAAUD,KAAKC,SAAUgC,OAAQjC,KAAKkC,M,CA4CvE,MAAAC,GACE,MAAMtB,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,KAAEA,EAAIC,aAAEA,GAAiBlB,KAAKU,eAAe,CACrFP,iBAAkBH,KAAKG,oBAAsBH,KAAKoC,SAClDnC,SAAUD,KAAKC,WAGjB,OACEoC,EAAA,OAAAC,IAAA,2CAAKC,MAAO1B,KAEVwB,EAAA,UAAAC,IAAA,2CACEC,MAAOzB,IACP0B,KAAK,SACLC,SAAS,IAAG,gBACGzC,KAAKC,SAASyC,WAAU,gBACzB,oBACdC,UAAWtC,IACT,GAAIA,EAAEiC,MAAQ,SAAWjC,EAAEiC,MAAQ,IAAK,CACtCjC,EAAEuC,iBACF5C,KAAKuB,Q,GAGTsB,QAAS,IAAM7C,KAAKuB,UAEpBc,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAAS9C,KAAK+C,aAEzBV,EAAA,OAAAC,IAAA,2CAAKC,MAAOrB,KACVmB,EAAA,QAAAC,IAAA,2CAAMO,QAASxC,GAAKA,EAAE2C,mBACpBX,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,aAEbT,EAAA,YAAAC,IAAA,2CAAUQ,KAAK,6BAA6BP,MAAOtB,QAIvDoB,EAAA,OAAAC,IAAA,2CAAKC,MAAOxB,IAAWa,MAAO,CAAEC,UAAW7B,KAAKC,SAAW,OAAS,OAASgD,IAAKC,GAAOlD,KAAK2B,UAAYuB,GACxGb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,8CAEFD,EAAA,UAAAC,IAAA,2CAAQC,MAAOvB,KACbqB,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAASK,aAAcnD,KAAKI,wBACpCJ,KAAKoC,Y","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["accordionCss","BcmAccordionStyle0","BcmAccordion","constructor","hostRef","this","expanded","group","hasFooterContent","handleFooterSlotChange","e","slot","target","assignedNodes","length","accordionClass","tv","slots","container","header","content","footer","icon","rightSection","variants","false","true","twMerge","toggle","updateAccordion","expand","collapse","contentEl","style","maxHeight","scrollHeight","bcmAccordionChange","emit","source","host","render","hintText","h","key","class","role","tabindex","toString","onKeyDown","preventDefault","onClick","name","headerTitle","stopPropagation","ref","el","onSlotchange"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n --bcm-accordion-text: var(--bcm-ui-color-text-header);\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n border: 1px solid var(--bcm-accordion-border);\n border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n border-bottom: 1px solid var(--bcm-accordion-border);\n border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n border-top-left-radius: var(--bcm-accordion-radius);\n border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n}\n::slotted([slot='actions']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n * <div slot=\"title\">Accordion Title</div>\n * <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n * <div slot=\"title\">Title</div>\n * <div slot=\"actions\">\n * <button>Action</button>\n * </div>\n * <div>Main content</div>\n * <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n * const { expanded, source } = event.detail;\n * console.log('Accordion expanded:', expanded);\n * console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n tag: 'bcm-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /**\n * Controls whether the accordion is expanded or collapsed.\n * @prop\n * @defaultValue false\n */\n @Prop({ reflect: true, mutable: true })\n expanded: boolean = false;\n\n /**\n * Optional title text to display in the header.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n headerTitle?: string;\n\n /**\n * Indicates if the accordion is part of a group.\n * Used for group behavior coordination.\n * @prop\n * @defaultValue false\n */\n\n @Prop({ reflect: true })\n group: boolean = false;\n\n /**\n * Optional text to display in the footer when no footer slot content is provided.\n * @prop\n */\n @Prop({ attribute: 'hint-text' })\n hintText?: string;\n\n /**\n * Tracks whether footer content is present.\n * @state\n */\n @State()\n hasFooterContent: boolean = false;\n\n /**\n * Emitted when the accordion's expanded state changes.\n * @event\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmAccordionChange',\n })\n bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n private contentEl?: HTMLElement;\n\n /**\n * Toggles the accordion's expanded state.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async toggle(): Promise<void> {\n this.expanded = !this.expanded;\n this.updateAccordion();\n }\n\n /**\n * Expands the accordion if it's not already expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async expand(): Promise<void> {\n if (!this.expanded) {\n this.expanded = true;\n this.updateAccordion();\n }\n }\n\n /**\n * Collapses the accordion if it's currently expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async collapse(): Promise<void> {\n if (this.expanded) {\n this.expanded = false;\n this.updateAccordion();\n }\n }\n\n /**\n * Updates the accordion's content height and emits change event.\n * @private\n */\n private updateAccordion(): void {\n if (this.contentEl) {\n this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n }\n this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n }\n\n /**\n * Handles changes to the footer slot content.\n * @private\n * @param e - Slot change event\n */\n private handleFooterSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n const assignedNodes = slot.assignedNodes();\n this.hasFooterContent = assignedNodes.length > 0;\n };\n\n private accordionClass = tv(\n {\n slots: {\n container: 'accordion-container flex flex-col bcm-ui-element w-full',\n header:\n 'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n },\n variants: {\n hasFooterContent: {\n false: { footer: 'hidden' },\n true: { footer: 'flex' },\n },\n expanded: {\n true: { icon: 'rotate-180' },\n false: {\n icon: 'rotate-0',\n content: '',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n hasFooterContent: this.hasFooterContent || !!this.hintText,\n expanded: this.expanded,\n });\n\n return (\n <div class={container()}>\n {/* Header */}\n <header\n class={header()}\n role=\"button\"\n tabindex=\"0\"\n aria-expanded={this.expanded.toString()}\n aria-controls=\"accordion-content\"\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggle();\n }\n }}\n onClick={() => this.toggle()}\n >\n <slot name=\"title\">{this.headerTitle}</slot>\n {/* Actions */}\n <div class={rightSection()}>\n <span onClick={e => e.stopPropagation()}>\n <slot name=\"actions\"></slot>\n </span>\n <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n </div>\n </header>\n {/* Content */}\n <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n <div class=\"px-4 py-2\">\n <slot></slot>\n </div>\n <footer class={footer()}>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n {this.hintText}\n </slot>\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,gzHACrB,MAAAC,EAAeD,E,MCyEFE,EAAY,MALzB,WAAAC,CAAAC,G,iEAeEC,KAAAC,SAAoB,MAkBpBD,KAAAE,MAAiB,MAcjBF,KAAAG,iBAA4B,MAqEpBH,KAAAI,uBAA0BC,IAChC,MAAMC,EAAOD,EAAEE,OACf,MAAMC,EAAgBF,EAAKE,gBAC3BR,KAAKG,iBAAmBK,EAAcC,OAAS,CAAC,EAG1CT,KAAAU,eAAiBC,EACvB,CACEC,MAAO,CACLC,UAAW,0DACXC,OACE,yNACFC,QAAS,gGACTC,OAAQ,0JACRC,KAAM,4EACNC,aAAc,8DAEhBC,SAAU,CACRhB,iBAAkB,CAChBiB,MAAO,CAAEJ,OAAQ,UACjBK,KAAM,CAAEL,OAAQ,SAElBf,SAAU,CACRoB,KAAM,CAAEJ,KAAM,cACdG,MAAO,CACLH,KAAM,WACNF,QAAS,OAKjB,CACEO,QAAS,O,CA/Eb,YAAMC,GACJvB,KAAKC,UAAYD,KAAKC,SACtBD,KAAKwB,iB,CASP,YAAMC,GACJ,IAAKzB,KAAKC,SAAU,CAClBD,KAAKC,SAAW,KAChBD,KAAKwB,iB,EAUT,cAAME,GACJ,GAAI1B,KAAKC,SAAU,CACjBD,KAAKC,SAAW,MAChBD,KAAKwB,iB,EAQD,eAAAA,GACN,GAAIxB,KAAK2B,UAAW,CAClB3B,KAAK2B,UAAUC,MAAMC,UAAY7B,KAAKC,SAAW,GAAGD,KAAK2B,UAAUG,iBAAmB,K,CAExF9B,KAAK+B,mBAAmBC,KAAK,CAAE/B,SAAUD,KAAKC,SAAUgC,OAAQjC,KAAKkC,M,CA4CvE,MAAAC,GACE,MAAMtB,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,KAAEA,EAAIC,aAAEA,GAAiBlB,KAAKU,eAAe,CACrFP,iBAAkBH,KAAKG,oBAAsBH,KAAKoC,SAClDnC,SAAUD,KAAKC,WAGjB,OACEoC,EAAA,OAAAC,IAAA,2CAAKC,MAAO1B,KAEVwB,EAAA,UAAAC,IAAA,2CACEC,MAAOzB,IACP0B,KAAK,SACLC,SAAS,IAAG,gBACGzC,KAAKC,SAASyC,WAAU,gBACzB,oBACdC,UAAWtC,IACT,GAAIA,EAAEiC,MAAQ,SAAWjC,EAAEiC,MAAQ,IAAK,CACtCjC,EAAEuC,iBACF5C,KAAKuB,Q,GAGTsB,QAAS,IAAM7C,KAAKuB,UAEpBc,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAAS9C,KAAK+C,aAEzBV,EAAA,OAAAC,IAAA,2CAAKC,MAAOrB,KACVmB,EAAA,QAAAC,IAAA,2CAAMO,QAASxC,GAAKA,EAAE2C,mBACpBX,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,aAEbT,EAAA,YAAAC,IAAA,2CAAUQ,KAAK,6BAA6BP,MAAOtB,QAIvDoB,EAAA,OAAAC,IAAA,2CAAKC,MAAOxB,IAAWa,MAAO,CAAEC,UAAW7B,KAAKC,SAAW,OAAS,OAASgD,IAAKC,GAAOlD,KAAK2B,UAAYuB,GACxGb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,8CAEFD,EAAA,UAAAC,IAAA,2CAAQC,MAAOvB,KACbqB,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAASK,aAAcnD,KAAKI,wBACpCJ,KAAKoC,Y","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,c as e,h as o,g as i}from"./p-c9b736d9.js";import{c as t}from"./p-5fcf77f9.js";const a=".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)}";const d=a;const s=class{constructor(o){r(this,o);this.bcmRadioChange=e(this,"bcmRadioChange",1);this.bcmBlur=e(this,"bcmBlur",1);this.bcmFocus=e(this,"bcmFocus",1);this.checked=false;this.size="medium";this.disabled=false;this.readonly=false;this.labelPosition="right";this.error=false;this.getRadioClass=t({slots:{container:"bcm-ui-element bcm-radio group",dot:"absolute rounded-full transition bg-[--bcm-radio-checked]",dotContainer:"relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]",labelClass:"font-medium text-[--bcm-radio-text-color]"},variants:{size:{small:{container:"gap-2",dotContainer:"size-3.5",dot:"size-2",labelClass:"text-size-4"},medium:{container:"gap-2.5",dotContainer:"size-4",dot:"size-2.5",labelClass:"text-size-5"},large:{container:"gap-3",dotContainer:"size-[18px]",dot:"size-3",labelClass:"text-size-6"}},checked:{true:{dot:"opacity-100"},false:{dot:"opacity-0"}},disabled:{true:{container:"cursor-not-allowed"},false:{container:"cursor-pointer focus-visible:ring"}},readonly:{true:{container:"cursor-default pointer-events-none",dot:"opacity-100",dotContainer:"shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]"},false:""},labelPosition:{left:{container:"inline-flex flex-row-reverse items-center"},right:{container:"inline-flex flex-row items-center"}}}},{twMerge:false})}handleClick(){if(this.readonly||this.disabled)return;if(!this.checked){this.checked=true;this.bcmRadioChange.emit()}}getRadioStyle(){const r={"--bcm-radio-bg":"var(--bcm-ui-color-background-default-default)","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-primary)","--bcm-radio-checked":"var(--bcm-ui-color-background-primary-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};const e={"--bcm-radio-bg":"var(--bcm-ui-color-background-palette-red-default)","--bcm-radio-border":"var(--bcm-ui-color-border-error)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-error)","--bcm-radio-checked":"var(--bcm-ui-color-background-error-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};const o={"--bcm-radio-bg":"var(--bcm-ui-color-background-disabled-default)","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-disabled)","--bcm-radio-checked":"var(--bcm-ui-color-background-disabled-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-disabled)"};const i={"--bcm-radio-bg":"transparent","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-checked":"var(--bcm-ui-color-background-default-default)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-disabled)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};return Object.assign(Object.assign(Object.assign(Object.assign({},r),this.error&&e),this.disabled&&o),this.readonly&&i)}render(){const{container:r,dot:e,dotContainer:i,labelClass:t}=this.getRadioClass({size:this.size,checked:this.checked,disabled:this.disabled,readonly:this.readonly,labelPosition:this.labelPosition});return o("label",{key:"2a95bd2335f3ecc987bcdd378225967837e55df9",class:r(),style:this.getRadioStyle()},o("input",{key:"782735ff733b1d373803c3a1c6f56c16b745a159","aria-label":this.label,role:"radio","aria-checked":this.checked.toString(),type:"radio",name:this.name,value:this.value,disabled:this.disabled,readOnly:this.readonly,checked:this.checked,class:"appearance-none sr-only",onClick:()=>this.handleClick(),onFocus:r=>this.bcmFocus.emit(r),onBlur:r=>this.bcmBlur.emit(r)}),o("div",{key:"638f0fe8ffab984b459c0b5f11f0a929b105de2a",class:i()},o("div",{key:"65f618afcd4c1d0101961b6c6642ba146a37d6ef",class:e()})),o("span",{key:"a4690721cbe1c99ba47c572a9b354bdebac20a5e",class:t()},o("slot",{key:"2af90a0ab77da5b63a25fef3edbd0e14fc87516d"},this.label)))}get host(){return i(this)}};s.style=d;export{s as bcm_radio};
|
|
2
|
+
//# sourceMappingURL=p-c2b3945e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["radioCss","BcmRadioStyle0","BcmRadio","constructor","hostRef","this","checked","size","disabled","readonly","labelPosition","error","getRadioClass","tv","slots","container","dot","dotContainer","labelClass","variants","small","medium","large","true","false","left","right","twMerge","handleClick","bcmRadioChange","emit","getRadioStyle","defaultStyle","errorStyle","disabledStyle","readonlyStyle","Object","assign","render","h","key","class","style","label","role","toString","type","name","value","readOnly","onClick","onFocus","e","bcmFocus","onBlur","bcmBlur"],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n * Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n * Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n tag: 'bcm-radio',\n styleUrl: 'radio.css',\n shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n @Element() host: HTMLBcmRadioElement;\n\n /**\n * The text label to display next to the radio button.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n label: string;\n\n /**\n * The name attribute for the radio input, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n name: string;\n\n /**\n * The value of the radio button, submitted with the form.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n value: string;\n\n /**\n * Whether the radio button is selected.\n * @prop\n * @defaultValue false\n */\n @Prop({ reflect: true })\n checked: boolean = false;\n\n /**\n * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @prop\n * @defaultValue 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether the radio button is disabled.\n * @prop\n * @defaultValue false\n */\n @Prop()\n disabled = false;\n\n /**\n * Whether the radio button is readonly.\n * @prop\n * @defaultValue false\n */\n @Prop()\n readonly = false;\n\n /**\n * Position of the label relative to the radio button: 'right' | 'left'.\n * @prop\n * @defaultValue 'right'\n */\n @Prop()\n labelPosition: 'right' | 'left' = 'right';\n\n /**\n * Whether the radio button is in an error state.\n * @prop\n * @defaultValue false\n */\n @Prop()\n error: boolean = false;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioChange',\n })\n bcmRadioChange: EventEmitter<void>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n private handleClick(): void {\n if (this.readonly || this.disabled) return;\n if (!this.checked) {\n this.checked = true;\n this.bcmRadioChange.emit();\n }\n }\n\n private getRadioStyle() {\n const defaultStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const errorStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const disabledStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n };\n\n const readonlyStyle = {\n '--bcm-radio-bg': 'transparent',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.error && errorStyle),\n ...(this.disabled && disabledStyle),\n ...(this.readonly && readonlyStyle),\n };\n }\n\n private getRadioClass = tv(\n {\n slots: {\n container: 'bcm-ui-element bcm-radio group',\n dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n dotContainer:\n 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n labelClass: 'font-medium text-[--bcm-radio-text-color]',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n dotContainer: 'size-3.5',\n dot: 'size-2',\n labelClass: 'text-size-4',\n },\n medium: {\n container: 'gap-2.5',\n dotContainer: 'size-4',\n dot: 'size-2.5',\n labelClass: 'text-size-5',\n },\n large: {\n container: 'gap-3',\n dotContainer: 'size-[18px]',\n dot: 'size-3',\n labelClass: 'text-size-6',\n },\n },\n checked: {\n true: {\n dot: 'opacity-100',\n },\n false: {\n dot: 'opacity-0',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer focus-visible:ring',\n },\n },\n readonly: {\n true: {\n container: 'cursor-default pointer-events-none',\n dot: 'opacity-100',\n dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n },\n false: '',\n },\n labelPosition: {\n left: {\n container: 'inline-flex flex-row-reverse items-center',\n },\n right: {\n container: 'inline-flex flex-row items-center',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n readonly: this.readonly,\n labelPosition: this.labelPosition,\n });\n\n return (\n <label class={container()} style={this.getRadioStyle()}>\n <input\n aria-label={this.label}\n role=\"radio\"\n aria-checked={this.checked.toString()}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n checked={this.checked}\n class=\"appearance-none sr-only\"\n onClick={() => this.handleClick()}\n onFocus={e => this.bcmFocus.emit(e)}\n onBlur={e => this.bcmBlur.emit(e)}\n ></input>\n <div class={dotContainer()}>\n <div class={dot()}></div>\n </div>\n <span class={labelClass()}>\n <slot>{this.label}</slot>\n </span>\n </label>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t}from"./p-c9b736d9.js";import{c as o}from"./p-12360e4c.js";const l={display:"h1",heading1:"h2",heading2:"h3",title1:"h4",title2:"h5",title3:"h6",body:"p",bodyAccent:"p",helper:"p",caption:"p",label:"label",placeholder:"p",link:"a",info:"p",infoAccent:"p"};const i=".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.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)}.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)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.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)}";const r=i;const a=class{constructor(t){e(this,t);this.variant="body";this.size="medium";this.variantClassMap={display:"font-semibold text-size-12 text-color-header",heading1:"font-semibold text-size-7 text-color-header",heading2:"font-semibold text-size-6 text-color-header",title1:{small:"font-semibold text-size-5 text-color-header",medium:"font-semibold text-size-6 text-color-header",large:"font-semibold text-size-7 text-color-header"},title2:{small:"font-semibold text-size-4 text-color-default",medium:"font-semibold text-size-5 text-color-default",large:"font-semibold text-size-6 text-color-default"},title3:{small:"font-semibold text-size-3 text-color-disabled",medium:"font-semibold text-size-4 text-color-disabled",large:"font-semibold text-size-5 text-color-disabled"},body:{small:"font-regular text-size-4 text-color-default",medium:"font-regular text-size-5 text-color-default",large:"font-regular text-size-6 text-color-default"},bodyAccent:{small:"font-medium text-size-4 text-color-default",medium:"font-medium text-size-5 text-color-default",large:"font-medium text-size-6 text-color-default"},helper:{small:"font-regular text-size-4 text-color-helper",medium:"font-regular text-size-5 text-color-helper",large:"font-regular text-size-6 text-color-helper"},caption:{small:"font-regular text-size-3 text-color-caption",medium:"font-regular text-size-4 text-color-caption",large:"font-regular text-size-5 text-color-caption"},link:{small:"font-medium text-size-4 underline text-color-primary",medium:"font-medium text-size-5 underline text-color-primary",large:"font-medium text-size-6 underline text-color-primary"},label:{small:"font-medium text-size-3 text-color-label",medium:"font-medium text-size-4 text-color-label",large:"font-medium text-size-5 text-color-label"},placeholder:{small:"font-regular text-size-4 text-color-placeholder",medium:"font-regular text-size-5 text-color-placeholder",large:"font-regular text-size-6 text-color-placeholder"},info:{small:"font-regular text-size-3 text-color-default",medium:"font-regular text-size-4 text-color-default",large:"font-regular text-size-5 text-color-default"},infoAccent:{small:"font-medium text-size-3 text-color-header",medium:"font-medium text-size-4 text-color-header",large:"font-medium text-size-5 text-color-header"}};this.getTextClass=(e,t)=>{const o=this.variantClassMap[e];if(typeof o==="string"){return o}return o[t]}}render(){const e=l[this.variant];const i=this.getTextClass(this.variant,this.size);return t(e,{key:"53890d0b241119b0df415e599538e806bd870517",class:o("bcm-text appearance-none m-0 p-0",i),part:"text"},t("slot",{key:"25ccb62cbbe1393379c42bd13b3a98d8806fa2cb"},this.text))}};a.style=r;export{a as bcm_text};
|
|
2
|
+
//# sourceMappingURL=p-c427ffee.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["variantTagMap","display","heading1","heading2","title1","title2","title3","body","bodyAccent","helper","caption","label","placeholder","link","info","infoAccent","textCss","BcmTextStyle0","BcmText","constructor","hostRef","this","variant","size","variantClassMap","small","medium","large","getTextClass","variantClasses","render","Tag","variantClass","h","key","class","cs","part","text"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n display: 'h1',\n heading1: 'h2',\n heading2: 'h3',\n title1: 'h4',\n title2: 'h5',\n title3: 'h6',\n body: 'p',\n bodyAccent: 'p',\n helper: 'p',\n caption: 'p',\n label: 'label',\n placeholder: 'p',\n link: 'a',\n info: 'p',\n infoAccent: 'p',\n};\n",null,"import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n tag: 'bcm-text',\n styleUrl: 'text.scss',\n shadow: true,\n})\nexport class BcmText {\n /** Text content */\n @Prop()\n text: string;\n\n /** Text variant */\n @Prop()\n variant: TextVariant = 'body';\n\n /** Text size */\n @Prop()\n size: TextSize = 'medium';\n\n private readonly variantClassMap = {\n display: 'font-semibold text-size-12 text-color-header',\n heading1: 'font-semibold text-size-7 text-color-header',\n heading2: 'font-semibold text-size-6 text-color-header',\n title1: {\n small: 'font-semibold text-size-5 text-color-header',\n medium: 'font-semibold text-size-6 text-color-header',\n large: 'font-semibold text-size-7 text-color-header',\n },\n title2: {\n small: 'font-semibold text-size-4 text-color-default',\n medium: 'font-semibold text-size-5 text-color-default',\n large: 'font-semibold text-size-6 text-color-default',\n },\n title3: {\n small: 'font-semibold text-size-3 text-color-disabled',\n medium: 'font-semibold text-size-4 text-color-disabled',\n large: 'font-semibold text-size-5 text-color-disabled',\n },\n body: {\n small: 'font-regular text-size-4 text-color-default',\n medium: 'font-regular text-size-5 text-color-default',\n large: 'font-regular text-size-6 text-color-default',\n },\n bodyAccent: {\n small: 'font-medium text-size-4 text-color-default',\n medium: 'font-medium text-size-5 text-color-default',\n large: 'font-medium text-size-6 text-color-default',\n },\n helper: {\n small: 'font-regular text-size-4 text-color-helper',\n medium: 'font-regular text-size-5 text-color-helper',\n large: 'font-regular text-size-6 text-color-helper',\n },\n caption: {\n small: 'font-regular text-size-3 text-color-caption',\n medium: 'font-regular text-size-4 text-color-caption',\n large: 'font-regular text-size-5 text-color-caption',\n },\n link: {\n small: 'font-medium text-size-4 underline text-color-primary',\n medium: 'font-medium text-size-5 underline text-color-primary',\n large: 'font-medium text-size-6 underline text-color-primary',\n },\n label: {\n small: 'font-medium text-size-3 text-color-label',\n medium: 'font-medium text-size-4 text-color-label',\n large: 'font-medium text-size-5 text-color-label',\n },\n placeholder: {\n small: 'font-regular text-size-4 text-color-placeholder',\n medium: 'font-regular text-size-5 text-color-placeholder',\n large: 'font-regular text-size-6 text-color-placeholder',\n },\n info: {\n small: 'font-regular text-size-3 text-color-default',\n medium: 'font-regular text-size-4 text-color-default',\n large: 'font-regular text-size-5 text-color-default',\n },\n infoAccent: {\n small: 'font-medium text-size-3 text-color-header',\n medium: 'font-medium text-size-4 text-color-header',\n large: 'font-medium text-size-5 text-color-header',\n },\n } as const;\n\n private getTextClass = (variant: TextVariant, size: TextSize): string => {\n const variantClasses = this.variantClassMap[variant];\n\n if (typeof variantClasses === 'string') {\n return variantClasses;\n }\n\n return variantClasses[size];\n };\n\n render() {\n const Tag = variantTagMap[this.variant];\n const variantClass = this.getTextClass(this.variant, this.size);\n\n return (\n <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass)} part=\"text\">\n <slot>{this.text}</slot>\n </Tag>\n );\n }\n}\n"],"mappings":"+EAEO,MAAMA,EAA8C,CACzDC,QAAS,KACTC,SAAU,KACVC,SAAU,KACVC,OAAQ,KACRC,OAAQ,KACRC,OAAQ,KACRC,KAAM,IACNC,WAAY,IACZC,OAAQ,IACRC,QAAS,IACTC,MAAO,QACPC,YAAa,IACbC,KAAM,IACNC,KAAM,IACNC,WAAY,KCjBd,MAAMC,EAAU,
|
|
1
|
+
{"version":3,"names":["variantTagMap","display","heading1","heading2","title1","title2","title3","body","bodyAccent","helper","caption","label","placeholder","link","info","infoAccent","textCss","BcmTextStyle0","BcmText","constructor","hostRef","this","variant","size","variantClassMap","small","medium","large","getTextClass","variantClasses","render","Tag","variantClass","h","key","class","cs","part","text"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n display: 'h1',\n heading1: 'h2',\n heading2: 'h3',\n title1: 'h4',\n title2: 'h5',\n title3: 'h6',\n body: 'p',\n bodyAccent: 'p',\n helper: 'p',\n caption: 'p',\n label: 'label',\n placeholder: 'p',\n link: 'a',\n info: 'p',\n infoAccent: 'p',\n};\n",null,"import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n tag: 'bcm-text',\n styleUrl: 'text.scss',\n shadow: true,\n})\nexport class BcmText {\n /** Text content */\n @Prop()\n text: string;\n\n /** Text variant */\n @Prop()\n variant: TextVariant = 'body';\n\n /** Text size */\n @Prop()\n size: TextSize = 'medium';\n\n private readonly variantClassMap = {\n display: 'font-semibold text-size-12 text-color-header',\n heading1: 'font-semibold text-size-7 text-color-header',\n heading2: 'font-semibold text-size-6 text-color-header',\n title1: {\n small: 'font-semibold text-size-5 text-color-header',\n medium: 'font-semibold text-size-6 text-color-header',\n large: 'font-semibold text-size-7 text-color-header',\n },\n title2: {\n small: 'font-semibold text-size-4 text-color-default',\n medium: 'font-semibold text-size-5 text-color-default',\n large: 'font-semibold text-size-6 text-color-default',\n },\n title3: {\n small: 'font-semibold text-size-3 text-color-disabled',\n medium: 'font-semibold text-size-4 text-color-disabled',\n large: 'font-semibold text-size-5 text-color-disabled',\n },\n body: {\n small: 'font-regular text-size-4 text-color-default',\n medium: 'font-regular text-size-5 text-color-default',\n large: 'font-regular text-size-6 text-color-default',\n },\n bodyAccent: {\n small: 'font-medium text-size-4 text-color-default',\n medium: 'font-medium text-size-5 text-color-default',\n large: 'font-medium text-size-6 text-color-default',\n },\n helper: {\n small: 'font-regular text-size-4 text-color-helper',\n medium: 'font-regular text-size-5 text-color-helper',\n large: 'font-regular text-size-6 text-color-helper',\n },\n caption: {\n small: 'font-regular text-size-3 text-color-caption',\n medium: 'font-regular text-size-4 text-color-caption',\n large: 'font-regular text-size-5 text-color-caption',\n },\n link: {\n small: 'font-medium text-size-4 underline text-color-primary',\n medium: 'font-medium text-size-5 underline text-color-primary',\n large: 'font-medium text-size-6 underline text-color-primary',\n },\n label: {\n small: 'font-medium text-size-3 text-color-label',\n medium: 'font-medium text-size-4 text-color-label',\n large: 'font-medium text-size-5 text-color-label',\n },\n placeholder: {\n small: 'font-regular text-size-4 text-color-placeholder',\n medium: 'font-regular text-size-5 text-color-placeholder',\n large: 'font-regular text-size-6 text-color-placeholder',\n },\n info: {\n small: 'font-regular text-size-3 text-color-default',\n medium: 'font-regular text-size-4 text-color-default',\n large: 'font-regular text-size-5 text-color-default',\n },\n infoAccent: {\n small: 'font-medium text-size-3 text-color-header',\n medium: 'font-medium text-size-4 text-color-header',\n large: 'font-medium text-size-5 text-color-header',\n },\n } as const;\n\n private getTextClass = (variant: TextVariant, size: TextSize): string => {\n const variantClasses = this.variantClassMap[variant];\n\n if (typeof variantClasses === 'string') {\n return variantClasses;\n }\n\n return variantClasses[size];\n };\n\n render() {\n const Tag = variantTagMap[this.variant];\n const variantClass = this.getTextClass(this.variant, this.size);\n\n return (\n <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass)} part=\"text\">\n <slot>{this.text}</slot>\n </Tag>\n );\n }\n}\n"],"mappings":"+EAEO,MAAMA,EAA8C,CACzDC,QAAS,KACTC,SAAU,KACVC,SAAU,KACVC,OAAQ,KACRC,OAAQ,KACRC,OAAQ,KACRC,KAAM,IACNC,WAAY,IACZC,OAAQ,IACRC,QAAS,IACTC,MAAO,QACPC,YAAa,IACbC,KAAM,IACNC,KAAM,IACNC,WAAY,KCjBd,MAAMC,EAAU,27CAChB,MAAAC,EAAeD,E,MCSFE,EAAO,MALpB,WAAAC,CAAAC,G,UAYEC,KAAAC,QAAuB,OAIvBD,KAAAE,KAAiB,SAEAF,KAAAG,gBAAkB,CACjCvB,QAAS,+CACTC,SAAU,8CACVC,SAAU,8CACVC,OAAQ,CACNqB,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETtB,OAAQ,CACNoB,MAAO,+CACPC,OAAQ,+CACRC,MAAO,gDAETrB,OAAQ,CACNmB,MAAO,gDACPC,OAAQ,gDACRC,MAAO,iDAETpB,KAAM,CACJkB,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETnB,WAAY,CACViB,MAAO,6CACPC,OAAQ,6CACRC,MAAO,8CAETlB,OAAQ,CACNgB,MAAO,6CACPC,OAAQ,6CACRC,MAAO,8CAETjB,QAAS,CACPe,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETd,KAAM,CACJY,MAAO,uDACPC,OAAQ,uDACRC,MAAO,wDAEThB,MAAO,CACLc,MAAO,2CACPC,OAAQ,2CACRC,MAAO,4CAETf,YAAa,CACXa,MAAO,kDACPC,OAAQ,kDACRC,MAAO,mDAETb,KAAM,CACJW,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETZ,WAAY,CACVU,MAAO,4CACPC,OAAQ,4CACRC,MAAO,8CAIHN,KAAAO,aAAe,CAACN,EAAsBC,KAC5C,MAAMM,EAAiBR,KAAKG,gBAAgBF,GAE5C,UAAWO,IAAmB,SAAU,CACtC,OAAOA,C,CAGT,OAAOA,EAAeN,EAAK,C,CAG7B,MAAAO,GACE,MAAMC,EAAM/B,EAAcqB,KAAKC,SAC/B,MAAMU,EAAeX,KAAKO,aAAaP,KAAKC,QAASD,KAAKE,MAE1D,OACEU,EAACF,EAAG,CAAAG,IAAA,2CAACC,MAAOC,EAAG,mCAAoCJ,GAAeK,KAAK,QACrEJ,EAAA,QAAAC,IAAA,4CAAOb,KAAKiB,M","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as d,h as t,H as e,g as i}from"./p-c9b736d9.js";import{c as r}from"./p-5fcf77f9.js";const a='.visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var("--bcm-ui-color-background-base-default")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.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)}.outline{outline-style:solid}';const s=a;const n=class{constructor(t){o(this,t);this.bcmDropdownChange=d(this,"bcmDropdownChange",1);this.isReady=false;this.dropdownItems=[];this.dropdownClass=r({base:"dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll"});this.handleSlotChange=()=>{this.dropdownItems=Array.from(this.host.querySelectorAll("bcm-dropdown-item"));if(this.dropdownItems.length===0){console.warn("No dropdown items found in dropdown component")}}}componentDidLoad(){const o=this.host.shadowRoot.querySelector("bcm-button");if(o){this.buttonRef=o;this.isReady=true}}handleDropdownItemChange(o){var d;const{element:t,selected:e}=o===null||o===void 0?void 0:o.detail;(d=this.dropdownItems)===null||d===void 0?void 0:d.forEach((o=>{if(o!=t){o.selected=false}}));this.bcmDropdownChange.emit({element:t,selected:e})}render(){return t(e,{key:"f8ebd7ecb5d6383caa178be4e34e64736c482b4a"},t("bcm-button",{key:"aab16dd01ce75758f0e075514b0775a679233315",kind:"outline"},t("span",{key:"1d7842631a451eb6a4230f9e20e34948db642a3d",part:"text"},this.text)),this.isReady&&t("bcm-linked",{key:"8f41062a05700f373912f300b4002464e4f9655e",targetElement:this.buttonRef},t("div",{key:"7f9f35fd9cc8bd952794917293de1c4298ef9dec",part:"dropdown-container",class:this.dropdownClass()},t("slot",{key:"38cc8b4c92c07499bc9471db7749372943b618dd",onSlotchange:this.handleSlotChange}))))}get host(){return i(this)}};n.style=s;export{n as bcm_dropdown};
|
|
2
|
+
//# sourceMappingURL=p-c444235a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dropdownCss","BcmDropdownStyle0","Dropdown","constructor","hostRef","this","isReady","dropdownItems","dropdownClass","tv","base","handleSlotChange","Array","from","host","querySelectorAll","length","console","warn","componentDidLoad","button","shadowRoot","querySelector","buttonRef","handleDropdownItemChange","event","element","selected","detail","_a","forEach","item","bcmDropdownChange","emit","render","h","Host","key","kind","part","text","targetElement","class","onSlotchange"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":[":host {\n --dropdown-box-min-weight: 32px;\n --dropdown-box-max-width: 384px;\n --dropdown-box-max-height: 384px;\n --dropdown-box-background-color: var('--bcm-ui-color-background-base-default');\n}\n\n.scroll {\n height: 140px;\n width: 140px;\n overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n background-color: darkgrey;\n visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n tag: 'bcm-dropdown',\n styleUrl: 'dropdown.css',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n @Element() host: HTMLElement;\n\n @Prop() text?: string;\n\n @State() isReady: boolean = false;\n\n @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n protected buttonRef?: HTMLBcmButtonElement;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmDropdownChange',\n })\n bcmDropdownChange: EventEmitter<any>;\n\n componentDidLoad() {\n const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n if (button) {\n this.buttonRef = button;\n this.isReady = true;\n }\n }\n\n @Listen('bcmDropDownItemChange', { capture: true })\n handleDropdownItemChange(event: CustomEvent) {\n const { element, selected } = event?.detail;\n\n this.dropdownItems?.forEach(item => {\n if (item != element) {\n item.selected = false;\n }\n });\n\n this.bcmDropdownChange.emit({\n element: element,\n selected,\n });\n }\n\n private dropdownClass = tv({\n base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',\n });\n\n private handleSlotChange = () => {\n this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n if (this.dropdownItems.length === 0) {\n console.warn('No dropdown items found in dropdown component');\n }\n };\n\n render() {\n return (\n <Host>\n <bcm-button kind=\"outline\">\n <span part=\"text\">{this.text}</span>\n </bcm-button>\n {this.isReady && (\n <bcm-linked targetElement={this.buttonRef}>\n <div part=\"dropdown-container\" class={this.dropdownClass()}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n </bcm-linked>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,07CACpB,MAAAC,EAAeD,E,MCOFE,EAAQ,MALrB,WAAAC,CAAAC,G,+DAUaC,KAAAC,QAAmB,MAEnBD,KAAAE,cAA8C,GAoC/CF,KAAAG,cAAgBC,EAAG,CACvBC,KAAM,4NAGFL,KAAAM,iBAAmB,KACvBN,KAAKE,cAAgBK,MAAMC,KAAKR,KAAKS,KAAKC,iBAAiB,sBAE3D,GAAIV,KAAKE,cAAcS,SAAW,EAAG,CACjCC,QAAQC,KAAK,gD,GAhCrB,gBAAAC,GACI,MAAMC,EAASf,KAAKS,KAAKO,WAAWC,cAAc,cAClD,GAAIF,EAAQ,CACRf,KAAKkB,UAAYH,EACjBf,KAAKC,QAAU,I,EAKvB,wBAAAkB,CAAyBC,G,MACrB,MAAMC,QAAEA,EAAOC,SAAEA,GAAaF,IAAK,MAALA,SAAK,SAALA,EAAOG,QAErCC,EAAAxB,KAAKE,iBAAa,MAAAsB,SAAA,SAAAA,EAAEC,SAAQC,IACxB,GAAIA,GAAQL,EAAS,CACjBK,EAAKJ,SAAW,K,KAIxBtB,KAAK2B,kBAAkBC,KAAK,CACxBP,QAASA,EACTC,Y,CAgBR,MAAAO,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,cAAAE,IAAA,2CAAYC,KAAK,WACbH,EAAA,QAAAE,IAAA,2CAAME,KAAK,QAAQlC,KAAKmC,OAE3BnC,KAAKC,SACF6B,EAAA,cAAAE,IAAA,2CAAYI,cAAepC,KAAKkB,WAC5BY,EAAA,OAAAE,IAAA,2CAAKE,KAAK,qBAAqBG,MAAOrC,KAAKG,iBACvC2B,EAAA,QAAAE,IAAA,2CAAMM,aAActC,KAAKM,qB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,g as a}from"./p-c9b736d9.js";import{c as o}from"./p-5fcf77f9.js";import{g as s}from"./p-ba2410ef.js";import{c as r}from"./p-12360e4c.js";const c=".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)}";const l=c;const n=class{constructor(i){t(this,i);this.bcmRadioGroupChange=e(this,"bcmRadioGroupChange",1);this.disabled=false;this.required=false;this.error=false;this.size="medium";this.direction="vertical";this.radioGroupName=s("radio-group-name");this.handleSlotChange=()=>{this.radios.forEach((t=>{var e;t.size=this.size;t.name=(e=this.name)!==null&&e!==void 0?e:this.radioGroupName;t.disabled=this.disabled;t.error=this.error}))};this.radioGroupClass=o({slots:{host:["bcm-ui-element bcm-radio-group flex flex-col"],container:["flex"]},variants:{size:{small:{host:"gap-1.5",container:"gap-1.5"},medium:{host:"gap-2",container:"gap-2"},large:{host:"gap-2.5",container:"gap-2.5"}},direction:{horizontal:{container:["flex-row flex-wrap"]},vertical:{container:["flex-col"]}}},defaultVariants:{size:"medium",direction:"vertical"}})}get radios(){return this.host.querySelectorAll("bcm-radio")}componentWillLoad(){if(this.value){this.updateRadios(this.value)}}async setClear(){var t;this.value="";(t=this.radios)===null||t===void 0?void 0:t.forEach((t=>{t.checked=false}))}async resetCaption(){this.error=false;this.captionText=undefined}handleValueChange(t){this.updateRadios(t)}handleRadioChange(t){const e=t.target;const i=this.host.querySelectorAll("bcm-radio");i.forEach((t=>{if(t!==e){t.checked=false}}));this.bcmRadioGroupChange.emit({value:e.value,element:e})}updateRadios(t){this.radios.forEach((e=>{e.checked=e.value===t}))}render(){const{host:t,container:e}=this.radioGroupClass({size:this.size,direction:this.direction});return i("div",{key:"067e086951f511d9a15f0cf7dbaef97744615356",class:t()},this.label&&i("label",{key:"912ab77a4b270dfd25bbc362932b6914af1cac6c",class:r("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},i("slot",{key:"93b8053888f906617b84a94a84fad525cbb5ea34",name:"label"},this.label),this.required&&i("span",{key:"654320a556ff7e0aa49c929af349c57ec9a8a59a"},"*")),i("div",{key:"722366cd4a7f7cebddf8151fcc935025bf12b5d6",class:e()},i("slot",{key:"420447424d1e450911355ab4cd6b2ee51c1b2839",onSlotchange:this.handleSlotChange})),this.captionText&&i("div",{key:"38dcc2233985bdcaaefe62b072ef9b55d1e1908d",class:r("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled,"text-[--bcm-ui-color-text-error]":!this.disabled&&this.error,"text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},this.captionText))}get host(){return a(this)}static get watchers(){return{value:["handleValueChange"]}}};n.style=l;export{n as bcm_radio_group};
|
|
2
|
+
//# sourceMappingURL=p-c995a48c.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["radioGroupCss","BcmRadioGroupStyle0","BcmRadioGroup","constructor","hostRef","this","disabled","required","error","size","direction","radioGroupName","generateId","handleSlotChange","radios","forEach","radio","name","_a","radioGroupClass","tv","slots","host","container","variants","small","medium","large","horizontal","vertical","defaultVariants","querySelectorAll","componentWillLoad","value","updateRadios","setClear","checked","resetCaption","captionText","undefined","handleValueChange","newValue","handleRadioChange","event","target","r","bcmRadioGroupChange","emit","element","render","h","key","class","label","classNames","onSlotchange"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":[null,"/**\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 'tailwind-variants';\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"],"mappings":"qKAAA,MAAMA,EAAgB,q+CACtB,MAAAC,EAAeD,E,MCwDFE,EAAa,MAL1B,WAAAC,CAAAC,G,mEA8BIC,KAAAC,SAAoB,MAQpBD,KAAAE,SAAoB,MAQpBF,KAAAG,MAAiB,MAgBjBH,KAAAI,KAAqC,SAQrCJ,KAAAK,UAAuC,WAkBtBL,KAAAM,eAAiBC,EAAW,oBAkCrCP,KAAAQ,iBAAmB,KACvBR,KAAKS,OAAOC,SAAQC,I,MAChBA,EAAMP,KAAOJ,KAAKI,KAClBO,EAAMC,MAAOC,EAAAb,KAAKY,QAAI,MAAAC,SAAA,EAAAA,EAAIb,KAAKM,eAC/BK,EAAMV,SAAWD,KAAKC,SACtBU,EAAMR,MAAQH,KAAKG,KAAK,GAC1B,EA6BEH,KAAAc,gBAAkBC,EAAG,CACzBC,MAAO,CACHC,KAAM,CAAC,gDACPC,UAAW,CAAC,SAEhBC,SAAU,CACNf,KAAM,CACFgB,MAAO,CACHH,KAAM,UACNC,UAAW,WAEfG,OAAQ,CACJJ,KAAM,QACNC,UAAW,SAEfI,MAAO,CACHL,KAAM,UACNC,UAAW,YAGnBb,UAAW,CACPkB,WAAY,CACRL,UAAW,CAAC,uBAEhBM,SAAU,CACNN,UAAW,CAAC,eAIxBO,gBAAiB,CACbrB,KAAM,SACNC,UAAW,a,CAlGnB,UAAII,GACA,OAAOT,KAAKiB,KAAKS,iBAAiB,Y,CAGtC,iBAAAC,GACI,GAAI3B,KAAK4B,MAAO,CACZ5B,KAAK6B,aAAa7B,KAAK4B,M,EAS/B,cAAME,G,MACF9B,KAAK4B,MAAQ,IACbf,EAAAb,KAAKS,UAAM,MAAAI,SAAA,SAAAA,EAAEH,SAAQC,IACjBA,EAAMoB,QAAU,KAAK,G,CAS7B,kBAAMC,GACFhC,KAAKG,MAAQ,MACbH,KAAKiC,YAAcC,S,CAavB,iBAAAC,CAAkBC,GACdpC,KAAK6B,aAAaO,E,CAItB,iBAAAC,CAAkBC,GACd,MAAM3B,EAAQ2B,EAAMC,OACpB,MAAM9B,EAAST,KAAKiB,KAAKS,iBAAiB,aAC1CjB,EAAOC,SAAQ8B,IACX,GAAIA,IAAM7B,EAAO,CACb6B,EAAET,QAAU,K,KAGpB/B,KAAKyC,oBAAoBC,KAAK,CAC1Bd,MAAOjB,EAAMiB,MACbe,QAAShC,G,CAIT,YAAAkB,CAAaD,GACjB5B,KAAKS,OAAOC,SAAQC,IAChBA,EAAMoB,QAAUpB,EAAMiB,QAAUA,CAAK,G,CAuC7C,MAAAgB,GACI,MAAM3B,KAAEA,EAAIC,UAAEA,GAAclB,KAAKc,gBAAgB,CAC7CV,KAAMJ,KAAKI,KACXC,UAAWL,KAAKK,YAEpB,OACIwC,EAAA,OAAAC,IAAA,2CAAKC,MAAO9B,KACPjB,KAAKgD,OACFH,EAAA,SAAAC,IAAA,2CACIC,MAAOE,EACH,0BACA,CACI,oBAAqBjD,KAAKC,SAC1B,sBAAuBD,KAAKC,UAEhC,CACI,cAAeD,KAAKI,OAAS,QAC7B,cAAeJ,KAAKI,OAAS,SAC7B,cAAeJ,KAAKI,OAAS,WAIrCyC,EAAA,QAAAC,IAAA,2CAAMlC,KAAK,SAASZ,KAAKgD,OACxBhD,KAAKE,UAAY2C,EAAA,QAAAC,IAAA,kDAG1BD,EAAA,OAAAC,IAAA,2CAAKC,MAAO7B,KACR2B,EAAA,QAAAC,IAAA,2CAAMI,aAAclD,KAAKQ,oBAG5BR,KAAKiC,aACFY,EAAA,OAAAC,IAAA,2CACIC,MAAOE,EACH,uCACA,CACI,sCAAuCjD,KAAKC,SAC5C,oCAAqCD,KAAKC,UAAYD,KAAKG,MAC3D,sCAAuCH,KAAKC,UAEhD,CACI,cAAeD,KAAKI,OAAS,QAC7B,cAAeJ,KAAKI,OAAS,SAC7B,cAAeJ,KAAKI,OAAS,WAIpCJ,KAAKiC,a","ignoreList":[]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
const e="bromcom-ui";const t={allRenderFn:true,appendChildSlotFix:false,asyncLoading:true,asyncQueue:false,attachStyles:true,cloneNodeFix:false,cmpDidLoad:true,cmpDidRender:false,cmpDidUnload:false,cmpDidUpdate:true,cmpShouldUpdate:false,cmpWillLoad:true,cmpWillRender:false,cmpWillUpdate:false,connectedCallback:true,constructableCSS:true,cssAnnotations:true,devTools:false,disconnectedCallback:true,element:false,event:true,experimentalScopedSlotChanges:false,experimentalSlotFixes:false,formAssociated:false,hasRenderFn:true,hostListener:true,hostListenerTarget:true,hostListenerTargetBody:false,hostListenerTargetDocument:false,hostListenerTargetParent:false,hostListenerTargetWindow:true,hotModuleReplacement:false,hydrateClientSide:false,hydrateServerSide:false,hydratedAttribute:false,hydratedClass:true,hydratedSelectorName:"hydrated",initializeNextTick:false,invisiblePrehydration:true,isDebug:false,isDev:false,isTesting:false,lazyLoad:true,lifecycle:true,lifecycleDOMEvents:false,member:true,method:true,mode:false,modernPropertyDecls:false,observeAttribute:true,profile:false,prop:true,propBoolean:true,propMutable:true,propNumber:true,propString:true,reflect:true,scoped:false,scopedSlotTextContentFix:false,scriptDataOpts:false,shadowDelegatesFocus:false,shadowDom:true,slot:true,slotChildNodesFix:false,slotRelocation:false,state:true,style:true,svg:false,taskQueue:true,transformTagName:false,updatable:true,vdomAttribute:true,vdomClass:true,vdomFunctional:true,vdomKey:true,vdomListener:true,vdomPropOrAttr:true,vdomRef:true,vdomRender:true,vdomStyle:true,vdomText:true,vdomXlink:true,watchCallback:true};var n=Object.defineProperty;var r=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:true})};var s=new WeakMap;var l=e=>s.get(e);var i=(e,t)=>{s.set(t.t=e,t)};var o=(e,t)=>{const n={l:0,$hostElement$:e,i:t,o:new Map};{n.u=new Promise((e=>n.v=e))}{n.h=new Promise((e=>n.p=e));e["s-p"]=[];e["s-rc"]=[]}const r=s.set(e,n);return r};var a=(e,t)=>t in e;var f=(e,t)=>(0,console.error)(e,t);var c=new Map;var u=(e,t,n)=>{const r=e.m.replace(/-/g,"_");const s=e.S;if(!s){return void 0}const l=c.get(s);if(l){return l[r]}
|
|
2
|
+
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${s}.entry.js${""}`).then((e=>{{c.set(s,e)}return e[r]}),(e=>{f(e,t.$hostElement$)}))};var v=new Map;var d="sty-id";var h="{visibility:hidden}.hydrated{visibility:inherit}";var p="slot-fb{display:contents}slot-fb[hidden]{display:none}";var m="http://www.w3.org/1999/xlink";var y=typeof window!=="undefined"?window:{};var b=y.document||{head:{}};var w={l:0,$:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,r)=>e.addEventListener(t,n,r),rel:(e,t,n,r)=>e.removeEventListener(t,n,r),ce:(e,t)=>new CustomEvent(e,t)};var S=(()=>{let e=false;try{b.addEventListener("e",null,Object.defineProperty({},"passive",{get(){e=true}}))}catch(e){}return e})();var g=e=>Promise.resolve(e);var $=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var k=false;var C=[];var j=[];var O=(e,t)=>n=>{e.push(n);if(!k){k=true;if(t&&w.l&4){E(D)}else{w.raf(D)}}};var x=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){f(e)}}e.length=0};var D=()=>{x(C);{x(j);if(k=C.length>0){w.raf(D)}}};var E=e=>g().then(e);var L=O(j,true);var T=e=>{e=typeof e;return e==="object"||e==="function"};function F(e){var t,n,r;return(r=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?r:void 0}var M={};r(M,{err:()=>R,map:()=>A,ok:()=>P,unwrap:()=>N,unwrapErr:()=>U});var P=e=>({isOk:true,isErr:false,value:e});var R=e=>({isOk:false,isErr:true,value:e});function A(e,t){if(e.isOk){const n=t(e.value);if(n instanceof Promise){return n.then((e=>P(e)))}else{return P(n)}}if(e.isErr){const t=e.value;return R(t)}throw"should never get here"}var N=e=>{if(e.isOk){return e.value}else{throw e.value}};var U=e=>{if(e.isErr){return e.value}else{throw e.value}};var W=(e,t="")=>{{return()=>{}}};var H=(e,t)=>{{return()=>{}}};var z=(e,t,...n)=>{let r=null;let s=null;let l=false;let i=false;const o=[];const a=t=>{for(let n=0;n<t.length;n++){r=t[n];if(Array.isArray(r)){a(r)}else if(r!=null&&typeof r!=="boolean"){if(l=typeof e!=="function"&&!T(r)){r=String(r)}if(l&&i){o[o.length-1].k+=r}else{o.push(l?B(null,r):r)}i=l}}};a(n);if(t){if(t.key){s=t.key}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,o,q)}const f=B(e,null);f.C=t;if(o.length>0){f.j=o}{f.O=s}return f};var B=(e,t)=>{const n={l:0,D:e,k:t,L:null,j:null};{n.C=null}{n.O=null}return n};var Q={};var V=e=>e&&e.D===Q;var q={forEach:(e,t)=>e.map(G).forEach(t),map:(e,t)=>e.map(G).map(t).map(I)};var G=e=>({vattrs:e.C,vchildren:e.j,vkey:e.O,vname:e.T,vtag:e.D,vtext:e.k});var I=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return z(e.vtag,t,...e.vchildren||[])}const t=B(e.vtag,e.vtext);t.C=e.vattrs;t.j=e.vchildren;t.O=e.vkey;t.T=e.vname;return t};var K=(e,t)=>{if(e!=null&&!T(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return parseFloat(e)}if(t&1){return String(e)}return e}return e};var X=e=>l(e).$hostElement$;var _=(e,t,n)=>{const r=X(e);return{emit:e=>J(r,t,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:e})}};var J=(e,t,n)=>{const r=w.ce(t,n);e.dispatchEvent(r);return r};var Y=new WeakMap;var Z=(e,t,n)=>{let r=v.get(e);if($&&n){r=r||new CSSStyleSheet;if(typeof r==="string"){r=t}else{r.replaceSync(t)}}else{r=t}v.set(e,r)};var ee=(e,t,n)=>{var r;const s=ne(t);const l=v.get(s);e=e.nodeType===11?e:b;if(l){if(typeof l==="string"){e=e.head||e;let n=Y.get(e);let i;if(!n){Y.set(e,n=new Set)}if(!n.has(s)){{i=document.querySelector(`[${d}="${s}"]`)||b.createElement("style");i.innerHTML=l;const n=(r=w.F)!=null?r:F(b);if(n!=null){i.setAttribute("nonce",n)}if(!(t.l&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if($){const t=new CSSStyleSheet;t.replaceSync(l);e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");if(t){t.innerHTML=l+t.innerHTML}else{e.prepend(i)}}}else{e.append(i)}}if(t.l&1&&e.nodeName!=="HEAD"){e.insertBefore(i,null)}}if(t.l&4){i.innerHTML+=p}if(n){n.add(s)}}}else if(!e.adoptedStyleSheets.includes(l)){e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]}}return s};var te=e=>{const t=e.i;const n=e.$hostElement$;const r=t.l;const s=W("attachStyles",t.m);const l=ee(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(r&10&&r&2){n["s-sc"]=l;n.classList.add(l+"-h")}s()};var ne=(e,t)=>"sc-"+e.m;var re=(e,t,n,r,s,l,i)=>{if(n!==r){let i=a(e,t);let o=t.toLowerCase();if(t==="class"){const t=e.classList;const s=le(n);let l=le(r);{t.remove(...s.filter((e=>e&&!l.includes(e))));t.add(...l.filter((e=>e&&!s.includes(e))))}}else if(t==="style"){{for(const t in n){if(!r||r[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in r){if(!n||r[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,r[t])}else{e.style[t]=r[t]}}}}else if(t==="key");else if(t==="ref"){if(r){r(e)}}else if(!i&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(a(y,o)){t=o.slice(2)}else{t=o[2]+t.slice(3)}if(n||r){const s=t.endsWith(ie);t=t.replace(oe,"");if(n){w.rel(e,t,n,s)}if(r){w.ael(e,t,r,s)}}}else{const a=T(r);if((i||a&&r!==null)&&!s){try{if(!e.tagName.includes("-")){const s=r==null?"":r;if(t==="list"){i=false}else if(n==null||e[t]!=s){if(typeof e.__lookupSetter__(t)==="function"){e[t]=s}else{e.setAttribute(t,s)}}}else if(e[t]!==r){e[t]=r}}catch(e){}}let f=false;{if(o!==(o=o.replace(/^xlink\:?/,""))){t=o;f=true}}if(r==null||r===false){if(r!==false||e.getAttribute(t)===""){if(f){e.removeAttributeNS(m,t)}else{e.removeAttribute(t)}}}else if((!i||l&4||s)&&!a){r=r===true?"":r;if(f){e.setAttributeNS(m,t,r)}else{e.setAttribute(t,r)}}}}};var se=/\s/;var le=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(se)};var ie="Capture";var oe=new RegExp(ie+"$");var ae=(e,t,n,r)=>{const s=t.L.nodeType===11&&t.L.host?t.L.host:t.L;const l=e&&e.C||{};const i=t.C||{};{for(const e of fe(Object.keys(l))){if(!(e in i)){re(s,e,l[e],void 0,n,t.l)}}}for(const e of fe(Object.keys(i))){re(s,e,l[e],i[e],n,t.l)}};function fe(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var ce;var ue=false;var ve=false;var de=(e,n,r)=>{const s=n.j[r];let l=0;let i;let o;if(s.k!==null){i=s.L=b.createTextNode(s.k)}else{i=s.L=b.createElement(!ue&&t.slotRelocation&&s.l&2?"slot-fb":s.D);{ae(null,s,ve)}if(s.j){for(l=0;l<s.j.length;++l){o=de(e,s,l);if(o){i.appendChild(o)}}}}i["s-hn"]=ce;return i};var he=(e,t,n,r,s,l)=>{let i=e;let o;if(i.shadowRoot&&i.tagName===ce){i=i.shadowRoot}for(;s<=l;++s){if(r[s]){o=de(null,n,s);if(o){r[s].L=o;Se(i,o,t)}}}};var pe=(e,t,n)=>{for(let r=t;r<=n;++r){const t=e[r];if(t){const e=t.L;we(t);if(e){e.remove()}}}};var me=(e,t,n,r,s=false)=>{let l=0;let i=0;let o=0;let a=0;let f=t.length-1;let c=t[0];let u=t[f];let v=r.length-1;let d=r[0];let h=r[v];let p;let m;while(l<=f&&i<=v){if(c==null){c=t[++l]}else if(u==null){u=t[--f]}else if(d==null){d=r[++i]}else if(h==null){h=r[--v]}else if(ye(c,d,s)){be(c,d,s);c=t[++l];d=r[++i]}else if(ye(u,h,s)){be(u,h,s);u=t[--f];h=r[--v]}else if(ye(c,h,s)){be(c,h,s);Se(e,c.L,u.L.nextSibling);c=t[++l];h=r[--v]}else if(ye(u,d,s)){be(u,d,s);Se(e,u.L,c.L);u=t[--f];d=r[++i]}else{o=-1;{for(a=l;a<=f;++a){if(t[a]&&t[a].O!==null&&t[a].O===d.O){o=a;break}}}if(o>=0){m=t[o];if(m.D!==d.D){p=de(t&&t[i],n,o)}else{be(m,d,s);t[o]=void 0;p=m.L}d=r[++i]}else{p=de(t&&t[i],n,i);d=r[++i]}if(p){{Se(c.L.parentNode,p,c.L)}}}}if(l>f){he(e,r[v+1]==null?null:r[v+1].L,n,r,i,v)}else if(i>v){pe(t,l,f)}};var ye=(e,t,n=false)=>{if(e.D===t.D){if(!n){return e.O===t.O}if(n&&!e.O&&t.O){e.O=t.O}return true}return false};var be=(e,n,r=false)=>{const s=n.L=e.L;const l=e.j;const i=n.j;const o=n.D;const a=n.k;if(a===null){{if(o==="slot"&&!ue);else{ae(e,n,ve)}}if(l!==null&&i!==null){me(s,l,n,i,r)}else if(i!==null){if(e.k!==null){s.textContent=""}he(s,null,n,i,0,i.length-1)}else if(!r&&t.updatable&&l!==null){pe(l,0,l.length-1)}}else if(e.k!==a){s.data=a}};var we=e=>{{e.C&&e.C.ref&&e.C.ref(null);e.j&&e.j.map(we)}};var Se=(e,t,n)=>{{return e==null?void 0:e.insertBefore(t,n)}};var ge=(e,t,n=false)=>{const r=e.$hostElement$;const s=e.i;const l=e.M||B(null,null);const i=V(t)?t:z(null,null,t);ce=r.tagName;if(s.P){i.C=i.C||{};s.P.map((([e,t])=>i.C[t]=r[e]))}if(n&&i.C){for(const e of Object.keys(i.C)){if(r.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){i.C[e]=r[e]}}}i.D=null;i.l|=4;e.M=i;i.L=l.L=r.shadowRoot||r;ue=(s.l&1)!==0;be(l,i,n)};var $e=(e,t)=>{if(t&&!e.R&&t["s-p"]){const n=t["s-p"].push(new Promise((r=>e.R=()=>{t["s-p"].splice(n-1,1);r()})))}};var ke=(e,t)=>{{e.l|=16}if(e.l&4){e.l|=512;return}$e(e,e.A);const n=()=>Ce(e,t);return L(n)};var Ce=(e,t)=>{const n=e.$hostElement$;const r=W("scheduleUpdate",e.i.m);const s=e.t;if(!s){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let l;if(t){{e.l|=256;if(e.N){e.N.map((([e,t])=>Te(s,e,t,n)));e.N=void 0}}{l=Te(s,"componentWillLoad",void 0,n)}}r();return je(l,(()=>xe(e,s,t)))};var je=(e,t)=>Oe(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Oe=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var xe=async(e,t,n)=>{var r;const s=e.$hostElement$;const l=W("update",e.i.m);const i=s["s-rc"];if(n){te(e)}const o=W("render",e.i.m);{De(e,t,s,n)}if(i){i.map((e=>e()));s["s-rc"]=void 0}o();l();{const t=(r=s["s-p"])!=null?r:[];const n=()=>Ee(e);if(t.length===0){n()}else{Promise.all(t).then(n);e.l|=4;t.length=0}}};var De=(e,t,n,r)=>{try{t=t.render();{e.l&=~16}{e.l|=2}{{{ge(e,t,r)}}}}catch(t){f(t,e.$hostElement$)}return null};var Ee=e=>{const t=e.i.m;const n=e.$hostElement$;const r=W("postUpdate",t);const s=e.t;const l=e.A;if(!(e.l&64)){e.l|=64;{Fe(n)}{Te(s,"componentDidLoad",void 0,n)}r();{e.p(n);if(!l){Le()}}}else{{Te(s,"componentDidUpdate",void 0,n)}r()}{e.v(n)}{if(e.R){e.R();e.R=void 0}if(e.l&512){E((()=>ke(e,false)))}e.l&=~(4|512)}};var Le=t=>{{Fe(b.documentElement)}E((()=>J(y,"appload",{detail:{namespace:e}})))};var Te=(e,t,n,r)=>{if(e&&e[t]){try{return e[t](n)}catch(e){f(e,r)}}return void 0};var Fe=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var Me=(e,t)=>l(e).o.get(t);var Pe=(e,t,n,r)=>{const s=l(e);if(!s){throw new Error(`Couldn't find host element for "${r.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`)}const i=s.$hostElement$;const o=s.o.get(t);const a=s.l;const c=s.t;n=K(n,r.U[t][0]);const u=Number.isNaN(o)&&Number.isNaN(n);const v=n!==o&&!u;if((!(a&8)||o===void 0)&&v){s.o.set(t,n);if(c){if(r.W&&a&128){const e=r.W[t];if(e){e.map((e=>{try{c[e](n,o,t)}catch(e){f(e,i)}}))}}if((a&(2|16))===2){ke(s,false)}}}};var Re=(e,n,r)=>{var s,i;const o=e.prototype;if(n.U||(n.W||e.watchers)){if(e.watchers&&!n.W){n.W=e.watchers}const a=Object.entries((s=n.U)!=null?s:{});a.map((([e,[t]])=>{if(t&31||r&2&&t&32){const{get:s,set:i}=Object.getOwnPropertyDescriptor(o,e)||{};if(s)n.U[e][0]|=2048;if(i)n.U[e][0]|=4096;if(r&1||!s){Object.defineProperty(o,e,{get(){{if((n.U[e][0]&2048)===0){return Me(this,e)}const t=l(this);const r=t?t.t:o;if(!r)return;return r[e]}},configurable:true,enumerable:true})}Object.defineProperty(o,e,{set(s){const o=l(this);if(i){const r=t&32?this[e]:o.$hostElement$[e];if(typeof r==="undefined"&&o.o.get(e)){s=o.o.get(e)}else if(!o.o.get(e)&&r){o.o.set(e,r)}i.apply(this,[K(s,t)]);s=t&32?this[e]:o.$hostElement$[e];Pe(this,e,s,n);return}{if((r&1)===0||(n.U[e][0]&4096)===0){Pe(this,e,s,n);if(r&1&&!o.t){o.h.then((()=>{if(n.U[e][0]&4096&&o.t[e]!==o.o.get(e)){o.t[e]=s}}))}return}const l=()=>{const r=o.t[e];if(!o.o.get(e)&&r){o.o.set(e,r)}o.t[e]=K(s,t);Pe(this,e,o.t[e],n)};if(o.t){l()}else{o.h.then((()=>l()))}}}})}else if(r&1&&t&64){Object.defineProperty(o,e,{value(...t){var n;const r=l(this);return(n=r==null?void 0:r.u)==null?void 0:n.then((()=>{var n;return(n=r.t)==null?void 0:n[e](...t)}))}})}}));if(r&1){const r=new Map;o.attributeChangedCallback=function(e,s,i){w.jmp((()=>{var a;const f=r.get(e);if(this.hasOwnProperty(f)&&t.lazyLoad){i=this[f];delete this[f]}else if(o.hasOwnProperty(f)&&typeof this[f]==="number"&&this[f]==i){return}else if(f==null){const t=l(this);const r=t==null?void 0:t.l;if(r&&!(r&8)&&r&128&&i!==s){const r=t.t;const l=(a=n.W)==null?void 0:a[e];l==null?void 0:l.forEach((t=>{if(r[t]!=null){r[t].call(r,i,s,e)}}))}return}const c=Object.getOwnPropertyDescriptor(o,f);i=i===null&&typeof this[f]==="boolean"?false:i;if(i!==this[f]&&(!c.get||!!c.set)){this[f]=i}}))};e.observedAttributes=Array.from(new Set([...Object.keys((i=n.W)!=null?i:{}),...a.filter((([e,t])=>t[0]&15)).map((([e,t])=>{var s;const l=t[1]||e;r.set(l,e);if(t[0]&512){(s=n.P)==null?void 0:s.push([e,l])}return l}))]))}}return e};var Ae=async(e,t,n,r)=>{let s;if((t.l&32)===0){t.l|=32;{const r=u(n,t);if(r&&"then"in r){const e=H();s=await r;e()}else{s=r}if(!s){throw new Error(`Constructor for "${n.m}#${t.H}" was not found`)}if(!s.isProxied){{n.W=s.watchers}Re(s,n,2);s.isProxied=true}const l=W("createInstance",n.m);{t.l|=8}try{new s(t)}catch(t){f(t,e)}{t.l&=~8}{t.l|=128}l();Ne(t.t,e)}if(s&&s.style){let e;if(typeof s.style==="string"){e=s.style}const t=ne(n);if(!v.has(t)){const r=W("registerStyles",n.m);Z(t,e,!!(n.l&1));r()}}}const l=t.A;const i=()=>ke(t,true);if(l&&l["s-rc"]){l["s-rc"].push(i)}else{i()}};var Ne=(e,t)=>{{Te(e,"connectedCallback",void 0,t)}};var Ue=e=>{if((w.l&1)===0){const t=l(e);const n=t.i;const r=W("connectedCallback",n.m);if(!(t.l&1)){t.l|=1;{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){$e(t,t.A=n);break}}}if(n.U){Object.entries(n.U).map((([t,[n]])=>{if(n&31&&e.hasOwnProperty(t)){const n=e[t];delete e[t];e[t]=n}}))}{Ae(e,t,n)}}else{Qe(e,t,n.B);if(t==null?void 0:t.t){Ne(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>Ne(t.t,e)))}}r()}};var We=(e,t)=>{{Te(e,"disconnectedCallback",void 0,t||e)}};var He=async e=>{if((w.l&1)===0){const t=l(e);{if(t.V){t.V.map((e=>e()));t.V=void 0}}if(t==null?void 0:t.t){We(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>We(t.t,e)))}}if(Y.has(e)){Y.delete(e)}if(e.shadowRoot&&Y.has(e.shadowRoot)){Y.delete(e.shadowRoot)}};var ze=(e,t={})=>{var n;const r=W();const s=[];const i=t.exclude||[];const a=y.customElements;const f=b.head;const c=f.querySelector("meta[charset]");const u=b.createElement("style");const v=[];let d;let m=true;Object.assign(w,t);w.$=new URL(t.resourcesUrl||"./",b.baseURI).href;let S=false;e.map((e=>{e[1].map((t=>{var n;const r={l:t[0],m:t[1],U:t[2],B:t[3]};if(r.l&4){S=true}{r.U=t[2]}{r.B=t[3]}{r.P=[]}{r.W=(n=t[4])!=null?n:{}}const f=r.m;const c=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;o(e,r);if(r.l&1){{if(!e.shadowRoot){{e.attachShadow({mode:"open"})}}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${r.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=l(this);if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;Qe(this,e,r.B)}if(d){clearTimeout(d);d=null}if(m){v.push(this)}else{w.jmp((()=>Ue(this)))}}disconnectedCallback(){w.jmp((()=>He(this)));w.raf((()=>{var e;const t=l(this);if(((e=t==null?void 0:t.M)==null?void 0:e.L)instanceof Node&&!t.M.L.isConnected){delete t.M.L}}))}componentOnReady(){return l(this).h}};r.S=e[0];if(!i.includes(f)&&!a.get(f)){s.push(f);a.define(f,Re(c,r,1))}}))}));if(s.length>0){if(S){u.textContent+=p}{u.textContent+=s.sort()+h}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(n=w.F)!=null?n:F(b);if(e!=null){u.setAttribute("nonce",e)}f.insertBefore(u,c?c.nextSibling:f.firstChild)}}m=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{w.jmp((()=>d=setTimeout(Le,30)))}}r()};var Be=(e,t)=>t;var Qe=(e,t,n,r)=>{if(n){n.map((([n,r,s])=>{const l=qe(e,n);const i=Ve(t,s);const o=Ge(n);w.ael(l,r,i,o);(t.V=t.V||[]).push((()=>w.rel(l,r,i,o)))}))}};var Ve=(e,t)=>n=>{var r;try{{if(e.l&256){(r=e.t)==null?void 0:r[t](n)}else{(e.N=e.N||[]).push([t,n])}}}catch(t){f(t,e.$hostElement$)}};var qe=(e,t)=>{if(t&8)return y;return e};var Ge=e=>S?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var Ie=e=>w.F=e;export{Be as F,Q as H,ze as b,_ as c,X as g,z as h,g as p,i as r,Ie as s};
|
|
3
|
+
//# sourceMappingURL=p-c9b736d9.js.map
|