bromcom-ui-next 0.1.4 → 0.1.6

package/dist/esm/bcm-tooltip.entry.js

@@ -0,0 +1,183 @@
+import { r as registerInstance, h, g as getElement } from './index-8571fbf7.js';
+import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm-480e0f15.js';
+import { c as ce } from './index-f3b17e60.js';
+
+const tooltipCss = ":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 BcmTooltipStyle0 = tooltipCss;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.
+         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+         * Default: 'hover'
+         */
+        this.trigger = 'hover';
+        /**
+         * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.
+         * Default: 'top'
+         */
+        this.placement = 'top';
+        /**
+         * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.
+         * Controls the text size and padding of the tooltip content.
+         * Default: 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.
+         * Helps prevent flickering on quick mouse movements.
+         * Default: 150
+         */
+        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 slot = this.el.shadowRoot.querySelector('slot');
+            const elements = slot.assignedElements();
+            this.targetElement = elements[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 = autoUpdate(this.targetElement, this.tooltipElement, () => this.updatePosition(), { animationFrame: false });
+                }
+            }
+        };
+        this.handleOutsideClick = (event) => {
+            if (!this.el.contains(event.target) && this.open) {
+                this.open = false;
+                this.updateOutsideClickListener();
+            }
+        };
+        this.updatePosition = async () => {
+            if (!this.targetElement || !this.tooltipElement || !this.arrowElement)
+                return;
+            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.tooltipElement, {
+                placement: this.placement,
+                middleware: [
+                    offset(12),
+                    flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),
+                    shift({ padding: 8 }),
+                    arrow({ element: this.arrowElement }),
+                ],
+            });
+            Object.assign(this.tooltipElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };
+            const basePlacement = placement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[basePlacement];
+            Object.assign(this.arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                [staticSide]: '-4px',
+            });
+        };
+        this.tooltipClass = ce({
+            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 _a;
+        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);
+        }
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = null;
+        clearTimeout(this.hoverTimeout);
+    }
+    updateOutsideClickListener() {
+        if (this.open) {
+            document.addEventListener('click', this.handleOutsideClick);
+        }
+        else {
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+    }
+    /**
+     * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.
+     * Triggers the showTooltip logic with the specified delay.
+     * @returns {Promise<void>} A promise that resolves when the tooltip is opened.
+     */
+    async openTooltip() {
+        this.showTooltip();
+    }
+    /**
+     * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.
+     * Triggers the hideTooltip logic with the specified delay.
+     * @returns {Promise<void>} A promise that resolves when the tooltip is closed.
+     */
+    async closeTooltip() {
+        this.hideTooltip();
+    }
+    render() {
+        const { tooltip, arrow } = this.tooltipClass({
+            size: this.size,
+            isOpen: this.open,
+        });
+        return (h("div", { key: 'ec1364939788f2b7f08b41701e531d4d0dfcb210', class: "relative" }, h("slot", { key: '6f306a622969246c95f0bcaa3090eec851a36482', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '4a84252e30beca5fa65044235759fa2a6b99740e', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: '5593a61678ec37c40f20bc51af7ee4c249ea0f0a', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: 'dd4a200eaa7ae61b12b19491355b303633eda445', name: "tooltip" }, this.message))));
+    }
+    get el() { return getElement(this); }
+};
+Tooltip.style = BcmTooltipStyle0;
+
+export { Tooltip as bcm_tooltip };
+
+//# sourceMappingURL=bcm-tooltip.entry.js.map

package/dist/esm/bcm-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"file":"bcm-tooltip.entry.js","mappings":"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","names":["tv"],"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"],"version":3}

package/dist/esm/bromcom-ui.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-27cc1bac.js';
-export { s as setNonce } from './index-27cc1bac.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-8571fbf7.js';
+export { s as setNonce } from './index-8571fbf7.js';
 import { g as globalScripts } from './app-globals-bfa07b76.js';
 
 /*
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-input",[[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],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[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"]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"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]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]]], options);
+  return bootstrapLazy([["bcm-dropdown",[[1,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-pop-confirm",[[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]}]]],["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-button-group",[[1,"bcm-button-group",{"kind":[1],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"loading":[4],"disabled":[4],"orientation":[513]}]]],["bcm-checkbox",[[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"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item",[[1,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input",[[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],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-popover",[[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]}]]],["bcm-radio",[[1,"bcm-radio",{"label":[1],"name":[1],"value":[1],"checked":[516],"size":[1],"disabled":[4],"readonly":[4],"labelPosition":[1,"label-position"],"error":[4]}]]],["bcm-radio-group",[[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"]}]]],["bcm-segmented-picker",[[1,"bcm-segmented-picker",{"size":[1],"value":[1537],"disabled":[4],"fullWidth":[516,"full-width"],"options":[32],"indicatorStyles":[32]},[[0,"bcmOptionClick","handleOptionClick"]],{"value":["valueChanged"]}]]],["bcm-segmented-picker-option",[[1,"bcm-segmented-picker-option",{"value":[1],"label":[1],"size":[1],"selected":[1028],"disabled":[4],"getWidth":[64]}]]],["bcm-switch",[[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]}]]],["bcm-tabs",[[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"]}]]],["bcm-tabs-content",[[1,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list",[[1,"bcm-tabs-list"]]],["bcm-tabs-trigger",[[1,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[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"]}]]],["bcm-tooltip",[[1,"bcm-tooltip",{"trigger":[1],"placement":[1],"size":[1],"message":[1],"showDelay":[2,"show-delay"],"open":[32],"openTooltip":[64],"closeTooltip":[64]}]]],["bcm-linked",[[1,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16],"isVisible":[32]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}],[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]}]]]], options);
 });
 
 //# sourceMappingURL=bromcom-ui.js.map