bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.2

package/dist/collection/global/variables/colors.js

@@ -0,0 +1,220 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export const ColorPalette = {
+  'black': '#000000',
+  'white': '#ffffff',
+  'prime-blue': {
+    1: '#F4FBFE',
+    2: '#D4E9F6',
+    3: '#B0D3EC',
+    4: '#8ABDE2',
+    5: '#65A8D9',
+    6: '#4293CF',
+    7: '#3679AB',
+    8: '#285C82',
+    9: '#194E75',
+    10: '#0E2739'
+  },
+  'grey': {
+    1: '#FFFFFF',
+    2: '#FAFAFA',
+    3: '#F5F5F5',
+    4: '#E8E8E8',
+    5: '#D9D9D9',
+    6: '#BFBFBF',
+    7: '#8C8C8C',
+    8: '#595959',
+    9: '#262626',
+    10: '#000000'
+  },
+  'blue': {
+    1: '#E6F7FF',
+    2: '#BAE7FF',
+    3: '#91D5FF',
+    4: '#69C0FF',
+    5: '#40A9FF',
+    6: '#1890FF',
+    7: '#096DD9',
+    8: '#0050B3',
+    9: '#003A8C',
+    10: '#002766'
+  },
+  'warmyellow': {
+    1: '#FFFBE6',
+    2: '#FFF1B8',
+    3: '#FFE58F',
+    4: '#FFD666',
+    5: '#FFC53D',
+    6: '#FAAD14',
+    7: '#D48806',
+    8: '#AD6800',
+    9: '#874D00',
+    10: '#613400'
+  },
+  'yellow': {
+    1: '#FEFFE6',
+    2: '#FFFFB8',
+    3: '#FFFB8F',
+    4: '#FFF566',
+    5: '#FFEC3D',
+    6: '#FADB14',
+    7: '#D4B106',
+    8: '#AD8B00',
+    9: '#876800',
+    10: '#614700'
+  },
+  'limegreen': {
+    1: '#FCFFE6',
+    2: '#F4FFB8',
+    3: '#EAFF8F',
+    4: '#D3F261',
+    5: '#BAE637',
+    6: '#A0D911',
+    7: '#7CB305',
+    8: '#5B8C00',
+    9: '#3F66',
+    10: '#254000'
+  },
+  'red': {
+    1: '#FFF1F0',
+    2: '#FFCCC7',
+    3: '#FFA39E',
+    4: '#FF7875',
+    5: '#FF4D4F',
+    6: '#F5222D',
+    7: '#CF1322',
+    8: '#A8071A',
+    9: '#820014',
+    10: '#5C0011'
+  },
+  'darkorange': {
+    1: '#FFF2E8',
+    2: '#FFD8BF',
+    3: '#FFBB96',
+    4: '#FF9C6E',
+    5: '#FF7A45',
+    6: '#FA541C',
+    7: '#D4380D',
+    8: '#AD2102',
+    9: '#871400',
+    10: '#610B00'
+  },
+  'orange': {
+    1: '#FFF7E6',
+    2: '#FFE7BA',
+    3: '#FFD591',
+    4: '#FFC096',
+    5: '#FFA940',
+    6: '#FA8C16',
+    7: '#D46B08',
+    8: '#AD4E00',
+    9: '#873800',
+    10: '#612500'
+  },
+  'green': {
+    1: '#F6FFED',
+    2: '#D9F7BE',
+    3: '#B7EB8F',
+    4: '#95DE64',
+    5: '#73D13D',
+    6: '#52C41A',
+    7: '#389E0D',
+    8: '#237804',
+    9: '#135200',
+    10: '#092B00'
+  },
+  'turquosie': {
+    1: '#E6FFFB',
+    2: '#B5F5EC',
+    3: '#87E8DE',
+    4: '#5CDBD3',
+    5: '#36CFC9',
+    6: '#13C2C2',
+    7: '#08979C',
+    8: '#006D75',
+    9: '#00474F',
+    10: '#002329'
+  },
+  'cobaltblue': {
+    1: '#F0F5FF',
+    2: '#D6E4FF',
+    3: '#ADC6FF',
+    4: '#85A5FF',
+    5: '#597EF7',
+    6: '#2F54EB',
+    7: '#1D39C4',
+    8: '#10239E',
+    9: '#061178',
+    10: '#030852'
+  },
+  'magenta': {
+    1: '#FFF0F6',
+    2: '#FFD6E7',
+    3: '#FFADD2',
+    4: '#FF85C0',
+    5: '#F759AB',
+    6: '#EB2F96',
+    7: '#C41D7F',
+    8: '#9E1068',
+    9: '#780650',
+    10: '#520339'
+  },
+  'purple': {
+    1: '#F9F0FF',
+    2: '#EFDBFF',
+    3: '#D3ADF7',
+    4: '#B37FEB',
+    5: '#9254DE',
+    6: '#722ED1',
+    7: '#531DAB',
+    8: '#391085',
+    9: '#22075E',
+    10: '#120338'
+  },
+  'bc-red': {
+    1: '#FCF5F5',
+    2: '#F3C4BF',
+    3: '#EB998F',
+    4: '#E46E60',
+    5: '#CC4C41',
+    6: '#AA3527',
+    7: '#8D2D20',
+    8: '#6F241A',
+    9: '#4A1912'
+  },
+  'bc-orange': {
+    1: '#FEF9F4',
+    2: '#F9DDC0',
+    3: '#F7C494',
+    4: '#F4AD69',
+    5: '#F1963F',
+    6: '#D38236',
+    7: '#B26C2C',
+    8: '#905622',
+    9: '#6B3E17'
+  },
+  'bc-green': {
+    1: '#F8FCF6',
+    2: '#DBE8CA',
+    3: '#C0D6A2',
+    4: '#A6C57B',
+    5: '#8BB453',
+    6: '#7C9F4B',
+    7: '#6A8740',
+    8: '#586E36',
+    9: '#45532B'
+  },
+  'bc-blue': {
+    1: '#F4FBFE',
+    2: '#C5DEF0',
+    3: '#99C4E5',
+    4: '#6DACDA',
+    5: '#4293CF',
+    6: '#3A7FB3',
+    7: '#316892',
+    8: '#275071',
+    9: '#1D374F'
+  }
+};

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

@@ -0,0 +1,81 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { ColorPalette } from '../global/variables/colors';
+import { extractColor } from '../utils/utils';
+import tailwindColor from 'tailwindcss/colors';
+export class ColorHelper {
+}
+ColorHelper.isHex = (str) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/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.isVariable = (str) => /^var\((.*)\)$/.test(str);
+ColorHelper.extractVariable = (str) => str.match(/^var\((.*)\)$/)[1];
+ColorHelper.convertColorToHex = (color) => {
+  if (color) {
+    if (ColorHelper.isVariable(color)) {
+      const extractColor = ColorHelper.extractVariable(color);
+      return getComputedStyle(document.documentElement).getPropertyValue(extractColor);
+    }
+    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) => {
+  let hexColor = ColorHelper.convertColorToHex(color).trim();
+  if (hexColor) {
+    if (hexColor.length === 4) {
+      hexColor = `#${hexColor[1]}${hexColor[1]}${hexColor[2]}${hexColor[2]}${hexColor[3]}${hexColor[3]}`;
+    }
+    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 ? '#475569' : '#f8fafc';
+  }
+};
+ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
+ColorHelper.getTwColorToHex = (colorName) => ColorHelper.getTwColor(colorName) || tailwindColor['blue']['500'];
+ColorHelper.getTwColor = (colorName, checkTw = false) => {
+  if (tailwindColor[colorName]) {
+    return tailwindColor[colorName];
+  }
+  const splitted = colorName.split('-');
+  const grade = splitted[splitted.length - 1];
+  const swatch = splitted.slice(0, splitted.length - 1).join('-');
+  if (tailwindColor[swatch] && tailwindColor[swatch][grade]) {
+    return checkTw ? 1 : tailwindColor[swatch][grade];
+  }
+  else if (tailwindColor[swatch]) {
+    return checkTw ? 2 : tailwindColor[swatch];
+  }
+  else {
+    console.warn('Color not found in tailwind colors: ' + colorName);
+    return 0;
+  }
+};
+// slate => slate-500
+// slate-700 => slate-700
+ColorHelper.twColor = (colorName, tone = '500') => {
+  const newColor = colorName && colorName.indexOf('-') === -1 ? `${colorName}-${tone}` : colorName;
+  const getTw = ColorHelper.getTwColor(newColor, true);
+  if (getTw === 1) {
+    return newColor;
+  }
+  if (getTw === 2) {
+    return colorName;
+  }
+  return 'blue-500';
+};
+ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));

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

@@ -0,0 +1,7 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export class DateTimeHelper {
+}
+DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);

package/dist/collection/helper/generate.js

@@ -0,0 +1,168 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { StatusProps } from '../components/molecules/alert/types';
+// @ts-ignore
+import { version } from '../../package.json';
+import { Build } from '@stencil/core';
+import snq from 'snq';
+const allowedDomains = ['localhost', 'beta-regression.bromcomcloud.com', 'beta-scrum.bromcomcloud.com', 'beta-kanban.bromcomcloud.com'];
+const isAllowedDomain = () => {
+  const hostname = window.location.hostname;
+  return allowedDomains.includes(hostname);
+};
+if (isAllowedDomain()) {
+  console.log(`%cbromcom ui%c version: ${version}-${Build.isDev ? 'd' : 'p'} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
+}
+export class Generate {
+}
+Generate.UID = (prefix = 'bcm') => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
+Generate.getIconAttrWithStatusType = (status, loading = false) => {
+  if (loading)
+    return { icon: 'far fa-spinner-third fa-spin' };
+  switch (status) {
+    case StatusProps.info:
+      return { icon: 'far fa-info-circle' };
+    case StatusProps.error:
+      return { icon: 'far fa-times-circle' };
+    case StatusProps.warning:
+      return { icon: 'far fa-exclamation-circle' };
+    case StatusProps.success:
+      return { icon: 'far fa-check-circle' };
+  }
+};
+Generate.createComponent = (el, props, area = 'append-area') => {
+  let container = area ? document.querySelector(area) : document.body;
+  if (area && !container) {
+    container = document.createElement('div');
+    container.id = 'append-area';
+    document.body.appendChild(container);
+    container.style.visibility = 'hidden';
+    container.style.opacity = '0';
+  }
+  let element = document.getElementById(props.id);
+  if (!element) {
+    element = document.createElement(el);
+  }
+  // debugger;
+  Object.keys(props).forEach(key => {
+    element[key] = props[key];
+  });
+  container.appendChild(element);
+  return element;
+};
+Generate.createElement = (tag = 'div', props) => {
+  let element = document.getElementById(props.id);
+  if (!element) {
+    element = document.createElement(tag);
+  }
+  Object.keys(props).forEach(key => {
+    if (key == 'innerHTML') {
+      element[key] = props[key];
+    }
+    else {
+      element.setAttribute(key, props[key]);
+    }
+  });
+  document.body.appendChild(element);
+  return element;
+};
+Generate.debounceInput = (func, wait, immediate, callBack) => {
+  let timeout;
+  return function () {
+    let context = this, args = arguments;
+    if (callBack)
+      callBack.apply(context, args);
+    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);
+  }, []);
+};
+Generate.reverseNodeList = node_list => {
+  let arr = [];
+  for (let i = node_list.length - 1; i >= 0; i--) {
+    arr.push(node_list[i]);
+  }
+  return arr;
+};
+Generate.findEventPathWithKey = (event, key, items) => {
+  items = Array.isArray(items) ? items : [items];
+  let path = event.composedPath() || event.path;
+  if (path) {
+    return path.filter((element) => items.includes(element[key]))[0] !== undefined;
+  }
+};
+Generate.findEventPathHasAttribute = (event, key) => {
+  let path = event.composedPath() || event.path;
+  if (path) {
+    return snq(() => !!path.find((element) => element.hasAttribute(key)), false);
+  }
+};
+Generate.findEventTarget = (event, items) => {
+  items = Array.isArray(items) ? items : [items];
+  let target = event.target || event.srcElement;
+  if (target) {
+    return items.includes(target);
+  }
+};
+Generate.findEventPathWithNodeName = (event, nodeName) => {
+  let path = event.composedPath() || event.path;
+  if (path) {
+    return path.filter((element) => element.nodeName === nodeName)[0];
+  }
+};
+Generate.findEventPath = (event, items) => {
+  items = Array.isArray(items) ? items : [items];
+  let path = event.composedPath() || event.path;
+  if (path) {
+    return path.filter((element) => items.includes(element))[0] !== undefined;
+  }
+};
+Generate.objectIsEmpty = obj => Object.keys(obj).length === 0 && obj.constructor === Object;
+Generate.convertIdsToNestedData = (ids, checklist) => {
+  let result = [];
+  let found = [];
+  checklist.forEach(item => {
+    if (ids && ids.indexOf(item.id.toString()) > -1) {
+      result.push(item);
+    }
+    else {
+      if (item.items) {
+        found = Generate.convertIdsToNestedData(ids, item.items);
+        if (found.length > 0) {
+          item.items = found;
+          result.push(item);
+        }
+      }
+    }
+  });
+  return result;
+};
+//nodelist to array
+Generate.nodeListToArray = nodeList => {
+  return Array.prototype.slice.call(nodeList);
+};
+Generate.setAttributes = (item, obj) => {
+  Object.keys(obj).forEach(key => {
+    item.setAttribute(key, obj[key]);
+  });
+};
+Generate.computedStyle = (element, property) => window.getComputedStyle(element, null).getPropertyValue(property);
+Generate.getAncestor = (el, selector) => {
+  while ((el = el.parentElement) && !el.matches(selector))
+    ;
+  return el;
+};

package/dist/collection/helper/index.js

@@ -0,0 +1,12 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export * from './color-helper';
+export * from './datetime-helper';
+export * from './generate';
+export * from './number-helper';
+export * from './string-helper';
+export * from './validators';
+export * from './tooltip-helper';
+export * from './popover-helper';

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

@@ -0,0 +1,15 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+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);
+NumberHelper.toNumber = (str) => snq(() => Number(str.replace(/[^0-9.]/g, '')));

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

@@ -0,0 +1,106 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { FloatingUI } from '@bcm/utils';
+import { ColorHelper, Generate, StringHelper } from '@bcm/helpers';
+export class Popover {
+  constructor({ content, message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
+    this.bgColor = () => ColorHelper.twColor(this.color, 700);
+    this.exepcitonColors = {
+      white: 'slate-300',
+      black: 'slate-700',
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.init = () => {
+      console.log(this.content, this.message);
+      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
+            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ''}
+            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ''}
+        </div>`;
+      this.el = Generate.createElement('div', {
+        'id': `${this.targetId}-popover-box`,
+        'class': `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
+            tw-shadow`,
+        'role': 'popover',
+        'aria-hidden': 'true',
+        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        'innerHTML': inner,
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener('resize', this.calculatePosition.bind(this));
+      window.addEventListener('scroll', this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case 'click':
+            this.target().addEventListener('click', this.toggle.bind(this));
+            break;
+          case 'hover':
+            this.target().addEventListener('mouseenter', this.show.bind(this));
+            this.target().addEventListener('mouseleave', this.hide.bind(this));
+            break;
+          case 'focus':
+            this.target().addEventListener('focus', this.show.bind(this), true);
+            this.target().addEventListener('blur', this.hide.bind(this), true);
+            break;
+          default:
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-${this.bgColor()}`,
+        });
+      }
+    };
+    this.show = () => {
+      if (this.message) {
+        this.init();
+        this.calculatePosition();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.content = content;
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.trigger = trigger;
+    this.id = targetId + '-popover-box';
+  }
+}

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

@@ -0,0 +1,65 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import Bcm from '../models/bcm';
+import slugify from 'slugify';
+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 && 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 && str.indexOf(search) !== -1;
+StringHelper.textLimitter = (str, limit, newLine = false) => (str && str.length > limit ? `${str.substring(0, limit)}...` : str) + `${newLine ? ' <br /> ' : ''}`;
+StringHelper.slugify = (str) => slugify(str, {
+  replacement: ' ',
+  remove: undefined,
+  lower: true,
+  strict: false,
+  locale: 'vi',
+  trim: false, // trim leading and trailing replacement chars, defaults to `true`
+});
+StringHelper.highlight = (str, search) => {
+  const searchText = search;
+  const regex = new RegExp(searchText, 'gi');
+  let text = str;
+  text = text.replace(/(<mark>|<\/mark>)/gim, '');
+  const newText = text.replace(regex, '<mark>$&</mark>');
+  return newText;
+};
+StringHelper.templateParser = (str, data) => str.replace(/\{{(\w+)\}}/g, (_, key) => data[key] || '');
+StringHelper.parseStringToBoolean = (str) => str === 'true';
+StringHelper.elementBooleanCheck = (obj) => {
+  const item = JSON.parse(JSON.stringify(obj));
+  if (item != undefined) {
+    if (item.length > 0) {
+      if (item == 'true')
+        return true;
+      if (item == 'false')
+        return false;
+    }
+    return true;
+  }
+  return false;
+};
+StringHelper.htmlEntities = (str) => String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');