bromcom-ui 2.3.57 → 2.3.58

package/dist/collection/components/atoms/label/label.css

@@ -0,0 +1,70 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+.size-1 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.size-2 {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.size-3 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.size-4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.size-5 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.size-6 {
+  font-size: 30px;
+  line-height: 38px;
+}
+
+.size-7 {
+  font-size: 38px;
+  line-height: 46px;
+}
+
+.size-8 {
+  font-size: 46px;
+  line-height: 54px;
+}
+
+.size-9 {
+  font-size: 56px;
+  line-height: 64px;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-semibold {
+  font-weight: 500;
+}
+
+/**
+ * Generator
+ */
+.bcm-label {
+  display: flex;
+  align-items: center;
+  grid-gap: 2px;
+}
+.bcm-label__text {
+  display: inline-block;
+  color: var(--bcm-color-grey-9);
+  margin-bottom: 4px;
+}
+.bcm-label__text-error {
+  color: var(--bcm-color-red-6);
+}

package/dist/collection/components/atoms/label/label.js

@@ -0,0 +1,203 @@
+import { Component, h, Element, Prop, Host } from '@stencil/core';
+import cs from 'classnames';
+import { Generate } from '../../../helper/generate';
+import Bcm from '../../../models/bcm';
+import { LabelTemplate } from '../../../templates/label-template';
+export class BcmLabel {
+  constructor() {
+    /** Props **/
+    this._id = Generate.UID();
+    this.required = false;
+    this.size = Bcm.FontSize['size-1'];
+    this.hidden = false;
+    this.type = Bcm.Status.default;
+  }
+  render() {
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
+    const hostClasses = cs('bcm-label', { hidden });
+    const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (h(Host, null,
+      h("div", { class: hostClasses },
+        Label,
+        tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' },
+          h("bcm-icon", { color: "grey-8", icon: "question-circle", type: "fill" }))))));
+  }
+  static get is() { return "bcm-label"; }
+  static get originalStyleUrls() { return {
+    "$": ["label.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["label.css"]
+  }; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Props *"
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FontSizesTypes",
+        "resolved": "\"size-1\" | \"size-2\" | \"size-3\" | \"size-4\" | \"size-5\" | \"size-6\" | \"size-7\" | \"size-8\" | \"size-9\"",
+        "references": {
+          "FontSizesTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "Bcm.FontSize['size-1']"
+    },
+    "form": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form",
+      "reflect": false
+    },
+    "htmlFor": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "html-for",
+      "reflect": false
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusTypes | any",
+        "resolved": "any",
+        "references": {
+          "StatusTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "Bcm.Status.default"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/checkbox/group.js

@@ -251,12 +251,8 @@ export class BcmCheckboxGroup {
     var customStyle = {};
     this.gap && (customStyle = { 'gap': this.gap });
     return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() },
-      label && h("label", { class: "label size-1" },
-        " ",
-        label,
-        " ",
-        required && ('*'),
-        "  "),
+      label && h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })),
       indeterminate && (h("div", { class: indeterminateClasses },
         h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }),
         h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() },
@@ -599,6 +595,23 @@ export class BcmCheckboxGroup {
       "attribute": "caption-type",
       "reflect": false,
       "defaultValue": "'default'"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -355,12 +355,8 @@ export class BcmInput {
     const hostClasses = cs(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
     return (h(Host, { class: hostClasses },
       h("div", { class: containerClasses },
-        label && h("label", { htmlFor: this.inputId, class: "label size-1" },
-          " ",
-          label,
-          " ",
-          required && ('*'),
-          " "),
+        label && h("div", null,
+          h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })),
         h("div", { class: baseClasses },
           h("span", { class: "input-prefix" },
             h("slot", { name: "prefix" }),
@@ -913,6 +909,23 @@ export class BcmInput {
       "attribute": "max-length",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/molecules/list/list-select.css

@@ -434,14 +434,10 @@
 .tag.dissmisable .close-button {
   width: 14px;
   cursor: pointer;
+  fill: var(--bcm-color-grey-7);
 }
-.tag.dissmisable .close-button bcm-icon,
-.tag.dissmisable .close-button .icon * {
-  color: var(--bcm-color-grey-7);
-}
-.tag.dissmisable .close-button:hover bcm-icon,
-.tag.dissmisable .close-button:hover .icon * {
-  color: var(--bcm-color-grey-10);
+.tag.dissmisable .close-button:hover {
+  fill: var(--bcm-color-grey-10);
 }
 .tag span {
   display: inline-flex;

package/dist/collection/components/molecules/list/list-select.js

@@ -1,4 +1,4 @@
-import { Component, h, Element, Prop, Host, Event, State, Method, Listen } from '@stencil/core';
+import { Component, h, Element, Prop, Host, Event, State, Method, Listen, Watch } from '@stencil/core';
 import cs from 'classnames';
 import { delay, pluralize } from '../../../utils/utils';
 export class BcmListSelect {
@@ -213,11 +213,15 @@ export class BcmListSelect {
   /**
    * @descc
    */
-  clickClear() {
+  clickClear(event = null) {
     const element = document.querySelector("#" + this._list_id);
     if (element) {
       element.setClear(false);
     }
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   /**
    * @desc
@@ -330,10 +334,10 @@ export class BcmListSelect {
             newTag.setAttribute("_internal_id", this._internal_id);
             newTag.innerHTML = '<span class="value"> ' + item["text"] + ' </span>'
               + '<span id="close-button" ' + '_internal_id="' + this._internal_id + '" class="right close-button"> '
-              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> '
+              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> '
               + '<g id="icon/outlined/suggested/close">'
-              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" fill="black"/>'
-              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" fill="black"/>'
+              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" />'
+              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" />'
               + '</g>'
               + '</svg>'
               + '</span>';
@@ -460,6 +464,14 @@ export class BcmListSelect {
     // await delay(100)
     this.handleLoading(false);
   }
+  /**
+   * @desc
+   */
+  valueWatch(newValue) {
+    if (Array.isArray(newValue) && newValue.length == 0) {
+      this.value = "";
+    }
+  }
   /**
   * @desc
   */
@@ -626,12 +638,8 @@ export class BcmListSelect {
     // </Host>
     h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
       h("div", { class: container },
-        label && h("label", { class: "label size-1", onClick: () => this.handleOpen() },
-          " ",
-          label,
-          " ",
-          required === true && ('*'),
-          "  "),
+        label && h("div", null,
+          h("bcm-label", { onClick: () => this.handleOpen(), tooltip: this.tooltip, type: captionType, value: label, required: required })),
         h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 },
           h("span", { class: selectedText, title: selectText !== null && (selectText) },
             h("div", { class: "spinner first-run" }),
@@ -645,7 +653,7 @@ export class BcmListSelect {
               " "))),
             this.type === 'autocomplete' && (h("bcm-input", { _internal_id: this._internal_id, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur("input"), "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", "no-caption": true, "no-margin": true, type: "search", clearable: true }))),
           this.type === 'select' && (h("div", { class: "buttons" },
-            clearable && value && (h("button", { class: "select-clear-button", onClick: () => this.clickClear() },
+            clearable && value && (h("button", { id: "clear-button", class: "select-clear-button", onClick: (e) => this.clickClear(e) },
               h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))),
             h("span", { class: isOpen ? 'open' : 'close' },
               h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))),
@@ -1037,6 +1045,23 @@ export class BcmListSelect {
       "reflect": false,
       "defaultValue": "false"
     },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    },
     "searchData": {
       "type": "any",
       "mutable": false,
@@ -1282,6 +1307,10 @@ export class BcmListSelect {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueWatch"
+    }]; }
   static get listeners() { return [{
       "name": "bcm-change",
       "method": "handleChange",

package/dist/collection/components/molecules/list/list.css

@@ -179,6 +179,24 @@
   grid-gap: 4px;
 }
 
+.check-container {
+  display: block;
+}
+.check-container.hidden {
+  display: none;
+}
+
+.empty {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+}
+.empty.show {
+  display: flex;
+}
+
 .spinner {
   position: absolute;
   z-index: 1;

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

@@ -80,6 +80,7 @@ export class BcmList {
     if (this.type !== 'default' || this.linkedComponent !== null) {
       this.isShow = false;
       this.el.classList.add("linked");
+      this.el.classList.remove("show");
       this.handleLinkedComponent();
     }
     const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
@@ -131,6 +132,7 @@ export class BcmList {
     if (this.searchable == true) {
       // var searchInput = null
       const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+      // console.log(searchInput)
       if (searchInput) {
         searchInput.setClear();
         if (select == true) {
@@ -145,11 +147,14 @@ export class BcmList {
   async show() {
     if (this.processType == 'deselect') {
       this.firstRender = true;
-      this.isRendered = false;
-      this.setData(this.otherList);
+      if (this.items != this.otherList) {
+        this.isRendered = false;
+        this.setData(this.otherList);
+      }
     }
     this.isShow = true;
     this.renderList();
+    this.clearAndSelectSearch(true);
   }
   /**
    * @desc
@@ -597,6 +602,18 @@ export class BcmList {
    */
   handleClick(event) {
     var path = event.path || (event.composedPath && event.composedPath());
+    // const elementId = "bcm-list-select-" + this._id
+    // console.log ( 
+    //     !!(
+    //         path 
+    //         && path.filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
+    //         && ( 
+    //             path.filter((input: HTMLElement) => input['id'] == "clear-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close")[0] !== undefined 
+    //         )
+    //     )
+    // )
     if (!this.el.contains(event.target)
       || (path
         && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
@@ -917,6 +934,7 @@ export class BcmList {
    * @desc
    */
   calculatedTotals(calcObject) {
+    var searchResult = -1;
     if (calcObject["selected"] != undefined) {
       if (this.infoFooter == true && this.el.shadowRoot.querySelector("#selected-item")) {
         if (calcObject["selected"] > 0) {
@@ -935,6 +953,7 @@ export class BcmList {
         else {
           this.el.shadowRoot.querySelector("#search-result").innerHTML = calcObject["searchResult"] + " / ";
         }
+        searchResult = calcObject["searchResult"];
       }
     }
     if (calcObject["total"] != undefined) {
@@ -944,6 +963,24 @@ export class BcmList {
         this.el.shadowRoot.querySelector("#variable-text").innerHTML = pluralize(this.variableText, calcObject["total"]);
       }
     }
+    const empty = this.el.shadowRoot.querySelector("#empty");
+    const selectAll = this.el.shadowRoot.querySelector("#check-container");
+    if (searchResult == 0 || this.total == 0) {
+      if (empty) {
+        empty.classList.add("show");
+      }
+      if (selectAll) {
+        selectAll.classList.add("hidden");
+      }
+    }
+    else {
+      if (empty) {
+        empty.classList.remove("show");
+      }
+      if (selectAll) {
+        selectAll.classList.remove("hidden");
+      }
+    }
   }
   /**
    * @desc
@@ -1146,18 +1183,14 @@ export class BcmList {
     var mainStyle = Object.assign({ 'height': styleHeight }, customStyle);
     var hostStyle = Object.assign({ 'height': styleHeight + labelAreaHeight }, customStyle);
     return (h(Host, { class: hostClasses, style: hostStyle },
-      (this.type === 'default' && this.processType === 'default' && this.label) && (h("label", { class: "label size-1" },
-        " ",
-        this.label,
-        " ",
-        this.required && ('*'),
-        "  ")),
+      (this.type === 'default' && this.processType === 'default' && this.label) && (h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: this.captionType, value: this.label, required: this.required }))),
       h("main", { style: mainStyle },
         this.searchable === true && (h("div", { class: searchContainer },
           h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }),
           h("bcm-divider", null))),
         h("div", { class: classes },
-          this.multiSelect === true && (h("div", { class: "check-container" },
+          this.multiSelect === true && (h("div", { id: "check-container", class: "check-container" },
             h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) },
               h("div", { class: "check-content" },
                 h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })),
@@ -1167,7 +1200,9 @@ export class BcmList {
           h("slot", null),
           h("div", { class: "list" }),
           h("div", { class: "spinner first-run" },
-            h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))),
+            h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" })),
+          h("div", { id: "empty", class: "empty" },
+            h("bcm-empty", { size: "small", text: "No Data" }))),
         this.infoFooter == true && (h("div", { class: footer },
           h("bcm-text", { scale: "size-1", color: "grey-8" },
             this.multiSelect === true && (h("span", { id: "selected-item" })),
@@ -1926,6 +1961,23 @@ export class BcmList {
       "attribute": "required",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "***"
+      },
+      "attribute": "tooltip",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -1941,7 +1993,7 @@ export class BcmList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "***"
+        "text": ""
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/molecules/popconfirm/popconfirm-box.css

@@ -125,6 +125,7 @@
   display: none;
   border: 6px solid;
   z-index: 10700;
+  pointer-events: none;
 }
 .popconfirm-box.open .box, .popconfirm-box.open::after {
   display: block;

package/dist/collection/components/molecules/popconfirm/popconfirm.css

@@ -125,6 +125,7 @@
   display: none;
   border: 6px solid;
   z-index: 10700;
+  pointer-events: none;
 }
 .popconfirm.open .box, .popconfirm.open::after {
   display: block;