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

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

@@ -4,21 +4,18 @@
  */
 var __decorate = (this && this.__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;
+  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;
 };
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
+import { forceUpdate, h, Host } from '@stencil/core';
 import cs from 'classnames';
-import { JsonParse } from '../../../decorators/json-parse-decarator';
-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();
@@ -28,103 +25,17 @@ export class BcmMenu {
     this.mode = 'inline';
     this.disabled = false;
     this.hidden = false;
+    this.linkedComponent = undefined;
     this.height = 'auto';
     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) {
@@ -145,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;
@@ -164,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);
@@ -175,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)
@@ -189,435 +84,370 @@ export class BcmMenu {
       const subItems = !!(item.items && item.items.length);
       return (h("a", { id: 'bcm-menu__item-' + this._id + '-' + item.id, onMouseEnter: () => this.collapse && this.getTooltip(item.id, item.text).show(), onMouseLeave: () => this.collapse && this.getTooltip(item.id, item.text).hide(), key: index, href: !item.disabled ? item.link || 'javascript:void(0)' : 'javascript:void(0)', tabindex: item.disabled ? '-1' : '0', class: cs('bcm-menu__item', {
           'bcm-menu__item--is-sub': subItems && item.isOpen,
-        }) },
-        h("span", { class: cs('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
-            'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
-            'bcm-menu__item-link--disabled': item.disabled,
-          }), onClick: () => {
-            !this.disabled && !item.disabled && this.handleClickItem(item);
-          } },
-          item.icon && (h("span", { class: "bcm-menu__item-link-icon" },
-            h("i", { class: item.icon || 'far fa-angle-left' }))),
-          h("span", { class: cs('bcm-menu__item-link-text', {
-              'bcm-menu__item-link-text--collapse': collapse,
-            }), innerHTML: item.text }),
-          subItems && (h("div", { class: cs('bcm-menu__item-link-toggle', {
-              'bcm-menu__item-link-toggle--collapse': item.isOpen,
-            }) },
-            h("i", { class: "fas fa-chevron-down" })))),
-        subItems && (h("div", { class: cs('bcm-menu__item-submenu', {
-            'bcm-menu__item-submenu--collapse': collapse,
-            'bcm-menu__item-submenu--open': item.isOpen,
-          }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
+        }) }, h("span", { class: cs('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
+          'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
+          'bcm-menu__item-link--disabled': item.disabled,
+        }), onClick: () => {
+          !this.disabled && !item.disabled && this.handleClickItem(item);
+        } }, item.icon && (h("span", { class: "bcm-menu__item-link-icon" }, h("i", { class: item.icon || 'far fa-angle-left' }))), h("span", { class: cs('bcm-menu__item-link-text', {
+          'bcm-menu__item-link-text--collapse': collapse,
+        }), innerHTML: item.text }), subItems && (h("div", { class: cs('bcm-menu__item-link-toggle', {
+          'bcm-menu__item-link-toggle--collapse': item.isOpen,
+        }) }, h("i", { class: "fas fa-chevron-down" })))), subItems && (h("div", { class: cs('bcm-menu__item-submenu', {
+          'bcm-menu__item-submenu--collapse': collapse,
+          'bcm-menu__item-submenu--open': item.isOpen,
+        }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
     };
-    return (h(Host, { class: hostClasses, tabindex: "-1", disabled: this.disabled },
-      h("div", { class: "bcm-menu__container" },
-        h("slot", null),
-        (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)),
-        collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
-            'bcm-menu__collapse-button--collapsed': collapse,
-          }), onClick: () => {
-            this.collapse = !collapse;
-            collapsible && this.bcmExpanded.emit(collapse);
-          } },
-          h("i", { class: "far fa-angle-left" }))))));
+    return (h(Host, { class: hostClasses, tabindex: "-1", disabled: this.disabled }, h("div", { class: "bcm-menu__container" }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
+        'bcm-menu__collapse-button--collapsed': collapse,
+      }), onClick: () => {
+        this.collapse = !collapse;
+        collapsible && this.bcmExpanded.emit(collapse);
+      } }, h("i", { class: "far fa-angle-left" }))))));
   }
   static get is() { return "bcm-menu"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu.css"]
-  }; }
-  static get properties() { return {
-    "_id": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "id",
-      "reflect": true,
-      "defaultValue": "Generate.UID()"
-    },
-    "size": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "collapsible": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "collapsible",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "collapse": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "collapse",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'horizontal' | 'vertical' | 'inline'",
-        "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'inline'"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "linkedComponent": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "linked-component",
-      "reflect": false
-    },
-    "height": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    },
-    "maxHeight": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false,
-      "defaultValue": "'500px'"
-    },
-    "minHeight": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min-height",
-      "reflect": false,
-      "defaultValue": "'150px'"
-    },
-    "selectable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selectable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "PlacementTypes",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "PlacementTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom-start'"
-    },
-    "data": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data",
-      "reflect": false,
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "open": {},
-    "activeItemId": {}
-  }; }
-  static get events() { return [{
-      "method": "bcmClick",
-      "name": "bcm-click",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "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",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+  static get originalStyleUrls() {
+    return {
+      "$": ["menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "collapsible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "collapsible",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "collapse": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "collapse",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'horizontal' | 'vertical' | 'inline'",
+          "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "linkedComponent": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "linked-component",
+        "reflect": false
+      },
+      "height": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "maxHeight": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-height",
+        "reflect": false,
+        "defaultValue": "'500px'"
+      },
+      "minHeight": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-height",
+        "reflect": false,
+        "defaultValue": "'150px'"
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "PlacementTypes",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "PlacementTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
+      },
+      "data": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false,
+        "defaultValue": "[]"
       }
-    },
-    "setActive": {
-      "complexType": {
-        "signature": "(param: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "activeItemId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmClick",
+        "name": "bcm-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmExpanded",
+        "name": "bcm-expanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setActive": {
+        "complexType": {
+          "signature": "(param: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   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
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "bcm-items",
+        "method": "handleSlotItems",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 __decorate([
   IsLoad()
 ], BcmMenu.prototype, "el", void 0);
-__decorate([
-  JsonParse('data')
-], BcmMenu.prototype, "data", void 0);