bromcom-ui 2.7.37-rc.9 → 2.7.38-rc.0

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,7 @@ 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();
     this.hidden = false;
@@ -38,18 +38,25 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.size = Bcm.Size.medium;
     this.disabled = false;
     this.kind = Bcm.Kind.solid;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.value = undefined;
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
-    this.multiLevel = false;
+    this.linkedComponent = undefined;
     this.loading = false;
+    this.variant = undefined;
     this.dataDismiss = false;
     this.fullWidth = false;
     this.iconPosition = Bcm.IconPosition.prefix;
-    this.height = 'auto';
+    this.placement = undefined;
+    this.height = undefined;
     this.maxHeight = '500px';
     this.minHeight = '50px';
     this.stopDeepClean = false;
     this.selectable = true;
+    this.color = undefined;
     this.data = [];
   }
   async dataChanged(newValue) {
@@ -57,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,
@@ -214,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", {
@@ -241,28 +116,24 @@ 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);
-__decorate([
-  JsonParse('data')
-], BcmDropdown$1.prototype, "data", void 0);
 __decorate([
   JsonParse('data', true)
 ], BcmDropdown$1.prototype, "dataChanged", null);
@@ -270,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)) {
@@ -287,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();
       }

package/dist/components/bcm-expansion-panel.js

@@ -38,6 +38,7 @@ const BcmExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.hideToggle = false;
     this.expandIconPosition = 'right';
     this.headerColor = 'white';
+    this.tooltip = undefined;
     this.tooltipDefaultValue = {
       message: '',
       placement: 'top',

package/dist/components/bcm-form-2.js

@@ -44,11 +44,11 @@ const BcmForm2$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.bcmForm = createEvent(this, "bcm-form", 7);
-    this._id = Generate.UID();
-    this.validation = false;
     this.isLoad = false;
     this.formData = {};
     this.formObj = new Map();
+    this._id = Generate.UID();
+    this.validation = false;
   }
   componentDidLoad() {
     this.isLoad = true;

package/dist/components/bcm-form-group.js

@@ -26,6 +26,7 @@ const BcmFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.hidden = false;
     this.validation = false;
     this.name = "";
+    this.value = undefined;
   }
   inputChange() {
     //   console.log("diğişti")

package/dist/components/bcm-form.js

@@ -113,6 +113,7 @@ const BcmForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hidden = false;
     this.validation = false;
     this.name = "";
+    this.value = undefined;
     this.autocomplete = false;
   }
   handleSubmit() {

package/dist/components/bcm-input.js

@@ -38,32 +38,49 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.clear = createEvent(this, "bcm-clear", 7);
     this.change = createEvent(this, "bcm-change", 7);
     this.input = createEvent(this, "bcm-input", 7);
-    /** Props **/
+    this.isBlur = false;
     this._id = Generate.UID();
     this._internal_id = Generate.UID();
     this.value = '';
     this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.pattern = undefined;
+    this.tooltip = undefined;
+    this.placeholder = undefined;
     this.disabled = false;
     this.readonly = false;
     this.clearable = false;
     this.autocomplete = false;
+    this.name = undefined;
     this.type = Bcm.InputType.text;
     this.hidden = false;
     this.required = false;
     this.fullWidth = false;
-    this.disableWatchValue = false; // datetimepicker
-    this.passwordToggle = false; // type password
+    this.noDefaultIcon = undefined;
+    this.disableWatchValue = false // datetimepicker
+    ;
+    this.passwordToggle = false // type password
+    ;
     this.maxLength = null;
     this.unitPrefix = null;
+    this.unit = undefined;
     this.decimal = true;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
-    /** initial States **/
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
     this.inValid = false;
     this.valueCache = '';
     this.focused = false;
     this.isPasswordVisible = false;
-    this.isBlur = false;
   }
   connectedCallback() {
     this.valueCache = this.value;

package/dist/components/bcm-item.js

@@ -27,6 +27,7 @@ const BcmItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this._id = Generate.UID();
     this.size = Bcm.Size.medium;
+    this.color = undefined;
     this.static = false;
   }
   setColor(color = this.color) {

package/dist/components/bcm-linked.js

@@ -2,198 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as Bcm } from './bcm.js';
-import './element-dragger.js';
-import './string-helper.js';
-import { d as delay } from './utils.js';
-import { F as FloatingUI } from './floating-ui.js';
-import './color-helper.js';
-import './validators.js';
-import { G as Generate } from './generate.js';
-import './number-helper.js';
-import { I as IsLoad } from './is-load-decorator.js';
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmLinked$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this._id = Generate.UID();
-    this.placement = Bcm.Placement['bottom-start'];
-    this.trigger = Bcm.TriggerType.click;
-    this.targetId = '';
-    this.minHeight = '50px';
-    this.isOpen = false;
-  }
-  target() {
-    const target = document.querySelectorAll(`[id="${this.targetId}"]`);
-    if (target.length > 0) {
-      target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
-      return target[0];
-    }
-    else {
-      // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
-      this.el.remove();
-      return null;
-    }
-  }
-  dismissEvent() {
-    document.dispatchEvent(new CustomEvent('linked-data-dismiss', { detail: { id: this._id } }));
-  }
-  checkDataDismiss(e) {
-    Generate.findEventPathHasAttribute(e, 'data-dismiss') && this.dismissEvent();
-  }
-  hideChildLinked() {
-    this.el.querySelectorAll('[is-linked][linked-is-open]').forEach(item => {
-      var _a;
-      (_a = document.querySelector(`#${item.getAttribute('is-linked')}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
-    });
-  }
-  calculatePosition() {
-    const el = this.el;
-    if (el && this.target()) {
-      if (this.isOpen) {
-        FloatingUI({
-          ref: this.target(),
-          floating: el,
-          placement: this.placement,
-          offset: 4,
-          autoHidden: el.getAttribute('main-linked') === 'true' ? false : true,
-          autoSize: true,
-          style: {
-            height: this.height,
-            maxHeight: this.maxHeight,
-            minHeight: this.minHeight,
-          },
-        });
-      }
-      else {
-        el.style.visibility = 'hidden';
-        el.style.opacity = '0';
-      }
-    }
-  }
-  init() {
-    const target = this.target();
-    if (target) {
-      target.setAttribute('is-linked', this.el.id);
-      if (!Generate.getAncestor(target, 'bcm-linked')) {
-        this.el.setAttribute('main-linked', 'true');
-      }
-      else {
-        this.el.removeAttribute('main-linked');
-      }
-    }
-  }
-  componentDidLoad() {
-    this.init();
-    document.body.appendChild(this.el);
-  }
-  onLinkedDataDismis() {
-    this.hide(false);
-  }
-  onBcmFloatingIsHide(e) {
-    if (e.detail.id === this._id) {
-      this.hide(false);
-    }
-  }
-  async show(wait = true) {
-    wait && (await delay(50));
-    const target = this.target();
-    if (target) {
-      document.body.appendChild(this.el);
-      target.setAttribute('linked-is-open', 'true');
-      this.isOpen = true;
-      this.calculatePosition();
-    }
-    else {
-      this.hide(false);
-    }
-    return this.isOpen;
-  }
-  async hide(wait = true) {
-    wait && (await delay(50));
-    const target = this.target();
-    if (target) {
-      target.removeAttribute('linked-is-open');
-      this.hideChildLinked();
-      this.isOpen = false;
-    }
-    return this.isOpen;
-  }
-  async toggle(wait = true) {
-    return this.isOpen ? await this.hide(wait) : await this.show(wait);
-  }
-  clickListener(e) {
-    if (!this.target())
-      return;
-    const isTarget = Generate.findEventPath(e, this.target());
-    if (this.isOpen) {
-      isTarget && this.hide(false);
-      const isSelf = Generate.findEventPath(e, this.el);
-      const isLinked = Generate.findEventPathWithNodeName(e, 'BCM-LINKED');
-      isSelf && this.checkDataDismiss(e);
-      if (this.el.getAttribute('main-linked') === 'true' && !isTarget && !isSelf && !isLinked) {
-        this.dismissEvent();
-      }
-    }
-    else {
-      isTarget && this.show(false);
-    }
-  }
-  resizeListener() {
-    this.calculatePosition();
-  }
-  scrollListener() {
-    this.calculatePosition();
-  }
-  wheelListener() {
-    this.calculatePosition();
-  }
-  render() {
-    const openStyle = this.isOpen ? { visibility: 'visible', opacity: '1' } : { visibility: 'hidden', opacity: '0' };
-    return (h(Host, { class: "tw-block tw-opacity-0 tw-invisible tw-top-0 tw-left-0  tw-rounded tw-bg-white  tw-z-tooltip tw-transition-opacity tw-duration-100  tw-shadow tw-overscroll-contain tw-scroll-smooth tw-absolute", style: Object.assign(Object.assign({}, openStyle), { overflow: 'auto' }) }, h("slot", null)));
-  }
-  get el() { return this; }
-}, [4, "bcm-linked", {
-    "_id": [513, "id"],
-    "placement": [1],
-    "trigger": [1],
-    "targetId": [1, "target-id"],
-    "height": [1],
-    "maxHeight": [1, "max-height"],
-    "minHeight": [1, "min-height"],
-    "isOpen": [1540, "is-open"],
-    "show": [64],
-    "hide": [64],
-    "toggle": [64]
-  }, [[4, "linked-data-dismiss", "onLinkedDataDismis"], [4, "bcm-floating-is-hide", "onBcmFloatingIsHide"], [8, "click", "clickListener"], [9, "resize", "resizeListener"], [9, "scroll", "scrollListener"], [9, "wheel", "wheelListener"]]]);
-__decorate([
-  IsLoad()
-], BcmLinked$1.prototype, "el", void 0);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["bcm-linked"];
-  components.forEach(tagName => { switch (tagName) {
-    case "bcm-linked":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BcmLinked$1);
-      }
-      break;
-  } });
-}
+import { B as BcmLinked$1, d as defineCustomElement$1 } from './linked.js';
 
 const BcmLinked = BcmLinked$1;
 const defineCustomElement = defineCustomElement$1;