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

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

@@ -0,0 +1,410 @@
+/*!
+ * 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, Host, h, Prop, Element, Method, Listen } from '@stencil/core';
+import { Bcm } from '../../../../types/models';
+import { delay, FloatingUI } from '../../../../types/utils';
+import { Generate } from '../../../../types/helper';
+import { IsLoad } from '../../../../types/decorators';
+export class BcmLinked {
+  constructor() {
+    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)));
+  }
+  static get is() { return "bcm-linked"; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "placement": {
+      "type": "string",
+      "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\"",
+        "references": {
+          "PlacementTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "Bcm.Placement['bottom-start']"
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TrigglerTypes",
+        "resolved": "\"click\" | \"focus\" | \"hover\"",
+        "references": {
+          "TrigglerTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "Bcm.TriggerType.click"
+    },
+    "targetId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "maxHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": false
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "'50px'"
+    },
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(wait?: boolean) => Promise<boolean>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "(wait?: boolean) => Promise<boolean>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "toggle": {
+      "complexType": {
+        "signature": "(wait?: boolean) => Promise<boolean>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "linked-data-dismiss",
+      "method": "onLinkedDataDismis",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-floating-is-hide",
+      "method": "onBcmFloatingIsHide",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "clickListener",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "resizeListener",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "scroll",
+      "method": "scrollListener",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "wheel",
+      "method": "wheelListener",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmLinked.prototype, "el", void 0);