bromcom-ui-next 0.1.8 → 0.1.10
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/bromcom-ui.esm.js.map +1 -1
- package/dist/bromcom-ui/{p-a1aae3ef.entry.js → p-09b53a8f.entry.js} +2 -2
- package/dist/bromcom-ui/{p-49b0e982.entry.js → p-1392a235.entry.js} +2 -2
- package/dist/bromcom-ui/{p-389f1976.entry.js → p-1867c3e6.entry.js} +2 -2
- package/dist/bromcom-ui/p-1d44a091.entry.js +2 -0
- package/dist/bromcom-ui/{p-cee68279.entry.js.map → p-1d44a091.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-2820ad28.entry.js +2 -0
- package/dist/bromcom-ui/p-2820ad28.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-58ee24a8.entry.js → p-2cb15e60.entry.js} +2 -2
- package/dist/bromcom-ui/p-3583888a.entry.js +2 -0
- package/dist/bromcom-ui/{p-9ab4d2be.entry.js.map → p-3583888a.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-cd271b49.entry.js → p-3d424afc.entry.js} +2 -2
- package/dist/bromcom-ui/p-3ed3885e.entry.js +2 -0
- package/dist/bromcom-ui/{p-a3dbbeaf.entry.js.map → p-3ed3885e.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-e89ab4a7.entry.js → p-3f153277.entry.js} +2 -2
- package/dist/bromcom-ui/{p-13784cd7.entry.js → p-4762d66b.entry.js} +2 -2
- package/dist/bromcom-ui/{p-bf69fc8a.entry.js → p-4bba4ab4.entry.js} +2 -2
- package/dist/bromcom-ui/{p-9594cebb.js → p-50133556.js} +2 -2
- package/dist/bromcom-ui/{p-d57587e5.entry.js → p-50713153.entry.js} +2 -2
- package/dist/bromcom-ui/{p-056c9348.entry.js → p-5541403c.entry.js} +2 -2
- package/dist/bromcom-ui/p-651a6761.entry.js +2 -0
- package/dist/bromcom-ui/p-651a6761.entry.js.map +1 -0
- package/dist/bromcom-ui/p-79082ca0.entry.js +2 -0
- package/dist/bromcom-ui/p-79082ca0.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-bd0f7e78.entry.js → p-86704b91.entry.js} +2 -2
- package/dist/bromcom-ui/{p-55c4263c.entry.js → p-898d5cf6.entry.js} +2 -2
- package/dist/bromcom-ui/p-9bd6c84d.entry.js +2 -0
- package/dist/bromcom-ui/p-9bd6c84d.entry.js.map +1 -0
- package/dist/bromcom-ui/{p-0d0d6483.entry.js → p-c45d9e50.entry.js} +2 -2
- package/dist/bromcom-ui/{p-625bbd86.entry.js → p-c78b12c3.entry.js} +2 -2
- package/dist/bromcom-ui/{p-1bf71c9b.entry.js → p-d7b636bf.entry.js} +2 -2
- package/dist/bromcom-ui/p-ddf64315.js.map +1 -1
- package/dist/bromcom-ui/{p-c995a48c.entry.js → p-ea274e8b.entry.js} +2 -2
- package/dist/bromcom-ui/p-ea6cdc17.entry.js +2 -0
- package/dist/bromcom-ui/{p-0d273bac.entry.js.map → p-ea6cdc17.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-edfa3b52.entry.js +2 -0
- package/dist/bromcom-ui/p-edfa3b52.entry.js.map +1 -0
- package/dist/cjs/app-globals-e0eef2e9.js.map +1 -1
- package/dist/cjs/bcm-accordion-group.cjs.entry.js +2 -2
- package/dist/cjs/bcm-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-accordion.cjs.entry.js +2 -2
- package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js +89 -0
- package/dist/cjs/bcm-avatar.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-badge.cjs.entry.js +123 -0
- package/dist/cjs/bcm-badge.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-basic-badge.cjs.entry.js +92 -0
- package/dist/cjs/bcm-basic-badge.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-button-group.cjs.entry.js +2 -2
- package/dist/cjs/bcm-button_5.cjs.entry.js +830 -0
- package/dist/cjs/bcm-button_5.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/bcm-chip.cjs.entry.js +2 -2
- package/dist/cjs/bcm-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-divider.cjs.entry.js +1 -1
- package/dist/cjs/bcm-input.cjs.entry.js +5 -3
- package/dist/cjs/bcm-input.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +1 -1
- package/dist/cjs/bcm-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js +2 -2
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-switch.cjs.entry.js +2 -2
- package/dist/cjs/bcm-tabs-content.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-list.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs.cjs.entry.js +1 -1
- package/dist/cjs/bcm-textarea.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/bromcom-ui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/accordion/accordion.component.js +2 -2
- package/dist/collection/components/accordion-group/accordion-group.component.js +1 -1
- package/dist/collection/components/accordion-group/accordion-group.css +1 -1
- package/dist/collection/components/alert/alert.component.js +1 -1
- package/dist/collection/components/badge/badge.component.js +2 -2
- package/dist/collection/components/badge/badge.css +1 -1
- package/dist/collection/components/basic-badge/basic-badge.component.js +2 -2
- package/dist/collection/components/basic-badge/basic-badge.css +1 -1
- package/dist/collection/components/button/button.component.js +2 -2
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/button-group/button-group.component.js +2 -2
- package/dist/collection/components/checkbox/checkbox.component.js +1 -1
- package/dist/collection/components/chip/chip.component.js +1 -1
- package/dist/collection/components/chip/chip.css +1 -1
- package/dist/collection/components/divider/divider.component.js +1 -1
- package/dist/collection/components/dropdown/dropdown.component.js +2 -2
- package/dist/collection/components/dropdown/dropdown.component.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.css +1 -1
- package/dist/collection/components/dropdown-item/dropdown-item.component.js +2 -2
- package/dist/collection/components/input/input.component.js +4 -2
- package/dist/collection/components/input/input.component.js.map +1 -1
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/linked/linked.component.js +610 -49
- package/dist/collection/components/linked/linked.component.js.map +1 -1
- package/dist/collection/components/linked/linked.css +1 -1
- package/dist/collection/components/pop-confirm/pop-confirm.component.js +1 -1
- package/dist/collection/components/popover/popover.component.js +1 -1
- package/dist/collection/components/radio/radio.component.js +1 -1
- package/dist/collection/components/radio/radio.css +1 -1
- package/dist/collection/components/radio-group/radio-group.component.js +2 -2
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js +2 -2
- package/dist/collection/components/segmented-picker/segmented-picker.component.js +2 -2
- package/dist/collection/components/switch/switch.component.js +2 -2
- package/dist/collection/components/tabs/tabs-content.component.js +1 -1
- package/dist/collection/components/tabs/tabs-list.component.js +1 -1
- package/dist/collection/components/tabs/tabs-trigger.component.js +1 -1
- package/dist/collection/components/tabs/tabs.component.js +1 -1
- package/dist/collection/components/text/text.component.js +28 -1
- package/dist/collection/components/text/text.component.js.map +1 -1
- package/dist/collection/components/text/text.css +1 -1
- package/dist/collection/components/textarea/textarea.component.js +3 -3
- package/dist/collection/components/tooltip/tooltip.component.js +1 -1
- package/dist/components/bcm-accordion-group.js +2 -2
- package/dist/components/bcm-accordion-group.js.map +1 -1
- package/dist/components/bcm-accordion.js +2 -2
- package/dist/components/bcm-alert.js +1 -1
- package/dist/components/bcm-avatar.js +1 -1
- package/dist/components/bcm-badge.js +1 -1
- package/dist/components/bcm-basic-badge.js +3 -3
- package/dist/components/bcm-basic-badge.js.map +1 -1
- package/dist/components/bcm-button-group.js +2 -2
- package/dist/components/bcm-button.js +1 -1
- package/dist/components/bcm-checkbox.js +1 -1
- package/dist/components/bcm-chip.js +2 -2
- package/dist/components/bcm-chip.js.map +1 -1
- package/dist/components/bcm-divider.js +1 -1
- package/dist/components/bcm-dropdown-item.js +2 -2
- package/dist/components/bcm-dropdown.js +5 -5
- package/dist/components/bcm-dropdown.js.map +1 -1
- package/dist/components/bcm-input.js +5 -3
- package/dist/components/bcm-input.js.map +1 -1
- package/dist/components/bcm-linked.js +1 -1
- package/dist/components/bcm-pop-confirm.js +3 -3
- package/dist/components/bcm-popover.js +2 -2
- package/dist/components/bcm-radio-group.js +2 -2
- package/dist/components/bcm-radio.js +2 -2
- package/dist/components/bcm-radio.js.map +1 -1
- package/dist/components/bcm-segmented-picker-option.js +2 -2
- package/dist/components/bcm-segmented-picker.js +2 -2
- package/dist/components/bcm-switch.js +2 -2
- package/dist/components/bcm-tabs-content.js +1 -1
- package/dist/components/bcm-tabs-list.js +1 -1
- package/dist/components/bcm-tabs-trigger.js +1 -1
- package/dist/components/bcm-tabs.js +1 -1
- package/dist/components/bcm-text.js +11 -3
- package/dist/components/bcm-text.js.map +1 -1
- package/dist/components/bcm-textarea.js +3 -3
- package/dist/components/bcm-tooltip.js +2 -2
- package/dist/components/{p-49f20ff7.js → p-2fe931c0.js} +4 -4
- package/dist/components/{p-49f20ff7.js.map → p-2fe931c0.js.map} +1 -1
- package/dist/components/{p-9594cebb.js → p-50133556.js} +2 -2
- package/dist/components/{p-9594cebb.js.map → p-50133556.js.map} +1 -1
- package/dist/components/p-9bf969b2.js +336 -0
- package/dist/components/p-9bf969b2.js.map +1 -0
- package/dist/components/{p-434bf03a.js → p-c978f1a7.js} +4 -4
- package/dist/components/{p-434bf03a.js.map → p-c978f1a7.js.map} +1 -1
- package/dist/esm/app-globals-f7994f55.js.map +1 -1
- package/dist/esm/bcm-accordion-group.entry.js +2 -2
- package/dist/esm/bcm-accordion-group.entry.js.map +1 -1
- package/dist/esm/bcm-accordion.entry.js +2 -2
- package/dist/esm/bcm-alert.entry.js +1 -1
- package/dist/esm/bcm-avatar.entry.js +85 -0
- package/dist/esm/bcm-avatar.entry.js.map +1 -0
- package/dist/esm/bcm-badge.entry.js +119 -0
- package/dist/esm/bcm-badge.entry.js.map +1 -0
- package/dist/esm/bcm-basic-badge.entry.js +88 -0
- package/dist/esm/bcm-basic-badge.entry.js.map +1 -0
- package/dist/esm/bcm-button-group.entry.js +2 -2
- package/dist/esm/bcm-button_5.entry.js +822 -0
- package/dist/esm/bcm-button_5.entry.js.map +1 -0
- package/dist/esm/bcm-checkbox.entry.js +1 -1
- package/dist/esm/bcm-chip.entry.js +2 -2
- package/dist/esm/bcm-chip.entry.js.map +1 -1
- package/dist/esm/bcm-divider.entry.js +1 -1
- package/dist/esm/bcm-input.entry.js +5 -3
- package/dist/esm/bcm-input.entry.js.map +1 -1
- package/dist/esm/bcm-pop-confirm.entry.js +2 -2
- package/dist/esm/bcm-popover.entry.js +2 -2
- package/dist/esm/bcm-radio-group.entry.js +2 -2
- package/dist/esm/bcm-radio.entry.js +2 -2
- package/dist/esm/bcm-radio.entry.js.map +1 -1
- package/dist/esm/bcm-segmented-picker-option.entry.js +2 -2
- package/dist/esm/bcm-segmented-picker.entry.js +2 -2
- package/dist/esm/bcm-switch.entry.js +2 -2
- package/dist/esm/bcm-tabs-content.entry.js +1 -1
- package/dist/esm/bcm-tabs-list.entry.js +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +1 -1
- package/dist/esm/bcm-tabs.entry.js +1 -1
- package/dist/esm/bcm-textarea.entry.js +3 -3
- package/dist/esm/bcm-tooltip.entry.js +2 -2
- package/dist/esm/bromcom-ui.js +1 -1
- package/dist/esm/{floating-ui.dom.esm-480e0f15.js → floating-ui.dom.esm-b7749b71.js} +2 -2
- package/dist/esm/{floating-ui.dom.esm-480e0f15.js.map → floating-ui.dom.esm-b7749b71.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/linked/linked.component.d.ts +47 -7
- package/dist/types/components/text/text.component.d.ts +3 -0
- package/dist/types/components.d.ts +57 -1
- package/package.json +2 -1
- package/dist/bromcom-ui/p-0d273bac.entry.js +0 -2
- package/dist/bromcom-ui/p-9ab4d2be.entry.js +0 -2
- package/dist/bromcom-ui/p-a3dbbeaf.entry.js +0 -2
- package/dist/bromcom-ui/p-b1b493ab.entry.js +0 -2
- package/dist/bromcom-ui/p-b1b493ab.entry.js.map +0 -1
- package/dist/bromcom-ui/p-c427ffee.entry.js +0 -2
- package/dist/bromcom-ui/p-c427ffee.entry.js.map +0 -1
- package/dist/bromcom-ui/p-c444235a.entry.js +0 -2
- package/dist/bromcom-ui/p-c444235a.entry.js.map +0 -1
- package/dist/bromcom-ui/p-cee68279.entry.js +0 -2
- package/dist/bromcom-ui/p-e7e8305f.entry.js +0 -2
- package/dist/bromcom-ui/p-e7e8305f.entry.js.map +0 -1
- package/dist/bromcom-ui/p-f4e8a47d.entry.js +0 -2
- package/dist/bromcom-ui/p-f4e8a47d.entry.js.map +0 -1
- package/dist/bromcom-ui/p-f7890098.entry.js +0 -2
- package/dist/bromcom-ui/p-f7890098.entry.js.map +0 -1
- package/dist/cjs/bcm-avatar_4.cjs.entry.js +0 -596
- package/dist/cjs/bcm-avatar_4.cjs.entry.js.map +0 -1
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js +0 -63
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js.map +0 -1
- package/dist/cjs/bcm-dropdown.cjs.entry.js +0 -56
- package/dist/cjs/bcm-dropdown.cjs.entry.js.map +0 -1
- package/dist/cjs/bcm-linked.cjs.entry.js +0 -91
- package/dist/cjs/bcm-linked.cjs.entry.js.map +0 -1
- package/dist/cjs/bcm-text.cjs.entry.js +0 -119
- package/dist/cjs/bcm-text.cjs.entry.js.map +0 -1
- package/dist/components/p-5f7a0d0d.js +0 -107
- package/dist/components/p-5f7a0d0d.js.map +0 -1
- package/dist/esm/bcm-avatar_4.entry.js +0 -589
- package/dist/esm/bcm-avatar_4.entry.js.map +0 -1
- package/dist/esm/bcm-dropdown-item.entry.js +0 -59
- package/dist/esm/bcm-dropdown-item.entry.js.map +0 -1
- package/dist/esm/bcm-dropdown.entry.js +0 -52
- package/dist/esm/bcm-dropdown.entry.js.map +0 -1
- package/dist/esm/bcm-linked.entry.js +0 -87
- package/dist/esm/bcm-linked.entry.js.map +0 -1
- package/dist/esm/bcm-text.entry.js +0 -115
- package/dist/esm/bcm-text.entry.js.map +0 -1
- /package/dist/bromcom-ui/{p-a1aae3ef.entry.js.map → p-09b53a8f.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-49b0e982.entry.js.map → p-1392a235.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-389f1976.entry.js.map → p-1867c3e6.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-58ee24a8.entry.js.map → p-2cb15e60.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-cd271b49.entry.js.map → p-3d424afc.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-e89ab4a7.entry.js.map → p-3f153277.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-13784cd7.entry.js.map → p-4762d66b.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-bf69fc8a.entry.js.map → p-4bba4ab4.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-9594cebb.js.map → p-50133556.js.map} +0 -0
- /package/dist/bromcom-ui/{p-d57587e5.entry.js.map → p-50713153.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-056c9348.entry.js.map → p-5541403c.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-bd0f7e78.entry.js.map → p-86704b91.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-55c4263c.entry.js.map → p-898d5cf6.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-0d0d6483.entry.js.map → p-c45d9e50.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-625bbd86.entry.js.map → p-c78b12c3.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-1bf71c9b.entry.js.map → p-d7b636bf.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-c995a48c.entry.js.map → p-ea274e8b.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["badgeCss","BcmBadgeStyle0","Badge","constructor","hostRef","this","size","variant","soft","blink","position","classes","tv","base","variants","small","medium","large","dot","text","true","compoundVariants","class","defaultVariants","offsetStyle","offset","x","y","split","map","val","trim","transform","badgeStyle","color","variantType","render","h","key","role","status","undefined","style","Object","assign","name"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /**\n * Determines the size of the badge.\n * @type {'small' | 'medium' | 'large'}\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' | 'text'}\n * @default 'text'\n */\n @Prop()\n variant: 'dot' | 'text' = 'text';\n\n /**\n * Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n */\n @Prop()\n color?: string;\n\n /**\n * Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n */\n @Prop()\n soft: boolean = false;\n\n /**\n * Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n */\n @Prop()\n blink: boolean = false;\n\n /**\n * Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n */\n @Prop()\n status?: string;\n\n /**\n * Sets the position of the badge relative to its container.\n * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n * @default 'top-right'\n */\n @Prop()\n position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n /**\n * Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n */\n @Prop()\n offset: string;\n\n /**\n * Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAW,2hHACjB,MAAAC,EAAeD,E,MCwBFE,EAAK,MALlB,WAAAC,CAAAC,G,UAYIC,KAAAC,KAAqC,SAUrCD,KAAAE,QAA0B,OAkB1BF,KAAAG,KAAgB,MAShBH,KAAAI,MAAiB,MAiBjBJ,KAAAK,SAAsE,YAqB9DL,KAAAM,QAAUC,EAAG,CACjBC,KAAM,kKACNC,SAAU,CACNR,KAAM,CACFS,MAAO,yBACPC,OAAQ,kCACRC,MAAO,+BAEXV,QAAS,CACLW,IAAK,oCACLC,KAAM,IAEVT,SAAU,CACN,YAAa,kBACb,WAAY,iBACZ,eAAgB,qBAChB,cAAe,qBAEnBD,MAAO,CACHW,KAAM,kIAGdC,iBAAkB,CACd,CACId,QAAS,MACTD,KAAM,QACNgB,MAAO,UAEX,CACIf,QAAS,MACTD,KAAM,SACNgB,MAAO,YAEX,CACIf,QAAS,MACTD,KAAM,QACNgB,MAAO,WAGfC,gBAAiB,CACbhB,QAAS,OACTD,KAAM,SACNI,SAAU,YACVD,MAAO,Q,CAIf,eAAYe,GACR,IAAKnB,KAAKoB,OAAQ,MAAO,GACzB,MAAOC,EAAI,EAAGC,EAAI,GAAKtB,KAAKoB,OAAOG,MAAM,KAAKC,KAAIC,GAAOA,EAAIC,SAC7D,MAAO,CAAEC,UAAW,aAAaN,QAAQC,O,CAG7C,cAAYM,GACR,IAAK5B,KAAK6B,MAAO,MAAO,GACxB,MAAMC,EAAc9B,KAAKG,KAAO,OAAS,QAEzC,MAAO,CACH,iBAAkB,iCAAiC2B,KAAe9B,KAAK6B,iBACvE,mBAAoB7B,KAAKG,KAAO,mCAAmCH,KAAK6B,SAAW,gC,CAI3F,MAAAE,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKhB,MAAM,wBACPe,EAAA,QAAAC,IAAA,6CACAD,EAAA,OAAAC,IAAA,2CACIC,KAAK,SAAQ,YACH,SAAQ,aACNlC,KAAKmC,OAAS,WAAWnC,KAAKmC,SAAWC,UACrDnB,MAAOjB,KAAKM,QAAQ,CAChBL,KAAMD,KAAKC,KACXC,QAASF,KAAKE,QACdG,SAAUL,KAAKK,SACfD,MAAOJ,KAAKI,QAEhBiC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACEvC,KAAK4B,YACL5B,KAAKmB,cAGXnB,KAAKE,SAAW,QAAU8B,EAAA,QAAAC,IAAA,2CAAMO,KAAK,SAASxC,KAAKc,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as r,g as o}from"./p-c9b736d9.js";import{c as i}from"./p-5fcf77f9.js";import{c as s}from"./p-12360e4c.js";import{g as a}from"./p-ba2410ef.js";import{s as l,g as c,d as n}from"./p-13a245f6.js";const h='.visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.flex{display:flex}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.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-none{resize:none;resize:none!important}.resize-y{resize:vertical;resize:vertical!important}.resize-x{resize:horizontal;resize:horizontal!important}.resize{resize:both!important;resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:block;width:100%}.bcm-textarea__container{display:flex;flex-direction:column;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.min-h-0{min-height:0}.min-h-\\[3rem\\]{min-height:3rem}.min-h-\\[4rem\\]{min-height:4rem}.min-h-\\[5rem\\]{min-height:5rem}.w-full{width:100%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.\\!resize-none{resize:none!important}.\\!resize-y{resize:vertical!important}.\\!resize-x{resize:horizontal!important}.\\!resize{resize:both!important}.appearance-none{appearance:none}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-right{text-align:right}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-placeholder\\]{color:var(--bcm-ui-color-text-placeholder)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.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)}.outline-0{outline-width:0}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-\\[--bcm-ui-color-border-primary\\]{--tw-ring-color:var(--bcm-ui-color-border-primary)}.ring-opacity-50{--tw-ring-opacity:0.5}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}';const d=h;const b=class{constructor(r){e(this,r);this.bcmInput=t(this,"bcmInput",1);this.bcmChange=t(this,"bcmChange",1);this.bcmFocus=t(this,"bcmFocus",1);this.bcmBlur=t(this,"bcmBlur",1);this.bcmKeyDown=t(this,"bcmKeyDown",1);this.bcmKeyUp=t(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.value="";this.rows=3;this.resize="none";this.autoGrow=false;this._id=a("textarea");this.size="medium";this.status="default";this.fullWidth=false;this.disabled=false;this.readonly=false;this.required=false;this.showCounter=true;this.onChange=e=>{this.bcmChange.emit(e)};this.onFocus=e=>{this.isFocused=true;this.bcmFocus.emit(e)};this.onBlur=e=>{this.isFocused=false;this.bcmBlur.emit(e);this.validateInput()};this.onKeyDown=e=>{this.bcmKeyDown.emit(e)};this.onKeyUp=e=>{this.bcmKeyUp.emit(e)};this.styleClass=i({slots:{base:["bcm-textarea bcm-textarea__container","bg-[--bcm-ui-color-background-base-default]","border border-solid rounded","flex flex-col","transition-colors duration-200","px-2 py-2","w-full"],textareaClass:["textarea","w-full","border-0 outline-0 bg-transparent","appearance-none","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","overflow-y-auto","min-h-0"],counterText:["textarea-counter-text","text-[--bcm-ui-color-text-placeholder]","text-right","mt-1"]},variants:{size:{small:{base:"",textareaClass:"text-size-4 min-h-[3rem]",counterText:"text-size-3"},medium:{base:"",textareaClass:"text-size-5 min-h-[4rem]",counterText:"text-size-4"},large:{base:"",textareaClass:"text-size-6 min-h-[5rem]",counterText:"text-size-5"}},resize:{none:{textareaClass:"!resize-none"},both:{textareaClass:"!resize"},horizontal:{textareaClass:"!resize-x"},vertical:{textareaClass:"!resize-y"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:{base:"disabled cursor-not-allowed opacity-50",textareaClass:"!resize-none"},false:""},focused:{true:{base:"ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50"},false:""}},defaultVariants:{size:"medium",status:"default",resize:"vertical",fullWidth:false,disabled:false,focused:false}},{twMerge:false})}handleValueChange(e){if(this.textareaRef){this.textareaRef.value=e;if(this.autoGrow){this.adjustHeight()}}}watchStatus(e){this.internalStatus=e}watchErrorMessage(e){this.internalErrorMessage=e}componentWillLoad(){l("en",n);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}componentDidLoad(){var e;if(this.autoGrow){this.adjustHeight();(e=this.textareaRef)===null||e===void 0?void 0:e.addEventListener("input",(()=>this.adjustHeight()))}}disconnectedCallback(){if(this.autoGrow&&this.textareaRef){this.textareaRef.removeEventListener("input",(()=>this.adjustHeight()))}}async setFocus(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.focus()}async setBlur(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.blur()}async select(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.select()}adjustHeight(){if(!this.autoGrow||!this.textareaRef)return;requestAnimationFrame((()=>{this.textareaRef.style.height="0px";const e=getComputedStyle(this.textareaRef);const t=parseInt(e.lineHeight);const r=parseInt(e.paddingTop);const o=parseInt(e.paddingBottom);const i=this.textareaRef.scrollHeight;let s=i;if(this.minRows){const e=this.minRows*t+r+o;s=Math.max(s,e)}if(this.maxRows){const e=this.maxRows*t+r+o;s=Math.min(s,e)}this.textareaRef.style.height=`${s}px`}))}validateInput(){if(!this.textareaRef)return;this.isValid=true;this.validationMessage="";const e=this.textareaRef.value;if(this.required&&!e){this.isValid=false;this.validationMessage=c("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}if(this.minLength&&e.length<this.minLength){this.isValid=false;this.validationMessage=c("minlength",{min:this.minLength})}else if(this.maxLength&&e.length>this.maxLength){this.isValid=false;this.validationMessage=c("maxlength",{max:this.maxLength})}if(this.validator){const t=this.validator(e);if(t){this.isValid=false;this.validationMessage=t}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}render(){const e=this._id+"-textarea"||this.name;const{base:t,textareaClass:o,counterText:i}=this.styleClass({size:this.size,status:this.internalStatus,resize:this.resize,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return r("div",{key:"46e997d505d80c43544a2cce526b2ac6505377de",class:"bcm-ui-element"},this.label&&r("label",{key:"09b25e877196cc78d3b40ce85ecc61799179ae7c",class:s("textarea-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:e},r("slot",{key:"d43eaf135a5f799be6739be710a7394bbde564c4",name:"label"},this.label),this.required&&r("span",{key:"cc2f00cdd7c98af01c20897b5e21cc07ae8d7012"},"*")),r("div",{key:"9252f78e3b0b0838ce7958e0c0e81687100d0151",class:t()},r("textarea",{key:"665c6579976948151ba4dc7eb879b40ae57a27fe",ref:e=>this.textareaRef=e,id:e,class:o(),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:e=>{const t=e.target;this.value=t.value;this.bcmInput.emit(e);this.validateInput();if(this.autoGrow){this.adjustHeight()}},onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),this.showCounter&&r("div",{key:"e581227acd226d47ccb968da42f32070f8e90c2d",class:i()},this.value.length,this.maxLength?`/${this.maxLength}`:"")),(this.captionText||this.internalErrorMessage||this.validationMessage)&&r("div",{key:"d2c666a75e31a08814e87398ccb0fc1c3f868a75",class:s("textarea-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};b.style=d;export{b as bcm_textarea};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as r,g as o}from"./p-c9b736d9.js";import{c as i}from"./p-5fcf77f9.js";import{c as s}from"./p-12360e4c.js";import{g as a}from"./p-ba2410ef.js";import{s as l,g as n,d as c}from"./p-13a245f6.js";const h='.visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.flex{display:flex}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.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-none{resize:none;resize:none!important}.resize-y{resize:vertical;resize:vertical!important}.resize-x{resize:horizontal;resize:horizontal!important}.resize{resize:both!important;resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:block;width:100%}.bcm-textarea__container{display:flex;flex-direction:column;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.min-h-0{min-height:0}.min-h-\\[3rem\\]{min-height:3rem}.min-h-\\[4rem\\]{min-height:4rem}.min-h-\\[5rem\\]{min-height:5rem}.w-full{width:100%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.\\!resize-none{resize:none!important}.\\!resize-y{resize:vertical!important}.\\!resize-x{resize:horizontal!important}.\\!resize{resize:both!important}.appearance-none{appearance:none}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-right{text-align:right}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-placeholder\\]{color:var(--bcm-ui-color-text-placeholder)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.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)}.outline-0{outline-width:0}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-\\[--bcm-ui-color-border-primary\\]{--tw-ring-color:var(--bcm-ui-color-border-primary)}.ring-opacity-50{--tw-ring-opacity:0.5}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}';const d=h;const b=class{constructor(r){e(this,r);this.bcmInput=t(this,"bcmInput",1);this.bcmChange=t(this,"bcmChange",1);this.bcmFocus=t(this,"bcmFocus",1);this.bcmBlur=t(this,"bcmBlur",1);this.bcmKeyDown=t(this,"bcmKeyDown",1);this.bcmKeyUp=t(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.value="";this.rows=3;this.resize="none";this.autoGrow=false;this._id=a("textarea");this.size="medium";this.status="default";this.fullWidth=false;this.disabled=false;this.readonly=false;this.required=false;this.showCounter=true;this.onChange=e=>{this.bcmChange.emit(e)};this.onFocus=e=>{this.isFocused=true;this.bcmFocus.emit(e)};this.onBlur=e=>{this.isFocused=false;this.bcmBlur.emit(e);this.validateInput()};this.onKeyDown=e=>{this.bcmKeyDown.emit(e)};this.onKeyUp=e=>{this.bcmKeyUp.emit(e)};this.styleClass=i({slots:{base:["bcm-textarea bcm-textarea__container","bg-[--bcm-ui-color-background-base-default]","border border-solid rounded","flex flex-col","transition-colors duration-200","px-2 py-2","w-full"],textareaClass:["textarea","w-full","border-0 outline-0 bg-transparent","appearance-none","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","overflow-y-auto","min-h-0"],counterText:["textarea-counter-text","text-[--bcm-ui-color-text-placeholder]","text-right","mt-1"]},variants:{size:{small:{base:"",textareaClass:"text-size-4 min-h-[3rem]",counterText:"text-size-3"},medium:{base:"",textareaClass:"text-size-5 min-h-[4rem]",counterText:"text-size-4"},large:{base:"",textareaClass:"text-size-6 min-h-[5rem]",counterText:"text-size-5"}},resize:{none:{textareaClass:"!resize-none"},both:{textareaClass:"!resize"},horizontal:{textareaClass:"!resize-x"},vertical:{textareaClass:"!resize-y"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:{base:"disabled cursor-not-allowed opacity-50",textareaClass:"!resize-none"},false:""},focused:{true:{base:"ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50"},false:""}},defaultVariants:{size:"medium",status:"default",resize:"vertical",fullWidth:false,disabled:false,focused:false}},{twMerge:false})}handleValueChange(e){if(this.textareaRef){this.textareaRef.value=e;if(this.autoGrow){this.adjustHeight()}}}watchStatus(e){this.internalStatus=e}watchErrorMessage(e){this.internalErrorMessage=e}componentWillLoad(){l("en",c);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}componentDidLoad(){var e;if(this.autoGrow){this.adjustHeight();(e=this.textareaRef)===null||e===void 0?void 0:e.addEventListener("input",(()=>this.adjustHeight()))}}disconnectedCallback(){if(this.autoGrow&&this.textareaRef){this.textareaRef.removeEventListener("input",(()=>this.adjustHeight()))}}async setFocus(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.focus()}async setBlur(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.blur()}async select(){var e;(e=this.textareaRef)===null||e===void 0?void 0:e.select()}adjustHeight(){if(!this.autoGrow||!this.textareaRef)return;requestAnimationFrame((()=>{this.textareaRef.style.height="0px";const e=getComputedStyle(this.textareaRef);const t=parseInt(e.lineHeight);const r=parseInt(e.paddingTop);const o=parseInt(e.paddingBottom);const i=this.textareaRef.scrollHeight;let s=i;if(this.minRows){const e=this.minRows*t+r+o;s=Math.max(s,e)}if(this.maxRows){const e=this.maxRows*t+r+o;s=Math.min(s,e)}this.textareaRef.style.height=`${s}px`}))}validateInput(){if(!this.textareaRef)return;this.isValid=true;this.validationMessage="";const e=this.textareaRef.value;if(this.required&&!e){this.isValid=false;this.validationMessage=n("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}if(this.minLength&&e.length<this.minLength){this.isValid=false;this.validationMessage=n("minlength",{min:this.minLength})}else if(this.maxLength&&e.length>this.maxLength){this.isValid=false;this.validationMessage=n("maxlength",{max:this.maxLength})}if(this.validator){const t=this.validator(e);if(t){this.isValid=false;this.validationMessage=t}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}render(){const e=this._id+"-textarea"||this.name;const{base:t,textareaClass:o,counterText:i}=this.styleClass({size:this.size,status:this.internalStatus,resize:this.resize,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return r("div",{key:"2c0921598e0a33a92660a3d4fecd428c78beead9",class:"bcm-ui-element"},this.label&&r("label",{key:"7fc9122c49f11aff7de68d4aef855ab6cf68285c",class:s("textarea-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:e},r("slot",{key:"9a3a55b0f24060e9996e42aa93efe806cb871618",name:"label"},this.label),this.required&&r("span",{key:"bfef43587667f26d6cd97052c0ff127765044d42"},"*")),r("div",{key:"5b12ae013624349f9ca905394dd16f0247f5cf4f",class:t()},r("textarea",{key:"abbad89db5f36716bc39118d62644e79300e103f",ref:e=>this.textareaRef=e,id:e,class:o(),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:e=>{const t=e.target;this.value=t.value;this.bcmInput.emit(e);this.validateInput();if(this.autoGrow){this.adjustHeight()}},onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),this.showCounter&&r("div",{key:"192f21a7e5704625356b0c27d86d7cc699a3b9db",class:i()},this.value.length,this.maxLength?`/${this.maxLength}`:"")),(this.captionText||this.internalErrorMessage||this.validationMessage)&&r("div",{key:"969597cab284f83fa5c9721b9e8f8b2fbe9aad4c",class:s("textarea-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};b.style=d;export{b as bcm_textarea};
|
|
2
|
+
//# sourceMappingURL=p-c45d9e50.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as i,g as r}from"./p-c9b736d9.js";import{g as o}from"./p-ba2410ef.js";import{c as s}from"./p-5fcf77f9.js";const a=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";const c=a;const l=class{constructor(i){e(this,i);this.bcmSwitchChange=t(this,"bcmSwitchChange",1);this.checked=false;this.disabled=false;this.labelPosition="right";this.error=false;this.size="medium";this.readonly=false;this.required=false;this.switchId=o("switch");this.switchStyle=()=>{const e={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-hover)","--switch-dot-bg":"var(--bcm-ui-color-background-base-default)"};const t={"--switch-bg":"var(--bcm-ui-color-background-info-default)","--switch-bg-hover":"var(--bcm-ui-color-background-info-hover)"};const i={"--switch-bg":"var(--bcm-ui-color-background-error-default)","--switch-bg-hover":"var(--bcm-ui-color-background-error-hover)"};const r={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-default)","--switch-dot-bg":"var(--bcm-ui-color-background-disabled-default)"};const o={"--switch-bg":"var(--bcm-ui-color-background-disabled-default)","--switch-bg-hover":"var(--bcm-ui-color-background-disabled-default)","--switch-dot-bg":"var(--bcm-ui-color-background-default-default)"};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e),this.checked&&t),this.error&&i),this.readonly&&r),this.disabled&&o)};this.switchClass=s({slots:{base:"bcm-ui-element flex flex-col",switchWrapper:"flex items-center group",dotContainer:"relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300",dot:"absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed",caption:"!text-color-error font-normal",label:"!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed"},variants:{size:{small:{dotContainer:"w-8 h-4",dot:"size-3",label:"text-size-4",caption:"text-size-3",switchWrapper:"gap-2",base:"gap-0.5"},medium:{dotContainer:"w-9 h-[18px]",dot:"size-3.5",label:"text-size-5",caption:"text-size-4",switchWrapper:"gap-2.5",base:"gap-1"},large:{dotContainer:"w-10 h-5",dot:"size-4",label:"text-size-6",caption:"text-size-5",switchWrapper:"gap-3",base:"gap-2"}},labelPosition:{left:{label:""},right:{label:"order-2"}},checked:{true:{dot:""},false:{dot:"left-0.5"}},disabled:{true:"",false:{switchWrapper:""}},readonly:{true:{switchWrapper:"cursor-default",dotContainer:"cursor-default",dot:"cursor-default"},false:{switchWrapper:"cursor-pointer",dotContainer:"cursor-pointer hover:bg-[--switch-bg-hover]"}}},compoundVariants:[{size:"small",checked:true,class:{dot:"left-[18px]"}},{size:"medium",checked:true,class:{dot:"left-[20px]"}},{size:"large",checked:true,class:{dot:"left-[22px]"}},{readonly:false,disabled:false,class:{dotContainer:"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300"}}]})}toggleSwitch(){if(this.disabled||this.readonly)return;this.checked=!this.checked;this.bcmSwitchChange.emit(this.checked)}render(){const{base:e,switchWrapper:t,label:r,dot:o,dotContainer:s,caption:a}=this.switchClass({size:this.size,checked:this.checked,disabled:this.disabled,labelPosition:this.labelPosition,readonly:this.readonly});const c=Object.assign({role:"switch","aria-checked":this.checked.toString(),"aria-disabled":this.disabled.toString(),"aria-readonly":this.readonly.toString()},this.required&&{"aria-required":"true"});const l=!this.readonly&&!this.disabled?{tabindex:"0"}:{};return i("div",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as i,g as r}from"./p-c9b736d9.js";import{g as o}from"./p-ba2410ef.js";import{c as s}from"./p-5fcf77f9.js";const a=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";const c=a;const l=class{constructor(i){e(this,i);this.bcmSwitchChange=t(this,"bcmSwitchChange",1);this.checked=false;this.disabled=false;this.labelPosition="right";this.error=false;this.size="medium";this.readonly=false;this.required=false;this.switchId=o("switch");this.switchStyle=()=>{const e={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-hover)","--switch-dot-bg":"var(--bcm-ui-color-background-base-default)"};const t={"--switch-bg":"var(--bcm-ui-color-background-info-default)","--switch-bg-hover":"var(--bcm-ui-color-background-info-hover)"};const i={"--switch-bg":"var(--bcm-ui-color-background-error-default)","--switch-bg-hover":"var(--bcm-ui-color-background-error-hover)"};const r={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-default)","--switch-dot-bg":"var(--bcm-ui-color-background-disabled-default)"};const o={"--switch-bg":"var(--bcm-ui-color-background-disabled-default)","--switch-bg-hover":"var(--bcm-ui-color-background-disabled-default)","--switch-dot-bg":"var(--bcm-ui-color-background-default-default)"};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e),this.checked&&t),this.error&&i),this.readonly&&r),this.disabled&&o)};this.switchClass=s({slots:{base:"bcm-ui-element flex flex-col",switchWrapper:"flex items-center group",dotContainer:"relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300",dot:"absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed",caption:"!text-color-error font-normal",label:"!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed"},variants:{size:{small:{dotContainer:"w-8 h-4",dot:"size-3",label:"text-size-4",caption:"text-size-3",switchWrapper:"gap-2",base:"gap-0.5"},medium:{dotContainer:"w-9 h-[18px]",dot:"size-3.5",label:"text-size-5",caption:"text-size-4",switchWrapper:"gap-2.5",base:"gap-1"},large:{dotContainer:"w-10 h-5",dot:"size-4",label:"text-size-6",caption:"text-size-5",switchWrapper:"gap-3",base:"gap-2"}},labelPosition:{left:{label:""},right:{label:"order-2"}},checked:{true:{dot:""},false:{dot:"left-0.5"}},disabled:{true:"",false:{switchWrapper:""}},readonly:{true:{switchWrapper:"cursor-default",dotContainer:"cursor-default",dot:"cursor-default"},false:{switchWrapper:"cursor-pointer",dotContainer:"cursor-pointer hover:bg-[--switch-bg-hover]"}}},compoundVariants:[{size:"small",checked:true,class:{dot:"left-[18px]"}},{size:"medium",checked:true,class:{dot:"left-[20px]"}},{size:"large",checked:true,class:{dot:"left-[22px]"}},{readonly:false,disabled:false,class:{dotContainer:"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300"}}]})}toggleSwitch(){if(this.disabled||this.readonly)return;this.checked=!this.checked;this.bcmSwitchChange.emit(this.checked)}render(){const{base:e,switchWrapper:t,label:r,dot:o,dotContainer:s,caption:a}=this.switchClass({size:this.size,checked:this.checked,disabled:this.disabled,labelPosition:this.labelPosition,readonly:this.readonly});const c=Object.assign({role:"switch","aria-checked":this.checked.toString(),"aria-disabled":this.disabled.toString(),"aria-readonly":this.readonly.toString()},this.required&&{"aria-required":"true"});const l=!this.readonly&&!this.disabled?{tabindex:"0"}:{};return i("div",{key:"1301508344227ab292f8847c1202676830568534",class:e()},i("label",{key:"ced1bb0bea6a6204d8e2f569dc3071f116732647",class:t(),style:this.switchStyle()},i("input",{key:"a432f7aed823ccc8cc7f008f6422f5c0bcd4f542",id:this.switchId,type:"checkbox",class:"hidden peer",checked:this.checked,name:this.name,value:this.value,disabled:this.disabled,readOnly:this.readonly,required:this.required,onChange:()=>this.toggleSwitch()}),this.label&&i("span",{key:"51ff936fdc0d0d77eb32bda235425d3d26d0c0aa",class:r()},i("slot",{key:"f1411fe2f3da9b7f9f606afd3852e33284a53b53"},this.label)),i("label",Object.assign({key:"e005835f2e22c03713b3d7732d6c33e622429551",htmlFor:this.switchId,class:s()},l,c,{onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!this.readonly&&!this.disabled){e.preventDefault();this.toggleSwitch()}}}),i("div",{key:"cac7f8bcb004fe7bf958ad9d1c30006db78868a2",class:o()}))),this.error&&this.caption&&i("span",{key:"7a560b8e5192f6c184bcc0cf67cc453d3d4fa4d0",class:a()},this.caption),i("slot",{key:"8ebde4cddd169ca14f6c6a8ba2ad637799ea34fd",name:"caption"}))}get el(){return r(this)}};l.style=c;export{l as bcm_switch};
|
|
2
|
+
//# sourceMappingURL=p-c78b12c3.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as o,g as r}from"./p-c9b736d9.js";import{c as a}from"./p-5fcf77f9.js";const s=".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-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.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-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)}";const l=s;const c=class{constructor(i){t(this,i);this.bcmTabSelected=e(this,"bcmTabSelected",1);this.active=false;this.size="medium";this.disabled=false;this.class=a({slots:{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",borderLine:"bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out"},variants:{size:{small:{tab:"text-size-4 gap-2"},medium:{tab:"text-size-5 gap-2.5"},large:{tab:"text-size-6 gap-3"}},active:{true:{tab:"text-color-primary"},false:{tab:"text-color"}},disabled:{true:{tab:"cursor-not-allowed text-color-disabled",borderLine:"bg-[--bcm-ui-color-text-disabled]"},false:{tab:"cursor-pointer text-color hover:text-color-primary",borderLine:"bg-[--bcm-ui-color-text-default]"}}},defaultVariants:{size:"medium",active:false,disabled:false}},{twMerge:false})}handleClick(){if(this.disabled)return;this.bcmTabSelected.emit(this.value)}render(){const{tab:t,borderLine:e}=this.class({size:this.size,active:this.active,disabled:this.disabled});return i(o,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as r}from"./p-c9b736d9.js";import{c as a}from"./p-5fcf77f9.js";const s=".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-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.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-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)}";const l=s;const c=class{constructor(i){t(this,i);this.bcmTabSelected=e(this,"bcmTabSelected",1);this.active=false;this.size="medium";this.disabled=false;this.class=a({slots:{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",borderLine:"bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out"},variants:{size:{small:{tab:"text-size-4 gap-2"},medium:{tab:"text-size-5 gap-2.5"},large:{tab:"text-size-6 gap-3"}},active:{true:{tab:"text-color-primary"},false:{tab:"text-color"}},disabled:{true:{tab:"cursor-not-allowed text-color-disabled",borderLine:"bg-[--bcm-ui-color-text-disabled]"},false:{tab:"cursor-pointer text-color hover:text-color-primary",borderLine:"bg-[--bcm-ui-color-text-default]"}}},defaultVariants:{size:"medium",active:false,disabled:false}},{twMerge:false})}handleClick(){if(this.disabled)return;this.bcmTabSelected.emit(this.value)}render(){const{tab:t,borderLine:e}=this.class({size:this.size,active:this.active,disabled:this.disabled});return i(o,{key:"737dae93f86d0f7ae35c290439488c6266cf5ed9",role:"tab","aria-selected":this.active.toString(),"aria-disabled":this.disabled},i("button",{key:"1ba4064730d5b2503a5d30f21542ae4669ddc9cd",class:t(),disabled:this.disabled,part:"tab",onClick:()=>this.handleClick()},i("slot",{key:"071b435af12f5196249d277681b8a32736dbd88d"})),i("div",{key:"b5c3a7ce4ead271443224dfb34baaa24f3964587",class:e()}))}get el(){return r(this)}};c.style=l;export{c as bcm_tabs_trigger};
|
|
2
|
+
//# sourceMappingURL=p-d7b636bf.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["addHeadScript","obj","head","document","script","createElement","Object","keys","forEach","key","appendChild","FA_GLOBAL_CSS","constructor","shadow","this","attachShadow","mode","innerHTML","observedAttributes","attributeChangedCallback","name","oldValue","newValue","icon","shadowRoot","querySelector","className","connectedCallback","globalScripts","appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n const head = document.head;\n const script = document.createElement('script');\n Object.keys(obj).forEach(key => {\n script[key] = obj[key];\n });\n head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n 'bcm-icon',\n class extends HTMLElement {\n constructor() {\n super();\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n <i></i>\n `;\n }\n\n static get observedAttributes() {\n return ['name', 'icon-name'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if ((name === 'name' || name === 'icon-name') && oldValue !== newValue) {\n this.icon = newValue;\n }\n }\n\n get icon() {\n return this.getAttribute('name') || this.getAttribute('icon-name');\n }\n\n set icon(icon) {\n this.shadowRoot.querySelector('i').className = `${icon}`;\n }\n\n connectedCallback() {\n this.style.display = 'inline-block';\n this.icon = this.icon;\n }\n },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"AAAA,SAASA,EAAcC,GACnB,MAAMC,EAAOC,SAASD,KACtB,MAAME,EAASD,SAASE,cAAc,UACtCC,OAAOC,KAAKN,GAAKO,SAAQC,IACrBL,EAAOK,GAAOR,EAAIQ,EAAA,IAEtBP,EAAKQ,YAAYN,EACrB,C,6EAEA,MAAMO,EAAgB,sE,2DAElB,WAAAC,G,QAEI,MAAMC,EAAMC,KAAAC,aAAA,CAAAC,KAAA,SACZH,EAAAI,UAAA,0CACRN,+BAGA,CACI,6BAAWO,GACP,MAAO,CAAC,OAAQ,YACxB,CACI,wBAAAC,CAAAC,EAAAC,EAAAC,GACJ,IAAAF,IAAA,QAAAA,IAAA,cAAAC,IAAAC,EAAA,C,WAEA,CACA,CACI,QAAAC,G,gEAEJ,CACI,QAAIA,CAAKA,GACLT,KAAKU,WAAWC,cAAA,KAAAC,UAAA,GAAAH,GACxB,CACI,iBAAAI,G,kCAEIb,KAAKS,KAAAT,KAAAS,IACb,I,eCnCY,MAACK,EAAgBC,S","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["addHeadScript","obj","head","document","script","createElement","Object","keys","forEach","key","appendChild","FA_GLOBAL_CSS","constructor","shadow","this","attachShadow","mode","innerHTML","observedAttributes","attributeChangedCallback","name","oldValue","newValue","icon","shadowRoot","querySelector","className","connectedCallback","globalScripts","appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n const head = document.head;\n const script = document.createElement('script');\n Object.keys(obj).forEach(key => {\n script[key] = obj[key];\n });\n head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n 'bcm-icon',\n class extends HTMLElement {\n constructor() {\n super();\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n <i></i>\n `;\n }\n\n static get observedAttributes() {\n return ['name', 'icon-name'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if ((name === 'name' || name === 'icon-name') && oldValue !== newValue) {\n this.icon = newValue;\n }\n }\n\n get icon() {\n return this.getAttribute('name') || this.getAttribute('icon-name');\n }\n\n set icon(icon) {\n this.shadowRoot.querySelector('i').className = `${icon}`;\n }\n\n connectedCallback() {\n this.style.display = 'inline-block';\n this.icon = this.icon;\n }\n },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/ui-team/next/bromcom-ui-v2/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"AAAA,SAASA,EAAcC,GACnB,MAAMC,EAAOC,SAASD,KACtB,MAAME,EAASD,SAASE,cAAc,UACtCC,OAAOC,KAAKN,GAAKO,SAAQC,IACrBL,EAAOK,GAAOR,EAAIQ,EAAA,IAEtBP,EAAKQ,YAAYN,EACrB,C,6EAEA,MAAMO,EAAgB,sE,2DAElB,WAAAC,G,QAEI,MAAMC,EAAMC,KAAAC,aAAA,CAAAC,KAAA,SACZH,EAAAI,UAAA,0CACRN,+BAGA,CACI,6BAAWO,GACP,MAAO,CAAC,OAAQ,YACxB,CACI,wBAAAC,CAAAC,EAAAC,EAAAC,GACJ,IAAAF,IAAA,QAAAA,IAAA,cAAAC,IAAAC,EAAA,C,WAEA,CACA,CACI,QAAAC,G,gEAEJ,CACI,QAAIA,CAAKA,GACLT,KAAKU,WAAWC,cAAA,KAAAC,UAAA,GAAAH,GACxB,CACI,iBAAAI,G,kCAEIb,KAAKS,KAAAT,KAAAS,IACb,I,eCnCY,MAACK,EAAgBC,S","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as a}from"./p-c9b736d9.js";import{c as o}from"./p-5fcf77f9.js";import{g as s}from"./p-ba2410ef.js";import{c as r}from"./p-12360e4c.js";const c=".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const l=c;const n=class{constructor(i){t(this,i);this.bcmRadioGroupChange=e(this,"bcmRadioGroupChange",1);this.disabled=false;this.required=false;this.error=false;this.size="medium";this.direction="vertical";this.radioGroupName=s("radio-group-name");this.handleSlotChange=()=>{this.radios.forEach((t=>{var e;t.size=this.size;t.name=(e=this.name)!==null&&e!==void 0?e:this.radioGroupName;t.disabled=this.disabled;t.error=this.error}))};this.radioGroupClass=o({slots:{host:["bcm-ui-element bcm-radio-group flex flex-col"],container:["flex"]},variants:{size:{small:{host:"gap-1.5",container:"gap-1.5"},medium:{host:"gap-2",container:"gap-2"},large:{host:"gap-2.5",container:"gap-2.5"}},direction:{horizontal:{container:["flex-row flex-wrap"]},vertical:{container:["flex-col"]}}},defaultVariants:{size:"medium",direction:"vertical"}})}get radios(){return this.host.querySelectorAll("bcm-radio")}componentWillLoad(){if(this.value){this.updateRadios(this.value)}}async setClear(){var t;this.value="";(t=this.radios)===null||t===void 0?void 0:t.forEach((t=>{t.checked=false}))}async resetCaption(){this.error=false;this.captionText=undefined}handleValueChange(t){this.updateRadios(t)}handleRadioChange(t){const e=t.target;const i=this.host.querySelectorAll("bcm-radio");i.forEach((t=>{if(t!==e){t.checked=false}}));this.bcmRadioGroupChange.emit({value:e.value,element:e})}updateRadios(t){this.radios.forEach((e=>{e.checked=e.value===t}))}render(){const{host:t,container:e}=this.radioGroupClass({size:this.size,direction:this.direction});return i("div",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,g as a}from"./p-c9b736d9.js";import{c as o}from"./p-5fcf77f9.js";import{g as s}from"./p-ba2410ef.js";import{c as r}from"./p-12360e4c.js";const c=".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const l=c;const n=class{constructor(i){t(this,i);this.bcmRadioGroupChange=e(this,"bcmRadioGroupChange",1);this.disabled=false;this.required=false;this.error=false;this.size="medium";this.direction="vertical";this.radioGroupName=s("radio-group-name");this.handleSlotChange=()=>{this.radios.forEach((t=>{var e;t.size=this.size;t.name=(e=this.name)!==null&&e!==void 0?e:this.radioGroupName;t.disabled=this.disabled;t.error=this.error}))};this.radioGroupClass=o({slots:{host:["bcm-ui-element bcm-radio-group flex flex-col"],container:["flex"]},variants:{size:{small:{host:"gap-1.5",container:"gap-1.5"},medium:{host:"gap-2",container:"gap-2"},large:{host:"gap-2.5",container:"gap-2.5"}},direction:{horizontal:{container:["flex-row flex-wrap"]},vertical:{container:["flex-col"]}}},defaultVariants:{size:"medium",direction:"vertical"}})}get radios(){return this.host.querySelectorAll("bcm-radio")}componentWillLoad(){if(this.value){this.updateRadios(this.value)}}async setClear(){var t;this.value="";(t=this.radios)===null||t===void 0?void 0:t.forEach((t=>{t.checked=false}))}async resetCaption(){this.error=false;this.captionText=undefined}handleValueChange(t){this.updateRadios(t)}handleRadioChange(t){const e=t.target;const i=this.host.querySelectorAll("bcm-radio");i.forEach((t=>{if(t!==e){t.checked=false}}));this.bcmRadioGroupChange.emit({value:e.value,element:e})}updateRadios(t){this.radios.forEach((e=>{e.checked=e.value===t}))}render(){const{host:t,container:e}=this.radioGroupClass({size:this.size,direction:this.direction});return i("div",{key:"959d1478174e39ed3d2e3c7d62b755baa5e4fc0c",class:t()},this.label&&i("label",{key:"bef009315a9a7cf5035df47b8eac802bace0a947",class:r("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},i("slot",{key:"14592ffb93e5dcd8c571db4ffbb98c06978463f5",name:"label"},this.label),this.required&&i("span",{key:"e94a4292ffc92a2c74368969d6832096347a53d2"},"*")),i("div",{key:"ab2c2d6acab6e1135d38ee048442c2830cc61a31",class:e()},i("slot",{key:"c28f130aa2110c089a5bbcf6d229b8d36006ab49",onSlotchange:this.handleSlotChange})),this.captionText&&i("div",{key:"cf29817b625d5a3e5582ae70ecb8df41e8d3d9c0",class:r("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled,"text-[--bcm-ui-color-text-error]":!this.disabled&&this.error,"text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},this.captionText))}get host(){return a(this)}static get watchers(){return{value:["handleValueChange"]}}};n.style=l;export{n as bcm_radio_group};
|
|
2
|
+
//# sourceMappingURL=p-ea274e8b.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as r,h as a,g as e}from"./p-c9b736d9.js";const t=".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";const i=t;const s=class{constructor(a){o(this,a);this.bcmAccordionGroupChange=r(this,"bcmAccordionGroupChange",1);this.multi=false;this.accordionItems=[];this.handleSlotChange=()=>{this.accordionItems=Array.from(this.host.querySelectorAll("bcm-accordion"));this.setGroupBehavior();if(this.accordionItems.length===0){console.warn("No accordion items found in accordion group")}}}async expandAll(){if(!this.multi){console.warn("expandAll is only available when multi=true");return}await Promise.all(this.accordionItems.map((o=>o.expand())))}async collapseAll(){await Promise.all(this.accordionItems.map((o=>o.collapse())))}async getExpandedItems(){return this.accordionItems.filter((o=>o.expanded))}componentWillLoad(){this.handleSlotChange()}setGroupBehavior(){this.accordionItems.forEach((o=>{o.group=true}))}handleAccordionChange(o){this.handleSlotChange();const{expanded:r,source:a}=o===null||o===void 0?void 0:o.detail;if(!this.multi){this.accordionItems.forEach((o=>{if(o!==a){o.collapse()}o.expanded=o===a?r:false}))}const e=this.accordionItems.filter((o=>o.expanded));this.bcmAccordionGroupChange.emit({expanded:r,changed:a,expandedItems:e,expandedCount:e.length})}render(){return a("div",{key:"dea0b42deb666d329a0c8ef2bb1aed31550d9e81",class:"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]",role:"group","aria-label":"Accordion group"},a("slot",{key:"6031d0b3a8c954fdb95436edc2684fafb5e8486b",onSlotchange:this.handleSlotChange}))}get host(){return e(this)}};s.style=i;export{s as bcm_accordion_group};
|
|
2
|
+
//# sourceMappingURL=p-ea6cdc17.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["accordionGroupCss","BcmAccordionGroupStyle0","BcmAccordionGroup","constructor","hostRef","this","multi","accordionItems","handleSlotChange","Array","from","host","querySelectorAll","setGroupBehavior","length","console","warn","expandAll","Promise","all","map","item","expand","collapseAll","collapse","getExpandedItems","filter","expanded","componentWillLoad","forEach","group","handleAccordionChange","event","source","detail","expandedItems","bcmAccordionGroupChange","emit","changed","expandedCount","render","h","key","class","role","onSlotchange"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n* <bcm-accordion>\n* <div slot=\"title\">Section 1</div>\n* <div>Content 1</div>\n* </bcm-accordion>\n* <bcm-accordion>\n* <div slot=\"title\">Section 2</div>\n* <div>Content 2</div>\n* </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n* <bcm-accordion>...</bcm-accordion>\n* <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n* const { expanded, changed, expandedItems, expandedCount } = event.detail;\n* console.log('Accordion expanded state:', expanded);\n* console.log('Changed accordion:', changed);\n* console.log('Currently expanded accordions:', expandedItems);\n* console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll(); // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n tag: 'bcm-accordion-group',\n styleUrl: 'accordion-group.css',\n shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /** Controls whether multiple accordions can be expanded simultaneously */\n @Prop() multi: boolean = false;\n\n /** Array of accordion elements within the group */\n @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n /** Event emitted when any accordion's expanded state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n /**\n * Expands all accordions in the group\n * Only available when multi=true\n */\n @Method()\n async expandAll(): Promise<void> {\n if (!this.multi) {\n console.warn('expandAll is only available when multi=true');\n return;\n }\n await Promise.all(this.accordionItems.map(item => item.expand()));\n }\n\n /**\n * Collapses all accordions in the group\n */\n @Method()\n async collapseAll(): Promise<void> {\n await Promise.all(this.accordionItems.map(item => item.collapse()));\n }\n\n /**\n * Returns an array of currently expanded accordion elements\n */\n @Method()\n async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n return this.accordionItems.filter(item => item.expanded);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n\n private setGroupBehavior(): void {\n this.accordionItems.forEach(item => {\n item.group = true;\n });\n }\n\n /**\n * Updates the accordion items array when slot content changes\n */\n private handleSlotChange = () => {\n this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n this.setGroupBehavior();\n // Validate accordion items\n if (this.accordionItems.length === 0) {\n console.warn('No accordion items found in accordion group');\n }\n };\n\n /**\n * Handles state changes of individual accordions\n */\n @Listen('bcmAccordionChange', { capture: true })\n handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n this.handleSlotChange();\n const { expanded, source } = event?.detail;\n\n if (!this.multi) {\n this.accordionItems.forEach(item => {\n if (item !== source) {\n item.collapse();\n }\n item.expanded = item === source ? expanded : false;\n });\n }\n\n const expandedItems = this.accordionItems.filter(item => item.expanded);\n this.bcmAccordionGroupChange.emit({\n expanded,\n changed: source,\n expandedItems,\n expandedCount: expandedItems.length,\n });\n }\n\n render() {\n return (\n <div\n class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n role=\"group\"\n aria-label=\"Accordion group\"\n >\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n );\n }\n}"],"mappings":"yDAAA,MAAMA,EAAoB,
|
|
1
|
+
{"version":3,"names":["accordionGroupCss","BcmAccordionGroupStyle0","BcmAccordionGroup","constructor","hostRef","this","multi","accordionItems","handleSlotChange","Array","from","host","querySelectorAll","setGroupBehavior","length","console","warn","expandAll","Promise","all","map","item","expand","collapseAll","collapse","getExpandedItems","filter","expanded","componentWillLoad","forEach","group","handleAccordionChange","event","source","detail","expandedItems","bcmAccordionGroupChange","emit","changed","expandedCount","render","h","key","class","role","onSlotchange"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n* <bcm-accordion>\n* <div slot=\"title\">Section 1</div>\n* <div>Content 1</div>\n* </bcm-accordion>\n* <bcm-accordion>\n* <div slot=\"title\">Section 2</div>\n* <div>Content 2</div>\n* </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n* <bcm-accordion>...</bcm-accordion>\n* <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n* const { expanded, changed, expandedItems, expandedCount } = event.detail;\n* console.log('Accordion expanded state:', expanded);\n* console.log('Changed accordion:', changed);\n* console.log('Currently expanded accordions:', expandedItems);\n* console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll(); // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n tag: 'bcm-accordion-group',\n styleUrl: 'accordion-group.css',\n shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /** Controls whether multiple accordions can be expanded simultaneously */\n @Prop() multi: boolean = false;\n\n /** Array of accordion elements within the group */\n @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n /** Event emitted when any accordion's expanded state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n /**\n * Expands all accordions in the group\n * Only available when multi=true\n */\n @Method()\n async expandAll(): Promise<void> {\n if (!this.multi) {\n console.warn('expandAll is only available when multi=true');\n return;\n }\n await Promise.all(this.accordionItems.map(item => item.expand()));\n }\n\n /**\n * Collapses all accordions in the group\n */\n @Method()\n async collapseAll(): Promise<void> {\n await Promise.all(this.accordionItems.map(item => item.collapse()));\n }\n\n /**\n * Returns an array of currently expanded accordion elements\n */\n @Method()\n async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n return this.accordionItems.filter(item => item.expanded);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n\n private setGroupBehavior(): void {\n this.accordionItems.forEach(item => {\n item.group = true;\n });\n }\n\n /**\n * Updates the accordion items array when slot content changes\n */\n private handleSlotChange = () => {\n this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n this.setGroupBehavior();\n // Validate accordion items\n if (this.accordionItems.length === 0) {\n console.warn('No accordion items found in accordion group');\n }\n };\n\n /**\n * Handles state changes of individual accordions\n */\n @Listen('bcmAccordionChange', { capture: true })\n handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n this.handleSlotChange();\n const { expanded, source } = event?.detail;\n\n if (!this.multi) {\n this.accordionItems.forEach(item => {\n if (item !== source) {\n item.collapse();\n }\n item.expanded = item === source ? expanded : false;\n });\n }\n\n const expandedItems = this.accordionItems.filter(item => item.expanded);\n this.bcmAccordionGroupChange.emit({\n expanded,\n changed: source,\n expandedItems,\n expandedCount: expandedItems.length,\n });\n }\n\n render() {\n return (\n <div\n class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n role=\"group\"\n aria-label=\"Accordion group\"\n >\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n );\n }\n}"],"mappings":"yDAAA,MAAMA,EAAoB,w9BAC1B,MAAAC,EAAeD,E,MCmEFE,EAAiB,MAL9B,WAAAC,CAAAC,G,2EAUYC,KAAAC,MAAiB,MAGhBD,KAAAE,eAA4C,GAoD7CF,KAAAG,iBAAmB,KACvBH,KAAKE,eAAiBE,MAAMC,KAAKL,KAAKM,KAAKC,iBAAiB,kBAC5DP,KAAKQ,mBAEL,GAAIR,KAAKE,eAAeO,SAAW,EAAG,CAClCC,QAAQC,KAAK,8C,GA3CrB,eAAMC,GACF,IAAKZ,KAAKC,MAAO,CACbS,QAAQC,KAAK,+CACb,M,OAEEE,QAAQC,IAAId,KAAKE,eAAea,KAAIC,GAAQA,EAAKC,W,CAO3D,iBAAMC,SACIL,QAAQC,IAAId,KAAKE,eAAea,KAAIC,GAAQA,EAAKG,a,CAO3D,sBAAMC,GACF,OAAOpB,KAAKE,eAAemB,QAAOL,GAAQA,EAAKM,U,CAGnD,iBAAAC,GACIvB,KAAKG,kB,CAID,gBAAAK,GACJR,KAAKE,eAAesB,SAAQR,IACxBA,EAAKS,MAAQ,IAAI,G,CAoBzB,qBAAAC,CAAsBC,GAClB3B,KAAKG,mBACL,MAAMmB,SAAEA,EAAQM,OAAEA,GAAWD,IAAK,MAALA,SAAK,SAALA,EAAOE,OAEpC,IAAK7B,KAAKC,MAAO,CACbD,KAAKE,eAAesB,SAAQR,IACxB,GAAIA,IAASY,EAAQ,CACjBZ,EAAKG,U,CAETH,EAAKM,SAAWN,IAASY,EAASN,EAAW,KAAK,G,CAI1D,MAAMQ,EAAgB9B,KAAKE,eAAemB,QAAOL,GAAQA,EAAKM,WAC9DtB,KAAK+B,wBAAwBC,KAAK,CAC9BV,WACAW,QAASL,EACTE,gBACAI,cAAeJ,EAAcrB,Q,CAIrC,MAAA0B,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,2HACNC,KAAK,QAAO,aACD,mBAEXH,EAAA,QAAAC,IAAA,2CAAMG,aAAcxC,KAAKG,mB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as r,g as i}from"./p-c9b736d9.js";import{c as o}from"./p-5fcf77f9.js";import{c as s}from"./p-12360e4c.js";import{g as a}from"./p-ba2410ef.js";import{s as l,g as n,d as c}from"./p-13a245f6.js";const h=(e,t)=>{var r;const i=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(`slot[name="${t}"]`);if(!i)return false;const o=i.assignedNodes();return o.length>0};const d='.visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.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}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}';const b=d;const u=class{constructor(i){e(this,i);this.bcmInput=t(this,"bcmInput",1);this.bcmChange=t(this,"bcmChange",1);this.bcmFocus=t(this,"bcmFocus",1);this.bcmBlur=t(this,"bcmBlur",1);this.bcmKeyDown=t(this,"bcmKeyDown",1);this.bcmKeyUp=t(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.isPasswordVisible=false;this.value="";this._id=a("input");this.size="medium";this.status="default";this.fullWidth=false;this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.useNativeValidation=true;this.onInput=e=>{const t=e.target;this.value=t.value;this.bcmInput.emit(e);this.validateInput()};this.onChange=e=>{this.bcmChange.emit(e)};this.onFocus=e=>{this.isFocused=true;this.bcmFocus.emit(e)};this.onBlur=e=>{this.isFocused=false;this.bcmBlur.emit(e);this.validateInput()};this.onKeyDown=e=>{this.bcmKeyDown.emit(e)};this.onKeyUp=e=>{this.bcmKeyUp.emit(e)};this.styleClass=o({slots:{base:["bcm-input bcm-input__container","bg-[--bcm-ui-color-background-base-default]","text-[--bcm-ui-color-text-default]","border border-solid rounded","flex items-center justify-between","transition-colors duration-200","px-2"],inputClass:["input","w-full flex-1","border-0 outline-0 bg-transparent","appearance-none text-ellipsis","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"]},variants:{size:{small:{base:"",inputClass:"text-size-4 h-6"},medium:{base:"",inputClass:"text-size-5 h-8"},large:{base:"",inputClass:"text-size-6 h-10"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed",false:""},focused:{true:{base:""}}},defaultVariants:{size:"medium",status:"default",fullWidth:false,disabled:false,focused:false}},{twMerge:false});this.togglePasswordVisibility=()=>{this.isPasswordVisible=!this.isPasswordVisible;this.inputRef.type=this.isPasswordVisible?"text":"password"};this.PasswordToggleButton=()=>{var e;if(this.type!=="password"||this.disabled||this.readonly||((e=this.value)===null||e===void 0?void 0:e.length)===0)return null;return r("button",{class:"appearance-none flex items-center w-6 h-full justify-center",onClick:this.togglePasswordVisibility,type:"button"},r("bcm-icon",{name:this.isPasswordVisible?"fa-eye-slash fa-regular":"fa-regular fa-eye",size:this.iconSize}))};this.iconSize={small:14,medium:16,large:18}[this.size]}handleValueChange(e){if(this.inputRef){this.inputRef.value=e}}watchStatus(e){this.internalStatus=e}watchErrorMessage(e){this.internalErrorMessage=e}async setFocus(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.focus()}async setBlur(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.blur()}async select(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.select()}async setLocale(e,t){l(e,t);if(!this.isValid){this.validateInput()}}componentWillLoad(){l("en",c);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}validateInput(){if(!this.inputRef)return;this.isValid=true;this.validationMessage="";const e=this.inputRef.value;if(this.required&&!e){this.isValid=false;this.validationMessage=n("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}else if(this.minLength&&e.length<this.minLength){this.isValid=false;this.validationMessage=n("minlength",{min:this.minLength})}else if(this.maxLength&&e.length>this.maxLength){this.isValid=false;this.validationMessage=n("maxlength",{max:this.maxLength})}else if(this.pattern&&!new RegExp(this.pattern).test(e)){this.isValid=false;this.validationMessage=n("pattern")}else if(this.type==="email"&&e&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)){this.isValid=false;this.validationMessage=n("email")}else if(this.type==="number"&&e){const t=parseFloat(e);if(this.min!==undefined&&t<this.min){this.isValid=false;this.validationMessage=n("min",{min:this.min})}else if(this.max!==undefined&&t>this.max){this.isValid=false;this.validationMessage=n("max",{max:this.max})}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}hasSlotContent(e){return h(this.el,e)}getDefaultIconForType(){return}render(){const e=this._id+"-input"||this.name;const{base:t,inputClass:i}=this.styleClass({size:this.size,status:this.internalStatus,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return r("div",{key:"2ffb8fb2258052afb9a1be11c412f7ec2a77674a",class:"bcm-ui-element"},this.label&&r("label",{key:"077c5815c06b749f8e65f05c0d71da7dec1350a9",class:s("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:e},r("slot",{key:"7642829eb05ddbb9144a46f635c96bdf1c9ec826",name:"label"},this.label),this.required&&r("span",{key:"37e63e0fca75c432750797617ecdca1ef400365d"},"*")),r("div",{key:"6db34371d3c3694d9bfd9b5f7660bda0c381c27d",class:t()},(this.hasSlotContent("prefix")||this.prefixIcon||this.getDefaultIconForType())&&r("div",{key:"1fe5041c83183798eb81f895e7e8eb4c1f487e77",class:"flex items-center gap-2 px-2"},(this.prefixIcon||this.getDefaultIconForType())&&r("bcm-icon",{key:"adf3a9c5517b8ea547b8758612cad7bae3f1ce06",class:"prefix-icon","icon-name":this.prefixIcon||this.getDefaultIconForType(),size:this.iconSize}),r("slot",{key:"827685ff7970556c419da213816a3fd7170d5412",name:"prefix"})),r("input",{key:"620916eef85c0491c7ce8c315ed30c4509452008",ref:e=>this.inputRef=e,id:e,class:i(),type:this.type,name:this.name,disabled:this.disabled,readonly:this.readonly,required:this.required,placeholder:this.placeholder,autocomplete:this.autocomplete,minlength:this.minLength,maxlength:this.maxLength,min:this.min,max:this.max,step:this.step,pattern:this.pattern,"aria-invalid":this.status==="error","aria-required":this.required,"aria-labelledby":this.labelledby,"aria-describedby":this.describedby,value:this.value,onInput:this.onInput,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),(this.hasSlotContent("suffix")||this.suffixIcon)&&r("div",{key:"d4a6920200111d0c93719750db59f49c7e32e171",class:"flex items-center gap-2 px-2"},r("slot",{key:"4d3879324fc478fef659acd21eefaefe5b2c9b9e",name:"suffix"}),this.suffixIcon&&r("bcm-icon",{key:"04ffae44189d3a0bc20e08bc1759c318d8552a06",class:"suffix-icon","icon-name":this.suffixIcon,size:this.iconSize})),this.PasswordToggleButton()),(this.captionText||this.internalErrorMessage||this.validationMessage)&&r("div",{key:"81e317ab588b7bf2de6e19145d81665c1e4331fd",class:s("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return i(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};u.style=b;export{u as bcm_input};
|
|
2
|
+
//# sourceMappingURL=p-edfa3b52.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["checkSlotContent","element","slotName","slot","_a","shadowRoot","querySelector","assignedNodes","length","inputCss","BcmInputStyle0","BcmInput","constructor","hostRef","this","isFocused","isValid","internalStatus","isPasswordVisible","value","_id","generateId","size","status","fullWidth","type","disabled","readonly","required","useNativeValidation","onInput","event","input","target","bcmInput","emit","validateInput","onChange","bcmChange","onFocus","bcmFocus","onBlur","bcmBlur","onKeyDown","bcmKeyDown","onKeyUp","bcmKeyUp","styleClass","tv","slots","base","inputClass","variants","small","medium","large","default","error","success","warning","info","true","false","focused","defaultVariants","twMerge","togglePasswordVisibility","inputRef","PasswordToggleButton","h","class","onClick","name","iconSize","handleValueChange","newValue","watchStatus","watchErrorMessage","internalErrorMessage","setFocus","focus","setBlur","blur","select","setLocale","locale","messages","setValidationMessages","componentWillLoad","defaultValidationMessages","errorMessage","validationMessage","getValidationMessage","minLength","min","maxLength","max","pattern","RegExp","test","numValue","parseFloat","undefined","hasSlotContent","el","getDefaultIconForType","render","inputId","key","label","classNames","htmlFor","prefixIcon","ref","id","placeholder","autocomplete","minlength","maxlength","step","labelledby","describedby","suffixIcon","captionText"],"sources":["src/utils/slot/check-slot-content.ts","src/components/input/input.scss?tag=bcm-input&encapsulation=shadow","src/components/input/input.component.tsx"],"sourcesContent":["/**\n * Checks if a named slot has any content\n * @param element - The host element (component instance)\n * @param slotName - Name of the slot to check\n * @returns boolean indicating if the slot has any assigned nodes\n */\nexport const checkSlotContent = (element: HTMLElement, slotName: string): boolean => {\n const slot = element.shadowRoot?.querySelector(`slot[name=\"${slotName}\"]`) as HTMLSlotElement;\n if (!slot) return false;\n\n const assignedNodes = slot.assignedNodes();\n return assignedNodes.length > 0;\n};\n",":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-input',\n styleUrl: 'input.scss',\n shadow: true,\n})\nexport class BcmInput {\n @Element() el: HTMLElement;\n private inputRef: HTMLInputElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n @State() isPasswordVisible = false;\n\n /** Input value */\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /** Input placeholder text */\n @Prop()\n placeholder?: string;\n\n /** Input name */\n @Prop()\n name?: string;\n\n /** Input id */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('input');\n\n /** Controls the input size */\n @Prop()\n size: InputSize = 'medium';\n\n /** Defines the input's status/state */\n @Prop()\n status: InputStatus = 'default';\n\n /** Full width input */\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /** HTML input type */\n @Prop()\n type: InputType = 'text';\n\n /** Whether the input is disabled */\n @Prop()\n disabled = false;\n\n /** Whether the input is readonly */\n @Prop()\n readonly = false;\n\n /** Whether the input is required */\n @Prop()\n required = false;\n\n /** Input autocomplete attribute */\n @Prop()\n autocomplete?: string;\n\n /** Min length for text input */\n @Prop()\n minLength?: number;\n\n /** Max length for text input */\n @Prop()\n maxLength?: number;\n\n /** Min value for number input */\n @Prop()\n min?: number;\n\n /** Max value for number input */\n @Prop()\n max?: number;\n\n /** Step value for number input */\n @Prop()\n step?: number;\n\n /** Pattern for validation */\n @Prop()\n pattern?: string;\n\n /** Input label for accessibility */\n @Prop()\n label?: string;\n\n /** Error message to display */\n @Prop()\n errorMessage?: string;\n\n /** Caption text to display below input */\n @Prop()\n captionText?: string;\n\n /** ID of associated label element */\n @Prop()\n labelledby?: string;\n\n /** ID of associated caption/error text element */\n @Prop()\n describedby?: string;\n\n /** Prefix icon class name */\n @Prop()\n prefixIcon?: string;\n\n /** Suffix icon class name */\n @Prop()\n suffixIcon?: string;\n\n /** Whether to use native form validation\n * If false, component will handle validation internally\n */\n @Prop()\n useNativeValidation = true;\n\n /** Custom validation function */\n @Prop()\n validator?: (value: string) => string | undefined;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmInput: EventEmitter<InputEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<Event>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n if (this.inputRef) {\n this.inputRef.value = newValue;\n }\n }\n\n @Watch('status')\n watchStatus(newValue: InputStatus) {\n this.internalStatus = newValue;\n }\n\n @Watch('errorMessage')\n watchErrorMessage(newValue: string) {\n this.internalErrorMessage = newValue;\n }\n\n @Method()\n async setFocus() {\n this.inputRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.inputRef?.blur();\n }\n\n @Method()\n async select() {\n this.inputRef?.select();\n }\n\n /** Sets locale and messages for all inputs */\n @Method()\n async setLocale(locale: string, messages: Record<string, string>) {\n // Set messages and update validation immediately\n setValidationMessages(locale, messages);\n\n // Mevcut validasyon mesajını güncelle\n if (!this.isValid) {\n this.validateInput();\n }\n }\n\n componentWillLoad() {\n // I18n için default mesajları set et\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n private validateInput(): void {\n if (!this.inputRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.inputRef.value;\n\n // Required check\n if (this.required && !value) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('required');\n this.internalStatus = 'error';\n this.internalErrorMessage = this.validationMessage;\n return;\n }\n\n // Minimum length check\n else if (this.minLength && value.length < this.minLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n }\n // Maximum length check\n else if (this.maxLength && value.length > this.maxLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n }\n // Pattern check\n else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('pattern');\n }\n // Email check\n else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('email');\n }\n // Number range check\n else if (this.type === 'number' && value) {\n const numValue = parseFloat(value);\n if (this.min !== undefined && numValue < this.min) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('min', { min: this.min });\n } else if (this.max !== undefined && numValue > this.max) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('max', { max: this.max });\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\n }\n\n private onInput = (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.bcmInput.emit(event);\n this.validateInput();\n };\n\n private onChange = (event: Event) => {\n this.bcmChange.emit(event);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.bcmFocus.emit(event);\n };\n\n private onBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.bcmBlur.emit(event);\n this.validateInput();\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n this.bcmKeyDown.emit(event);\n };\n\n private onKeyUp = (event: KeyboardEvent) => {\n this.bcmKeyUp.emit(event);\n };\n\n private hasSlotContent(slotName: string): boolean {\n return checkSlotContent(this.el, slotName);\n }\n\n private styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-input bcm-input__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'text-[--bcm-ui-color-text-default]',\n 'border border-solid rounded',\n 'flex items-center justify-between',\n 'transition-colors duration-200',\n 'px-2',\n ],\n inputClass: [\n 'input',\n 'w-full flex-1',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none text-ellipsis',\n 'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n 'font-sans antialiased font-medium',\n 'px-1',\n '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n ],\n },\n variants: {\n size: {\n small: {\n base: '',\n inputClass: 'text-size-4 h-6',\n },\n medium: {\n base: '',\n inputClass: 'text-size-5 h-8',\n },\n large: {\n base: '',\n inputClass: 'text-size-6 h-10',\n },\n },\n status: {\n default: {\n base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n },\n error: {\n base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n },\n success: {\n base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n },\n warning: {\n base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n },\n info: {\n base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n },\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed',\n false: '',\n },\n focused: {\n true: {\n base: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n private getDefaultIconForType(): string | undefined {\n return; // TODO: Will be implemented later\n // return defaultIcons[this.type as keyof typeof defaultIcons];\n }\n\n private togglePasswordVisibility = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';\n };\n\n private PasswordToggleButton = () => {\n if (this.type !== 'password' || this.disabled || this.readonly || this.value?.length === 0) return null;\n return (\n <button class=\"appearance-none flex items-center w-6 h-full justify-center\" onClick={this.togglePasswordVisibility} type=\"button\">\n <bcm-icon name={this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye'} size={this.iconSize}></bcm-icon>\n </button>\n );\n };\n\n private iconSize = {\n small: 14,\n medium: 16,\n large: 18,\n }[this.size];\n\n render() {\n const inputId = this._id + '-input' || this.name;\n\n const { base, inputClass } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n return (\n <div class=\"bcm-ui-element\">\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n htmlFor={inputId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span>*</span>}\n </label>\n )}\n\n <div class={base()}>\n {(this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (\n <div class=\"flex items-center gap-2 px-2\">\n {(this.prefixIcon || this.getDefaultIconForType()) && (\n <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon || this.getDefaultIconForType()} size={this.iconSize}></bcm-icon>\n )}\n <slot name=\"prefix\"></slot>\n </div>\n )}\n <input\n ref={el => (this.inputRef = el)}\n id={inputId}\n class={inputClass()}\n type={this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n autocomplete={this.autocomplete}\n minlength={this.minLength}\n maxlength={this.maxLength}\n min={this.min}\n max={this.max}\n step={this.step}\n pattern={this.pattern}\n aria-invalid={this.status === 'error'}\n aria-required={this.required}\n aria-labelledby={this.labelledby}\n aria-describedby={this.describedby}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {(this.hasSlotContent('suffix') || this.suffixIcon) && (\n <div class=\"flex items-center gap-2 px-2\">\n <slot name=\"suffix\"></slot>\n {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={this.iconSize}></bcm-icon>}\n </div>\n )}\n {/* {this.type === 'password' && this.value?.length > 0 && !this.disabled && ( \n // <bcm-icon\n // class=\"password-toggle-icon cursor-pointer\"\n // icon-name={this.isPasswordVisible ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'}\n // size={iconSize}\n // onClick={this.togglePasswordVisibility}\n // ></bcm-icon>\n // )}*/}\n {this.PasswordToggleButton()}\n </div>\n {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n 'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n 'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"uNAMO,MAAMA,EAAmB,CAACC,EAAsBC,K,MACrD,MAAMC,GAAOC,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAAc,cAAcJ,OAC7D,IAAKC,EAAM,OAAO,MAElB,MAAMI,EAAgBJ,EAAKI,gBAC3B,OAAOA,EAAcC,OAAS,CAAC,ECXjC,MAAMC,EAAW,qhPACjB,MAAAC,EAAeD,E,MCYFE,EAAQ,MALrB,WAAAC,CAAAC,G,gOASWC,KAAAC,UAAY,MAEZD,KAAAE,QAAU,KACVF,KAAAG,eAA8B,UAE9BH,KAAAI,kBAAoB,MAI7BJ,KAAAK,MAAgB,GAYhBL,KAAAM,IAAeC,EAAW,SAI1BP,KAAAQ,KAAkB,SAIlBR,KAAAS,OAAsB,UAItBT,KAAAU,UAAY,MAIZV,KAAAW,KAAkB,OAIlBX,KAAAY,SAAW,MAIXZ,KAAAa,SAAW,MAIXb,KAAAc,SAAW,MA8DXd,KAAAe,oBAAsB,KA0Jdf,KAAAgB,QAAWC,IACjB,MAAMC,EAAQD,EAAME,OACpBnB,KAAKK,MAAQa,EAAMb,MACnBL,KAAKoB,SAASC,KAAKJ,GACnBjB,KAAKsB,eAAe,EAGdtB,KAAAuB,SAAYN,IAClBjB,KAAKwB,UAAUH,KAAKJ,EAAM,EAGpBjB,KAAAyB,QAAWR,IACjBjB,KAAKC,UAAY,KACjBD,KAAK0B,SAASL,KAAKJ,EAAM,EAGnBjB,KAAA2B,OAAUV,IAChBjB,KAAKC,UAAY,MACjBD,KAAK4B,QAAQP,KAAKJ,GAClBjB,KAAKsB,eAAe,EAGdtB,KAAA6B,UAAaZ,IACnBjB,KAAK8B,WAAWT,KAAKJ,EAAM,EAGrBjB,KAAA+B,QAAWd,IACjBjB,KAAKgC,SAASX,KAAKJ,EAAM,EAOnBjB,KAAAiC,WAAaC,EACnB,CACEC,MAAO,CACLC,KAAM,CACJ,iCACA,8CACA,qCACA,8BACA,oCACA,iCACA,QAEFC,WAAY,CACV,QACA,gBACA,oCACA,gCACA,gHACA,oCACA,OACA,wHAGJC,SAAU,CACR9B,KAAM,CACJ+B,MAAO,CACLH,KAAM,GACNC,WAAY,oBAEdG,OAAQ,CACNJ,KAAM,GACNC,WAAY,oBAEdI,MAAO,CACLL,KAAM,GACNC,WAAY,sBAGhB5B,OAAQ,CACNiC,QAAS,CACPN,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGO,MAAO,CACLP,KAAM,CAAC,uCAAwC,6CAA8C,sDAE/FQ,QAAS,CACPR,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGS,QAAS,CACPT,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGU,KAAM,CACJV,KAAM,CAAC,sCAAuC,4CAA6C,sDAG/F1B,UAAW,CACTqC,KAAM,qBAERnC,SAAU,CACRmC,KAAM,8BACNC,MAAO,IAETC,QAAS,CACPF,KAAM,CACJX,KAAM,MAIZc,gBAAiB,CACf1C,KAAM,SACNC,OAAQ,UACRC,UAAW,MACXE,SAAU,MACVqC,QAAS,QAGb,CACEE,QAAS,QASLnD,KAAAoD,yBAA2B,KACjCpD,KAAKI,mBAAqBJ,KAAKI,kBAC/BJ,KAAKqD,SAAS1C,KAAOX,KAAKI,kBAAoB,OAAS,UAAU,EAG3DJ,KAAAsD,qBAAuB,K,MAC7B,GAAItD,KAAKW,OAAS,YAAcX,KAAKY,UAAYZ,KAAKa,YAAYvB,EAAAU,KAAKK,SAAK,MAAAf,SAAA,SAAAA,EAAEI,UAAW,EAAG,OAAO,KACnG,OACE6D,EAAA,UAAQC,MAAM,8DAA8DC,QAASzD,KAAKoD,yBAA0BzC,KAAK,UACvH4C,EAAA,YAAUG,KAAM1D,KAAKI,kBAAoB,0BAA4B,oBAAqBI,KAAMR,KAAK2D,WAC9F,EAIL3D,KAAA2D,SAAW,CACjBpB,MAAO,GACPC,OAAQ,GACRC,MAAO,IACPzC,KAAKQ,K,CAnPP,iBAAAoD,CAAkBC,GAChB,GAAI7D,KAAKqD,SAAU,CACjBrD,KAAKqD,SAAShD,MAAQwD,C,EAK1B,WAAAC,CAAYD,GACV7D,KAAKG,eAAiB0D,C,CAIxB,iBAAAE,CAAkBF,GAChB7D,KAAKgE,qBAAuBH,C,CAI9B,cAAMI,G,OACJ3E,EAAAU,KAAKqD,YAAQ,MAAA/D,SAAA,SAAAA,EAAE4E,O,CAIjB,aAAMC,G,OACJ7E,EAAAU,KAAKqD,YAAQ,MAAA/D,SAAA,SAAAA,EAAE8E,M,CAIjB,YAAMC,G,OACJ/E,EAAAU,KAAKqD,YAAQ,MAAA/D,SAAA,SAAAA,EAAE+E,Q,CAKjB,eAAMC,CAAUC,EAAgBC,GAE9BC,EAAsBF,EAAQC,GAG9B,IAAKxE,KAAKE,QAAS,CACjBF,KAAKsB,e,EAIT,iBAAAoD,GAEED,EAAsB,KAAME,GAC5B3E,KAAKG,eAAiBH,KAAKS,OAC3BT,KAAKgE,qBAAuBhE,KAAK4E,Y,CAG3B,aAAAtD,GACN,IAAKtB,KAAKqD,SAAU,OAGpBrD,KAAKE,QAAU,KACfF,KAAK6E,kBAAoB,GAEzB,MAAMxE,EAAQL,KAAKqD,SAAShD,MAG5B,GAAIL,KAAKc,WAAaT,EAAO,CAC3BL,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,YAC9C9E,KAAKG,eAAiB,QACtBH,KAAKgE,qBAAuBhE,KAAK6E,kBACjC,M,MAIG,GAAI7E,KAAK+E,WAAa1E,EAAMX,OAASM,KAAK+E,UAAW,CACxD/E,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,YAAa,CAAEE,IAAKhF,KAAK+E,W,MAGpE,GAAI/E,KAAKiF,WAAa5E,EAAMX,OAASM,KAAKiF,UAAW,CACxDjF,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,YAAa,CAAEI,IAAKlF,KAAKiF,W,MAGpE,GAAIjF,KAAKmF,UAAY,IAAIC,OAAOpF,KAAKmF,SAASE,KAAKhF,GAAQ,CAC9DL,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,U,MAG3C,GAAI9E,KAAKW,OAAS,SAAWN,IAAU,6BAA6BgF,KAAKhF,GAAQ,CACpFL,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,Q,MAG3C,GAAI9E,KAAKW,OAAS,UAAYN,EAAO,CACxC,MAAMiF,EAAWC,WAAWlF,GAC5B,GAAIL,KAAKgF,MAAQQ,WAAaF,EAAWtF,KAAKgF,IAAK,CACjDhF,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,MAAO,CAAEE,IAAKhF,KAAKgF,K,MAC5D,GAAIhF,KAAKkF,MAAQM,WAAaF,EAAWtF,KAAKkF,IAAK,CACxDlF,KAAKE,QAAU,MACfF,KAAK6E,kBAAoBC,EAAqB,MAAO,CAAEI,IAAKlF,KAAKkF,K,EAKrElF,KAAKG,eAAiBH,KAAKE,QAAU,UAAY,QACjDF,KAAKgE,qBAAuBhE,KAAK6E,iB,CAiC3B,cAAAY,CAAerG,GACrB,OAAOF,EAAiBc,KAAK0F,GAAItG,E,CAoF3B,qBAAAuG,GACN,M,CAwBF,MAAAC,GACE,MAAMC,EAAU7F,KAAKM,IAAM,UAAYN,KAAK0D,KAE5C,MAAMtB,KAAEA,EAAIC,WAAEA,GAAerC,KAAKiC,WAAW,CAC3CzB,KAAMR,KAAKQ,KACXC,OAAQT,KAAKG,eACbO,UAAWV,KAAKU,UAChBE,SAAUZ,KAAKY,SACfqC,QAASjD,KAAKC,YAGhB,OACEsD,EAAA,OAAAuC,IAAA,2CAAKtC,MAAM,kBACRxD,KAAK+F,OACJxC,EAAA,SAAAuC,IAAA,2CACEtC,MAAOwC,EACL,0BACA,CACE,oBAAqBhG,KAAKY,SAC1B,sBAAuBZ,KAAKY,UAE9B,CACE,cAAeZ,KAAKQ,OAAS,QAC7B,cAAeR,KAAKQ,OAAS,SAC7B,cAAeR,KAAKQ,OAAS,UAGjCyF,QAASJ,GAETtC,EAAA,QAAAuC,IAAA,2CAAMpC,KAAK,SAAS1D,KAAK+F,OACxB/F,KAAKc,UAAYyC,EAAA,QAAAuC,IAAA,kDAItBvC,EAAA,OAAAuC,IAAA,2CAAKtC,MAAOpB,MACRpC,KAAKyF,eAAe,WAAazF,KAAKkG,YAAclG,KAAK2F,0BACzDpC,EAAA,OAAAuC,IAAA,2CAAKtC,MAAM,iCACPxD,KAAKkG,YAAclG,KAAK2F,0BACxBpC,EAAA,YAAAuC,IAAA,2CAAUtC,MAAM,cAAa,YAAYxD,KAAKkG,YAAclG,KAAK2F,wBAAyBnF,KAAMR,KAAK2D,WAEvGJ,EAAA,QAAAuC,IAAA,2CAAMpC,KAAK,YAGfH,EAAA,SAAAuC,IAAA,2CACEK,IAAKT,GAAO1F,KAAKqD,SAAWqC,EAC5BU,GAAIP,EACJrC,MAAOnB,IACP1B,KAAMX,KAAKW,KACX+C,KAAM1D,KAAK0D,KACX9C,SAAUZ,KAAKY,SACfC,SAAUb,KAAKa,SACfC,SAAUd,KAAKc,SACfuF,YAAarG,KAAKqG,YAClBC,aAActG,KAAKsG,aACnBC,UAAWvG,KAAK+E,UAChByB,UAAWxG,KAAKiF,UAChBD,IAAKhF,KAAKgF,IACVE,IAAKlF,KAAKkF,IACVuB,KAAMzG,KAAKyG,KACXtB,QAASnF,KAAKmF,QAAO,eACPnF,KAAKS,SAAW,QAAO,gBACtBT,KAAKc,SAAQ,kBACXd,KAAK0G,WAAU,mBACd1G,KAAK2G,YACvBtG,MAAOL,KAAKK,MACZW,QAAShB,KAAKgB,QACdO,SAAUvB,KAAKuB,SACfE,QAASzB,KAAKyB,QACdE,OAAQ3B,KAAK2B,OACbE,UAAW7B,KAAK6B,UAChBE,QAAS/B,KAAK+B,WAEd/B,KAAKyF,eAAe,WAAazF,KAAK4G,aACtCrD,EAAA,OAAAuC,IAAA,2CAAKtC,MAAM,gCACTD,EAAA,QAAAuC,IAAA,2CAAMpC,KAAK,WACV1D,KAAK4G,YAAcrD,EAAA,YAAAuC,IAAA,2CAAUtC,MAAM,cAAa,YAAYxD,KAAK4G,WAAYpG,KAAMR,KAAK2D,YAW5F3D,KAAKsD,yBAENtD,KAAK6G,aAAe7G,KAAKgE,sBAAwBhE,KAAK6E,oBACtDtB,EAAA,OAAAuC,IAAA,2CACEtC,MAAOwC,EACL,uCACA,CACE,sCAAuChG,KAAKY,UAAYZ,KAAKG,iBAAmB,UAChF,oCAAqCH,KAAKY,WAAaZ,KAAKG,iBAAmB,UAAYH,KAAKE,SAChG,sCAAuCF,KAAKY,UAAYZ,KAAKG,iBAAmB,UAChF,sCAAuCH,KAAKY,UAAYZ,KAAKG,iBAAmB,UAChF,mCAAoCH,KAAKY,UAAYZ,KAAKG,iBAAmB,OAC7E,sCAAuCH,KAAKY,UAE9C,CACE,cAAeZ,KAAKQ,OAAS,QAC7B,cAAeR,KAAKQ,OAAS,SAC7B,cAAeR,KAAKQ,OAAS,YAI/BR,KAAKE,QAAUF,KAAK6E,kBAAoB7E,KAAKG,iBAAmB,QAAUH,KAAKgE,qBAAuBhE,KAAK6G,a","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"app-globals-e0eef2e9.js","mappings":";;AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,IAAI,WAAW,GAAG;;AAElB,QAAQ,MAAM,MAAM;AACpB,QAAQ;AACR;AACA;AACA,MAAM,CAAC,CAAC;AACR,KAAK;AACL,IAAI,WAAW;AACf,QAAQ,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AACrC,KAAK;AACL,IAAI;AACJ;;AAEA,SAAS;AACT,KAAK;AACL,IAAI;;AAEJ,KAAK;AACL,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,QAAQ,IAAI,CAAC,UAAU,CAAC;AACxB,KAAK;AACL,IAAI;;AAEJ,QAAQ,IAAI,CAAC;AACb,KAAK;AACL,CAAC,CAAC,CAAC;;;ACpCS,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n const head = document.head;\n const script = document.createElement('script');\n Object.keys(obj).forEach(key => {\n script[key] = obj[key];\n });\n head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n 'bcm-icon',\n class extends HTMLElement {\n constructor() {\n super();\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n <i></i>\n `;\n }\n\n static get observedAttributes() {\n return ['name', 'icon-name'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if ((name === 'name' || name === 'icon-name') && oldValue !== newValue) {\n this.icon = newValue;\n }\n }\n\n get icon() {\n return this.getAttribute('name') || this.getAttribute('icon-name');\n }\n\n set icon(icon) {\n this.shadowRoot.querySelector('i').className = `${icon}`;\n }\n\n connectedCallback() {\n this.style.display = 'inline-block';\n this.icon = this.icon;\n }\n },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
|
|
1
|
+
{"file":"app-globals-e0eef2e9.js","mappings":";;AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,IAAI,WAAW,GAAG;;AAElB,QAAQ,MAAM,MAAM;AACpB,QAAQ;AACR;AACA;AACA,MAAM,CAAC,CAAC;AACR,KAAK;AACL,IAAI,WAAW;AACf,QAAQ,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AACrC,KAAK;AACL,IAAI;AACJ;;AAEA,SAAS;AACT,KAAK;AACL,IAAI;;AAEJ,KAAK;AACL,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,QAAQ,IAAI,CAAC,UAAU,CAAC;AACxB,KAAK;AACL,IAAI;;AAEJ,QAAQ,IAAI,CAAC;AACb,KAAK;AACL,CAAC,CAAC,CAAC;;;ACpCS,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n const head = document.head;\n const script = document.createElement('script');\n Object.keys(obj).forEach(key => {\n script[key] = obj[key];\n });\n head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n 'bcm-icon',\n class extends HTMLElement {\n constructor() {\n super();\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n <i></i>\n `;\n }\n\n static get observedAttributes() {\n return ['name', 'icon-name'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if ((name === 'name' || name === 'icon-name') && oldValue !== newValue) {\n this.icon = newValue;\n }\n }\n\n get icon() {\n return this.getAttribute('name') || this.getAttribute('icon-name');\n }\n\n set icon(icon) {\n this.shadowRoot.querySelector('i').className = `${icon}`;\n }\n\n connectedCallback() {\n this.style.display = 'inline-block';\n this.icon = this.icon;\n }\n },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/ui-team/next/bromcom-ui-v2/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-9a2c5938.js');
|
|
6
6
|
|
|
7
|
-
const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
|
|
7
|
+
const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
|
|
8
8
|
const BcmAccordionGroupStyle0 = accordionGroupCss;
|
|
9
9
|
|
|
10
10
|
const BcmAccordionGroup = class {
|
|
@@ -81,7 +81,7 @@ const BcmAccordionGroup = class {
|
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
render() {
|
|
84
|
-
return (index.h("div", { key: '
|
|
84
|
+
return (index.h("div", { key: 'dea0b42deb666d329a0c8ef2bb1aed31550d9e81', class: "flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]", role: "group", "aria-label": "Accordion group" }, index.h("slot", { key: '6031d0b3a8c954fdb95436edc2684fafb5e8486b', onSlotchange: this.handleSlotChange })));
|
|
85
85
|
}
|
|
86
86
|
get host() { return index.getElement(this); }
|
|
87
87
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-accordion-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG
|
|
1
|
+
{"file":"bcm-accordion-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B,CAAC;AACl/B,gCAAe,iBAAiB;;MCmEnB,iBAAiB;IAL9B;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACIA,kEACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5BA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;","names":["h"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n* <bcm-accordion>\n* <div slot=\"title\">Section 1</div>\n* <div>Content 1</div>\n* </bcm-accordion>\n* <bcm-accordion>\n* <div slot=\"title\">Section 2</div>\n* <div>Content 2</div>\n* </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n* <bcm-accordion>...</bcm-accordion>\n* <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n* const { expanded, changed, expandedItems, expandedCount } = event.detail;\n* console.log('Accordion expanded state:', expanded);\n* console.log('Changed accordion:', changed);\n* console.log('Currently expanded accordions:', expandedItems);\n* console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll(); // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n tag: 'bcm-accordion-group',\n styleUrl: 'accordion-group.css',\n shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /** Controls whether multiple accordions can be expanded simultaneously */\n @Prop() multi: boolean = false;\n\n /** Array of accordion elements within the group */\n @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n /** Event emitted when any accordion's expanded state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n /**\n * Expands all accordions in the group\n * Only available when multi=true\n */\n @Method()\n async expandAll(): Promise<void> {\n if (!this.multi) {\n console.warn('expandAll is only available when multi=true');\n return;\n }\n await Promise.all(this.accordionItems.map(item => item.expand()));\n }\n\n /**\n * Collapses all accordions in the group\n */\n @Method()\n async collapseAll(): Promise<void> {\n await Promise.all(this.accordionItems.map(item => item.collapse()));\n }\n\n /**\n * Returns an array of currently expanded accordion elements\n */\n @Method()\n async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n return this.accordionItems.filter(item => item.expanded);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n\n private setGroupBehavior(): void {\n this.accordionItems.forEach(item => {\n item.group = true;\n });\n }\n\n /**\n * Updates the accordion items array when slot content changes\n */\n private handleSlotChange = () => {\n this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n this.setGroupBehavior();\n // Validate accordion items\n if (this.accordionItems.length === 0) {\n console.warn('No accordion items found in accordion group');\n }\n };\n\n /**\n * Handles state changes of individual accordions\n */\n @Listen('bcmAccordionChange', { capture: true })\n handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n this.handleSlotChange();\n const { expanded, source } = event?.detail;\n\n if (!this.multi) {\n this.accordionItems.forEach(item => {\n if (item !== source) {\n item.collapse();\n }\n item.expanded = item === source ? expanded : false;\n });\n }\n\n const expandedItems = this.accordionItems.filter(item => item.expanded);\n this.bcmAccordionGroupChange.emit({\n expanded,\n changed: source,\n expandedItems,\n expandedCount: expandedItems.length,\n });\n }\n\n render() {\n return (\n <div\n class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n role=\"group\"\n aria-label=\"Accordion group\"\n >\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -112,12 +112,12 @@ const BcmAccordion = class {
|
|
|
112
112
|
hasFooterContent: this.hasFooterContent || !!this.hintText,
|
|
113
113
|
expanded: this.expanded,
|
|
114
114
|
});
|
|
115
|
-
return (index.h("div", { key: '
|
|
115
|
+
return (index.h("div", { key: '3a0a390154b9aaeacf347c341dca527251170623', class: container() }, index.h("header", { key: 'c26f66a539d305aeee93b282e1517e71bcf9b597', class: header(), role: "button", tabindex: "0", "aria-expanded": this.expanded.toString(), "aria-controls": "accordion-content", onKeyDown: e => {
|
|
116
116
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
117
117
|
e.preventDefault();
|
|
118
118
|
this.toggle();
|
|
119
119
|
}
|
|
120
|
-
}, onClick: () => this.toggle() }, index.h("slot", { key: '
|
|
120
|
+
}, onClick: () => this.toggle() }, index.h("slot", { key: 'ca21e2bc82a7db3ea2e5ad2347ff2a4aef1de19c', name: "title" }, this.headerTitle), index.h("div", { key: 'b57f38a3fe971abff72eb51d712d7feb2c9b9427', class: rightSection() }, index.h("span", { key: '456fe8d1d4e26842e9415bfd7c3a0cc378f4fbf6', onClick: e => e.stopPropagation() }, index.h("slot", { key: 'b60717c1a83ab6e332b455ef67c51dcdbf0110be', name: "actions" })), index.h("bcm-icon", { key: 'a25daa4603a65c040697aab473d85d3fc509925a', name: "fa-regular fa-chevron-down", class: icon() }))), index.h("div", { key: '8f54f72a47d1c756af639beb6418949160489b9b', class: content(), style: { maxHeight: this.expanded ? 'auto' : '0px' }, ref: el => (this.contentEl = el) }, index.h("div", { key: '9ac84621a920595b89d5c40ee62c009fae3f366f', class: "px-4 py-2" }, index.h("slot", { key: '2aa186106f12ef8afcdb315fec20fbcf6793a6aa' })), index.h("footer", { key: '36b85324780a99a6d3d1aec30379c56593d9388c', class: footer() }, index.h("slot", { key: '4e44aa3436e002a2b73c215ee09313f183ab5914', name: "footer", onSlotchange: this.handleFooterSlotChange }, this.hintText)))));
|
|
121
121
|
}
|
|
122
122
|
get host() { return index.getElement(this); }
|
|
123
123
|
};
|
|
@@ -89,7 +89,7 @@ const BcmAlert = class {
|
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
91
|
const { base, section } = this.alertClass({ size: this.size });
|
|
92
|
-
return (index.h("div", { key: '
|
|
92
|
+
return (index.h("div", { key: '035970fbe141f9ba657970b3ed6c3d3b25c9667d', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: base(), style: this.alertStyles }, index.h("div", { key: 'bd835ea4e8de6d45fb619c7cfa3440fb9a219ca9', class: section() }, this.showStatusIcon && index.h("bcm-icon", { key: '60eefe166c82e92a165e81d9bd2312ffa0d30a93', "icon-name": this.getStatusIcon() }), index.h("slot", { key: '9a499d62f590396cd6ace97c14fdf23613c7e487' })), index.h("div", { key: 'abbcf277f440e812480a4e333f4ecf7638c6d154', class: section() }, index.h("div", { key: '9f9e46f46dbb7da35e4f23f1cd0c9c56ac741793', part: "action" }, index.h("slot", { key: '024d5e74a33cd66cc22f60d35a79ec4c1d8b0e6d', name: "action" })), index.h("span", { key: 'e47d80cd9ebe01aede4e8f4465a4ada9abeecfca', part: "icon" }, this.dismissible && index.h("bcm-icon", { key: 'aca19250258abbd7658ce8914d42315186d4c12e', onClick: () => this.onDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark" })))));
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
95
|
BcmAlert.style = BcmAlertStyle0;
|