bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.2

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

@@ -0,0 +1,623 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+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;
+  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 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';
+export class BcmMenu {
+  constructor() {
+    this._id = Generate.UID();
+    this.size = 'medium';
+    this.collapsible = false;
+    this.collapse = false;
+    this.mode = 'inline';
+    this.disabled = false;
+    this.hidden = false;
+    this.height = 'auto';
+    this.maxHeight = '500px';
+    this.minHeight = '150px';
+    this.selectable = true;
+    this.open = false;
+    this.placement = 'bottom-start';
+    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) {
+    const recursive = (data) => {
+      data.forEach(item => {
+        if (item.id == param) {
+          item.active = true;
+          this.activeItemId = item.id;
+          this.bcmClick.emit(item);
+        }
+        else {
+          item.active = false;
+          if (item.items) {
+            recursive(item.items);
+          }
+        }
+      });
+    };
+    recursive(this.data);
+  }
+  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;
+      forceUpdate(this);
+    }
+    else {
+      this.activeItemId = item.id;
+      if (this.linkedComponent && this.open) {
+        this.hide();
+      }
+    }
+    // this.data = this.data.map(menuItem => ({ ...menuItem, active: menuItem.id === item.id }));
+    this.bcmClick.emit(item);
+  }
+  getTooltip(id, text) {
+    return new Tooltip({ message: text, targetId: 'bcm-menu__item-' + this._id + '-' + id, placement: 'right' });
+  }
+  render() {
+    const { data, collapsible, collapse, open } = this;
+    const hostClasses = cs('bcm-menu', `bcm-menu__size-${this.size}`, {
+      'bcm-menu__collapse': collapse,
+      'bcm-menu__open': open,
+      'bcm-menu--linked': !!this.linkedComponent,
+    });
+    const MenuLinkTemplate = (item, index) => {
+      if (!item.text)
+        return;
+      if (!item.id)
+        item.id = Generate.UID();
+      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))))));
+    };
+    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"
+          }
+        },
+        "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>",
+        "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
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmMenu.prototype, "el", void 0);
+__decorate([
+  JsonParse('data')
+], BcmMenu.prototype, "data", void 0);