bromcom-ui 2.3.54 → 2.3.58

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

@@ -25,6 +25,7 @@ export class BcmInput {
     this.disabled = false;
     this.readonly = false;
     this.clearable = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
     this.unit = null;
     this.unitPrefix = null;
     this.min = null;
@@ -103,7 +104,7 @@ export class BcmInput {
     this.value = '';
     this.inputElement.focus();
     this.change.emit(this.value);
-    this.clear.emit();
+    this.clear.emit(e);
     e.stopPropagation();
   }
   changePasswordVisibility() {
@@ -354,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" }),
@@ -699,6 +696,24 @@ export class BcmInput {
       "attribute": "id",
       "reflect": true
     },
+    "_internal_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_internal_id",
+      "reflect": false,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -894,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-item.css

@@ -90,6 +90,7 @@
   align-items: center;
   flex-direction: row;
   white-space: break-spaces;
+  margin: 0 8px;
 }
 .list-item .check {
   display: none;

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

@@ -202,6 +202,13 @@
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+.selected .selected-text .text-content.autocomplete {
+  position: absolute;
+  z-index: 1;
+  padding-left: 7px;
+  background-color: #ffffff;
+  margin-left: 2px;
+}
 .selected .selected-tags {
   padding: 0 4px;
   height: 100%;
@@ -427,12 +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,6 +1,6 @@
-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 } from '../../../utils/utils';
+import { delay, pluralize } from '../../../utils/utils';
 export class BcmListSelect {
   constructor() {
     this.objectMapping = {
@@ -14,6 +14,7 @@ export class BcmListSelect {
     this.value = null;
     this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
     this.type = 'default';
+    this.variableText = 'item';
     this.size = 'medium';
     this.placeholder = "Choose an option";
     this.noCaption = false;
@@ -21,6 +22,7 @@ export class BcmListSelect {
     this.fullWidth = false;
     this.required = false;
     this.multiSelect = false;
+    // search variables 
     this.searchData = null;
     this.searchPlaceholder = "Search";
     this.searchFields = ['text'];
@@ -30,12 +32,14 @@ export class BcmListSelect {
     this.captionCache = null;
     this.captionTypeCache = null;
     this.isOpen = false;
+    this.firstRun = true;
     this.selectArea = null;
     this.selectAreaWidth = 0;
     this.selectHiddenData = [];
     this.otherList = [];
     this.selectText = null;
     this.selectData = [];
+    this.focusInput = false;
   }
   connectedCallback() { }
   disconnectedCallback() { }
@@ -71,7 +75,8 @@ export class BcmListSelect {
   /**
    * @descc
    */
-  handleBlur() {
+  handleBlur(type = "host") {
+    type === "input" && (this.focusInput = false);
     this.blur.emit();
   }
   /**
@@ -82,6 +87,14 @@ export class BcmListSelect {
     this.captionType = this.captionTypeCache;
     this.captionError = null;
   }
+  /**
+   * @desc
+   */
+  async setClear() {
+    this.selectText = null;
+    this.value = null;
+    this.selectData = [];
+  }
   /**
    * @descc
    */
@@ -106,6 +119,25 @@ export class BcmListSelect {
         element.show();
       }
     }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         // var inputValue = await autocompleteInput.getValue()
+    //         // if ( inputValue && inputValue.length > 0 ) {
+    //             if ( element != null ){
+    //                 // this.setClear()
+    //                 // autocompleteInput.setFocus()
+    //                 // await delay(100)
+    //                 autocompleteInput.select()
+    //                 // if( element.classList.contains("show") === true ) {
+    //                 //     this.setClear()
+    //                 //     autocompleteInput.setFocus()
+    //                 //     autocompleteInput.select()
+    //                 // }
+    //             }
+    //         // }
+    //     }
+    // }
   }
   /**
    * @desc
@@ -156,8 +188,40 @@ export class BcmListSelect {
   /**
    * @descc
    */
-  clickClear(e) {
-    e.stopPropagation();
+  handleChange(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /**
+   * @descc
+   */
+  handleClear(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.clickClear();
+    }
+  }
+  /**
+   * @descc
+   */
+  clickClear(event = null) {
+    const element = document.querySelector("#" + this._list_id);
+    if (element) {
+      element.setClear(false);
+    }
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   /**
    * @desc
@@ -200,14 +264,36 @@ export class BcmListSelect {
    * @descc
    */
   async setValue(value, _id = "id", _text = "text") {
+    // debugger;
+    // if ( !value || value.length == 0 ) {
+    //     this.selectText = null; 
+    //     this.value = null; 
+    //     this.selectData = []
+    //     this.otherList = []
+    //     return false;
+    // }
+    let val = "";
+    if (this.multiSelect === false) {
+      if (value && value.length > 0) {
+        val = value[0][_text];
+      }
+      value = val;
+    }
     var newValue = value;
+    const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+    if (autocompleteInput) {
+      autocompleteInput.setValue(value);
+      this.searchText = value;
+      this.search("", false);
+    }
+    // this.selectText = newValue
     // this.searchData = JSON.parse(value as string)
     this.handleLoading(true);
     this.selectData = [];
     this.otherList = [];
     if (typeof value == 'string') {
       if (this.value !== value) {
-        this.selectText = String(value);
+        this.selectText = String(val);
         this.value = this.selectText;
       }
       this.handleLoading(false);
@@ -248,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>';
@@ -263,6 +349,14 @@ export class BcmListSelect {
     }
     // console.log('this.otherList: ', this.otherList)
     // this.resetCaption()
+    // console.log('this.value: ', this.value)
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setValue(this.value)
+    //         // autocompleteInput.select()
+    //     }
+    // }
     return this.value;
   }
   /**
@@ -344,12 +438,21 @@ export class BcmListSelect {
             Array.from(tags).filter(e => e["hidden"] === false).forEach(element => {
               this.selectHiddenData = this.selectHiddenData.filter(e => String(e[this.objectMapping['id']]) !== String(element.id));
             });
-            otherTag.setAttribute("value", this.selectHiddenData.length + " item" + (this.selectHiddenData.length > 1 ? 's' : '') + " selected");
+            otherTag.setAttribute("value", this.selectHiddenData.length + " " + pluralize(this.variableText, this.selectHiddenData.length) + " selected");
             var result = Object.keys(this.selectHiddenData).map((key) => (this.selectHiddenData[key][this.objectMapping['text']]).substring(0, 15) + "...").slice(0, 10) + "\r\n...";
             const hiddenTagsString = result.toString().split(',').join("\r\n");
             otherTag.setAttribute("title", hiddenTagsString);
           }
         }
+        const cloneList = this.listIsInitialize();
+        if (cloneList) {
+          if (sessionStorage.getItem(this._internal_id + "-config")) {
+            cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+          }
+          // console.log('selectHiddenData: ',    this.selectHiddenData )
+          cloneList.setDataOther(this.selectHiddenData);
+          // cloneList.show()
+        }
       }
       else {
         if (otherTagcontainer) {
@@ -358,18 +461,17 @@ export class BcmListSelect {
       }
     }
     else { }
-    const cloneList = this.listIsInitialize();
-    if (cloneList) {
-      if (sessionStorage.getItem(this._internal_id + "-config")) {
-        cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-      }
-      // console.log('selectHiddenData: ',    this.selectHiddenData )
-      cloneList.setDataOther(this.selectHiddenData);
-      // cloneList.show()
-    }
     // await delay(100)
     this.handleLoading(false);
   }
+  /**
+   * @desc
+   */
+  valueWatch(newValue) {
+    if (Array.isArray(newValue) && newValue.length == 0) {
+      this.value = "";
+    }
+  }
   /**
   * @desc
   */
@@ -408,13 +510,26 @@ export class BcmListSelect {
    * @descc
    */
   inputChange(e) {
-    this.search(e);
+    if (this.searchText !== e) {
+      this.searchText = e;
+      this.search(e);
+    }
   }
-  search(value) {
+  search(value, show = true) {
     const element = document.getElementById(this._list_id);
     if (element != null) {
       element.setSearch(value);
+      if (show) {
+        this.show();
+      }
     }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setFocus()
+    //         // autocompleteInput.select()
+    //     }
+    // }
   }
   /**
    * @desc
@@ -462,6 +577,25 @@ export class BcmListSelect {
           }
         }
       }
+      if (this.type === "autocomplete") {
+        if (path.filter((input) => input['id'] == this._id)[0] !== undefined) {
+          // if ( path.filter((input: HTMLElement) => input['id'] == "autocomplete")[0] 
+          //   || path.filter((input: HTMLElement) => input['id'] == "autocomplete-text")[0]  ) { 
+          const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+          if (autocompleteInput) {
+            // autocompleteInput.setClear()
+            // if ( element ) {
+            //     element.setClear()
+            // }      
+            // this.setClear()
+            // await delay(100)
+            // autocompleteInput.setFocus()
+            await delay(100);
+            autocompleteInput.select();
+            // this.focusInput = true
+          }
+        }
+      }
     }
   }
   render() {
@@ -504,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" }),
@@ -521,9 +651,9 @@ export class BcmListSelect {
               " ",
               placeholder,
               " "))),
-            this.type === 'autocomplete' && (h("bcm-input", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))),
+            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: (e) => this.clickClear(e) },
+            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" }))))),
@@ -659,6 +789,24 @@ export class BcmListSelect {
       "reflect": false,
       "defaultValue": "'default'"
     },
+    "variableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variable-text",
+      "reflect": false,
+      "defaultValue": "'item'"
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -897,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,
@@ -918,7 +1083,8 @@ export class BcmListSelect {
   }; }
   static get states() { return {
     "selectText": {},
-    "selectData": {}
+    "selectData": {},
+    "focusInput": {}
   }; }
   static get events() { return [{
       "method": "change",
@@ -1001,6 +1167,25 @@ export class BcmListSelect {
           }]
       }
     },
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
     "hide": {
       "complexType": {
         "signature": "(list?: \"default\" | \"other\") => Promise<void>",
@@ -1094,7 +1279,7 @@ export class BcmListSelect {
     },
     "setValue": {
       "complexType": {
-        "signature": "(value: Array<string> | string, _id?: string, _text?: string) => Promise<any>",
+        "signature": "(value: any, _id?: string, _text?: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -1108,9 +1293,6 @@ export class BcmListSelect {
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "Array": {
-            "location": "global"
           }
         },
         "return": "Promise<any>"
@@ -1125,7 +1307,23 @@ 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",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-clear",
+      "method": "handleClear",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "resize",
       "method": "resizeEvent",
       "target": "window",

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

@@ -59,7 +59,8 @@
   display: block;
   position: relative;
   user-select: none;
-  width: 256px;
+  width: fit-content;
+  height: fit-content;
 }
 :host main {
   width: 256px;
@@ -71,7 +72,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding: 8px;
+  padding-top: 8px;
 }
 
 :host(.full-width) {
@@ -87,11 +88,13 @@
   opacity: 0;
   top: -10000;
   left: -10000;
+  visibility: hidden !important;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 :host(.linked.show) {
   opacity: 1;
+  visibility: visible !important;
   z-index: 100000;
 }
 
@@ -176,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;
@@ -209,6 +230,7 @@
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
+  margin: 0 8px;
 }
 .list-item:hover:not(.disabled), .list-item:active:not(.disabled) {
   color: var(--bcm-color-prime-blue-6);