bromcom-ui-next 0.1.19 → 0.1.21

package/dist/bromcom-ui/p-a02e437c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["radioCss","BcmRadioStyle0","BcmRadio","constructor","hostRef","this","checked","size","disabled","readonly","labelPosition","error","getRadioClass","tv","slots","container","dot","dotContainer","labelClass","variants","small","medium","large","true","false","left","right","twMerge","handleClick","bcmRadioChange","emit","getRadioStyle","defaultStyle","errorStyle","disabledStyle","readonlyStyle","Object","assign","render","h","key","class","style","label","role","toString","type","name","value","readOnly","onClick","onFocus","e","bcmFocus","onBlur","bcmBlur"],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-radio',\n    styleUrl: 'radio.css',\n    shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n    @Element() host: HTMLBcmRadioElement;\n\n    /**\n     * The text label to display next to the radio button.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * The name attribute for the radio input, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The value of the radio button, submitted with the form.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio button is selected.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop({ reflect: true })\n    checked: boolean = false;\n\n    /**\n     * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Whether the radio button is disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled = false;\n\n    /**\n     * Whether the radio button is readonly.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    readonly = false;\n\n    /**\n     * Position of the label relative to the radio button: 'right' | 'left'.\n     * @prop\n     * @defaultValue 'right'\n     */\n    @Prop()\n    labelPosition: 'right' | 'left' = 'right';\n\n    /**\n     * Whether the radio button is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioChange',\n    })\n    bcmRadioChange: EventEmitter<void>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmBlur: EventEmitter<FocusEvent>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmFocus: EventEmitter<FocusEvent>;\n\n    private handleClick(): void {\n        if (this.readonly || this.disabled) return;\n        if (!this.checked) {\n            this.checked = true;\n            this.bcmRadioChange.emit();\n        }\n    }\n\n    private getRadioStyle() {\n        const defaultStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const errorStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const disabledStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n        };\n\n        const readonlyStyle = {\n            '--bcm-radio-bg': 'transparent',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        return {\n            ...defaultStyle,\n            ...(this.error && errorStyle),\n            ...(this.disabled && disabledStyle),\n            ...(this.readonly && readonlyStyle),\n        };\n    }\n\n    private getRadioClass = tv(\n        {\n            slots: {\n                container: 'bcm-ui-element bcm-radio group',\n                dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n                dotContainer:\n                    'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n                labelClass: 'font-medium text-[--bcm-radio-text-color]',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        dotContainer: 'size-3.5',\n                        dot: 'size-2',\n                        labelClass: 'text-size-4',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        dotContainer: 'size-4',\n                        dot: 'size-2.5',\n                        labelClass: 'text-size-5',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        dotContainer: 'size-[18px]',\n                        dot: 'size-3',\n                        labelClass: 'text-size-6',\n                    },\n                },\n                checked: {\n                    true: {\n                        dot: 'opacity-100',\n                    },\n                    false: {\n                        dot: 'opacity-0',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer focus-visible:ring',\n                    },\n                },\n                readonly: {\n                    true: {\n                        container: 'cursor-default pointer-events-none',\n                        dot: 'opacity-100',\n                        dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n                    },\n                    false: '',\n                },\n                labelPosition: {\n                    left: {\n                        container: 'inline-flex flex-row-reverse items-center',\n                    },\n                    right: {\n                        container: 'inline-flex flex-row items-center',\n                    },\n                },\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n            size: this.size,\n            checked: this.checked,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            labelPosition: this.labelPosition,\n        });\n\n        return (\n            <label class={container()} style={this.getRadioStyle()}>\n                <input\n                    aria-label={this.label}\n                    role=\"radio\"\n                    aria-checked={this.checked.toString()}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled}\n                    readOnly={this.readonly}\n                    checked={this.checked}\n                    class=\"appearance-none sr-only\"\n                    onClick={() => this.handleClick()}\n                    onFocus={e => this.bcmFocus.emit(e)}\n                    onBlur={e => this.bcmBlur.emit(e)}\n                ></input>\n                <div class={dotContainer()}>\n                    <div class={dot()}></div>\n                </div>\n                <span class={labelClass()}>\n                    <slot>{this.label}</slot>\n                </span>\n            </label>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAW,y9GACjB,MAAAC,EAAeD,E,MCgDFE,EAAQ,MALrB,WAAAC,CAAAC,G,6HAsCIC,KAAAC,QAAmB,MAQnBD,KAAAE,KAAqC,SAQrCF,KAAAG,SAAW,MAQXH,KAAAI,SAAW,MAQXJ,KAAAK,cAAkC,QAQlCL,KAAAM,MAAiB,MAyETN,KAAAO,cAAgBC,EACpB,CACIC,MAAO,CACHC,UAAW,iCACXC,IAAK,4DACLC,aACI,4MACJC,WAAY,6CAEhBC,SAAU,CACNZ,KAAM,CACFa,MAAO,CACHL,UAAW,QACXE,aAAc,WACdD,IAAK,SACLE,WAAY,eAEhBG,OAAQ,CACJN,UAAW,UACXE,aAAc,SACdD,IAAK,WACLE,WAAY,eAEhBI,MAAO,CACHP,UAAW,QACXE,aAAc,cACdD,IAAK,SACLE,WAAY,gBAGpBZ,QAAS,CACLiB,KAAM,CACFP,IAAK,eAETQ,MAAO,CACHR,IAAK,cAGbR,SAAU,CACNe,KAAM,CACFR,UAAW,sBAEfS,MAAO,CACHT,UAAW,sCAGnBN,SAAU,CACNc,KAAM,CACFR,UAAW,qCACXC,IAAK,cACLC,aAAc,oDAElBO,MAAO,IAEXd,cAAe,CACXe,KAAM,CACFV,UAAW,6CAEfW,MAAO,CACHX,UAAW,wCAK3B,CACIY,QAAS,O,CAlHT,WAAAC,GACJ,GAAIvB,KAAKI,UAAYJ,KAAKG,SAAU,OACpC,IAAKH,KAAKC,QAAS,CACfD,KAAKC,QAAU,KACfD,KAAKwB,eAAeC,M,EAIpB,aAAAC,GACJ,MAAMC,EAAe,CACjB,iBAAkB,iDAClB,qBAAsB,sCACtB,2BAA4B,qCAC5B,sBAAuB,iDACvB,yBAA0B,oCAG9B,MAAMC,EAAa,CACf,iBAAkB,qDAClB,qBAAsB,mCACtB,2BAA4B,mCAC5B,sBAAuB,+CACvB,yBAA0B,oCAG9B,MAAMC,EAAgB,CAClB,iBAAkB,kDAClB,qBAAsB,sCACtB,2BAA4B,sCAC5B,sBAAuB,kDACvB,yBAA0B,qCAG9B,MAAMC,EAAgB,CAClB,iBAAkB,cAClB,qBAAsB,sCACtB,sBAAuB,iDACvB,2BAA4B,sCAC5B,yBAA0B,oCAG9B,OAAAC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACOL,GACC3B,KAAKM,OAASsB,GACd5B,KAAKG,UAAY0B,GACjB7B,KAAKI,UAAY0B,E,CAyE7B,MAAAG,GACI,MAAMvB,UAAEA,EAASC,IAAEA,EAAGC,aAAEA,EAAYC,WAAEA,GAAeb,KAAKO,cAAc,CACpEL,KAAMF,KAAKE,KACXD,QAASD,KAAKC,QACdE,SAAUH,KAAKG,SACfC,SAAUJ,KAAKI,SACfC,cAAeL,KAAKK,gBAGxB,OACI6B,EAAA,SAAAC,IAAA,2CAAOC,MAAO1B,IAAa2B,MAAOrC,KAAK0B,iBACnCQ,EAAA,SAAAC,IAAA,wDACgBnC,KAAKsC,MACjBC,KAAK,QAAO,eACEvC,KAAKC,QAAQuC,WAC3BC,KAAK,QACLC,KAAM1C,KAAK0C,KACXC,MAAO3C,KAAK2C,MACZxC,SAAUH,KAAKG,SACfyC,SAAU5C,KAAKI,SACfH,QAASD,KAAKC,QACdmC,MAAM,0BACNS,QAAS,IAAM7C,KAAKuB,cACpBuB,QAASC,GAAK/C,KAAKgD,SAASvB,KAAKsB,GACjCE,OAAQF,GAAK/C,KAAKkD,QAAQzB,KAAKsB,KAEnCb,EAAA,OAAAC,IAAA,2CAAKC,MAAOxB,KACRsB,EAAA,OAAAC,IAAA,2CAAKC,MAAOzB,OAEhBuB,EAAA,QAAAC,IAAA,2CAAMC,MAAOvB,KACTqB,EAAA,QAAAC,IAAA,4CAAOnC,KAAKsC,Q","ignoreList":[]}

package/dist/bromcom-ui/p-b582c170.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["popConfirmCss","BcmPopConfirmStyle0","statusIcons","info","success","warning","error","PopConfirm","constructor","hostRef","this","arrowColor","cancelText","confirmText","description","headerText","placement","size","status","statusIcon","isOpen","handleTriggerClick","event","preventDefault","stopPropagation","requestAnimationFrame","updatePosition","handleConfirm","bcmConfirm","emit","handleCancel","bcmCancel","async","triggerElement","popoverElement","arrowElement","x","y","middlewareData","computePosition","middleware","offset","flip","fallbackPlacements","shift","padding","arrow","element","currentPlacement","Object","assign","style","left","top","arrowX","arrowY","basePlacement","split","staticSide","right","bottom","includes","classes","tv","slots","container","header","headerLeftContent","closeIconArea","titleContainer","footer","variants","small","medium","large","defaultVariants","componentDidLoad","document","getElementById","targetId","console","warn","addEventListener","show","hide","popoverStyle","disconnectedCallback","removeEventListener","render","h","Fragment","key","role","class","ref","el","_a","name","onClick","kind"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-basic-panel);\n  --popover-radius: 6px;\n  --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n  position: absolute;\n  background: var(--arrow-color);\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n  z-index: 1;\n}\n\n.arrow.top {\n  transform: rotate(180deg);\n}\n\n.arrow.bottom {\n  transform: rotate(0deg);\n}\n\n.arrow.right {\n  transform: rotate(-90deg);\n}\n\n.arrow.left {\n  transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n  font-family: 'Inter', sans-serif;\n  text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from 'tailwind-variants';\n\n// Status icons for different states\nconst statusIcons = {\n    info: 'fa-solid fa-circle-info',\n    success: 'fa-solid fa-circle-check',\n    warning: 'fa-solid fa-triangle-exclamation',\n    error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n *\n * @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n *   <span slot=\"header\">Custom Header Text</span>\n *   <span slot=\"body\">Additional details here</span>\n *   <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n *   console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n *   console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n    tag: 'bcm-pop-confirm',\n    styleUrl: 'pop-confirm.css',\n    shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n    // DOM element reference\n    @Element() el: HTMLElement;\n\n    /**\n     * The color of the arrow pointing to the trigger element.\n     * Can be a CSS custom property or a specific color value.\n     * @default 'var(--bcm-ui-color-background-basic-panel)'\n     */\n    @Prop()\n    arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n    /**\n     * The text displayed on the cancel button.\n     * @default 'Cancel'\n     */\n    @Prop()\n    cancelText: string = 'Cancel';\n\n    /**\n     * The text displayed on the confirm button.\n     * @default 'Yes'\n     */\n    @Prop()\n    confirmText: string = 'Yes';\n\n    /**\n     * The description or body content of the pop-up.\n     * @default ''\n     */\n    @Prop()\n    description: string = '';\n\n    /**\n     * The header text displayed at the top of the pop-up.\n     * @default ''\n     */\n    @Prop()\n    headerText: string = '';\n\n    /**\n     * The placement position of the pop-up relative to the trigger element.\n     * @default 'bottom'\n     */\n    @Prop()\n    placement: Placement = 'bottom';\n\n    /**\n     * The size of the pop-up, determining its dimensions and padding.\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The status of the pop-up, affecting its icon and color scheme.\n     * @default 'info'\n     */\n    @Prop()\n    status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n    /**\n     * Whether to display a status icon based on the `status` prop.\n     * @default true\n     */\n    @Prop()\n    statusIcon: boolean = true;\n\n    /**\n     * The ID of the trigger element (e.g., a button) that opens the pop-up.\n     */\n    @Prop()\n    targetId: string;\n\n    // State variables\n    /**\n     * Indicates whether the pop-up is currently open or closed.\n     * @default false\n     */\n    @State()\n    isOpen: boolean = false;\n\n    /**\n     * The current placement position of the pop-up after computation.\n     */\n    @State()\n    currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n    // Event Emitters\n    /**\n     * Emits an event when the user confirms the action in the pop-up.\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmConfirm: EventEmitter<void>;\n\n    /**\n     * Emits an event when the user cancels the action in the pop-up.\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmCancel: EventEmitter<void>;\n\n    // Element references\n    private triggerElement: HTMLElement;\n    private popoverElement: HTMLElement;\n    private arrowElement: HTMLElement;\n\n    /**\n     * Lifecycle method called when the component is loaded.\n     * Initializes the trigger element and attaches a click event listener.\n     */\n    componentDidLoad() {\n        this.triggerElement = document.getElementById(this.targetId);\n        if (!this.triggerElement) {\n            console.warn(`Target element with ID '${this.targetId}' not found.`);\n            return;\n        }\n        this.triggerElement.addEventListener('click', this.handleTriggerClick);\n    }\n\n\n    /**\n     * Handles the click event on the trigger element to open the pop-up.\n     * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n     * @param event The mouse event triggering the action.\n     */\n    private handleTriggerClick = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (!this.isOpen) {\n            this.isOpen = true;\n            requestAnimationFrame(() => {\n                this.updatePosition();\n            });\n        }\n    };\n\n    /**\n     * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n     * Prevents default behavior and propagation.\n     * @param event The mouse event triggering the action.\n     */\n    private handleConfirm = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOpen = false;\n        this.bcmConfirm.emit();\n    };\n\n    /**\n     * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n     * Prevents default behavior and propagation.\n     * @param event The mouse event triggering the action.\n     */\n    private handleCancel = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOpen = false;\n        this.bcmCancel.emit();\n    };\n\n    /**\n     * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n     * @returns A promise that resolves when the pop-up is shown.\n     */\n    @Method()\n    async show() {\n        this.isOpen = true;\n        requestAnimationFrame(() => {\n            this.updatePosition();\n        });\n    }\n\n    /**\n     * Programmatically hides the pop-up by setting `isOpen` to false.\n     * @returns A promise that resolves when the pop-up is hidden.\n     */\n    @Method()\n    async hide() {\n        this.isOpen = false;\n    }\n\n    /**\n     * Updates the position of the pop-up relative to the trigger element using Floating UI.\n     * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n     */\n    private updatePosition = async () => {\n        if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n        const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n            placement: this.placement,\n            middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n        });\n\n        this.currentPlacement = placement as any;\n\n        Object.assign(this.popoverElement.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n        const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n        const staticSide = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n        }[basePlacement];\n\n        Object.assign(this.arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n        });\n    };\n\n    /**\n     * Returns the dynamic styles for the pop-up, including text and arrow colors.\n     * @returns An object containing CSS custom properties.\n     */\n    private get popoverStyle() {\n        return {\n            '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n            '--arrow-color': this.arrowColor,\n        };\n    }\n\n    /**\n     * Lifecycle method called when the component is removed from the DOM.\n     * Cleans up the event listener to prevent memory leaks.\n     */\n    disconnectedCallback() {\n        if (this.triggerElement) {\n            this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n        }\n    }\n\n    /**\n     * Defines Tailwind Variants classes for the pop-up's structure and styling.\n     * Supports different sizes and generates dynamic class names.\n     */\n    private classes = tv({\n        slots: {\n            container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n            header: 'flex justify-between items-center',\n            headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n            closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n            titleContainer: '!text-color-header font-semibold',\n            footer: 'flex flex-row justify-end gap-2',\n        },\n        variants: {\n            size: {\n                small: {\n                    container: 'text-size-4 max-w-64 p-4 gap-4',\n                    header: 'text-size-4',\n                    footer: 'text-size-4',\n                    titleContainer: 'text-size-5',\n                    headerLeftContent: 'gap-2',\n                },\n                medium: {\n                    container: 'text-size-5 max-w-80 gap-6 p-6',\n                    header: 'text-size-5',\n                    footer: 'text-size-5',\n                    titleContainer: 'text-size-6',\n                    headerLeftContent: 'gap-2.5',\n                },\n                large: {\n                    container: 'text-size-6 max-w-96 p-8 gap-8',\n                    header: 'text-size-6',\n                    footer: 'text-size-6',\n                    titleContainer: 'text-size-7',\n                    headerLeftContent: 'gap-3',\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n        },\n    });\n\n    /**\n     * Renders the pop-up component, showing it only when `isOpen` is true.\n     * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n     * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n     */\n    render() {\n        const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n            size: this.size,\n        });\n        return (\n            <Fragment>\n                {this.isOpen && (\n                    <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n                        {/* Arrow */}\n                        <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n                        {/* Header Content */}\n                        <header class={header()}>\n                            <div class={headerLeftContent()}>\n                                {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n                                <span class={titleContainer()}>{this.headerText}</span>\n                                <slot name=\"header\"></slot>\n                            </div>\n                            <div class={closeIconArea()} onClick={this.handleCancel}>\n                                <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n                            </div>\n                        </header>\n\n                        {/* Main Content */}\n                        <main class=\"flex-1 mx-auto font-sans text-pretty\">\n                            <slot name=\"body\">{this.description}</slot>\n                        </main>\n\n                        {/* Footer Content */}\n                        <footer class={footer()}>\n                            <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n                                {this.cancelText}\n                            </bcm-button>\n                            <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n                                {this.confirmText}\n                            </bcm-button>\n                            <slot name=\"footer\"></slot>\n                        </footer>\n                    </div>\n                )}\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-b867a105.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bcmTabsCss","BcmTabsStyle0","BcmTabs","constructor","hostRef","this","size","triggers","contents","tabClass","tv","base","componentWillLoad","activeTab","defaultValue","componentDidLoad","refreshElementReferences","updateTriggerProperties","setupRelations","updateInkbar","updateContentVisibility","Array","from","el","querySelectorAll","tabsList","querySelector","forEach","trigger","active","value","panel","find","content","panelId","id","setAttribute","_a","length","handleSizeChange","disableTab","t","disabled","enableTab","disableAllTabs","enableAllTabs","getActiveTab","setActiveTab","previousTab","updateTabStatus","bcmTabChange","emit","element","isActive","handleResize","handleTabSelected","event","detail","activeElement","isVisible","style","display","toString","console","warn","totalTriggers","inkbar","_b","shadowRoot","activeTrigger","triggerRect","getBoundingClientRect","groupRect","_e","_d","_c","left","width","transform","opacity","render","h","Host","key","class","name"],"sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * Default active tab value\n   */\n  @Prop({ reflect: true })\n  defaultValue: string;\n\n  /**\n   * Tab size\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Triggers when tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }>;\n\n  /**\n   * Active tab value\n   */\n  @State() activeTab: string;\n\n  /**\n   * Previous active tab value\n   */\n  @State() previousTab: string;\n\n  private triggers: HTMLBcmTabsTriggerElement[] = [];\n  private contents: HTMLBcmTabsContentElement[] = [];\n  private tabsList: HTMLBcmTabsListElement;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    this.refreshElementReferences();\n    this.updateTriggerProperties();\n    this.setupRelations();\n    this.updateInkbar();\n    this.updateContentVisibility();\n  }\n\n  /**\n   * Refreshes DOM element references\n   */\n  private refreshElementReferences() {\n    this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n    this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n    this.tabsList = this.el.querySelector('bcm-tabs-list');\n  }\n\n  /**\n   * Establishes relationships between tabs and content\n   */\n  private setupRelations() {\n    this.triggers.forEach(trigger => {\n      trigger.active = trigger.value === this.activeTab;\n      const panel = this.contents.find(content => content.value === trigger.value);\n      if (panel) {\n        const panelId = `panel-${trigger.value}`;\n        panel.id = panelId;\n        trigger.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n        trigger.id = `trigger-${trigger.value}`;\n      }\n    });\n  }\n\n  private updateTriggerProperties() {\n    if (this.triggers?.length > 0) {\n      this.triggers.forEach(trigger => {\n        trigger.size = this.size;\n      });\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.updateTriggerProperties();\n  }\n\n  @Method()\n  async disableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = true;\n    }\n  }\n\n  @Method()\n  async enableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = false;\n    }\n  }\n\n  /**\n   * Disables all tabs\n   */\n  @Method()\n  async disableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = true;\n    });\n  }\n\n  /**\n   * Enables all tabs\n   */\n  @Method()\n  async enableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = false;\n    });\n  }\n\n  /**\n   * Returns the active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Sets the active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger && !trigger.disabled) {\n      this.previousTab = this.activeTab;\n      this.activeTab = value;\n      this.updateInkbar();\n      this.updateContentVisibility();\n      this.updateTabStatus();\n\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: trigger,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates tab status\n   */\n  private updateTabStatus() {\n    this.triggers.forEach(trigger => {\n      const isActive = trigger.value === this.activeTab;\n      trigger.active = isActive;\n    });\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.updateInkbar();\n  }\n\n  /**\n   * Triggered when a tab is selected\n   */\n  @Listen('bcmTabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    this.previousTab = this.activeTab;\n    this.activeTab = event.detail;\n\n    this.updateTabStatus();\n    this.updateInkbar();\n    this.updateContentVisibility();\n\n    const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n    if (activeElement) {\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: activeElement,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates content visibility\n   */\n  private updateContentVisibility() {\n    this.contents.forEach(content => {\n      const isVisible = content.value === this.activeTab;\n      content.style.display = isVisible ? 'block' : 'none';\n      content.setAttribute('aria-hidden', (!isVisible).toString());\n    });\n  }\n\n  /**\n   * Updates inkbar position\n   */\n  private updateInkbar() {\n    if (!this.tabsList) {\n      console.warn('bcm-tabs-list not found');\n      return;\n    }\n\n    const totalTriggers = this.triggers.length;\n    if (totalTriggers === 0) return;\n\n    const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n    const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n    if (activeTrigger && inkbar) {\n      const triggerRect = activeTrigger.getBoundingClientRect();\n      const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n      if (triggerRect && groupRect) {\n        const left = triggerRect.left - groupRect.left;\n        const width = triggerRect.width;\n\n        inkbar.style.width = `${width}px`;\n        inkbar.style.transform = `translateX(${left}px)`;\n        inkbar.style.opacity = '1';\n      } else {\n        console.warn('Group or trigger rect calculation failed');\n        inkbar.style.opacity = '0';\n      }\n    } else {\n      if (inkbar) inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Tab container class\n   */\n  private tabClass = tv({\n    base: 'tabs-container bcm-ui-element flex flex-col w-full',\n  });\n\n  render() {\n    return (\n      <Host>\n        <div class={this.tabClass()}>\n          <slot name=\"tabs-list\" />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-bbe4aac2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedPickerCss","BcmSegmentedPickerStyle0","BcmSegmentedPicker","constructor","hostRef","this","size","disabled","fullWidth","options","indicatorStyles","left","width","transition","segmentedClass","tv","base","variants","small","medium","large","true","false","defaultVariants","twMerge","componentWillLoad","parseOptions","value","length","componentDidLoad","updateIndicatorPosition","componentDidUpdate","valueChanged","handleOptionClick","event","detail","bcmChange","emit","slotNodes","Array","from","host","children","filter","node","nodeName","toLowerCase","map","option","getAttribute","label","textContent","animate","selectedOption","querySelector","allOptions","querySelectorAll","selectedIndex","i","setTimeout","leftPosition","optionElement","offsetWidth","selectedWidth","error","console","render","h","Host","key","class","style"],"sources":["src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n.segmented-container {\n  border-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n.segmented-indicator {\n  height: 100%;\n  top: 0;\n  border-radius: var(--bcm-ui-border-radius-md, 2px);\n  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n\n.segmented-options {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { SegmentedPickerSize } from './types';\n\n@Component({\n  tag: 'bcm-segmented-picker',\n  styleUrl: 'segmented-picker.css',\n  shadow: true,\n})\nexport class BcmSegmentedPicker {\n  @Element() host: HTMLElement;\n\n  /** Controls the component size */\n  @Prop()\n  size: SegmentedPickerSize = 'medium';\n\n  /** The selected option value */\n  @Prop({ mutable: true, reflect: true })\n  value?: string;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Full width component */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Change event */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<{ value: string }>;\n\n  @State() options: Array<{ value: string; label: string }> = [];\n  @State() indicatorStyles: { left: string; width: string; transition: string } = {\n    left: '0',\n    width: '0',\n    transition: 'none',\n  };\n\n  componentWillLoad() {\n    // İlk yüklemede options'ları belirle\n    this.parseOptions();\n\n    // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç\n    if (!this.value && this.options.length > 0) {\n      this.value = this.options[0].value;\n    }\n  }\n\n  componentDidLoad() {\n    // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle\n    this.updateIndicatorPosition(false);\n  }\n\n  componentDidUpdate() {\n    this.updateIndicatorPosition();\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen('bcmOptionClick')\n  handleOptionClick(event: CustomEvent<string>) {\n    if (this.disabled) return;\n\n    const value = event.detail;\n    if (this.value !== value) {\n      this.value = value;\n      this.bcmChange.emit({ value });\n    }\n  }\n\n  private parseOptions() {\n    const slotNodes = Array.from(this.host.children);\n    this.options = slotNodes\n      .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')\n      .map(option => ({\n        value: option.getAttribute('value') || '',\n        label: option.getAttribute('label') || option.textContent || '',\n      }));\n  }\n\n  private updateIndicatorPosition(animate = true) {\n    // Seçili option elemanını bul\n    const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value=\"${this.value}\"]`) as HTMLElement;\n    if (!selectedOption) return;\n\n    // Tüm option'ları seç\n    const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');\n\n    // Seçili option'ın indeksini bul\n    let selectedIndex = -1;\n    for (let i = 0; i < allOptions.length; i++) {\n      if (allOptions[i].getAttribute('value') === this.value) {\n        selectedIndex = i;\n        break;\n      }\n    }\n\n    if (selectedIndex === -1) return;\n\n    // DOM manipülasyonu asenkron olarak yap\n    setTimeout(() => {\n      try {\n        // Seçili option'a kadar olan genişliği hesapla\n        let leftPosition = 0;\n\n        for (let i = 0; i < selectedIndex; i++) {\n          const optionElement = allOptions[i] as HTMLElement;\n          if (optionElement) {\n            leftPosition += optionElement.offsetWidth;\n          }\n        }\n\n        // Seçili option'ın genişliği\n        const selectedWidth = (allOptions[selectedIndex] as HTMLElement).offsetWidth;\n\n        // İndikatör stillerini güncelle\n        this.indicatorStyles = {\n          left: `${leftPosition}px`,\n          width: `${selectedWidth}px`,\n          transition: animate ? 'all 0.2s ease-in-out' : 'none',\n        };\n      } catch (error) {\n        console.error('Error updating indicator position:', error);\n      }\n    }, 10);\n  }\n\n  private segmentedClass = tv(\n    {\n      base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',\n      variants: {\n        size: {\n          small: 'text-size-4',\n          medium: 'text-size-5',\n          large: 'text-size-6',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n        disabled: {\n          true: 'opacity-50 cursor-not-allowed',\n          false: 'cursor-pointer',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        fullWidth: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.segmentedClass({\n            size: this.size,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n          })}\n        >\n          <div class=\"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded\" style={this.indicatorStyles}></div>\n          <div class=\"segmented-options flex relative z-10 w-full\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,mnEAC3B,MAAAC,EAAeD,E,MCQFE,EAAkB,MAL/B,WAAAC,CAAAC,G,+CAUEC,KAAAC,KAA4B,SAQ5BD,KAAAE,SAAW,MAIXF,KAAAG,UAAY,MAUHH,KAAAI,QAAmD,GACnDJ,KAAAK,gBAAuE,CAC9EC,KAAM,IACNC,MAAO,IACPC,WAAY,QA+FNR,KAAAS,eAAiBC,EACvB,CACEC,KAAM,4LACNC,SAAU,CACRX,KAAM,CACJY,MAAO,cACPC,OAAQ,cACRC,MAAO,eAETZ,UAAW,CACTa,KAAM,UAERd,SAAU,CACRc,KAAM,gCACNC,MAAO,mBAGXC,gBAAiB,CACfjB,KAAM,SACNE,UAAW,MACXD,SAAU,QAGd,CACEiB,QAAS,O,CApHb,iBAAAC,GAEEpB,KAAKqB,eAGL,IAAKrB,KAAKsB,OAAStB,KAAKI,QAAQmB,OAAS,EAAG,CAC1CvB,KAAKsB,MAAQtB,KAAKI,QAAQ,GAAGkB,K,EAIjC,gBAAAE,GAEExB,KAAKyB,wBAAwB,M,CAG/B,kBAAAC,GACE1B,KAAKyB,yB,CAIP,YAAAE,GACE3B,KAAKyB,yB,CAIP,iBAAAG,CAAkBC,GAChB,GAAI7B,KAAKE,SAAU,OAEnB,MAAMoB,EAAQO,EAAMC,OACpB,GAAI9B,KAAKsB,QAAUA,EAAO,CACxBtB,KAAKsB,MAAQA,EACbtB,KAAK+B,UAAUC,KAAK,CAAEV,S,EAIlB,YAAAD,GACN,MAAMY,EAAYC,MAAMC,KAAKnC,KAAKoC,KAAKC,UACvCrC,KAAKI,QAAU6B,EACZK,QAAOC,GAAQA,EAAKC,SAASC,gBAAkB,gCAC/CC,KAAIC,IAAM,CACTrB,MAAOqB,EAAOC,aAAa,UAAY,GACvCC,MAAOF,EAAOC,aAAa,UAAYD,EAAOG,aAAe,M,CAI3D,uBAAArB,CAAwBsB,EAAU,MAExC,MAAMC,EAAiBhD,KAAKoC,KAAKa,cAAc,sCAAsCjD,KAAKsB,WAC1F,IAAK0B,EAAgB,OAGrB,MAAME,EAAalD,KAAKoC,KAAKe,iBAAiB,+BAG9C,IAAIC,GAAiB,EACrB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAW3B,OAAQ8B,IAAK,CAC1C,GAAIH,EAAWG,GAAGT,aAAa,WAAa5C,KAAKsB,MAAO,CACtD8B,EAAgBC,EAChB,K,EAIJ,GAAID,KAAmB,EAAG,OAG1BE,YAAW,KACT,IAEE,IAAIC,EAAe,EAEnB,IAAK,IAAIF,EAAI,EAAGA,EAAID,EAAeC,IAAK,CACtC,MAAMG,EAAgBN,EAAWG,GACjC,GAAIG,EAAe,CACjBD,GAAgBC,EAAcC,W,EAKlC,MAAMC,EAAiBR,EAAWE,GAA+BK,YAGjEzD,KAAKK,gBAAkB,CACrBC,KAAM,GAAGiD,MACThD,MAAO,GAAGmD,MACVlD,WAAYuC,EAAU,uBAAyB,O,CAEjD,MAAOY,GACPC,QAAQD,MAAM,qCAAsCA,E,IAErD,G,CA+BL,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAOjE,KAAKS,eAAe,CACzBR,KAAMD,KAAKC,KACXE,UAAWH,KAAKG,UAChBD,SAAUF,KAAKE,YAGjB4D,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uFAAuFC,MAAOlE,KAAKK,kBAC9GyD,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+CACTH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/bromcom-ui/p-bc962a70.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabsListCss","BcmTabsListStyle0","BcmTabsList","constructor","hostRef","this","class","tv","slots","container","inkbar","tabList","render","h","key","slot","role"],"sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n */\n@Component({\n    tag: 'bcm-tabs-list',\n    styleUrl: 'tabs-list.css',\n    shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n    /**\n     * Tailwind variants configuration for styling the tabs list container and inkbar\n     */\n    private class = tv({\n        slots: {\n            /**\n             * Main container that holds both the tablist and inkbar\n             */\n            container: 'flex flex-row items-center w-full relative',\n\n            /**\n             * The sliding indicator that appears under the active tab\n             */\n            inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n            /**\n             * The container for tab trigger elements\n             */\n            tabList: 'tabs-list flex flex-row items-center w-full relative',\n        },\n    });\n\n    render() {\n        const { container, inkbar, tabList } = this.class();\n        return (\n            <div class={container()} slot=\"tabs-list\">\n                <div class={inkbar()}></div>\n                <div class={tabList()} role=\"tablist\">\n                    <slot></slot>\n                </div>\n            </div>\n        );\n    }\n}"],"mappings":"+EAAA,MAAMA,EAAc,kpCACpB,MAAAC,EAAeD,E,MCWFE,EAAW,MALxB,WAAAC,CAAAC,G,UASYC,KAAAC,MAAQC,EAAG,CACfC,MAAO,CAIHC,UAAW,6CAKXC,OAAQ,wIAKRC,QAAS,yD,CAIjB,MAAAC,GACI,MAAMH,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,GAAYN,KAAKC,QAC5C,OACIO,EAAA,OAAAC,IAAA,2CAAKR,MAAOG,IAAaM,KAAK,aAC1BF,EAAA,OAAAC,IAAA,2CAAKR,MAAOI,MACZG,EAAA,OAAAC,IAAA,2CAAKR,MAAOK,IAAWK,KAAK,WACxBH,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/bromcom-ui/p-d975579d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","BcmTextareaStyle0","BcmTextarea","constructor","hostRef","this","isFocused","isValid","internalStatus","value","rows","resize","autoGrow","_id","generateId","size","status","fullWidth","disabled","readonly","required","showCounter","onChange","event","bcmChange","emit","onFocus","bcmFocus","onBlur","bcmBlur","validateInput","onKeyDown","bcmKeyDown","onKeyUp","bcmKeyUp","styleClass","tv","slots","base","textareaClass","counterText","variants","small","medium","large","none","both","horizontal","vertical","default","error","success","warning","info","true","false","focused","defaultVariants","twMerge","handleValueChange","newValue","textareaRef","adjustHeight","watchStatus","watchErrorMessage","internalErrorMessage","componentWillLoad","setValidationMessages","defaultValidationMessages","errorMessage","componentDidLoad","_a","addEventListener","disconnectedCallback","removeEventListener","setFocus","focus","setBlur","blur","select","requestAnimationFrame","style","height","computedStyle","getComputedStyle","lineHeight","parseInt","paddingTop","paddingBottom","scrollHeight","newHeight","minRows","minHeight","Math","max","maxRows","maxHeight","min","validationMessage","getValidationMessage","minLength","length","maxLength","validator","customError","render","textareaId","name","h","key","class","label","classNames","htmlFor","ref","el","id","cols","placeholder","labelledby","describedby","onInput","target","bcmInput","captionText"],"sources":["src/components/textarea/textarea.scss?tag=bcm-textarea&encapsulation=shadow","src/components/textarea/textarea.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.bcm-textarea {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n// Tailwind'in resize sınıflarını override et\n.resize-none {\n  resize: none !important;\n}\n\n.resize {\n  resize: both !important;\n}\n\n.resize-y {\n  resize: vertical !important;\n}\n\n.resize-x {\n  resize: horizontal !important;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, TextareaResize } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\n// import { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n  tag: 'bcm-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class BcmTextarea {\n  @Element() el: HTMLElement;\n  private textareaRef: HTMLTextAreaElement;\n\n  @State() isFocused = false;\n  @State() validationMessage: string;\n  @State() isValid = true;\n  @State() internalStatus: InputStatus = 'default';\n  @State() internalErrorMessage: string;\n\n  /** Textarea value */\n  @Prop({ mutable: true, reflect: true })\n  value: string = '';\n\n  /** Textarea rows */\n  @Prop()\n  rows?: number = 3;\n\n  /** Textarea cols */\n  @Prop()\n  cols?: number;\n\n  /** Minimum height in rows */\n  @Prop()\n  minRows?: number;\n\n  /** Maximum height in rows */\n  @Prop()\n  maxRows?: number;\n\n  /** Resize behavior */\n  @Prop()\n  resize: TextareaResize = 'none';\n\n  /** Auto grow height based on content */\n  @Prop()\n  autoGrow = false;\n\n  /** Input placeholder text */\n  @Prop()\n  placeholder?: string;\n\n  /** Input name */\n  @Prop()\n  name?: string;\n\n  /** Input id */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('textarea');\n\n  /** Controls the textarea size */\n  @Prop()\n  size: InputSize = 'medium';\n\n  /** Defines the textarea's status/state */\n  @Prop()\n  status: InputStatus = 'default';\n\n  /** Full width textarea */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Whether the textarea is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Whether the textarea is readonly */\n  @Prop()\n  readonly = false;\n\n  /** Whether the textarea is required */\n  @Prop()\n  required = false;\n\n  /** Min length for text input */\n  @Prop()\n  minLength?: number;\n\n  /** Max length for text input */\n  @Prop()\n  maxLength?: number;\n\n  /** Show character counter */\n  @Prop()\n  showCounter: boolean = true;\n\n  /** Textarea label for accessibility */\n  @Prop()\n  label?: string;\n\n  /** Error message to display */\n  @Prop()\n  errorMessage?: string;\n\n  /** Caption text to display below textarea */\n  @Prop()\n  captionText?: string;\n\n  /** ID of associated label element */\n  @Prop()\n  labelledby?: string;\n\n  /** ID of associated caption/error text element */\n  @Prop()\n  describedby?: string;\n\n  /** Custom validation function */\n  @Prop()\n  validator?: (value: string) => string | undefined;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmInput: EventEmitter<InputEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<Event>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    if (this.textareaRef) {\n      this.textareaRef.value = newValue;\n      if (this.autoGrow) {\n        this.adjustHeight();\n      }\n    }\n  }\n\n  @Watch('status')\n  watchStatus(newValue: InputStatus) {\n    this.internalStatus = newValue;\n  }\n\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: string) {\n    this.internalErrorMessage = newValue;\n  }\n\n  componentWillLoad() {\n    setValidationMessages('en', defaultValidationMessages);\n    this.internalStatus = this.status;\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  componentDidLoad() {\n    if (this.autoGrow) {\n      this.adjustHeight();\n      // Input event'ini dinle\n      this.textareaRef?.addEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  disconnectedCallback() {\n    // Event listener'ı temizle\n    if (this.autoGrow && this.textareaRef) {\n      this.textareaRef.removeEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.textareaRef?.focus();\n  }\n\n  @Method()\n  async setBlur() {\n    this.textareaRef?.blur();\n  }\n\n  @Method()\n  async select() {\n    this.textareaRef?.select();\n  }\n\n  private adjustHeight() {\n    if (!this.autoGrow || !this.textareaRef) return;\n\n    requestAnimationFrame(() => {\n      // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın\n      this.textareaRef.style.height = '0px';\n\n      const computedStyle = getComputedStyle(this.textareaRef);\n      const lineHeight = parseInt(computedStyle.lineHeight);\n      const paddingTop = parseInt(computedStyle.paddingTop);\n      const paddingBottom = parseInt(computedStyle.paddingBottom);\n      const scrollHeight = this.textareaRef.scrollHeight;\n\n      let newHeight = scrollHeight;\n\n      // Min/max kontrolleri\n      if (this.minRows) {\n        const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.max(newHeight, minHeight);\n      }\n\n      if (this.maxRows) {\n        const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.min(newHeight, maxHeight);\n      }\n\n      this.textareaRef.style.height = `${newHeight}px`;\n    });\n  }\n\n  private validateInput(): void {\n    if (!this.textareaRef) return;\n\n    // Reset validation state\n    this.isValid = true;\n    this.validationMessage = '';\n\n    const value = this.textareaRef.value;\n\n    // Required check\n    if (this.required && !value) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('required');\n      this.internalStatus = 'error';\n      this.internalErrorMessage = this.validationMessage;\n      return;\n    }\n\n    // Minimum length check\n    if (this.minLength && value.length < this.minLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n    }\n    // Maximum length check\n    else if (this.maxLength && value.length > this.maxLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n    }\n\n    // Custom validator\n    if (this.validator) {\n      const customError = this.validator(value);\n      if (customError) {\n        this.isValid = false;\n        this.validationMessage = customError;\n      }\n    }\n\n    // Update component state\n    this.internalStatus = this.isValid ? 'default' : 'error';\n    this.internalErrorMessage = this.validationMessage;\n  }\n\n  private onChange = (event: Event) => {\n    this.bcmChange.emit(event);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.bcmFocus.emit(event);\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.bcmBlur.emit(event);\n    this.validateInput();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    this.bcmKeyDown.emit(event);\n  };\n\n  private onKeyUp = (event: KeyboardEvent) => {\n    this.bcmKeyUp.emit(event);\n  };\n\n  private styleClass = tv(\n    {\n      slots: {\n        base: [\n          'bcm-textarea bcm-textarea__container',\n          'bg-[--bcm-ui-color-background-base-default]',\n          'border border-solid rounded',\n          'flex flex-col', // flex-col ekledik\n          'transition-colors duration-200',\n          'px-2 py-2',\n          'w-full', // w-full ekledik\n        ],\n        textareaClass: [\n          'textarea',\n          'w-full',\n          'border-0 outline-0 bg-transparent',\n          'appearance-none',\n          'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n          'font-sans antialiased font-medium',\n          'px-1',\n          'overflow-y-auto', // overflow-y-auto ekledik\n          'min-h-0', // min-h-0 ekledik\n        ],\n        counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],\n      },\n      variants: {\n        size: {\n          small: {\n            base: '',\n            textareaClass: 'text-size-4 min-h-[3rem]',\n            counterText: 'text-size-3',\n          },\n          medium: {\n            base: '',\n            textareaClass: 'text-size-5 min-h-[4rem]',\n            counterText: 'text-size-4',\n          },\n          large: {\n            base: '',\n            textareaClass: 'text-size-6 min-h-[5rem]',\n            counterText: 'text-size-5',\n          },\n        },\n        resize: {\n          none: { textareaClass: '!resize-none' },\n          both: { textareaClass: '!resize' },\n          horizontal: { textareaClass: '!resize-x' },\n          vertical: { textareaClass: '!resize-y' },\n        },\n        status: {\n          default: {\n            base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n          },\n          error: {\n            base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n          },\n          success: {\n            base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n          },\n          warning: {\n            base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n          },\n          info: {\n            base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n          },\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: {\n            base: 'disabled cursor-not-allowed opacity-50',\n            textareaClass: '!resize-none', // disabled durumunda resize'ı engelle\n          },\n          false: '',\n        },\n        focused: {\n          true: {\n            base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',\n          },\n          false: '',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        status: 'default',\n        resize: 'vertical',\n        fullWidth: false,\n        disabled: false,\n        focused: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const textareaId = this._id + '-textarea' || this.name;\n\n    const { base, textareaClass, counterText } = this.styleClass({\n      size: this.size,\n      status: this.internalStatus,\n      resize: this.resize,\n      fullWidth: this.fullWidth,\n      disabled: this.disabled,\n      focused: this.isFocused,\n    });\n\n    return (\n      <div class=\"bcm-ui-element\">\n        {/* Label rendering */}\n        {this.label && (\n          <label\n            class={classNames(\n              'textarea-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n            htmlFor={textareaId}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n\n        {/* Textarea container */}\n        <div class={base()}>\n          <textarea\n            ref={el => (this.textareaRef = el)}\n            id={textareaId}\n            class={textareaClass()}\n            name={this.name}\n            rows={this.rows}\n            cols={this.cols}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            required={this.required}\n            placeholder={this.placeholder}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            aria-invalid={this.status === 'error'}\n            aria-required={this.required}\n            aria-labelledby={this.labelledby}\n            aria-describedby={this.describedby}\n            value={this.value}\n            onInput={event => {\n              const target = event.target as HTMLTextAreaElement;\n              this.value = target.value;\n              this.bcmInput.emit(event);\n              this.validateInput();\n              if (this.autoGrow) {\n                this.adjustHeight();\n              }\n            }}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyDown={this.onKeyDown}\n            onKeyUp={this.onKeyUp}\n          />\n          {/* buraya isteğe bağlı olarak gözüken bir karakter sayacı ekleyeceğiz. bu sayaç sağa yaslı olacak şu formatta olacak 0/120 gibi 0 mevcut karakteri 120 ise limiti gösterecek */}\n          {this.showCounter && (\n            <div class={counterText()}>\n              {this.value.length}\n              {this.maxLength ? `/${this.maxLength}` : ''}\n            </div>\n          )}\n        </div>\n\n        {/* Validation/Caption message */}\n        {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n          <div\n            class={classNames(\n              'textarea-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"uNAAA,MAAMA,EAAc,i2QACpB,MAAAC,EAAeD,E,MCYFE,EAAW,MALxB,WAAAC,CAAAC,G,gOASWC,KAAAC,UAAY,MAEZD,KAAAE,QAAU,KACVF,KAAAG,eAA8B,UAKvCH,KAAAI,MAAgB,GAIhBJ,KAAAK,KAAgB,EAgBhBL,KAAAM,OAAyB,OAIzBN,KAAAO,SAAW,MAYXP,KAAAQ,IAAeC,EAAW,YAI1BT,KAAAU,KAAkB,SAIlBV,KAAAW,OAAsB,UAItBX,KAAAY,UAAY,MAIZZ,KAAAa,SAAW,MAIXb,KAAAc,SAAW,MAIXd,KAAAe,SAAW,MAYXf,KAAAgB,YAAuB,KAqMfhB,KAAAiB,SAAYC,IAClBlB,KAAKmB,UAAUC,KAAKF,EAAM,EAGpBlB,KAAAqB,QAAWH,IACjBlB,KAAKC,UAAY,KACjBD,KAAKsB,SAASF,KAAKF,EAAM,EAGnBlB,KAAAuB,OAAUL,IAChBlB,KAAKC,UAAY,MACjBD,KAAKwB,QAAQJ,KAAKF,GAClBlB,KAAKyB,eAAe,EAGdzB,KAAA0B,UAAaR,IACnBlB,KAAK2B,WAAWP,KAAKF,EAAM,EAGrBlB,KAAA4B,QAAWV,IACjBlB,KAAK6B,SAAST,KAAKF,EAAM,EAGnBlB,KAAA8B,WAAaC,EACnB,CACEC,MAAO,CACLC,KAAM,CACJ,uCACA,8CACA,8BACA,gBACA,iCACA,YACA,UAEFC,cAAe,CACb,WACA,SACA,oCACA,kBACA,gHACA,oCACA,OACA,kBACA,WAEFC,YAAa,CAAC,wBAAyB,yCAA0C,aAAc,SAEjGC,SAAU,CACR1B,KAAM,CACJ2B,MAAO,CACLJ,KAAM,GACNC,cAAe,2BACfC,YAAa,eAEfG,OAAQ,CACNL,KAAM,GACNC,cAAe,2BACfC,YAAa,eAEfI,MAAO,CACLN,KAAM,GACNC,cAAe,2BACfC,YAAa,gBAGjB7B,OAAQ,CACNkC,KAAM,CAAEN,cAAe,gBACvBO,KAAM,CAAEP,cAAe,WACvBQ,WAAY,CAAER,cAAe,aAC7BS,SAAU,CAAET,cAAe,cAE7BvB,OAAQ,CACNiC,QAAS,CACPX,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGY,MAAO,CACLZ,KAAM,CAAC,uCAAwC,6CAA8C,sDAE/Fa,QAAS,CACPb,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGc,QAAS,CACPd,KAAM,CAAC,yCAA0C,+CAAgD,wDAEnGe,KAAM,CACJf,KAAM,CAAC,sCAAuC,4CAA6C,sDAG/FrB,UAAW,CACTqC,KAAM,qBAERpC,SAAU,CACRoC,KAAM,CACJhB,KAAM,yCACNC,cAAe,gBAEjBgB,MAAO,IAETC,QAAS,CACPF,KAAM,CACJhB,KAAM,+DAERiB,MAAO,KAGXE,gBAAiB,CACf1C,KAAM,SACNC,OAAQ,UACRL,OAAQ,WACRM,UAAW,MACXC,SAAU,MACVsC,QAAS,QAGb,CACEE,QAAS,O,CApPb,iBAAAC,CAAkBC,GAChB,GAAIvD,KAAKwD,YAAa,CACpBxD,KAAKwD,YAAYpD,MAAQmD,EACzB,GAAIvD,KAAKO,SAAU,CACjBP,KAAKyD,c,GAMX,WAAAC,CAAYH,GACVvD,KAAKG,eAAiBoD,C,CAIxB,iBAAAI,CAAkBJ,GAChBvD,KAAK4D,qBAAuBL,C,CAG9B,iBAAAM,GACEC,EAAsB,KAAMC,GAC5B/D,KAAKG,eAAiBH,KAAKW,OAC3BX,KAAK4D,qBAAuB5D,KAAKgE,Y,CAGnC,gBAAAC,G,MACE,GAAIjE,KAAKO,SAAU,CACjBP,KAAKyD,gBAELS,EAAAlE,KAAKwD,eAAW,MAAAU,SAAA,SAAAA,EAAEC,iBAAiB,SAAS,IAAMnE,KAAKyD,gB,EAI3D,oBAAAW,GAEE,GAAIpE,KAAKO,UAAYP,KAAKwD,YAAa,CACrCxD,KAAKwD,YAAYa,oBAAoB,SAAS,IAAMrE,KAAKyD,gB,EAK7D,cAAMa,G,OACJJ,EAAAlE,KAAKwD,eAAW,MAAAU,SAAA,SAAAA,EAAEK,O,CAIpB,aAAMC,G,OACJN,EAAAlE,KAAKwD,eAAW,MAAAU,SAAA,SAAAA,EAAEO,M,CAIpB,YAAMC,G,OACJR,EAAAlE,KAAKwD,eAAW,MAAAU,SAAA,SAAAA,EAAEQ,Q,CAGZ,YAAAjB,GACN,IAAKzD,KAAKO,WAAaP,KAAKwD,YAAa,OAEzCmB,uBAAsB,KAEpB3E,KAAKwD,YAAYoB,MAAMC,OAAS,MAEhC,MAAMC,EAAgBC,iBAAiB/E,KAAKwD,aAC5C,MAAMwB,EAAaC,SAASH,EAAcE,YAC1C,MAAME,EAAaD,SAASH,EAAcI,YAC1C,MAAMC,EAAgBF,SAASH,EAAcK,eAC7C,MAAMC,EAAepF,KAAKwD,YAAY4B,aAEtC,IAAIC,EAAYD,EAGhB,GAAIpF,KAAKsF,QAAS,CAChB,MAAMC,EAAYvF,KAAKsF,QAAUN,EAAaE,EAAaC,EAC3DE,EAAYG,KAAKC,IAAIJ,EAAWE,E,CAGlC,GAAIvF,KAAK0F,QAAS,CAChB,MAAMC,EAAY3F,KAAK0F,QAAUV,EAAaE,EAAaC,EAC3DE,EAAYG,KAAKI,IAAIP,EAAWM,E,CAGlC3F,KAAKwD,YAAYoB,MAAMC,OAAS,GAAGQ,KAAa,G,CAI5C,aAAA5D,GACN,IAAKzB,KAAKwD,YAAa,OAGvBxD,KAAKE,QAAU,KACfF,KAAK6F,kBAAoB,GAEzB,MAAMzF,EAAQJ,KAAKwD,YAAYpD,MAG/B,GAAIJ,KAAKe,WAAaX,EAAO,CAC3BJ,KAAKE,QAAU,MACfF,KAAK6F,kBAAoBC,EAAqB,YAC9C9F,KAAKG,eAAiB,QACtBH,KAAK4D,qBAAuB5D,KAAK6F,kBACjC,M,CAIF,GAAI7F,KAAK+F,WAAa3F,EAAM4F,OAAShG,KAAK+F,UAAW,CACnD/F,KAAKE,QAAU,MACfF,KAAK6F,kBAAoBC,EAAqB,YAAa,CAAEF,IAAK5F,KAAK+F,W,MAGpE,GAAI/F,KAAKiG,WAAa7F,EAAM4F,OAAShG,KAAKiG,UAAW,CACxDjG,KAAKE,QAAU,MACfF,KAAK6F,kBAAoBC,EAAqB,YAAa,CAAEL,IAAKzF,KAAKiG,W,CAIzE,GAAIjG,KAAKkG,UAAW,CAClB,MAAMC,EAAcnG,KAAKkG,UAAU9F,GACnC,GAAI+F,EAAa,CACfnG,KAAKE,QAAU,MACfF,KAAK6F,kBAAoBM,C,EAK7BnG,KAAKG,eAAiBH,KAAKE,QAAU,UAAY,QACjDF,KAAK4D,qBAAuB5D,KAAK6F,iB,CA2HnC,MAAAO,GACE,MAAMC,EAAarG,KAAKQ,IAAM,aAAeR,KAAKsG,KAElD,MAAMrE,KAAEA,EAAIC,cAAEA,EAAaC,YAAEA,GAAgBnC,KAAK8B,WAAW,CAC3DpB,KAAMV,KAAKU,KACXC,OAAQX,KAAKG,eACbG,OAAQN,KAAKM,OACbM,UAAWZ,KAAKY,UAChBC,SAAUb,KAAKa,SACfsC,QAASnD,KAAKC,YAGhB,OACEsG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBAERzG,KAAK0G,OACJH,EAAA,SAAAC,IAAA,2CACEC,MAAOE,EACL,6BACA,CACE,oBAAqB3G,KAAKa,SAC1B,sBAAuBb,KAAKa,UAE9B,CACE,cAAeb,KAAKU,OAAS,QAC7B,cAAeV,KAAKU,OAAS,SAC7B,cAAeV,KAAKU,OAAS,UAGjCkG,QAASP,GAETE,EAAA,QAAAC,IAAA,2CAAMF,KAAK,SAAStG,KAAK0G,OACxB1G,KAAKe,UAAYwF,EAAA,QAAAC,IAAA,kDAKtBD,EAAA,OAAAC,IAAA,2CAAKC,MAAOxE,KACVsE,EAAA,YAAAC,IAAA,2CACEK,IAAKC,GAAO9G,KAAKwD,YAAcsD,EAC/BC,GAAIV,EACJI,MAAOvE,IACPoE,KAAMtG,KAAKsG,KACXjG,KAAML,KAAKK,KACX2G,KAAMhH,KAAKgH,KACXnG,SAAUb,KAAKa,SACfC,SAAUd,KAAKc,SACfC,SAAUf,KAAKe,SACfkG,YAAajH,KAAKiH,YAClBlB,UAAW/F,KAAK+F,UAChBE,UAAWjG,KAAKiG,UAAS,eACXjG,KAAKW,SAAW,QAAO,gBACtBX,KAAKe,SAAQ,kBACXf,KAAKkH,WAAU,mBACdlH,KAAKmH,YACvB/G,MAAOJ,KAAKI,MACZgH,QAASlG,IACP,MAAMmG,EAASnG,EAAMmG,OACrBrH,KAAKI,MAAQiH,EAAOjH,MACpBJ,KAAKsH,SAASlG,KAAKF,GACnBlB,KAAKyB,gBACL,GAAIzB,KAAKO,SAAU,CACjBP,KAAKyD,c,GAGTxC,SAAUjB,KAAKiB,SACfI,QAASrB,KAAKqB,QACdE,OAAQvB,KAAKuB,OACbG,UAAW1B,KAAK0B,UAChBE,QAAS5B,KAAK4B,UAGf5B,KAAKgB,aACJuF,EAAA,OAAAC,IAAA,2CAAKC,MAAOtE,KACTnC,KAAKI,MAAM4F,OACXhG,KAAKiG,UAAY,IAAIjG,KAAKiG,YAAc,MAM7CjG,KAAKuH,aAAevH,KAAK4D,sBAAwB5D,KAAK6F,oBACtDU,EAAA,OAAAC,IAAA,2CACEC,MAAOE,EACL,0CACA,CACE,sCAAuC3G,KAAKa,UAAYb,KAAKG,iBAAmB,UAChF,oCAAqCH,KAAKa,WAAab,KAAKG,iBAAmB,UAAYH,KAAKE,SAChG,sCAAuCF,KAAKa,UAAYb,KAAKG,iBAAmB,UAChF,sCAAuCH,KAAKa,UAAYb,KAAKG,iBAAmB,UAChF,mCAAoCH,KAAKa,UAAYb,KAAKG,iBAAmB,OAC7E,sCAAuCH,KAAKa,UAE9C,CACE,cAAeb,KAAKU,OAAS,QAC7B,cAAeV,KAAKU,OAAS,SAC7B,cAAeV,KAAKU,OAAS,YAI/BV,KAAKE,QAAUF,KAAK6F,kBAAoB7F,KAAKG,iBAAmB,QAAUH,KAAK4D,qBAAuB5D,KAAKuH,a","ignoreList":[]}

package/dist/bromcom-ui/p-e2f468ab.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["popoverCss","BcmPopoverStyle0","Popover","constructor","hostRef","this","size","placement","trigger","hoverDelay","open","togglePopover","bcmPopoverOpen","emit","bcmPopoverClose","updatePosition","showPopover","clearTimeout","hoverTimeout","setTimeout","hidePopover","handleSlotChange","slot","el","shadowRoot","querySelector","elements","assignedElements","targetElement","removeEventListener","addEventListener","setAttribute","toString","popoverElement","cleanupAutoUpdate","autoUpdate","handleOutsideClick","event","contains","target","async","arrowElement","x","y","middlewareData","computePosition","middleware","offset","flip","fallbackPlacements","shift","padding","arrow","element","Object","assign","style","left","top","arrowX","arrowY","basePlacement","split","staticSide","right","bottom","popoverClass","tv","slots","box","header","content","variants","small","medium","large","isOpen","true","false","defaultVariants","connectedCallback","document","disconnectedCallback","_a","call","openPopup","closePopup","render","h","key","class","onSlotchange","part","role","ref","name","headerText","message"],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n *   <bcm-button>Click Me</bcm-button>\n *   <span slot=\"header\">Header</span>\n *   <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n *   <bcm-button>Toggle Me</bcm-button>\n *   <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n *   const popover = document.querySelector('#my-popover');\n *   popover.openPopup(); // Opens the popover\n *   popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n    tag: 'bcm-popover',\n    styleUrl: 'popover.css',\n    shadow: true,\n})\nexport class Popover implements ComponentInterface {\n    @Element() el: HTMLElement;\n    private targetElement: HTMLElement;\n    private popoverElement: HTMLElement;\n    private arrowElement: HTMLElement;\n    private hoverTimeout: any;\n    private cleanupAutoUpdate: () => void;\n    /**\n     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n     * Controls the text size and padding of the popover content.\n     * Default: 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n    /**\n     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n     * Determines where the popover appears around the trigger element.\n     * Default: 'top'\n     */\n    @Prop()\n    placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n    /**\n     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n     * Default: 'click'\n     */\n    @Prop()\n    trigger: 'click' | 'hover' = 'click';\n    /**\n     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n     * Adds a delay to prevent flickering on quick mouse movements.\n     * Default: 150\n     */\n    @Prop()\n    hoverDelay: number = 150;\n    /**\n     * @prop {boolean} open - Indicates whether the popover is currently open.\n     * Can be set programmatically or toggled by user interaction. Mutable.\n     * Default: false\n     */\n    @Prop({ mutable: true })\n    open: boolean = false;\n    /**\n     * @prop {string} headerText - Custom text for the popover header.\n     * Used as fallback content if the 'header' slot is not provided.\n     */\n    @Prop()\n    headerText: string;\n    /**\n     * @prop {string} message - Custom text for the popover content.\n     * Used as fallback content if the 'content' slot is not provided.\n     */\n    @Prop()\n    message: string;\n    /**\n     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n     * Useful for tracking when the popover becomes visible.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverOpen: EventEmitter<void>;\n\n    /**\n     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n     * Useful for tracking when the popover is hidden.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverClose: EventEmitter<void>;\n\n    connectedCallback() {\n        document.addEventListener('click', this.handleOutsideClick);\n    }\n\n    disconnectedCallback() {\n        document.removeEventListener('click', this.handleOutsideClick);\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n        }\n        this.cleanupAutoUpdate?.();\n        this.cleanupAutoUpdate = null;\n        clearTimeout(this.hoverTimeout);\n    }\n\n    private togglePopover = () => {\n        this.open = !this.open;\n        if (this.open) {\n            this.bcmPopoverOpen.emit();\n        } else {\n            this.bcmPopoverClose.emit();\n        }\n        this.updatePosition();\n    };\n\n    private showPopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = true;\n            this.bcmPopoverOpen.emit();\n            this.updatePosition();\n        }, this.hoverDelay);\n    };\n\n    private hidePopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = false;\n            this.bcmPopoverClose.emit();\n        }, this.hoverDelay);\n    };\n\n    /**\n     * @method {Promise<void>} openPopup - Programmatically opens the popover.\n     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is opened.\n     */\n    @Method()\n    async openPopup() {\n        this.showPopover();\n    }\n\n    /**\n     * @method {Promise<void>} closePopup - Programmatically closes the popover.\n     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is closed.\n     */\n    @Method()\n    async closePopup() {\n        this.hidePopover();\n    }\n\n    private handleSlotChange = () => {\n        const slot = this.el.shadowRoot.querySelector('slot');\n        const elements = slot.assignedElements();\n        this.targetElement = elements[0] as HTMLElement;\n\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n            if (this.trigger === 'click') {\n                this.targetElement.addEventListener('click', this.togglePopover);\n                this.targetElement.setAttribute('aria-expanded', this.open.toString());\n            }\n\n            if (this.trigger === 'hover') {\n                this.targetElement.addEventListener('mouseenter', this.showPopover);\n                this.targetElement.addEventListener('mouseleave', this.hidePopover);\n            }\n\n            if (this.popoverElement && !this.cleanupAutoUpdate) {\n                this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n            }\n        }\n    };\n\n    private handleOutsideClick = (event: Event) => {\n        if (!this.el.contains(event.target as Node) && this.open) {\n            this.open = false;\n        }\n    };\n\n    private updatePosition = async () => {\n        if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n        const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n            placement: this.placement,\n            middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n        });\n\n        Object.assign(this.popoverElement.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n        const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n        const staticSide = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n        }[basePlacement];\n\n        Object.assign(this.arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            [staticSide]: '-4px',\n        });\n    };\n\n    private popoverClass = tv({\n        slots: {\n            box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n            header: 'font-semibold text-color',\n            content: 'font-normal text-color',\n            arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n        },\n        variants: {\n            size: {\n                small: { box: 'text-size-3' },\n                medium: { box: 'text-size-4' },\n                large: { box: 'text-size-5' },\n            },\n            isOpen: {\n                true: { box: 'flex' },\n                false: { box: 'hidden' },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            isOpen: false,\n        },\n    });\n\n    render() {\n        const { box, header, content, arrow } = this.popoverClass({\n            isOpen: this.open,\n            size: this.size,\n        });\n\n        return (\n            <div class=\"relative\">\n                <slot onSlotchange={() => this.handleSlotChange()}></slot>\n                <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n                    <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n                    <div class={header()} part=\"header\">\n                        <slot name=\"header\">{this.headerText}</slot>\n                    </div>\n                    <div class={content()} part=\"content\">\n                        <slot name=\"content\">{this.message}</slot>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-fe7e2cfd.entry.js.map

@@ -1 +0,0 @@
-{"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":[]}