bromcom-ui-next 0.1.20 → 0.1.21

package/dist/bromcom-ui/p-9ba07f12.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["radioGroupCss","BcmRadioGroupStyle0","BcmRadioGroup","constructor","hostRef","this","disabled","required","error","size","direction","radioGroupName","generateId","handleSlotChange","radios","forEach","radio","name","_a","radioGroupClass","tv","slots","host","container","variants","small","medium","large","horizontal","vertical","defaultVariants","querySelectorAll","componentWillLoad","value","updateRadios","setClear","checked","resetCaption","captionText","undefined","handleValueChange","newValue","handleRadioChange","event","target","r","bcmRadioGroupChange","emit","element","render","h","key","class","label","classNames","onSlotchange"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":[null,"/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n    tag: 'bcm-radio-group',\n    styleUrl: 'radio-group.css',\n    shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n    @Element() host: HTMLBcmRadioGroupElement;\n\n    /**\n     * The name attribute for the radio group, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The currently selected value of the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio group and its radio buttons are disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Whether the radio group is required in a form.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    required: boolean = false;\n\n    /**\n     * Whether the radio group is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * The label text to display above the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n     * @prop\n     * @defaultValue 'vertical'\n     */\n    @Prop()\n    direction: 'horizontal' | 'vertical' = 'vertical';\n\n    /**\n     * Optional caption text to display below the radio group, often used for error messages or hints.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    captionText?: string;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioGroupChange',\n    })\n    bcmRadioGroupChange: EventEmitter<any>;\n\n    private readonly radioGroupName = generateId('radio-group-name');\n\n    get radios() {\n        return this.host.querySelectorAll('bcm-radio');\n    }\n\n    componentWillLoad() {\n        if (this.value) {\n            this.updateRadios(this.value);\n        }\n    }\n\n    /**\n     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n     * @method\n     */\n    @Method()\n    async setClear() {\n        this.value = \"\";\n        this.radios?.forEach(radio => {\n            radio.checked = false;\n        });\n    }\n\n    /**\n     * Resets the error state and caption.\n     * @method\n     */\n    @Method()\n    async resetCaption() {\n        this.error = false;\n        this.captionText = undefined;\n    }\n\n    private handleSlotChange = () => {\n        this.radios.forEach(radio => {\n            radio.size = this.size;\n            radio.name = this.name ?? this.radioGroupName;\n            radio.disabled = this.disabled;\n            radio.error = this.error;\n        });\n    };\n\n    @Watch('value')\n    handleValueChange(newValue: string) {\n        this.updateRadios(newValue);\n    }\n\n    @Listen('bcmRadioChange', { capture: true })\n    handleRadioChange(event: CustomEvent) {\n        const radio = event.target as HTMLBcmRadioElement;\n        const radios = this.host.querySelectorAll('bcm-radio');\n        radios.forEach(r => {\n            if (r !== radio) {\n                r.checked = false;\n            }\n        });\n        this.bcmRadioGroupChange.emit({\n            value: radio.value,\n            element: radio,\n        });\n    }\n\n    private updateRadios(value: string) {\n        this.radios.forEach(radio => {\n            radio.checked = radio.value === value;\n        });\n    }\n\n    private radioGroupClass = tv({\n        slots: {\n            host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n            container: ['flex'],\n        },\n        variants: {\n            size: {\n                small: {\n                    host: 'gap-1.5',\n                    container: 'gap-1.5',\n                },\n                medium: {\n                    host: 'gap-2',\n                    container: 'gap-2',\n                },\n                large: {\n                    host: 'gap-2.5',\n                    container: 'gap-2.5',\n                },\n            },\n            direction: {\n                horizontal: {\n                    container: ['flex-row flex-wrap'],\n                },\n                vertical: {\n                    container: ['flex-col'],\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            direction: 'vertical',\n        },\n    });\n\n    render() {\n        const { host, container } = this.radioGroupClass({\n            size: this.size,\n            direction: this.direction,\n        });\n        return (\n            <div class={host()}>\n                {this.label && (\n                    <label\n                        class={classNames(\n                            'input-label font-medium',\n                            {\n                                'text-color-label': !this.disabled,\n                                'text-color-disabled': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        <slot name=\"label\">{this.label}</slot>\n                        {this.required && <span>*</span>}\n                    </label>\n                )}\n                <div class={container()}>\n                    <slot onSlotchange={this.handleSlotChange}></slot>\n                </div>\n\n                {this.captionText && (\n                    <div\n                        class={classNames(\n                            'input-caption-text font-regular mt-1',\n                            {\n                                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        {this.captionText}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o,g as i}from"./p-9d0aeb92.js";import{c as t}from"./p-5fcf77f9.js";const a=".block{display:block}:host{display:block}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const d=a;const s=class{constructor(o){e(this,o);this.bcmRadioChange=r(this,"bcmRadioChange",1);this.bcmBlur=r(this,"bcmBlur",1);this.bcmFocus=r(this,"bcmFocus",1);this.checked=false;this.size="medium";this.disabled=false;this.readonly=false;this.labelPosition="right";this.error=false;this.getRadioClass=t({slots:{container:"bcm-ui-element bcm-radio group",dot:"absolute rounded-full transition bg-[--bcm-radio-checked]",dotContainer:"relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]",labelClass:"font-medium text-[--bcm-radio-text-color]"},variants:{size:{small:{container:"gap-2",dotContainer:"size-3.5",dot:"size-2",labelClass:"text-size-4"},medium:{container:"gap-2.5",dotContainer:"size-4",dot:"size-2.5",labelClass:"text-size-5"},large:{container:"gap-3",dotContainer:"size-[18px]",dot:"size-3",labelClass:"text-size-6"}},checked:{true:{dot:"opacity-100"},false:{dot:"opacity-0"}},disabled:{true:{container:"cursor-not-allowed"},false:{container:"cursor-pointer focus-visible:ring"}},readonly:{true:{container:"cursor-default pointer-events-none",dot:"opacity-100",dotContainer:"shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]"},false:""},labelPosition:{left:{container:"inline-flex flex-row-reverse items-center"},right:{container:"inline-flex flex-row items-center"}}}},{twMerge:false})}handleClick(){if(this.readonly||this.disabled)return;if(!this.checked){this.checked=true;this.bcmRadioChange.emit()}}getRadioStyle(){const e={"--bcm-radio-bg":"var(--bcm-ui-color-background-default-default)","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-primary)","--bcm-radio-checked":"var(--bcm-ui-color-background-primary-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};const r={"--bcm-radio-bg":"var(--bcm-ui-color-background-palette-red-default)","--bcm-radio-border":"var(--bcm-ui-color-border-error)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-error)","--bcm-radio-checked":"var(--bcm-ui-color-background-error-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};const o={"--bcm-radio-bg":"var(--bcm-ui-color-background-disabled-default)","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-disabled)","--bcm-radio-checked":"var(--bcm-ui-color-background-disabled-default)","--bcm-radio-text-color":"var(--bcm-ui-color-text-disabled)"};const i={"--bcm-radio-bg":"transparent","--bcm-radio-border":"var(--bcm-ui-color-border-disabled)","--bcm-radio-checked":"var(--bcm-ui-color-background-default-default)","--bcm-radio-border-hover":"var(--bcm-ui-color-border-disabled)","--bcm-radio-text-color":"var(--bcm-ui-color-text-default)"};return Object.assign(Object.assign(Object.assign(Object.assign({},e),this.error&&r),this.disabled&&o),this.readonly&&i)}render(){const{container:e,dot:r,dotContainer:i,labelClass:t}=this.getRadioClass({size:this.size,checked:this.checked,disabled:this.disabled,readonly:this.readonly,labelPosition:this.labelPosition});return o("label",{key:"4b53e856e66a8f35fddca847ea0dad4f749d9ad1",class:e(),style:this.getRadioStyle()},o("input",{key:"04506f00b7b0773c43f6d3cf65967d83f11dc1ed","aria-label":this.label,role:"radio","aria-checked":this.checked.toString(),type:"radio",name:this.name,value:this.value,disabled:this.disabled,readOnly:this.readonly,checked:this.checked,class:"appearance-none sr-only",onClick:()=>this.handleClick(),onFocus:e=>this.bcmFocus.emit(e),onBlur:e=>this.bcmBlur.emit(e)}),o("div",{key:"9da73fa48763a71a9eafc6ed9bca5812317b8268",class:i()},o("div",{key:"2126018bf6f5eef062be02cec1f081daf939c9df",class:r()})),o("span",{key:"86f5e2485c72b27892054ffa0082307f025ad31a",class:t()},o("slot",{key:"de05d13a1e3d88b7a6f7f7e9355d7b36d740709f"},this.label)))}get host(){return i(this)}};s.style=d;export{s as bcm_radio};
-//# sourceMappingURL=p-a02e437c.entry.js.map

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":"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","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-b6dd459b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e}from"./p-9d0aeb92.js";import{c as i}from"./p-12360e4c.js";const s=":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const a=s;const r=class{constructor(e){t(this,e);this.shape="ellipse";this.size="medium";this.icon="fas fa-user";this.blink=false;this.isFallback=false}getFirstLetters(t){const e=t.split(" ");const i=e.map((t=>t.charAt(0).toUpperCase())).join("");return i.substring(0,2)}render(){const t=i("bcm-avatar bcm-ui-element bcm-ui-content-display","uppercase font-medium","inline-flex items-center justify-center","bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]",{"shape-ellipse rounded-full":this.shape==="ellipse","shape-square rounded-[--bcm-ui-radius]":this.shape==="square","size-small text-size-4 w-6 h-6":this.size==="small","size-medium text-size-5 w-8 h-8":this.size==="medium","size-large text-size-6 w-10 h-10":this.size==="large"});const s=i("badge",{"top-0 right-0":this.shape==="ellipse","-top-0.5 -right-0.5":this.shape==="square"});const a=i("image w-full h-full",{"rounded-full":this.shape==="ellipse","rounded-[--bcm-ui-radius]":this.shape==="square"});let r={};if(this.color){const t=this.color.includes("-");const e=t?this.color.split("-")[0]:this.color;const i=`var(--bcm-ui-color-background-palette-${e}-default)`;const s=`var(--bcm-ui-color-text-palette-${e}`;r={"--bcm-avatar-bg":i,"--bcm-avatar-text":s}}const h=!Object.keys(["small","medium","large"]).includes(this.size)?{width:`${this.size}px`,height:`${this.size}px`,fontSize:`${+this.size/2}px`}:{};const l=()=>{if(this.isFallback){if(this.name){return this.getFirstLetters(this.name)}else{return e("i",{class:this.icon})}}else if(this.image){return e("img",{class:a,onError:()=>this.isFallback=true,src:this.image,alt:this.alt,"aria-label":this.alt||this.name||"Avatar"})}else if(this.name){return this.getFirstLetters(this.name)}else{return e("i",{class:this.icon})}};return e("div",{role:"img","aria-label":this.alt||this.name||"Avatar",class:t,style:Object.assign(Object.assign({},r),h)},e(l,null),this.status&&e("bcm-badge",{class:s,status:this.status,blink:this.blink,"aria-hidden":"true"}),e("slot",null))}};r.style=a;export{r as bcm_avatar};
-//# sourceMappingURL=p-b6dd459b.entry.js.map

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-ceaa2fc5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,g as r}from"./p-9d0aeb92.js";import{c as a}from"./p-5fcf77f9.js";import{c as s}from"./p-12360e4c.js";import{g as n}from"./p-ba2410ef.js";import{s as l,g as c,d}from"./p-13a245f6.js";import{a as h,o as b,f as u,s as f,c as m}from"./p-50133556.js";const p={save:{text:"Save",status:"success",icon:"far fa-save",iconPosition:"prefix",kind:"primary"},ok:{text:"Ok",status:"success",icon:"far fa-check",iconPosition:"prefix"},new:{text:"New",status:"success",icon:"far fa-plus",iconPosition:"prefix"},add:{text:"Add",status:"success",icon:"far fa-plus",iconPosition:"prefix"},create:{text:"Create",status:"success",icon:"far fa-plus",iconPosition:"prefix"},prev:{text:"Prev",status:"default",icon:"far fa-arrow-left",iconPosition:"prefix"},next:{text:"Next",status:"default",icon:"far fa-arrow-right",iconPosition:"suffix"},apply:{text:"Apply",status:"default",icon:"far fa-check-circle",iconPosition:"prefix"},submit:{text:"Submit",status:"default",icon:"far fa-save",iconPosition:"prefix"},send:{text:"Send",status:"success",icon:"far fa-paper-plane",iconPosition:"prefix"},delete:{text:"Delete",status:"error",icon:"far fa-trash",iconPosition:"prefix"},cancel:{text:"Cancel",status:"error",icon:"far fa-times",iconPosition:"prefix"},decline:{text:"Decline",status:"error",icon:"far fa-ban",iconPosition:"prefix"},close:{text:"Close",status:"error",icon:"far fa-times-circle",iconPosition:"prefix"},archive:{text:"Archive",status:"error",icon:"far fa-folder-open",iconPosition:"prefix"},remove:{text:"Remove",status:"error",icon:"far fa-minus-circle",iconPosition:"prefix"},edit:{text:"Edit",status:"default",icon:"far fa-edit",iconPosition:"prefix"},export:{text:"Export",status:"default",icon:"far fa-sign-out",iconPosition:"prefix"},import:{text:"Import",status:"default",icon:"far fa-sign-in",iconPosition:"prefix"},filter:{text:"Filter",status:"default",icon:"far fa-filter",iconPosition:"prefix"},update:{text:"Update",status:"default",icon:"far fa-sync",iconPosition:"prefix"},reset:{text:"Reset",status:"default",icon:"far fa-sync",iconPosition:"prefix"},download:{text:"Download",status:"default",icon:"far fa-download",iconPosition:"prefix"}};const x=".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-final-border-color\\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\\[--bcm-final-bg-color\\]{background-color:var(--bcm-final-bg-color)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\\[--bcm-final-text-color\\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-final-hover-bg-color\\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-final-active-bg-color\\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";const g=x;const w=class{constructor(i){t(this,i);this.bcmClick=e(this,"bcmClick",1);this.bcmFocus=e(this,"bcmFocus",1);this.bcmBlur=e(this,"bcmBlur",1);this.kind="primary";this.size="medium";this.status="default";this.iconPosition="prefix";this.iconOnly=false;this.fullWidth=false;this.type="button";this.loading=false;this.disabled=false;this.active=false;this.handleClick=t=>{if(!this.disabled&&!this.loading){this.bcmClick.emit(t)}};this.handleFocus=t=>{this.bcmFocus.emit(t)};this.handleBlur=t=>{this.bcmBlur.emit(t)};this.buttonClass=a({base:"bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0",variants:{size:{small:"text-size-4 py-px px-2 min-h-6",medium:"text-size-5 py-0.5 px-3 min-h-8",large:"text-size-6 py-1 px-3 min-h-10"},kind:{primary:"kind-primary",ghost:"kind-ghost",text:"kind-text",outline:"kind-outline"},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled",false:["cursor-pointer","bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]","hover:bg-[--bcm-final-hover-bg-color]","active:bg-[--bcm-final-active-bg-color]","focus-visible:ring"]},loading:{true:""},position:{first:"position-first",middle:"position-middle",last:"position-last"}},defaultVariants:{size:"medium",kind:"primary",fullWidth:false,disabled:false,loading:false}},{twMerge:false})}get buttonText(){return this.text||(this.variant?p[this.variant].text:"")}get buttonIcon(){if(this.variant&&p[this.variant].icon){return{icon:p[this.variant].icon,position:p[this.variant].iconPosition||"prefix"}}return{icon:this.icon,position:this.iconPosition}}get buttonStatus(){return this.variant?p[this.variant].status:this.status}get buttonStyles(){const t=this.buttonStatus==="default"?"primary":this.buttonStatus;const e={primary:{"--bcm-button-bg":`var(--bcm-ui-color-background-${t}-default)`,"--bcm-button-bg-hover":`var(--bcm-ui-color-background-${t}-hover)`,"--bcm-button-bg-active":`var(--bcm-ui-color-background-${t}-active)`,"--bcm-button-border":"transparent","--bcm-button-text":"var(--bcm-ui-color-text-base)"},outline:{"--bcm-button-bg":"var(--bcm-ui-color-background-default-default)","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":`var(--bcm-ui-color-border-${this.buttonStatus})`,"--bcm-button-text":`var(--bcm-ui-color-text-${this.buttonStatus})`},ghost:{"--bcm-button-bg":"transparent","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":"transparent","--bcm-button-text":`var(--bcm-ui-color-text-${this.buttonStatus})`},text:{"--bcm-button-bg":"transparent","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":"transparent","--bcm-button-text":`var(--bcm-ui-color-text-${t})`}};const i=e[this.kind];const o={"--bcm-final-text-color":`var(--bcm-button-custom-text-color, ${i["--bcm-button-text"]})`,"--bcm-final-border-color":`var(--bcm-button-custom-border-color, ${i["--bcm-button-border"]})`,"--bcm-final-bg-color":`var(--bcm-button-custom-bg-color, ${i["--bcm-button-bg"]})`,"--bcm-final-hover-bg-color":`var(--bcm-button-custom-hover-bg-color, ${i["--bcm-button-bg-hover"]})`,"--bcm-final-active-bg-color":`var(--bcm-button-custom-active-bg-color, ${i["--bcm-button-bg-active"]})`};return Object.assign(Object.assign({},i),o)}render(){const{icon:t,position:e}=this.buttonIcon;return i(o,{key:"821f52c3a042fed2dce63e90152aebe3e9f40dc5"},i("button",{key:"429988208144ebd9b52f1543825860e9fdf6c538",type:this.type,disabled:this.disabled||this.loading,"aria-label":this.label,"aria-expanded":this.expanded,"aria-controls":this.controls,"aria-disabled":this.disabled,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,style:this.buttonStyles,class:this.buttonClass({size:this.size,kind:this.kind,fullWidth:this.fullWidth,disabled:this.disabled,loading:this.loading,position:this.position})},this.loading&&i("slot",{key:"525e1f9ffdc301e0bba2939d9fece560b377d9a3",name:"loading"}),i("span",{key:"530f53a3d0f483555752f5ac95d5f029faf03a8d"},i("slot",{key:"61b27a37dce9588633f45f18d025c207ee9d23f7",name:"prefix"},e==="prefix"&&t&&i("i",{key:"6b0d757356f94f0d1ed4731175f2340dfdb3ba45",class:" leading-none "+t}))),i("slot",{key:"8b014d1f25d7c8387c6a3b18474207695a911e12"},this.buttonText),i("span",{key:"9e9c42c69be3891d2720dbd9882ea418a90802b8"},i("slot",{key:"fc676b39c8c79225d09c9cd18506087bef811acc",name:"suffix"},e==="suffix"&&t&&i("i",{key:"0ad46cc5204af2a6525cc0156d828c57bd5078a5",class:" leading-none "+t})))))}};w.style=g;const v=".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";const y=v;const k=class{constructor(i){t(this,i);this.bcmOpen=e(this,"bcmOpen",7);this.bcmClose=e(this,"bcmClose",7);this.bcmBeforeOpen=e(this,"bcmBeforeOpen",7);this.bcmBeforeClose=e(this,"bcmBeforeClose",7);this.open=false;this.size="medium";this.position="right";this.fullWidth=false;this.noHeader=false;this.drawerClass=a({slots:{backdrop:"fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300",wrapper:"bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col",header:"flex justify-between items-center bg-color-default text-color-default",title:"font-semibold m-0 text-size-6",closeButton:"text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active",content:"overflow-y-auto flex-grow"},variants:{open:{true:{backdrop:"opacity-100 visible"},false:{backdrop:"opacity-0 invisible"}},position:{left:{wrapper:"top-0 left-0 bottom-0"},right:{wrapper:"top-0 right-0 bottom-0"},top:{wrapper:"top-0 left-0 right-0"},bottom:{wrapper:"bottom-0 left-0 right-0"}},size:{small:{header:"py-3 px-4",content:"p-4"},medium:{header:"py-3 px-4",content:"p-4"},large:{header:"py-3 px-4",content:"p-4"}},noHeader:{true:{header:"hidden"}}},compoundVariants:[{open:true,position:["left","right"],class:{wrapper:"translate-x-0"}},{open:true,position:["top","bottom"],class:{wrapper:"translate-y-0"}},{open:false,position:"left",class:{wrapper:"-translate-x-full"}},{open:false,position:"right",class:{wrapper:"translate-x-full"}},{open:false,position:"top",class:{wrapper:"-translate-y-full"}},{open:false,position:"bottom",class:{wrapper:"translate-y-full"}}]},{twMerge:false})}handleOpenChange(t){if(t){document.body.style.overflow="hidden";this.bcmOpen.emit()}else{document.body.style.overflow="";this.bcmClose.emit()}}handleKeyDown(t){if(t.key==="Escape"&&this.open){this.hide()}}async show(){const t=this.bcmBeforeOpen.emit();if(!t.defaultPrevented){this.open=true}}async hide(){const t=this.bcmBeforeClose.emit();if(!t.defaultPrevented){this.open=false}}disconnectedCallback(){document.body.style.overflow=""}getWrapperStyle(){const t={};if(this.fullWidth){if(this.position==="left"||this.position==="right"){t.width="100vw"}else{t.height="100vh"}return t}if(this.position==="left"||this.position==="right"){switch(this.size){case"small":t.width="320px";break;case"medium":t.width="480px";break;case"large":t.width="1064px";break}}else{switch(this.size){case"small":t.height="40vh";break;case"medium":t.height="60vh";break;case"large":t.height="90vh";break}}return t}render(){const{backdrop:t,wrapper:e,header:o,title:r,closeButton:a,content:s}=this.drawerClass({open:this.open,position:this.position,size:this.size,noHeader:this.noHeader});return i("div",{key:"6311b0bed989d41cf504487545f414ce5b881749",part:"base"},i("div",{key:"5aa597edf8d0d5523570fbb326072c2e02c813b0",part:"backdrop",class:t(),onClick:()=>this.hide()}),i("div",{key:"736cc10ae7341ad5139bc37ee9265801e0da6a6c",part:"wrapper",class:e(),style:this.getWrapperStyle(),role:"dialog","aria-modal":"true","aria-hidden":!this.open?"true":"false","aria-label":this.headerText},i("div",{key:"ddaf3499e8709f0ad8a58891baacfa9c5a595973",part:"header",class:o()},i("h2",{key:"0124009ad323dfb4fca18618d750789a0c805ebd",part:"title",class:r()},i("slot",{key:"95813a9ea32872ab5cd00f5d641cdaef8d43504d",name:"header"},this.headerText)),i("button",{key:"7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d",part:"close-button",class:a(),onClick:()=>this.hide(),"aria-label":"Close"},i("bcm-icon",{key:"d61996a289c3a0727475a3e7798866b874292885",name:"fa-solid fa-xmark"}))),i("div",{key:"6650b5e079d31b2bd372f80a648256761bc78a14",part:"content",class:s()},i("slot",{key:"8858d3e8e12eeeb0745a3aee54507f104bd6506f"})),i("div",{key:"97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80",part:"footer"},i("slot",{key:"ee90d5b261eef5e435d8247717e5fa79593893f3",name:"footer"}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};k.style=y;const z=".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";const C=z;const P=class{constructor(i){t(this,i);this.bcmDropdownChange=e(this,"bcmDropdownChange",1);this.isReady=false;this.dropdownItems=[];this.dropdownClass=a({base:"dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto"});this.handleSlotChange=()=>{this.dropdownItems=Array.from(this.host.querySelectorAll("bcm-dropdown-item"));if(this.dropdownItems.length===0){console.warn("No dropdown items found in dropdown component")}}}componentDidLoad(){const t=this.host.shadowRoot.querySelector("bcm-button");if(t){this.buttonRef=t;this.isReady=true}}handleDropdownItemChange(t){var e;const{element:i,selected:o}=t===null||t===void 0?void 0:t.detail;(e=this.dropdownItems)===null||e===void 0?void 0:e.forEach((t=>{if(t!=i){t.selected=false}}));this.bcmDropdownChange.emit({element:i,selected:o})}render(){return i(o,{key:"7c13b65d8c966a4a2de522aa9d765cb7933bcd81"},i("bcm-button",{key:"7511bf043370dd8360c458800c1518205c35ac3c",kind:"outline"},i("span",{key:"1a67377235ffe4b5989adab0b185585e9e4d1080",part:"text"},this.text)),this.isReady&&i("bcm-linked",{key:"78a528e16b5c76409a9546e7f2523b9535d47276",targetElement:this.buttonRef},i("div",{key:"afec0593ed669692ab2e97e58a2e918689fc9175",part:"dropdown-container",class:this.dropdownClass()},i("slot",{key:"4f94568837c8c32619aa6c586b35c8d8bb60a74c",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}};P.style=C;const j=".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";const I=j;const $=class{constructor(i){t(this,i);this.bcmDropDownItemChange=e(this,"bcmDropDownItemChange",1);this.selected=false;this.error=false;this.disabled=false;this.dropdownItemClass=a({base:"dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color",variants:{selected:{true:"bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]",false:"hover:bg-[var(--bcm-ui-color-background-base-hover)]"},error:{true:"bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]",false:""},disabled:{true:"",false:""}},defaultVariants:{selected:false,error:false,disabled:false}},{twMerge:false})}handleClick(){this.selected=true;this.bcmDropDownItemChange.emit({element:this.host,selected:this.selected})}render(){var t;return i("div",{key:"3c989e05b18e183481b760f24d3d37bae4a68eea","aria-checked":this.selected,class:this.dropdownItemClass({selected:this.selected,error:this.error}),onClick:()=>this.handleClick()},i("slot",{key:"9edf937944435ae070541bd5952fbbda1ffe5d9d",name:"left-content"},this.icon&&i("bcm-icon",{key:"1b452c2a57af6d3a7c85bd9e48107f24224eae4b","icon-name":this.icon})),i("div",{key:"d4114f8e306accdc373e753d02870ad21e65c8b1",class:"flex flex-row text-pretty w-full"},i("slot",{key:"0f1a8d78b7c91f117d5389d8bdf1efb894168df4"},this.text)),i("slot",{key:"e428dadc7ca757302c47431a3dda05895387a9f5",name:"right-content"},(t=this.rightIcons)===null||t===void 0?void 0:t.map((t=>i("bcm-icon",{"icon-name":t})))))}get host(){return r(this)}};$.style=I;const S=(t,e)=>{var i;const o=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`slot[name="${e}"]`);if(!o)return false;const r=o.assignedNodes();return r.length>0};const Y='.visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}';const T=Y;const D=class{constructor(o){t(this,o);this.bcmInput=e(this,"bcmInput",1);this.bcmChange=e(this,"bcmChange",1);this.bcmFocus=e(this,"bcmFocus",1);this.bcmBlur=e(this,"bcmBlur",1);this.bcmKeyDown=e(this,"bcmKeyDown",1);this.bcmKeyUp=e(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.isPasswordVisible=false;this.value="";this._id=n("input");this.size="medium";this.status="default";this.fullWidth=false;this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.useNativeValidation=true;this.onInput=t=>{const e=t.target;this.value=e.value;this.bcmInput.emit(t);this.validateInput()};this.onChange=t=>{this.bcmChange.emit(t)};this.onFocus=t=>{this.isFocused=true;this.bcmFocus.emit(t)};this.onBlur=t=>{this.isFocused=false;this.bcmBlur.emit(t);this.validateInput()};this.onKeyDown=t=>{this.bcmKeyDown.emit(t)};this.onKeyUp=t=>{this.bcmKeyUp.emit(t)};this.styleClass=a({slots:{base:["bcm-input bcm-input__container","bg-[--bcm-ui-color-background-base-default]","text-[--bcm-ui-color-text-default]","border border-solid rounded","flex items-center justify-between","transition-colors duration-200","px-2"],inputClass:["input","w-full flex-1","border-0 outline-0 bg-transparent","appearance-none text-ellipsis","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"]},variants:{size:{small:{base:"",inputClass:"text-size-4  h-6"},medium:{base:"",inputClass:"text-size-5  h-8"},large:{base:"",inputClass:"text-size-6  h-10"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed",false:""},focused:{true:{base:""}}},defaultVariants:{size:"medium",status:"default",fullWidth:false,disabled:false,focused:false}},{twMerge:false});this.togglePasswordVisibility=()=>{this.isPasswordVisible=!this.isPasswordVisible;this.inputRef.type=this.isPasswordVisible?"text":"password"};this.PasswordToggleButton=()=>{var t;if(this.type!=="password"||this.disabled||this.readonly||((t=this.value)===null||t===void 0?void 0:t.length)===0)return null;return i("button",{class:"appearance-none flex items-center w-6 h-full justify-center",onClick:this.togglePasswordVisibility,type:"button"},i("bcm-icon",{name:this.isPasswordVisible?"fa-eye-slash fa-regular":"fa-regular fa-eye",size:this.iconSize}))};this.iconSize={small:14,medium:16,large:18}[this.size]}handleValueChange(t){if(this.inputRef){this.inputRef.value=t}}watchStatus(t){this.internalStatus=t}watchErrorMessage(t){this.internalErrorMessage=t}async setFocus(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.focus()}async setBlur(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.blur()}async select(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.select()}async setLocale(t,e){l(t,e);if(!this.isValid){this.validateInput()}}componentWillLoad(){l("en",d);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}validateInput(){if(!this.inputRef)return;this.isValid=true;this.validationMessage="";const t=this.inputRef.value;if(this.required&&!t){this.isValid=false;this.validationMessage=c("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}else if(this.minLength&&t.length<this.minLength){this.isValid=false;this.validationMessage=c("minlength",{min:this.minLength})}else if(this.maxLength&&t.length>this.maxLength){this.isValid=false;this.validationMessage=c("maxlength",{max:this.maxLength})}else if(this.pattern&&!new RegExp(this.pattern).test(t)){this.isValid=false;this.validationMessage=c("pattern")}else if(this.type==="email"&&t&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)){this.isValid=false;this.validationMessage=c("email")}else if(this.type==="number"&&t){const e=parseFloat(t);if(this.min!==undefined&&e<this.min){this.isValid=false;this.validationMessage=c("min",{min:this.min})}else if(this.max!==undefined&&e>this.max){this.isValid=false;this.validationMessage=c("max",{max:this.max})}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}hasSlotContent(t){return S(this.el,t)}getDefaultIconForType(){return}render(){const t=this._id+"-input"||this.name;const{base:e,inputClass:o}=this.styleClass({size:this.size,status:this.internalStatus,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return i("div",{key:"77a0be85ac2a3749e95bedafc01134a5a6a9f655",class:"bcm-ui-element"},this.label&&i("label",{key:"a202e383e92085bed836777a5484f306d73638dd",class:s("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:t},i("slot",{key:"204121e272f4a168db119322aaba8c4ed2e5c125",name:"label"},this.label),this.required&&i("span",{key:"eb658a88419adb4003525dc711676628b832a3c4"},"*")),i("div",{key:"584edbfd2e49a4e37e45781d7844ce8b850532ff",class:e()},(this.hasSlotContent("prefix")||this.prefixIcon||this.getDefaultIconForType())&&i("div",{key:"0cbc9f42756c643cc5277fe1e7a7636a4fd490be",class:"flex items-center gap-2 px-2"},(this.prefixIcon||this.getDefaultIconForType())&&i("bcm-icon",{key:"a6c0dd258d7c28f2c8d5876fc703fa230ee3ce1a",class:"prefix-icon","icon-name":this.prefixIcon||this.getDefaultIconForType(),size:this.iconSize}),i("slot",{key:"9f8ff60b443210f0f3fd68e43ac73248bd3c4b35",name:"prefix"})),i("input",{key:"d811a67abb5727f2f2d3051d5dded8d5d78564ec",ref:t=>this.inputRef=t,id:t,class:o(),type:this.type,name:this.name,disabled:this.disabled,readonly:this.readonly,required:this.required,placeholder:this.placeholder,autocomplete:this.autocomplete,minlength:this.minLength,maxlength:this.maxLength,min:this.min,max:this.max,step:this.step,pattern:this.pattern,"aria-invalid":this.status==="error","aria-required":this.required,"aria-labelledby":this.labelledby,"aria-describedby":this.describedby,value:this.value,onInput:this.onInput,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),(this.hasSlotContent("suffix")||this.suffixIcon)&&i("div",{key:"c10515b9f3a9fb8d87e8c0f0abd383220ba5554c",class:"flex items-center gap-2 px-2"},i("slot",{key:"5902fa399e7fad8a82e1deaf6bc45f9a5ba8b94a",name:"suffix"}),this.suffixIcon&&i("bcm-icon",{key:"46721b1a002b2b0a04686e2e8968b2c0b51c1061",class:"suffix-icon","icon-name":this.suffixIcon,size:this.iconSize})),this.PasswordToggleButton()),(this.captionText||this.internalErrorMessage||this.validationMessage)&&i("div",{key:"46f3360446fe8c40aab58d1d4047c4f1bb010fff",class:s("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return r(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};D.style=T;const F='.absolute{position:absolute}.relative{position:relative}.block{display:block}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}bcm-linked{display:block;position:relative}bcm-linked[append-to-body]{display:none}.floating-content{min-width:-moz-max-content;min-width:max-content;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;will-change:transform,opacity}.floating-visible{animation:fadeInScale .2s ease-out}.floating-hidden{display:none!important;pointer-events:none}.floating-wrapper{position:relative;z-index:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.floating-arrow{z-index:-1}.floating-arrow,.floating-arrow:before{height:10px;position:absolute;width:10px}.floating-arrow:before{background:#fff;border:1px solid #e2e8f0;content:"";transform:rotate(45deg)}.arrow-top{bottom:-5px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{top:-5px}.arrow-left{right:-5px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{left:-5px}.arrow-top:before{border-bottom:0;border-right:0}.arrow-bottom:before{border-left:0;border-top:0}.arrow-left:before{border-right:0;border-top:0}.arrow-right:before{border-bottom:0;border-left:0}@media (max-width:768px){.floating-content{max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.hidden{display:none}.resize{resize:both}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}';const M=F;const O=class{constructor(i){t(this,i);this.bcmShow=e(this,"bcmShow",7);this.bcmHide=e(this,"bcmHide",7);this.bcmShown=e(this,"bcmShown",7);this.bcmHidden=e(this,"bcmHidden",7);this.trigger="click";this.placement="bottom-start";this.showDelay=0;this.hideDelay=0;this.offset=8;this.arrow=false;this.disabled=false;this.zIndex=1e3;this.appendToBody=false;this.destroyOnHide=false;this.isVisible=false;this.isReady=false;this.handleMouseEnter=()=>{this.clearTimeouts();if(this.showDelay>0){this.showTimeout=setTimeout((()=>this.show()),this.showDelay)}else{this.show()}};this.handleMouseLeave=()=>{this.clearTimeouts();if(this.hideDelay>0){this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)}else{this.hide()}};this.handleFloatingMouseEnter=()=>{this.clearTimeouts()};this.handleFloatingMouseLeave=()=>{this.clearTimeouts();if(this.hideDelay>0){this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)}else{this.hide()}};this.handleClick=t=>{t.stopPropagation();this.toggle()};this.handleFocus=()=>{this.show()};this.handleBlur=()=>{this.hide()}}setupTarget(){this.disconnectTarget();this.connectTarget()}onVisibilityChange(t){if(t){this.updatePosition();this.bcmShown.emit()}else{this.bcmHidden.emit()}}async componentDidLoad(){await new Promise((t=>requestAnimationFrame(t)));this.floatingEl=this.host.querySelector(".floating-content");if(this.floatingEl){this.isReady=true;this.connectTarget();this.setupFloatingObserver();console.log("✅ bcm-linked initialized successfully")}else{console.error("❌ Could not find .floating-content element")}}disconnectedCallback(){var t,e;this.disconnectTarget();this.clearTimeouts();(t=this.cleanup)===null||t===void 0?void 0:t.call(this);(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect();if(this.appendToBody&&this.floatingEl&&this.originalParent){this.originalParent.appendChild(this.floatingEl)}}connectTarget(){if(!this.isReady)return;this.targetEl=this.targetElement||(this.targetId?document.getElementById(this.targetId):null)||this.host.previousElementSibling||this.host.parentElement;if(!this.targetEl){console.warn("bcm-linked: No target element found");return}this.setupEventListeners();if(this.targetEl&&this.floatingEl){this.cleanup=h(this.targetEl,this.floatingEl,(()=>{if(this.isVisible){this.updatePosition()}}))}this.resizeObserver=new ResizeObserver((()=>{if(this.isVisible){this.updatePosition()}}));this.resizeObserver.observe(this.floatingEl)}disconnectTarget(){var t,e;if(this.targetEl){this.removeEventListeners()}(t=this.cleanup)===null||t===void 0?void 0:t.call(this);(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}setupEventListeners(){var t,e;if(!this.targetEl||this.disabled)return;switch(this.trigger){case"hover":this.targetEl.addEventListener("mouseenter",this.handleMouseEnter);this.targetEl.addEventListener("mouseleave",this.handleMouseLeave);(t=this.floatingEl)===null||t===void 0?void 0:t.addEventListener("mouseenter",this.handleFloatingMouseEnter);(e=this.floatingEl)===null||e===void 0?void 0:e.addEventListener("mouseleave",this.handleFloatingMouseLeave);break;case"click":this.targetEl.addEventListener("click",this.handleClick);this.setupClickOutside();break;case"focus":this.targetEl.addEventListener("focus",this.handleFocus);this.targetEl.addEventListener("blur",this.handleBlur);break}}removeEventListeners(){var t,e;if(!this.targetEl)return;this.targetEl.removeEventListener("mouseenter",this.handleMouseEnter);this.targetEl.removeEventListener("mouseleave",this.handleMouseLeave);this.targetEl.removeEventListener("click",this.handleClick);this.targetEl.removeEventListener("focus",this.handleFocus);this.targetEl.removeEventListener("blur",this.handleBlur);(t=this.floatingEl)===null||t===void 0?void 0:t.removeEventListener("mouseenter",this.handleFloatingMouseEnter);(e=this.floatingEl)===null||e===void 0?void 0:e.removeEventListener("mouseleave",this.handleFloatingMouseLeave);this.removeClickOutside()}setupClickOutside(){this.clickOutsideHandler=t=>{var e,i;const o=t.target;if(!((e=this.floatingEl)===null||e===void 0?void 0:e.contains(o))&&!((i=this.targetEl)===null||i===void 0?void 0:i.contains(o))&&!this.host.contains(o)){this.hide()}};document.addEventListener("click",this.clickOutsideHandler,true)}removeClickOutside(){if(this.clickOutsideHandler){document.removeEventListener("click",this.clickOutsideHandler,true);this.clickOutsideHandler=undefined}}clearTimeouts(){if(this.showTimeout){clearTimeout(this.showTimeout);this.showTimeout=undefined}if(this.hideTimeout){clearTimeout(this.hideTimeout);this.hideTimeout=undefined}}async updatePosition(){if(!this.targetEl||!this.floatingEl||!this.isVisible)return;const t=[b(this.offset),u({fallbackPlacements:["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"]}),f({padding:8})];const{x:e,y:i,placement:o}=await m(this.targetEl,this.floatingEl,{placement:this.placement,middleware:t,strategy:"fixed"});Object.assign(this.floatingEl.style,{left:`${e}px`,top:`${i}px`,zIndex:this.zIndex.toString()});if(this.arrow){this.updateArrow(o)}}updateArrow(t){var e;const i=(e=this.floatingEl)===null||e===void 0?void 0:e.querySelector(".floating-arrow");if(!i)return;i.className="floating-arrow";const o=t.split("-")[0];i.classList.add(`arrow-${o}`)}async show(){if(this.disabled||this.isVisible)return;this.bcmShow.emit();if(this.appendToBody&&this.floatingEl){this.originalParent=this.floatingEl.parentNode;this.originalNextSibling=this.floatingEl.nextSibling;document.body.appendChild(this.floatingEl)}this.isVisible=true;await new Promise((t=>requestAnimationFrame(t)));await this.updatePosition()}async hide(){if(!this.isVisible)return;this.bcmHide.emit();this.isVisible=false;if(this.appendToBody&&this.floatingEl&&this.originalParent){if(this.originalNextSibling){this.originalParent.insertBefore(this.floatingEl,this.originalNextSibling)}else{this.originalParent.appendChild(this.floatingEl)}this.originalParent=undefined;this.originalNextSibling=undefined}if(this.destroyOnHide&&this.floatingEl&&this.floatingEl.parentNode){this.floatingEl.parentNode.removeChild(this.floatingEl)}}async toggle(){if(this.isVisible){await this.hide()}else{await this.show()}}async updatePositioning(){await this.updatePosition()}setupFloatingObserver(){if(!this.floatingEl)return;this.resizeObserver=new ResizeObserver((()=>{if(this.isVisible){this.updatePosition()}}));this.resizeObserver.observe(this.floatingEl)}render(){const t={"floating-content":true,"floating-visible":this.isVisible,"floating-hidden":!this.isVisible,"floating-with-arrow":this.arrow,"floating-destroy-on-hide":this.destroyOnHide};return i(o,{key:"f5835cc1b6044476e66402d23a3becf18d3f2049"},i("div",{key:"2c7f92bbe85bc938a767734ef4b27702247fb390",class:t,style:{position:"fixed",top:"0px",left:"0px",zIndex:this.zIndex.toString(),display:this.isVisible?"block":"none",visibility:this.isVisible?"visible":"hidden",opacity:this.isVisible?"1":"0",pointerEvents:this.isVisible?"auto":"none"}},this.arrow&&i("div",{key:"f6eedac02b29b3ca00a9a84eea940ac89089f30c",class:"floating-arrow"}),i("div",{key:"7cb19f085de1d77a41fd9897be90999e78a0a54d",class:"floating-wrapper"},i("slot",{key:"a4b4289642850e3c2f7f27771b3d28bc41c8248a"}))),i("div",{key:"61cd7af9a4a47c87c308e1e67f96efb987c97312",style:{display:"none"}},i("slot",{key:"7160df275f5c7c66733158f95266598d0d207a17",name:"fallback"})))}get host(){return r(this)}static get watchers(){return{targetId:["setupTarget"],targetElement:["setupTarget"],isVisible:["onVisibilityChange"]}}};O.style=M;const X=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.block{display:block}.h-fit{height:fit-content}.w-fit{width:fit-content}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.text-color-default{color:var(--bcm-ui-color-text-default)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const A=X;const E={ctrl:"⌘",alt:"⌥",shift:"⇧",del:"⌫",delete:"⌫",backspace:"⌦",enter:"⏎",return:"⏎"};const _=class{constructor(e){t(this,e);this.size="small";this.isMac=/Mac/.test(window.navigator.userAgent)}getHotkey(t){if(!t){return""}if(this.isMac&&(t.includes(" ")||t.includes("+"))){const e=t.split(/[\s+]+/);return e.map((t=>E[t]||t)).join("")}else{return t}}render(){const{size:t,hotkey:e}=this;return i("div",{key:"007588d1d20941ead644a3d1fd72410cb6793ff5",class:s("bcm-ui-element bcm-ui-content-display","block h-fit w-fit rounded border border-solid px-1","border-color-default bg-color-default text-color-default","text-center font-medium capitalize",{"text-size-2":t==="small","text-size-3":t==="medium","text-size-4":t==="large"})},this.getHotkey(e))}};_.style=A;const B={display:"h1",heading1:"h2",heading2:"h3",title1:"h4",title2:"h5",title3:"h6",body:"p",bodyAccent:"p",helper:"p",caption:"p",label:"label",placeholder:"p",link:"a",info:"p",infoAccent:"p"};const V=".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const L=V;const W=class{constructor(e){t(this,e);this.variant="body";this.size="medium";this.overflow=false;this.variantClassMap={display:"font-semibold text-size-12 text-color-header",heading1:"font-semibold text-size-7 text-color-header",heading2:"font-semibold text-size-6 text-color-header",title1:{small:"font-semibold text-size-5 text-color-header",medium:"font-semibold text-size-6 text-color-header",large:"font-semibold text-size-7 text-color-header"},title2:{small:"font-semibold text-size-4 text-color-default",medium:"font-semibold text-size-5 text-color-default",large:"font-semibold text-size-6 text-color-default"},title3:{small:"font-semibold text-size-3 text-color-disabled",medium:"font-semibold text-size-4 text-color-disabled",large:"font-semibold text-size-5 text-color-disabled"},body:{small:"font-regular text-size-4 text-color-default",medium:"font-regular text-size-5 text-color-default",large:"font-regular text-size-6 text-color-default"},bodyAccent:{small:"font-medium text-size-4 text-color-default",medium:"font-medium text-size-5 text-color-default",large:"font-medium text-size-6 text-color-default"},helper:{small:"font-regular text-size-4 text-color-helper",medium:"font-regular text-size-5 text-color-helper",large:"font-regular text-size-6 text-color-helper"},caption:{small:"font-regular text-size-3 text-color-caption",medium:"font-regular text-size-4 text-color-caption",large:"font-regular text-size-5 text-color-caption"},link:{small:"font-medium text-size-4 underline text-color-primary",medium:"font-medium text-size-5 underline text-color-primary",large:"font-medium text-size-6 underline text-color-primary"},label:{small:"font-medium text-size-3 text-color-label",medium:"font-medium text-size-4 text-color-label",large:"font-medium text-size-5 text-color-label"},placeholder:{small:"font-regular text-size-4 text-color-placeholder",medium:"font-regular text-size-5 text-color-placeholder",large:"font-regular text-size-6 text-color-placeholder"},info:{small:"font-regular text-size-3 text-color-default",medium:"font-regular text-size-4 text-color-default",large:"font-regular text-size-5 text-color-default"},infoAccent:{small:"font-medium text-size-3 text-color-header",medium:"font-medium text-size-4 text-color-header",large:"font-medium text-size-5 text-color-header"}};this.getTextClass=(t,e)=>{const i=this.variantClassMap[t];if(typeof i==="string"){return i}return i[e]};this.getOverflowClass=t=>t?"truncate":""}render(){var t;const e=B[this.variant];const o=this.getTextClass(this.variant,this.size);const r=this.getOverflowClass((t=this.overflow)!==null&&t!==void 0?t:false);return i(e,{key:"152d737752eea962ac3c5086011da69578ef0920",class:s("bcm-text appearance-none m-0 p-0",o,r),part:"text"},i("slot",{key:"e8c8c89a5925936a2e22a75265b7f42317eab983"},this.text))}};W.style=L;export{w as bcm_button,k as bcm_drawer,P as bcm_dropdown,$ as bcm_dropdown_item,D as bcm_input,O as bcm_linked,_ as bcm_shortcut,W as bcm_text};
-//# sourceMappingURL=p-ceaa2fc5.entry.js.map