npm - bromcom-ui-next - Versions diffs - 0.1.28 → 0.1.30 - Mend

bromcom-ui-next 0.1.28 → 0.1.30

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.

Files changed (438) hide show

package/dist/collection/components/popover/popover.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.component.js","sourceRoot":"","sources":["../../../src/components/popover/popover.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAOH,MAAM,OAAO,OAAO;IALpB;QAYE;;;;WAIG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAC9C;;;;WAIG;QAEH,cAAS,GAAwC,KAAK,CAAC;QACvD;;;;WAIG;QAEH,YAAO,GAAsB,OAAO,CAAC;QACrC;;;;WAIG;QAEH,eAAU,GAAW,GAAG,CAAC;QACzB;;;;WAIG;QAEH,SAAI,GAAY,KAAK,CAAC;QA2Cd,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC;YACD,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;gBAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC,CAAC;QAsBM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAgB,CAAC;YAEhD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;gBACpE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACvE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAEvE,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;oBAC7B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;oBACjE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACzE,CAAC;gBAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;oBAC7B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;oBACpE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACtE,CAAC;gBAED,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACnD,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;gBAC5G,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACzD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,mBAAc,GAAG,KAAK,IAAI,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE9E,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE;gBACzG,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aACzJ,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBACvC,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,GAAG,EAAE,GAAG,CAAC,IAAI;aACd,CAAC,CAAC;YAEH,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACxE,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAwC,CAAC;YACrF,MAAM,UAAU,GAAG;gBACjB,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,OAAO;aACd,CAAC,aAAa,CAAC,CAAC;YAEjB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACrC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;gBACzC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;gBACxC,CAAC,UAAU,CAAC,EAAE,MAAM;aACrB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,iBAAY,GAAG,EAAE,CAAC;YACxB,KAAK,EAAE;gBACL,GAAG,EAAE,wHAAwH;gBAC7H,MAAM,EAAE,0BAA0B;gBAClC,OAAO,EAAE,wBAAwB;gBACjC,KAAK,EAAE,wDAAwD;aAChE;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;oBAC7B,MAAM,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;oBAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE;iBAC9B;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;oBACrB,KAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE;iBACzB;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;aACd;SACF,CAAC,CAAC;KAuBJ;IAzKC,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IAED,oBAAoB;;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACvE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACzE,CAAC;QACD,MAAA,IAAI,CAAC,iBAAiB,oDAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClC,CAAC;IA6BD;;;;OAIG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,UAAU;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAuFD,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;YACxD,MAAM,EAAE,IAAI,CAAC,IAAI;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QAEH,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU;YACnB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAS;YAC1D,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;gBAC/H,4DAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,GAAO;gBAC7E,4DAAK,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,QAAQ;oBACjC,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAQ,CACxC;gBACN,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;oBACnC,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACtC,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n \n @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n \n @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.openPopup(); // Opens the popover\n * popover.closePopup(); // Closes the popover\n * </script>\n \n @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n \n @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() el: HTMLElement;\n private targetElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'click'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'click';\n /\n @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n * Adds a delay to prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n hoverDelay: number = 150;\n /\n @prop {boolean} open - Indicates whether the popover is currently open.\n * Can be set programmatically or toggled by user interaction. Mutable.\n * Default: false\n /\n @Prop({ mutable: true })\n open: boolean = false;\n /\n @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n /\n @Prop()\n headerText: string;\n /\n @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n /\n @Prop()\n message: string;\n /\n @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverOpen: EventEmitter<void>;\n\n /\n @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverClose: EventEmitter<void>;\n\n connectedCallback() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private togglePopover = () => {\n this.open = !this.open;\n if (this.open) {\n this.bcmPopoverOpen.emit();\n } else {\n this.bcmPopoverClose.emit();\n }\n this.updatePosition();\n };\n\n private showPopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.bcmPopoverOpen.emit();\n this.updatePosition();\n }, this.hoverDelay);\n };\n\n private hidePopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.bcmPopoverClose.emit();\n }, this.hoverDelay);\n };\n\n /\n @method {Promise<void>} openPopup - Programmatically opens the popover.\n * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is opened.\n /\n @Method()\n async openPopup() {\n this.showPopover();\n }\n\n /\n @method {Promise<void>} closePopup - Programmatically closes the popover.\n * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is closed.\n */\n @Method()\n async closePopup() {\n this.hidePopover();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.togglePopover);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showPopover);\n this.targetElement.addEventListener('mouseleave', this.hidePopover);\n }\n\n if (this.popoverElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private popoverClass = tv({\n slots: {\n box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n isOpen: {\n true: { box: 'flex' },\n false: { box: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n });\n\n render() {\n const { box, header, content, arrow } = this.popoverClass({\n isOpen: this.open,\n size: this.size,\n });\n\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <div class={header()} part=\"header\">\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n <div class={content()} part=\"content\">\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"popover.component.js","sourceRoot":"","sources":["../../../src/components/popover/popover.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method, State, Watch, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.\n * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.\n \n @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n \n @example Hover Popover with Delays\n * <bcm-popover trigger=\"hover\" show-delay=\"200\" hide-delay=\"100\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n \n @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.show(); // Opens the popover\n * popover.hide(); // Closes the popover\n * popover.toggle(); // Toggles the popover\n * </script>\n \n @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n \n @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() host: HTMLElement;\n\n // Element references\n private triggerRef?: HTMLElement;\n private popoverRef?: HTMLElement;\n private arrowRef?: HTMLElement;\n\n // Cleanup references\n private cleanupAutoUpdate?: () => void;\n private showTimeout?: number;\n private hideTimeout?: number;\n\n // Unique ID for ARIA\n private popoverId = `popover-${Math.random().toString(36).substring(2, 11)}`;\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('click' \| 'hover' \| 'hover focus')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both.\n * Default: 'click'\n /\n @Prop() trigger: 'click' \| 'hover' \| 'hover focus' = 'click';\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing the popover.\n * Useful to prevent popovers from appearing on quick mouse movements.\n * Default: 0\n /\n @Prop({ attribute: 'show-delay' }) showDelay: number = 0;\n\n /\n @prop {number} hideDelay - Delay in milliseconds before hiding the popover.\n * Provides a grace period for mouse movements.\n * Default: 0\n /\n @Prop({ attribute: 'hide-delay' }) hideDelay: number = 0;\n\n /\n @prop {boolean} open - Controls the open state of the popover.\n * Can be set programmatically or toggled by user interaction.\n * Default: false\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside.\n * Default: true\n /\n @Prop() closeOnOutsideClick: boolean = true;\n\n /\n @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key.\n * Default: true\n /\n @Prop() closeOnEscape: boolean = true;\n\n /\n @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n /\n @Prop() headerText?: string;\n\n /\n @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n /\n @Prop() message?: string;\n\n /\n @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element.\n * Default: true\n /\n @Prop() arrow: boolean = true;\n\n // Internal state\n @State() isOpen: boolean = false;\n\n /\n @event bcmBeforeOpen - Emitted before the popover opens.\n * Useful for performing actions before the popover becomes visible.\n /\n @Event({ composed: false, bubbles: false }) bcmBeforeOpen: EventEmitter<void>;\n\n /\n @event bcmOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n /\n @Event({ composed: false, bubbles: false }) bcmOpen: EventEmitter<void>;\n\n /\n @event bcmBeforeClose - Emitted before the popover closes.\n * Useful for performing actions before the popover is hidden.\n /\n @Event({ composed: false, bubbles: false }) bcmBeforeClose: EventEmitter<void>;\n\n /\n @event bcmClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n /\n @Event({ composed: false, bubbles: false }) bcmClose: EventEmitter<void>;\n\n // Watch for open prop changes\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.showInternal();\n } else {\n this.hideInternal();\n }\n }\n\n // Internal show logic\n private showInternal() {\n if (!this.popoverRef) return;\n\n this.isOpen = true;\n this.popoverRef.showPopover();\n this.startAutoUpdate();\n this.updatePosition();\n this.triggerRef?.setAttribute('aria-expanded', 'true');\n this.bcmOpen.emit();\n\n if (this.closeOnOutsideClick) {\n this.addOutsideClickListener();\n }\n }\n\n // Internal hide logic\n private hideInternal() {\n if (!this.popoverRef) return;\n\n this.isOpen = false;\n this.popoverRef.hidePopover();\n this.stopAutoUpdate();\n this.triggerRef?.setAttribute('aria-expanded', 'false');\n this.bcmClose.emit();\n this.removeOutsideClickListener();\n }\n\n /\n Programmatically shows the popover.\n * Respects the showDelay prop.\n /\n @Method()\n async show(): Promise<void> {\n if (this.open) return;\n\n this.clearTimeouts();\n\n if (this.showDelay > 0) {\n this.showTimeout = window.setTimeout(() => {\n this.bcmBeforeOpen.emit();\n this.open = true;\n }, this.showDelay);\n } else {\n this.bcmBeforeOpen.emit();\n this.open = true;\n }\n }\n\n /\n Programmatically hides the popover.\n * Respects the hideDelay prop.\n /\n @Method()\n async hide(): Promise<void> {\n if (!this.open) return;\n\n this.clearTimeouts();\n\n if (this.hideDelay > 0) {\n this.hideTimeout = window.setTimeout(() => {\n this.bcmBeforeClose.emit();\n this.open = false;\n }, this.hideDelay);\n } else {\n this.bcmBeforeClose.emit();\n this.open = false;\n }\n }\n\n /\n Toggles the popover visibility.\n */\n @Method()\n async toggle(): Promise<void> {\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n private clearTimeouts() {\n if (this.showTimeout) {\n clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n }\n if (this.hideTimeout) {\n clearTimeout(this.hideTimeout);\n this.hideTimeout = undefined;\n }\n }\n\n private startAutoUpdate() {\n if (!this.triggerRef \|\| !this.popoverRef) return;\n\n this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.popoverRef, () => this.updatePosition(), {\n ancestorScroll: true,\n ancestorResize: true,\n elementResize: true,\n layoutShift: true,\n });\n }\n\n private stopAutoUpdate() {\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = undefined;\n }\n\n private handleSlotChange = () => {\n const slot = this.host.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (!slot) return;\n\n const elements = slot.assignedElements();\n if (elements.length > 0) {\n // Remove old listeners\n this.removeTriggerListeners();\n\n this.triggerRef = elements[0] as HTMLElement;\n this.setupTriggerListeners();\n this.setupAriaAttributes();\n }\n };\n\n private setupTriggerListeners() {\n if (!this.triggerRef) return;\n\n if (this.trigger === 'hover' \|\| this.trigger === 'hover focus') {\n this.triggerRef.addEventListener('mouseenter', this.handleMouseEnter);\n this.triggerRef.addEventListener('mouseleave', this.handleMouseLeave);\n this.popoverRef?.addEventListener('mouseenter', this.handlePopoverMouseEnter);\n this.popoverRef?.addEventListener('mouseleave', this.handlePopoverMouseLeave);\n }\n\n if (this.trigger === 'click') {\n this.triggerRef.addEventListener('click', this.handleTriggerClick);\n }\n\n if (this.trigger === 'hover focus') {\n this.triggerRef.addEventListener('focus', this.handleFocus);\n this.triggerRef.addEventListener('blur', this.handleBlur);\n }\n }\n\n private removeTriggerListeners() {\n if (!this.triggerRef) return;\n\n this.triggerRef.removeEventListener('mouseenter', this.handleMouseEnter);\n this.triggerRef.removeEventListener('mouseleave', this.handleMouseLeave);\n this.triggerRef.removeEventListener('click', this.handleTriggerClick);\n this.triggerRef.removeEventListener('focus', this.handleFocus);\n this.triggerRef.removeEventListener('blur', this.handleBlur);\n\n this.popoverRef?.removeEventListener('mouseenter', this.handlePopoverMouseEnter);\n this.popoverRef?.removeEventListener('mouseleave', this.handlePopoverMouseLeave);\n }\n\n private handleMouseEnter = () => {\n this.show();\n };\n\n private handleMouseLeave = () => {\n this.hide();\n };\n\n private handlePopoverMouseEnter = () => {\n this.clearTimeouts();\n };\n\n private handlePopoverMouseLeave = () => {\n this.hide();\n };\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private handleFocus = () => {\n this.show();\n };\n\n private handleBlur = () => {\n this.hide();\n };\n\n private setupAriaAttributes() {\n if (!this.triggerRef) return;\n\n this.triggerRef.setAttribute('aria-describedby', this.popoverId);\n this.triggerRef.setAttribute('aria-expanded', String(this.open));\n this.triggerRef.setAttribute('aria-haspopup', 'dialog');\n }\n\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.closeOnEscape \|\| !this.open) return;\n\n if (event.key === 'Escape') {\n // Topmost popover check\n const openPopovers = Array.from(document.querySelectorAll('bcm-popover[open]'));\n const topPopover = openPopovers[openPopovers.length - 1];\n\n if (topPopover === this.host) {\n event.preventDefault();\n this.hide();\n this.triggerRef?.focus();\n }\n }\n }\n\n private handleOutsideClick = (event: Event) => {\n if (!this.closeOnOutsideClick \|\| !this.open) return;\n\n const target = event.target as Node;\n const path = event.composedPath();\n\n const isInsideHost = this.host.contains(target) \|\| path.includes(this.host);\n const isInsidePopover = this.popoverRef?.contains(target) \|\| (this.popoverRef && path.includes(this.popoverRef));\n\n if (!isInsideHost && !isInsidePopover) {\n this.hide();\n }\n };\n\n private addOutsideClickListener() {\n // Add on next tick to avoid catching current click\n setTimeout(() => {\n document.addEventListener('click', this.handleOutsideClick, true);\n }, 0);\n }\n\n private removeOutsideClickListener() {\n document.removeEventListener('click', this.handleOutsideClick, true);\n }\n\n private handleToggle = (event: ToggleEvent) => {\n // Sync internal state with native popover state\n if (event.newState === 'open' && !this.isOpen) {\n this.isOpen = true;\n } else if (event.newState === 'closed' && this.isOpen) {\n this.isOpen = false;\n }\n };\n\n componentDidLoad() {\n // Toggle event listener (Popover API)\n this.popoverRef?.addEventListener('toggle', this.handleToggle as EventListener);\n\n // Initial state sync\n if (this.open) {\n this.showInternal();\n }\n }\n\n disconnectedCallback() {\n this.clearTimeouts();\n this.stopAutoUpdate();\n this.removeTriggerListeners();\n this.removeOutsideClickListener();\n\n if (this.popoverRef) {\n this.popoverRef.removeEventListener('toggle', this.handleToggle as EventListener);\n\n if (this.isOpen) {\n try {\n this.popoverRef.hidePopover();\n } catch (e) {\n // Element might already be removed\n }\n }\n }\n }\n\n private updatePosition = async () => {\n if (!this.triggerRef \|\| !this.popoverRef) return;\n\n // Check if trigger element is still in viewport\n const triggerRect = this.triggerRef.getBoundingClientRect();\n const isInViewport =\n triggerRect.bottom > 0 && triggerRect.top < window.innerHeight && triggerRect.right > 0 && triggerRect.left < window.innerWidth;\n\n // Hide popover if trigger is out of viewport\n if (!isInViewport && this.open) {\n this.hide();\n return;\n }\n\n // Virtual element for shadow DOM boundary\n const virtualElement = {\n getBoundingClientRect: () => this.triggerRef!.getBoundingClientRect(),\n };\n\n const middleware = [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 })];\n\n if (this.arrow && this.arrowRef) {\n middleware.push(arrow({ element: this.arrowRef }));\n }\n\n const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.popoverRef, {\n placement: this.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(this.popoverRef.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n // Update placement attribute for CSS\n this.popoverRef.setAttribute('data-placement', placement);\n\n // Arrow positioning\n if (this.arrow && this.arrowRef && middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\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.arrowRef.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n });\n }\n };\n\n private popoverClass = tv({\n slots: {\n box: [\n 'bcm-ui-element',\n 'bcm-popover',\n 'fixed',\n 'm-0',\n 'flex',\n 'flex-col',\n 'bg-[--popover-bg]',\n 'rounded-md',\n 'shadow-3',\n 'p-3',\n 'gap-1.5',\n 'min-w-max',\n ],\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-3 h-3 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n render() {\n const { box, header, content, arrow: arrowClass } = this.popoverClass({\n size: this.size,\n });\n\n return (\n <div class=\"inline-block\">\n <slot onSlotchange={this.handleSlotChange}></slot>\n\n <div\n ref={el => (this.popoverRef = el as HTMLElement)}\n id={this.popoverId}\n part=\"popover\"\n class={box()}\n // @ts-ignore - popover is a valid HTML attribute\n popover=\"manual\"\n role=\"dialog\"\n aria-labelledby={this.headerText ? `${this.popoverId}-header` : undefined}\n >\n {this.arrow && <div ref={el => (this.arrowRef = el as HTMLElement)} part=\"arrow\" class={arrowClass()} />}\n\n <div id={`${this.popoverId}-header`} part=\"header\" class={header()}>\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n\n <div part=\"content\" class={content()}>\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/popover/popover.css CHANGED Viewed

	@@ -1 +1 @@
1	- :host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.~~z-\[9999\]~~{~~z-index~~:~~9999~~}.~~flex~~{display:~~flex~~}.~~hidden~~{display:~~none~~}.h-4{height~~:1rem~~}.w-4{width~~:1rem~~}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}
1	+ .visible{visibility:visible}.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)}:host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}[popover]{border:none;overflow:visible;padding:0}[popover]:not(:popover-open){display:none}[popover]:popover-open{opacity:1;transform:scale(1);transition:opacity .15s ease-out,transform .15s ease-out}@starting-style{[popover]:popover-open{opacity:0;transform:scale(.95)}}[data-placement^=top] [part=arrow]{border-left:none;border-top:none}[data-placement^=bottom] [part=arrow]{border-bottom:none;border-right:none}[data-placement^=left] [part=arrow]{border-bottom:none;border-left:none}[data-placement^=right] [part=arrow]{border-right:none;border-top:none}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.m-0{margin:0}.inline-block{display:inline-block}.flex{display:flex}.h-3{height:.75rem}.w-3{width:.75rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.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)}

package/dist/collection/components/radio/radio.component.js CHANGED Viewed

@@ -190,7 +190,7 @@ export class BcmRadio {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: '8f59d67513409066c9e3d7e2c392cc761bfdbfea', class: container(), style: this.getRadioStyle() }, h("input", { key: '69aac18c67de1847ba1d7c1e1498dc588e45b5f2', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '70eae4b7ac942b0c4f18da4feb45bb24b4bc3af6', class: dotContainer() }, h("div", { key: 'a22cd8353a5d97cdd473918628c9cfe476e6fd7a', class: dot() })), h("span", { key: 'ef3ed62b75fc1affa89c1d4ca13976aea7ed102a', class: labelClass() }, h("slot", { key: '132dbacf8bbe0bc8ff8acafe92a1dbc47f39849f' }, this.label))));
+        return (h("label", { key: '08ec0c4fc58c644ea64f5a555a28d85e3a461d20', class: container(), style: this.getRadioStyle() }, h("input", { key: 'e9e151e8bd0d85636a571e3df0da740da9b882ba', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '59822922a1e3c29f3e91b18c06d52d0a21ac981d', class: dotContainer() }, h("div", { key: '0bf638ed15145e2359d54fb1fb013dbcf19cdbb6', class: dot() })), h("span", { key: '86b95c35426abd26f800f4509f3a996f58865263', class: labelClass() }, h("slot", { key: 'e55448e4009dfaee59d056237e67e5a548013db0' }, this.label))));
     }
     static get is() { return "bcm-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -208,7 +208,6 @@ export class BcmRadio {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -229,11 +228,11 @@ export class BcmRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -254,11 +253,11 @@ export class BcmRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -279,11 +278,11 @@ export class BcmRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -305,11 +304,11 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -331,11 +330,11 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -357,11 +356,11 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -383,11 +382,11 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'right' | 'left'",
@@ -409,11 +408,11 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'right'"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -435,6 +434,7 @@ export class BcmRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "error",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/radio-group/radio-group.component.js CHANGED Viewed

@@ -178,14 +178,14 @@ export class BcmRadioGroup {
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '0156af0f5cbb5fe42237527163aa98accdcadcec', class: host() }, this.label && (h("label", { key: '132871f4ec63da77602047bcdc061d362203af85', class: classNames('input-label font-medium', {
+        return (h("div", { key: 'e66470b52aa2bbc8fbf7f60fc2fb692668898821', class: host() }, this.label && (h("label", { key: '59e800f0dbbe17f141449bd51e088dfb297981ec', class: classNames('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',
-            }) }, h("slot", { key: 'd7ead39ee81388ce3e8e56b79aa1bca7c40b76d9', name: "label" }, this.label), this.required && h("span", { key: '708c373de54b1b495f3672faa19905dbe0ba4dd5' }, "*"))), h("div", { key: 'bf573a67c0b190363ef749f9dc80f02d03fcfe82', class: container() }, h("slot", { key: '266e18fe697f9a95b32f5f25ee73eef2e71dbff9', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: 'b4cef6e66d95dd4ea6c676b3b00ab43457bda954', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, h("slot", { key: 'eb51a2a3a26c69dc0d2b94b9d889507fa40fe60a', name: "label" }, this.label), this.required && h("span", { key: 'aee0b50eb6a89526f660e64d2a8a97e7e752aa7b' }, "*"))), h("div", { key: 'a6c9802df856b445b0d161dbea9ccec292420fdf', class: container() }, h("slot", { key: 'a8511a8598a8bbfefe29be2ce359f82dac4a3284', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: 'b6d7730c3ae07c8595a819dacf8f119058b256f0', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled,
                 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
                 'text-[--bcm-ui-color-text-disabled]': this.disabled,
@@ -211,7 +211,6 @@ export class BcmRadioGroup {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -232,11 +231,11 @@ export class BcmRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -257,11 +256,11 @@ export class BcmRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -283,11 +282,11 @@ export class BcmRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -309,11 +308,11 @@ export class BcmRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,11 +334,11 @@ export class BcmRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -360,11 +359,11 @@ export class BcmRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -386,11 +385,11 @@ export class BcmRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "direction": {
                 "type": "string",
-                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -412,11 +411,11 @@ export class BcmRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "direction",
                 "defaultValue": "'vertical'"
             },
             "captionText": {
                 "type": "string",
-                "attribute": "caption-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -437,7 +436,8 @@ export class BcmRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "caption-text"
             }
         };
     }

package/dist/collection/components/segmented-picker/segmented-picker-option.component.js CHANGED Viewed

@@ -84,11 +84,11 @@ export class BcmSegmentedPickerOption {
     render() {
         const size = this.size || this.getSizeFromParent();
         const disabled = this.isDisabled();
-        return (h(Host, { key: '2af991ae0e4fa193e3a097083d870e413e7b05ef' }, h("button", { key: '6b56d96e0d8f92cd252109fddea6e0625905462c', class: this.optionClass({
+        return (h(Host, { key: '506fe6742a69ac3431b34a85cde71f7833e9f950' }, h("button", { key: '0097b3c811b31c53db4f210039197d955b5d59c2', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '28664f2615d9fde8a8f5c0a22e4dceef9abf9f57' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '65c247db90e8ee53572c62bf2c4ddf88bac407cf' }, this.label))));
     }
     static get is() { return "bcm-segmented-picker-option"; }
     static get encapsulation() { return "shadow"; }
@@ -106,7 +106,6 @@ export class BcmSegmentedPickerOption {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -121,11 +120,11 @@ export class BcmSegmentedPickerOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -140,11 +139,11 @@ export class BcmSegmentedPickerOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SegmentedPickerSize",
@@ -165,11 +164,11 @@ export class BcmSegmentedPickerOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -185,11 +184,11 @@ export class BcmSegmentedPickerOption {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -205,6 +204,7 @@ export class BcmSegmentedPickerOption {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/segmented-picker/segmented-picker-option.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-picker-option.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker-option.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,wBAAwB;IALrC;QAoBE,sCAAsC;QAEtC,aAAQ,GAAG,KAAK,CAAC;QAEjB,sCAAsC;QAEtC,aAAQ,GAAG,KAAK,CAAC;QAWT,cAAS,GAAuB,IAAI,CAAC;QA6CrC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,UAAU,EAAE;gBAAE,OAAO;YAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;QAQM,gBAAW,GAAG,EAAE,CACtB;YACE,IAAI,EAAE,yHAAyH;YAC/H,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,2BAA2B;oBAClC,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,2BAA2B;iBACnC;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,mCAAmC;oBACzC,KAAK,EAAE,mCAAmC;iBAC3C;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,+BAA+B;oBACrC,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAuBH;IAxGC,iBAAiB;QACf,wBAAwB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,~~CAAC~~,CAAC;~~QAE3D~~,gCAAgC;QAChC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;QACtE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,8EAA8E;QAC9E,oCAAoC;QACpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,CAAC;QACxC,CAAC;IACH,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,mBAAmB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBACnD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACrG,CAAC;IACH,CAAC;IAEO,eAAe;;QACrB,OAAO,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,OAAO,CAAC,MAAK,IAAI,CAAC,KAAK,CAAC;IAC9D,CAAC;IAEO,iBAAiB;;QACvB,OAAO,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,MAAM,CAAyB,KAAI,QAAQ,CAAC;IACnF,CAAC;IAEO,UAAU;;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,UAAU,CAAC,CAAA,IAAI,KAAK,CAAC;IAC5E,CAAC;IAQD,KAAK,CAAC,QAAQ;;QACZ,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACzE,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,CAAC;IACrD,CAAC;IA+BD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEnC,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;oBACtB,IAAI;oBACJ,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ;iBACT,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ;gBAEb,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n tag: 'bcm-segmented-picker-option',\n styleUrl: 'segmented-picker-option.css',\n shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n @Element() host: HTMLElement;\n\n /** Option value /\n @Prop()\n value!: string;\n\n /* Option display label /\n @Prop()\n label?: string;\n\n /* Controls the option size /\n @Prop()\n size?: SegmentedPickerSize;\n\n /* Whether this option is selected /\n @Prop({ mutable: true })\n selected = false;\n\n /* Whether this option is disabled /\n @Prop()\n disabled = false;\n\n /* Click event */\n @Event({\n composed: false,\n bubbles: true,\n cancelable: true,\n })\n bcmOptionClick: EventEmitter<string>;\n\n private parentValueObserver: MutationObserver;\n private parentRef: HTMLElement \| null = null;\n\n componentWillLoad() {\n // Parent referansını al\n this.parentRef = this.host.closest('bcm-segmented-picker');\n\n // İlk yüklemede selected durumu\n if (this.parentRef) {\n this.selected = this.parentRef.getAttribute('value') === this.value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n // Burada artık prop değişikliği yok\n this.setupValueObserver();\n }\n\n disconnectedCallback() {\n if (this.parentValueObserver) {\n this.parentValueObserver.disconnect();\n }\n }\n\n private setupValueObserver() {\n if (this.parentRef) {\n this.parentValueObserver = new MutationObserver(() => {\n this.selected = this.isValueSelected();\n });\n this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n }\n }\n\n private isValueSelected(): boolean {\n return this.parentRef?.getAttribute('value') === this.value;\n }\n\n private getSizeFromParent(): SegmentedPickerSize {\n return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) \|\| 'medium';\n }\n\n private isDisabled(): boolean {\n return this.disabled \|\| this.parentRef?.hasAttribute('disabled') \|\| false;\n }\n\n private handleClick = () => {\n if (this.isDisabled()) return;\n this.bcmOptionClick.emit(this.value);\n };\n\n @Method()\n async getWidth(): Promise<number> {\n const element = this.host.shadowRoot?.querySelector('.segmented-option');\n return element?.getBoundingClientRect().width \|\| 0;\n }\n\n private optionClass = tv(\n {\n base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n variants: {\n size: {\n small: 'py-[1px] px-3 text-size-4',\n medium: 'py-[3px] px-3 text-size-5',\n large: 'py-[6px] px-3 text-size-6',\n },\n selected: {\n true: 'text-[--bcm-ui-color-text-header]',\n false: 'text-[--bcm-ui-color-text-helper]',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n selected: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const size = this.size \|\| this.getSizeFromParent();\n const disabled = this.isDisabled();\n\n return (\n <Host>\n <button\n class={this.optionClass({\n size,\n selected: this.selected,\n disabled,\n })}\n onClick={this.handleClick}\n disabled={disabled}\n type=\"button\"\n >\n <slot>{this.label}</slot>\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"segmented-picker-option.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker-option.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n tag: 'bcm-segmented-picker-option',\n styleUrl: 'segmented-picker-option.css',\n shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n @Element() host: HTMLElement;\n\n /** Option value /\n @Prop()\n value!: string;\n\n /* Option display label /\n @Prop()\n label?: string;\n\n /* Controls the option size /\n @Prop()\n size?: SegmentedPickerSize;\n\n /* Whether this option is selected /\n @Prop({ mutable: true })\n selected = false;\n\n /* Whether this option is disabled /\n @Prop()\n disabled = false;\n\n /* Click event */\n @Event({\n composed: false,\n bubbles: true,\n cancelable: true,\n })\n bcmOptionClick: EventEmitter<string>;\n\n private parentValueObserver: MutationObserver;\n private parentRef: HTMLElement \| null = null;\n\n componentWillLoad() {\n // Parent referansını al\n this.parentRef = this.host.closest('bcm-segmented-picker') as any;\n\n // İlk yüklemede selected durumu\n if (this.parentRef) {\n this.selected = this.parentRef.getAttribute('value') === this.value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n // Burada artık prop değişikliği yok\n this.setupValueObserver();\n }\n\n disconnectedCallback() {\n if (this.parentValueObserver) {\n this.parentValueObserver.disconnect();\n }\n }\n\n private setupValueObserver() {\n if (this.parentRef) {\n this.parentValueObserver = new MutationObserver(() => {\n this.selected = this.isValueSelected();\n });\n this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n }\n }\n\n private isValueSelected(): boolean {\n return this.parentRef?.getAttribute('value') === this.value;\n }\n\n private getSizeFromParent(): SegmentedPickerSize {\n return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) \|\| 'medium';\n }\n\n private isDisabled(): boolean {\n return this.disabled \|\| this.parentRef?.hasAttribute('disabled') \|\| false;\n }\n\n private handleClick = () => {\n if (this.isDisabled()) return;\n this.bcmOptionClick.emit(this.value);\n };\n\n @Method()\n async getWidth(): Promise<number> {\n const element = this.host.shadowRoot?.querySelector('.segmented-option');\n return element?.getBoundingClientRect().width \|\| 0;\n }\n\n private optionClass = tv(\n {\n base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n variants: {\n size: {\n small: 'py-[1px] px-3 text-size-4',\n medium: 'py-[3px] px-3 text-size-5',\n large: 'py-[6px] px-3 text-size-6',\n },\n selected: {\n true: 'text-[--bcm-ui-color-text-header]',\n false: 'text-[--bcm-ui-color-text-helper]',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n selected: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const size = this.size \|\| this.getSizeFromParent();\n const disabled = this.isDisabled();\n\n return (\n <Host>\n <button\n class={this.optionClass({\n size,\n selected: this.selected,\n disabled,\n })}\n onClick={this.handleClick}\n disabled={disabled}\n type=\"button\"\n >\n <slot>{this.label}</slot>\n </button>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/segmented-picker/segmented-picker.component.js CHANGED Viewed

@@ -118,11 +118,11 @@ export class BcmSegmentedPicker {
         }, 10);
     }
     render() {
-        return (h(Host, { key: 'd0cbc159bc9bbc04dd3529d49013c70fedd51900' }, h("div", { key: '482aaafb09980d4e898da826be0d551335fbf074', class: this.segmentedClass({
+        return (h(Host, { key: '919210881f989a740779027be91449c84e73905a' }, h("div", { key: '62831904cc3044cf4cb18a5ae887a59326efd9ad', class: this.segmentedClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
-            }) }, h("div", { key: '32ae6dd4e49a4bb8d054b0c6ed0438a8a5fd88d4', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '5d4cbf382a1f7796c54a78c707579a1b517d4afe', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '0dd209dd41f1da85bbe40542f7b3f725e2856094' })))));
+            }) }, h("div", { key: '65e01922e281a7f19379e094fc804c152fa35aa7', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: 'c31e6df3de16c64bff1439b580b709d21510ab1c', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: 'c26e63804c35e773e59b3da53a2e60dffa96c850' })))));
     }
     static get is() { return "bcm-segmented-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -140,7 +140,6 @@ export class BcmSegmentedPicker {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SegmentedPickerSize",
@@ -162,11 +161,11 @@ export class BcmSegmentedPicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -181,11 +180,11 @@ export class BcmSegmentedPicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -201,11 +200,11 @@ export class BcmSegmentedPicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "fullWidth": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -221,6 +220,7 @@ export class BcmSegmentedPicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "full-width",
                 "defaultValue": "false"
             }
         };