bromcom-ui 2.7.37 → 2.7.38-rc.1

package/dist/collection/components/molecules/menu/menu.js

@@ -13,15 +13,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { forceUpdate, h, Host } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
 import cs from 'classnames';
-import { getPlacement, setPosition } from '../../../utils/popover-placement';
-import { delay } from '../../../utils/utils';
-// import Bcm from '../../../models/bcm';
-import { NumberHelper } from '../../../helper/number-helper';
-import { Tooltip } from '@bcm/helpers';
-import { FloatingUI } from '@bcm/utils';
+import { Generate, Tooltip } from '@bcm/helpers';
+import { IsLoad } from '@bcm/decorator';
 export class BcmMenu {
   constructor() {
     this._id = Generate.UID();
@@ -36,100 +30,12 @@ export class BcmMenu {
     this.maxHeight = '500px';
     this.minHeight = '150px';
     this.selectable = true;
-    this.open = false;
     this.placement = 'bottom-start';
     this.activeItemId = undefined;
     this.data = [];
   }
-  componentWillRender() {
-    this.calculateLocation();
-  }
-  componentDidRender() {
-    this.calculateLocation();
-  }
-  componentWillLoad() {
-    // this.data = this.data.map(item => ({ ...item, id: item.id ?? Generate.UID() }));
-    this.open = !this.linkedComponent;
-  }
-  async componentDidLoad() {
-    if (this.linkedComponent) {
-      document.body.appendChild(this.el);
-    }
-  }
-  async calculateLocation() {
-    if (this.linkedComponent) {
-      const menu = this.el;
-      if (menu) {
-        if (this.open) {
-          let placement = this.placement;
-          const targetElementId = this.linkedComponent ? this.linkedComponent : this._id;
-          const targetElement = document.getElementById(targetElementId);
-          const menuId = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('menu-id');
-          if (menu && targetElement && (menuId ? menuId == this._id : true)) {
-            FloatingUI({
-              ref: targetElement,
-              floating: menu,
-              placement: this.placement,
-              offset: 2,
-              arrow: false,
-              arrowColor: ``,
-            });
-            getPlacement(menu, targetElement, placement, (place) => (placement = place));
-            await delay(10);
-            let pos = setPosition(placement, targetElement);
-            if (this.height.indexOf('%') > -1) {
-              menu.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
-            }
-            else {
-              menu.style.height = this.height;
-            }
-            menu.style.minHeight = this.minHeight;
-            // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
-            const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
-            if (this.maxHeight.indexOf('%') > -1) {
-              menu.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
-            }
-            else {
-              menu.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
-            }
-            menu.style.overflowY = 'auto';
-            getPlacement(menu, targetElement, placement, (place) => (placement = place));
-            await delay(10);
-            pos = setPosition(placement, targetElement);
-            // menu.style.top = (placement.split('-')[0] == 'top' ? pos[0] - menu.offsetHeight : pos[0]) + 'px';
-            // // menu.style.left = pos[1] + 'px';
-            // menu.style.left = (placement.split('-')[1] == 'end' ? pos[1] - menu.offsetWidth : pos[1]) + 'px';
-            menu.classList.toggle('bcm-menu--top', placement.split('-')[0] == 'top');
-            menu.style.minWidth = targetElement.offsetWidth + 'px';
-          }
-        }
-        else {
-          menu.style.top = '-9999px';
-          menu.style.left = '-9999px';
-        }
-      }
-    }
-  }
-  handleWheel(event) {
-    if (this.open && this.linkedComponent) {
-      if (Generate.findEventPath(event, this.el)) {
-        this.calculateLocation();
-      }
-      else {
-        this.hide();
-      }
-    }
-  }
-  watchOpen() {
-    this.bcmOpen.emit(this.open);
-  }
-  async show() {
-    this.open = true;
-  }
-  async hide() {
-    this.open = false;
-  }
   async setActive(param) {
+    this.activeItemId = null;
     const recursive = (data) => {
       data.forEach(item => {
         if (item.id == param) {
@@ -150,18 +56,6 @@ export class BcmMenu {
   handleSlotItems({ detail }) {
     this.data = detail;
   }
-  handleOnClick(event) {
-    if (this.disabled || !this.linkedComponent)
-      return;
-    const linkedId = document.getElementById(this.linkedComponent);
-    const isClickTarget = linkedId && Generate.findEventPath(event, linkedId);
-    if (isClickTarget) {
-      this.open = !this.open;
-    }
-    else {
-      !Generate.findEventPath(event, this.el) && this.hide();
-    }
-  }
   handleClickItem(item) {
     if (item.items && item.items.length > 0) {
       item.isOpen = !item.isOpen;
@@ -169,9 +63,7 @@ export class BcmMenu {
     }
     else {
       this.activeItemId = item.id;
-      if (this.linkedComponent && this.open) {
-        this.hide();
-      }
+      document.dispatchEvent(new CustomEvent('linked-data-dismiss', { detail: { id: this._id } }));
     }
     // this.data = this.data.map(menuItem => ({ ...menuItem, active: menuItem.id === item.id }));
     this.bcmClick.emit(item);
@@ -180,11 +72,9 @@ export class BcmMenu {
     return new Tooltip({ message: text, targetId: 'bcm-menu__item-' + this._id + '-' + id, placement: 'right' });
   }
   render() {
-    const { data, collapsible, collapse, open } = this;
+    const { data, collapsible, collapse } = this;
     const hostClasses = cs('bcm-menu', `bcm-menu__size-${this.size}`, {
-      'bcm-menu__collapse': collapse,
-      'bcm-menu__open': open,
-      'bcm-menu--linked': !!this.linkedComponent,
+      'bcm-menu__collapse': collapse
     });
     const MenuLinkTemplate = (item, index) => {
       if (!item.text)
@@ -452,7 +342,7 @@ export class BcmMenu {
           "references": {
             "PlacementTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -488,7 +378,6 @@ export class BcmMenu {
   }
   static get states() {
     return {
-      "open": {},
       "activeItemId": {}
     };
   }
@@ -508,21 +397,6 @@ export class BcmMenu {
           "resolved": "any",
           "references": {}
         }
-      }, {
-        "method": "bcmOpen",
-        "name": "bcm-open",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
       }, {
         "method": "bcmExpanded",
         "name": "bcm-expanded",
@@ -542,38 +416,6 @@ export class BcmMenu {
   }
   static get methods() {
     return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
       "setActive": {
         "complexType": {
           "signature": "(param: any) => Promise<void>",
@@ -596,31 +438,13 @@ export class BcmMenu {
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "watchOpen"
-      }];
-  }
   static get listeners() {
     return [{
-        "name": "wheel",
-        "method": "handleWheel",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
         "name": "bcm-items",
         "method": "handleSlotItems",
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "click",
-        "method": "handleOnClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
       }];
   }
 }

package/dist/collection/utils/floating-ui.js

@@ -26,7 +26,8 @@ args) => {
   }
   style &&
     Object.assign(floating.style, Object.assign(Object.assign({}, (style.height && { height: style.height })), (style.minHeight && { minHeight: style.minHeight })));
-  if (autoSize && !(style === null || style === void 0 ? void 0 : style.height)) {
+  const heightCheck = ['auto', '100%', '100vh', '100vw', 'inherit', 'initial', 'unset', undefined].some(item => item == (style === null || style === void 0 ? void 0 : style.height));
+  if (autoSize && heightCheck) {
     _middleware.push(size({
       apply({ availableHeight }) {
         const maxHeight = `${availableHeight > window.innerHeight ? window.innerHeight - 10 : availableHeight}px`;

package/dist/components/bcm-dropdown.js

@@ -10,8 +10,8 @@ import { G as Generate } from './generate.js';
 import { B as Bcm } from './bcm.js';
 import { d as defineCustomElement$5 } from './button.js';
 import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './menu.js';
-import { d as defineCustomElement$2 } from './old-popover-box.js';
+import { d as defineCustomElement$3 } from './linked.js';
+import { d as defineCustomElement$2 } from './menu.js';
 
 const dropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-dropdown{width:fit-content;display:inline-flex;flex-direction:row}.bcm-dropdown.hidden{display:none}.bcm-dropdown.no-style{cursor:pointer}.bcm-dropdown.full-width{width:100%}.bcm-dropdown.full-width .bcm-button__container-text{flex:1;justify-content:space-between}.bcm-dropdown__type-split .main-button .bcm-button__container{border-top-right-radius:0;border-bottom-right-radius:0}.bcm-dropdown__type-split .split-button .bcm-button__container{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:1px;min-width:auto}.bcm-dropdown__icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;transform:rotate(0deg);transition:transform 0.2s ease}.bcm-dropdown__icon--open{transform:rotate(180deg)}";
 
@@ -30,7 +30,6 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.bcmClick = createEvent(this, "bcm-click", 7);
-    this.dropdownLinkedComponent = createEvent(this, "dropdown-linked-component", 7);
     this.isOpen = undefined;
     this._id = Generate.UID();
     this.menuId = Generate.UID();
@@ -46,14 +45,13 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
     this.linkedComponent = undefined;
-    this.multiLevel = false;
     this.loading = false;
     this.variant = undefined;
     this.dataDismiss = false;
     this.fullWidth = false;
     this.iconPosition = Bcm.IconPosition.prefix;
     this.placement = undefined;
-    this.height = 'auto';
+    this.height = undefined;
     this.maxHeight = '500px';
     this.minHeight = '50px';
     this.stopDeepClean = false;
@@ -66,156 +64,25 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.data = newValue;
     }
   }
-  async isOpenChanged(newValue) {
-    if (document.querySelector(`old-bcm-popover-box[id="dropdown-box-${this._id}"]`)) {
-      const box = this.getPopoverBox();
-      newValue ? box.show() : box.hide();
-    }
-    // const disableScrollClass = `bcm-dropdown--disable-scroll-${this._id}`;
-    // if (this.isOpen) {
-    //   document.body.classList.add(disableScrollClass);
-    // } else {
-    //   document.body.classList.remove(disableScrollClass);
-    // }
-  }
-  handleIsClickDismiss({ detail }) {
-    if (this.multiLevel) {
-      this.isOpen = detail;
-    }
-  }
-  handleOnClick(event) {
-    if (this.linkedComponent)
-      return this.linkedComponentClick(event);
-    if (this.isOpen) {
-      const targetElement = this.linkedComponent ? document.getElementById(this.linkedComponent) : this.el;
-      const box = this.getPopoverBox();
-      if (box) {
-        const isClickBox = Generate.findEventPath(event, box);
-        const isClickThis = Generate.findEventPath(event, targetElement);
-        if (!isClickBox && !isClickThis) {
-          this.isOpen = false;
-          return;
-        }
-        const isClickDismiss = Generate.findEventPathHasAttribute(event, 'data-dismiss');
-        if (isClickDismiss) {
-          this.isOpen = false;
-          return;
-        }
-      }
-    }
-  }
-  handleWheel(event) {
-    if (this.isOpen) {
-      const box = this.getPopoverBox();
-      if (box) {
-        const isClickBox = Generate.findEventPath(event, box);
-        const isClickThis = Generate.findEventPath(event, this.el);
-        if (!isClickBox && !isClickThis) {
-          this.isOpen = false;
-          return;
-        }
-      }
-    }
-  }
-  async setActive(id) {
-    if (id) {
-      const menu = document.getElementById(`${this.menuId}`);
-      if (menu) {
-        menu.setActive(id);
-      }
-    }
+  async setActive(id = null) {
+    var _a, _b;
+    (_b = (_a = document
+      .getElementById(`${this.menuId}`)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('bcm-menu')) === null || _b === void 0 ? void 0 : _b.forEach(item => {
+      item.setActive(id);
+    });
   }
   handleSlotItems({ detail }) {
     this.data = detail;
   }
-  // connectedCallback() {
-  //   const disableScrollClass = `bcm-dropdown--disable-scroll-${this._id}`;
-  //   const styleId = `bcm-dropdown-style-${this._id}`;
-  //   let style = document.getElementById(styleId);
-  //   if (!style) {
-  //     style = document.createElement('style');
-  //     style.id = styleId;
-  //     style.innerHTML = `.${disableScrollClass} { overflow: hidden; }`;
-  //     document.head.appendChild(style);
-  //   }
-  // }
   componentDidLoad() {
-    let box = document.querySelector(`old-bcm-popover-box[id="dropdown-box-${this._id}"]`);
-    if (box) {
-      box.remove();
-    }
+    var _a;
     const bcmContent = this.el.querySelector('bcm-content');
     if (bcmContent) {
-      bcmContent.style.display = 'none';
-      this.createBox();
-      this.isOpen = this.isOpen;
+      (_a = document.getElementById(this.menuId)) === null || _a === void 0 ? void 0 : _a.appendChild(bcmContent);
     }
   }
-  disconnectedCallback() {
-    this.isOpen = false;
-    if (this.stopDeepClean)
-      return;
-    const box = this.getPopoverBox();
-    if (box) {
-      box.remove();
-    }
-    // const disableScrollClass = `bcm-dropdown--disable-scroll-${this._id}`;
-    // document.body.classList.remove(disableScrollClass);
-  }
-  createBox() {
-    const content = this.el.querySelector('bcm-content');
-    if (content) {
-      const targetElementId = this.linkedComponent ? this.linkedComponent : this._id;
-      let box = document.getElementById(`dropdown-box-${this._id}`);
-      if (!box) {
-        box = document.createElement('old-bcm-popover-box');
-        box.setAttribute('id', 'dropdown-box-' + this._id);
-        box.setAttribute('target-id', targetElementId);
-        box.setAttribute('placement', this.placement || 'bottom-start');
-        box.setAttribute('linked-component', targetElementId);
-        box.setAttribute('min-height', this.minHeight);
-        box.setAttribute('max-height', this.maxHeight);
-        box.setAttribute('height', this.height);
-        content.style.display = 'block';
-        content.removeAttribute('hidden');
-        box.appendChild(content);
-        document.body.appendChild(box);
-      }
-    }
-  }
-  linkedComponentClick(event) {
-    const targetElement = document.getElementById(this.linkedComponent);
-    const box = document.querySelector(`bcm-popover-box[id="dropdown-box-${this._id}"]`);
-    const isClickBox = Generate.findEventPath(event, box);
-    const isClickThis = Generate.findEventPath(event, targetElement);
-    if (!isClickBox && !isClickThis) {
-      this.isOpen = false;
-      return;
-    }
-    if (isClickBox || isClickThis) {
-      this.createBox();
-      this.isOpen = true;
-      this.dropdownLinkedComponent.emit(true);
-    }
-    const isClickDismiss = Generate.findEventPathHasAttribute(event, 'data-dismiss');
-    if (isClickDismiss) {
-      this.isOpen = false;
-      this.dropdownLinkedComponent.emit(false);
-      return;
-    }
-  }
-  checkClick() {
-    if (this.getPopoverBox()) {
-      this.isOpen = !this.isOpen;
-      this.isOpen ? this.getPopoverBox().show() : this.getPopoverBox().hide();
-    }
-  }
-  getPopoverBox() {
-    this.createBox();
-    return document.querySelector(`old-bcm-popover-box[id="dropdown-box-${this._id}"]`);
-  }
   render() {
-    const { size, kind, disabled, icon, color, href, target, loading, type, variant, fullWidth } = this;
+    const { size, kind, disabled, icon, color, href, target, loading, type, variant, fullWidth, isOpen } = this;
     const hostClasses = classnames('bcm-dropdown', 'bcm-dropdown__type-' + type, {
       'full-width': fullWidth,
       'no-style': this.noStyle,
@@ -223,15 +90,14 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color })), (this.menuId && { 'menu-id': this.menuId }));
     const iconClasses = classnames('bcm-dropdown__icon', {
-      'bcm-dropdown__icon--open': this.isOpen,
+      'bcm-dropdown__icon--open': isOpen,
     });
     const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
-    return (h(Host, { class: hostClasses, onClick: () => this.checkClick() }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), this.data && this.data.length > 0 && (h("bcm-menu", { id: `${this.menuId}`, "linked-component": `${this._id}-button${type === 'split' ? '-split' : ''}`, data: this.data, "on-bcm-open": e => (this.isOpen = e.detail), "on-bcm-click": e => this.bcmClick.emit(e.detail), placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, selectable: this.selectable }))));
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail) }))));
   }
   get el() { return this; }
   static get watchers() { return {
-    "data": ["dataChanged"],
-    "isOpen": ["isOpenChanged"]
+    "data": ["dataChanged"]
   }; }
   static get style() { return dropdownCss; }
 }, [4, "bcm-dropdown", {
@@ -250,22 +116,21 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "noStyle": [1028, "no-style"],
     "dropdownIcon": [1025, "dropdown-icon"],
     "linkedComponent": [1025, "linked-component"],
-    "multiLevel": [1028, "multi-level"],
-    "loading": [1028],
-    "variant": [1025],
-    "dataDismiss": [1028, "data-dismiss"],
-    "fullWidth": [1028, "full-width"],
-    "iconPosition": [1025, "icon-position"],
-    "placement": [1025],
-    "height": [1025],
-    "maxHeight": [1025, "max-height"],
-    "minHeight": [1025, "min-height"],
+    "loading": [4],
+    "variant": [1],
+    "dataDismiss": [4, "data-dismiss"],
+    "fullWidth": [4, "full-width"],
+    "iconPosition": [1, "icon-position"],
+    "placement": [1],
+    "height": [8],
+    "maxHeight": [1, "max-height"],
+    "minHeight": [1, "min-height"],
     "stopDeepClean": [4, "stop-deep-clean"],
     "selectable": [4],
-    "color": [1032],
+    "color": [8],
     "data": [1032],
     "setActive": [64]
-  }, [[8, "dropdown-linked-component", "handleIsClickDismiss"], [8, "click", "handleOnClick"], [4, "wheel", "handleWheel"], [0, "bcm-items", "handleSlotItems"]]]);
+  }, [[0, "bcm-items", "handleSlotItems"]]]);
 __decorate([
   IsLoad()
 ], BcmDropdown$1.prototype, "el", void 0);
@@ -276,7 +141,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-dropdown", "bcm-button", "bcm-icon", "bcm-menu", "old-bcm-popover-box"];
+  const components = ["bcm-dropdown", "bcm-button", "bcm-icon", "bcm-linked", "bcm-menu"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-dropdown":
       if (!customElements.get(tagName)) {
@@ -293,12 +158,12 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "bcm-menu":
+    case "bcm-linked":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "old-bcm-popover-box":
+    case "bcm-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }