bromcom-ui 2.8.0-rc.10-h → 2.8.0-rc.10

package/dist/components/generate.js

@@ -3,6 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { Build } from '@stencil/core/internal/client';
+import { c as colors } from './colors2.js';
 
 /**
  * 'status' prop predefined values
@@ -24,7 +25,7 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.8.0-rc.10-h";
+const version = "2.8.0-rc.10";
 
 function snq(callback, defaultValue) {
     try {
@@ -39,39 +40,74 @@ function snq(callback, defaultValue) {
     }
 }
 
-const allowedDomains = ['localhost', 'beta-regression.bromcomcloud.com', 'beta-scrum.bromcomcloud.com', 'beta-kanban.bromcomcloud.com'];
+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}`);
+  }
+})();
 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) {
@@ -84,13 +120,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 {
@@ -198,5 +234,70 @@ 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);
+  }
+};
 
 export { Generate as G, StatusProps as S, TypeProps as T, snq as s };

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export { BcmAttendance as BcmAttendance } from '../types/components/other/attend
 export { BcmAutocomplete as BcmAutocomplete } from '../types/components/organism/autocomplete/autocomplete';
 export { BcmAvatar as BcmAvatar } from '../types/components/atoms/avatar/avatar';
 export { BcmBadge as BcmBadge } from '../types/components/atoms/badge/badge';
-export { BcmBox as BcmBox } from '../types/components/atoms/box/box';
+export { BcmBox as BcmBox } from '../types/components/other/box/box';
 export { BcmBreadcrumb as BcmBreadcrumb } from '../types/components/molecules/breadcrumb/breadcrumb';
 export { BcmButton as BcmButton } from '../types/components/atoms/button/button';
 export { BcmButtonGroup as BcmButtonGroup } from '../types/components/molecules/button-group/button-group';
@@ -16,7 +16,9 @@ export { BcmCheckboxLite as BcmCheckboxLite } from '../types/components/molecule
 export { BcmChip as BcmChip } from '../types/components/atoms/chip/chip';
 export { BcmCollapse as BcmCollapse } from '../types/components/other_deprecated/collapse/collapse';
 export { BcmCollapseGroup as BcmCollapseGroup } from '../types/components/other_deprecated/collapse/group';
-export { BcmColorPicker as BcmColorpicker } from '../types/components/organism/colorpicker/colorpicker';
+export { BcmColorInput as BcmColorInput } from '../types/components/molecules/color-input/color-input';
+export { BcmColorful as BcmColorful } from '../types/components/molecules/colorful/colorful';
+export { BcmColorPicker as BcmColorpicker } from '../types/components/other_deprecated/colorpicker/colorpicker';
 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';
@@ -31,6 +33,7 @@ export { BcmForm2 as BcmForm2 } from '../types/components/organism/form-2/form-2
 export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/form-group';
 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 { 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';
@@ -43,18 +46,23 @@ export { BcmListboxItem as BcmListboxItem } from '../types/components/other_depr
 export { BcmMenu as BcmMenu } from '../types/components/molecules/menu/menu';
 export { BcmMessage as BcmMessage } from '../types/components/molecules/message/message';
 export { BcmModal as BcmModal } from '../types/components/molecules/modal/modal';
+export { BcmModal2 as BcmModal2 } from '../types/components/other/modal-2/modal-2';
+export { BcmModal2Footer as BcmModal2Footer } from '../types/components/other/modal-2/modal-2-footer';
+export { BcmModal2Header as BcmModal2Header } from '../types/components/other/modal-2/modal-2-header';
 export { BcmNotification as BcmNotification } from '../types/components/molecules/notification/notification';
 export { BcmOldInput as BcmOldInput } from '../types/components/other_deprecated/old-input/old-input';
 export { BcmOldSearch as BcmOldSearch } from '../types/components/other_deprecated/old-search/old-search';
 export { BcmOldTag as BcmOldTag } from '../types/components/other_deprecated/old-tag/old-tag';
+export { BcmOverlay as BcmOverlay } from '../types/components/other/overlay/overlay';
 export { BcmPopconfirm as BcmPopconfirm } from '../types/components/molecules/popconfirm/popconfirm';
 export { BcmPopconfirmBox as BcmPopconfirmBox } from '../types/components/molecules/popconfirm/popconfirm-box';
 export { BcmPopover as BcmPopover } from '../types/components/molecules/popover/popover';
 export { BcmProgress as BcmProgress } from '../types/components/molecules/progress/progress';
 export { BcmRadio as BcmRadio } from '../types/components/molecules/radio/radio';
-export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/group';
+export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/radio-group';
 export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
 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';
 export { BcmSelect as BcmSelect } from '../types/components/other_deprecated/select/select';
 export { BcmSelectBox as BcmSelectBox } from '../types/components/other_deprecated/select/select-box';
@@ -66,21 +74,24 @@ export { BcmStepper as BcmStepper } from '../types/components/molecules/stepper/
 export { BcmSwitch as BcmSwitch } from '../types/components/molecules/switch/switch';
 export { BcmTab as BcmTab } from '../types/components/other_deprecated/tabs/tab';
 export { BcmTabGroup as BcmTabGroup } from '../types/components/molecules/tab-group/tab-group';
+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 { 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/atoms/tag/tag';
+export { BcmTag as BcmTag } from '../types/components/other_deprecated/tag/tag';
 export { BcmText as BcmText } from '../types/components/other_deprecated/text/text';
 export { BcmTextarea as BcmTextarea } from '../types/components/molecules/textarea/textarea';
 export { BcmTimePicker as BcmTimePicker } from '../types/components/organism/time-picker/time-picker';
 export { BcmTimeline as BcmTimeline } from '../types/components/molecules/timeline/timeline';
 export { BcmTimelineItem as BcmTimelineItem } from '../types/components/molecules/timeline/timeline-item';
+export { BcmToast as BcmToast } from '../types/components/other/toast/toast';
 export { BcmTooltip as BcmTooltip } from '../types/components/molecules/tooltip/tooltip';
 export { Bcmtreeview as BcmTreeview } from '../types/components/other_deprecated/treeview/treeview';
 export { BcmtreeviewGroup as BcmTreeviewGroup } from '../types/components/other_deprecated/treeview/treeview-group';
 export { BcmtreeviewItem as BcmTreeviewItem } from '../types/components/other_deprecated/treeview/treeview-item';
-export { BcmTypography as BcmTypography } from '../types/components/atoms/typography/typography';
+export { BcmTypography as BcmTypography } from '../types/components/other/typography/typography';
 export { OldBcmPopover as OldBcmPopover } from '../types/components/other_deprecated/old-popover/old-popover';
 export { OldBcmPopoverBox as OldBcmPopoverBox } from '../types/components/other_deprecated/old-popover/old-popover-box';
 

package/dist/components/index.js

@@ -20,6 +20,8 @@ export { BcmCheckboxLite, defineCustomElement as defineCustomElementBcmCheckboxL
 export { BcmChip, defineCustomElement as defineCustomElementBcmChip } from './bcm-chip.js';
 export { BcmCollapse, defineCustomElement as defineCustomElementBcmCollapse } from './bcm-collapse.js';
 export { BcmCollapseGroup, defineCustomElement as defineCustomElementBcmCollapseGroup } from './bcm-collapse-group.js';
+export { BcmColorInput, defineCustomElement as defineCustomElementBcmColorInput } from './bcm-color-input.js';
+export { BcmColorful, defineCustomElement as defineCustomElementBcmColorful } from './bcm-colorful.js';
 export { BcmColorpicker, defineCustomElement as defineCustomElementBcmColorpicker } from './bcm-colorpicker.js';
 export { BcmDatePicker, defineCustomElement as defineCustomElementBcmDatePicker } from './bcm-date-picker.js';
 export { BcmDatetimePicker, defineCustomElement as defineCustomElementBcmDatetimePicker } from './bcm-datetime-picker.js';
@@ -35,6 +37,7 @@ export { BcmForm2, defineCustomElement as defineCustomElementBcmForm2 } from './
 export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup } from './bcm-form-group.js';
 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 { 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';
@@ -47,10 +50,14 @@ export { BcmListboxItem, defineCustomElement as defineCustomElementBcmListboxIte
 export { BcmMenu, defineCustomElement as defineCustomElementBcmMenu } from './bcm-menu.js';
 export { BcmMessage, defineCustomElement as defineCustomElementBcmMessage } from './bcm-message.js';
 export { BcmModal, defineCustomElement as defineCustomElementBcmModal } from './bcm-modal.js';
+export { BcmModal2, defineCustomElement as defineCustomElementBcmModal2 } from './bcm-modal-2.js';
+export { BcmModal2Footer, defineCustomElement as defineCustomElementBcmModal2Footer } from './bcm-modal-2-footer.js';
+export { BcmModal2Header, defineCustomElement as defineCustomElementBcmModal2Header } from './bcm-modal-2-header.js';
 export { BcmNotification, defineCustomElement as defineCustomElementBcmNotification } from './bcm-notification.js';
 export { BcmOldInput, defineCustomElement as defineCustomElementBcmOldInput } from './bcm-old-input.js';
 export { BcmOldSearch, defineCustomElement as defineCustomElementBcmOldSearch } from './bcm-old-search.js';
 export { BcmOldTag, defineCustomElement as defineCustomElementBcmOldTag } from './bcm-old-tag.js';
+export { BcmOverlay, defineCustomElement as defineCustomElementBcmOverlay } from './bcm-overlay.js';
 export { BcmPopconfirm, defineCustomElement as defineCustomElementBcmPopconfirm } from './bcm-popconfirm.js';
 export { BcmPopconfirmBox, defineCustomElement as defineCustomElementBcmPopconfirmBox } from './bcm-popconfirm-box.js';
 export { BcmPopover, defineCustomElement as defineCustomElementBcmPopover } from './bcm-popover.js';
@@ -59,6 +66,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 { 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';
 export { BcmSelect, defineCustomElement as defineCustomElementBcmSelect } from './bcm-select.js';
 export { BcmSelectBox, defineCustomElement as defineCustomElementBcmSelectBox } from './bcm-select-box.js';
@@ -70,6 +78,8 @@ export { BcmStepper, defineCustomElement as defineCustomElementBcmStepper } from
 export { BcmSwitch, defineCustomElement as defineCustomElementBcmSwitch } from './bcm-switch.js';
 export { BcmTab, defineCustomElement as defineCustomElementBcmTab } from './bcm-tab.js';
 export { BcmTabGroup, defineCustomElement as defineCustomElementBcmTabGroup } from './bcm-tab-group.js';
+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';
@@ -80,6 +90,7 @@ export { BcmTextarea, defineCustomElement as defineCustomElementBcmTextarea } fr
 export { BcmTimePicker, defineCustomElement as defineCustomElementBcmTimePicker } from './bcm-time-picker.js';
 export { BcmTimeline, defineCustomElement as defineCustomElementBcmTimeline } from './bcm-timeline.js';
 export { BcmTimelineItem, defineCustomElement as defineCustomElementBcmTimelineItem } from './bcm-timeline-item.js';
+export { BcmToast, defineCustomElement as defineCustomElementBcmToast } from './bcm-toast.js';
 export { BcmTooltip, defineCustomElement as defineCustomElementBcmTooltip } from './bcm-tooltip.js';
 export { BcmTreeview, defineCustomElement as defineCustomElementBcmTreeview } from './bcm-treeview.js';
 export { BcmTreeviewGroup, defineCustomElement as defineCustomElementBcmTreeviewGroup } from './bcm-treeview-group.js';

package/dist/components/input-template.js

@@ -3,24 +3,11 @@
  * Copyright (c) Bromcom.
  */
 import { h } from '@stencil/core/internal/client';
+import { d as defaultIcons } from './types.js';
 import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { s as snq } from './generate.js';
 
-var defaultIcons;
-(function (defaultIcons) {
-  defaultIcons["search"] = "fal fa-search";
-  defaultIcons["email"] = "fal fa-mail";
-  defaultIcons["tel"] = "fal fa-phone";
-  defaultIcons["url"] = "fal fa-link";
-})(defaultIcons || (defaultIcons = {}));
-var iconSizes;
-(function (iconSizes) {
-  iconSizes[iconSizes["small"] = 14] = "small";
-  iconSizes[iconSizes["medium"] = 16] = "medium";
-  iconSizes[iconSizes["large"] = 18] = "large";
-})(iconSizes || (iconSizes = {}));
-
 const InputTemplate = ({ elementType, 
 //textarea
 rows, 
@@ -33,65 +20,71 @@ disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDef
 // custom functions
 changePasswordVisibility, handleClear, steps, 
 //event functions
-ref, handleBlur, handleFocus, handleInput, handleChange }) => {
+ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported, eyeDropper, }) => {
   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 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 typeColor = type === "color";
+  type = type === "color" ? "text" : type;
+  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 = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
-    'focused': focused,
-    'clearable': clearable,
+  var containerClass = classnames("bcm-input__container", ElementTagType === Bcm.HtmlElementType.textarea && classnames("bcm-input__textarea", "textarea-size-" + Bcm.Size[size], "resize-" + resize, "textarea-" + size), ElementTagType === Bcm.HtmlElementType.input && classnames("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 = classnames('caret-container', {
-    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    'disabled': disabled || readonly || inValid
+  const caretContainer = classnames("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 = classnames(inputClass, 'unit-prefix');
-  return (h("div", { class: containerClass },
+  const inputClass = "bcm-input__container--" + size;
+  const unitClass = classnames(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)),
-    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
+      _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 && {
       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() },
+    }), (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("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("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("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 }))))));
+    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() })))))));
 };
 
 export { InputTemplate as I };