bromcom-ui 2.9.0-rc.1 → 2.9.0-rc.10

package/dist/components/bcm.js

@@ -435,6 +435,7 @@ var Bcm;
     TriggerType["hover"] = "hover";
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
+    TriggerType["custom"] = "custom";
   })(Bcm.TriggerType || (Bcm.TriggerType = {}));
   (function (ListType) {
     ListType["listbox"] = "listbox";

package/dist/components/color-helper.js

@@ -7,6 +7,26 @@ import { e as extractColor } from './utils.js';
 import { c as colors } from './colors2.js';
 
 class ColorHelper {
+  /**
+   * @param color - color string in format of `colorName-tone` or `colorName` (default tone is 600)
+   * @return `{ tone: number, colorName: string }`
+   * @description
+   * Parse color string to get color name and tone
+   * @example
+   * parseColor("red-500") // { tone: 500, colorName: "red" }
+   * parseColor("red") // { tone: 600, colorName: "red" }
+   * parseColor(null) // { tone: null, colorName: null }
+   */
+  static parseColor(color, defaultTone = 600) {
+    if (!color)
+      return { tone: null, colorName: null };
+    const [colorName, tone] = color.split("-");
+    const parsedTone = tone ? parseInt(tone) : defaultTone;
+    return {
+      tone: parsedTone,
+      colorName,
+    };
+  }
 }
 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);
@@ -43,7 +63,7 @@ ColorHelper.reverseColor = (color) => {
     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';
+    return yiq >= 200 ? '#334155' : '#fff';
   }
 };
 ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
@@ -80,5 +100,11 @@ ColorHelper.twColor = (colorName, tone = '500') => {
   return 'blue-500';
 };
 ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));
+/**
+ * @param object
+ * @return string
+ * @description Convert style object to string
+ */
+ColorHelper.generateStyleString = (obj) => Object.keys(obj).reduce((acc, key) => { return `${acc}${key}:${obj[key]};`; }, "");
 
 export { ColorHelper as C };

package/dist/components/colors2.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { c as createCommonjsModule, b as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 
 var x=String;
 var create=function() {return {isColorSupported:false,reset:x,bold:x,dim:x,italic:x,underline:x,inverse:x,hidden:x,strikethrough:x,black:x,red:x,green:x,yellow:x,blue:x,magenta:x,cyan:x,white:x,gray:x,bgBlack:x,bgRed:x,bgGreen:x,bgYellow:x,bgBlue:x,bgMagenta:x,bgCyan:x,bgWhite:x}};

package/dist/components/datetime-picker.js

@@ -1017,6 +1017,20 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.setDataFromText(text);
     return text;
   }
+  parseDate(input) {
+    var parts = input.split('/');
+    var day = parseInt(parts[0], 10);
+    var month = parseInt(parts[1], 10) - 1;
+    var year = parseInt(parts[2], 10);
+    if (isNaN(day) || isNaN(month) || isNaN(year)) {
+      return 'invalid date';
+    }
+    var date = new Date(year, month, day);
+    if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+      return 'invalid date';
+    }
+    return date;
+  }
   /**
    * @desc
    * @param dateStr
@@ -1029,7 +1043,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
     const date = new Date(sectionDate);
     const date2 = new Date(sectionDate2);
-    const dateCheck = date.toString().toLowerCase() !== 'invalid date';
+    const dateCheck = date.toString().toLowerCase() !== 'invalid date' && this.parseDate(dateStr) !== 'invalid date';
     const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
     const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
     const regDateCheck = regDate.test(sectionDate);

package/dist/components/generate.js

@@ -5,6 +5,8 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
+const version = "2.9.0-rc.10";
+
 /**
  * 'status' prop predefined values
  */
@@ -25,8 +27,6 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.9.0-rc.1";
-
 function snq(callback, defaultValue) {
     try {
         var result = callback();
@@ -65,15 +65,65 @@ if (isAllowedDomain()) {
   }
 })();
 class Generate {
-  static getTwColor(color, variable = "--bcm-color-default") {
+  /**
+      const dc = Generate.getTwColor({
+          color: "blue",
+          tones: {
+              200: ["text"],
+              700: ["bg", "border"],
+              800: ["bg-hover", "border-hover"],
+          },
+          variable: "--bcm-avatar",
+      });
+
+      return {
+          --bcm-avatar-text: --tw-blue-200;
+          --bcm-avatar-bg: --tw-blue-700;
+          --bcm-avatar-bg-hover: --tw-blue-800;
+          --bcm-avatar-border: --tw-blue-700;
+          --bcm-avatar-border-hover: --tw-blue-800;
+      }
+      
+   */
+  static getTwColor(args) {
+    const { color, variable, tones } = (args = Object.assign({
+      variable: "--bcm-color-default",
+      defaultTone: "600",
+      tones: {
+        50: {},
+        100: {},
+        200: {},
+        300: {},
+        400: {},
+        500: {},
+        600: {},
+        700: {},
+        800: {},
+        900: {},
+        950: {},
+      },
+    }, args));
     if (!color || !colors[color]) {
       return false;
     }
-    const colorObj = colors[color];
     const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
+    if (typeof colors[color] === "string") {
+      result[variable] = colors[color];
+      return result;
     }
+    const toneList = Array.isArray(tones) ? tones : Object.keys(tones);
+    toneList.forEach(tone => {
+      if (colors[color][tone]) {
+        if (Array.isArray(tones[tone])) {
+          tones[tone].forEach(item => {
+            result[`${variable}-${item}`] = colors[color][tone];
+          });
+        }
+        else {
+          result[`${variable}-${tone}`] = colors[color][tone];
+        }
+      }
+    });
     return result;
   }
 }
@@ -292,4 +342,4 @@ Generate.findParentElement = (element, selector) => {
   }
 };
 
-export { Generate as G, StatusProps as S, TypeProps as T, snq as s };
+export { Generate as G, StatusProps as S, TypeProps as T, snq as s, version as v };

package/dist/components/icon.js

@@ -2,10 +2,13 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
 
 const iconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
 
+const customIconList = {
+  "message-bot": "message-bot.svg",
+};
 const BcmIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -13,10 +16,19 @@ const BcmIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hidden = false;
     this.icon = undefined;
   }
+  getIcon() {
+    const { icon } = this;
+    if (icon in customIconList) {
+      const _icon = getAssetPath("./static/" + customIconList[icon]);
+      return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    }
+    return h("i", { class: `${icon}` });
+  }
   render() {
-    const { icon, hidden } = this;
-    return (h(Host, { class: `bcm-icon fa ${hidden ? 'hidden' : ''}` }, h("i", { class: `${icon}` })));
+    const { /*icon,*/ hidden } = this;
+    return h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
   }
+  static get assetsDirs() { return ["static"]; }
   get el() { return this; }
   static get style() { return iconCss; }
 }, [0, "bcm-icon", {

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export { BcmColorInput as BcmColorInput } from '../types/components/molecules/co
 export { BcmColorful as BcmColorful } from '../types/components/third-parts/colorful/colorful';
 export { BcmColorPicker as BcmColorpicker } from '../types/components/other_deprecated/colorpicker/colorpicker';
 export { BcmContent as BcmContent } from '../types/components/other/content/content';
+export { BcmDate as BcmDate } from '../types/components/third-parts/rc-picker/date';
 export { BcmDatePicker as BcmDatePicker } from '../types/components/organism/date-picker/date-picker';
 export { BcmDatetimePicker as BcmDatetimePicker } from '../types/components/organism/datetime-picker/datetime-picker';
 export { BcmDefault as BcmDefault } from '../types/components/other/default/default';
@@ -36,6 +37,7 @@ export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/
 export { BcmIcon as BcmIcon } from '../types/components/atoms/icon/icon';
 export { BcmInput as BcmInput } from '../types/components/molecules/input/input';
 export { BcmInputCustom as BcmInputCustom } from '../types/components/other/input-custom/input-custom';
+export { InputDropdown as BcmInputDropdown } from '../types/components/molecules/input-dropdown/input-dropdown';
 export { BcmItem as BcmItem } from '../types/components/molecules/item/item';
 export { BcmItems as BcmItems } from '../types/components/molecules/items/items';
 export { BcmLabel as BcmLabel } from '../types/components/atoms/label/label';
@@ -64,6 +66,7 @@ export { BcmRadio as BcmRadio } from '../types/components/molecules/radio/radio'
 export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/radio-group';
 export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
 export { BcmRcOverflow as BcmRcOverflow } from '../types/components/third-parts/rc-overflow/rc-overflow';
+export { BcmRcPicker as BcmRcPicker } from '../types/components/third-parts/rc-picker/rc-picker';
 export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
 export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
 export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';
@@ -80,7 +83,7 @@ export { BcmTabGroup as BcmTabGroup } from '../types/components/molecules/tab-gr
 export { BcmTabItem as BcmTabItem } from '../types/components/molecules/tab-group/tab-item';
 export { BcmTabItemHeader as BcmTabItemHeader } from '../types/components/molecules/tab-group/tab-item-header';
 export { BcmTabPane as BcmTabPane } from '../types/components/other_deprecated/tabs/tab-pane';
-export { BcmTable as BcmTable } from '../types/components/other/data-table/table';
+export { BcmTable as BcmTable } from '../types/components/third-parts/table/table';
 export { BcmTabs as BcmTabs } from '../types/components/other_deprecated/tabs/tabs';
 export { BcmTabsContent as BcmTabsContent } from '../types/components/other_deprecated/tabs/tabs-content';
 export { BcmTag as BcmTag } from '../types/components/other_deprecated/tag/tag';

package/dist/components/index.js

@@ -2,7 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
+import { Env } from '@stencil/core/internal/client';
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+import { v as version } from './generate.js';
+import { L as LicenseManager } from './bcm-table.js';
+export { BcmTable, defineCustomElement as defineCustomElementBcmTable } from './bcm-table.js';
 export { BcmAccordion, defineCustomElement as defineCustomElementBcmAccordion } from './bcm-accordion.js';
 export { BcmAlert, defineCustomElement as defineCustomElementBcmAlert } from './bcm-alert.js';
 export { BcmAttendance, defineCustomElement as defineCustomElementBcmAttendance } from './bcm-attendance.js';
@@ -25,6 +29,7 @@ export { BcmColorInput, defineCustomElement as defineCustomElementBcmColorInput
 export { BcmColorful, defineCustomElement as defineCustomElementBcmColorful } from './bcm-colorful.js';
 export { BcmColorpicker, defineCustomElement as defineCustomElementBcmColorpicker } from './bcm-colorpicker.js';
 export { BcmContent, defineCustomElement as defineCustomElementBcmContent } from './bcm-content.js';
+export { BcmDate, defineCustomElement as defineCustomElementBcmDate } from './bcm-date.js';
 export { BcmDatePicker, defineCustomElement as defineCustomElementBcmDatePicker } from './bcm-date-picker.js';
 export { BcmDatetimePicker, defineCustomElement as defineCustomElementBcmDatetimePicker } from './bcm-datetime-picker.js';
 export { BcmDefault, defineCustomElement as defineCustomElementBcmDefault } from './bcm-default.js';
@@ -40,6 +45,7 @@ export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup }
 export { BcmIcon, defineCustomElement as defineCustomElementBcmIcon } from './bcm-icon.js';
 export { BcmInput, defineCustomElement as defineCustomElementBcmInput } from './bcm-input.js';
 export { BcmInputCustom, defineCustomElement as defineCustomElementBcmInputCustom } from './bcm-input-custom.js';
+export { BcmInputDropdown, defineCustomElement as defineCustomElementBcmInputDropdown } from './bcm-input-dropdown.js';
 export { BcmItem, defineCustomElement as defineCustomElementBcmItem } from './bcm-item.js';
 export { BcmItems, defineCustomElement as defineCustomElementBcmItems } from './bcm-items.js';
 export { BcmLabel, defineCustomElement as defineCustomElementBcmLabel } from './bcm-label.js';
@@ -68,6 +74,7 @@ export { BcmRadio, defineCustomElement as defineCustomElementBcmRadio } from './
 export { BcmRadioGroup, defineCustomElement as defineCustomElementBcmRadioGroup } from './bcm-radio-group.js';
 export { BcmRange, defineCustomElement as defineCustomElementBcmRange } from './bcm-range.js';
 export { BcmRcOverflow, defineCustomElement as defineCustomElementBcmRcOverflow } from './bcm-rc-overflow.js';
+export { BcmRcPicker, defineCustomElement as defineCustomElementBcmRcPicker } from './bcm-rc-picker.js';
 export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
 export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
 export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';
@@ -84,7 +91,6 @@ export { BcmTabGroup, defineCustomElement as defineCustomElementBcmTabGroup } fr
 export { BcmTabItem, defineCustomElement as defineCustomElementBcmTabItem } from './bcm-tab-item.js';
 export { BcmTabItemHeader, defineCustomElement as defineCustomElementBcmTabItemHeader } from './bcm-tab-item-header.js';
 export { BcmTabPane, defineCustomElement as defineCustomElementBcmTabPane } from './bcm-tab-pane.js';
-export { BcmTable, defineCustomElement as defineCustomElementBcmTable } from './bcm-table.js';
 export { BcmTabs, defineCustomElement as defineCustomElementBcmTabs } from './bcm-tabs.js';
 export { BcmTabsContent, defineCustomElement as defineCustomElementBcmTabsContent } from './bcm-tabs-content.js';
 export { BcmTag, defineCustomElement as defineCustomElementBcmTag } from './bcm-tag.js';
@@ -102,12 +108,20 @@ export { BcmTypography, defineCustomElement as defineCustomElementBcmTypography
 export { OldBcmPopover, defineCustomElement as defineCustomElementOldBcmPopover } from './old-bcm-popover.js';
 export { OldBcmPopoverBox, defineCustomElement as defineCustomElementOldBcmPopoverBox } from './old-bcm-popover-box.js';
 
+window.bcm = (function () {
+  return {
+    version: version,
+  };
+})();
 function addHeadScript(obj) {
   const head = document.head;
-  const script = document.createElement('script');
+  const script = document.createElement("script");
   Object.keys(obj).forEach(key => {
     script[key] = obj[key];
   });
   head.appendChild(script);
 }
-addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
+addHeadScript({ src: "https://kit.fontawesome.com/5e86bea963.js", crossOrigin: "anonymous" });
+(() => {
+  LicenseManager.setLicenseKey(Env["AG_GRID_LICENSE_KEY"]);
+})();

package/dist/components/index3.js

@@ -151,6 +151,10 @@ var react = createCommonjsModule(function (module) {
 }
 });
 
+const React = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), react, {
+	'default': react
+}));
+
 var scheduler_production_min = createCommonjsModule(function (module, exports) {
 var f,g,h,k,l;
 if("undefined"===typeof window||"function"!==typeof MessageChannel){var p=null,q=null,t=function(){if(null!==p)try{var a=exports.unstable_now();p(!0,a);p=null;}catch(b){throw setTimeout(t,0),b;}},u=Date.now();exports.unstable_now=function(){return Date.now()-u};f=function(a){null!==p?setTimeout(f,0,a):(p=a,setTimeout(t,0));};g=function(a,b){q=setTimeout(a,b);};h=function(){clearTimeout(q);};k=function(){return !1};l=exports.unstable_forceFrameRate=function(){};}else {var w=window.performance,x=window.Date,
@@ -534,4 +538,4 @@ function checkDCE() {
 }
 });
 
-export { reactDom as a, react as r };
+export { React as R, reactDom as a, react as r };

package/dist/components/input.js

@@ -248,20 +248,20 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validationRange() {
     const { min, max, value } = this;
-    if (value) {
-      if (min && max) {
+    if (value !== undefined) {
+      if ((min !== undefined) && (max !== undefined)) {
         if (value < min || value > max) {
           this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
           return false;
         }
       }
-      else if (min) {
+      else if (min !== undefined) {
         if (value < min) {
           this.setCaption(StringHelper.getMessage('min', [min]), "error");
           return false;
         }
       }
-      else if (max) {
+      else if (max !== undefined) {
         if (value > max) {
           this.setCaption(StringHelper.getMessage('max', [max]), "error");
           return false;

package/dist/components/linked.js

@@ -41,6 +41,17 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return null;
     }
   }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
   dismissEvent() {
     document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
   }
@@ -111,6 +122,7 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   async show(wait = true) {
     wait && (await delay(50));
+    this.detectClone();
     const target = this.target();
     if (target) {
       const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
@@ -141,7 +153,7 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   clickListener(e) {
     if (!this.target())
       return;
-    if (this.trigger === Bcm.TriggerType.hover)
+    if (this.trigger === Bcm.TriggerType.hover || this.trigger === Bcm.TriggerType.custom)
       return;
     const isTarget = Generate.findEventPath(e, this.target());
     const isSelf = Generate.findEventPath(e, this.el);

package/dist/components/menu.js

@@ -109,6 +109,7 @@ const BcmMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       return (h("a", { id: 'bcm-menu__item-' + this._id + '-' + item.id, onMouseEnter: () => this.collapse && this.getTooltip(item.id, item.text).show(), onMouseLeave: () => this.collapse && this.getTooltip(item.id, item.text).hide(), key: index, href: !item.disabled ? item.link || 'javascript:void(0)' : 'javascript:void(0)', tabindex: item.disabled ? '-1' : '0', class: classnames('bcm-menu__item', {
           'bcm-menu__item--is-sub': subItems && item.isOpen,
+          'hidden tw-hidden': item.hidden,
         }) }, h("span", { class: classnames('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
           'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
           'bcm-menu__item-link--disabled': item.disabled,