npm - bromcom-ui - Versions diffs - 2.7.37 → 2.7.38-rc.0 - Mend

bromcom-ui 2.7.37 → 2.7.38-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

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

@@ -35,14 +35,13 @@ export class BcmDropdown {
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
     this.linkedComponent = undefined;
-    this.multiLevel = false;
     this.loading = false;
     this.variant = undefined;
     this.dataDismiss = false;
     this.fullWidth = false;
     this.iconPosition = Bcm.IconPosition.prefix;
     this.placement = undefined;
-    this.height = 'auto';
+    this.height = undefined;
     this.maxHeight = '500px';
     this.minHeight = '50px';
     this.stopDeepClean = false;
@@ -55,156 +54,25 @@ export class BcmDropdown {
       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;
-    }
-  }
-  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;
+      (_a = document.getElementById(this.menuId)) === null || _a === void 0 ? void 0 : _a.appendChild(bcmContent);
     }
   }
-  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 = cs('bcm-dropdown', 'bcm-dropdown__type-' + type, {
       'full-width': fullWidth,
       'no-style': this.noStyle,
@@ -212,10 +80,10 @@ export class BcmDropdown {
     });
     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 = cs('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) }))));
   }
   static get is() { return "bcm-dropdown"; }
   static get originalStyleUrls() {
@@ -504,27 +372,9 @@ export class BcmDropdown {
         "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,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -542,7 +392,7 @@ export class BcmDropdown {
       },
       "variant": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "VariantProp",
           "resolved": "\"filter\" | \"remove\" | \"close\" | \"reset\" | \"submit\" | \"apply\" | \"download\" | \"save\" | \"ok\" | \"new\" | \"add\" | \"create\" | \"prev\" | \"next\" | \"send\" | \"delete\" | \"cancel\" | \"decline\" | \"archive\" | \"edit\" | \"export\" | \"import\" | \"update\"",
@@ -564,7 +414,7 @@ export class BcmDropdown {
       },
       "dataDismiss": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -582,7 +432,7 @@ export class BcmDropdown {
       },
       "fullWidth": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -600,7 +450,7 @@ export class BcmDropdown {
       },
       "iconPosition": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "IconPositionTypes",
           "resolved": "\"prefix\" | \"suffix\"",
@@ -623,7 +473,7 @@ export class BcmDropdown {
       },
       "placement": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "PlacementTypes",
           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
@@ -644,11 +494,11 @@ export class BcmDropdown {
         "reflect": false
       },
       "height": {
-        "type": "string",
-        "mutable": true,
+        "type": "any",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -658,12 +508,11 @@ export class BcmDropdown {
           "text": ""
         },
         "attribute": "height",
-        "reflect": false,
-        "defaultValue": "'auto'"
+        "reflect": false
       },
       "maxHeight": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -681,7 +530,7 @@ export class BcmDropdown {
       },
       "minHeight": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -735,7 +584,7 @@ export class BcmDropdown {
       },
       "color": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -786,28 +635,13 @@ export class BcmDropdown {
           "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>",
+          "signature": "(id?: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -831,31 +665,10 @@ export class BcmDropdown {
     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,

package/dist/collection/components/molecules/linked/linked.js CHANGED Viewed

@@ -93,6 +93,7 @@ export class BcmLinked {
     document.body.appendChild(this.el);
   }
   onLinkedDataDismis() {
+    // console.log('onLinkedDataDismis');
     this.hide(false);
   }
   onBcmFloatingIsHide(e) {
@@ -131,10 +132,15 @@ export class BcmLinked {
     if (!this.target())
       return;
     const isTarget = Generate.findEventPath(e, this.target());
+    const isSelf = Generate.findEventPath(e, this.el);
+    const isLinked = Generate.findEventPathWithNodeName(e, 'BCM-LINKED');
+    if (!isTarget && !isSelf && !isLinked) {
+      this.isOpen = false;
+      this.bcmOpen.emit(this.isOpen);
+      return;
+    }
     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();
@@ -153,6 +159,9 @@ export class BcmLinked {
   wheelListener() {
     this.calculatePosition();
   }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
   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)));
@@ -250,7 +259,7 @@ export class BcmLinked {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
@@ -267,7 +276,7 @@ export class BcmLinked {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
@@ -314,6 +323,24 @@ export class BcmLinked {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "bcmOpen",
+        "name": "bcm-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {
@@ -376,6 +403,12 @@ export class BcmLinked {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "watchIsOpen"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "linked-data-dismiss",
@@ -392,8 +425,8 @@ export class BcmLinked {
       }, {
         "name": "click",
         "method": "clickListener",
-        "target": "window",
-        "capture": false,
+        "target": "document",
+        "capture": true,
         "passive": false
       }, {
         "name": "resize",