bromcom-ui 2.4.32 → 2.4.33

package/dist/collection/components/atoms/tag-2/tag-2.js

@@ -1,12 +1,7 @@
 import { Component, Prop, h, Event, Element, Listen } from '@stencil/core';
-import cs from 'classnames';
-import { ColorPalette } from '../../../global/variables/colors';
 import { Generate } from '../../../helper/generate';
-import { NumberHelper } from '../../../helper/number-helper';
 import Bcm from '../../../models/bcm';
 import { TagTemplate } from '../../../templates/tag-template';
-import { extractColor } from '../../../utils/utils';
-import { ColorProps } from './types';
 export class BcmTag2 {
   constructor() {
     this._id = Generate.UID();
@@ -22,23 +17,6 @@ export class BcmTag2 {
   handleClick() {
     this.type === Bcm.TagType.checkable && this.handleChecked();
   }
-  getColor(color) {
-    if ((this.type === Bcm.TagType.basic || this.type == Bcm.TagType.dismissable) && ColorProps[color])
-      return {
-        color: extractColor(ColorPalette, ColorProps[color] + '-6'),
-        borderColor: extractColor(ColorPalette, ColorProps[color] + '-3'),
-        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-1')
-      };
-  }
-  getSize(size, returnNumber = false) {
-    if (NumberHelper.isNumber(size)) {
-      size = Bcm.FontSize["size-" + size] || Bcm.FontSize["size-4"];
-    }
-    if (returnNumber) {
-      return +(Bcm.FontSizeValue[size] || Bcm.FontSizeValue['size-4']) + 2;
-    }
-    return size;
-  }
   handleClose() {
     this.tagDismissable.emit(this.el);
   }
@@ -48,12 +26,7 @@ export class BcmTag2 {
   }
   render() {
     const { type, color, value, customStyle, size, hidden, checked } = this;
-    const classes = cs('bcm-tag-2__content', type, this.getSize(size));
-    const hostClasses = cs('bcm-tag-2', {
-      hidden
-    });
-    const calculatedSize = this.getSize(size, true);
-    return (h(TagTemplate, { hostClasses: hostClasses, classes: classes, colorStyle: this.getColor(color), customStyle: customStyle, checked: checked, value: value, type: Bcm.TagType[type], calculatedSize: calculatedSize, onSelect: (e) => { this.bcmTagSelect.emit(e); this.selectFunc({ event: e, id: this._id }); }, onDismiss: (e) => { this.handleClose(); this.closeFunc(e); } }));
+    return (h(TagTemplate, { size: size, hidden: hidden, color: color, customStyle: customStyle, checked: checked, value: value, type: Bcm.TagType[type], onSelect: (e) => { this.bcmTagSelect.emit(e); this.selectFunc({ event: e, id: this._id }); }, onDismiss: (e) => { this.handleClose(); this.closeFunc(e); } }));
   }
   static get is() { return "bcm-tag-2"; }
   static get originalStyleUrls() { return {

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

@@ -440,13 +440,15 @@ export class BcmSelect {
     this.captionTypeCache = this.captionType;
   }
   handleChange(newValue, oldValue) {
-    if (oldValue != newValue) {
+    const oldVal = oldValue ? oldValue : null;
+    const newVal = newValue ? newValue : null;
+    if (oldVal != newVal) {
       if (this.checkboxes == true) {
-        this.change.emit(newValue);
+        this.change.emit(newVal);
       }
       else {
-        if (newValue[this.objectMapping['id']] != (oldValue && oldValue[this.objectMapping['id']])) {
-          this.change.emit(newValue);
+        if (newVal[this.objectMapping['id']] != (oldVal && oldVal[this.objectMapping['id']])) {
+          this.change.emit(newVal);
         }
       }
     }
@@ -480,21 +482,21 @@ export class BcmSelect {
     }
     if (this.isOpen && this.searchable && !otherTag) {
       // await this.createElement()
-      // setTimeout(() => {
-      var searchInput = null;
-      if (document.getElementById("select-box" + this._internal_id)
-        && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-        if (this.treeview) {
-          searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
-        }
-        else {
-          searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-        }
-        if (searchInput) {
-          searchInput.clearAndSelectSearch();
+      setTimeout(() => {
+        var searchInput = null;
+        if (document.getElementById("select-box" + this._internal_id)
+          && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+          if (this.treeview) {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
+          }
+          else {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+          }
+          if (searchInput) {
+            searchInput.clearAndSelectSearch();
+          }
         }
-      }
-      // }, 50);
+      }, 100);
     }
     if (this.isOpen == true && this.isRendered == false) {
       this.renderListbox();
@@ -650,6 +652,7 @@ export class BcmSelect {
     }
   }
   handleClickOutside(event) {
+    var _a;
     var path = event.path || (event.composedPath && event.composedPath());
     if (path && path.filter((input) => input['id'] == "other-tag")[0] == undefined
       && path && path.filter((input) => input['id'] == "listbox")[0] == undefined) {
@@ -660,8 +663,8 @@ export class BcmSelect {
         }
       }, 50);
     }
-    if (this.el.contains(event.target)
-      || path && path.filter((input) => input['id'] == "select-box" + this._internal_id)[0] != undefined) {
+    if (((event === null || event === void 0 ? void 0 : event.target) && ((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+      || (path && path.filter((input) => input['id'] == "select-box" + this._internal_id)[0] != undefined)) {
       // this.searchResults = []
       // this.watchSearchResults()
       this.optionViewportStyleAlignment = {};

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

@@ -18608,6 +18608,27 @@
   padding: 0 8px;
   height: 32px;
   overflow: hidden;
+  position: relative;
+}
+.bcm-list__input-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bcm-color-grey-1);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out;
+  z-index: -1;
+}
+.bcm-list__input-spinner.is-open {
+  opacity: 1;
+  visibility: visible;
+  z-index: 1;
 }
 .bcm-list__input-container {
   width: 100%;
@@ -18752,6 +18773,7 @@
   background-color: var(--bcm-color-prime-blue-1);
 }
 .bcm-list__item-content-collapse-icon {
+  color: var(--bcm-color-grey-8);
   width: 16px;
   padding: 0 8px;
   display: flex;
@@ -18763,6 +18785,7 @@
   cursor: pointer;
 }
 .bcm-list__item-content-text {
+  user-select: none;
   padding: 8px;
   width: 100%;
   display: flex;

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

@@ -67,7 +67,8 @@ export class BcmList {
     this.searchFound = null;
     this.returnFilterData = {};
     this.returnOtherData = {};
-    this.isSentNotification = true;
+    this.isLoadingInput = true;
+    this.isLoadingList = true;
     this.options = {
       rootMargin: '30px'
     };
@@ -101,6 +102,7 @@ export class BcmList {
   componentWillRender() {
     this.calculateLocation();
     this.updateOptions();
+    this.tagControl();
   }
   componentShouldUpdate(newVal, oldVal, propName) {
     var _a;
@@ -171,6 +173,7 @@ export class BcmList {
   }
   async handleOpen() {
     if (this.isOpen) {
+      this.calculateLocation();
       this.onSelectSearch();
     }
     else {
@@ -188,6 +191,7 @@ export class BcmList {
     }
   }
   handleResize() {
+    this.isLoadingInput = true;
     this.calculateLocation();
     this.debounceHandler();
   }
@@ -392,12 +396,14 @@ export class BcmList {
     return false;
   }
   async setClear(e) {
+    // this.isLoadingInput = true
     listState.setClear(this._id);
     this.value = null;
     this.inputText = '';
     this.isOpen = false;
     this.selectAllItem.indeterminate = 'uncheck';
-    await this.tagControl();
+    // await this.tagControl()
+    this.removeTags();
     this.markForCheck();
     if (e) {
       e.stopPropagation();
@@ -428,6 +434,7 @@ export class BcmList {
     this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? checkeds === total ? 'check' : 'indeterminate' : 'uncheck', checked: this.checkboxes && checkeds > 0 ? checkeds === total ? true : false : false });
   }
   listenResize() {
+    this.isLoadingInput = true;
     this.tagControl();
     this.calculateLocation();
   }
@@ -471,6 +478,7 @@ export class BcmList {
   }
   async initState() {
     var _a, _b, _c;
+    this.isLoadingInput = true;
     await listState.setValue({
       id: this._id,
       dataSource: this.data && snq(() => typeof this.data == 'string' ? JSON.parse(this.data) : this.data, []),
@@ -487,6 +495,7 @@ export class BcmList {
     }
     else {
       this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.isLoadingInput = false;
     }
     const checkedIDs = [];
     ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.value.forEach(item => {
@@ -593,23 +602,30 @@ export class BcmList {
     io.observe(event.target.lastElementChild);
   }
   calculateLocation() {
+    var _a;
     const list = document.getElementById(`bcm-list-${this._id}`);
     list && (list.style.height = '256px');
     if (this.isOpen) {
       var placement = this.placement;
       const list = document.getElementById(`bcm-list-${this._id}`);
-      // if (this.linkedComponent) {
-      //     const linked = document.getElementById(this.linkedComponent)
-      //     if (linked) {
-      //         console.dir(linked)
-      //     }
-      // }
       const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
       const targetElement = document.getElementById(targetElementId);
       if (list && targetElement) {
         getPlacement(list, targetElement, placement, (place) => placement = place);
         const pos = setPosition(placement, targetElement);
-        list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight : pos[0]) + "px";
+        let captionAreaHeight = 0;
+        if (this.linkedComponent) {
+          const linked = document.getElementById(this.linkedComponent);
+          if (linked) {
+            if (!linked["noCaption"]) {
+              const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.caption-area')) || linked.querySelector('.caption-area');
+              if (captionArea) {
+                captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
+              }
+            }
+          }
+        }
+        list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight : pos[0] - captionAreaHeight) + "px";
         list.style.left = pos[1] + "px";
         if (this.fullWidth) {
           list.style.width = targetElement.offsetWidth + "px";
@@ -632,6 +648,7 @@ export class BcmList {
       type: 'dismissable',
       itemObject: tag.itemObject || null,
     });
+    await delay(10);
     return Promise.resolve(element.componentOnReady());
   }
   async tagControl() {
@@ -742,6 +759,17 @@ export class BcmList {
       }
     }
   }
+  removeTags() {
+    let tagContainer = this.el.querySelector(`#bcm-list-input-tag-container-${this._id}`);
+    if (tagContainer) {
+      if (this.type === 'autocomplete') {
+        tagContainer = this.el.querySelector(`#bcm-list-input-tag-container-${this._id}-autocomplete`);
+      }
+      tagContainer.querySelectorAll('bcm-tag-2').forEach(element => {
+        element.remove();
+      });
+    }
+  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = cs('bcm-list', `bcm-list__size-${size}`, size === 'large' ? 'size-3' : 'size-2', {
@@ -1541,7 +1569,8 @@ export class BcmList {
     "searchFound": {},
     "returnFilterData": {},
     "returnOtherData": {},
-    "isSentNotification": {},
+    "isLoadingInput": {},
+    "isLoadingList": {},
     "options": {},
     "tagContainerWidth": {},
     "selectAllItem": {}

package/dist/collection/components/organism/states/bcm-list2.states.js

@@ -154,7 +154,7 @@ const addChecked = (id, ids) => {
   const value = getValue(id);
   if (value) {
     ids.forEach((item) => {
-      checkedItem(id, item.toString());
+      checkedItem(id, item);
     });
   }
 };
@@ -173,7 +173,7 @@ const findItem = (id, itemId, items) => {
   }
   if (dataSource) {
     dataSource.forEach((item) => {
-      if (itemId.includes(item.id.toString())) {
+      if (itemId.includes(item.id)) {
         checkedProcess(id, item);
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);

package/dist/collection/helper/generate.js

@@ -124,3 +124,7 @@ Generate.convertIdsToNestedData = (ids, checklist) => {
   });
   return result;
 };
+//nodelist to array
+Generate.nodeListToArray = (nodeList) => {
+  return Array.prototype.slice.call(nodeList);
+};

package/dist/collection/templates/tag-template.js

@@ -1,13 +1,42 @@
 import { h } from '@stencil/core';
 import Bcm from '../models/bcm';
 import cs from 'classnames';
-export const TagTemplate = ({ hostClasses, classes, colorStyle, customStyle, checked, value, type, calculatedSize, onDismiss, onSelect }) => (h("div", { class: cs(hostClasses, { checked }) },
-  h("span", { hidden: true },
-    h("slot", null)),
-  h("span", { class: classes, style: colorStyle, onClick: (e) => onSelect(e) },
-    type === Bcm.TagType.add && (h("span", { class: "left" },
-      h("bcm-icon", { icon: "plus", type: "outlined", color: "grey-8", size: calculatedSize }))),
-    type === Bcm.TagType.checkable && h("input", { type: "checkbox", checked: checked }),
-    h("span", { class: "value", style: customStyle }, value),
-    type === Bcm.TagType.dismissable && (h("span", { class: "right close-button", onClick: (e) => onDismiss(e) },
-      h("i", { class: "bcm-fal bcm-fa-times" }))))));
+import { NumberHelper } from '../helper/number-helper';
+import { extractColor } from '../utils/utils';
+import { ColorPalette } from '../global/variables/colors';
+import { ColorProps } from '../components/atoms/tag-2/types';
+export const TagTemplate = ({ _id, color, customStyle, size, checked, hidden, value, type, onDismiss, onSelect }) => {
+  !size && (size = Bcm.FontSize['size-1']);
+  const getColor = (color) => {
+    if ((type === Bcm.TagType.basic || type == Bcm.TagType.dismissable) && ColorProps[color])
+      return {
+        color: extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-3'),
+        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-1')
+      };
+  };
+  const getSize = (size, returnNumber = false) => {
+    if (NumberHelper.isNumber(size)) {
+      size = Bcm.FontSize["size-" + size] || Bcm.FontSize["size-4"];
+    }
+    if (returnNumber) {
+      return +(Bcm.FontSizeValue[size] || Bcm.FontSizeValue['size-4']) + 2;
+    }
+    return size;
+  };
+  const classes = cs('bcm-tag-2__content', type, getSize(size));
+  const hostClasses = cs('bcm-tag-2', {
+    hidden
+  });
+  const calculatedSize = getSize(size, true);
+  return (h("div", { id: _id, class: cs(hostClasses, { checked }) },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: classes, style: getColor(color), onClick: (e) => onSelect(e) },
+      type === Bcm.TagType.add && (h("span", { class: "left" },
+        h("bcm-icon", { icon: "plus", type: "outlined", color: "grey-8", size: calculatedSize }))),
+      type === Bcm.TagType.checkable && h("input", { type: "checkbox", checked: checked }),
+      h("span", { class: "value", style: customStyle }, value),
+      type === Bcm.TagType.dismissable && (h("span", { class: "right close-button", onClick: (e) => onDismiss(e) },
+        h("i", { class: "bcm-fal bcm-fa-times" }))))));
+};