bromcom-ui 2.7.36-rc.10 → 2.7.36-rc.11

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

@@ -0,0 +1,839 @@
+/*!
+ * 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, h, Host, Listen, Method, Prop, Watch } from '@stencil/core';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { JsonParse } from '../../../decorators/json-parse-decarator';
+import { Generate } from '../../../helper/generate';
+import Bcm from '../../../models/bcm';
+export class BcmDropdown {
+  constructor() {
+    this._id = Generate.UID();
+    this.hidden = false;
+    this.type = 'dropdown';
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.kind = Bcm.Kind.solid;
+    this.noStyle = false;
+    this.dropdownIcon = 'fas fa-angle-down';
+    this.multiLevel = false;
+    this.loading = false;
+    this.dataDismiss = false;
+    this.fullWidth = false;
+    this.iconPosition = Bcm.IconPosition.prefix;
+    this.height = 'auto';
+    this.maxHeight = '500px';
+    this.minHeight = '50px';
+    this.stopDeepClean = false;
+    this.selectable = true;
+    this.data = [];
+  }
+  async dataChanged(newValue) {
+    if (newValue) {
+      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._id}-menu`);
+      if (menu) {
+        menu.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();
+    }
+    const bcmContent = this.el.querySelector('bcm-content');
+    if (bcmContent) {
+      bcmContent.style.display = 'none';
+      this.createBox();
+      this.isOpen = this.isOpen;
+    }
+  }
+  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 hostClasses = cs('bcm-dropdown', 'bcm-dropdown__type-' + type, {
+      'full-width': fullWidth,
+      'no-style': this.noStyle,
+      'hidden': this.hidden || this.linkedComponent,
+    });
+    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color }));
+    const iconClasses = cs('bcm-dropdown__icon', {
+      'bcm-dropdown__icon--open': this.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._id}-menu`, "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 }))));
+  }
+  static get is() { return "bcm-dropdown"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": false
+    },
+    "_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()"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'dropdown' | 'split'",
+        "resolved": "\"dropdown\" | \"split\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'dropdown'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SizeTypes",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "Bcm.Size.medium"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "kind": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "KindTypes",
+        "resolved": "\"ghost\" | \"link\" | \"solid\"",
+        "references": {
+          "KindTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "kind",
+      "reflect": false,
+      "defaultValue": "Bcm.Kind.solid"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "noStyle": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-style",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dropdownIcon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dropdown-icon",
+      "reflect": false,
+      "defaultValue": "'fas fa-angle-down'"
+    },
+    "linkedComponent": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linked-component",
+      "reflect": false
+    },
+    "multiLevel": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multi-level",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "VariantProp",
+        "resolved": "\"reset\" | \"submit\" | \"save\" | \"ok\" | \"new\" | \"add\" | \"create\" | \"apply\" | \"prev\" | \"next\" | \"send\" | \"delete\" | \"cancel\" | \"decline\" | \"close\" | \"archive\" | \"remove\" | \"edit\" | \"export\" | \"import\" | \"filter\" | \"update\" | \"download\"",
+        "references": {
+          "VariantProp": {
+            "location": "import",
+            "path": "../../atoms/button/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false
+    },
+    "dataDismiss": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-dismiss",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "IconPositionTypes",
+        "resolved": "\"prefix\" | \"suffix\"",
+        "references": {
+          "IconPositionTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "Bcm.IconPosition.prefix"
+    },
+    "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
+    },
+    "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": "'50px'"
+    },
+    "stopDeepClean": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "stop-deep-clean",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selectable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "color": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "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 events() { return [{
+      "method": "bcmClick",
+      "name": "bcm-click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownLinkedComponent",
+      "name": "dropdown-linked-component",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setActive": {
+      "complexType": {
+        "signature": "(id: 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": "data",
+      "methodName": "dataChanged"
+    }, {
+      "propName": "isOpen",
+      "methodName": "isOpenChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "dropdown-linked-component",
+      "method": "handleIsClickDismiss",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleOnClick",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wheel",
+      "method": "handleWheel",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-items",
+      "method": "handleSlotItems",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmDropdown.prototype, "el", void 0);
+__decorate([
+  JsonParse('data')
+], BcmDropdown.prototype, "data", void 0);
+__decorate([
+  JsonParse('data', true)
+], BcmDropdown.prototype, "dataChanged", null);