bromcom-ui 2.3.57 → 2.3.58

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/select/select.js

@@ -1084,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)),
@@ -1772,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.js

@@ -113,12 +113,8 @@ 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 },
@@ -442,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/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)
@@ -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';
+  }
+};

package/dist/collection/helper/generate.js

@@ -0,0 +1,47 @@
+import { StatusProps } from "../components/molecules/alert/types";
+export class Generate {
+}
+Generate.UID = () => Math.random().toString(36).substr(2, 9);
+Generate.getIconAttrWithStatusType = (status, loading = false) => {
+  if (loading)
+    return { icon: 'loading', color: 'blue-6' };
+  switch (status) {
+    case StatusProps.info:
+      return { color: 'blue-6', icon: 'info-circle' };
+    case StatusProps.error:
+      return { color: 'red-6', icon: 'close-circle' };
+    case StatusProps.warning:
+      return { color: 'warmyellow-6', icon: 'exclamation-circle' };
+    case StatusProps.success:
+      return { color: 'green-6', icon: 'check-circle' };
+  }
+};
+Generate.createComponent = (element, props) => {
+  let box = document.createElement(element);
+  Object.keys(props).forEach(key => {
+    box[key] = props[key];
+  });
+  document.body.appendChild(box);
+  return box;
+};
+Generate.debounceInput = (func, wait, immediate) => {
+  let timeout;
+  return function () {
+    let context = this, args = arguments;
+    let later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+};
+Generate.flatArray = (arr) => {
+  return arr.reduce((acc, val) => {
+    return acc.concat(Array.isArray(val) ? Generate.flatArray(val) : val);
+  }, []);
+};

package/dist/collection/helper/number-helper.js

@@ -0,0 +1,10 @@
+import snq from "snq";
+export class NumberHelper {
+}
+NumberHelper.isNumber = (str) => snq(() => /^[0-9]+$/i.test(str));
+NumberHelper.convertToNumber = (str) => snq(() => Number(str));
+NumberHelper.replaceNumber = (str) => snq(() => str.replace(/[^0-9]/g, ''));
+NumberHelper.replaceFloat = (str) => snq(() => str.replace(/[^0-9.]/g, ''));
+NumberHelper.toFixed = (num, fixed) => snq(() => num.toFixed(fixed));
+NumberHelper.parseFloatFixed = (str, fixed) => snq(() => parseFloat(NumberHelper.replaceFloat(str)).toFixed(fixed));
+NumberHelper.getDecimalLength = (str) => snq(() => str.split('.')[1] ? str.split('.')[1].length : 0);

package/dist/collection/helper/string-helper.js

@@ -0,0 +1,21 @@
+import Bcm from "../models/bcm";
+export class StringHelper {
+}
+StringHelper.lowercase = (str) => str.toLowerCase();
+StringHelper.uppercase = (str) => str.toUpperCase();
+StringHelper.capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+StringHelper.camelCase = (str) => str.replace(/\s(.)/g, function ($1) { return $1.toUpperCase(); }).replace(/\s/g, '');
+StringHelper.kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+StringHelper.snakeCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
+StringHelper.titleCase = (str) => str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
+StringHelper.trim = (str) => str.trim();
+StringHelper.trimLeft = (str) => str.trimLeft();
+StringHelper.trimRight = (str) => str.trimRight();
+StringHelper.trimAll = (str) => str.trim().replace(/\s+/g, ' ');
+StringHelper.replace = (str, search, replace) => str.replace(search, replace);
+StringHelper.remove = (str, search) => str.replace(search, '');
+StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
+StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => typeof args[number] != 'undefined' ? args[number] : match);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(Bcm.FormErrorMessages[type], args);
+StringHelper.split = (str, separator) => str.split(separator);
+StringHelper.textContains = (str, search) => str.indexOf(search) !== -1;

package/dist/collection/helper/validators.js

@@ -0,0 +1,21 @@
+export class Validators {
+}
+Validators.isEmailValid = (str) => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
+Validators.isUrlValid = (str) => /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/i.test(str);
+Validators.isNumberValid = (str) => /^\d+$/.test(str);
+Validators.isNumberFloatValid = (str) => /^\d+(\.\d+)?$/.test(str);
+Validators.isPhoneValid = (str) => /^(?=.*[0-9])[- +()0-9]+$/.test(str);
+Validators.isValidate = (str, type) => {
+  switch (type) {
+    case 'email':
+      return Validators.isEmailValid(str);
+    case 'url':
+      return Validators.isUrlValid(str);
+    case 'number':
+      return Validators.isNumberValid(str) || Validators.isNumberFloatValid(str);
+    case 'phone':
+      return Validators.isPhoneValid(str);
+    default:
+      return true;
+  }
+};

package/dist/collection/models/bcm-types.js

@@ -0,0 +1 @@
+export {};