bromcom-ui-next 0.1.21 → 0.1.22

package/dist/bromcom-ui/p-6fa6b826.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["switchCss","BcmSwitch","constructor","hostRef","this","checked","disabled","labelPosition","error","size","readonly","required","switchId","generateId","switchStyle","defaultStyle","checkedStyle","errorStyle","readonlyStyle","disabledStyle","Object","assign","switchClass","tv","slots","base","switchWrapper","dotContainer","dot","caption","label","variants","small","medium","large","left","right","true","false","compoundVariants","class","toggleSwitch","bcmSwitchChange","emit","render","ariaAttributes","role","toString","tabIndexAttr","tabindex","h","key","style","id","type","name","value","readOnly","onChange","htmlFor","onKeyDown","event","preventDefault"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n  /** Reference to the host element */\n  @Element()\n  el: HTMLElement;\n\n  /** Whether the switch is checked or not */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Whether the switch is disabled */\n  @Prop()\n  disabled: boolean = false;\n\n  /** The name attribute for the hidden input element */\n  @Prop()\n  name: string;\n\n  /** The value attribute for the hidden input element */\n  @Prop()\n  value: string;\n\n  /** Text label for the switch */\n  @Prop()\n  label: string;\n\n  /** Position of the label relative to the switch */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /** Whether to display the switch in an error state */\n  @Prop()\n  error: boolean = false;\n\n  /** Text to display as an error message when error is true */\n  @Prop()\n  caption?: string;\n\n  /** Size variant of the switch */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Whether the switch is in readonly mode */\n  @Prop()\n  readonly: boolean = false;\n\n  /** Whether the switch is required in a form */\n  @Prop()\n  required: boolean = false;\n\n  /** Emitted when the switch state changes */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmSwitchChange: EventEmitter<boolean>;\n\n  private switchId = generateId('switch');\n\n  private toggleSwitch(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.bcmSwitchChange.emit(this.checked);\n  }\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.checked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[18px]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: {\n          label: '',\n        },\n        right: {\n          label: 'order-2',\n        },\n      },\n      checked: {\n        true: {\n          dot: '',\n        },\n        false: {\n          dot: 'left-0.5',\n        },\n      },\n      disabled: {\n        true: '',\n        false: {\n          switchWrapper: '',\n        },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        size: 'small',\n        checked: true,\n        class: {\n          dot: 'left-[18px]',\n        },\n      },\n      {\n        size: 'medium',\n        checked: true,\n        class: {\n          dot: 'left-[20px]',\n        },\n      },\n      {\n        size: 'large',\n        checked: true,\n        class: {\n          dot: 'left-[22px]',\n        },\n      },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      'role': 'switch',\n      'aria-checked': this.checked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()}>\n        <label class={switchWrapper()} style={this.switchStyle()}>\n          <input\n            id={this.switchId}\n            type=\"checkbox\"\n            class=\"hidden peer\"\n            checked={this.checked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            onChange={() => this.toggleSwitch()}\n          />\n\n          {this.label && (\n            <span class={label()}>\n              <slot>{this.label}</slot>\n            </span>\n          )}\n          <label\n            htmlFor={this.switchId}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()}></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-75d1117d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e}from"./p-CrZxEeDA.js";import{c as o}from"./p-BfTCfPZ1.js";const i=":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 r={ctrl:"⌘",alt:"⌥",shift:"⇧",del:"⌫",delete:"⌫",backspace:"⌦",enter:"⏎",return:"⏎"};const a=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=>r[t]||t)).join("")}else{return t}}render(){const{size:t,hotkey:i}=this;return e("div",{key:"007588d1d20941ead644a3d1fd72410cb6793ff5",class:o("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(i))}};a.style=i;export{a as bcm_shortcut};
+//# sourceMappingURL=p-75d1117d.entry.js.map

package/dist/bromcom-ui/p-75d1117d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shortcutCss","osKeys","ctrl","alt","shift","del","delete","backspace","enter","return","BcmShortcut","constructor","hostRef","this","size","isMac","test","window","navigator","userAgent","getHotkey","key","includes","keys","split","map","k","join","render","hotkey","h","class","cs"],"sources":["src/components/shortcut/shortcut.css?tag=bcm-shortcut&encapsulation=shadow","src/components/shortcut/shortcut.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport cs from 'classnames';\n\nconst osKeys = {\n  ctrl: '⌘',\n  alt: '⌥',\n  shift: '⇧',\n  del: '⌫',\n  delete: '⌫',\n  backspace: '⌦',\n  enter: '⏎',\n  return: '⏎',\n};\n\n@Component({\n  tag: 'bcm-shortcut',\n  styleUrl: './shortcut.css',\n  shadow: true,\n})\nexport class BcmShortcut implements ComponentInterface {\n  @Prop() hotkey: string;\n  @Prop() size: 'small' | 'medium' | 'large' = 'small';\n\n  private readonly isMac = /Mac/.test(window.navigator.userAgent);\n\n  getHotkey(key: string): string {\n    if (!key) {\n      return '';\n    }\n    if (this.isMac && (key.includes(' ') || key.includes('+'))) {\n      const keys = key.split(/[\\s+]+/);\n      return keys.map(k => osKeys[k] || k).join('');\n    } else {\n      return key;\n    }\n  }\n\n  render() {\n    const { size, hotkey } = this;\n\n    return (\n      <div\n        class={cs(\n          'bcm-ui-element bcm-ui-content-display',\n          'block h-fit w-fit rounded border border-solid px-1',\n          'border-color-default bg-color-default text-color-default',\n          'text-center font-medium capitalize',\n          {\n            'text-size-2': size === 'small',\n            'text-size-3': size === 'medium',\n            'text-size-4': size === 'large',\n          },\n        )}\n      >\n        {this.getHotkey(hotkey)}\n      </div>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAc,msCCGpB,MAAMC,EAAS,CACbC,KAAM,IACNC,IAAK,IACLC,MAAO,IACPC,IAAK,IACLC,OAAQ,IACRC,UAAW,IACXC,MAAO,IACPC,OAAQ,K,MAQGC,EAAW,MALxB,WAAAC,CAAAC,G,UAOUC,KAAIC,KAAiC,QAE5BD,KAAKE,MAAG,MAAMC,KAAKC,OAAOC,UAAUC,UAmCtD,CAjCC,SAAAC,CAAUC,GACR,IAAKA,EAAK,CACR,MAAO,E,CAET,GAAIR,KAAKE,QAAUM,EAAIC,SAAS,MAAQD,EAAIC,SAAS,MAAO,CAC1D,MAAMC,EAAOF,EAAIG,MAAM,UACvB,OAAOD,EAAKE,KAAIC,GAAKzB,EAAOyB,IAAMA,IAAGC,KAAK,G,KACrC,CACL,OAAON,C,EAIX,MAAAO,GACE,MAAMd,KAAEA,EAAIe,OAAEA,GAAWhB,KAEzB,OACEiB,EAAA,OAAAT,IAAA,2CACEU,MAAOC,EACL,wCACA,qDACA,2DACA,qCACA,CACE,cAAelB,IAAS,QACxB,cAAeA,IAAS,SACxB,cAAeA,IAAS,WAI3BD,KAAKO,UAAUS,G","ignoreList":[]}

package/dist/bromcom-ui/p-778c0de1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a}from"./p-CrZxEeDA.js";import{t as o}from"./p-CEcVC0yX.js";import{g as s}from"./p-IBjzkjef.js";import{c as r}from"./p-BfTCfPZ1.js";const c=".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const l=class{constructor(e){t(this,e);this.bcmRadioGroupChange=i(this,"bcmRadioGroupChange",1);this.disabled=false;this.required=false;this.error=false;this.size="medium";this.direction="vertical";this.radioGroupName=s("radio-group-name");this.handleSlotChange=()=>{this.radios.forEach((t=>{var i;t.size=this.size;t.name=(i=this.name)!==null&&i!==void 0?i:this.radioGroupName;t.disabled=this.disabled;t.error=this.error}))};this.radioGroupClass=o({slots:{host:["bcm-ui-element bcm-radio-group flex flex-col"],container:["flex"]},variants:{size:{small:{host:"gap-1.5",container:"gap-1.5"},medium:{host:"gap-2",container:"gap-2"},large:{host:"gap-2.5",container:"gap-2.5"}},direction:{horizontal:{container:["flex-row flex-wrap"]},vertical:{container:["flex-col"]}}},defaultVariants:{size:"medium",direction:"vertical"}})}get radios(){return this.host.querySelectorAll("bcm-radio")}componentWillLoad(){if(this.value){this.updateRadios(this.value)}}async setClear(){var t;this.value="";(t=this.radios)===null||t===void 0?void 0:t.forEach((t=>{t.checked=false}))}async resetCaption(){this.error=false;this.captionText=undefined}handleValueChange(t){this.updateRadios(t)}handleRadioChange(t){const i=t.target;const e=this.host.querySelectorAll("bcm-radio");e.forEach((t=>{if(t!==i){t.checked=false}}));this.bcmRadioGroupChange.emit({value:i.value,element:i})}updateRadios(t){this.radios.forEach((i=>{i.checked=i.value===t}))}render(){const{host:t,container:i}=this.radioGroupClass({size:this.size,direction:this.direction});return e("div",{key:"8a8ca20a35d1b1dc50a9cbd44b37c21cc9591617",class:t()},this.label&&e("label",{key:"82df9232afd7a395acaa50096f48b74349f82c0d",class:r("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},e("slot",{key:"e328ff4bb753334d9a15ddd6879566149c490d89",name:"label"},this.label),this.required&&e("span",{key:"4671022c9d17783262dd0d80034a1f0f67517b24"},"*")),e("div",{key:"87df33142912050dc54c54d8cedf0497936aa7b8",class:i()},e("slot",{key:"204d69a31753136cd8000904d604d21d748b60bb",onSlotchange:this.handleSlotChange})),this.captionText&&e("div",{key:"4a7a5457542d2bba9c72e15d3ac0c9efc68bd4e9",class:r("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled,"text-[--bcm-ui-color-text-error]":!this.disabled&&this.error,"text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},this.captionText))}get host(){return a(this)}static get watchers(){return{value:["handleValueChange"]}}};l.style=c;export{l as bcm_radio_group};
+//# sourceMappingURL=p-778c0de1.entry.js.map

package/dist/bromcom-ui/p-778c0de1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioGroupCss","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 '@utils/tv';\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-7d366ff2.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as o,a as r}from"./p-CrZxEeDA.js";import{t as a}from"./p-CEcVC0yX.js";const s=".relative{position:relative}.flex{display:flex}.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)}:host{display:inline-block;position:relative}:host([full-width]){width:100%}.segmented-container{border-radius:var(--bcm-ui-border-radius,4px)}.segmented-indicator{border-radius:var(--bcm-ui-border-radius-md,2px);height:100%;top:0;transition:left .2s ease-in-out,width .2s ease-in-out}.segmented-options{display:flex}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.z-0{z-index:0}.z-10{z-index:10}.inline-flex{display:inline-flex}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-\\[--bcm-ui-color-background-default-default\\]{background-color:var(--bcm-ui-color-background-default-default)}.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)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";const n=class{constructor(i){e(this,i);this.bcmChange=t(this,"bcmChange",1);this.size="medium";this.disabled=false;this.fullWidth=false;this.options=[];this.indicatorStyles={left:"0",width:"0",transition:"none"};this.segmentedClass=a({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",variants:{size:{small:"text-size-4",medium:"text-size-5",large:"text-size-6"},fullWidth:{true:"w-full"},disabled:{true:"opacity-50 cursor-not-allowed",false:"cursor-pointer"}},defaultVariants:{size:"medium",fullWidth:false,disabled:false}},{twMerge:false})}componentWillLoad(){this.parseOptions();if(!this.value&&this.options.length>0){this.value=this.options[0].value}}componentDidLoad(){this.updateIndicatorPosition(false)}componentDidUpdate(){this.updateIndicatorPosition()}valueChanged(){this.updateIndicatorPosition()}handleOptionClick(e){if(this.disabled)return;const t=e.detail;if(this.value!==t){this.value=t;this.bcmChange.emit({value:t})}}parseOptions(){const e=Array.from(this.host.children);this.options=e.filter((e=>e.nodeName.toLowerCase()==="bcm-segmented-picker-option")).map((e=>({value:e.getAttribute("value")||"",label:e.getAttribute("label")||e.textContent||""})))}updateIndicatorPosition(e=true){const t=this.host.querySelector(`bcm-segmented-picker-option[value="${this.value}"]`);if(!t)return;const i=this.host.querySelectorAll("bcm-segmented-picker-option");let o=-1;for(let e=0;e<i.length;e++){if(i[e].getAttribute("value")===this.value){o=e;break}}if(o===-1)return;setTimeout((()=>{try{let t=0;for(let e=0;e<o;e++){const o=i[e];if(o){t+=o.offsetWidth}}const r=i[o].offsetWidth;this.indicatorStyles={left:`${t}px`,width:`${r}px`,transition:e?"all 0.2s ease-in-out":"none"}}catch(e){console.error("Error updating indicator position:",e)}}),10)}render(){return i(o,{key:"da5fd3ac598c6e782387ead9a994c3e2cffb0120"},i("div",{key:"8095a9eb1c5cc455989402ca89ef45ad8799cc4c",class:this.segmentedClass({size:this.size,fullWidth:this.fullWidth,disabled:this.disabled})},i("div",{key:"09be9fc279d015a8d1050591ea287ca192f2e1ea",class:"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded",style:this.indicatorStyles}),i("div",{key:"41b20cd2a9a5b3abe7bda035c91c801a211c0f23",class:"segmented-options flex relative z-10 w-full"},i("slot",{key:"102516eba6f3470073e54fba0943efb26037b8a4"}))))}get host(){return r(this)}static get watchers(){return{value:["valueChanged"]}}};n.style=s;export{n as bcm_segmented_picker};
+//# sourceMappingURL=p-7d366ff2.entry.js.map

package/dist/bromcom-ui/p-7d366ff2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["segmentedPickerCss","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 '@utils/tv';\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,mnE,MCSdC,EAAkB,MAL/B,WAAAC,CAAAC,G,+CAUEC,KAAIC,KAAwB,SAQ5BD,KAAQE,SAAG,MAIXF,KAASG,UAAG,MAUHH,KAAOI,QAA4C,GACnDJ,KAAAK,gBAAuE,CAC9EC,KAAM,IACNC,MAAO,IACPC,WAAY,QA+FNR,KAAcS,eAAGC,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,OAsBd,CA1IC,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,GAAgB,EACpB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAW3B,OAAQ8B,IAAK,CAC1C,GAAIH,EAAWG,GAAGT,aAAa,WAAa5C,KAAKsB,MAAO,CACtD8B,EAAgBC,EAChB,K,EAIJ,GAAID,KAAkB,EAAI,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,EAAK,OAAAE,IAAA,2CAAAC,MAAM,uFAAuFC,MAAOlE,KAAKK,kBAC9GyD,EAAK,OAAAE,IAAA,2CAAAC,MAAM,+CACTH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/bromcom-ui/p-813cffad.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as s,a as i}from"./p-CrZxEeDA.js";import{b as a,c as o,o as h,f as r,s as c,a as l}from"./p-DxMLMJ3r.js";import{t as n}from"./p-CEcVC0yX.js";const d=":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.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)}";const b=class{constructor(s){t(this,s);this.bcmPopoverOpen=e(this,"bcmPopoverOpen",1);this.bcmPopoverClose=e(this,"bcmPopoverClose",1);this.size="medium";this.placement="top";this.trigger="click";this.hoverDelay=150;this.open=false;this.togglePopover=()=>{this.open=!this.open;if(this.open){this.bcmPopoverOpen.emit()}else{this.bcmPopoverClose.emit()}this.updatePosition()};this.showPopover=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=true;this.bcmPopoverOpen.emit();this.updatePosition()}),this.hoverDelay)};this.hidePopover=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=false;this.bcmPopoverClose.emit()}),this.hoverDelay)};this.handleSlotChange=()=>{const t=this.el.shadowRoot.querySelector("slot");const e=t.assignedElements();this.targetElement=e[0];if(this.targetElement){this.targetElement.removeEventListener("click",this.togglePopover);this.targetElement.removeEventListener("mouseenter",this.showPopover);this.targetElement.removeEventListener("mouseleave",this.hidePopover);if(this.trigger==="click"){this.targetElement.addEventListener("click",this.togglePopover);this.targetElement.setAttribute("aria-expanded",this.open.toString())}if(this.trigger==="hover"){this.targetElement.addEventListener("mouseenter",this.showPopover);this.targetElement.addEventListener("mouseleave",this.hidePopover)}if(this.popoverElement&&!this.cleanupAutoUpdate){this.cleanupAutoUpdate=a(this.targetElement,this.popoverElement,(()=>this.updatePosition()))}}};this.handleOutsideClick=t=>{if(!this.el.contains(t.target)&&this.open){this.open=false}};this.updatePosition=async()=>{if(!this.targetElement||!this.popoverElement||!this.arrowElement)return;const{x:t,y:e,placement:s,middlewareData:i}=await o(this.targetElement,this.popoverElement,{placement:this.placement,middleware:[h(12),r({fallbackPlacements:["top","left","bottom","right"]}),c({padding:8}),l({element:this.arrowElement})]});Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`});const{x:a,y:n}=i.arrow||{x:0,y:0};const d=s.split("-")[0];const b={top:"bottom",right:"left",bottom:"top",left:"right"}[d];Object.assign(this.arrowElement.style,{left:a!=null?`${a}px`:"",top:n!=null?`${n}px`:"",[b]:"-4px"})};this.popoverClass=n({slots:{box:"bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]",header:"font-semibold text-color",content:"font-normal text-color",arrow:"absolute w-4 h-4 bg-[--popover-bg] transform rotate-45"},variants:{size:{small:{box:"text-size-3"},medium:{box:"text-size-4"},large:{box:"text-size-5"}},isOpen:{true:{box:"flex"},false:{box:"hidden"}}},defaultVariants:{size:"medium",isOpen:false}})}connectedCallback(){document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){var t;document.removeEventListener("click",this.handleOutsideClick);if(this.targetElement){this.targetElement.removeEventListener("click",this.togglePopover);this.targetElement.removeEventListener("mouseenter",this.showPopover);this.targetElement.removeEventListener("mouseleave",this.hidePopover)}(t=this.cleanupAutoUpdate)===null||t===void 0?void 0:t.call(this);this.cleanupAutoUpdate=null;clearTimeout(this.hoverTimeout)}async openPopup(){this.showPopover()}async closePopup(){this.hidePopover()}render(){const{box:t,header:e,content:i,arrow:a}=this.popoverClass({isOpen:this.open,size:this.size});return s("div",{key:"e57bc4bf987d3e0ab1c32093c0c2aa4fb19ec403",class:"relative"},s("slot",{key:"4e2cf108937324457a86501891f280abc1ab1bbb",onSlotchange:()=>this.handleSlotChange()}),s("div",{key:"63ef22a0aaed9d37a570686c191a2d1b901a38df",part:"popover",class:t(),role:"dialog","aria-hidden":!this.open?"true":"false",ref:t=>this.popoverElement=t},s("div",{key:"f6c3d7d6733e60928703b3be49b69abc69693a2e",class:a(),ref:t=>this.arrowElement=t,part:"arrow"}),s("div",{key:"88898bfe6a978e5a7f85c9bd72387a1965bd5e8b",class:e(),part:"header"},s("slot",{key:"13d490f43ac484bfe7c7ece3d93cc5161d85ef6f",name:"header"},this.headerText)),s("div",{key:"a1de41f15a483d4eefdbc915109f971225163852",class:i(),part:"content"},s("slot",{key:"8000dff7ff5ed0466fcb50dae1b23c0510a7bfc8",name:"content"},this.message))))}get el(){return i(this)}};b.style=d;export{b as bcm_popover};
+//# sourceMappingURL=p-813cffad.entry.js.map

package/dist/bromcom-ui/p-813cffad.entry.js.map

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

package/dist/bromcom-ui/p-813e7ebe.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as i,H as e}from"./p-CrZxEeDA.js";import{t as r}from"./p-CEcVC0yX.js";const a={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 s=".relative{position:relative}:host{display:inline-flex;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}: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 n=class{constructor(i){t(this,i);this.bcmClick=o(this,"bcmClick",1);this.bcmFocus=o(this,"bcmFocus",1);this.bcmBlur=o(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=r({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?a[this.variant].text:"")}get buttonIcon(){if(this.variant&&a[this.variant].icon){return{icon:a[this.variant].icon,position:a[this.variant].iconPosition||"prefix"}}return{icon:this.icon,position:this.iconPosition}}get buttonStatus(){return this.variant?a[this.variant].status:this.status}get buttonStyles(){const t=this.buttonStatus==="default"?"primary":this.buttonStatus;const o={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=o[this.kind];const e={"--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),e)}render(){const{icon:t,position:o}=this.buttonIcon;return i(e,{key:"33e438220fdb261ff87289f8dcbaa7e0601d73c1"},i("button",{key:"4fb4d22a44bac12b3780f9570c734f60fdaba788",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:"fa8dcbcba338f94700842fd0482d0261c9a1d3e3",name:"loading"}),i("span",{key:"345162b4ad0034d5081dee0438ceeefe4930ecfb"},i("slot",{key:"c65c9aa07fd2f159426192fc6239c394ee6ec58d",name:"prefix"},o==="prefix"&&t&&i("i",{key:"c94e32a5d308ba3ad98ac10239fc9a155f47e2ac",class:" leading-none "+t}))),i("slot",{key:"171402bb9251492c7e5b0cf572fb0e2ae62a6add"},this.buttonText),i("span",{key:"ae3c5a885029b3d4c54e5ca21ac22adffa26b013"},i("slot",{key:"f80819d122624bb279d19822278c8e651dec27c7",name:"suffix"},o==="suffix"&&t&&i("i",{key:"69631e99a8b7f47dd1d00984f582ec6e7b5433e8",class:" leading-none "+t})))))}};n.style=s;export{n as bcm_button};
+//# sourceMappingURL=p-813e7ebe.entry.js.map

package/dist/bromcom-ui/p-813e7ebe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["variantOptions","save","text","status","icon","iconPosition","kind","ok","new","add","create","prev","next","apply","submit","send","delete","cancel","decline","close","archive","remove","edit","export","import","filter","update","reset","download","buttonCss","BcmButton","constructor","hostRef","this","size","iconOnly","fullWidth","type","loading","disabled","active","handleClick","event","bcmClick","emit","handleFocus","bcmFocus","handleBlur","bcmBlur","buttonClass","tv","base","variants","small","medium","large","primary","ghost","outline","true","false","position","first","middle","last","defaultVariants","twMerge","buttonText","variant","buttonIcon","buttonStatus","buttonStyles","kindStyleMap","internalDefaultStyles","finalEffectiveStyles","Object","assign","render","h","Host","key","label","expanded","controls","onClick","onFocus","onBlur","style","class","name"],"sources":["src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.component.tsx"],"sourcesContent":["export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'reset' | 'submit';\nexport type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type IconPosition = 'prefix' | 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' | 'middle' | 'last' | null;\n\nexport interface VariantOption {\n  text: string;\n  icon?: string;\n  iconPosition?: IconPosition;\n  status?: ButtonStatus;\n  kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n  save: {\n    text: 'Save',\n    status: 'success',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n    kind: 'primary',\n  },\n  ok: {\n    text: 'Ok',\n    status: 'success',\n    icon: 'far fa-check',\n    iconPosition: 'prefix',\n  },\n  new: {\n    text: 'New',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  add: {\n    text: 'Add',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  create: {\n    text: 'Create',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  prev: {\n    text: 'Prev',\n    status: 'default',\n    icon: 'far fa-arrow-left',\n    iconPosition: 'prefix',\n  },\n  next: {\n    text: 'Next',\n    status: 'default',\n    icon: 'far fa-arrow-right',\n    iconPosition: 'suffix',\n  },\n  apply: {\n    text: 'Apply',\n    status: 'default',\n    icon: 'far fa-check-circle',\n    iconPosition: 'prefix',\n  },\n  submit: {\n    text: 'Submit',\n    status: 'default',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n  },\n  send: {\n    text: 'Send',\n    status: 'success',\n    icon: 'far fa-paper-plane',\n    iconPosition: 'prefix',\n  },\n  delete: {\n    text: 'Delete',\n    status: 'error',\n    icon: 'far fa-trash',\n    iconPosition: 'prefix',\n  },\n  cancel: {\n    text: 'Cancel',\n    status: 'error',\n    icon: 'far fa-times',\n    iconPosition: 'prefix',\n  },\n  decline: {\n    text: 'Decline',\n    status: 'error',\n    icon: 'far fa-ban',\n    iconPosition: 'prefix',\n  },\n  close: {\n    text: 'Close',\n    status: 'error',\n    icon: 'far fa-times-circle',\n    iconPosition: 'prefix',\n  },\n  archive: {\n    text: 'Archive',\n    status: 'error',\n    icon: 'far fa-folder-open',\n    iconPosition: 'prefix',\n  },\n  remove: {\n    text: 'Remove',\n    status: 'error',\n    icon: 'far fa-minus-circle',\n    iconPosition: 'prefix',\n  },\n  edit: {\n    text: 'Edit',\n    status: 'default',\n    icon: 'far fa-edit',\n    iconPosition: 'prefix',\n  },\n  export: {\n    text: 'Export',\n    status: 'default',\n    icon: 'far fa-sign-out',\n    iconPosition: 'prefix',\n  },\n  import: {\n    text: 'Import',\n    status: 'default',\n    icon: 'far fa-sign-in',\n    iconPosition: 'prefix',\n  },\n  filter: {\n    text: 'Filter',\n    status: 'default',\n    icon: 'far fa-filter',\n    iconPosition: 'prefix',\n  },\n  update: {\n    text: 'Update',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  reset: {\n    text: 'Reset',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  download: {\n    text: 'Download',\n    status: 'default',\n    icon: 'far fa-download',\n    iconPosition: 'prefix',\n  },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n  display: inline-flex;\n  position: relative;\n  height: fit-content;\n  width: fit-content;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    // These are the internal default styles based on component props (kind, status)\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n    const internalDefaultStyles = kindStyleMap[this.kind];\n\n    // These are the \"final\" CSS custom properties used by the component's styling.\n    // They use the \"--bcm-button-custom-...\" token if provided by the user,\n    // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n    const finalEffectiveStyles = {\n      '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n      '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n      '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n      '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n      '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n    };\n\n    // return kindStyleMap[this.kind];\n\n    return {\n      ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n      ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n    };\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n            'hover:bg-[--bcm-final-hover-bg-color]',\n            'active:bg-[--bcm-final-active-bg-color]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-87e7e02a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a as i}from"./p-CrZxEeDA.js";import{t as o}from"./p-CEcVC0yX.js";import{c as s}from"./p-BfTCfPZ1.js";import{g as a}from"./p-IBjzkjef.js";import{s as n,g as l,d as c}from"./p-CUvT12BL.js";const d=(e,t)=>{var r;const i=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(`slot[name="${t}"]`);if(!i)return false;const o=i.assignedNodes();return o.length>0};const b='.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(92.8% .006 264.531deg);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(70.7% .022 261.325deg);opacity:1}input::placeholder,textarea::placeholder{color:oklch(70.7% .022 261.325deg);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-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}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.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}.leading-6{line-height:1.5rem}.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 h=class{constructor(i){e(this,i);this.bcmInput=t(this,"bcmInput",1);this.bcmChange=t(this,"bcmChange",1);this.bcmFocus=t(this,"bcmFocus",1);this.bcmBlur=t(this,"bcmBlur",1);this.bcmKeyDown=t(this,"bcmKeyDown",1);this.bcmKeyUp=t(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.isPasswordVisible=false;this.value="";this._id=a("input");this.size="medium";this.status="default";this.fullWidth=false;this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.useNativeValidation=true;this.onInput=e=>{const t=e.target;this.value=t.value;this.bcmInput.emit(e);this.validateInput()};this.onChange=e=>{this.bcmChange.emit(e)};this.onFocus=e=>{this.isFocused=true;this.bcmFocus.emit(e)};this.onBlur=e=>{this.isFocused=false;this.bcmBlur.emit(e);this.validateInput()};this.onKeyDown=e=>{this.bcmKeyDown.emit(e)};this.onKeyUp=e=>{this.bcmKeyUp.emit(e)};this.styleClass=o({slots:{base:["bcm-input bcm-input__container","bg-[--bcm-ui-color-background-base-default]","text-[--bcm-ui-color-text-default]","border border-solid rounded","flex items-center justify-between","transition-colors duration-200","px-2"],inputClass:["input","w-full flex-1","border-0 outline-0 bg-transparent","appearance-none text-ellipsis","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"]},variants:{size:{small:{base:"",inputClass:"text-size-4 py-px"},medium:{base:"",inputClass:"text-size-5 leading-6 py-1"},large:{base:"",inputClass:"text-size-6 py-2"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed",false:""},focused:{true:{base:""}}},defaultVariants:{size:"medium",status:"default",fullWidth:false,disabled:false,focused:false}},{twMerge:false});this.togglePasswordVisibility=()=>{this.isPasswordVisible=!this.isPasswordVisible;this.inputRef.type=this.isPasswordVisible?"text":"password"};this.PasswordToggleButton=()=>{var e;if(this.type!=="password"||this.disabled||this.readonly||((e=this.value)===null||e===void 0?void 0:e.length)===0)return null;return r("button",{class:"appearance-none flex items-center w-6 h-full justify-center",onClick:this.togglePasswordVisibility,type:"button"},r("bcm-icon",{name:this.isPasswordVisible?"fa-eye-slash fa-regular":"fa-regular fa-eye",size:this.iconSize}))};this.iconSize={small:14,medium:16,large:18}[this.size]}handleValueChange(e){if(this.inputRef){this.inputRef.value=e}}watchStatus(e){this.internalStatus=e}watchErrorMessage(e){this.internalErrorMessage=e}async setFocus(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.focus()}async setBlur(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.blur()}async select(){var e;(e=this.inputRef)===null||e===void 0?void 0:e.select()}async setLocale(e,t){n(e,t);if(!this.isValid){this.validateInput()}}componentWillLoad(){n("en",c);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}validateInput(){if(!this.inputRef)return;this.isValid=true;this.validationMessage="";const e=this.inputRef.value;if(this.required&&!e){this.isValid=false;this.validationMessage=l("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}else if(this.minLength&&e.length<this.minLength){this.isValid=false;this.validationMessage=l("minlength",{min:this.minLength})}else if(this.maxLength&&e.length>this.maxLength){this.isValid=false;this.validationMessage=l("maxlength",{max:this.maxLength})}else if(this.pattern&&!new RegExp(this.pattern).test(e)){this.isValid=false;this.validationMessage=l("pattern")}else if(this.type==="email"&&e&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)){this.isValid=false;this.validationMessage=l("email")}else if(this.type==="number"&&e){const t=parseFloat(e);if(this.min!==undefined&&t<this.min){this.isValid=false;this.validationMessage=l("min",{min:this.min})}else if(this.max!==undefined&&t>this.max){this.isValid=false;this.validationMessage=l("max",{max:this.max})}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}hasSlotContent(e){return d(this.el,e)}getDefaultIconForType(){return}render(){const e=this._id+"-input"||this.name;const{base:t,inputClass:i}=this.styleClass({size:this.size,status:this.internalStatus,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return r("div",{key:"effaec9bfaf730d8dc64c1eebb18f24f1b81d6a7",class:"bcm-ui-element"},this.label&&r("label",{key:"1ab316bc8c04c5a17280d539976f8304d9a146cf",class:s("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:e},r("slot",{key:"89fb855f3c84bd43759fdf3ab19298dd376e9714",name:"label"},this.label),this.required&&r("span",{key:"e82f1aa9da8e7b6098128e6a9fb49453aab662a9"},"*")),r("div",{key:"b2503d3e60b246fe6342c0ae9ad74c95f993b11b",class:t()},(this.hasSlotContent("prefix")||this.prefixIcon||this.getDefaultIconForType())&&r("div",{key:"311435f21f3e357d8f7e87e191152d32b2b39ba3",class:"flex items-center gap-2 px-2"},(this.prefixIcon||this.getDefaultIconForType())&&r("bcm-icon",{key:"9bcff2b57c2364e5e84c4cd5202c9a7c5c6a59f6",class:"prefix-icon","icon-name":this.prefixIcon||this.getDefaultIconForType(),size:this.iconSize}),r("slot",{key:"bacfdc130d70df0c8e6bcadb9fc4d58a66067a47",name:"prefix"})),r("input",{key:"9d78831b435a606f06214bfb9ac8a17f743c8ba9",ref:e=>this.inputRef=e,id:e,class:i(),type:this.type,name:this.name,disabled:this.disabled,readonly:this.readonly,required:this.required,placeholder:this.placeholder,autocomplete:this.autocomplete,minlength:this.minLength,maxlength:this.maxLength,min:this.min,max:this.max,step:this.step,pattern:this.pattern,"aria-invalid":this.status==="error","aria-required":this.required,"aria-labelledby":this.labelledby,"aria-describedby":this.describedby,value:this.value,onInput:this.onInput,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),(this.hasSlotContent("suffix")||this.suffixIcon)&&r("div",{key:"060a4cb048a6f041acadfb6375307d736e18c6e4",class:"flex items-center gap-2 px-2"},r("slot",{key:"54536a8b871e6524f3e2aa885ff38dbe8e1f7337",name:"suffix"}),this.suffixIcon&&r("bcm-icon",{key:"ec7482256e4fc4154ddaef6070045b6c926d9f7b",class:"suffix-icon","icon-name":this.suffixIcon,size:this.iconSize})),this.PasswordToggleButton()),(this.captionText||this.internalErrorMessage||this.validationMessage)&&r("div",{key:"6c09a0de12102b805ad224da2007405d4f03e03f",class:s("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return i(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};h.style=b;export{h as bcm_input};
+//# sourceMappingURL=p-87e7e02a.entry.js.map

package/dist/bromcom-ui/p-87e7e02a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkSlotContent","element","slotName","slot","_a","shadowRoot","querySelector","assignedNodes","length","inputCss","BcmInput","constructor","hostRef","this","isFocused","isValid","internalStatus","isPasswordVisible","value","_id","generateId","size","status","fullWidth","type","disabled","readonly","required","useNativeValidation","onInput","event","input","target","bcmInput","emit","validateInput","onChange","bcmChange","onFocus","bcmFocus","onBlur","bcmBlur","onKeyDown","bcmKeyDown","onKeyUp","bcmKeyUp","styleClass","tv","slots","base","inputClass","variants","small","medium","large","default","error","success","warning","info","true","false","focused","defaultVariants","twMerge","togglePasswordVisibility","inputRef","PasswordToggleButton","h","class","onClick","name","iconSize","handleValueChange","newValue","watchStatus","watchErrorMessage","internalErrorMessage","setFocus","focus","setBlur","blur","select","setLocale","locale","messages","setValidationMessages","componentWillLoad","defaultValidationMessages","errorMessage","validationMessage","getValidationMessage","minLength","min","maxLength","max","pattern","RegExp","test","numValue","parseFloat","undefined","hasSlotContent","el","getDefaultIconForType","render","inputId","key","label","classNames","htmlFor","prefixIcon","ref","id","placeholder","autocomplete","minlength","maxlength","step","labelledby","describedby","suffixIcon","captionText"],"sources":["src/utils/slot/check-slot-content.ts","src/components/input/input.scss?tag=bcm-input&encapsulation=shadow","src/components/input/input.component.tsx"],"sourcesContent":["/**\n * Checks if a named slot has any content\n * @param element - The host element (component instance)\n * @param slotName - Name of the slot to check\n * @returns boolean indicating if the slot has any assigned nodes\n */\nexport const checkSlotContent = (element: HTMLElement, slotName: string): boolean => {\n  const slot = element.shadowRoot?.querySelector(`slot[name=\"${slotName}\"]`) as HTMLSlotElement;\n  if (!slot) return false;\n\n  const assignedNodes = slot.assignedNodes();\n  return assignedNodes.length > 0;\n};\n",":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType } from './types';\nimport { tv } from '@utils/tv';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n  tag: 'bcm-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n})\nexport class BcmInput {\n  @Element() el: HTMLElement;\n  private inputRef: HTMLInputElement;\n\n  @State() isFocused = false;\n  @State() validationMessage: string;\n  @State() isValid = true;\n  @State() internalStatus: InputStatus = 'default';\n  @State() internalErrorMessage: string;\n  @State() isPasswordVisible = false;\n\n  /** Input value */\n  @Prop({ mutable: true, reflect: true })\n  value: string = '';\n\n  /** Input placeholder text */\n  @Prop()\n  placeholder?: string;\n\n  /** Input name */\n  @Prop()\n  name?: string;\n\n  /** Input id */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('input');\n\n  /** Controls the input size */\n  @Prop()\n  size: InputSize = 'medium';\n\n  /** Defines the input's status/state */\n  @Prop()\n  status: InputStatus = 'default';\n\n  /** Full width input */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML input type */\n  @Prop()\n  type: InputType = 'text';\n\n  /** Whether the input is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Whether the input is readonly */\n  @Prop()\n  readonly = false;\n\n  /** Whether the input is required */\n  @Prop()\n  required = false;\n\n  /** Input autocomplete attribute */\n  @Prop()\n  autocomplete?: string;\n\n  /** Min length for text input */\n  @Prop()\n  minLength?: number;\n\n  /** Max length for text input */\n  @Prop()\n  maxLength?: number;\n\n  /** Min value for number input */\n  @Prop()\n  min?: number;\n\n  /** Max value for number input */\n  @Prop()\n  max?: number;\n\n  /** Step value for number input */\n  @Prop()\n  step?: number;\n\n  /** Pattern for validation */\n  @Prop()\n  pattern?: string;\n\n  /** Input label for accessibility */\n  @Prop()\n  label?: string;\n\n  /** Error message to display */\n  @Prop()\n  errorMessage?: string;\n\n  /** Caption text to display below input */\n  @Prop()\n  captionText?: string;\n\n  /** ID of associated label element */\n  @Prop()\n  labelledby?: string;\n\n  /** ID of associated caption/error text element */\n  @Prop()\n  describedby?: string;\n\n  /** Prefix icon class name */\n  @Prop()\n  prefixIcon?: string;\n\n  /** Suffix icon class name */\n  @Prop()\n  suffixIcon?: string;\n\n  /** Whether to use native form validation\n   * If false, component will handle validation internally\n   */\n  @Prop()\n  useNativeValidation = true;\n\n  /** Custom validation function */\n  @Prop()\n  validator?: (value: string) => string | undefined;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmInput: EventEmitter<InputEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<Event>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    if (this.inputRef) {\n      this.inputRef.value = newValue;\n    }\n  }\n\n  @Watch('status')\n  watchStatus(newValue: InputStatus) {\n    this.internalStatus = newValue;\n  }\n\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: string) {\n    this.internalErrorMessage = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.inputRef?.focus();\n  }\n\n  @Method()\n  async setBlur() {\n    this.inputRef?.blur();\n  }\n\n  @Method()\n  async select() {\n    this.inputRef?.select();\n  }\n\n  /** Sets locale and messages for all inputs */\n  @Method()\n  async setLocale(locale: string, messages: Record<string, string>) {\n    // Set messages and update validation immediately\n    setValidationMessages(locale, messages);\n\n    // Mevcut validasyon mesajını güncelle\n    if (!this.isValid) {\n      this.validateInput();\n    }\n  }\n\n  componentWillLoad() {\n    // I18n için default mesajları set et\n    setValidationMessages('en', defaultValidationMessages);\n    this.internalStatus = this.status;\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  private validateInput(): void {\n    if (!this.inputRef) return;\n\n    // Reset validation state\n    this.isValid = true;\n    this.validationMessage = '';\n\n    const value = this.inputRef.value;\n\n    // Required check\n    if (this.required && !value) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('required');\n      this.internalStatus = 'error';\n      this.internalErrorMessage = this.validationMessage;\n      return;\n    }\n\n    // Minimum length check\n    else if (this.minLength && value.length < this.minLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n    }\n    // Maximum length check\n    else if (this.maxLength && value.length > this.maxLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n    }\n    // Pattern check\n    else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('pattern');\n    }\n    // Email check\n    else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('email');\n    }\n    // Number range check\n    else if (this.type === 'number' && value) {\n      const numValue = parseFloat(value);\n      if (this.min !== undefined && numValue < this.min) {\n        this.isValid = false;\n        this.validationMessage = getValidationMessage('min', { min: this.min });\n      } else if (this.max !== undefined && numValue > this.max) {\n        this.isValid = false;\n        this.validationMessage = getValidationMessage('max', { max: this.max });\n      }\n    }\n\n    // Update component state\n    this.internalStatus = this.isValid ? 'default' : 'error';\n    this.internalErrorMessage = this.validationMessage;\n  }\n\n  private onInput = (event: InputEvent) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.bcmInput.emit(event);\n    this.validateInput();\n  };\n\n  private onChange = (event: Event) => {\n    this.bcmChange.emit(event);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.bcmFocus.emit(event);\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.bcmBlur.emit(event);\n    this.validateInput();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    this.bcmKeyDown.emit(event);\n  };\n\n  private onKeyUp = (event: KeyboardEvent) => {\n    this.bcmKeyUp.emit(event);\n  };\n\n  private hasSlotContent(slotName: string): boolean {\n    return checkSlotContent(this.el, slotName);\n  }\n\n  private styleClass = tv(\n    {\n      slots: {\n        base: [\n          'bcm-input bcm-input__container',\n          'bg-[--bcm-ui-color-background-base-default]',\n          'text-[--bcm-ui-color-text-default]',\n          'border border-solid rounded',\n          'flex items-center justify-between',\n          'transition-colors duration-200',\n          'px-2',\n        ],\n        inputClass: [\n          'input',\n          'w-full flex-1',\n          'border-0 outline-0 bg-transparent',\n          'appearance-none text-ellipsis',\n          'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n          'font-sans antialiased font-medium',\n          'px-1',\n          '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n        ],\n      },\n      variants: {\n        size: {\n          small: {\n            base: '',\n            inputClass: 'text-size-4 py-px',\n          },\n          medium: {\n            base: '',\n            inputClass: 'text-size-5 leading-6 py-1',\n          },\n          large: {\n            base: '',\n            inputClass: 'text-size-6 py-2',\n          },\n        },\n        status: {\n          default: {\n            base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n          },\n          error: {\n            base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n          },\n          success: {\n            base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n          },\n          warning: {\n            base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n          },\n          info: {\n            base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n          },\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed',\n          false: '',\n        },\n        focused: {\n          true: {\n            base: '',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        status: 'default',\n        fullWidth: false,\n        disabled: false,\n        focused: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  private getDefaultIconForType(): string | undefined {\n    return; // TODO: Will be implemented later\n    // return defaultIcons[this.type as keyof typeof defaultIcons];\n  }\n\n  private togglePasswordVisibility = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n    this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';\n  };\n\n  private PasswordToggleButton = () => {\n    if (this.type !== 'password' || this.disabled || this.readonly || this.value?.length === 0) return null;\n    return (\n      <button class=\"appearance-none flex items-center w-6 h-full justify-center\" onClick={this.togglePasswordVisibility} type=\"button\">\n        <bcm-icon name={this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye'} size={this.iconSize}></bcm-icon>\n      </button>\n    );\n  };\n\n  private iconSize = {\n    small: 14,\n    medium: 16,\n    large: 18,\n  }[this.size];\n\n  render() {\n    const inputId = this._id + '-input' || this.name;\n\n    const { base, inputClass } = this.styleClass({\n      size: this.size,\n      status: this.internalStatus,\n      fullWidth: this.fullWidth,\n      disabled: this.disabled,\n      focused: this.isFocused,\n    });\n\n    return (\n      <div class=\"bcm-ui-element\">\n        {this.label && (\n          <label\n            class={classNames(\n              'input-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n            htmlFor={inputId}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n\n        <div class={base()}>\n          {(this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (\n            <div class=\"flex items-center gap-2 px-2\">\n              {(this.prefixIcon || this.getDefaultIconForType()) && (\n                <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon || this.getDefaultIconForType()} size={this.iconSize}></bcm-icon>\n              )}\n              <slot name=\"prefix\"></slot>\n            </div>\n          )}\n          <input\n            ref={el => (this.inputRef = el)}\n            id={inputId}\n            class={inputClass()}\n            type={this.type}\n            name={this.name}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            required={this.required}\n            placeholder={this.placeholder}\n            autocomplete={this.autocomplete}\n            minlength={this.minLength}\n            maxlength={this.maxLength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            pattern={this.pattern}\n            aria-invalid={this.status === 'error'}\n            aria-required={this.required}\n            aria-labelledby={this.labelledby}\n            aria-describedby={this.describedby}\n            value={this.value}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyDown={this.onKeyDown}\n            onKeyUp={this.onKeyUp}\n          />\n          {(this.hasSlotContent('suffix') || this.suffixIcon) && (\n            <div class=\"flex items-center gap-2 px-2\">\n              <slot name=\"suffix\"></slot>\n              {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={this.iconSize}></bcm-icon>}\n            </div>\n          )}\n          {/* {this.type === 'password' && this.value?.length > 0 && !this.disabled && ( \n            // <bcm-icon\n            //   class=\"password-toggle-icon cursor-pointer\"\n            //   icon-name={this.isPasswordVisible ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'}\n            //   size={iconSize}\n            //   onClick={this.togglePasswordVisibility}\n            // ></bcm-icon>\n          // )}*/}\n          {this.PasswordToggleButton()}\n        </div>\n        {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n          <div\n            class={classNames(\n              'input-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-90b65db8.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,a as i}from"./p-CrZxEeDA.js";import{t}from"./p-CEcVC0yX.js";import{g as c}from"./p-IBjzkjef.js";const a=".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select: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-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.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)}.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-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-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}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";const n=class{constructor(o){e(this,o);this.bcmCheckboxChange=r(this,"bcmCheckboxChange",1);this._id=c("bcm-checkbox");this.indeterminate=false;this.size="medium";this.checked=false;this.error=false;this.disabled=false;this.labelPosition="right";this.handleChange=()=>{if(this.disabled)return;if(this.inputElement){this.inputElement.indeterminate=false;this.indeterminate=false;this.internalChecked=!this.internalChecked;this.inputElement.checked=this.internalChecked;this.bcmCheckboxChange.emit({element:this.inputElement,checked:this.internalChecked})}};this.classes=t({slots:{container:"flex items-center bcm-ui-element bcm-checkbox",checkbox:["flex items-center justify-center rounded-sm","border border-solid border-[--border-color]","bg-[--unchecked-color]","transition-colors duration-200 ease-out","peer-checked:bg-[--checked-color]","peer-checked:border-[--checked-color]","peer-indeterminate:bg-[--checked-color]","peer-indeterminate:border-[--checked-color]","hover:border-[--hover-border-color]","hover:peer-checked:bg-[--hover-color]","hover:peer-indeterminate:bg-[--hover-color]"],iconContainer:"flex items-center justify-center",label:"select-none text-color",hiddenInput:"absolute w-0 h-0 opacity-0 peer"},variants:{size:{small:{container:"gap-2",checkbox:"size-3",iconContainer:"size-2 text-size-2",label:"text-size-4",hiddenInput:"size-3"},medium:{container:"gap-2.5",checkbox:"size-4",iconContainer:"size-[10px] text-size-3",label:"text-size-5",hiddenInput:"size-4"},large:{container:"gap-3",checkbox:"size-[18px]",iconContainer:"size-4 text-size-4",label:"text-size-6",hiddenInput:"size-[18px]"}},disabled:{true:{container:"cursor-not-allowed",checkbox:"cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]",label:"cursor-not-allowed text-color-disabled",iconContainer:"text-color-disabled",hiddenInput:"cursor-not-allowed"},false:{container:"cursor-pointer",checkbox:"cursor-pointer",label:"cursor-pointer text-color",iconContainer:"text-color-base",hiddenInput:"cursor-pointer"}},labelPosition:{left:{container:"flex-row-reverse"},right:{container:"flex-row"}}},defaultVariants:{size:"medium",checked:false,disabled:false,error:false,labelPosition:"right"}},{twMerge:false})}componentWillLoad(){this.internalChecked=this.checked!==undefined?this.checked:false}componentDidLoad(){this.updateIndeterminateState()}syncCheckedProp(e){if(e!==undefined){this.internalChecked=e}}updateIndeterminateState(){if(this.inputElement){this.inputElement.indeterminate=this.indeterminate&&!this.internalChecked;this.inputElement.checked=this.internalChecked}}getStyles(){const e={"--checked-color":"var(--bcm-ui-color-background-primary-default)","--unchecked-color":"var(--bcm-ui-color-background-default-default)","--border-color":"var(--bcm-ui-color-border-default)","--hover-border-color":"var(--bcm-ui-color-border-primary)","--hover-color":"var(--bcm-ui-color-background-info-hover)"};const r={"--checked-color":"var(--bcm-ui-color-background-error-default)","--unchecked-color":"var(--bcm-ui-color-background-palette-red-default)","--border-color":"var(--bcm-ui-color-border-error)","--hover-border-color":"var(--bcm-ui-color-border-error)","--hover-color":"var(--bcm-ui-color-border-error)"};const o={"--checked-color":"var(--bcm-ui-color-background-disabled-default)","--unchecked-color":"var(--bcm-ui-color-background-disabled-default)","--border-color":"var(--bcm-ui-color-border-disabled)","--hover-color":"var(--bcm-ui-color-border-disabled)","--hover-border-color":"var(--bcm-ui-color-border-disabled)"};return Object.assign(Object.assign(Object.assign({},e),this.error?r:{}),this.disabled?o:{})}render(){const{container:e,checkbox:r,iconContainer:i,label:t,hiddenInput:c}=this.classes({size:this.size,disabled:this.disabled,labelPosition:this.labelPosition});const a=this._id+"-internal-checkbox"||this.name;return o("div",{key:"87039386c268340ec49b1ab1974af5a8d13b1914",class:e(),style:this.getStyles(),part:"checkbox-wrapper"},o("div",{key:"659e7289a8a44148adc98b759e75becf0a19af00",class:"relative inline-flex"},o("input",{key:"ba8d7f8c7c780ef236f3952d31e707e36ca49579",type:"checkbox",role:"checkbox",id:a,name:this.name,checked:this.internalChecked,indeterminate:this.indeterminate,disabled:this.disabled,class:c(),"aria-checked":this.internalChecked?"true":this.indeterminate?"mixed":"false","aria-invalid":this.error,"aria-label":this.label||"Checkbox",onChange:this.handleChange,ref:e=>this.inputElement=e}),o("div",{key:"ae8383578c9d21dece8a754a7ca13e678aa06bc8",class:r(),onClick:this.handleChange,part:"checkbox"},this.internalChecked&&o("div",{key:"f68b4fd13bb4a980e4d230b3fadc802f01620116",class:i(),part:"icon"},o("bcm-icon",{key:"4e032893fa89708d278d4d71101882f928f5cf66",name:"fa-regular fa-check"})),this.indeterminate&&!this.internalChecked&&o("div",{key:"6e2d6ec59b85d2295f15f5edfb3718026322cf2b",class:i(),part:"icon"},o("bcm-icon",{key:"5dbda3645bfcf291c5d345c1694897a46b64272a",name:"fa-regular fa-minus"})))),o("label",{key:"b1568ab19f874a07e98bd49680740eeed23f937b",htmlFor:a,class:t(),part:"label"},this.label))}get el(){return i(this)}static get watchers(){return{checked:["syncCheckedProp"],indeterminate:["updateIndeterminateState"],internalChecked:["updateIndeterminateState"]}}};n.style=a;export{n as bcm_checkbox};
+//# sourceMappingURL=p-90b65db8.entry.js.map

package/dist/bromcom-ui/p-90b65db8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","Checkbox","constructor","hostRef","this","_id","generateId","indeterminate","size","checked","error","disabled","labelPosition","handleChange","inputElement","internalChecked","bcmCheckboxChange","emit","element","classes","tv","slots","container","checkbox","iconContainer","label","hiddenInput","variants","small","medium","large","true","false","left","right","defaultVariants","twMerge","componentWillLoad","undefined","componentDidLoad","updateIndeterminateState","syncCheckedProp","newValue","getStyles","defaultStyles","errorStyles","disabledStyles","Object","assign","render","internalId","name","h","key","class","style","part","type","role","id","onChange","ref","el","onClick","htmlFor"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /**\n   * Label text to display next to the checkbox\n   */\n  @Prop()\n  label?: string;\n\n  /**\n   * Name attribute for the checkbox when used in a form\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * Determines if the checkbox is in an indeterminate state.\n   * This is useful when some items in a group of checkboxes are selected and others are not.\n   */\n  @Prop({ mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Size variant of the checkbox\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Determines if the checkbox is checked\n   */\n  @Prop({ mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates if the checkbox is in an error state.\n   * This affects the visual styling of the component.\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Determines if the checkbox is disabled\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Controls the position of the label relative to the checkbox\n   */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /**\n   * Internal state to track checked status\n   */\n  @State() internalChecked: boolean;\n\n  /**\n   * Event emitted when the checked state changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n  /** Reference to the underlying input element */\n  private inputElement: HTMLInputElement;\n\n  /**\n   * Lifecycle method that runs before the component first renders.\n   * Initializes the internal checked state.\n   */\n  componentWillLoad() {\n    this.internalChecked = this.checked !== undefined ? this.checked : false;\n  }\n\n  /**\n   * Lifecycle method that runs after the component has rendered.\n   * Updates the indeterminate state of the input element.\n   */\n  componentDidLoad() {\n    this.updateIndeterminateState();\n  }\n\n  /**\n   * Watches for changes to the checked prop and updates the internal state\n   * @param newValue The new checked value\n   */\n  @Watch('checked')\n  syncCheckedProp(newValue: boolean | undefined) {\n    if (newValue !== undefined) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  /**\n   * Watches for changes to indeterminate and internalChecked states\n   * Updates the input element accordingly\n   */\n  @Watch('indeterminate')\n  @Watch('internalChecked')\n  updateIndeterminateState() {\n    if (this.inputElement) {\n      this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n    }\n  }\n\n  /**\n   * Handles change events on the checkbox\n   * Updates state and emits the change event\n   */\n  private handleChange = () => {\n    if (this.disabled) return;\n    if (this.inputElement) {\n      this.inputElement.indeterminate = false;\n      this.indeterminate = false;\n      this.internalChecked = !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n      this.bcmCheckboxChange.emit({\n        element: this.inputElement,\n        checked: this.internalChecked,\n      });\n    }\n  };\n\n  /**\n   * Returns the CSS custom properties based on component state\n   * @returns Object with CSS custom properties\n   */\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  /**\n   * Tailwind Variants definition for the component\n   * Configures styling based on component props\n   */\n  private classes = tv(\n    {\n      slots: {\n        container: 'flex items-center bcm-ui-element bcm-checkbox',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n          },\n          medium: {\n            container: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n          },\n          large: {\n            container: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: {\n            container: 'flex-row-reverse',\n          },\n          right: {\n            container: 'flex-row',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        checked: false,\n        disabled: false,\n        error: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n  /**\n   * Renders the checkbox component\n   */\n  render() {\n    const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n    const internalId = this._id + '-internal-checkbox' || this.name;\n\n    return (\n      <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n        <div class=\"relative inline-flex\">\n          <input\n            type=\"checkbox\"\n            role=\"checkbox\"\n            id={internalId}\n            name={this.name}\n            checked={this.internalChecked}\n            indeterminate={this.indeterminate}\n            disabled={this.disabled}\n            class={hiddenInput()}\n            aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n            aria-invalid={this.error}\n            aria-label={this.label || 'Checkbox'}\n            onChange={this.handleChange}\n            ref={el => (this.inputElement = el as HTMLInputElement)}\n          />\n          <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n            {this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n              </div>\n            )}\n            {this.indeterminate && !this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n              </div>\n            )}\n          </div>\n        </div>\n        <label htmlFor={internalId} class={label()} part=\"label\">\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-9293a2ce.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,a as s}from"./p-CrZxEeDA.js";import{b as e,c as o,o as a,f as h,s as r,a as l}from"./p-DxMLMJ3r.js";import{t as c}from"./p-CEcVC0yX.js";const d=":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-color-base{color:var(--bcm-ui-color-text-base)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";const n=class{constructor(i){t(this,i);this.trigger="hover";this.placement="top";this.size="medium";this.showDelay=150;this.open=false;this.toggleTooltip=()=>{this.open=!this.open;this.updateOutsideClickListener()};this.showTooltip=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=true;this.updateOutsideClickListener()}),this.showDelay)};this.hideTooltip=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=false;this.updateOutsideClickListener()}),this.showDelay)};this.handleSlotChange=()=>{const t=this.el.shadowRoot.querySelector("slot");const i=t.assignedElements();this.targetElement=i[0];if(this.targetElement){this.targetElement.removeEventListener("click",this.toggleTooltip);this.targetElement.removeEventListener("mouseenter",this.showTooltip);this.targetElement.removeEventListener("mouseleave",this.hideTooltip);if(this.trigger==="click"){this.targetElement.addEventListener("click",this.toggleTooltip);this.targetElement.setAttribute("aria-expanded",this.open.toString());this.targetElement.setAttribute("aria-describedby","tooltip")}if(this.trigger==="hover"){this.targetElement.addEventListener("mouseenter",this.showTooltip);this.targetElement.addEventListener("mouseleave",this.hideTooltip);this.targetElement.setAttribute("aria-describedby","tooltip")}if(this.tooltipElement&&!this.cleanupAutoUpdate){this.cleanupAutoUpdate=e(this.targetElement,this.tooltipElement,(()=>this.updatePosition()),{animationFrame:false})}}};this.handleOutsideClick=t=>{if(!this.el.contains(t.target)&&this.open){this.open=false;this.updateOutsideClickListener()}};this.updatePosition=async()=>{if(!this.targetElement||!this.tooltipElement||!this.arrowElement)return;const{x:t,y:i,placement:s,middlewareData:e}=await o(this.targetElement,this.tooltipElement,{placement:this.placement,middleware:[a(12),h({fallbackPlacements:["top","left","bottom","right"]}),r({padding:8}),l({element:this.arrowElement})]});Object.assign(this.tooltipElement.style,{left:`${t}px`,top:`${i}px`});const{x:c,y:d}=e.arrow||{x:0,y:0};const n=s.split("-")[0];const m={top:"bottom",right:"left",bottom:"top",left:"right"}[n];Object.assign(this.arrowElement.style,{left:c!=null?`${c}px`:"",top:d!=null?`${d}px`:"",[m]:"-4px"})};this.tooltipClass=c({slots:{tooltip:"bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium",arrow:"absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]"},variants:{size:{small:{tooltip:"text-size-3"},medium:{tooltip:"text-size-4"},large:{tooltip:"text-size-5"}},isOpen:{true:{tooltip:"block"},false:{tooltip:"hidden"}}},defaultVariants:{size:"medium",isOpen:false}},{twMerge:false})}disconnectedCallback(){var t;document.removeEventListener("click",this.handleOutsideClick);if(this.targetElement){this.targetElement.removeEventListener("click",this.toggleTooltip);this.targetElement.removeEventListener("mouseenter",this.showTooltip);this.targetElement.removeEventListener("mouseleave",this.hideTooltip)}(t=this.cleanupAutoUpdate)===null||t===void 0?void 0:t.call(this);this.cleanupAutoUpdate=null;clearTimeout(this.hoverTimeout)}updateOutsideClickListener(){if(this.open){document.addEventListener("click",this.handleOutsideClick)}else{document.removeEventListener("click",this.handleOutsideClick)}}async openTooltip(){this.showTooltip()}async closeTooltip(){this.hideTooltip()}render(){const{tooltip:t,arrow:s}=this.tooltipClass({size:this.size,isOpen:this.open});return i("div",{key:"dcc6e18aa58d06cb88e74d47379476c6319bdc2a",class:"relative"},i("slot",{key:"c71d60cff006d2da8e7eadb372aa854c18cf78d4",onSlotchange:()=>this.handleSlotChange()}),i("div",{key:"3809fa4c4431ace38173db76013742a5b9aba2da",role:"tooltip",class:t(),ref:t=>this.tooltipElement=t,part:"tooltip"},i("div",{key:"b9a21a339baaa3f37cad4477d990f4028cfb4e91",class:s(),ref:t=>this.arrowElement=t,part:"arrow"}),i("slot",{key:"64622a02cfd571b2cff5b51dc1c412d0b3e48396",name:"tooltip"},this.message)))}get el(){return s(this)}};n.style=d;export{n as bcm_tooltip};
+//# sourceMappingURL=p-9293a2ce.entry.js.map

package/dist/bromcom-ui/p-9293a2ce.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","Tooltip","constructor","hostRef","this","trigger","placement","size","showDelay","open","toggleTooltip","updateOutsideClickListener","showTooltip","clearTimeout","hoverTimeout","setTimeout","hideTooltip","handleSlotChange","slot","el","shadowRoot","querySelector","elements","assignedElements","targetElement","removeEventListener","addEventListener","setAttribute","toString","tooltipElement","cleanupAutoUpdate","autoUpdate","updatePosition","animationFrame","handleOutsideClick","event","contains","target","async","arrowElement","x","y","middlewareData","computePosition","middleware","offset","flip","fallbackPlacements","shift","padding","arrow","element","Object","assign","style","left","top","arrowX","arrowY","basePlacement","split","staticSide","right","bottom","tooltipClass","tv","slots","tooltip","variants","small","medium","large","isOpen","true","false","defaultVariants","twMerge","disconnectedCallback","document","_a","call","openTooltip","closeTooltip","render","h","key","class","onSlotchange","role","ref","part","name","message"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n  --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n *\n * @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n *   <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n *   const tooltip = document.querySelector('#my-tooltip');\n *   tooltip.openTooltip(); // Opens the tooltip\n *   tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n *\n * @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n *\n * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n */\n\n@Component({\n  tag: 'bcm-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n   * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n   * Default: 'hover'\n   */\n  @Prop()\n  trigger: 'click' | 'hover' = 'hover';\n\n  /**\n   * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\n   * Default: 'top'\n   */\n  @Prop()\n  placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /**\n   * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\n   * Controls the text size and padding of the tooltip content.\n   * Default: 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * @prop {string} message - Custom text for the tooltip content.\n   * Used as fallback content if the 'tooltip' slot is not provided.\n   */\n  @Prop()\n  message: string;\n\n  /**\n   * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n   * Helps prevent flickering on quick mouse movements.\n   * Default: 150\n   */\n  @Prop()\n  showDelay: number = 150;\n\n  @State() open = false;\n\n  private tooltipElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private targetElement: HTMLElement;\n  private hoverTimeout: any;\n  private cleanupAutoUpdate: () => void;\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.toggleTooltip);\n      this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n      this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n    }\n    this.cleanupAutoUpdate?.();\n    this.cleanupAutoUpdate = null;\n    clearTimeout(this.hoverTimeout);\n  }\n\n  private updateOutsideClickListener() {\n    if (this.open) {\n      document.addEventListener('click', this.handleOutsideClick);\n    } else {\n      document.removeEventListener('click', this.handleOutsideClick);\n    }\n  }\n\n  private toggleTooltip = () => {\n    this.open = !this.open;\n    this.updateOutsideClickListener();\n  };\n\n  private showTooltip = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = true;\n      this.updateOutsideClickListener();\n    }, this.showDelay);\n  };\n\n  private hideTooltip = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = false;\n      this.updateOutsideClickListener();\n    }, this.showDelay);\n  };\n\n  /**\n   * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n   * Triggers the showTooltip logic with the specified delay.\n   * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n   */\n  @Method()\n  async openTooltip() {\n    this.showTooltip();\n  }\n\n  /**\n   * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n   * Triggers the hideTooltip logic with the specified delay.\n   * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n   */\n  @Method()\n  async closeTooltip() {\n    this.hideTooltip();\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const elements = slot.assignedElements();\n    this.targetElement = elements[0] as HTMLElement;\n\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.toggleTooltip);\n      this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n      this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n      if (this.trigger === 'click') {\n        this.targetElement.addEventListener('click', this.toggleTooltip);\n        this.targetElement.setAttribute('aria-expanded', this.open.toString());\n        this.targetElement.setAttribute('aria-describedby', 'tooltip');\n      }\n\n      if (this.trigger === 'hover') {\n        this.targetElement.addEventListener('mouseenter', this.showTooltip);\n        this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n        this.targetElement.setAttribute('aria-describedby', 'tooltip');\n      }\n\n      if (this.tooltipElement && !this.cleanupAutoUpdate) {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.tooltipElement, () => this.updatePosition(), { animationFrame: false });\n      }\n    }\n  };\n\n  private handleOutsideClick = (event: Event) => {\n    if (!this.el.contains(event.target as Node) && this.open) {\n      this.open = false;\n      this.updateOutsideClickListener();\n    }\n  };\n\n  private updatePosition = async () => {\n    if (!this.targetElement || !this.tooltipElement || !this.arrowElement) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.tooltipElement, {\n      placement: this.placement,\n      middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n    });\n\n    Object.assign(this.tooltipElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSide = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    }[basePlacement];\n\n    Object.assign(this.arrowElement.style, {\n      left: arrowX != null ? `${arrowX}px` : '',\n      top: arrowY != null ? `${arrowY}px` : '',\n      [staticSide]: '-4px',\n    });\n  };\n\n  private tooltipClass = tv(\n    {\n      slots: {\n        tooltip: 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n        arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n      },\n      variants: {\n        size: {\n          small: { tooltip: 'text-size-3' },\n          medium: { tooltip: 'text-size-4' },\n          large: { tooltip: 'text-size-5' },\n        },\n        isOpen: {\n          true: { tooltip: 'block' },\n          false: { tooltip: 'hidden' },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        isOpen: false,\n      },\n    },\n    { twMerge: false },\n  );\n\n  render() {\n    const { tooltip, arrow } = this.tooltipClass({\n      size: this.size,\n      isOpen: this.open,\n    });\n    return (\n      <div class=\"relative\">\n        <slot onSlotchange={() => this.handleSlotChange()}></slot>\n        <div role=\"tooltip\" class={tooltip()} ref={el => (this.tooltipElement = el)} part=\"tooltip\">\n          <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n          <slot name=\"tooltip\">{this.message}</slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/bromcom-ui/p-9bf8f3c1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a,a as r}from"./p-CrZxEeDA.js";import{t as o}from"./p-CEcVC0yX.js";const s=".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-medium{font-weight:500}.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 i=class{constructor(a){t(this,a);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=o({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 font-medium 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"}}]})}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:r,title:o,closeButton:s,content:i}=this.drawerClass({open:this.open,position:this.position,size:this.size,noHeader:this.noHeader});return a("div",{key:"44379905f1499a16d625ac4d1ff5e89fc6367d46",part:"base"},a("div",{key:"bc53e5322a61cd4af0691905c509d4c5fb765939",part:"backdrop",class:t(),onClick:()=>this.hide()}),a("div",{key:"d5a666671d24b2f3b55b7462b5218a3e11358982",part:"wrapper",class:e(),style:this.getWrapperStyle(),role:"dialog","aria-modal":"true","aria-hidden":!this.open?"true":"false","aria-label":this.headerText},a("div",{key:"5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a",part:"header",class:r()},a("h2",{key:"8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15",part:"title",class:o()},a("slot",{key:"949ae8f65d13e9e1c973c16a9f90205ac7e7042f",name:"header"},this.headerText)),a("button",{key:"a0c42761ee859e87dee5c267ea7245dde4fb8756",part:"close-button",class:s(),onClick:()=>this.hide(),"aria-label":"Close"},a("bcm-icon",{key:"2df273d63da93eda2280759a909906fe4ae0c493",name:"fa-solid fa-xmark"}))),a("div",{key:"b2532537d10f9aa0dcfa2fca8ac806577363e05b",part:"content",class:i()},a("slot",{key:"bfec5cff35a7bf7bf1d9801ba89559501e6f301f"})),a("div",{key:"4d44fdba62c74fd5c893c5296f998754228cf961",part:"footer"},a("slot",{key:"fd0a58127fd2f0ba0955cef629e55700142a8f32",name:"footer"}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};i.style=s;export{i as bcm_drawer};
+//# sourceMappingURL=p-9bf8f3c1.entry.js.map