bromcom-ui-next 0.1.20 → 0.1.21
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.esm.js +1 -1
- package/dist/bromcom-ui/{p-94ced142.entry.js → p-06d42346.entry.js} +2 -2
- package/dist/bromcom-ui/p-06d42346.entry.js.map +1 -0
- package/dist/bromcom-ui/p-0c8a9725.entry.js +2 -0
- package/dist/bromcom-ui/p-0c8a9725.entry.js.map +1 -0
- package/dist/bromcom-ui/p-11227d96.entry.js +2 -0
- package/dist/bromcom-ui/p-11227d96.entry.js.map +1 -0
- package/dist/bromcom-ui/p-1b4ccb21.entry.js +2 -0
- package/dist/bromcom-ui/{p-b6dd459b.entry.js.map → p-1b4ccb21.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-5fcf77f9.js → p-2c58fcb7.js} +2 -2
- package/dist/bromcom-ui/p-2c58fcb7.js.map +1 -0
- package/dist/bromcom-ui/p-2e469cb9.entry.js +2 -0
- package/dist/bromcom-ui/p-2e469cb9.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-145dce31.entry.js → p-350c97e1.entry.js} +2 -2
- package/dist/bromcom-ui/p-350c97e1.entry.js.map +1 -0
- package/dist/bromcom-ui/p-4027f5c4.entry.js +2 -0
- package/dist/bromcom-ui/p-4027f5c4.entry.js.map +1 -0
- package/dist/bromcom-ui/p-45f4c75b.entry.js +2 -0
- package/dist/bromcom-ui/p-45f4c75b.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-42feef7e.entry.js → p-4652635d.entry.js} +2 -2
- package/dist/bromcom-ui/p-4652635d.entry.js.map +1 -0
- package/dist/bromcom-ui/p-77122bc2.entry.js +2 -0
- package/dist/bromcom-ui/p-77122bc2.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-d975579d.entry.js → p-78d8f63c.entry.js} +2 -2
- package/dist/bromcom-ui/p-78d8f63c.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-4149c766.entry.js → p-87a0f20b.entry.js} +2 -2
- package/dist/bromcom-ui/p-87a0f20b.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-b867a105.entry.js → p-881ccea1.entry.js} +2 -2
- package/dist/bromcom-ui/p-881ccea1.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-1e5da10e.entry.js → p-8ae92b62.entry.js} +2 -2
- package/dist/bromcom-ui/p-8ae92b62.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-b582c170.entry.js → p-9a6cec21.entry.js} +2 -2
- package/dist/bromcom-ui/p-9a6cec21.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-8550a2aa.entry.js → p-a03922f8.entry.js} +2 -2
- package/dist/bromcom-ui/p-a03922f8.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-9ba07f12.entry.js → p-a20f6baf.entry.js} +2 -2
- package/dist/bromcom-ui/p-a20f6baf.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-bc962a70.entry.js → p-b1f9ad67.entry.js} +2 -2
- package/dist/bromcom-ui/p-b1f9ad67.entry.js.map +1 -0
- package/dist/bromcom-ui/p-bf213fe6.entry.js +2 -0
- package/dist/bromcom-ui/p-bf213fe6.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-bbe4aac2.entry.js → p-c89f7997.entry.js} +2 -2
- package/dist/bromcom-ui/p-c89f7997.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-e2f468ab.entry.js → p-f56b22de.entry.js} +2 -2
- package/dist/bromcom-ui/p-f56b22de.entry.js.map +1 -0
- package/dist/bromcom-ui/p-fdcb9dbd.entry.js +2 -0
- package/dist/bromcom-ui/p-fdcb9dbd.entry.js.map +1 -0
- package/dist/cjs/bcm-accordion.cjs.entry.js +4 -4
- package/dist/cjs/bcm-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-alert.cjs.entry.js +4 -4
- package/dist/cjs/bcm-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-badge.cjs.entry.js +5 -5
- package/dist/cjs/bcm-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-basic-badge.cjs.entry.js +5 -5
- package/dist/cjs/bcm-basic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-button-group.cjs.entry.js +4 -4
- package/dist/cjs/bcm-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-button_8.cjs.entry.js +19 -21
- package/dist/cjs/bcm-button_8.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/bcm-checkbox.cjs.entry.js.map +1 -1
- 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-pop-confirm.cjs.entry.js +3 -3
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +3 -3
- package/dist/cjs/bcm-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-radio-group.cjs.entry.js +6 -6
- package/dist/cjs/bcm-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-radio.cjs.entry.js +3 -3
- package/dist/cjs/bcm-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js +4 -4
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js +4 -4
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-switch.cjs.entry.js +4 -4
- package/dist/cjs/bcm-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-list.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tabs-list.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-textarea.cjs.entry.js +6 -6
- package/dist/cjs/bcm-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tooltip.cjs.entry.js +4 -9
- package/dist/cjs/bcm-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-310db2a6.js → tv-d2e35446.js} +16 -3
- package/dist/cjs/tv-d2e35446.js.map +1 -0
- package/dist/collection/components/accordion/accordion.component.js +3 -3
- package/dist/collection/components/accordion/accordion.component.js.map +1 -1
- package/dist/collection/components/alert/alert.component.js +2 -2
- package/dist/collection/components/alert/alert.component.js.map +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.component.js +3 -3
- package/dist/collection/components/badge/badge.component.js.map +1 -1
- package/dist/collection/components/badge/badge.css +1 -1
- package/dist/collection/components/basic-badge/basic-badge.component.js +3 -3
- package/dist/collection/components/basic-badge/basic-badge.component.js.map +1 -1
- package/dist/collection/components/basic-badge/basic-badge.css +1 -1
- package/dist/collection/components/button/button.component.js +3 -3
- package/dist/collection/components/button/button.component.js.map +1 -1
- package/dist/collection/components/button-group/button-group.component.js +3 -3
- package/dist/collection/components/button-group/button-group.component.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.component.js +2 -2
- package/dist/collection/components/checkbox/checkbox.component.js.map +1 -1
- package/dist/collection/components/chip/chip.component.js +2 -2
- package/dist/collection/components/chip/chip.component.js.map +1 -1
- package/dist/collection/components/divider/divider.component.js +2 -2
- package/dist/collection/components/divider/divider.component.js.map +1 -1
- package/dist/collection/components/drawer/drawer.component.js +3 -5
- package/dist/collection/components/drawer/drawer.component.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +1 -1
- package/dist/collection/components/dropdown/dropdown.component.js +2 -2
- package/dist/collection/components/dropdown/dropdown.component.js.map +1 -1
- package/dist/collection/components/dropdown-item/dropdown-item.component.js +3 -3
- package/dist/collection/components/dropdown-item/dropdown-item.component.js.map +1 -1
- package/dist/collection/components/input/input.component.js +3 -3
- package/dist/collection/components/input/input.component.js.map +1 -1
- package/dist/collection/components/pop-confirm/pop-confirm.component.js +2 -2
- package/dist/collection/components/pop-confirm/pop-confirm.component.js.map +1 -1
- package/dist/collection/components/popover/popover.component.js +2 -2
- package/dist/collection/components/popover/popover.component.js.map +1 -1
- package/dist/collection/components/radio/radio.component.js +2 -2
- package/dist/collection/components/radio/radio.component.js.map +1 -1
- package/dist/collection/components/radio-group/radio-group.component.js +4 -4
- package/dist/collection/components/radio-group/radio-group.component.js.map +1 -1
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js +3 -3
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js.map +1 -1
- package/dist/collection/components/segmented-picker/segmented-picker.component.js +3 -3
- package/dist/collection/components/segmented-picker/segmented-picker.component.js.map +1 -1
- package/dist/collection/components/switch/switch.component.js +3 -3
- package/dist/collection/components/switch/switch.component.js.map +1 -1
- package/dist/collection/components/tabs/tabs-list.component.js +2 -2
- package/dist/collection/components/tabs/tabs-list.component.js.map +1 -1
- package/dist/collection/components/tabs/tabs-trigger.component.js +2 -2
- package/dist/collection/components/tabs/tabs-trigger.component.js.map +1 -1
- package/dist/collection/components/tabs/tabs.component.js +2 -2
- package/dist/collection/components/tabs/tabs.component.js.map +1 -1
- package/dist/collection/components/textarea/textarea.component.js +4 -4
- package/dist/collection/components/textarea/textarea.component.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.component.js +3 -8
- package/dist/collection/components/tooltip/tooltip.component.js.map +1 -1
- package/dist/collection/utils/tv.js +14 -0
- package/dist/collection/utils/tv.js.map +1 -0
- package/dist/components/bcm-accordion.js +4 -4
- package/dist/components/bcm-accordion.js.map +1 -1
- package/dist/components/bcm-alert.js +4 -4
- package/dist/components/bcm-alert.js.map +1 -1
- package/dist/components/bcm-avatar.js +2 -2
- package/dist/components/bcm-avatar.js.map +1 -1
- package/dist/components/bcm-badge.js +1 -1
- package/dist/components/bcm-basic-badge.js +5 -5
- package/dist/components/bcm-basic-badge.js.map +1 -1
- package/dist/components/bcm-button-group.js +4 -4
- package/dist/components/bcm-button-group.js.map +1 -1
- package/dist/components/bcm-button.js +1 -1
- package/dist/components/bcm-checkbox.js +3 -3
- package/dist/components/bcm-checkbox.js.map +1 -1
- 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-drawer.js +5 -7
- package/dist/components/bcm-drawer.js.map +1 -1
- package/dist/components/bcm-dropdown-item.js +4 -4
- package/dist/components/bcm-dropdown-item.js.map +1 -1
- package/dist/components/bcm-dropdown.js +4 -4
- package/dist/components/bcm-dropdown.js.map +1 -1
- package/dist/components/bcm-input.js +4 -4
- package/dist/components/bcm-input.js.map +1 -1
- package/dist/components/bcm-pop-confirm.js +4 -4
- package/dist/components/bcm-pop-confirm.js.map +1 -1
- package/dist/components/bcm-popover.js +3 -3
- package/dist/components/bcm-popover.js.map +1 -1
- package/dist/components/bcm-radio-group.js +5 -5
- package/dist/components/bcm-radio-group.js.map +1 -1
- package/dist/components/bcm-radio.js +3 -3
- package/dist/components/bcm-radio.js.map +1 -1
- package/dist/components/bcm-segmented-picker-option.js +4 -4
- package/dist/components/bcm-segmented-picker-option.js.map +1 -1
- package/dist/components/bcm-segmented-picker.js +4 -4
- package/dist/components/bcm-segmented-picker.js.map +1 -1
- package/dist/components/bcm-switch.js +4 -4
- package/dist/components/bcm-switch.js.map +1 -1
- package/dist/components/bcm-tabs-list.js +3 -3
- package/dist/components/bcm-tabs-list.js.map +1 -1
- package/dist/components/bcm-tabs-trigger.js +3 -3
- package/dist/components/bcm-tabs-trigger.js.map +1 -1
- package/dist/components/bcm-tabs.js +3 -3
- package/dist/components/bcm-tabs.js.map +1 -1
- package/dist/components/bcm-textarea.js +5 -5
- package/dist/components/bcm-textarea.js.map +1 -1
- package/dist/components/bcm-tooltip.js +4 -9
- package/dist/components/bcm-tooltip.js.map +1 -1
- package/dist/components/{p-5fcf77f9.js → p-2c58fcb7.js} +16 -3
- package/dist/components/p-2c58fcb7.js.map +1 -0
- package/dist/components/{p-d54398ea.js → p-bf273460.js} +6 -6
- package/dist/components/p-bf273460.js.map +1 -0
- package/dist/components/{p-d56f8a26.js → p-c491a7c9.js} +5 -5
- package/dist/components/p-c491a7c9.js.map +1 -0
- package/dist/esm/bcm-accordion.entry.js +4 -4
- package/dist/esm/bcm-accordion.entry.js.map +1 -1
- package/dist/esm/bcm-alert.entry.js +4 -4
- package/dist/esm/bcm-alert.entry.js.map +1 -1
- package/dist/esm/bcm-avatar.entry.js +1 -1
- package/dist/esm/bcm-avatar.entry.js.map +1 -1
- package/dist/esm/bcm-badge.entry.js +5 -5
- package/dist/esm/bcm-badge.entry.js.map +1 -1
- package/dist/esm/bcm-basic-badge.entry.js +5 -5
- package/dist/esm/bcm-basic-badge.entry.js.map +1 -1
- package/dist/esm/bcm-button-group.entry.js +4 -4
- package/dist/esm/bcm-button-group.entry.js.map +1 -1
- package/dist/esm/bcm-button_8.entry.js +16 -18
- package/dist/esm/bcm-button_8.entry.js.map +1 -1
- package/dist/esm/bcm-checkbox.entry.js +3 -3
- package/dist/esm/bcm-checkbox.entry.js.map +1 -1
- 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-pop-confirm.entry.js +3 -3
- package/dist/esm/bcm-pop-confirm.entry.js.map +1 -1
- package/dist/esm/bcm-popover.entry.js +3 -3
- package/dist/esm/bcm-popover.entry.js.map +1 -1
- package/dist/esm/bcm-radio-group.entry.js +5 -5
- package/dist/esm/bcm-radio-group.entry.js.map +1 -1
- package/dist/esm/bcm-radio.entry.js +3 -3
- package/dist/esm/bcm-radio.entry.js.map +1 -1
- package/dist/esm/bcm-segmented-picker-option.entry.js +4 -4
- package/dist/esm/bcm-segmented-picker-option.entry.js.map +1 -1
- package/dist/esm/bcm-segmented-picker.entry.js +4 -4
- package/dist/esm/bcm-segmented-picker.entry.js.map +1 -1
- package/dist/esm/bcm-switch.entry.js +4 -4
- package/dist/esm/bcm-switch.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-list.entry.js +3 -3
- package/dist/esm/bcm-tabs-list.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +3 -3
- package/dist/esm/bcm-tabs-trigger.entry.js.map +1 -1
- package/dist/esm/bcm-tabs.entry.js +3 -3
- package/dist/esm/bcm-tabs.entry.js.map +1 -1
- package/dist/esm/bcm-textarea.entry.js +5 -5
- package/dist/esm/bcm-textarea.entry.js.map +1 -1
- package/dist/esm/bcm-tooltip.entry.js +4 -9
- package/dist/esm/bcm-tooltip.entry.js.map +1 -1
- package/dist/esm/{index-f3b17e60.js → tv-6dcd2224.js} +16 -3
- package/dist/esm/tv-6dcd2224.js.map +1 -0
- package/dist/types/utils/tv.d.ts +20 -0
- package/package.json +1 -1
- package/dist/bromcom-ui/p-01c8dde2.entry.js +0 -2
- package/dist/bromcom-ui/p-01c8dde2.entry.js.map +0 -1
- package/dist/bromcom-ui/p-03be08cc.entry.js +0 -2
- package/dist/bromcom-ui/p-03be08cc.entry.js.map +0 -1
- package/dist/bromcom-ui/p-145dce31.entry.js.map +0 -1
- package/dist/bromcom-ui/p-1e5da10e.entry.js.map +0 -1
- package/dist/bromcom-ui/p-25583111.entry.js +0 -2
- package/dist/bromcom-ui/p-25583111.entry.js.map +0 -1
- package/dist/bromcom-ui/p-4149c766.entry.js.map +0 -1
- package/dist/bromcom-ui/p-42feef7e.entry.js.map +0 -1
- package/dist/bromcom-ui/p-5fcf77f9.js.map +0 -1
- package/dist/bromcom-ui/p-74b51cfc.entry.js +0 -2
- package/dist/bromcom-ui/p-74b51cfc.entry.js.map +0 -1
- package/dist/bromcom-ui/p-7b93985f.entry.js +0 -2
- package/dist/bromcom-ui/p-7b93985f.entry.js.map +0 -1
- package/dist/bromcom-ui/p-842b48ae.entry.js +0 -2
- package/dist/bromcom-ui/p-842b48ae.entry.js.map +0 -1
- package/dist/bromcom-ui/p-8550a2aa.entry.js.map +0 -1
- package/dist/bromcom-ui/p-94ced142.entry.js.map +0 -1
- package/dist/bromcom-ui/p-9ba07f12.entry.js.map +0 -1
- package/dist/bromcom-ui/p-a02e437c.entry.js +0 -2
- package/dist/bromcom-ui/p-a02e437c.entry.js.map +0 -1
- package/dist/bromcom-ui/p-b582c170.entry.js.map +0 -1
- package/dist/bromcom-ui/p-b6dd459b.entry.js +0 -2
- package/dist/bromcom-ui/p-b867a105.entry.js.map +0 -1
- package/dist/bromcom-ui/p-bbe4aac2.entry.js.map +0 -1
- package/dist/bromcom-ui/p-bc962a70.entry.js.map +0 -1
- package/dist/bromcom-ui/p-ceaa2fc5.entry.js +0 -2
- package/dist/bromcom-ui/p-ceaa2fc5.entry.js.map +0 -1
- package/dist/bromcom-ui/p-d975579d.entry.js.map +0 -1
- package/dist/bromcom-ui/p-e2f468ab.entry.js.map +0 -1
- package/dist/cjs/index-310db2a6.js.map +0 -1
- package/dist/components/p-5fcf77f9.js.map +0 -1
- package/dist/components/p-d54398ea.js.map +0 -1
- package/dist/components/p-d56f8a26.js.map +0 -1
- package/dist/esm/index-f3b17e60.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-30135590.js';
|
|
2
|
-
import {
|
|
2
|
+
import { t as tv } from './p-2c58fcb7.js';
|
|
3
3
|
|
|
4
4
|
const tabsListCss = ".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)}";
|
|
5
5
|
const BcmTabsListStyle0 = tabsListCss;
|
|
@@ -12,7 +12,7 @@ const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends
|
|
|
12
12
|
/**
|
|
13
13
|
* Tailwind variants configuration for styling the tabs list container and inkbar
|
|
14
14
|
*/
|
|
15
|
-
this.class =
|
|
15
|
+
this.class = tv({
|
|
16
16
|
slots: {
|
|
17
17
|
/**
|
|
18
18
|
* Main container that holds both the tablist and inkbar
|
|
@@ -31,7 +31,7 @@ const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends
|
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
33
|
const { container, inkbar, tabList } = this.class();
|
|
34
|
-
return (h("div", { key: '
|
|
34
|
+
return (h("div", { key: '9752a4024488845eda6a6701818364dab7fe96f2', class: container(), slot: "tabs-list" }, h("div", { key: 'c97ec0649dc5054b1dc374e5dd47d37eaaf0001a', class: inkbar() }), h("div", { key: 'f0da62c82904ad4bc90cf02ec19c3da48118471c', class: tabList(), role: "tablist" }, h("slot", { key: 'c4f7086fac00127505adfc74032bc4a2cd8fbb11' }))));
|
|
35
35
|
}
|
|
36
36
|
static get style() { return BcmTabsListStyle0; }
|
|
37
37
|
}, [1, "bcm-tabs-list"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-tabs-list.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ipCAAipC,CAAC;AACtqC,0BAAe,WAAW;;MCWbA,aAAW;IALxB;;;;;;;
|
|
1
|
+
{"file":"bcm-tabs-list.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ipCAAipC,CAAC;AACtqC,0BAAe,WAAW;;MCWbA,aAAW;IALxB;;;;;;;QASU,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;;;;gBAIL,SAAS,EAAE,4CAA4C;;;;gBAKvD,MAAM,EAAE,uIAAuI;;;;gBAK/I,OAAO,EAAE,sDAAsD;aAChE;SACF,CAAC,CAAC;KAaJ;IAXC,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,QACE,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,IACvC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ,EAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IACnC,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsList"],"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 '@utils/tv';\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}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
|
|
2
|
-
import {
|
|
2
|
+
import { t as tv } from './p-2c58fcb7.js';
|
|
3
3
|
|
|
4
4
|
const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.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-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.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)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
|
|
5
5
|
const BcmTabsTriggerStyle0 = tabsTriggerCss;
|
|
@@ -25,7 +25,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
|
|
|
25
25
|
/**
|
|
26
26
|
* Tailwind variants configuration for styling
|
|
27
27
|
*/
|
|
28
|
-
this.class =
|
|
28
|
+
this.class = tv({
|
|
29
29
|
slots: {
|
|
30
30
|
tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',
|
|
31
31
|
borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',
|
|
@@ -79,7 +79,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
|
|
|
79
79
|
active: this.active,
|
|
80
80
|
disabled: this.disabled,
|
|
81
81
|
});
|
|
82
|
-
return (h(Host, { key: '
|
|
82
|
+
return (h(Host, { key: 'd8d56bc1536edf98cda1f2a2499d2c2442dc10f3', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'd943223c1fcc2876b3360af9ab4913f4dc4dd8e9', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '499f0f1586cc55e451396b588720aa81a488e253' })), h("div", { key: '73e8da795af83ced549dd45a118e72b23a84daed', class: borderLine() })));
|
|
83
83
|
}
|
|
84
84
|
get el() { return this; }
|
|
85
85
|
static get style() { return BcmTabsTriggerStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,g9DAAg9D,CAAC;AACx+D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBE,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,
|
|
1
|
+
{"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,g9DAAg9D,CAAC;AACx+D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBE,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAG,EAAE,CAChB;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,gFAAgF;aAC7F;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACpC;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,GAAG,EAAE,oBAAoB;qBAC1B;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oBAAoB;qBAC1B;iBACF;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAChD;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBAC/C;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAiBH;;;;;IAjES,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;IA+CD,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAClF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACzF,8DAAQ,CACD,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC3B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsTrigger"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n position: relative;\n display: block;\n width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /**\n * Reference to the host element\n */\n @Element() el: HTMLElement;\n\n /**\n * Unique identifier value for the tab\n */\n @Prop({ reflect: true })\n value: string;\n\n /**\n * Whether the tab is currently active\n */\n @Prop({ reflect: true })\n active: boolean = false;\n\n /**\n * Size of the tab\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether the tab is disabled\n */\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /**\n * Event emitted when this tab is selected\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /**\n * Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n */\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /**\n * Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color-default',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-default]',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
|
|
2
|
-
import {
|
|
2
|
+
import { t as tv } from './p-2c58fcb7.js';
|
|
3
3
|
|
|
4
4
|
const bcmTabsCss = ".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}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-full{width:100%}.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))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
|
|
5
5
|
const BcmTabsStyle0 = bcmTabsCss;
|
|
@@ -19,7 +19,7 @@ const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
|
|
|
19
19
|
/**
|
|
20
20
|
* Tab container class
|
|
21
21
|
*/
|
|
22
|
-
this.tabClass =
|
|
22
|
+
this.tabClass = tv({
|
|
23
23
|
base: 'tabs-container bcm-ui-element flex flex-col w-full',
|
|
24
24
|
});
|
|
25
25
|
}
|
|
@@ -195,7 +195,7 @@ const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return (h(Host, { key: '
|
|
198
|
+
return (h(Host, { key: '2bc33f644ca746b98c5be1b630471f2d2812a4e3' }, h("div", { key: '29c8e9bb573d2944cf2ece084036c6a5582fe6ca', class: this.tabClass() }, h("slot", { key: '2c302a219cadc0141dbd00cd489676796a684125', name: "tabs-list" }), h("slot", { key: '66f0612d4294eea35f19eee59742db7c9e973a58' }))));
|
|
199
199
|
}
|
|
200
200
|
get el() { return this; }
|
|
201
201
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-tabs.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,8hCAA8hC,CAAC;AACljC,sBAAe,UAAU;;MCYZA,SAAO;IALpB;;;;;;;;QAkBE,SAAI,GAAiC,QAAQ,CAAC;QA2BtC,aAAQ,GAAgC,EAAE,CAAC;QAC3C,aAAQ,GAAgC,EAAE,CAAC;;;;QA6M3C,aAAQ,GAAGC,EAAE,CAAC;YACpB,IAAI,EAAE,oDAAoD;SAC3D,CAAC,CAAC;KAYJ;IAxNC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;KACpC;IAED,gBAAgB;QACd,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;;;;IAKO,wBAAwB;QAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACxD;;;;IAKO,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;YAC3B,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;YAC7E,IAAI,KAAK,EAAE;gBACT,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzC,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;gBACnB,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,WAAW,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;gBAClE,OAAO,CAAC,EAAE,GAAG,WAAW,OAAO,CAAC,KAAK,EAAE,CAAC;aACzC;SACF,CAAC,CAAC;KACJ;IAEO,uBAAuB;;QAC7B,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,EAAE;YAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;gBAC3B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;aAC1B,CAAC,CAAC;SACJ;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAGD,MAAM,UAAU,CAAC,KAAa;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;SACzB;KACF;IAGD,MAAM,SAAS,CAAC,KAAa;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;SAC1B;KACF;;;;IAMD,MAAM,cAAc;QAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;YAC3B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;SACzB,CAAC,CAAC;KACJ;;;;IAMD,MAAM,aAAa;QACjB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;YAC3B,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;SAC1B,CAAC,CAAC;KACJ;;;;IAMD,MAAM,YAAY;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;;;;IAMD,MAAM,YAAY,CAAC,KAAa;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,OAAO;gBAChB,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,CAAC,CAAC;SACJ;KACF;;;;IAKO,eAAe;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;YAC3B,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YAClD,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC;SAC3B,CAAC,CAAC;KACJ;IAGD,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;;;;IAMD,iBAAiB,CAAC,KAA0B;QAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;QACtF,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,aAAa;gBACtB,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,CAAC,CAAC;SACJ;KACF;;;;IAKO,uBAAuB;QAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;YAC3B,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YACnD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;YACrD,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;SAC9D,CAAC,CAAC;KACJ;;;;IAKO,YAAY;;QAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;YACxC,OAAO;SACR;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC3C,IAAI,aAAa,KAAK,CAAC;YAAE,OAAO;QAEhC,MAAM,MAAM,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAgB,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;QAEtF,IAAI,aAAa,IAAI,MAAM,EAAE;YAC3B,MAAM,WAAW,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;YAC1D,MAAM,SAAS,GAAG,MAAA,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,qBAAqB,EAAE,CAAC;YAElG,IAAI,WAAW,IAAI,SAAS,EAAE;gBAC5B,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;gBAC/C,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;gBAEhC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;gBAClC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,IAAI,KAAK,CAAC;gBACjD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;aAC5B;iBAAM;gBACL,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;gBACzD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;aAC5B;SACF;aAAM;YACL,IAAI,MAAM;gBAAE,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SACxC;KACF;IASD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAG,EACzB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabs","tv"],"sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n tag: 'bcm-tabs',\n styleUrl: 'bcm-tabs.css',\n shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * Default active tab value\n */\n @Prop({ reflect: true })\n defaultValue: string;\n\n /**\n * Tab size\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Triggers when tab changes\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabChange',\n })\n bcmTabChange: EventEmitter<{\n activeTab: string;\n element: HTMLBcmTabsTriggerElement;\n previousTab?: string;\n }>;\n\n /**\n * Active tab value\n */\n @State() activeTab: string;\n\n /**\n * Previous active tab value\n */\n @State() previousTab: string;\n\n private triggers: HTMLBcmTabsTriggerElement[] = [];\n private contents: HTMLBcmTabsContentElement[] = [];\n private tabsList: HTMLBcmTabsListElement;\n\n componentWillLoad() {\n this.activeTab = this.defaultValue;\n }\n\n componentDidLoad() {\n this.refreshElementReferences();\n this.updateTriggerProperties();\n this.setupRelations();\n this.updateInkbar();\n this.updateContentVisibility();\n }\n\n /**\n * Refreshes DOM element references\n */\n private refreshElementReferences() {\n this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n this.tabsList = this.el.querySelector('bcm-tabs-list');\n }\n\n /**\n * Establishes relationships between tabs and content\n */\n private setupRelations() {\n this.triggers.forEach(trigger => {\n trigger.active = trigger.value === this.activeTab;\n const panel = this.contents.find(content => content.value === trigger.value);\n if (panel) {\n const panelId = `panel-${trigger.value}`;\n panel.id = panelId;\n trigger.setAttribute('aria-controls', panelId);\n panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n trigger.id = `trigger-${trigger.value}`;\n }\n });\n }\n\n private updateTriggerProperties() {\n if (this.triggers?.length > 0) {\n this.triggers.forEach(trigger => {\n trigger.size = this.size;\n });\n }\n }\n\n @Watch('size')\n handleSizeChange() {\n this.updateTriggerProperties();\n }\n\n @Method()\n async disableTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger) {\n trigger.disabled = true;\n }\n }\n\n @Method()\n async enableTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger) {\n trigger.disabled = false;\n }\n }\n\n /**\n * Disables all tabs\n */\n @Method()\n async disableAllTabs() {\n this.triggers.forEach(trigger => {\n trigger.disabled = true;\n });\n }\n\n /**\n * Enables all tabs\n */\n @Method()\n async enableAllTabs() {\n this.triggers.forEach(trigger => {\n trigger.disabled = false;\n });\n }\n\n /**\n * Returns the active tab value\n */\n @Method()\n async getActiveTab(): Promise<string> {\n return this.activeTab;\n }\n\n /**\n * Sets the active tab\n */\n @Method()\n async setActiveTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger && !trigger.disabled) {\n this.previousTab = this.activeTab;\n this.activeTab = value;\n this.updateInkbar();\n this.updateContentVisibility();\n this.updateTabStatus();\n\n this.bcmTabChange.emit({\n activeTab: this.activeTab,\n element: trigger,\n previousTab: this.previousTab,\n });\n }\n }\n\n /**\n * Updates tab status\n */\n private updateTabStatus() {\n this.triggers.forEach(trigger => {\n const isActive = trigger.value === this.activeTab;\n trigger.active = isActive;\n });\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.updateInkbar();\n }\n\n /**\n * Triggered when a tab is selected\n */\n @Listen('bcmTabSelected', { capture: true })\n handleTabSelected(event: CustomEvent<string>) {\n this.previousTab = this.activeTab;\n this.activeTab = event.detail;\n\n this.updateTabStatus();\n this.updateInkbar();\n this.updateContentVisibility();\n\n const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n if (activeElement) {\n this.bcmTabChange.emit({\n activeTab: this.activeTab,\n element: activeElement,\n previousTab: this.previousTab,\n });\n }\n }\n\n /**\n * Updates content visibility\n */\n private updateContentVisibility() {\n this.contents.forEach(content => {\n const isVisible = content.value === this.activeTab;\n content.style.display = isVisible ? 'block' : 'none';\n content.setAttribute('aria-hidden', (!isVisible).toString());\n });\n }\n\n /**\n * Updates inkbar position\n */\n private updateInkbar() {\n if (!this.tabsList) {\n console.warn('bcm-tabs-list not found');\n return;\n }\n\n const totalTriggers = this.triggers.length;\n if (totalTriggers === 0) return;\n\n const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n if (activeTrigger && inkbar) {\n const triggerRect = activeTrigger.getBoundingClientRect();\n const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n if (triggerRect && groupRect) {\n const left = triggerRect.left - groupRect.left;\n const width = triggerRect.width;\n\n inkbar.style.width = `${width}px`;\n inkbar.style.transform = `translateX(${left}px)`;\n inkbar.style.opacity = '1';\n } else {\n console.warn('Group or trigger rect calculation failed');\n inkbar.style.opacity = '0';\n }\n } else {\n if (inkbar) inkbar.style.opacity = '0';\n }\n }\n\n /**\n * Tab container class\n */\n private tabClass = tv({\n base: 'tabs-container bcm-ui-element flex flex-col w-full',\n });\n\n render() {\n return (\n <Host>\n <div class={this.tabClass()}>\n <slot name=\"tabs-list\" />\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"bcm-tabs.js","mappings":"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","names":["BcmTabs"],"sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n tag: 'bcm-tabs',\n styleUrl: 'bcm-tabs.css',\n shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * Default active tab value\n */\n @Prop({ reflect: true })\n defaultValue: string;\n\n /**\n * Tab size\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Triggers when tab changes\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabChange',\n })\n bcmTabChange: EventEmitter<{\n activeTab: string;\n element: HTMLBcmTabsTriggerElement;\n previousTab?: string;\n }>;\n\n /**\n * Active tab value\n */\n @State() activeTab: string;\n\n /**\n * Previous active tab value\n */\n @State() previousTab: string;\n\n private triggers: HTMLBcmTabsTriggerElement[] = [];\n private contents: HTMLBcmTabsContentElement[] = [];\n private tabsList: HTMLBcmTabsListElement;\n\n componentWillLoad() {\n this.activeTab = this.defaultValue;\n }\n\n componentDidLoad() {\n this.refreshElementReferences();\n this.updateTriggerProperties();\n this.setupRelations();\n this.updateInkbar();\n this.updateContentVisibility();\n }\n\n /**\n * Refreshes DOM element references\n */\n private refreshElementReferences() {\n this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n this.tabsList = this.el.querySelector('bcm-tabs-list');\n }\n\n /**\n * Establishes relationships between tabs and content\n */\n private setupRelations() {\n this.triggers.forEach(trigger => {\n trigger.active = trigger.value === this.activeTab;\n const panel = this.contents.find(content => content.value === trigger.value);\n if (panel) {\n const panelId = `panel-${trigger.value}`;\n panel.id = panelId;\n trigger.setAttribute('aria-controls', panelId);\n panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n trigger.id = `trigger-${trigger.value}`;\n }\n });\n }\n\n private updateTriggerProperties() {\n if (this.triggers?.length > 0) {\n this.triggers.forEach(trigger => {\n trigger.size = this.size;\n });\n }\n }\n\n @Watch('size')\n handleSizeChange() {\n this.updateTriggerProperties();\n }\n\n @Method()\n async disableTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger) {\n trigger.disabled = true;\n }\n }\n\n @Method()\n async enableTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger) {\n trigger.disabled = false;\n }\n }\n\n /**\n * Disables all tabs\n */\n @Method()\n async disableAllTabs() {\n this.triggers.forEach(trigger => {\n trigger.disabled = true;\n });\n }\n\n /**\n * Enables all tabs\n */\n @Method()\n async enableAllTabs() {\n this.triggers.forEach(trigger => {\n trigger.disabled = false;\n });\n }\n\n /**\n * Returns the active tab value\n */\n @Method()\n async getActiveTab(): Promise<string> {\n return this.activeTab;\n }\n\n /**\n * Sets the active tab\n */\n @Method()\n async setActiveTab(value: string): Promise<void> {\n const trigger = this.triggers.find(t => t.value === value);\n if (trigger && !trigger.disabled) {\n this.previousTab = this.activeTab;\n this.activeTab = value;\n this.updateInkbar();\n this.updateContentVisibility();\n this.updateTabStatus();\n\n this.bcmTabChange.emit({\n activeTab: this.activeTab,\n element: trigger,\n previousTab: this.previousTab,\n });\n }\n }\n\n /**\n * Updates tab status\n */\n private updateTabStatus() {\n this.triggers.forEach(trigger => {\n const isActive = trigger.value === this.activeTab;\n trigger.active = isActive;\n });\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.updateInkbar();\n }\n\n /**\n * Triggered when a tab is selected\n */\n @Listen('bcmTabSelected', { capture: true })\n handleTabSelected(event: CustomEvent<string>) {\n this.previousTab = this.activeTab;\n this.activeTab = event.detail;\n\n this.updateTabStatus();\n this.updateInkbar();\n this.updateContentVisibility();\n\n const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n if (activeElement) {\n this.bcmTabChange.emit({\n activeTab: this.activeTab,\n element: activeElement,\n previousTab: this.previousTab,\n });\n }\n }\n\n /**\n * Updates content visibility\n */\n private updateContentVisibility() {\n this.contents.forEach(content => {\n const isVisible = content.value === this.activeTab;\n content.style.display = isVisible ? 'block' : 'none';\n content.setAttribute('aria-hidden', (!isVisible).toString());\n });\n }\n\n /**\n * Updates inkbar position\n */\n private updateInkbar() {\n if (!this.tabsList) {\n console.warn('bcm-tabs-list not found');\n return;\n }\n\n const totalTriggers = this.triggers.length;\n if (totalTriggers === 0) return;\n\n const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n if (activeTrigger && inkbar) {\n const triggerRect = activeTrigger.getBoundingClientRect();\n const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n if (triggerRect && groupRect) {\n const left = triggerRect.left - groupRect.left;\n const width = triggerRect.width;\n\n inkbar.style.width = `${width}px`;\n inkbar.style.transform = `translateX(${left}px)`;\n inkbar.style.opacity = '1';\n } else {\n console.warn('Group or trigger rect calculation failed');\n inkbar.style.opacity = '0';\n }\n } else {\n if (inkbar) inkbar.style.opacity = '0';\n }\n }\n\n /**\n * Tab container class\n */\n private tabClass = tv({\n base: 'tabs-container bcm-ui-element flex flex-col w-full',\n });\n\n render() {\n return (\n <Host>\n <div class={this.tabClass()}>\n <slot name=\"tabs-list\" />\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
|
|
2
|
-
import {
|
|
2
|
+
import { t as tv } from './p-2c58fcb7.js';
|
|
3
3
|
import { c as classNames } from './p-12360e4c.js';
|
|
4
4
|
import { g as generateId } from './p-ba2410ef.js';
|
|
5
5
|
import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './p-13a245f6.js';
|
|
@@ -63,7 +63,7 @@ const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class BcmTextarea extends
|
|
|
63
63
|
this.onKeyUp = (event) => {
|
|
64
64
|
this.bcmKeyUp.emit(event);
|
|
65
65
|
};
|
|
66
|
-
this.styleClass =
|
|
66
|
+
this.styleClass = tv({
|
|
67
67
|
slots: {
|
|
68
68
|
base: [
|
|
69
69
|
'bcm-textarea bcm-textarea__container',
|
|
@@ -273,14 +273,14 @@ const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class BcmTextarea extends
|
|
|
273
273
|
disabled: this.disabled,
|
|
274
274
|
focused: this.isFocused,
|
|
275
275
|
});
|
|
276
|
-
return (h("div", { key: '
|
|
276
|
+
return (h("div", { key: 'cce4483a5f44eed885b80802ae5ee2095f4cba41', class: "bcm-ui-element" }, this.label && (h("label", { key: 'd9a4ac16ba8b98b46c2b2ac64840666ae837de2a', class: classNames('textarea-label font-medium', {
|
|
277
277
|
'text-color-label': !this.disabled,
|
|
278
278
|
'text-color-disabled': this.disabled,
|
|
279
279
|
}, {
|
|
280
280
|
'text-size-3': this.size === 'small',
|
|
281
281
|
'text-size-4': this.size === 'medium',
|
|
282
282
|
'text-size-5': this.size === 'large',
|
|
283
|
-
}), htmlFor: textareaId }, h("slot", { key: '
|
|
283
|
+
}), htmlFor: textareaId }, h("slot", { key: '6ce983052a2dbacfdf5dc6321a9812b3761d58a2', name: "label" }, this.label), this.required && h("span", { key: '4b01f610ee619d2143aa320a367e0acc2b8c1e94' }, "*"))), h("div", { key: '77ec8de4e301cf57e1a9de845bfe2402ebaa4f2e', class: base() }, h("textarea", { key: 'e2cd335bf9d9da8485a45dd5a3cc14052644ca43', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
|
|
284
284
|
const target = event.target;
|
|
285
285
|
this.value = target.value;
|
|
286
286
|
this.bcmInput.emit(event);
|
|
@@ -288,7 +288,7 @@ const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class BcmTextarea extends
|
|
|
288
288
|
if (this.autoGrow) {
|
|
289
289
|
this.adjustHeight();
|
|
290
290
|
}
|
|
291
|
-
}, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '
|
|
291
|
+
}, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '151edc84e8faceee551b2de16c3dc81a5016240c', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: 'd188a0d8dc28c80c73e66884473c2fa3c5cab514', class: classNames('textarea-caption-text font-regular mt-1', {
|
|
292
292
|
'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
|
|
293
293
|
'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
|
|
294
294
|
'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-textarea.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,k2QAAk2Q,CAAC;AACv3Q,0BAAe,WAAW;;MCYbA,aAAW;IALxB;;;;;;;;;;QASW,cAAS,GAAG,KAAK,CAAC;QAElB,YAAO,GAAG,IAAI,CAAC;QACf,mBAAc,GAAgB,SAAS,CAAC;;QAKjD,UAAK,GAAW,EAAE,CAAC;;QAInB,SAAI,GAAY,CAAC,CAAC;;QAgBlB,WAAM,GAAmB,MAAM,CAAC;;QAIhC,aAAQ,GAAG,KAAK,CAAC;;QAYjB,QAAG,GAAY,UAAU,CAAC,UAAU,CAAC,CAAC;;QAItC,SAAI,GAAc,QAAQ,CAAC;;QAI3B,WAAM,GAAgB,SAAS,CAAC;;QAIhC,cAAS,GAAG,KAAK,CAAC;;QAIlB,aAAQ,GAAG,KAAK,CAAC;;QAIjB,aAAQ,GAAG,KAAK,CAAC;;QAIjB,aAAQ,GAAG,KAAK,CAAC;;QAYjB,gBAAW,GAAY,IAAI,CAAC;QAqMpB,aAAQ,GAAG,CAAC,KAAY;YAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3B,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC;QAEM,cAAS,GAAG,CAAC,KAAoB;YACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAoB;YACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3B,CAAC;QAEM,eAAU,GAAGC,EAAE,CACrB;YACE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,sCAAsC;oBACtC,6CAA6C;oBAC7C,6BAA6B;oBAC7B,eAAe;oBACf,gCAAgC;oBAChC,WAAW;oBACX,QAAQ;iBACT;gBACD,aAAa,EAAE;oBACb,UAAU;oBACV,QAAQ;oBACR,mCAAmC;oBACnC,iBAAiB;oBACjB,+GAA+G;oBAC/G,mCAAmC;oBACnC,MAAM;oBACN,iBAAiB;oBACjB,SAAS;iBACV;gBACD,WAAW,EAAE,CAAC,uBAAuB,EAAE,wCAAwC,EAAE,YAAY,EAAE,MAAM,CAAC;aACvG;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,IAAI,EAAE,EAAE;wBACR,aAAa,EAAE,0BAA0B;wBACzC,WAAW,EAAE,aAAa;qBAC3B;oBACD,MAAM,EAAE;wBACN,IAAI,EAAE,EAAE;wBACR,aAAa,EAAE,0BAA0B;wBACzC,WAAW,EAAE,aAAa;qBAC3B;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,EAAE;wBACR,aAAa,EAAE,0BAA0B;wBACzC,WAAW,EAAE,aAAa;qBAC3B;iBACF;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE,EAAE,aAAa,EAAE,cAAc,EAAE;oBACvC,IAAI,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE;oBAClC,UAAU,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE;oBAC1C,QAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE;iBACzC;gBACD,MAAM,EAAE;oBACN,OAAO,EAAE;wBACP,IAAI,EAAE,CAAC,wCAAwC,EAAE,8CAA8C,EAAE,qDAAqD,CAAC;qBACxJ;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,CAAC,sCAAsC,EAAE,4CAA4C,EAAE,mDAAmD,CAAC;qBAClJ;oBACD,OAAO,EAAE;wBACP,IAAI,EAAE,CAAC,wCAAwC,EAAE,8CAA8C,EAAE,qDAAqD,CAAC;qBACxJ;oBACD,OAAO,EAAE;wBACP,IAAI,EAAE,CAAC,wCAAwC,EAAE,8CAA8C,EAAE,qDAAqD,CAAC;qBACxJ;oBACD,IAAI,EAAE;wBACJ,IAAI,EAAE,CAAC,qCAAqC,EAAE,2CAA2C,EAAE,kDAAkD,CAAC;qBAC/I;iBACF;gBACD,SAAS,EAAE;oBACT,IAAI,EAAE,mBAAmB;iBAC1B;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,IAAI,EAAE,wCAAwC;wBAC9C,aAAa,EAAE,cAAc;qBAC9B;oBACD,KAAK,EAAE,EAAE;iBACV;gBACD,OAAO,EAAE;oBACP,IAAI,EAAE;wBACJ,IAAI,EAAE,6DAA6D;qBACpE;oBACD,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,UAAU;gBAClB,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,KAAK;aACf;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KA4GH;IAlWC,iBAAiB,CAAC,QAAgB;QAChC,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,QAAQ,CAAC;YAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;SACF;KACF;IAGD,WAAW,CAAC,QAAqB;QAC/B,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAGD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC;KACtC;IAED,iBAAiB;QACf,qBAAqB,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC;QACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;QAClC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,YAAY,CAAC;KAC/C;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,EAAE,CAAC;;YAEpB,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SACxE;KACF;IAED,oBAAoB;;QAElB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SAC1E;KACF;IAGD,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B;IAGD,MAAM,OAAO;;QACX,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;KAC1B;IAGD,MAAM,MAAM;;QACV,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,EAAE,CAAC;KAC5B;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAEhD,qBAAqB,CAAC;;YAEpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YAEtC,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACtD,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;YAEnD,IAAI,SAAS,GAAG,YAAY,CAAC;;YAG7B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,CAAC;gBACzE,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;aAC5C;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,CAAC;gBACzE,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;aAC5C;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;SAClD,CAAC,CAAC;KACJ;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;;QAG9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAE5B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;QAGrC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,EAAE;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,iBAAiB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;YAC9B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnD,OAAO;SACR;;QAGD,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;YACnD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,iBAAiB,GAAG,oBAAoB,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;SACrF;;aAEI,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;YACxD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,iBAAiB,GAAG,oBAAoB,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;SACrF;;QAGD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC1C,IAAI,WAAW,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC;aACtC;SACF;;QAGD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;QACzD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;KACpD;IA0HD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC;QAEvD,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;YAC3D,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,cAAc;YAC3B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,SAAS;SACxB,CAAC,CAAC;QAEH,QACE,4DAAK,KAAK,EAAC,gBAAgB,IAExB,IAAI,CAAC,KAAK,KACT,8DACE,KAAK,EAAE,UAAU,CACf,4BAA4B,EAC5B;gBACE,kBAAkB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD;gBACE,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACrC,CACF,EACD,OAAO,EAAE,UAAU,IAEnB,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrC,IAAI,CAAC,QAAQ,IAAI,mEAAc,CAC1B,CACT,EAGD,4DAAK,KAAK,EAAE,IAAI,EAAE,IAChB,iEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,aAAa,EAAE,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,kBACX,IAAI,CAAC,MAAM,KAAK,OAAO,mBACtB,IAAI,CAAC,QAAQ,qBACX,IAAI,CAAC,UAAU,sBACd,IAAI,CAAC,WAAW,EAClC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,KAAK;gBACZ,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;gBACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;gBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IAAI,CAAC,YAAY,EAAE,CAAC;iBACrB;aACF,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,EAED,IAAI,CAAC,WAAW,KACf,4DAAK,KAAK,EAAE,WAAW,EAAE,IACtB,IAAI,CAAC,KAAK,CAAC,MAAM,EACjB,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CACvC,CACP,CACG,EAGL,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,MACvE,4DACE,KAAK,EAAE,UAAU,CACf,yCAAyC,EACzC;gBACE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;gBACzF,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;gBACxG,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;gBACzF,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;gBACzF,iCAAiC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM;gBACnF,qCAAqC,EAAE,IAAI,CAAC,QAAQ;aACrD,EACD;gBACE,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACrC,CACF,IAEA,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,cAAc,KAAK,OAAO,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW,CACpH,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTextarea","tv"],"sources":["src/components/textarea/textarea.scss?tag=bcm-textarea&encapsulation=shadow","src/components/textarea/textarea.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.bcm-textarea {\n &__container {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n// Tailwind'in resize sınıflarını override et\n.resize-none {\n resize: none !important;\n}\n\n.resize {\n resize: both !important;\n}\n\n.resize-y {\n resize: vertical !important;\n}\n\n.resize-x {\n resize: horizontal !important;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, TextareaResize } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\n// import { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-textarea',\n styleUrl: 'textarea.scss',\n shadow: true,\n})\nexport class BcmTextarea {\n @Element() el: HTMLElement;\n private textareaRef: HTMLTextAreaElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n\n /** Textarea value */\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /** Textarea rows */\n @Prop()\n rows?: number = 3;\n\n /** Textarea cols */\n @Prop()\n cols?: number;\n\n /** Minimum height in rows */\n @Prop()\n minRows?: number;\n\n /** Maximum height in rows */\n @Prop()\n maxRows?: number;\n\n /** Resize behavior */\n @Prop()\n resize: TextareaResize = 'none';\n\n /** Auto grow height based on content */\n @Prop()\n autoGrow = false;\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('textarea');\n\n /** Controls the textarea size */\n @Prop()\n size: InputSize = 'medium';\n\n /** Defines the textarea's status/state */\n @Prop()\n status: InputStatus = 'default';\n\n /** Full width textarea */\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /** Whether the textarea is disabled */\n @Prop()\n disabled = false;\n\n /** Whether the textarea is readonly */\n @Prop()\n readonly = false;\n\n /** Whether the textarea is required */\n @Prop()\n required = false;\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 /** Show character counter */\n @Prop()\n showCounter: boolean = true;\n\n /** Textarea 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 textarea */\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 /** 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.textareaRef) {\n this.textareaRef.value = newValue;\n if (this.autoGrow) {\n this.adjustHeight();\n }\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 componentWillLoad() {\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n componentDidLoad() {\n if (this.autoGrow) {\n this.adjustHeight();\n // Input event'ini dinle\n this.textareaRef?.addEventListener('input', () => this.adjustHeight());\n }\n }\n\n disconnectedCallback() {\n // Event listener'ı temizle\n if (this.autoGrow && this.textareaRef) {\n this.textareaRef.removeEventListener('input', () => this.adjustHeight());\n }\n }\n\n @Method()\n async setFocus() {\n this.textareaRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.textareaRef?.blur();\n }\n\n @Method()\n async select() {\n this.textareaRef?.select();\n }\n\n private adjustHeight() {\n if (!this.autoGrow || !this.textareaRef) return;\n\n requestAnimationFrame(() => {\n // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın\n this.textareaRef.style.height = '0px';\n\n const computedStyle = getComputedStyle(this.textareaRef);\n const lineHeight = parseInt(computedStyle.lineHeight);\n const paddingTop = parseInt(computedStyle.paddingTop);\n const paddingBottom = parseInt(computedStyle.paddingBottom);\n const scrollHeight = this.textareaRef.scrollHeight;\n\n let newHeight = scrollHeight;\n\n // Min/max kontrolleri\n if (this.minRows) {\n const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;\n newHeight = Math.max(newHeight, minHeight);\n }\n\n if (this.maxRows) {\n const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;\n newHeight = Math.min(newHeight, maxHeight);\n }\n\n this.textareaRef.style.height = `${newHeight}px`;\n });\n }\n\n private validateInput(): void {\n if (!this.textareaRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.textareaRef.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 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\n // Custom validator\n if (this.validator) {\n const customError = this.validator(value);\n if (customError) {\n this.isValid = false;\n this.validationMessage = customError;\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\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 styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-textarea bcm-textarea__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex flex-col', // flex-col ekledik\n 'transition-colors duration-200',\n 'px-2 py-2',\n 'w-full', // w-full ekledik\n ],\n textareaClass: [\n 'textarea',\n 'w-full',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none',\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 'overflow-y-auto', // overflow-y-auto ekledik\n 'min-h-0', // min-h-0 ekledik\n ],\n counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],\n },\n variants: {\n size: {\n small: {\n base: '',\n textareaClass: 'text-size-4 min-h-[3rem]',\n counterText: 'text-size-3',\n },\n medium: {\n base: '',\n textareaClass: 'text-size-5 min-h-[4rem]',\n counterText: 'text-size-4',\n },\n large: {\n base: '',\n textareaClass: 'text-size-6 min-h-[5rem]',\n counterText: 'text-size-5',\n },\n },\n resize: {\n none: { textareaClass: '!resize-none' },\n both: { textareaClass: '!resize' },\n horizontal: { textareaClass: '!resize-x' },\n vertical: { textareaClass: '!resize-y' },\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: {\n base: 'disabled cursor-not-allowed opacity-50',\n textareaClass: '!resize-none', // disabled durumunda resize'ı engelle\n },\n false: '',\n },\n focused: {\n true: {\n base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',\n },\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n resize: 'vertical',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const textareaId = this._id + '-textarea' || this.name;\n\n const { base, textareaClass, counterText } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n resize: this.resize,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n return (\n <div class=\"bcm-ui-element\">\n {/* Label rendering */}\n {this.label && (\n <label\n class={classNames(\n 'textarea-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={textareaId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n\n {/* Textarea container */}\n <div class={base()}>\n <textarea\n ref={el => (this.textareaRef = el)}\n id={textareaId}\n class={textareaClass()}\n name={this.name}\n rows={this.rows}\n cols={this.cols}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n minLength={this.minLength}\n maxLength={this.maxLength}\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={event => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.bcmInput.emit(event);\n this.validateInput();\n if (this.autoGrow) {\n this.adjustHeight();\n }\n }}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {/* buraya isteğe bağlı olarak gözüken bir karakter sayacı ekleyeceğiz. bu sayaç sağa yaslı olacak şu formatta olacak 0/120 gibi 0 mevcut karakteri 120 ise limiti gösterecek */}\n {this.showCounter && (\n <div class={counterText()}>\n {this.value.length}\n {this.maxLength ? `/${this.maxLength}` : ''}\n </div>\n )}\n </div>\n\n {/* Validation/Caption message */}\n {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n <div\n class={classNames(\n 'textarea-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"],"version":3}
|
|
1
|
+
{"file":"bcm-textarea.js","mappings":"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","names":["BcmTextarea"],"sources":["src/components/textarea/textarea.scss?tag=bcm-textarea&encapsulation=shadow","src/components/textarea/textarea.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.bcm-textarea {\n &__container {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n// Tailwind'in resize sınıflarını override et\n.resize-none {\n resize: none !important;\n}\n\n.resize {\n resize: both !important;\n}\n\n.resize-y {\n resize: vertical !important;\n}\n\n.resize-x {\n resize: horizontal !important;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, TextareaResize } from './types';\nimport { tv } from '@utils/tv';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\n// import { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-textarea',\n styleUrl: 'textarea.scss',\n shadow: true,\n})\nexport class BcmTextarea {\n @Element() el: HTMLElement;\n private textareaRef: HTMLTextAreaElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n\n /** Textarea value */\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /** Textarea rows */\n @Prop()\n rows?: number = 3;\n\n /** Textarea cols */\n @Prop()\n cols?: number;\n\n /** Minimum height in rows */\n @Prop()\n minRows?: number;\n\n /** Maximum height in rows */\n @Prop()\n maxRows?: number;\n\n /** Resize behavior */\n @Prop()\n resize: TextareaResize = 'none';\n\n /** Auto grow height based on content */\n @Prop()\n autoGrow = false;\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('textarea');\n\n /** Controls the textarea size */\n @Prop()\n size: InputSize = 'medium';\n\n /** Defines the textarea's status/state */\n @Prop()\n status: InputStatus = 'default';\n\n /** Full width textarea */\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /** Whether the textarea is disabled */\n @Prop()\n disabled = false;\n\n /** Whether the textarea is readonly */\n @Prop()\n readonly = false;\n\n /** Whether the textarea is required */\n @Prop()\n required = false;\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 /** Show character counter */\n @Prop()\n showCounter: boolean = true;\n\n /** Textarea 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 textarea */\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 /** 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.textareaRef) {\n this.textareaRef.value = newValue;\n if (this.autoGrow) {\n this.adjustHeight();\n }\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 componentWillLoad() {\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n componentDidLoad() {\n if (this.autoGrow) {\n this.adjustHeight();\n // Input event'ini dinle\n this.textareaRef?.addEventListener('input', () => this.adjustHeight());\n }\n }\n\n disconnectedCallback() {\n // Event listener'ı temizle\n if (this.autoGrow && this.textareaRef) {\n this.textareaRef.removeEventListener('input', () => this.adjustHeight());\n }\n }\n\n @Method()\n async setFocus() {\n this.textareaRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.textareaRef?.blur();\n }\n\n @Method()\n async select() {\n this.textareaRef?.select();\n }\n\n private adjustHeight() {\n if (!this.autoGrow || !this.textareaRef) return;\n\n requestAnimationFrame(() => {\n // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın\n this.textareaRef.style.height = '0px';\n\n const computedStyle = getComputedStyle(this.textareaRef);\n const lineHeight = parseInt(computedStyle.lineHeight);\n const paddingTop = parseInt(computedStyle.paddingTop);\n const paddingBottom = parseInt(computedStyle.paddingBottom);\n const scrollHeight = this.textareaRef.scrollHeight;\n\n let newHeight = scrollHeight;\n\n // Min/max kontrolleri\n if (this.minRows) {\n const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;\n newHeight = Math.max(newHeight, minHeight);\n }\n\n if (this.maxRows) {\n const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;\n newHeight = Math.min(newHeight, maxHeight);\n }\n\n this.textareaRef.style.height = `${newHeight}px`;\n });\n }\n\n private validateInput(): void {\n if (!this.textareaRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.textareaRef.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 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\n // Custom validator\n if (this.validator) {\n const customError = this.validator(value);\n if (customError) {\n this.isValid = false;\n this.validationMessage = customError;\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\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 styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-textarea bcm-textarea__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex flex-col', // flex-col ekledik\n 'transition-colors duration-200',\n 'px-2 py-2',\n 'w-full', // w-full ekledik\n ],\n textareaClass: [\n 'textarea',\n 'w-full',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none',\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 'overflow-y-auto', // overflow-y-auto ekledik\n 'min-h-0', // min-h-0 ekledik\n ],\n counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],\n },\n variants: {\n size: {\n small: {\n base: '',\n textareaClass: 'text-size-4 min-h-[3rem]',\n counterText: 'text-size-3',\n },\n medium: {\n base: '',\n textareaClass: 'text-size-5 min-h-[4rem]',\n counterText: 'text-size-4',\n },\n large: {\n base: '',\n textareaClass: 'text-size-6 min-h-[5rem]',\n counterText: 'text-size-5',\n },\n },\n resize: {\n none: { textareaClass: '!resize-none' },\n both: { textareaClass: '!resize' },\n horizontal: { textareaClass: '!resize-x' },\n vertical: { textareaClass: '!resize-y' },\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: {\n base: 'disabled cursor-not-allowed opacity-50',\n textareaClass: '!resize-none', // disabled durumunda resize'ı engelle\n },\n false: '',\n },\n focused: {\n true: {\n base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',\n },\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n resize: 'vertical',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const textareaId = this._id + '-textarea' || this.name;\n\n const { base, textareaClass, counterText } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n resize: this.resize,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n return (\n <div class=\"bcm-ui-element\">\n {/* Label rendering */}\n {this.label && (\n <label\n class={classNames(\n 'textarea-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={textareaId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n\n {/* Textarea container */}\n <div class={base()}>\n <textarea\n ref={el => (this.textareaRef = el)}\n id={textareaId}\n class={textareaClass()}\n name={this.name}\n rows={this.rows}\n cols={this.cols}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n minLength={this.minLength}\n maxLength={this.maxLength}\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={event => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.bcmInput.emit(event);\n this.validateInput();\n if (this.autoGrow) {\n this.adjustHeight();\n }\n }}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {/* buraya isteğe bağlı olarak gözüken bir karakter sayacı ekleyeceğiz. bu sayaç sağa yaslı olacak şu formatta olacak 0/120 gibi 0 mevcut karakteri 120 ise limiti gösterecek */}\n {this.showCounter && (\n <div class={counterText()}>\n {this.value.length}\n {this.maxLength ? `/${this.maxLength}` : ''}\n </div>\n )}\n </div>\n\n {/* Validation/Caption message */}\n {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n <div\n class={classNames(\n 'textarea-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"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-30135590.js';
|
|
2
2
|
import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-50133556.js';
|
|
3
|
-
import {
|
|
3
|
+
import { t as tv } from './p-2c58fcb7.js';
|
|
4
4
|
|
|
5
5
|
const tooltipCss = ":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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-color-base{color:var(--bcm-ui-color-text-base)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
|
|
6
6
|
const BcmTooltipStyle0 = tooltipCss;
|
|
@@ -86,12 +86,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
|
86
86
|
return;
|
|
87
87
|
const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.tooltipElement, {
|
|
88
88
|
placement: this.placement,
|
|
89
|
-
middleware: [
|
|
90
|
-
offset(12),
|
|
91
|
-
flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),
|
|
92
|
-
shift({ padding: 8 }),
|
|
93
|
-
arrow({ element: this.arrowElement }),
|
|
94
|
-
],
|
|
89
|
+
middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
|
|
95
90
|
});
|
|
96
91
|
Object.assign(this.tooltipElement.style, {
|
|
97
92
|
left: `${x}px`,
|
|
@@ -111,7 +106,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
|
111
106
|
[staticSide]: '-4px',
|
|
112
107
|
});
|
|
113
108
|
};
|
|
114
|
-
this.tooltipClass =
|
|
109
|
+
this.tooltipClass = tv({
|
|
115
110
|
slots: {
|
|
116
111
|
tooltip: 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',
|
|
117
112
|
arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',
|
|
@@ -174,7 +169,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
|
174
169
|
size: this.size,
|
|
175
170
|
isOpen: this.open,
|
|
176
171
|
});
|
|
177
|
-
return (h("div", { key: '
|
|
172
|
+
return (h("div", { key: 'dcc6e18aa58d06cb88e74d47379476c6319bdc2a', class: "relative" }, h("slot", { key: 'c71d60cff006d2da8e7eadb372aa854c18cf78d4', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '3809fa4c4431ace38173db76013742a5b9aba2da', role: "tooltip", class: tooltip(), ref: el => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: 'b9a21a339baaa3f37cad4477d990f4028cfb4e91', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '64622a02cfd571b2cff5b51dc1c412d0b3e48396', name: "tooltip" }, this.message))));
|
|
178
173
|
}
|
|
179
174
|
get el() { return this; }
|
|
180
175
|
static get style() { return BcmTooltipStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-tooltip.js","mappings":"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","names":["tv"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n *\n * @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n *\n * @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n *\n * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'hover';\n\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n */\n @Prop()\n message: string;\n\n /**\n * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /**\n * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n */\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /**\n * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.tooltipElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"bcm-tooltip.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n *\n * @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n *\n * @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n *\n * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'hover';\n\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n */\n @Prop()\n message: string;\n\n /**\n * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /**\n * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n */\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /**\n * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.tooltipElement, () => this.updatePosition(), { animationFrame: false });\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.tooltipElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.tooltipElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv(\n {\n slots: {\n tooltip: 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n },\n { twMerge: false },\n );\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={el => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -2575,8 +2575,21 @@ exports.validators = validators;
|
|
|
2575
2575
|
|
|
2576
2576
|
}(bundleCjs));
|
|
2577
2577
|
|
|
2578
|
-
var ie={twMerge:!0,twMergeConfig:{},responsiveVariants:!1},x=s=>s||void 0,N=(...s)=>x(y(s).filter(Boolean).join(" ")),R=null,v={},q=!1,M=(...s)=>b$1=>b$1.twMerge?((!R||q)&&(q=!1,R=u(v)?bundleCjs.twMerge:bundleCjs.extendTailwindMerge({...v,extend:{theme:v.theme,classGroups:v.classGroups,conflictingClassGroupModifiers:v.conflictingClassGroupModifiers,conflictingClassGroups:v.conflictingClassGroups,...v.extend}})),x(R(N(s)))):N(s),_=(s,b)=>{for(let e in b)s.hasOwnProperty(e)?s[e]=N(s[e],b[e]):s[e]=b[e];return s},ce=(s,b$1)=>{let{extend:e=null,slots:O={},variants:U={},compoundVariants:W=[],compoundSlots:C=[],defaultVariants:z={}}=s,m={...ie,...b$1},k=e!=null&&e.base?N(e.base,s==null?void 0:s.base):s==null?void 0:s.base,g$1=e!=null&&e.variants&&!u(e.variants)?p(U,e.variants):U,w=e!=null&&e.defaultVariants&&!u(e.defaultVariants)?{...e.defaultVariants,...z}:z;!u(m.twMergeConfig)&&!x$1(m.twMergeConfig,v)&&(q=!0,v=m.twMergeConfig);let S=u(e==null?void 0:e.slots),T=u(O)?{}:{base:N(s==null?void 0:s.base,S&&(e==null?void 0:e.base)),...O},j=S?T:_({...e==null?void 0:e.slots},u(T)?{base:s==null?void 0:s.base}:T),h$1=u(e==null?void 0:e.compoundVariants)?W:a(e==null?void 0:e.compoundVariants,W),V=l$1=>{if(u(g$1)&&u(O)&&S)return M(k,l$1==null?void 0:l$1.class,l$1==null?void 0:l$1.className)(m);if(h$1&&!Array.isArray(h$1))throw new TypeError(`The "compoundVariants" prop must be an array. Received: ${typeof h$1}`);if(C&&!Array.isArray(C))throw new TypeError(`The "compoundSlots" prop must be an array. Received: ${typeof C}`);let P=(a,n,t=[],i)=>{let r=t;if(typeof n=="string")r=r.concat(g(n).split(" ").map(o=>`${a}:${o}`));else if(Array.isArray(n))r=r.concat(n.reduce((o,c)=>o.concat(`${a}:${c}`),[]));else if(typeof n=="object"&&typeof i=="string"){for(let o in n)if(n.hasOwnProperty(o)&&o===i){let c=n[o];if(c&&typeof c=="string"){let u=g(c);r[i]?r[i]=r[i].concat(u.split(" ").map(f=>`${a}:${f}`)):r[i]=u.split(" ").map(f=>`${a}:${f}`);}else Array.isArray(c)&&c.length>0&&(r[i]=c.reduce((u,f)=>u.concat(`${a}:${f}`),[]));}}return r},D=(a$1,n=g$1,t=null,i=null)=>{var L;let r=n[a$1];if(!r||u(r))return null;let o=(L=i==null?void 0:i[a$1])!=null?L:l$1==null?void 0:l$1[a$1];if(o===null)return null;let c=l(o),u$1=Array.isArray(m.responsiveVariants)&&m.responsiveVariants.length>0||m.responsiveVariants===!0,f=w==null?void 0:w[a$1],d=[];if(typeof c=="object"&&u$1)for(let[E,Q]of Object.entries(c)){let ne=r[Q];if(E==="initial"){f=Q;continue}Array.isArray(m.responsiveVariants)&&!m.responsiveVariants.includes(E)||(d=P(E,ne,d,t));}let $=c!=null&&typeof c!="object"?c:l(f),A=r[$||"false"];return typeof d=="object"&&typeof t=="string"&&d[t]?_(d,A):d.length>0?(d.push(A),t==="base"?d.join(" "):d):A},p=()=>g$1?Object.keys(g$1).map(a=>D(a,g$1)):null,ee=(a,n)=>{if(!g$1||typeof g$1!="object")return null;let t=new Array;for(let i in g$1){let r=D(i,g$1,a,n),o=a==="base"&&typeof r=="string"?r:r&&r[a];o&&(t[t.length]=o);}return t},H={};for(let a in l$1)l$1[a]!==void 0&&(H[a]=l$1[a]);let I=(a,n)=>{var i;let t=typeof(l$1==null?void 0:l$1[a])=="object"?{[a]:(i=l$1[a])==null?void 0:i.initial}:{};return {...w,...H,...t,...n}},J=(a=[],n)=>{let t=[];for(let{class:i,className:r,...o}of a){let c=!0;for(let[u,f]of Object.entries(o)){let d=I(u,n)[u];if(Array.isArray(f)){if(!f.includes(d)){c=!1;break}}else {let $=A=>A==null||A===!1;if($(f)&&$(d))continue;if(d!==f){c=!1;break}}}c&&(i&&t.push(i),r&&t.push(r));}return t},te=a=>{let n=J(h$1,a);if(!Array.isArray(n))return n;let t={};for(let i of n)if(typeof i=="string"&&(t.base=M(t.base,i)(m)),typeof i=="object")for(let[r,o]of Object.entries(i))t[r]=M(t[r],o)(m);return t},ae=a=>{if(C.length<1)return null;let n={};for(let{slots:t=[],class:i,className:r,...o}of C){if(!u(o)){let c=!0;for(let u of Object.keys(o)){let f=I(u,a)[u];if(f===void 0||(Array.isArray(o[u])?!o[u].includes(f):o[u]!==f)){c=!1;break}}if(!c)continue}for(let c of t)n[c]=n[c]||[],n[c].push([i,r]);}return n};if(!u(O)||!S){let a={};if(typeof j=="object"&&!u(j))for(let n of Object.keys(j))a[n]=t=>{var i,r;return M(j[n],ee(n,t),((i=te(t))!=null?i:[])[n],((r=ae(t))!=null?r:[])[n],t==null?void 0:t.class,t==null?void 0:t.className)(m)};return a}return M(k,p(),J(h$1),l$1==null?void 0:l$1.class,l$1==null?void 0:l$1.className)(m)},K=()=>{if(!(!g$1||typeof g$1!="object"))return Object.keys(g$1)};return V.variantKeys=K(),V.extend=e,V.base=k,V.slots=j,V.variants=g$1,V.defaultVariants=w,V.compoundSlots=C,V.compoundVariants=h$1,V};
|
|
2578
|
+
var ie={twMerge:!0,twMergeConfig:{},responsiveVariants:!1},x=s=>s||void 0,N=(...s)=>x(y(s).filter(Boolean).join(" ")),R=null,v={},q=!1,M=(...s)=>b$1=>b$1.twMerge?((!R||q)&&(q=!1,R=u(v)?bundleCjs.twMerge:bundleCjs.extendTailwindMerge({...v,extend:{theme:v.theme,classGroups:v.classGroups,conflictingClassGroupModifiers:v.conflictingClassGroupModifiers,conflictingClassGroups:v.conflictingClassGroups,...v.extend}})),x(R(N(s)))):N(s),_=(s,b)=>{for(let e in b)s.hasOwnProperty(e)?s[e]=N(s[e],b[e]):s[e]=b[e];return s},ce=(s,b$1)=>{let{extend:e=null,slots:O={},variants:U={},compoundVariants:W=[],compoundSlots:C=[],defaultVariants:z={}}=s,m={...ie,...b$1},k=e!=null&&e.base?N(e.base,s==null?void 0:s.base):s==null?void 0:s.base,g$1=e!=null&&e.variants&&!u(e.variants)?p(U,e.variants):U,w=e!=null&&e.defaultVariants&&!u(e.defaultVariants)?{...e.defaultVariants,...z}:z;!u(m.twMergeConfig)&&!x$1(m.twMergeConfig,v)&&(q=!0,v=m.twMergeConfig);let S=u(e==null?void 0:e.slots),T=u(O)?{}:{base:N(s==null?void 0:s.base,S&&(e==null?void 0:e.base)),...O},j=S?T:_({...e==null?void 0:e.slots},u(T)?{base:s==null?void 0:s.base}:T),h$1=u(e==null?void 0:e.compoundVariants)?W:a(e==null?void 0:e.compoundVariants,W),V=l$1=>{if(u(g$1)&&u(O)&&S)return M(k,l$1==null?void 0:l$1.class,l$1==null?void 0:l$1.className)(m);if(h$1&&!Array.isArray(h$1))throw new TypeError(`The "compoundVariants" prop must be an array. Received: ${typeof h$1}`);if(C&&!Array.isArray(C))throw new TypeError(`The "compoundSlots" prop must be an array. Received: ${typeof C}`);let P=(a,n,t=[],i)=>{let r=t;if(typeof n=="string")r=r.concat(g(n).split(" ").map(o=>`${a}:${o}`));else if(Array.isArray(n))r=r.concat(n.reduce((o,c)=>o.concat(`${a}:${c}`),[]));else if(typeof n=="object"&&typeof i=="string"){for(let o in n)if(n.hasOwnProperty(o)&&o===i){let c=n[o];if(c&&typeof c=="string"){let u=g(c);r[i]?r[i]=r[i].concat(u.split(" ").map(f=>`${a}:${f}`)):r[i]=u.split(" ").map(f=>`${a}:${f}`);}else Array.isArray(c)&&c.length>0&&(r[i]=c.reduce((u,f)=>u.concat(`${a}:${f}`),[]));}}return r},D=(a$1,n=g$1,t=null,i=null)=>{var L;let r=n[a$1];if(!r||u(r))return null;let o=(L=i==null?void 0:i[a$1])!=null?L:l$1==null?void 0:l$1[a$1];if(o===null)return null;let c=l(o),u$1=Array.isArray(m.responsiveVariants)&&m.responsiveVariants.length>0||m.responsiveVariants===!0,f=w==null?void 0:w[a$1],d=[];if(typeof c=="object"&&u$1)for(let[E,Q]of Object.entries(c)){let ne=r[Q];if(E==="initial"){f=Q;continue}Array.isArray(m.responsiveVariants)&&!m.responsiveVariants.includes(E)||(d=P(E,ne,d,t));}let $=c!=null&&typeof c!="object"?c:l(f),A=r[$||"false"];return typeof d=="object"&&typeof t=="string"&&d[t]?_(d,A):d.length>0?(d.push(A),t==="base"?d.join(" "):d):A},p=()=>g$1?Object.keys(g$1).map(a=>D(a,g$1)):null,ee=(a,n)=>{if(!g$1||typeof g$1!="object")return null;let t=new Array;for(let i in g$1){let r=D(i,g$1,a,n),o=a==="base"&&typeof r=="string"?r:r&&r[a];o&&(t[t.length]=o);}return t},H={};for(let a in l$1)l$1[a]!==void 0&&(H[a]=l$1[a]);let I=(a,n)=>{var i;let t=typeof(l$1==null?void 0:l$1[a])=="object"?{[a]:(i=l$1[a])==null?void 0:i.initial}:{};return {...w,...H,...t,...n}},J=(a=[],n)=>{let t=[];for(let{class:i,className:r,...o}of a){let c=!0;for(let[u,f]of Object.entries(o)){let d=I(u,n)[u];if(Array.isArray(f)){if(!f.includes(d)){c=!1;break}}else {let $=A=>A==null||A===!1;if($(f)&&$(d))continue;if(d!==f){c=!1;break}}}c&&(i&&t.push(i),r&&t.push(r));}return t},te=a=>{let n=J(h$1,a);if(!Array.isArray(n))return n;let t={};for(let i of n)if(typeof i=="string"&&(t.base=M(t.base,i)(m)),typeof i=="object")for(let[r,o]of Object.entries(i))t[r]=M(t[r],o)(m);return t},ae=a=>{if(C.length<1)return null;let n={};for(let{slots:t=[],class:i,className:r,...o}of C){if(!u(o)){let c=!0;for(let u of Object.keys(o)){let f=I(u,a)[u];if(f===void 0||(Array.isArray(o[u])?!o[u].includes(f):o[u]!==f)){c=!1;break}}if(!c)continue}for(let c of t)n[c]=n[c]||[],n[c].push([i,r]);}return n};if(!u(O)||!S){let a={};if(typeof j=="object"&&!u(j))for(let n of Object.keys(j))a[n]=t=>{var i,r;return M(j[n],ee(n,t),((i=te(t))!=null?i:[])[n],((r=ae(t))!=null?r:[])[n],t==null?void 0:t.class,t==null?void 0:t.className)(m)};return a}return M(k,p(),J(h$1),l$1==null?void 0:l$1.class,l$1==null?void 0:l$1.className)(m)},K=()=>{if(!(!g$1||typeof g$1!="object"))return Object.keys(g$1)};return V.variantKeys=K(),V.extend=e,V.base=k,V.slots=j,V.variants=g$1,V.defaultVariants=w,V.compoundSlots=C,V.compoundVariants=h$1,V},fe=s=>(b,e)=>ce(b,e?p(s,e):s);
|
|
2579
2579
|
|
|
2580
|
-
|
|
2580
|
+
const tv = fe({
|
|
2581
|
+
twMergeConfig: {
|
|
2582
|
+
override: {
|
|
2583
|
+
classGroups: {
|
|
2584
|
+
'font-size': [{ text: [(value) => /^size-.+/.test(value)] }],
|
|
2585
|
+
'text-color': [{ text: [(value) => /^color-.+/.test(value)] }],
|
|
2586
|
+
'bg-color': [{ bg: [(value) => /^color-.+/.test(value)] }],
|
|
2587
|
+
'border-color': [{ border: [(value) => /^color-.+/.test(value)] }],
|
|
2588
|
+
},
|
|
2589
|
+
},
|
|
2590
|
+
},
|
|
2591
|
+
});
|
|
2592
|
+
|
|
2593
|
+
export { tv as t };
|
|
2581
2594
|
|
|
2582
|
-
//# sourceMappingURL=p-
|
|
2595
|
+
//# sourceMappingURL=p-2c58fcb7.js.map
|