bromcom-ui-next 0.1.18 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/p-01c8dde2.entry.js +2 -0
- package/dist/bromcom-ui/{p-8360b225.entry.js.map → p-01c8dde2.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-1e726978.entry.js +2 -0
- package/dist/bromcom-ui/{p-9f3f29a7.entry.js.map → p-1e726978.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-25583111.entry.js +2 -0
- package/dist/bromcom-ui/{p-7f4cb7a0.entry.js.map → p-25583111.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-74b51cfc.entry.js +2 -0
- package/dist/bromcom-ui/{p-fe7e2cfd.entry.js.map → p-74b51cfc.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-94ced142.entry.js +2 -0
- package/dist/bromcom-ui/p-94ced142.entry.js.map +1 -0
- package/dist/bromcom-ui/p-b6dd459b.entry.js +2 -0
- package/dist/bromcom-ui/{p-1b4ccb21.entry.js.map → p-b6dd459b.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-ceaa2fc5.entry.js +2 -0
- package/dist/bromcom-ui/{p-490fc076.entry.js.map → p-ceaa2fc5.entry.js.map} +1 -1
- package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
- package/dist/cjs/bcm-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bcm-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-badge.cjs.entry.js +1 -1
- package/dist/cjs/bcm-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-button_8.cjs.entry.js +7 -5
- package/dist/cjs/bcm-button_8.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-content.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-content.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +4 -4
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/alert/alert.css +1 -1
- package/dist/collection/components/avatar/avatar.css +1 -1
- package/dist/collection/components/badge/badge.css +1 -1
- package/dist/collection/components/drawer/drawer.component.js +6 -4
- package/dist/collection/components/drawer/drawer.component.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +1 -1
- package/dist/collection/components/tabs/tabs-content.css +1 -1
- package/dist/collection/components/tabs/tabs-trigger.component.js +3 -3
- package/dist/collection/components/tabs/tabs-trigger.component.js.map +1 -1
- package/dist/collection/components/tabs/tabs-trigger.css +1 -1
- package/dist/collection/components/tooltip/tooltip.css +1 -1
- package/dist/components/bcm-alert.js +1 -1
- package/dist/components/bcm-alert.js.map +1 -1
- package/dist/components/bcm-avatar.js +2 -2
- package/dist/components/bcm-avatar.js.map +1 -1
- package/dist/components/bcm-badge.js +1 -1
- package/dist/components/bcm-drawer.js +7 -5
- package/dist/components/bcm-drawer.js.map +1 -1
- package/dist/components/bcm-tabs-content.js +1 -1
- package/dist/components/bcm-tabs-content.js.map +1 -1
- package/dist/components/bcm-tabs-trigger.js +4 -4
- package/dist/components/bcm-tabs-trigger.js.map +1 -1
- package/dist/components/bcm-tooltip.js +1 -1
- package/dist/components/bcm-tooltip.js.map +1 -1
- package/dist/components/{p-4cc3e4d7.js → p-d54398ea.js} +2 -2
- package/dist/components/{p-4cc3e4d7.js.map → p-d54398ea.js.map} +1 -1
- package/dist/esm/bcm-alert.entry.js +1 -1
- package/dist/esm/bcm-alert.entry.js.map +1 -1
- package/dist/esm/bcm-avatar.entry.js +1 -1
- package/dist/esm/bcm-avatar.entry.js.map +1 -1
- package/dist/esm/bcm-badge.entry.js +1 -1
- package/dist/esm/bcm-badge.entry.js.map +1 -1
- package/dist/esm/bcm-button_8.entry.js +7 -5
- package/dist/esm/bcm-button_8.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-content.entry.js +1 -1
- package/dist/esm/bcm-tabs-content.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +4 -4
- package/dist/esm/bcm-tabs-trigger.entry.js.map +1 -1
- package/dist/esm/bcm-tooltip.entry.js +1 -1
- package/dist/esm/bcm-tooltip.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/bromcom-ui/p-1b4ccb21.entry.js +0 -2
- package/dist/bromcom-ui/p-490fc076.entry.js +0 -2
- package/dist/bromcom-ui/p-5880a7d8.entry.js +0 -2
- package/dist/bromcom-ui/p-5880a7d8.entry.js.map +0 -1
- package/dist/bromcom-ui/p-7f4cb7a0.entry.js +0 -2
- package/dist/bromcom-ui/p-8360b225.entry.js +0 -2
- package/dist/bromcom-ui/p-9f3f29a7.entry.js +0 -2
- package/dist/bromcom-ui/p-fe7e2cfd.entry.js +0 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-9d0aeb92.js";export{s as setNonce}from"./p-9d0aeb92.js";import{g as t}from"./p-ddf64315.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await t();return a([["p-
|
|
1
|
+
import{p as e,b as a}from"./p-9d0aeb92.js";export{s as setNonce}from"./p-9d0aeb92.js";import{g as t}from"./p-ddf64315.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await t();return a([["p-b6dd459b",[[1,"bcm-avatar",{image:[1],alt:[1],shape:[1],size:[1],color:[1],icon:[1],status:[1],blink:[4],name:[1],isFallback:[32]}]]],["p-b582c170",[[1,"bcm-pop-confirm",{arrowColor:[1,"arrow-color"],cancelText:[1,"cancel-text"],confirmText:[1,"confirm-text"],description:[1],headerText:[1,"header-text"],placement:[1],size:[1],status:[1],statusIcon:[4,"status-icon"],targetId:[1,"target-id"],isOpen:[32],currentPlacement:[32],show:[64],hide:[64]}]]],["p-8550a2aa",[[1,"bcm-accordion",{expanded:[1540],headerTitle:[1,"header-title"],group:[516],hintText:[1,"hint-text"],hasFooterContent:[32],toggle:[64],expand:[64],collapse:[64]}]]],["p-67ceb7f3",[[1,"bcm-accordion-group",{multi:[4],accordionItems:[32],expandAll:[64],collapseAll:[64],getExpandedItems:[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["p-25583111",[[1,"bcm-alert",{status:[1],size:[1],kind:[1],dismissible:[4],showStatusIcon:[4,"show-status-icon"]}]]],["p-03be08cc",[[1,"bcm-basic-badge",{size:[1],variant:[1],color:[1],soft:[4],text:[1]}]]],["p-4149c766",[[1,"bcm-button-group",{kind:[1],size:[1],status:[1],fullWidth:[516,"full-width"],loading:[4],disabled:[4],orientation:[513]}]]],["p-842b48ae",[[1,"bcm-checkbox",{_id:[513,"id"],label:[1],name:[1],indeterminate:[1028],size:[1],checked:[1028],error:[4],disabled:[4],labelPosition:[1,"label-position"],internalChecked:[32]},null,{checked:["syncCheckedProp"],indeterminate:["updateIndeterminateState"],internalChecked:["updateIndeterminateState"]}]]],["p-7b93985f",[[1,"bcm-chip",{size:[1],kind:[1],status:[1],dismissible:[4],disabled:[4],color:[1]}]]],["p-42feef7e",[[1,"bcm-divider",{direction:[1],variant:[1],size:[1]}]]],["p-e2f468ab",[[1,"bcm-popover",{size:[1],placement:[1],trigger:[1],hoverDelay:[2,"hover-delay"],open:[1028],headerText:[1,"header-text"],message:[1],openPopup:[64],closePopup:[64]}]]],["p-a02e437c",[[1,"bcm-radio",{label:[1],name:[1],value:[1],checked:[516],size:[1],disabled:[4],readonly:[4],labelPosition:[1,"label-position"],error:[4]}]]],["p-9ba07f12",[[1,"bcm-radio-group",{name:[1],value:[1],disabled:[4],required:[4],error:[4],label:[1],size:[1],direction:[1],captionText:[1,"caption-text"],setClear:[64],resetCaption:[64]},[[2,"bcmRadioChange","handleRadioChange"]],{value:["handleValueChange"]}]]],["p-bbe4aac2",[[1,"bcm-segmented-picker",{size:[1],value:[1537],disabled:[4],fullWidth:[516,"full-width"],options:[32],indicatorStyles:[32]},[[0,"bcmOptionClick","handleOptionClick"]],{value:["valueChanged"]}]]],["p-145dce31",[[1,"bcm-segmented-picker-option",{value:[1],label:[1],size:[1],selected:[1028],disabled:[4],getWidth:[64]}]]],["p-1e5da10e",[[1,"bcm-switch",{checked:[1540],disabled:[4],name:[1],value:[1],label:[1],labelPosition:[1,"label-position"],error:[4],caption:[1],size:[1],readonly:[4],required:[4]}]]],["p-b867a105",[[1,"bcm-tabs",{defaultValue:[513,"default-value"],size:[513],activeTab:[32],previousTab:[32],disableTab:[64],enableTab:[64],disableAllTabs:[64],enableAllTabs:[64],getActiveTab:[64],setActiveTab:[64]},[[9,"resize","handleResize"],[2,"bcmTabSelected","handleTabSelected"]],{size:["handleSizeChange"]}]]],["p-1e726978",[[1,"bcm-tabs-content",{value:[513]}]]],["p-bc962a70",[[1,"bcm-tabs-list"]]],["p-94ced142",[[1,"bcm-tabs-trigger",{value:[513],active:[516],size:[513],disabled:[516]}]]],["p-d975579d",[[1,"bcm-textarea",{value:[1537],rows:[2],cols:[2],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],resize:[1],autoGrow:[4,"auto-grow"],placeholder:[1],name:[1],_id:[513,"id"],size:[1],status:[1],fullWidth:[516,"full-width"],disabled:[4],readonly:[4],required:[4],minLength:[2,"min-length"],maxLength:[2,"max-length"],showCounter:[4,"show-counter"],label:[1],errorMessage:[1,"error-message"],captionText:[1,"caption-text"],labelledby:[1],describedby:[1],validator:[16],isFocused:[32],validationMessage:[32],isValid:[32],internalStatus:[32],internalErrorMessage:[32],setFocus:[64],setBlur:[64],select:[64]},null,{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}]]],["p-01c8dde2",[[1,"bcm-tooltip",{trigger:[1],placement:[1],size:[1],message:[1],showDelay:[2,"show-delay"],open:[32],openTooltip:[64],closeTooltip:[64]}]]],["p-74b51cfc",[[1,"bcm-badge",{size:[1],variant:[1],color:[1],soft:[4],blink:[4],status:[1],position:[1],offset:[1],text:[1]}]]],["p-ceaa2fc5",[[1,"bcm-dropdown",{text:[1],isReady:[32],dropdownItems:[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]],[1,"bcm-drawer",{open:[1540],size:[1],position:[1],fullWidth:[4,"full-width"],headerText:[1,"header-text"],noHeader:[4,"no-header"],show:[64],hide:[64]},[[8,"keydown","handleKeyDown"]],{open:["handleOpenChange"]}],[1,"bcm-dropdown-item",{text:[1],icon:[1],rightIcons:[16],selected:[516],error:[516],disabled:[516]}],[1,"bcm-input",{value:[1537],placeholder:[1],name:[1],_id:[513,"id"],size:[1],status:[1],fullWidth:[516,"full-width"],type:[1],disabled:[4],readonly:[4],required:[4],autocomplete:[1],minLength:[2,"min-length"],maxLength:[2,"max-length"],min:[2],max:[2],step:[2],pattern:[1],label:[1],errorMessage:[1,"error-message"],captionText:[1,"caption-text"],labelledby:[1],describedby:[1],prefixIcon:[1,"prefix-icon"],suffixIcon:[1,"suffix-icon"],useNativeValidation:[4,"use-native-validation"],validator:[16],isFocused:[32],validationMessage:[32],isValid:[32],internalStatus:[32],internalErrorMessage:[32],isPasswordVisible:[32],setFocus:[64],setBlur:[64],select:[64],setLocale:[64]},null,{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}],[1,"bcm-shortcut",{hotkey:[1],size:[1]}],[1,"bcm-text",{text:[1],variant:[1],size:[1],overflow:[4]}],[4,"bcm-linked",{targetId:[513,"target-id"],targetElement:[16],trigger:[1],placement:[1],showDelay:[2,"show-delay"],hideDelay:[2,"hide-delay"],offset:[2],arrow:[4],disabled:[4],zIndex:[2,"z-index"],appendToBody:[4,"append-to-body"],destroyOnHide:[4,"destroy-on-hide"],isVisible:[32],isReady:[32],show:[64],hide:[64],toggle:[64],updatePositioning:[64]},null,{targetId:["setupTarget"],targetElement:["setupTarget"],isVisible:["onVisibilityChange"]}],[1,"bcm-button",{kind:[1],size:[1],status:[1],variant:[1],position:[513],icon:[1],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"],fullWidth:[516,"full-width"],type:[1],loading:[4],disabled:[4],text:[1],active:[4],form:[1],value:[1],name:[1],label:[1],expanded:[1],controls:[1]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=bromcom-ui.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as i,g as s}from"./p-9d0aeb92.js";import{a as e,c as o,o as a,f as h,s as r,b as l}from"./p-50133556.js";import{c}from"./p-5fcf77f9.js";const n=":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 d=n;const m=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:n}=e.arrow||{x:0,y:0};const d=s.split("-")[0];const m={top:"bottom",right:"left",bottom:"top",left:"right"}[d];Object.assign(this.arrowElement.style,{left:c!=null?`${c}px`:"",top:n!=null?`${n}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:"04196e7e3ed7405ff4c3e4870d6cbec968e07f4d",class:"relative"},i("slot",{key:"0a1043e46fa3e88cf667432d44a57a5268a1d61b",onSlotchange:()=>this.handleSlotChange()}),i("div",{key:"fb5474a83b621875831bdbb9a066519fdaae88f0",role:"tooltip",class:t(),ref:t=>this.tooltipElement=t,part:"tooltip"},i("div",{key:"17b8cc92d03e75f4dba6759c74febba8953bc711",class:s(),ref:t=>this.arrowElement=t,part:"arrow"}),i("slot",{key:"60a42381139cc4b1f630441795a2b9b59c6660b6",name:"tooltip"},this.message)))}get el(){return s(this)}};m.style=d;export{m as bcm_tooltip};
|
|
2
|
+
//# sourceMappingURL=p-01c8dde2.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tooltipCss","BcmTooltipStyle0","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 'tailwind-variants';\n\n/**\n * @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n *\n * @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n *\n * @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n *\n * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'hover';\n\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n */\n @Prop()\n message: string;\n\n /**\n * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /**\n * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n */\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /**\n * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.tooltipElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"wJAAA,MAAMA,EAAa,khDACnB,MAAAC,EAAeD,E,MCmCFE,EAAO,MALpB,WAAAC,CAAAC,G,UAcIC,KAAAC,QAA6B,QAO7BD,KAAAE,UAAiD,MAQjDF,KAAAG,KAAqC,SAerCH,KAAAI,UAAoB,IAEXJ,KAAAK,KAAO,MA4BRL,KAAAM,cAAgB,KACpBN,KAAKK,MAAQL,KAAKK,KAClBL,KAAKO,4BAA4B,EAG7BP,KAAAQ,YAAc,KAClBC,aAAaT,KAAKU,cAClBV,KAAKU,aAAeC,YAAW,KAC3BX,KAAKK,KAAO,KACZL,KAAKO,4BAA4B,GAClCP,KAAKI,UAAU,EAGdJ,KAAAY,YAAc,KAClBH,aAAaT,KAAKU,cAClBV,KAAKU,aAAeC,YAAW,KAC3BX,KAAKK,KAAO,MACZL,KAAKO,4BAA4B,GAClCP,KAAKI,UAAU,EAuBdJ,KAAAa,iBAAmB,KACvB,MAAMC,EAAOd,KAAKe,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAWJ,EAAKK,mBACtBnB,KAAKoB,cAAgBF,EAAS,GAE9B,GAAIlB,KAAKoB,cAAe,CACpBpB,KAAKoB,cAAcC,oBAAoB,QAASrB,KAAKM,eACrDN,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKQ,aAC1DR,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKY,aAE1D,GAAIZ,KAAKC,UAAY,QAAS,CAC1BD,KAAKoB,cAAcE,iBAAiB,QAAStB,KAAKM,eAClDN,KAAKoB,cAAcG,aAAa,gBAAiBvB,KAAKK,KAAKmB,YAC3DxB,KAAKoB,cAAcG,aAAa,mBAAoB,U,CAGxD,GAAIvB,KAAKC,UAAY,QAAS,CAC1BD,KAAKoB,cAAcE,iBAAiB,aAActB,KAAKQ,aACvDR,KAAKoB,cAAcE,iBAAiB,aAActB,KAAKY,aACvDZ,KAAKoB,cAAcG,aAAa,mBAAoB,U,CAGxD,GAAIvB,KAAKyB,iBAAmBzB,KAAK0B,kBAAmB,CAChD1B,KAAK0B,kBAAoBC,EACrB3B,KAAKoB,cACLpB,KAAKyB,gBACL,IAAMzB,KAAK4B,kBACX,CAAEC,eAAgB,O,IAM1B7B,KAAA8B,mBAAsBC,IAC1B,IAAK/B,KAAKe,GAAGiB,SAASD,EAAME,SAAmBjC,KAAKK,KAAM,CACtDL,KAAKK,KAAO,MACZL,KAAKO,4B,GAILP,KAAA4B,eAAiBM,UACrB,IAAKlC,KAAKoB,gBAAkBpB,KAAKyB,iBAAmBzB,KAAKmC,aAAc,OAEvE,MAAMC,EAAEA,EAACC,EAAEA,EAACnC,UAAEA,EAASoC,eAAEA,SAAyBC,EAC9CvC,KAAKoB,cACLpB,KAAKyB,eACL,CACIvB,UAAWF,KAAKE,UAChBsC,WAAY,CACRC,EAAO,IACPC,EAAK,CAAEC,mBAAoB,CAAC,MAAO,OAAQ,SAAU,WACrDC,EAAM,CAAEC,QAAS,IACjBC,EAAM,CAAEC,QAAS/C,KAAKmC,kBAKlCa,OAAOC,OAAOjD,KAAKyB,eAAeyB,MAAO,CACrCC,KAAM,GAAGf,MACTgB,IAAK,GAAGf,QAGZ,MAAQD,EAAGiB,EAAQhB,EAAGiB,GAAWhB,EAAeQ,OAAS,CAAEV,EAAG,EAAGC,EAAG,GACpE,MAAMkB,EAAgBrD,EAAUsD,MAAM,KAAK,GAC3C,MAAMC,EAAa,CACfL,IAAK,SACLM,MAAO,OACPC,OAAQ,MACRR,KAAM,SACRI,GAEFP,OAAOC,OAAOjD,KAAKmC,aAAae,MAAO,CACnCC,KAAME,GAAU,KAAO,GAAGA,MAAa,GACvCD,IAAKE,GAAU,KAAO,GAAGA,MAAa,GACtCG,CAACA,GAAa,QAChB,EAGEzD,KAAA4D,aAAeC,EAAG,CACtBC,MAAO,CACHC,QACI,qIACJjB,MAAO,iEAEXkB,SAAU,CACN7D,KAAM,CACF8D,MAAO,CAAEF,QAAS,eAClBG,OAAQ,CAAEH,QAAS,eACnBI,MAAO,CAAEJ,QAAS,gBAEtBK,OAAQ,CACJC,KAAM,CAAEN,QAAS,SACjBO,MAAO,CAAEP,QAAS,YAG1BQ,gBAAiB,CACbpE,KAAM,SACNiE,OAAQ,QAEb,CAAEI,QAAS,O,CAhKd,oBAAAC,G,MACIC,SAASrD,oBAAoB,QAASrB,KAAK8B,oBAC3C,GAAI9B,KAAKoB,cAAe,CACpBpB,KAAKoB,cAAcC,oBAAoB,QAASrB,KAAKM,eACrDN,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKQ,aAC1DR,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKY,Y,EAE9D+D,EAAA3E,KAAK0B,qBAAiB,MAAAiD,SAAA,SAAAA,EAAAC,KAAA5E,MACtBA,KAAK0B,kBAAoB,KACzBjB,aAAaT,KAAKU,a,CAGd,0BAAAH,GACJ,GAAIP,KAAKK,KAAM,CACXqE,SAASpD,iBAAiB,QAAStB,KAAK8B,mB,KACrC,CACH4C,SAASrD,oBAAoB,QAASrB,KAAK8B,mB,EA+BnD,iBAAM+C,GACF7E,KAAKQ,a,CAST,kBAAMsE,GACF9E,KAAKY,a,CAwGT,MAAAmE,GACI,MAAMhB,QAAEA,EAAOjB,MAAEA,GAAU9C,KAAK4D,aAAa,CACzCzD,KAAMH,KAAKG,KACXiE,OAAQpE,KAAKK,OAEjB,OACI2E,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACPF,EAAA,QAAAC,IAAA,2CAAME,aAAc,IAAMnF,KAAKa,qBAC/BmE,EAAA,OAAAC,IAAA,2CAAKG,KAAK,UAAUF,MAAOnB,IAAWsB,IAAMtE,GAAQf,KAAKyB,eAAiBV,EAAKuE,KAAK,WAChFN,EAAA,OAAAC,IAAA,2CAAKC,MAAOpC,IAASuC,IAAMtE,GAAQf,KAAKmC,aAAepB,EAAKuE,KAAK,UACjEN,EAAA,QAAAC,IAAA,2CAAMM,KAAK,WAAWvF,KAAKwF,U","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tooltipCss","BcmTooltipStyle0","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 'tailwind-variants';\n\n/**\n * @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n *\n * @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n *\n * @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n *\n * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n */\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /**\n * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n */\n @Prop()\n trigger: 'click' | 'hover' = 'hover';\n\n /**\n * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n */\n @Prop()\n placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /**\n * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n */\n @Prop()\n message: string;\n\n /**\n * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n */\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /**\n * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n */\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /**\n * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement || !this.tooltipElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"wJAAA,MAAMA,EAAa,0iDACnB,MAAAC,EAAeD,E,MCmCFE,EAAO,MALpB,WAAAC,CAAAC,G,UAcIC,KAAAC,QAA6B,QAO7BD,KAAAE,UAAiD,MAQjDF,KAAAG,KAAqC,SAerCH,KAAAI,UAAoB,IAEXJ,KAAAK,KAAO,MA4BRL,KAAAM,cAAgB,KACpBN,KAAKK,MAAQL,KAAKK,KAClBL,KAAKO,4BAA4B,EAG7BP,KAAAQ,YAAc,KAClBC,aAAaT,KAAKU,cAClBV,KAAKU,aAAeC,YAAW,KAC3BX,KAAKK,KAAO,KACZL,KAAKO,4BAA4B,GAClCP,KAAKI,UAAU,EAGdJ,KAAAY,YAAc,KAClBH,aAAaT,KAAKU,cAClBV,KAAKU,aAAeC,YAAW,KAC3BX,KAAKK,KAAO,MACZL,KAAKO,4BAA4B,GAClCP,KAAKI,UAAU,EAuBdJ,KAAAa,iBAAmB,KACvB,MAAMC,EAAOd,KAAKe,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAWJ,EAAKK,mBACtBnB,KAAKoB,cAAgBF,EAAS,GAE9B,GAAIlB,KAAKoB,cAAe,CACpBpB,KAAKoB,cAAcC,oBAAoB,QAASrB,KAAKM,eACrDN,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKQ,aAC1DR,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKY,aAE1D,GAAIZ,KAAKC,UAAY,QAAS,CAC1BD,KAAKoB,cAAcE,iBAAiB,QAAStB,KAAKM,eAClDN,KAAKoB,cAAcG,aAAa,gBAAiBvB,KAAKK,KAAKmB,YAC3DxB,KAAKoB,cAAcG,aAAa,mBAAoB,U,CAGxD,GAAIvB,KAAKC,UAAY,QAAS,CAC1BD,KAAKoB,cAAcE,iBAAiB,aAActB,KAAKQ,aACvDR,KAAKoB,cAAcE,iBAAiB,aAActB,KAAKY,aACvDZ,KAAKoB,cAAcG,aAAa,mBAAoB,U,CAGxD,GAAIvB,KAAKyB,iBAAmBzB,KAAK0B,kBAAmB,CAChD1B,KAAK0B,kBAAoBC,EACrB3B,KAAKoB,cACLpB,KAAKyB,gBACL,IAAMzB,KAAK4B,kBACX,CAAEC,eAAgB,O,IAM1B7B,KAAA8B,mBAAsBC,IAC1B,IAAK/B,KAAKe,GAAGiB,SAASD,EAAME,SAAmBjC,KAAKK,KAAM,CACtDL,KAAKK,KAAO,MACZL,KAAKO,4B,GAILP,KAAA4B,eAAiBM,UACrB,IAAKlC,KAAKoB,gBAAkBpB,KAAKyB,iBAAmBzB,KAAKmC,aAAc,OAEvE,MAAMC,EAAEA,EAACC,EAAEA,EAACnC,UAAEA,EAASoC,eAAEA,SAAyBC,EAC9CvC,KAAKoB,cACLpB,KAAKyB,eACL,CACIvB,UAAWF,KAAKE,UAChBsC,WAAY,CACRC,EAAO,IACPC,EAAK,CAAEC,mBAAoB,CAAC,MAAO,OAAQ,SAAU,WACrDC,EAAM,CAAEC,QAAS,IACjBC,EAAM,CAAEC,QAAS/C,KAAKmC,kBAKlCa,OAAOC,OAAOjD,KAAKyB,eAAeyB,MAAO,CACrCC,KAAM,GAAGf,MACTgB,IAAK,GAAGf,QAGZ,MAAQD,EAAGiB,EAAQhB,EAAGiB,GAAWhB,EAAeQ,OAAS,CAAEV,EAAG,EAAGC,EAAG,GACpE,MAAMkB,EAAgBrD,EAAUsD,MAAM,KAAK,GAC3C,MAAMC,EAAa,CACfL,IAAK,SACLM,MAAO,OACPC,OAAQ,MACRR,KAAM,SACRI,GAEFP,OAAOC,OAAOjD,KAAKmC,aAAae,MAAO,CACnCC,KAAME,GAAU,KAAO,GAAGA,MAAa,GACvCD,IAAKE,GAAU,KAAO,GAAGA,MAAa,GACtCG,CAACA,GAAa,QAChB,EAGEzD,KAAA4D,aAAeC,EAAG,CACtBC,MAAO,CACHC,QACI,qIACJjB,MAAO,iEAEXkB,SAAU,CACN7D,KAAM,CACF8D,MAAO,CAAEF,QAAS,eAClBG,OAAQ,CAAEH,QAAS,eACnBI,MAAO,CAAEJ,QAAS,gBAEtBK,OAAQ,CACJC,KAAM,CAAEN,QAAS,SACjBO,MAAO,CAAEP,QAAS,YAG1BQ,gBAAiB,CACbpE,KAAM,SACNiE,OAAQ,QAEb,CAAEI,QAAS,O,CAhKd,oBAAAC,G,MACIC,SAASrD,oBAAoB,QAASrB,KAAK8B,oBAC3C,GAAI9B,KAAKoB,cAAe,CACpBpB,KAAKoB,cAAcC,oBAAoB,QAASrB,KAAKM,eACrDN,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKQ,aAC1DR,KAAKoB,cAAcC,oBAAoB,aAAcrB,KAAKY,Y,EAE9D+D,EAAA3E,KAAK0B,qBAAiB,MAAAiD,SAAA,SAAAA,EAAAC,KAAA5E,MACtBA,KAAK0B,kBAAoB,KACzBjB,aAAaT,KAAKU,a,CAGd,0BAAAH,GACJ,GAAIP,KAAKK,KAAM,CACXqE,SAASpD,iBAAiB,QAAStB,KAAK8B,mB,KACrC,CACH4C,SAASrD,oBAAoB,QAASrB,KAAK8B,mB,EA+BnD,iBAAM+C,GACF7E,KAAKQ,a,CAST,kBAAMsE,GACF9E,KAAKY,a,CAwGT,MAAAmE,GACI,MAAMhB,QAAEA,EAAOjB,MAAEA,GAAU9C,KAAK4D,aAAa,CACzCzD,KAAMH,KAAKG,KACXiE,OAAQpE,KAAKK,OAEjB,OACI2E,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACPF,EAAA,QAAAC,IAAA,2CAAME,aAAc,IAAMnF,KAAKa,qBAC/BmE,EAAA,OAAAC,IAAA,2CAAKG,KAAK,UAAUF,MAAOnB,IAAWsB,IAAMtE,GAAQf,KAAKyB,eAAiBV,EAAKuE,KAAK,WAChFN,EAAA,OAAAC,IAAA,2CAAKC,MAAOpC,IAASuC,IAAMtE,GAAQf,KAAKmC,aAAepB,EAAKuE,KAAK,UACjEN,EAAA,QAAAC,IAAA,2CAAMM,KAAK,WAAWvF,KAAKwF,U","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as o,H as s}from"./p-9d0aeb92.js";const t=".block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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 c=t;const d=class{constructor(o){a(this,o)}render(){return o(s,{key:"e12d04d682726a70c9a7cd4ce091cb64b067ce32",role:"tabpanel"},o("slot",{key:"c947677586826f8702472107a43d92235aca84ef"}))}};d.style=c;export{d as bcm_tabs_content};
|
|
2
|
+
//# sourceMappingURL=p-1e726978.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabsContentCss","BcmTabsContentStyle0","BcmTabsContent","render","h","Host","key","role"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/**\n * @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n */\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /**\n * Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"mappings":"kDAAA,MAAMA,EAAiB,
|
|
1
|
+
{"version":3,"names":["tabsContentCss","BcmTabsContentStyle0","BcmTabsContent","render","h","Host","key","role"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/**\n * @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n */\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /**\n * Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"mappings":"kDAAA,MAAMA,EAAiB,2SACvB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBAOvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as a}from"./p-9d0aeb92.js";import{c as r}from"./p-5fcf77f9.js";const i=":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-alert-text\\]{color:var(--bcm-alert-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const c=i;const s=class{constructor(a){e(this,a);this.bcmDismiss=t(this,"bcmDismiss",7);this.status="default";this.size="medium";this.kind="filled";this.dismissible=true;this.showStatusIcon=true}onDismiss(){this.bcmDismiss.emit()}getStatusIcon(){const e={info:"fa-regular fa-info-circle",error:"fa-regular fa-exclamation-circle",warning:"fa-regular fa-exclamation-triangle",success:"fa-regular fa-check-circle"};return e[this.status]}get alertClass(){return r({slots:{base:"alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full",section:"flex items-center gap-2"},variants:{size:{small:{base:"py-1.5 text-size-4"},medium:{base:"py-2 text-size-5"},large:{base:"py-2.5 text-size-6"}}}},{twMerge:false})}get alertStyles(){let e={info:"var(--bcm-ui-color-background-palette-blue-default)",error:"var(--bcm-ui-color-background-palette-red-default)",warning:"var(--bcm-ui-color-background-palette-yellow-default)",success:"var(--bcm-ui-color-background-palette-green-default)",default:"var(--bcm-ui-color-background-palette-gray-default)"};let t={info:"var(--bcm-ui-color-text-info)",error:"var(--bcm-ui-color-text-error)",warning:"var(--bcm-ui-color-text-warning)",success:"var(--bcm-ui-color-text-success)",default:"var(--bcm-ui-color-text-default)"};let a={"--bcm-alert-bg":e[this.status],"--bcm-alert-text":t[this.status]};let r={"--bcm-alert-bg":"transparent","--bcm-alert-text":t[this.status]};return this.kind==="filled"?a:r}render(){const{base:e,section:t}=this.alertClass({size:this.size});return a("div",{key:"7f91a09d5cd85203bbcb7ec2848abbd38381b7d7",role:"alert","aria-live":"assertive","aria-atomic":"true",class:e(),style:this.alertStyles},a("div",{key:"f0a3407e8998632cf4768205a584ee76602dd10e",class:t()},this.showStatusIcon&&a("bcm-icon",{key:"c89277913df205769b27695afda17fbae27e5dcd","icon-name":this.getStatusIcon()}),a("slot",{key:"7ee558872bbe2ef7f056f9d5762920c1a373cf00"})),a("div",{key:"0e5800023a34fb739945c390186f372ae4ea6ceb",class:t()},a("div",{key:"a23280a4885d74e4c7373b7d099f9ddb0c59164e",part:"action"},a("slot",{key:"d0901245812635e28b13c76e9c841b4052d4d307",name:"action"})),a("span",{key:"0a90cd1625e033d34ec3724473f5956a96dc7fb3",part:"icon"},this.dismissible&&a("bcm-icon",{key:"0a29cfaa6dc3c4dda309740e210d9e607b71fba1",onClick:()=>this.onDismiss(),class:"cursor-pointer","icon-name":"fa-regular fa-xmark"}))))}};s.style=c;export{s as bcm_alert};
|
|
2
|
+
//# sourceMappingURL=p-25583111.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["alertCss","BcmAlertStyle0","BcmAlert","constructor","hostRef","this","status","size","kind","dismissible","showStatusIcon","onDismiss","bcmDismiss","emit","getStatusIcon","statusIcon","info","error","warning","success","alertClass","tv","slots","base","section","variants","small","medium","large","twMerge","alertStyles","colorStatus","default","textStatusColor","filleStyle","textStyle","render","h","key","role","class","style","part","name","onClick"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /** Alert status type */\n @Prop()\n status?: AlertStatus = 'default';\n\n /** Alert size variant */\n @Prop()\n size?: AlertSize = 'medium';\n\n /** Alert style variant */\n @Prop()\n kind?: AlertKind = 'filled';\n\n /** Whether alert can be dismissed */\n @Prop()\n dismissible?: boolean = true;\n\n /** Whether to show status icon */\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /**\n * Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAW,
|
|
1
|
+
{"version":3,"names":["alertCss","BcmAlertStyle0","BcmAlert","constructor","hostRef","this","status","size","kind","dismissible","showStatusIcon","onDismiss","bcmDismiss","emit","getStatusIcon","statusIcon","info","error","warning","success","alertClass","tv","slots","base","section","variants","small","medium","large","twMerge","alertStyles","colorStatus","default","textStatusColor","filleStyle","textStyle","render","h","key","role","class","style","part","name","onClick"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /** Alert status type */\n @Prop()\n status?: AlertStatus = 'default';\n\n /** Alert size variant */\n @Prop()\n size?: AlertSize = 'medium';\n\n /** Alert style variant */\n @Prop()\n kind?: AlertKind = 'filled';\n\n /** Whether alert can be dismissed */\n @Prop()\n dismissible?: boolean = true;\n\n /** Whether to show status icon */\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /**\n * Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAW,k3CACjB,MAAAC,EAAeD,E,MCaFE,EAAQ,MALrB,WAAAC,CAAAC,G,iDAQIC,KAAAC,OAAuB,UAIvBD,KAAAE,KAAmB,SAInBF,KAAAG,KAAmB,SAInBH,KAAAI,YAAwB,KAIxBJ,KAAAK,eAA2B,I,CASnB,SAAAC,GACJN,KAAKO,WAAWC,M,CAGZ,aAAAC,GACJ,MAAMC,EAAa,CACfC,KAAM,4BACNC,MAAO,mCACPC,QAAS,qCACTC,QAAS,8BAEb,OAAOJ,EAAWV,KAAKC,O,CAG3B,cAAYc,GACR,OAAOC,EACH,CACIC,MAAO,CACHC,KAAM,gKACNC,QAAS,2BAEbC,SAAU,CACNlB,KAAM,CACFmB,MAAO,CACHH,KAAM,sBAEVI,OAAQ,CACJJ,KAAM,oBAEVK,MAAO,CACHL,KAAM,yBAKtB,CACIM,QAAS,O,CAKrB,eAAYC,GACR,IAAIC,EAAc,CACdf,KAAM,sDACNC,MAAO,qDACPC,QAAS,wDACTC,QAAS,uDACTa,QAAS,uDAGb,IAAIC,EAAkB,CAClBjB,KAAM,gCACNC,MAAO,iCACPC,QAAS,mCACTC,QAAS,mCACTa,QAAS,oCAGb,IAAIE,EAAa,CACb,iBAAkBH,EAAY1B,KAAKC,QACnC,mBAAoB2B,EAAgB5B,KAAKC,SAG7C,IAAI6B,EAAY,CACZ,iBAAkB,cAClB,mBAAoBF,EAAgB5B,KAAKC,SAG7C,OAAOD,KAAKG,OAAS,SAAW0B,EAAaC,C,CAGjD,MAAAC,GACI,MAAMb,KAAEA,EAAIC,QAAEA,GAAYnB,KAAKe,WAAW,CAAEb,KAAMF,KAAKE,OACvD,OACI8B,EAAA,OAAAC,IAAA,2CAAKC,KAAK,QAAO,YAAW,YAAW,cAAa,OAAOC,MAAOjB,IAAQkB,MAAOpC,KAAKyB,aAClFO,EAAA,OAAAC,IAAA,2CAAKE,MAAOhB,KACPnB,KAAKK,gBAAkB2B,EAAA,YAAAC,IAAA,uDAAqBjC,KAAKS,kBAClDuB,EAAA,QAAAC,IAAA,8CAEJD,EAAA,OAAAC,IAAA,2CAAKE,MAAOhB,KACRa,EAAA,OAAAC,IAAA,2CAAKI,KAAK,UACNL,EAAA,QAAAC,IAAA,2CAAMK,KAAK,YAEfN,EAAA,QAAAC,IAAA,2CAAMI,KAAK,QAAQrC,KAAKI,aAAe4B,EAAA,YAAAC,IAAA,2CAAUM,QAAS,IAAMvC,KAAKM,YAAa6B,MAAM,iBAAgB,YAAW,0B","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e}from"./p-9d0aeb92.js";import{c as a}from"./p-5fcf77f9.js";const i='.relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\"\\"\\]:after{--tw-content:"";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}';const r=i;const o=class{constructor(e){t(this,e);this.size="medium";this.variant="text";this.soft=false;this.blink=false;this.position="top-right";this.classes=a({base:"badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10",variants:{size:{small:"gap-1 px-1 text-size-3",medium:"gap-1 py-0.5 px-1.5 text-size-4",large:"gap-2 py-1 px-2 text-size-5"},variant:{dot:"gap-0 p-0 text-[0px] leading-none",text:""},position:{"top-right":"-top-1 -right-1","top-left":"-top-1 -left-1","bottom-right":"-bottom-1 -right-1","bottom-left":"-bottom-1 -left-1"},blink:{true:'after:content-[""] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full'}},compoundVariants:[{variant:"dot",size:"small",class:"size-1"},{variant:"dot",size:"medium",class:"size-1.5"},{variant:"dot",size:"large",class:"size-2"}],defaultVariants:{variant:"text",size:"medium",position:"top-right",blink:false}})}get offsetStyle(){if(!this.offset)return{};const[t=0,e=0]=this.offset.split(",").map((t=>t.trim()));return{transform:`translate(${t}px, ${e}px)`}}get badgeStyle(){if(!this.color)return{};const t=this.soft?"soft":"vivid";return{"--bcm-badge-bg":`var(--bcm-ui-color-background-${t}-${this.color}-default)`,"--bcm-badge-text":this.soft?`var(--bcm-ui-color-text-palette-${this.color})`:"var(--bcm-ui-color-text-base)"}}render(){return e("div",{key:"da26bf1e14ff4098562a3d594ec9c895694f62fa",class:"relative inline-flex"},e("slot",{key:"f92bff170f95619ac79bdd0cfb7970e16e581d26"}),e("div",{key:"4379aac0216eec1de7e0908cfa0531c80e8dab23",role:"status","aria-live":"polite","aria-label":this.status?`Status: ${this.status}`:undefined,class:this.classes({size:this.size,variant:this.variant,position:this.position,blink:this.blink}),style:Object.assign(Object.assign({},this.badgeStyle),this.offsetStyle)},this.variant=="text"&&e("slot",{key:"63f5bf1a342f9136a012a98844926dfdee7da40d",name:"badge"},this.text)))}};o.style=r;export{o as bcm_badge};
|
|
2
|
+
//# sourceMappingURL=p-74b51cfc.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["badgeCss","BcmBadgeStyle0","Badge","constructor","hostRef","this","size","variant","soft","blink","position","classes","tv","base","variants","small","medium","large","dot","text","true","compoundVariants","class","defaultVariants","offsetStyle","offset","x","y","split","map","val","trim","transform","badgeStyle","color","variantType","render","h","key","role","status","undefined","style","Object","assign","name"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /**\n * Determines the size of the badge.\n * @type {'small' | 'medium' | 'large'}\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' | 'text'}\n * @default 'text'\n */\n @Prop()\n variant: 'dot' | 'text' = 'text';\n\n /**\n * Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n */\n @Prop()\n color?: string;\n\n /**\n * Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n */\n @Prop()\n soft: boolean = false;\n\n /**\n * Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n */\n @Prop()\n blink: boolean = false;\n\n /**\n * Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n */\n @Prop()\n status?: string;\n\n /**\n * Sets the position of the badge relative to its container.\n * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n * @default 'top-right'\n */\n @Prop()\n position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n /**\n * Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n */\n @Prop()\n offset: string;\n\n /**\n * Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAW,
|
|
1
|
+
{"version":3,"names":["badgeCss","BcmBadgeStyle0","Badge","constructor","hostRef","this","size","variant","soft","blink","position","classes","tv","base","variants","small","medium","large","dot","text","true","compoundVariants","class","defaultVariants","offsetStyle","offset","x","y","split","map","val","trim","transform","badgeStyle","color","variantType","render","h","key","role","status","undefined","style","Object","assign","name"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /**\n * Determines the size of the badge.\n * @type {'small' | 'medium' | 'large'}\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' | 'text'}\n * @default 'text'\n */\n @Prop()\n variant: 'dot' | 'text' = 'text';\n\n /**\n * Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n */\n @Prop()\n color?: string;\n\n /**\n * Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n */\n @Prop()\n soft: boolean = false;\n\n /**\n * Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n */\n @Prop()\n blink: boolean = false;\n\n /**\n * Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n */\n @Prop()\n status?: string;\n\n /**\n * Sets the position of the badge relative to its container.\n * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n * @default 'top-right'\n */\n @Prop()\n position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n /**\n * Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n */\n @Prop()\n offset: string;\n\n /**\n * Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAW,mgHACjB,MAAAC,EAAeD,E,MCwBFE,EAAK,MALlB,WAAAC,CAAAC,G,UAYIC,KAAAC,KAAqC,SAUrCD,KAAAE,QAA0B,OAkB1BF,KAAAG,KAAgB,MAShBH,KAAAI,MAAiB,MAiBjBJ,KAAAK,SAAsE,YAqB9DL,KAAAM,QAAUC,EAAG,CACjBC,KAAM,kKACNC,SAAU,CACNR,KAAM,CACFS,MAAO,yBACPC,OAAQ,kCACRC,MAAO,+BAEXV,QAAS,CACLW,IAAK,oCACLC,KAAM,IAEVT,SAAU,CACN,YAAa,kBACb,WAAY,iBACZ,eAAgB,qBAChB,cAAe,qBAEnBD,MAAO,CACHW,KAAM,kIAGdC,iBAAkB,CACd,CACId,QAAS,MACTD,KAAM,QACNgB,MAAO,UAEX,CACIf,QAAS,MACTD,KAAM,SACNgB,MAAO,YAEX,CACIf,QAAS,MACTD,KAAM,QACNgB,MAAO,WAGfC,gBAAiB,CACbhB,QAAS,OACTD,KAAM,SACNI,SAAU,YACVD,MAAO,Q,CAIf,eAAYe,GACR,IAAKnB,KAAKoB,OAAQ,MAAO,GACzB,MAAOC,EAAI,EAAGC,EAAI,GAAKtB,KAAKoB,OAAOG,MAAM,KAAKC,KAAIC,GAAOA,EAAIC,SAC7D,MAAO,CAAEC,UAAW,aAAaN,QAAQC,O,CAG7C,cAAYM,GACR,IAAK5B,KAAK6B,MAAO,MAAO,GACxB,MAAMC,EAAc9B,KAAKG,KAAO,OAAS,QAEzC,MAAO,CACH,iBAAkB,iCAAiC2B,KAAe9B,KAAK6B,iBACvE,mBAAoB7B,KAAKG,KAAO,mCAAmCH,KAAK6B,SAAW,gC,CAI3F,MAAAE,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKhB,MAAM,wBACPe,EAAA,QAAAC,IAAA,6CACAD,EAAA,OAAAC,IAAA,2CACIC,KAAK,SAAQ,YACH,SAAQ,aACNlC,KAAKmC,OAAS,WAAWnC,KAAKmC,SAAWC,UACrDnB,MAAOjB,KAAKM,QAAQ,CAChBL,KAAMD,KAAKC,KACXC,QAASF,KAAKE,QACdG,SAAUL,KAAKK,SACfD,MAAOJ,KAAKI,QAEhBiC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACEvC,KAAK4B,YACL5B,KAAKmB,cAGXnB,KAAKE,SAAW,QAAU8B,EAAA,QAAAC,IAAA,2CAAMO,KAAK,SAASxC,KAAKc,O","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as r}from"./p-9d0aeb92.js";import{c as a}from"./p-5fcf77f9.js";const s=".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";const l=s;const c=class{constructor(i){t(this,i);this.bcmTabSelected=e(this,"bcmTabSelected",1);this.active=false;this.size="medium";this.disabled=false;this.class=a({slots:{tab:"bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none",borderLine:"bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out"},variants:{size:{small:{tab:"text-size-4 gap-2"},medium:{tab:"text-size-5 gap-2.5"},large:{tab:"text-size-6 gap-3"}},active:{true:{tab:"text-color-primary"},false:{tab:"text-color-default"}},disabled:{true:{tab:"cursor-not-allowed text-color-disabled",borderLine:"bg-[--bcm-ui-color-text-disabled]"},false:{tab:"cursor-pointer text-color hover:text-color-primary",borderLine:"bg-[--bcm-ui-color-text-default]"}}},defaultVariants:{size:"medium",active:false,disabled:false}},{twMerge:false})}handleClick(){if(this.disabled)return;this.bcmTabSelected.emit(this.value)}render(){const{tab:t,borderLine:e}=this.class({size:this.size,active:this.active,disabled:this.disabled});return i(o,{key:"97d1b4ff2e0d097843b57bf33e3afc337de12812",role:"tab","aria-selected":this.active.toString(),"aria-disabled":this.disabled},i("button",{key:"f8474ad1ccc08bb6985c4754546111cc5a1d7ef5",class:t(),disabled:this.disabled,part:"tab",onClick:()=>this.handleClick()},i("slot",{key:"fd94dcc67f10ae7df1217b2545f2621d62906cdc"})),i("div",{key:"93f31a04c031061d929e3ca38758986775bac1ad",class:e()}))}get el(){return r(this)}};c.style=l;export{c as bcm_tabs_trigger};
|
|
2
|
+
//# sourceMappingURL=p-94ced142.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tabsTriggerCss","BcmTabsTriggerStyle0","BcmTabsTrigger","constructor","hostRef","this","active","size","disabled","class","tv","slots","tab","borderLine","variants","small","medium","large","true","false","defaultVariants","twMerge","handleClick","bcmTabSelected","emit","value","render","h","Host","key","role","toString","part","onClick"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n position: relative;\n display: block;\n width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /**\n * Reference to the host element\n */\n @Element() el: HTMLElement;\n\n /**\n * Unique identifier value for the tab\n */\n @Prop({ reflect: true })\n value: string;\n\n /**\n * Whether the tab is currently active\n */\n @Prop({ reflect: true })\n active: boolean = false;\n\n /**\n * Size of the tab\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether the tab is disabled\n */\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /**\n * Event emitted when this tab is selected\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /**\n * Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n */\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /**\n * Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color-default',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-default]',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,i9DACvB,MAAAC,EAAeD,E,MCWFE,EAAc,MAL3B,WAAAC,CAAAC,G,yDAqBEC,KAAAC,OAAkB,MAMlBD,KAAAE,KAAqC,SAMrCF,KAAAG,SAAoB,MAyBZH,KAAAI,MAAQC,EACd,CACEC,MAAO,CACLC,IAAK,iKACLC,WAAY,kFAEdC,SAAU,CACRP,KAAM,CACJQ,MAAO,CAAEH,IAAK,qBACdI,OAAQ,CAAEJ,IAAK,uBACfK,MAAO,CAAEL,IAAK,sBAEhBN,OAAQ,CACNY,KAAM,CACJN,IAAK,sBAEPO,MAAO,CACLP,IAAK,uBAGTJ,SAAU,CACRU,KAAM,CACJN,IAAK,yCACLC,WAAY,qCAEdM,MAAO,CACLP,IAAK,qDACLC,WAAY,sCAIlBO,gBAAiB,CACfb,KAAM,SACND,OAAQ,MACRE,SAAU,QAGd,CACEa,QAAS,O,CA9CL,WAAAC,GACN,GAAIjB,KAAKG,SAAU,OACnBH,KAAKkB,eAAeC,KAAKnB,KAAKoB,M,CAgDhC,MAAAC,GACE,MAAMd,IAAEA,EAAGC,WAAEA,GAAeR,KAAKI,MAAM,CACrCF,KAAMF,KAAKE,KACXD,OAAQD,KAAKC,OACbE,SAAUH,KAAKG,WAEjB,OACEmB,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,MAAK,gBAAgBzB,KAAKC,OAAOyB,WAAU,gBAAiB1B,KAAKG,UAC1EmB,EAAA,UAAAE,IAAA,2CAAQpB,MAAOG,IAAOJ,SAAUH,KAAKG,SAAUwB,KAAK,MAAMC,QAAS,IAAM5B,KAAKiB,eAC5EK,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKpB,MAAOI,M","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e}from"./p-9d0aeb92.js";import{c as i}from"./p-12360e4c.js";const s=":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const a=s;const r=class{constructor(e){t(this,e);this.shape="ellipse";this.size="medium";this.icon="fas fa-user";this.blink=false;this.isFallback=false}getFirstLetters(t){const e=t.split(" ");const i=e.map((t=>t.charAt(0).toUpperCase())).join("");return i.substring(0,2)}render(){const t=i("bcm-avatar bcm-ui-element bcm-ui-content-display","uppercase font-medium","inline-flex items-center justify-center","bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]",{"shape-ellipse rounded-full":this.shape==="ellipse","shape-square rounded-[--bcm-ui-radius]":this.shape==="square","size-small text-size-4 w-6 h-6":this.size==="small","size-medium text-size-5 w-8 h-8":this.size==="medium","size-large text-size-6 w-10 h-10":this.size==="large"});const s=i("badge",{"top-0 right-0":this.shape==="ellipse","-top-0.5 -right-0.5":this.shape==="square"});const a=i("image w-full h-full",{"rounded-full":this.shape==="ellipse","rounded-[--bcm-ui-radius]":this.shape==="square"});let r={};if(this.color){const t=this.color.includes("-");const e=t?this.color.split("-")[0]:this.color;const i=`var(--bcm-ui-color-background-palette-${e}-default)`;const s=`var(--bcm-ui-color-text-palette-${e}`;r={"--bcm-avatar-bg":i,"--bcm-avatar-text":s}}const h=!Object.keys(["small","medium","large"]).includes(this.size)?{width:`${this.size}px`,height:`${this.size}px`,fontSize:`${+this.size/2}px`}:{};const l=()=>{if(this.isFallback){if(this.name){return this.getFirstLetters(this.name)}else{return e("i",{class:this.icon})}}else if(this.image){return e("img",{class:a,onError:()=>this.isFallback=true,src:this.image,alt:this.alt,"aria-label":this.alt||this.name||"Avatar"})}else if(this.name){return this.getFirstLetters(this.name)}else{return e("i",{class:this.icon})}};return e("div",{role:"img","aria-label":this.alt||this.name||"Avatar",class:t,style:Object.assign(Object.assign({},r),h)},e(l,null),this.status&&e("bcm-badge",{class:s,status:this.status,blink:this.blink,"aria-hidden":"true"}),e("slot",null))}};r.style=a;export{r as bcm_avatar};
|
|
2
|
+
//# sourceMappingURL=p-b6dd459b.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["avatarCss","BcmAvatarStyle0","BcmAvatar","constructor","hostRef","this","shape","size","icon","blink","isFallback","getFirstLetters","name","words","split","initials","map","word","charAt","toUpperCase","join","substring","render","baseClass","cs","badgeClass","imageClass","style","color","isColorTone","includes","_color","bgColor","textColor","customSize","Object","keys","width","height","fontSize","RenderContent","h","class","image","onError","src","alt","role","assign","status"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image */\n @Prop()\n image: string;\n\n /** Alternative text for image */\n @Prop()\n alt: string;\n\n /** Shape of the avatar (ellipse/square) */\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /** Size of the avatar */\n @Prop()\n size: AvatarSize = 'medium';\n\n /** Custom background color */\n @Prop()\n color: string;\n\n /** Fallback icon class */\n @Prop()\n icon: string = 'fas fa-user';\n\n /** Status indicator type */\n @Prop()\n status: AvatarStatus;\n\n /** Status indicator animation */\n @Prop()\n blink = false;\n\n /** Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,
|
|
1
|
+
{"version":3,"names":["avatarCss","BcmAvatarStyle0","BcmAvatar","constructor","hostRef","this","shape","size","icon","blink","isFallback","getFirstLetters","name","words","split","initials","map","word","charAt","toUpperCase","join","substring","render","baseClass","cs","badgeClass","imageClass","style","color","isColorTone","includes","_color","bgColor","textColor","customSize","Object","keys","width","height","fontSize","RenderContent","h","class","image","onError","src","alt","role","assign","status"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image */\n @Prop()\n image: string;\n\n /** Alternative text for image */\n @Prop()\n alt: string;\n\n /** Shape of the avatar (ellipse/square) */\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /** Size of the avatar */\n @Prop()\n size: AvatarSize = 'medium';\n\n /** Custom background color */\n @Prop()\n color: string;\n\n /** Fallback icon class */\n @Prop()\n icon: string = 'fas fa-user';\n\n /** Status indicator type */\n @Prop()\n status: AvatarStatus;\n\n /** Status indicator animation */\n @Prop()\n blink = false;\n\n /** Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,84CAClB,MAAAC,EAAeD,E,MCQFE,EAAS,MALtB,WAAAC,CAAAC,G,UAgBEC,KAAAC,MAAqB,UAIrBD,KAAAE,KAAmB,SAQnBF,KAAAG,KAAe,cAQfH,KAAAI,MAAQ,MAMCJ,KAAAK,WAAsB,K,CAEvB,eAAAC,CAAgBC,GACtB,MAAMC,EAAQD,EAAKE,MAAM,KACzB,MAAMC,EAAWF,EAAMG,KAAIC,GAAQA,EAAKC,OAAO,GAAGC,gBAAeC,KAAK,IACtE,OAAOL,EAASM,UAAU,EAAG,E,CAG/B,MAAAC,GACE,MAAMC,EAAYC,EAChB,mDACA,wBACA,0CACA,gDACA,CACE,6BAA8BnB,KAAKC,QAAU,UAC7C,yCAA0CD,KAAKC,QAAU,SACzD,iCAAkCD,KAAKE,OAAS,QAChD,kCAAmCF,KAAKE,OAAS,SACjD,mCAAoCF,KAAKE,OAAS,UAItD,MAAMkB,EAAaD,EAAG,QAAS,CAC7B,gBAAiBnB,KAAKC,QAAU,UAChC,sBAAuBD,KAAKC,QAAU,WAGxC,MAAMoB,EAAaF,EAAG,sBAAuB,CAC3C,eAAgBnB,KAAKC,QAAU,UAC/B,4BAA6BD,KAAKC,QAAU,WAG9C,IAAIqB,EAAQ,GAEZ,GAAItB,KAAKuB,MAAO,CACd,MAAMC,EAAcxB,KAAKuB,MAAME,SAAS,KACxC,MAAMC,EAASF,EAAcxB,KAAKuB,MAAMd,MAAM,KAAK,GAAKT,KAAKuB,MAE7D,MAAMI,EAAU,yCAAyCD,aACzD,MAAME,EAAY,mCAAmCF,IACrDJ,EAAQ,CACN,kBAAmBK,EACnB,oBAAqBC,E,CAIzB,MAAMC,GAAcC,OAAOC,KAAK,CAAC,QAAS,SAAU,UAAUN,SAASzB,KAAKE,MACxE,CACA8B,MAAO,GAAGhC,KAAKE,SACf+B,OAAQ,GAAGjC,KAAKE,SAChBgC,SAAU,IAAIlC,KAAKE,KAAO,OAE1B,GAEJ,MAAMiC,EAAgB,KACpB,GAAInC,KAAKK,WAAY,CACnB,GAAIL,KAAKO,KAAM,CACb,OAAOP,KAAKM,gBAAgBN,KAAKO,K,KAC5B,CACL,OAAO6B,EAAA,KAAGC,MAAOrC,KAAKG,M,OAEnB,GAAIH,KAAKsC,MAAO,CACrB,OAAOF,EAAA,OAAKC,MAAOhB,EAAYkB,QAAS,IAAOvC,KAAKK,WAAa,KAAOmC,IAAKxC,KAAKsC,MAAOG,IAAKzC,KAAKyC,IAAG,aAAczC,KAAKyC,KAAOzC,KAAKO,MAAQ,U,MACxI,GAAIP,KAAKO,KAAM,CACpB,OAAOP,KAAKM,gBAAgBN,KAAKO,K,KAC5B,CACL,OAAO6B,EAAA,KAAGC,MAAOrC,KAAKG,M,GAI1B,OACEiC,EAAA,OAAKM,KAAK,MAAK,aAAa1C,KAAKyC,KAAOzC,KAAKO,MAAQ,SAAU8B,MAAOnB,EAAWI,MAAKQ,OAAAa,OAAAb,OAAAa,OAAA,GAAOrB,GAAUO,IACrGO,EAACD,EAAa,MACbnC,KAAK4C,QAAUR,EAAA,aAAWC,MAAOjB,EAAYwB,OAAQ5C,KAAK4C,OAAQxC,MAAOJ,KAAKI,MAAK,cAAc,SAClGgC,EAAA,a","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as r}from"./p-9d0aeb92.js";import{c as a}from"./p-5fcf77f9.js";import{c as s}from"./p-12360e4c.js";import{g as n}from"./p-ba2410ef.js";import{s as l,g as c,d}from"./p-13a245f6.js";import{a as h,o as b,f as u,s as f,c as m}from"./p-50133556.js";const p={save:{text:"Save",status:"success",icon:"far fa-save",iconPosition:"prefix",kind:"primary"},ok:{text:"Ok",status:"success",icon:"far fa-check",iconPosition:"prefix"},new:{text:"New",status:"success",icon:"far fa-plus",iconPosition:"prefix"},add:{text:"Add",status:"success",icon:"far fa-plus",iconPosition:"prefix"},create:{text:"Create",status:"success",icon:"far fa-plus",iconPosition:"prefix"},prev:{text:"Prev",status:"default",icon:"far fa-arrow-left",iconPosition:"prefix"},next:{text:"Next",status:"default",icon:"far fa-arrow-right",iconPosition:"suffix"},apply:{text:"Apply",status:"default",icon:"far fa-check-circle",iconPosition:"prefix"},submit:{text:"Submit",status:"default",icon:"far fa-save",iconPosition:"prefix"},send:{text:"Send",status:"success",icon:"far fa-paper-plane",iconPosition:"prefix"},delete:{text:"Delete",status:"error",icon:"far fa-trash",iconPosition:"prefix"},cancel:{text:"Cancel",status:"error",icon:"far fa-times",iconPosition:"prefix"},decline:{text:"Decline",status:"error",icon:"far fa-ban",iconPosition:"prefix"},close:{text:"Close",status:"error",icon:"far fa-times-circle",iconPosition:"prefix"},archive:{text:"Archive",status:"error",icon:"far fa-folder-open",iconPosition:"prefix"},remove:{text:"Remove",status:"error",icon:"far fa-minus-circle",iconPosition:"prefix"},edit:{text:"Edit",status:"default",icon:"far fa-edit",iconPosition:"prefix"},export:{text:"Export",status:"default",icon:"far fa-sign-out",iconPosition:"prefix"},import:{text:"Import",status:"default",icon:"far fa-sign-in",iconPosition:"prefix"},filter:{text:"Filter",status:"default",icon:"far fa-filter",iconPosition:"prefix"},update:{text:"Update",status:"default",icon:"far fa-sync",iconPosition:"prefix"},reset:{text:"Reset",status:"default",icon:"far fa-sync",iconPosition:"prefix"},download:{text:"Download",status:"default",icon:"far fa-download",iconPosition:"prefix"}};const x=".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-final-border-color\\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\\[--bcm-final-bg-color\\]{background-color:var(--bcm-final-bg-color)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\\[--bcm-final-text-color\\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-final-hover-bg-color\\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-final-active-bg-color\\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";const g=x;const w=class{constructor(i){t(this,i);this.bcmClick=e(this,"bcmClick",1);this.bcmFocus=e(this,"bcmFocus",1);this.bcmBlur=e(this,"bcmBlur",1);this.kind="primary";this.size="medium";this.status="default";this.iconPosition="prefix";this.iconOnly=false;this.fullWidth=false;this.type="button";this.loading=false;this.disabled=false;this.active=false;this.handleClick=t=>{if(!this.disabled&&!this.loading){this.bcmClick.emit(t)}};this.handleFocus=t=>{this.bcmFocus.emit(t)};this.handleBlur=t=>{this.bcmBlur.emit(t)};this.buttonClass=a({base:"bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0",variants:{size:{small:"text-size-4 py-px px-2 min-h-6",medium:"text-size-5 py-0.5 px-3 min-h-8",large:"text-size-6 py-1 px-3 min-h-10"},kind:{primary:"kind-primary",ghost:"kind-ghost",text:"kind-text",outline:"kind-outline"},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled",false:["cursor-pointer","bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]","hover:bg-[--bcm-final-hover-bg-color]","active:bg-[--bcm-final-active-bg-color]","focus-visible:ring"]},loading:{true:""},position:{first:"position-first",middle:"position-middle",last:"position-last"}},defaultVariants:{size:"medium",kind:"primary",fullWidth:false,disabled:false,loading:false}},{twMerge:false})}get buttonText(){return this.text||(this.variant?p[this.variant].text:"")}get buttonIcon(){if(this.variant&&p[this.variant].icon){return{icon:p[this.variant].icon,position:p[this.variant].iconPosition||"prefix"}}return{icon:this.icon,position:this.iconPosition}}get buttonStatus(){return this.variant?p[this.variant].status:this.status}get buttonStyles(){const t=this.buttonStatus==="default"?"primary":this.buttonStatus;const e={primary:{"--bcm-button-bg":`var(--bcm-ui-color-background-${t}-default)`,"--bcm-button-bg-hover":`var(--bcm-ui-color-background-${t}-hover)`,"--bcm-button-bg-active":`var(--bcm-ui-color-background-${t}-active)`,"--bcm-button-border":"transparent","--bcm-button-text":"var(--bcm-ui-color-text-base)"},outline:{"--bcm-button-bg":"var(--bcm-ui-color-background-default-default)","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":`var(--bcm-ui-color-border-${this.buttonStatus})`,"--bcm-button-text":`var(--bcm-ui-color-text-${this.buttonStatus})`},ghost:{"--bcm-button-bg":"transparent","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":"transparent","--bcm-button-text":`var(--bcm-ui-color-text-${this.buttonStatus})`},text:{"--bcm-button-bg":"transparent","--bcm-button-bg-hover":"var(--bcm-ui-color-background-default-hover)","--bcm-button-bg-active":"var(--bcm-ui-color-background-default-active)","--bcm-button-border":"transparent","--bcm-button-text":`var(--bcm-ui-color-text-${t})`}};const i=e[this.kind];const o={"--bcm-final-text-color":`var(--bcm-button-custom-text-color, ${i["--bcm-button-text"]})`,"--bcm-final-border-color":`var(--bcm-button-custom-border-color, ${i["--bcm-button-border"]})`,"--bcm-final-bg-color":`var(--bcm-button-custom-bg-color, ${i["--bcm-button-bg"]})`,"--bcm-final-hover-bg-color":`var(--bcm-button-custom-hover-bg-color, ${i["--bcm-button-bg-hover"]})`,"--bcm-final-active-bg-color":`var(--bcm-button-custom-active-bg-color, ${i["--bcm-button-bg-active"]})`};return Object.assign(Object.assign({},i),o)}render(){const{icon:t,position:e}=this.buttonIcon;return i(o,{key:"821f52c3a042fed2dce63e90152aebe3e9f40dc5"},i("button",{key:"429988208144ebd9b52f1543825860e9fdf6c538",type:this.type,disabled:this.disabled||this.loading,"aria-label":this.label,"aria-expanded":this.expanded,"aria-controls":this.controls,"aria-disabled":this.disabled,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,style:this.buttonStyles,class:this.buttonClass({size:this.size,kind:this.kind,fullWidth:this.fullWidth,disabled:this.disabled,loading:this.loading,position:this.position})},this.loading&&i("slot",{key:"525e1f9ffdc301e0bba2939d9fece560b377d9a3",name:"loading"}),i("span",{key:"530f53a3d0f483555752f5ac95d5f029faf03a8d"},i("slot",{key:"61b27a37dce9588633f45f18d025c207ee9d23f7",name:"prefix"},e==="prefix"&&t&&i("i",{key:"6b0d757356f94f0d1ed4731175f2340dfdb3ba45",class:" leading-none "+t}))),i("slot",{key:"8b014d1f25d7c8387c6a3b18474207695a911e12"},this.buttonText),i("span",{key:"9e9c42c69be3891d2720dbd9882ea418a90802b8"},i("slot",{key:"fc676b39c8c79225d09c9cd18506087bef811acc",name:"suffix"},e==="suffix"&&t&&i("i",{key:"0ad46cc5204af2a6525cc0156d828c57bd5078a5",class:" leading-none "+t})))))}};w.style=g;const v=".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";const y=v;const k=class{constructor(i){t(this,i);this.bcmOpen=e(this,"bcmOpen",7);this.bcmClose=e(this,"bcmClose",7);this.bcmBeforeOpen=e(this,"bcmBeforeOpen",7);this.bcmBeforeClose=e(this,"bcmBeforeClose",7);this.open=false;this.size="medium";this.position="right";this.fullWidth=false;this.noHeader=false;this.drawerClass=a({slots:{backdrop:"fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300",wrapper:"bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col",header:"flex justify-between items-center bg-color-default text-color-default",title:"font-semibold m-0 text-size-6",closeButton:"text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active",content:"overflow-y-auto flex-grow"},variants:{open:{true:{backdrop:"opacity-100 visible"},false:{backdrop:"opacity-0 invisible"}},position:{left:{wrapper:"top-0 left-0 bottom-0"},right:{wrapper:"top-0 right-0 bottom-0"},top:{wrapper:"top-0 left-0 right-0"},bottom:{wrapper:"bottom-0 left-0 right-0"}},size:{small:{header:"py-3 px-4",content:"p-4"},medium:{header:"py-3 px-4",content:"p-4"},large:{header:"py-3 px-4",content:"p-4"}},noHeader:{true:{header:"hidden"}}},compoundVariants:[{open:true,position:["left","right"],class:{wrapper:"translate-x-0"}},{open:true,position:["top","bottom"],class:{wrapper:"translate-y-0"}},{open:false,position:"left",class:{wrapper:"-translate-x-full"}},{open:false,position:"right",class:{wrapper:"translate-x-full"}},{open:false,position:"top",class:{wrapper:"-translate-y-full"}},{open:false,position:"bottom",class:{wrapper:"translate-y-full"}}]},{twMerge:false})}handleOpenChange(t){if(t){document.body.style.overflow="hidden";this.bcmOpen.emit()}else{document.body.style.overflow="";this.bcmClose.emit()}}handleKeyDown(t){if(t.key==="Escape"&&this.open){this.hide()}}async show(){const t=this.bcmBeforeOpen.emit();if(!t.defaultPrevented){this.open=true}}async hide(){const t=this.bcmBeforeClose.emit();if(!t.defaultPrevented){this.open=false}}disconnectedCallback(){document.body.style.overflow=""}getWrapperStyle(){const t={};if(this.fullWidth){if(this.position==="left"||this.position==="right"){t.width="100vw"}else{t.height="100vh"}return t}if(this.position==="left"||this.position==="right"){switch(this.size){case"small":t.width="320px";break;case"medium":t.width="480px";break;case"large":t.width="1064px";break}}else{switch(this.size){case"small":t.height="40vh";break;case"medium":t.height="60vh";break;case"large":t.height="90vh";break}}return t}render(){const{backdrop:t,wrapper:e,header:o,title:r,closeButton:a,content:s}=this.drawerClass({open:this.open,position:this.position,size:this.size,noHeader:this.noHeader});return i("div",{key:"6311b0bed989d41cf504487545f414ce5b881749",part:"base"},i("div",{key:"5aa597edf8d0d5523570fbb326072c2e02c813b0",part:"backdrop",class:t(),onClick:()=>this.hide()}),i("div",{key:"736cc10ae7341ad5139bc37ee9265801e0da6a6c",part:"wrapper",class:e(),style:this.getWrapperStyle(),role:"dialog","aria-modal":"true","aria-hidden":!this.open?"true":"false","aria-label":this.headerText},i("div",{key:"ddaf3499e8709f0ad8a58891baacfa9c5a595973",part:"header",class:o()},i("h2",{key:"0124009ad323dfb4fca18618d750789a0c805ebd",part:"title",class:r()},i("slot",{key:"95813a9ea32872ab5cd00f5d641cdaef8d43504d",name:"header"},this.headerText)),i("button",{key:"7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d",part:"close-button",class:a(),onClick:()=>this.hide(),"aria-label":"Close"},i("bcm-icon",{key:"d61996a289c3a0727475a3e7798866b874292885",name:"fa-solid fa-xmark"}))),i("div",{key:"6650b5e079d31b2bd372f80a648256761bc78a14",part:"content",class:s()},i("slot",{key:"8858d3e8e12eeeb0745a3aee54507f104bd6506f"})),i("div",{key:"97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80",part:"footer"},i("slot",{key:"ee90d5b261eef5e435d8247717e5fa79593893f3",name:"footer"}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};k.style=y;const z=".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";const C=z;const P=class{constructor(i){t(this,i);this.bcmDropdownChange=e(this,"bcmDropdownChange",1);this.isReady=false;this.dropdownItems=[];this.dropdownClass=a({base:"dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto"});this.handleSlotChange=()=>{this.dropdownItems=Array.from(this.host.querySelectorAll("bcm-dropdown-item"));if(this.dropdownItems.length===0){console.warn("No dropdown items found in dropdown component")}}}componentDidLoad(){const t=this.host.shadowRoot.querySelector("bcm-button");if(t){this.buttonRef=t;this.isReady=true}}handleDropdownItemChange(t){var e;const{element:i,selected:o}=t===null||t===void 0?void 0:t.detail;(e=this.dropdownItems)===null||e===void 0?void 0:e.forEach((t=>{if(t!=i){t.selected=false}}));this.bcmDropdownChange.emit({element:i,selected:o})}render(){return i(o,{key:"7c13b65d8c966a4a2de522aa9d765cb7933bcd81"},i("bcm-button",{key:"7511bf043370dd8360c458800c1518205c35ac3c",kind:"outline"},i("span",{key:"1a67377235ffe4b5989adab0b185585e9e4d1080",part:"text"},this.text)),this.isReady&&i("bcm-linked",{key:"78a528e16b5c76409a9546e7f2523b9535d47276",targetElement:this.buttonRef},i("div",{key:"afec0593ed669692ab2e97e58a2e918689fc9175",part:"dropdown-container",class:this.dropdownClass()},i("slot",{key:"4f94568837c8c32619aa6c586b35c8d8bb60a74c",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}};P.style=C;const j=".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";const I=j;const $=class{constructor(i){t(this,i);this.bcmDropDownItemChange=e(this,"bcmDropDownItemChange",1);this.selected=false;this.error=false;this.disabled=false;this.dropdownItemClass=a({base:"dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color",variants:{selected:{true:"bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]",false:"hover:bg-[var(--bcm-ui-color-background-base-hover)]"},error:{true:"bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]",false:""},disabled:{true:"",false:""}},defaultVariants:{selected:false,error:false,disabled:false}},{twMerge:false})}handleClick(){this.selected=true;this.bcmDropDownItemChange.emit({element:this.host,selected:this.selected})}render(){var t;return i("div",{key:"3c989e05b18e183481b760f24d3d37bae4a68eea","aria-checked":this.selected,class:this.dropdownItemClass({selected:this.selected,error:this.error}),onClick:()=>this.handleClick()},i("slot",{key:"9edf937944435ae070541bd5952fbbda1ffe5d9d",name:"left-content"},this.icon&&i("bcm-icon",{key:"1b452c2a57af6d3a7c85bd9e48107f24224eae4b","icon-name":this.icon})),i("div",{key:"d4114f8e306accdc373e753d02870ad21e65c8b1",class:"flex flex-row text-pretty w-full"},i("slot",{key:"0f1a8d78b7c91f117d5389d8bdf1efb894168df4"},this.text)),i("slot",{key:"e428dadc7ca757302c47431a3dda05895387a9f5",name:"right-content"},(t=this.rightIcons)===null||t===void 0?void 0:t.map((t=>i("bcm-icon",{"icon-name":t})))))}get host(){return r(this)}};$.style=I;const S=(t,e)=>{var i;const o=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`slot[name="${e}"]`);if(!o)return false;const r=o.assignedNodes();return r.length>0};const Y='.visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}';const T=Y;const D=class{constructor(o){t(this,o);this.bcmInput=e(this,"bcmInput",1);this.bcmChange=e(this,"bcmChange",1);this.bcmFocus=e(this,"bcmFocus",1);this.bcmBlur=e(this,"bcmBlur",1);this.bcmKeyDown=e(this,"bcmKeyDown",1);this.bcmKeyUp=e(this,"bcmKeyUp",1);this.isFocused=false;this.isValid=true;this.internalStatus="default";this.isPasswordVisible=false;this.value="";this._id=n("input");this.size="medium";this.status="default";this.fullWidth=false;this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.useNativeValidation=true;this.onInput=t=>{const e=t.target;this.value=e.value;this.bcmInput.emit(t);this.validateInput()};this.onChange=t=>{this.bcmChange.emit(t)};this.onFocus=t=>{this.isFocused=true;this.bcmFocus.emit(t)};this.onBlur=t=>{this.isFocused=false;this.bcmBlur.emit(t);this.validateInput()};this.onKeyDown=t=>{this.bcmKeyDown.emit(t)};this.onKeyUp=t=>{this.bcmKeyUp.emit(t)};this.styleClass=a({slots:{base:["bcm-input bcm-input__container","bg-[--bcm-ui-color-background-base-default]","text-[--bcm-ui-color-text-default]","border border-solid rounded","flex items-center justify-between","transition-colors duration-200","px-2"],inputClass:["input","w-full flex-1","border-0 outline-0 bg-transparent","appearance-none text-ellipsis","text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal","font-sans antialiased font-medium","px-1","[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"]},variants:{size:{small:{base:"",inputClass:"text-size-4 h-6"},medium:{base:"",inputClass:"text-size-5 h-8"},large:{base:"",inputClass:"text-size-6 h-10"}},status:{default:{base:["border-[--bcm-ui-color-border-default]","hover:border-[--bcm-ui-color-border-primary]","has-[:focus]:border-[--bcm-ui-color-border-primary]"]},error:{base:["border-[--bcm-ui-color-border-error]","hover:border-[--bcm-ui-color-border-error]","has-[:focus]:border-[--bcm-ui-color-border-error]"]},success:{base:["border-[--bcm-ui-color-border-success]","hover:border-[--bcm-ui-color-border-success]","has-[:focus]:border-[--bcm-ui-color-border-success]"]},warning:{base:["border-[--bcm-ui-color-border-warning]","hover:border-[--bcm-ui-color-border-warning]","has-[:focus]:border-[--bcm-ui-color-border-warning]"]},info:{base:["border-[--bcm-ui-color-border-info]","hover:border-[--bcm-ui-color-border-info]","has-[:focus]:border-[--bcm-ui-color-border-info]"]}},fullWidth:{true:"full-width w-full"},disabled:{true:"disabled cursor-not-allowed",false:""},focused:{true:{base:""}}},defaultVariants:{size:"medium",status:"default",fullWidth:false,disabled:false,focused:false}},{twMerge:false});this.togglePasswordVisibility=()=>{this.isPasswordVisible=!this.isPasswordVisible;this.inputRef.type=this.isPasswordVisible?"text":"password"};this.PasswordToggleButton=()=>{var t;if(this.type!=="password"||this.disabled||this.readonly||((t=this.value)===null||t===void 0?void 0:t.length)===0)return null;return i("button",{class:"appearance-none flex items-center w-6 h-full justify-center",onClick:this.togglePasswordVisibility,type:"button"},i("bcm-icon",{name:this.isPasswordVisible?"fa-eye-slash fa-regular":"fa-regular fa-eye",size:this.iconSize}))};this.iconSize={small:14,medium:16,large:18}[this.size]}handleValueChange(t){if(this.inputRef){this.inputRef.value=t}}watchStatus(t){this.internalStatus=t}watchErrorMessage(t){this.internalErrorMessage=t}async setFocus(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.focus()}async setBlur(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.blur()}async select(){var t;(t=this.inputRef)===null||t===void 0?void 0:t.select()}async setLocale(t,e){l(t,e);if(!this.isValid){this.validateInput()}}componentWillLoad(){l("en",d);this.internalStatus=this.status;this.internalErrorMessage=this.errorMessage}validateInput(){if(!this.inputRef)return;this.isValid=true;this.validationMessage="";const t=this.inputRef.value;if(this.required&&!t){this.isValid=false;this.validationMessage=c("required");this.internalStatus="error";this.internalErrorMessage=this.validationMessage;return}else if(this.minLength&&t.length<this.minLength){this.isValid=false;this.validationMessage=c("minlength",{min:this.minLength})}else if(this.maxLength&&t.length>this.maxLength){this.isValid=false;this.validationMessage=c("maxlength",{max:this.maxLength})}else if(this.pattern&&!new RegExp(this.pattern).test(t)){this.isValid=false;this.validationMessage=c("pattern")}else if(this.type==="email"&&t&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)){this.isValid=false;this.validationMessage=c("email")}else if(this.type==="number"&&t){const e=parseFloat(t);if(this.min!==undefined&&e<this.min){this.isValid=false;this.validationMessage=c("min",{min:this.min})}else if(this.max!==undefined&&e>this.max){this.isValid=false;this.validationMessage=c("max",{max:this.max})}}this.internalStatus=this.isValid?"default":"error";this.internalErrorMessage=this.validationMessage}hasSlotContent(t){return S(this.el,t)}getDefaultIconForType(){return}render(){const t=this._id+"-input"||this.name;const{base:e,inputClass:o}=this.styleClass({size:this.size,status:this.internalStatus,fullWidth:this.fullWidth,disabled:this.disabled,focused:this.isFocused});return i("div",{key:"77a0be85ac2a3749e95bedafc01134a5a6a9f655",class:"bcm-ui-element"},this.label&&i("label",{key:"a202e383e92085bed836777a5484f306d73638dd",class:s("input-label font-medium",{"text-color-label":!this.disabled,"text-color-disabled":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"}),htmlFor:t},i("slot",{key:"204121e272f4a168db119322aaba8c4ed2e5c125",name:"label"},this.label),this.required&&i("span",{key:"eb658a88419adb4003525dc711676628b832a3c4"},"*")),i("div",{key:"584edbfd2e49a4e37e45781d7844ce8b850532ff",class:e()},(this.hasSlotContent("prefix")||this.prefixIcon||this.getDefaultIconForType())&&i("div",{key:"0cbc9f42756c643cc5277fe1e7a7636a4fd490be",class:"flex items-center gap-2 px-2"},(this.prefixIcon||this.getDefaultIconForType())&&i("bcm-icon",{key:"a6c0dd258d7c28f2c8d5876fc703fa230ee3ce1a",class:"prefix-icon","icon-name":this.prefixIcon||this.getDefaultIconForType(),size:this.iconSize}),i("slot",{key:"9f8ff60b443210f0f3fd68e43ac73248bd3c4b35",name:"prefix"})),i("input",{key:"d811a67abb5727f2f2d3051d5dded8d5d78564ec",ref:t=>this.inputRef=t,id:t,class:o(),type:this.type,name:this.name,disabled:this.disabled,readonly:this.readonly,required:this.required,placeholder:this.placeholder,autocomplete:this.autocomplete,minlength:this.minLength,maxlength:this.maxLength,min:this.min,max:this.max,step:this.step,pattern:this.pattern,"aria-invalid":this.status==="error","aria-required":this.required,"aria-labelledby":this.labelledby,"aria-describedby":this.describedby,value:this.value,onInput:this.onInput,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}),(this.hasSlotContent("suffix")||this.suffixIcon)&&i("div",{key:"c10515b9f3a9fb8d87e8c0f0abd383220ba5554c",class:"flex items-center gap-2 px-2"},i("slot",{key:"5902fa399e7fad8a82e1deaf6bc45f9a5ba8b94a",name:"suffix"}),this.suffixIcon&&i("bcm-icon",{key:"46721b1a002b2b0a04686e2e8968b2c0b51c1061",class:"suffix-icon","icon-name":this.suffixIcon,size:this.iconSize})),this.PasswordToggleButton()),(this.captionText||this.internalErrorMessage||this.validationMessage)&&i("div",{key:"46f3360446fe8c40aab58d1d4047c4f1bb010fff",class:s("input-caption-text font-regular mt-1",{"text-[--bcm-ui-color-text-caption]":!this.disabled&&this.internalStatus==="default","text-[--bcm-ui-color-text-error]":!this.disabled&&(this.internalStatus==="error"||!this.isValid),"text-[--bcm-ui-color-text-success]":!this.disabled&&this.internalStatus==="success","text-[--bcm-ui-color-text-warning]":!this.disabled&&this.internalStatus==="warning","text-[--bcm-ui-color-text-info]":!this.disabled&&this.internalStatus==="info","text-[--bcm-ui-color-text-disabled]":this.disabled},{"text-size-3":this.size==="small","text-size-4":this.size==="medium","text-size-5":this.size==="large"})},!this.isValid?this.validationMessage:this.internalStatus==="error"?this.internalErrorMessage:this.captionText))}get el(){return r(this)}static get watchers(){return{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}}};D.style=T;const F='.absolute{position:absolute}.relative{position:relative}.block{display:block}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}bcm-linked{display:block;position:relative}bcm-linked[append-to-body]{display:none}.floating-content{min-width:-moz-max-content;min-width:max-content;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;will-change:transform,opacity}.floating-visible{animation:fadeInScale .2s ease-out}.floating-hidden{display:none!important;pointer-events:none}.floating-wrapper{position:relative;z-index:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.floating-arrow{z-index:-1}.floating-arrow,.floating-arrow:before{height:10px;position:absolute;width:10px}.floating-arrow:before{background:#fff;border:1px solid #e2e8f0;content:"";transform:rotate(45deg)}.arrow-top{bottom:-5px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{top:-5px}.arrow-left{right:-5px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{left:-5px}.arrow-top:before{border-bottom:0;border-right:0}.arrow-bottom:before{border-left:0;border-top:0}.arrow-left:before{border-right:0;border-top:0}.arrow-right:before{border-bottom:0;border-left:0}@media (max-width:768px){.floating-content{max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.hidden{display:none}.resize{resize:both}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}';const M=F;const O=class{constructor(i){t(this,i);this.bcmShow=e(this,"bcmShow",7);this.bcmHide=e(this,"bcmHide",7);this.bcmShown=e(this,"bcmShown",7);this.bcmHidden=e(this,"bcmHidden",7);this.trigger="click";this.placement="bottom-start";this.showDelay=0;this.hideDelay=0;this.offset=8;this.arrow=false;this.disabled=false;this.zIndex=1e3;this.appendToBody=false;this.destroyOnHide=false;this.isVisible=false;this.isReady=false;this.handleMouseEnter=()=>{this.clearTimeouts();if(this.showDelay>0){this.showTimeout=setTimeout((()=>this.show()),this.showDelay)}else{this.show()}};this.handleMouseLeave=()=>{this.clearTimeouts();if(this.hideDelay>0){this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)}else{this.hide()}};this.handleFloatingMouseEnter=()=>{this.clearTimeouts()};this.handleFloatingMouseLeave=()=>{this.clearTimeouts();if(this.hideDelay>0){this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)}else{this.hide()}};this.handleClick=t=>{t.stopPropagation();this.toggle()};this.handleFocus=()=>{this.show()};this.handleBlur=()=>{this.hide()}}setupTarget(){this.disconnectTarget();this.connectTarget()}onVisibilityChange(t){if(t){this.updatePosition();this.bcmShown.emit()}else{this.bcmHidden.emit()}}async componentDidLoad(){await new Promise((t=>requestAnimationFrame(t)));this.floatingEl=this.host.querySelector(".floating-content");if(this.floatingEl){this.isReady=true;this.connectTarget();this.setupFloatingObserver();console.log("✅ bcm-linked initialized successfully")}else{console.error("❌ Could not find .floating-content element")}}disconnectedCallback(){var t,e;this.disconnectTarget();this.clearTimeouts();(t=this.cleanup)===null||t===void 0?void 0:t.call(this);(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect();if(this.appendToBody&&this.floatingEl&&this.originalParent){this.originalParent.appendChild(this.floatingEl)}}connectTarget(){if(!this.isReady)return;this.targetEl=this.targetElement||(this.targetId?document.getElementById(this.targetId):null)||this.host.previousElementSibling||this.host.parentElement;if(!this.targetEl){console.warn("bcm-linked: No target element found");return}this.setupEventListeners();if(this.targetEl&&this.floatingEl){this.cleanup=h(this.targetEl,this.floatingEl,(()=>{if(this.isVisible){this.updatePosition()}}))}this.resizeObserver=new ResizeObserver((()=>{if(this.isVisible){this.updatePosition()}}));this.resizeObserver.observe(this.floatingEl)}disconnectTarget(){var t,e;if(this.targetEl){this.removeEventListeners()}(t=this.cleanup)===null||t===void 0?void 0:t.call(this);(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}setupEventListeners(){var t,e;if(!this.targetEl||this.disabled)return;switch(this.trigger){case"hover":this.targetEl.addEventListener("mouseenter",this.handleMouseEnter);this.targetEl.addEventListener("mouseleave",this.handleMouseLeave);(t=this.floatingEl)===null||t===void 0?void 0:t.addEventListener("mouseenter",this.handleFloatingMouseEnter);(e=this.floatingEl)===null||e===void 0?void 0:e.addEventListener("mouseleave",this.handleFloatingMouseLeave);break;case"click":this.targetEl.addEventListener("click",this.handleClick);this.setupClickOutside();break;case"focus":this.targetEl.addEventListener("focus",this.handleFocus);this.targetEl.addEventListener("blur",this.handleBlur);break}}removeEventListeners(){var t,e;if(!this.targetEl)return;this.targetEl.removeEventListener("mouseenter",this.handleMouseEnter);this.targetEl.removeEventListener("mouseleave",this.handleMouseLeave);this.targetEl.removeEventListener("click",this.handleClick);this.targetEl.removeEventListener("focus",this.handleFocus);this.targetEl.removeEventListener("blur",this.handleBlur);(t=this.floatingEl)===null||t===void 0?void 0:t.removeEventListener("mouseenter",this.handleFloatingMouseEnter);(e=this.floatingEl)===null||e===void 0?void 0:e.removeEventListener("mouseleave",this.handleFloatingMouseLeave);this.removeClickOutside()}setupClickOutside(){this.clickOutsideHandler=t=>{var e,i;const o=t.target;if(!((e=this.floatingEl)===null||e===void 0?void 0:e.contains(o))&&!((i=this.targetEl)===null||i===void 0?void 0:i.contains(o))&&!this.host.contains(o)){this.hide()}};document.addEventListener("click",this.clickOutsideHandler,true)}removeClickOutside(){if(this.clickOutsideHandler){document.removeEventListener("click",this.clickOutsideHandler,true);this.clickOutsideHandler=undefined}}clearTimeouts(){if(this.showTimeout){clearTimeout(this.showTimeout);this.showTimeout=undefined}if(this.hideTimeout){clearTimeout(this.hideTimeout);this.hideTimeout=undefined}}async updatePosition(){if(!this.targetEl||!this.floatingEl||!this.isVisible)return;const t=[b(this.offset),u({fallbackPlacements:["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"]}),f({padding:8})];const{x:e,y:i,placement:o}=await m(this.targetEl,this.floatingEl,{placement:this.placement,middleware:t,strategy:"fixed"});Object.assign(this.floatingEl.style,{left:`${e}px`,top:`${i}px`,zIndex:this.zIndex.toString()});if(this.arrow){this.updateArrow(o)}}updateArrow(t){var e;const i=(e=this.floatingEl)===null||e===void 0?void 0:e.querySelector(".floating-arrow");if(!i)return;i.className="floating-arrow";const o=t.split("-")[0];i.classList.add(`arrow-${o}`)}async show(){if(this.disabled||this.isVisible)return;this.bcmShow.emit();if(this.appendToBody&&this.floatingEl){this.originalParent=this.floatingEl.parentNode;this.originalNextSibling=this.floatingEl.nextSibling;document.body.appendChild(this.floatingEl)}this.isVisible=true;await new Promise((t=>requestAnimationFrame(t)));await this.updatePosition()}async hide(){if(!this.isVisible)return;this.bcmHide.emit();this.isVisible=false;if(this.appendToBody&&this.floatingEl&&this.originalParent){if(this.originalNextSibling){this.originalParent.insertBefore(this.floatingEl,this.originalNextSibling)}else{this.originalParent.appendChild(this.floatingEl)}this.originalParent=undefined;this.originalNextSibling=undefined}if(this.destroyOnHide&&this.floatingEl&&this.floatingEl.parentNode){this.floatingEl.parentNode.removeChild(this.floatingEl)}}async toggle(){if(this.isVisible){await this.hide()}else{await this.show()}}async updatePositioning(){await this.updatePosition()}setupFloatingObserver(){if(!this.floatingEl)return;this.resizeObserver=new ResizeObserver((()=>{if(this.isVisible){this.updatePosition()}}));this.resizeObserver.observe(this.floatingEl)}render(){const t={"floating-content":true,"floating-visible":this.isVisible,"floating-hidden":!this.isVisible,"floating-with-arrow":this.arrow,"floating-destroy-on-hide":this.destroyOnHide};return i(o,{key:"f5835cc1b6044476e66402d23a3becf18d3f2049"},i("div",{key:"2c7f92bbe85bc938a767734ef4b27702247fb390",class:t,style:{position:"fixed",top:"0px",left:"0px",zIndex:this.zIndex.toString(),display:this.isVisible?"block":"none",visibility:this.isVisible?"visible":"hidden",opacity:this.isVisible?"1":"0",pointerEvents:this.isVisible?"auto":"none"}},this.arrow&&i("div",{key:"f6eedac02b29b3ca00a9a84eea940ac89089f30c",class:"floating-arrow"}),i("div",{key:"7cb19f085de1d77a41fd9897be90999e78a0a54d",class:"floating-wrapper"},i("slot",{key:"a4b4289642850e3c2f7f27771b3d28bc41c8248a"}))),i("div",{key:"61cd7af9a4a47c87c308e1e67f96efb987c97312",style:{display:"none"}},i("slot",{key:"7160df275f5c7c66733158f95266598d0d207a17",name:"fallback"})))}get host(){return r(this)}static get watchers(){return{targetId:["setupTarget"],targetElement:["setupTarget"],isVisible:["onVisibilityChange"]}}};O.style=M;const X=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.block{display:block}.h-fit{height:fit-content}.w-fit{width:fit-content}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.text-color-default{color:var(--bcm-ui-color-text-default)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const A=X;const E={ctrl:"⌘",alt:"⌥",shift:"⇧",del:"⌫",delete:"⌫",backspace:"⌦",enter:"⏎",return:"⏎"};const _=class{constructor(e){t(this,e);this.size="small";this.isMac=/Mac/.test(window.navigator.userAgent)}getHotkey(t){if(!t){return""}if(this.isMac&&(t.includes(" ")||t.includes("+"))){const e=t.split(/[\s+]+/);return e.map((t=>E[t]||t)).join("")}else{return t}}render(){const{size:t,hotkey:e}=this;return i("div",{key:"007588d1d20941ead644a3d1fd72410cb6793ff5",class:s("bcm-ui-element bcm-ui-content-display","block h-fit w-fit rounded border border-solid px-1","border-color-default bg-color-default text-color-default","text-center font-medium capitalize",{"text-size-2":t==="small","text-size-3":t==="medium","text-size-4":t==="large"})},this.getHotkey(e))}};_.style=A;const B={display:"h1",heading1:"h2",heading2:"h3",title1:"h4",title2:"h5",title3:"h6",body:"p",bodyAccent:"p",helper:"p",caption:"p",label:"label",placeholder:"p",link:"a",info:"p",infoAccent:"p"};const V=".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const L=V;const W=class{constructor(e){t(this,e);this.variant="body";this.size="medium";this.overflow=false;this.variantClassMap={display:"font-semibold text-size-12 text-color-header",heading1:"font-semibold text-size-7 text-color-header",heading2:"font-semibold text-size-6 text-color-header",title1:{small:"font-semibold text-size-5 text-color-header",medium:"font-semibold text-size-6 text-color-header",large:"font-semibold text-size-7 text-color-header"},title2:{small:"font-semibold text-size-4 text-color-default",medium:"font-semibold text-size-5 text-color-default",large:"font-semibold text-size-6 text-color-default"},title3:{small:"font-semibold text-size-3 text-color-disabled",medium:"font-semibold text-size-4 text-color-disabled",large:"font-semibold text-size-5 text-color-disabled"},body:{small:"font-regular text-size-4 text-color-default",medium:"font-regular text-size-5 text-color-default",large:"font-regular text-size-6 text-color-default"},bodyAccent:{small:"font-medium text-size-4 text-color-default",medium:"font-medium text-size-5 text-color-default",large:"font-medium text-size-6 text-color-default"},helper:{small:"font-regular text-size-4 text-color-helper",medium:"font-regular text-size-5 text-color-helper",large:"font-regular text-size-6 text-color-helper"},caption:{small:"font-regular text-size-3 text-color-caption",medium:"font-regular text-size-4 text-color-caption",large:"font-regular text-size-5 text-color-caption"},link:{small:"font-medium text-size-4 underline text-color-primary",medium:"font-medium text-size-5 underline text-color-primary",large:"font-medium text-size-6 underline text-color-primary"},label:{small:"font-medium text-size-3 text-color-label",medium:"font-medium text-size-4 text-color-label",large:"font-medium text-size-5 text-color-label"},placeholder:{small:"font-regular text-size-4 text-color-placeholder",medium:"font-regular text-size-5 text-color-placeholder",large:"font-regular text-size-6 text-color-placeholder"},info:{small:"font-regular text-size-3 text-color-default",medium:"font-regular text-size-4 text-color-default",large:"font-regular text-size-5 text-color-default"},infoAccent:{small:"font-medium text-size-3 text-color-header",medium:"font-medium text-size-4 text-color-header",large:"font-medium text-size-5 text-color-header"}};this.getTextClass=(t,e)=>{const i=this.variantClassMap[t];if(typeof i==="string"){return i}return i[e]};this.getOverflowClass=t=>t?"truncate":""}render(){var t;const e=B[this.variant];const o=this.getTextClass(this.variant,this.size);const r=this.getOverflowClass((t=this.overflow)!==null&&t!==void 0?t:false);return i(e,{key:"152d737752eea962ac3c5086011da69578ef0920",class:s("bcm-text appearance-none m-0 p-0",o,r),part:"text"},i("slot",{key:"e8c8c89a5925936a2e22a75265b7f42317eab983"},this.text))}};W.style=L;export{w as bcm_button,k as bcm_drawer,P as bcm_dropdown,$ as bcm_dropdown_item,D as bcm_input,O as bcm_linked,_ as bcm_shortcut,W as bcm_text};
|
|
2
|
+
//# sourceMappingURL=p-ceaa2fc5.entry.js.map
|