bromcom-ui 2.3.54 → 2.3.58

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;

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

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

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

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

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

@@ -99,12 +99,8 @@ export class BcmRadioGroup {
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
     if (this.radioOptions) {
       return (h(Host, { class: hostClasses },
-        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 })),
         h("div", { class: classes },
           this.radioOptions && this.radioOptions.map(radio => (h("bcm-radio", { value: radio.value, disabled: radio.disabled, checked: radio.checked },
             " ",
@@ -419,6 +415,23 @@ export class BcmRadioGroup {
       "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/search/search.js

@@ -61,7 +61,7 @@ export class BcmSearch {
   }
   nestedSearch(items, value, equal = false) {
     var result;
-    items.map((item) => {
+    items && (items.map((item) => {
       this.searchFields.map(searchField => {
         if (searchField in item) {
           // debugger;
@@ -114,7 +114,7 @@ export class BcmSearch {
           }
         }
       });
-    });
+    }));
     return result;
   }
   /**

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

@@ -325,12 +325,72 @@ export class BcmSelect {
     }
   }
   async addChecked(id = []) {
-    this.renderListbox();
-    await this.createElement();
-    await delay(100);
-    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-      await this.bcmListbox.addChecked(id);
+    if (this.isRendered == true) {
+      this.renderListbox();
+      await this.createElement();
+      await delay(100);
+      if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+        this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+        await this.bcmListbox.addChecked(id);
+      }
+    }
+    else {
+      var checkedItems = id;
+      var _checkedItems = [];
+      if (this._items && this._items.length > 0) {
+        if (this.checkboxes === true) {
+          if (this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(element => {
+              element[this.objectMapping['checked']] = false;
+            });
+          }
+        }
+        else {
+          if (this._items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+              element[this.objectMapping['selected']] = false;
+            });
+          }
+        }
+        if (typeof checkedItems == 'string') {
+          if (this.checkboxes === false) {
+            const item = this._items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
+            this.value = item;
+            this.selectText = item[this.objectMapping['text']];
+          }
+        }
+        else {
+          if (this.checkboxes === true) {
+            checkedItems.forEach(id => {
+              var findItem = this._items.find(e => String(e[this.objectMapping['id']]) == String(id));
+              if (findItem) {
+                findItem[this.objectMapping['checked']] = "true";
+              }
+            });
+          }
+          if (this._items && this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(item => {
+              _checkedItems.push(item);
+            });
+          }
+        }
+      }
+      else {
+        this.handleClear();
+      }
+      this._data = JSON.stringify(this._items);
+      this.itemsWidth = [];
+      if (this.checkboxes == true) {
+        this.value = String(_checkedItems);
+        this.handleTagControl2(_checkedItems);
+        this.checklist = _checkedItems;
+      }
+      else {
+        if (this.value != null) {
+          this.value = null;
+        }
+        this.checklist = [];
+      }
     }
   }
   async updateChecked(id = []) {
@@ -1024,12 +1084,8 @@ export class BcmSelect {
     };
     return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
       h("div", { class: container },
-        label && h("label", { class: "label size-1", onClick: () => this.handleOpen(false) },
-          " ",
-          label,
-          " ",
-          required && ('*'),
-          "  "),
+        label && h("div", null,
+          h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required })),
         h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 },
           h("span", { class: selectedText, title: this.selectText && (this.selectText) },
             (this.selectText && (this.selectText)),
@@ -1712,6 +1768,23 @@ export class BcmSelect {
       "attribute": "placement",
       "reflect": true,
       "defaultValue": "'bottom-start'"
+    },
+    "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/switch/switch.css

@@ -57,7 +57,6 @@
  */
 :host {
   display: inline-block;
-  width: 100%;
   margin: 0 0 8px 0;
 }
 

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

@@ -64,14 +64,10 @@ export class BcmSwitch {
       return (condition && size === 'medium');
     };
     const isMedium = size === 'medium';
-    const hostClasses = cs('switch', this.hidden ? 'hidden' : null);
+    const hostClasses = cs('bcm-switch', this.hidden ? 'hidden' : null);
     return (h(Host, { class: hostClasses },
-      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 })),
       h("label", { class: wrapperClass },
         isPermitted(inactiveText) && h("span", { class: "inactive-text size-1" }, inactiveText),
         h("div", { class: classes },
@@ -397,6 +393,23 @@ export class BcmSwitch {
       "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/textarea/textarea.css

@@ -206,6 +206,9 @@
 
 .caption-area {
   min-height: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .input-caption {
@@ -289,6 +292,6 @@
 .error .label {
   color: var(--bcm-color-red-6) !important;
 }
-.error .textarea-container textarea {
+.error .textarea-container {
   border: 1px solid var(--bcm-color-red-6) !important;
 }

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

@@ -6,6 +6,7 @@ export class BcmTextarea {
     this.textareaId = `textarea-${++id}`;
     this.valueLength = 0;
     this.noCaption = false;
+    this.captionType = 'default';
     this.rows = 1;
     this.size = 'medium';
     this.resize = 'vertical';
@@ -103,6 +104,7 @@ export class BcmTextarea {
       'disabled': disabled,
     });
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
+    const countClasses = cs('size-1', 'input-caption', 'caption-default');
     const textareaClasses = cs('size-' + size, {
       'size-3': size === 'large',
       'size-2': size === 'small' || size === 'medium',
@@ -111,18 +113,14 @@ export class BcmTextarea {
     const hostClasses = cs(this.hidden ? 'hidden' : null);
     return (h(Host, { class: hostClasses },
       h("div", { class: wrapperClasses },
-        label && h("label", { class: "label size-1", htmlFor: this.textareaId },
-          " ",
-          label,
-          " ",
-          required && ('*'),
-          " "),
+        label && h("div", null,
+          h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.textareaId })),
         h("div", { class: contanerClasses },
           h("textarea", { ref: el => (this.textarea = el), onInput: this.handleInput, onFocus: this.handleFocus, onChange: this.handleChange, onBlur: this.handleBlur, class: textareaClasses, id: this.textareaId, value: value, rows: rows, disabled: disabled, maxlength: maxLength, placeholder: placeholder }),
           clearable && (h("button", { class: "clear-button", onClick: this.handleClear },
             h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" })))),
         !noCaption || maxLength ? (h("div", { class: "caption-area" },
-          captionType == "error"
+          h("span", null, captionType == "error"
             ? h("span", { class: captionClasses },
               " ",
               captionError,
@@ -130,8 +128,8 @@ export class BcmTextarea {
             : caption && h("span", { class: captionClasses },
               " ",
               caption,
-              " "),
-          maxLength && h("span", { class: "count" },
+              " ")),
+          maxLength && h("span", { class: countClasses },
             " ",
             `${valueLength}/${maxLength}`,
             " "))) : null)));
@@ -197,7 +195,7 @@ export class BcmTextarea {
       "reflect": false,
       "defaultValue": "false"
     },
-    "caption": {
+    "captionError": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -211,10 +209,10 @@ export class BcmTextarea {
         "tags": [],
         "text": ""
       },
-      "attribute": "caption",
+      "attribute": "caption-error",
       "reflect": false
     },
-    "captionError": {
+    "placeholder": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -228,10 +226,10 @@ export class BcmTextarea {
         "tags": [],
         "text": ""
       },
-      "attribute": "caption-error",
+      "attribute": "placeholder",
       "reflect": false
     },
-    "placeholder": {
+    "caption": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -245,14 +243,14 @@ export class BcmTextarea {
         "tags": [],
         "text": ""
       },
-      "attribute": "placeholder",
+      "attribute": "caption",
       "reflect": false
     },
     "captionType": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'default' | 'primary' | 'success' | 'warning' | 'error'",
+        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
         "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
         "references": {}
       },
@@ -263,7 +261,8 @@ export class BcmTextarea {
         "text": ""
       },
       "attribute": "caption-type",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'default'"
     },
     "rows": {
       "type": "number",
@@ -439,6 +438,23 @@ export class BcmTextarea {
       "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 {

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

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

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

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

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

@@ -391,12 +391,8 @@ export class BcmColorPicker {
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
     return (h(Host, null,
       h("div", { class: classes, onClick: () => this.handleClick() },
-        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 })),
         h("div", { class: "input" },
           h("div", { class: "active-color" },
             h("div", { class: "color-thumb", style: { backgroundColor: this.value } })),
@@ -663,6 +659,23 @@ export class BcmColorPicker {
       "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 {

package/dist/collection/components/organism/datetime-picker/datetime-picker.js

@@ -124,7 +124,7 @@ export class BcmDatetimePicker {
     const errorObject1 = { isValid: false, value: this.valueText };
     const errorObject2 = { isValid: false, value: this.inputElement.value };
     if (!newValue) {
-      this.change.emit(errorObject2);
+      this.change.emit();
       return;
     }
     if (this.type !== Types.range && this.error) {

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

@@ -167,7 +167,7 @@ export class BcmForm {
     return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
   }
   isGroupComponent(item) {
-    return ['bcm-checkbox-group', 'bcm-radio-group'].includes(item.toLowerCase());
+    return ['bcm-checkbox-group'].includes(item.toLowerCase());
   }
   async userFormData() {
     this.formData = {};
@@ -199,8 +199,9 @@ export class BcmForm {
           }
         }
         else if (isGroupComponent) {
-          getChilds(input, "bcm-checkbox").forEach(element => {
-            if (element.required == true) {
+          const childsCheckbox = getChilds(input, "bcm-checkbox");
+          childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
+            if (element && element.required === true) {
               valid = validate.required(element.value);
               if (!valid['valid']) {
                 element.noCaption = false;
@@ -213,7 +214,7 @@ export class BcmForm {
                 element.captionType = "default";
               }
             }
-          });
+          }));
         }
         else {
           valid = validate.required(input.value);

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

@@ -289,6 +289,7 @@ export class BcmListbox {
         ? this.size = _config['size']
         : this.size = 'medium';
     }
+    this.searchSub = this.objectMapping['items'];
     if (_config['mapping']) {
       if (_config['mapping']['id']) {
         this.objectMapping['id'] = String(_config['mapping']['id']);
@@ -324,15 +325,14 @@ export class BcmListbox {
       if (_config['mapping']['selected']) {
         this.objectMapping['selected'] = _config['mapping']['selected'];
       }
-      if (this.treeview) {
-        if (_config['mapping']['items']) {
-          this.objectMapping['items'] = _config['mapping']['items'];
-          this.searchSub = this.objectMapping['items'];
-        }
-      }
-      else {
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
         this.searchSub = this.objectMapping['items'];
       }
+      // if ( this.treeview ) {
+      // }else{
+      //     this.searchSub = this.objectMapping['items']
+      // }
     }
     sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
     // forceUpdate(this.el)
@@ -581,7 +581,7 @@ export class BcmListbox {
     //         this.listboxChecked.emit(item[this.objectMapping['id']])
     //     }
     // }
-    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (item[this.objectMapping['checked']] === true && { checked: item[this.objectMapping['checked']] }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (item[this.objectMapping['selected']] === true && this.checkboxes == false && { selected: item[this.objectMapping['selected']] }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
+    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (Boolean(item[this.objectMapping['checked']]) === Boolean(true) && { checked: Boolean(item[this.objectMapping['checked']]) }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (Boolean(item[this.objectMapping['selected']]) === Boolean(true) && this.checkboxes == false && { selected: Boolean(item[this.objectMapping['selected']]) }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
   }
   /**
    * @desc
@@ -876,16 +876,9 @@ export class BcmListbox {
       customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
     }
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
-    const labelClasses = cs('size-1', 'label', {
-      'error': captionType == 'error' ? true : false
-    });
     return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id },
-      !innerComponent && label && h("label", { class: labelClasses },
-        " ",
-        label,
-        " ",
-        required && ('*'),
-        "  "),
+      !innerComponent && label && h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })),
       treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })),
       treeview == false && (h("div", { class: bcmListbox, style: customStyles },
         search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } },
@@ -1542,6 +1535,23 @@ export class BcmListbox {
       "attribute": "_internal_id",
       "reflect": true,
       "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "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/helper/color-helper.js

@@ -0,0 +1,33 @@
+import { ColorPalette } from "../global/variables/colors";
+import { extractColor } from "../utils/utils";
+export class ColorHelper {
+}
+ColorHelper.isHex = (str) => /^[A-F0-9]+$/i.test(str);
+ColorHelper.isRgb = (str) => /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.isRgba = (str) => /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.isHsl = (str) => /^hsl\((\d{1,3}),\s*(\d{1,3}%),\s*(\d{1,3}%)\)$/.test(str);
+ColorHelper.isHsla = (str) => /^hsla\((\d{1,3}),\s*(\d{1,3}%),\s*(\d{1,3}%),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.convertColorToHex = (color) => {
+  if (color) {
+    if (ColorHelper.isHex(color)) {
+      return color;
+    }
+    if (ColorHelper.isRgb(color)) {
+      const rgb = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+      return `#${(0x1000000 + (parseInt(rgb[1]) * 0x10000) + (parseInt(rgb[2]) * 0x100) + parseInt(rgb[3])).toString(16).substring(1)}`;
+    }
+    if (extractColor(ColorPalette, color)) {
+      return extractColor(ColorPalette, color);
+    }
+  }
+};
+ColorHelper.reverseColor = (color) => {
+  const hexColor = ColorHelper.convertColorToHex(color);
+  if (hexColor) {
+    const r = parseInt(hexColor.substring(1, 3), 16);
+    const g = parseInt(hexColor.substring(3, 5), 16);
+    const b = parseInt(hexColor.substring(5, 7), 16);
+    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+    return (yiq >= 200) ? '#000000' : '#FFFFFF';
+  }
+};