bromcom-ui 2.8.0-rc.10-d → 2.8.0-rc.10-e

package/dist/collection/helper/generate.js

@@ -2,80 +2,44 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { StatusProps } from "../components/molecules/alert/types";
+import { StatusProps } from '../components/molecules/alert/types';
 // @ts-ignore
-import { version } from "../../package.json";
-import { Build } from "@stencil/core";
-import snq from "snq";
-import colors from 'tailwindcss/colors';
-const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
+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;`);
+  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;`);
 }
-(function checkTheme() {
-  const body = document.querySelector("body");
-  let theme = localStorage.getItem("bcm-theme");
-  if (!body.classList.contains("bcm-theme-*") && theme) {
-    body.classList.add(`bcm-theme-${theme}`);
-  }
-})();
 export class Generate {
-  static observeElementRemoval(element, callback) {
-    const observer = new MutationObserver((mutationsList, observer) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          const removedNodes = Array.from(mutation.removedNodes);
-          for (const removedNode of removedNodes) {
-            if (removedNode === element) {
-              callback();
-              observer.disconnect();
-              return;
-            }
-          }
-        }
-      }
-    });
-    observer.observe(document.documentElement, { childList: true, subtree: true });
-  }
-  static getTwColor(color, variable = "--bcm-color-default") {
-    if (!color || !colors[color]) {
-      return false;
-    }
-    const colorObj = colors[color];
-    const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
-    }
-    return result;
-  }
 }
-Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
+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" };
+    return { icon: 'far fa-spinner-third fa-spin' };
   switch (status) {
     case StatusProps.info:
-      return { icon: "far fa-info-circle" };
+      return { icon: 'far fa-info-circle' };
     case StatusProps.error:
-      return { icon: "far fa-times-circle" };
+      return { icon: 'far fa-times-circle' };
     case StatusProps.warning:
-      return { icon: "far fa-exclamation-circle" };
+      return { icon: 'far fa-exclamation-circle' };
     case StatusProps.success:
-      return { icon: "far fa-check-circle" };
+      return { icon: 'far fa-check-circle' };
   }
 };
-Generate.createComponent = (el, props, area = "append-area") => {
+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";
+    container = document.createElement('div');
+    container.id = 'append-area';
     document.body.appendChild(container);
-    container.style.visibility = "hidden";
-    container.style.opacity = "0";
+    container.style.visibility = 'hidden';
+    container.style.opacity = '0';
   }
   let element = document.getElementById(props.id);
   if (!element) {
@@ -88,13 +52,13 @@ Generate.createComponent = (el, props, area = "append-area") => {
   container.appendChild(element);
   return element;
 };
-Generate.createElement = (tag = "div", props) => {
+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") {
+    if (key == 'innerHTML') {
       element[key] = props[key];
     }
     else {
@@ -202,68 +166,3 @@ Generate.getAncestor = (el, selector) => {
     ;
   return el;
 };
-Generate.findParentElement = (element, selector) => {
-  const firstChar = selector.charAt(0);
-  function getElementByClass(currentElement, className) {
-    while (currentElement !== null) {
-      if (currentElement.classList.contains(className)) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementById(currentElement, id) {
-    while (currentElement !== null) {
-      if (currentElement.id === id) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementByAttribute(currentElement, attr, value) {
-    while (currentElement !== null) {
-      if (currentElement.hasAttribute(attr) && (value === undefined || currentElement.getAttribute(attr) === value)) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementByTag(currentElement, tag) {
-    while (currentElement !== null) {
-      if (currentElement.tagName.toLowerCase() === tag.toLowerCase()) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  if (selector === "*") {
-    // Tüm elementleri seç
-    return element.parentElement;
-  }
-  else if (firstChar === ".") {
-    // Sınıf adı seçicisi
-    const className = selector.slice(1);
-    return getElementByClass(element.parentElement, className);
-  }
-  else if (firstChar === "#") {
-    // ID seçicisi
-    const id = selector.slice(1);
-    return getElementById(element.parentElement, id);
-  }
-  else if (firstChar === "[") {
-    // Öznitelik seçicisi
-    const end = selector.indexOf("]");
-    const attr = selector.slice(1, end);
-    const value = selector.slice(end + 2, -1);
-    return getElementByAttribute(element.parentElement, attr, value);
-  }
-  else {
-    // Etiket adı seçicisi
-    const tag = selector.toLowerCase();
-    return getElementByTag(element.parentElement, tag);
-  }
-};

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

@@ -2,38 +2,31 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { delay, FloatingUI } from "@bcm/utils";
-import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
+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", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
-    this.destroy = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.el.remove();
-        this.emitHide();
-      }
-      this.removeListener();
-    };
+  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",
+      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>` : ""}
+            ${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": `
+      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,
+        'role': 'popover',
+        'aria-hidden': 'true',
+        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        'innerHTML': inner,
       });
     };
     this.update = () => {
@@ -44,21 +37,21 @@ export class Popover {
       }
     };
     this.listener = () => {
-      window.addEventListener("resize", this.calculatePosition.bind(this));
-      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      window.addEventListener('resize', this.calculatePosition.bind(this));
+      window.addEventListener('scroll', this.calculatePosition.bind(this), true);
+      window.addEventListener('wheel', this.calculatePosition.bind(this));
       if (this.trigger && this.target()) {
         switch (this.trigger) {
-          case "click":
-            this.target().addEventListener("click", this.toggle.bind(this));
+          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));
+          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);
+          case 'focus':
+            this.target().addEventListener('focus', this.show.bind(this), true);
+            this.target().addEventListener('blur', this.hide.bind(this), true);
             break;
           default:
             break;
@@ -66,18 +59,6 @@ export class Popover {
       }
       this.calculatePosition();
     };
-    this.removeListener = () => {
-      window.removeEventListener("resize", this.calculatePosition.bind(this));
-      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.removeEventListener("wheel", this.calculatePosition.bind(this));
-      if (this.target()) {
-        this.target().removeEventListener("click", this.toggle.bind(this));
-        this.target().removeEventListener("mouseenter", this.show.bind(this));
-        this.target().removeEventListener("mouseleave", this.hide.bind(this));
-        this.target().removeEventListener("focus", this.show.bind(this), true);
-        this.target().removeEventListener("blur", this.hide.bind(this), true);
-      }
-    };
     this.calculatePosition = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -91,23 +72,19 @@ export class Popover {
         });
       }
     };
-    this.show = async () => {
+    this.show = () => {
       if (this.message) {
         this.init();
-        await delay(this.openDelay);
         this.calculatePosition();
-        this.emitShow();
       }
       else {
         this.hide();
       }
     };
-    this.hide = async () => {
+    this.hide = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
-        await delay(this.closeDelay);
         this.el.remove();
-        this.emitHide();
       }
     };
     this.toggle = () => {
@@ -125,11 +102,6 @@ export class Popover {
     this.placement = placement;
     this.color = color;
     this.trigger = trigger;
-    this.id = targetId + "-popover-box";
-    this.openDelay = openDelay;
-    this.closeDelay = closeDelay;
-    this.emitShow = emitShow;
-    this.emitHide = emitHide;
-    Generate.observeElementRemoval(document.getElementById(this.targetId), this.destroy.bind(this));
+    this.id = targetId + '-popover-box';
   }
 }

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

@@ -2,42 +2,21 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { delay, FloatingUI } from "@bcm/utils";
-import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
-import { Bcm } from "@bcm/model";
+import { FloatingUI } from '@bcm/utils';
+import { ColorHelper, Generate, StringHelper } from '@bcm/helpers';
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
-    this.destroy = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.el.remove();
-        this.emitHide();
-      }
-      this.removeListener();
-    };
+  constructor({ message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
     this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
-    this.sizeClass = () => {
-      switch (this.size) {
-        case Bcm.Size.small:
-          return "tw-text-1";
-        case Bcm.Size.medium:
-          return "tw-text-2";
-        case Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
     this.init = () => {
-      this.el = Generate.createElement("div", {
-        "id": `${this.targetId}-tooltip-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
-        "role": "tooltip",
-        "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
-        "innerHTML": StringHelper.trim(this.message),
+      this.el = Generate.createElement('div', {
+        'id': `${this.targetId}-tooltip-box`,
+        'class': `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-1 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        'role': 'tooltip',
+        'aria-hidden': 'true',
+        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        'innerHTML': StringHelper.trim(this.message),
       });
     };
     this.update = () => {
@@ -48,21 +27,21 @@ export class Tooltip {
       }
     };
     this.listener = () => {
-      window.addEventListener("resize", this.calculatePosition.bind(this));
-      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      window.addEventListener('resize', this.calculatePosition.bind(this));
+      window.addEventListener('scroll', this.calculatePosition.bind(this), true);
+      window.addEventListener('wheel', this.calculatePosition.bind(this));
       if (this.trigger && this.target()) {
         switch (this.trigger) {
-          case "click":
-            this.target().addEventListener("click", this.toggle.bind(this));
+          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));
+          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);
+          case 'focus':
+            this.target().addEventListener('focus', this.show.bind(this), true);
+            this.target().addEventListener('blur', this.hide.bind(this), true);
             break;
           default:
             break;
@@ -70,18 +49,6 @@ export class Tooltip {
       }
       this.calculatePosition();
     };
-    this.removeListener = () => {
-      window.removeEventListener("resize", this.calculatePosition.bind(this));
-      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.removeEventListener("wheel", this.calculatePosition.bind(this));
-      if (this.target()) {
-        this.target().removeEventListener("click", this.toggle.bind(this));
-        this.target().removeEventListener("mouseenter", this.show.bind(this));
-        this.target().removeEventListener("mouseleave", this.hide.bind(this));
-        this.target().removeEventListener("focus", this.show.bind(this), true);
-        this.target().removeEventListener("blur", this.hide.bind(this), true);
-      }
-    };
     this.calculatePosition = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -95,23 +62,19 @@ export class Tooltip {
         });
       }
     };
-    this.show = async () => {
+    this.show = () => {
       if (this.message) {
         this.init();
-        await delay(this.openDelay);
         this.calculatePosition();
-        this.emitShow();
       }
       else {
         this.hide();
       }
     };
-    this.hide = async () => {
+    this.hide = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
-        await delay(this.closeDelay);
-        this.el && this.el.remove();
-        this.emitHide();
+        this.el.remove();
       }
     };
     this.toggle = () => {
@@ -127,13 +90,7 @@ export class Tooltip {
     this.targetId = targetId;
     this.placement = placement;
     this.color = color;
-    this.id = targetId + "-tooltip-box";
+    this.id = targetId + '-tooltip-box';
     this.trigger = trigger;
-    this.size = size;
-    this.openDelay = openDelay;
-    this.closeDelay = closeDelay;
-    this.emitShow = emitShow;
-    this.emitHide = emitHide;
-    Generate.observeElementRemoval(document.getElementById(this.targetId), this.destroy.bind(this));
   }
 }

package/dist/collection/models/bcm.js

@@ -343,7 +343,6 @@ export var Bcm;
     InputType["search"] = "search";
     InputType["tel"] = "tel";
     InputType["hidden"] = "hidden";
-    InputType["color"] = "color";
   })(InputType = Bcm.InputType || (Bcm.InputType = {}));
   let KeyCode;
   (function (KeyCode) {

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

@@ -7,5 +7,5 @@ import Bcm from '../models/bcm';
 import { SlotTemplate } from './slot-template';
 export const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
   const ButtonTagType = (href) ? Bcm.HtmlElementType.a : Bcm.HtmlElementType.button;
-  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }), h("span", { hidden: true }, h("slot", null)), loading && h("span", { class: "bcm-button__container-loading" }, " ", h("span", { class: "bcm-button__container-icon" }, h("i", { class: "far fa-spinner-third fa-spin" }), " ")), icon && h("span", { class: `${iconPosition} bcm-button__container-icon` }, h("i", { class: `${icon}` })), !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })), h("slot", { name: "suffix" })));
+  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "1" }), h("span", { hidden: true }, h("slot", null)), loading && h("span", { class: "bcm-button__container-loading" }, " ", h("span", { class: "bcm-button__container-icon" }, h("i", { class: "far fa-spinner-third fa-spin" }), " ")), icon && h("span", { class: `${iconPosition} bcm-button__container-icon` }, h("i", { class: `${icon}` })), !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })), h("slot", { name: "suffix" })));
 };

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

@@ -2,10 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 import { defaultIcons } from "../components/molecules/input/types";
-import Bcm from "../models/bcm";
-import cs from "classnames";
+import Bcm from '../models/bcm';
+import cs from 'classnames';
 import snq from "snq";
 export const InputTemplate = ({ elementType, 
 //textarea
@@ -19,43 +19,42 @@ disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDef
 // custom functions
 changePasswordVisibility, handleClear, steps, 
 //event functions
-ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported, eyeDropper, }) => {
+ref, handleBlur, handleFocus, handleInput, handleChange }) => {
   const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
-  type = type === "password" && isPasswordVisible ? "text" : type;
-  value = snq(() => value, "");
-  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? "text" : type;
-  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? " " + unit : "") : value;
-  const typeColor = type === "color";
-  type = type === "color" ? "text" : type;
-  const templateHandleFocus = e => {
-    e.target.parentElement.classList.add("focused");
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = snq(() => value, '');
+  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? 'text' : type;
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
     handleFocus(e);
   };
-  const templateHandleBlur = e => {
-    e.target.parentElement.classList.remove("focused");
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
     handleBlur(e);
   };
-  var containerClass = cs("bcm-input__container", ElementTagType === Bcm.HtmlElementType.textarea && cs("bcm-input__textarea", "textarea-size-" + Bcm.Size[size], "resize-" + resize, "textarea-" + size), ElementTagType === Bcm.HtmlElementType.input && cs("input-size-" + Bcm.Size[size]), {
-    focused: focused,
-    clearable: clearable,
+  var containerClass = cs('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && cs('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && cs('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    'clearable': clearable,
     disabled,
     readonly,
-    invalid: inValid,
-    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
     // 'empty': value?.length < 1,
-    error: captionType === "error",
+    'error': captionType === 'error'
   });
-  const caretContainer = cs("caret-container", {
-    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    disabled: disabled || readonly || inValid,
+  const caretContainer = cs('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
   });
-  const inputClass = "bcm-input__container--" + size;
-  const unitClass = cs(inputClass, "unit-prefix");
-  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
-      backgroundColor: value,
-    } }))), h(ElementTagType, Object.assign({ tabindex: "0", id: id + "-input", "bcm-internal-id": internalId, class: "bcm-input-element " + inputClass }, (ElementTagType === Bcm.HtmlElementType.input && {
+  const inputClass = 'bcm-input__container--' + size;
+  const unitClass = cs(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 &&
+    h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix)), h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
     type,
-    autocomplete: autocomplete ? "on" : "off",
+    autocomplete: autocomplete ? 'on' : 'off',
     pattern,
-  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
+  })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })), h("span", { class: "input-suffix-content" }, (clearable && !disabled && !readonly) &&
+    h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" }))), h("span", { class: "input-suffix-content" }, ((type === 'password' || type === 'text') && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === 'number' && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps('up') }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps('down') }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 &&
+    h("span", { innerHTML: _suffix }))))));
 };

package/dist/collection/templates/list-item-template.js

@@ -41,7 +41,7 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     item.open = item.isSearching;
     openGroup(item.id);
   };
-  return (h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), class: cs('bcm-list__item', 
+  return (h("div", { id: item.id, hidden: item.hidden, tabindex: "-1", "on-focus": e => !unClickable && !disabled && focusItem(e), class: cs('bcm-list__item', 
     // size === 'large' ? 'size-3' : 'size-2',
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',

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

@@ -5,7 +5,7 @@
 import { h } from '@stencil/core';
 import { InfoFooterTemplate } from './info-footer-template';
 import { ListItemTemplate } from './list-item-template';
-export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
+export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
@@ -13,5 +13,5 @@ export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treev
     let scrollHeight = itemCount * itemHeight || 0;
     return { 'min-height': `${scrollHeight}px`, 'overscroll-behavior': 'none' };
   };
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } }, data && searchable && (h("section", { class: "bcm-list__container-search" }, h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } }, h("div", { style: setScrollHeight() }, checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" }, h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), (!items || items.length === 0) && searchFound != 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No data' })))), searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No Data Found' })))))), infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } }, data && searchable && (h("section", { class: "bcm-list__container-search" }, h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } }, h("div", { style: setScrollHeight() }, checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" }, h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), (!items || items.length === 0) && searchFound != 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No data' })))), searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No Data Found' })))))), infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
 };

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

@@ -8,7 +8,7 @@ import cs from 'classnames';
 import { NumberHelper } from '../helper/number-helper';
 import { extractColor } from '../utils/utils';
 import { ColorPalette } from '../global/variables/colors';
-import { ColorProps } from '../components/other_deprecated/tag/types';
+import { ColorProps } from '../components/atoms/tag/types';
 export const TagTemplate = ({ _id, color, customStyle, size, checked, hidden, value, type, onDismiss, onSelect }) => {
   !size && (size = Bcm.FontSize['size-1']);
   const getColor = (color) => {