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

package/dist/esm/bcm-tab-item.entry.js

@@ -1,100 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
-import { I as IsLoad } from './is-load-decorator-bc14ec4b.js';
-import './color-helper-e8ce23d7.js';
-import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-20047511.js';
-import './number-helper-2cfc8a29.js';
-import './string-helper-6bd24967.js';
-import './validators-ffa8cc9d.js';
-import './element-dragger-89bb52fd.js';
-import './bcm-9f50af9c.js';
-import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-44c95e7e.js';
-import './_commonjsHelpers-3016b722.js';
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmTabItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.active = false;
-    this.disabled = false;
-    this.index = undefined;
-  }
-  componentWillLoad() {
-    this.indexControl();
-  }
-  componentDidRender() {
-    this.headerMove();
-  }
-  getHeaderItem() {
-    const headerItem = this.el.querySelector("bcm-tab-item-header");
-    if (headerItem) {
-      headerItem.setAttribute("index", `${this.index}`);
-      headerItem.setAttribute("active", `${this.active}`);
-      headerItem.setAttribute("disabled", `${this.disabled}`);
-      headerItem.setAttribute("tab-id", `${this._id}`);
-      headerItem.style.order = `${this.index}`;
-    }
-    return headerItem;
-  }
-  getParentTabGroup() {
-    return Generate.findParentElement(this.el, "bcm-tab-group");
-  }
-  getFindHeaderItem() {
-    var _a, _b;
-    return (_b = (_a = this.getParentTabGroup()) === null || _a === void 0 ? void 0 : _a.querySelector("#tab-header")) === null || _b === void 0 ? void 0 : _b.querySelector(`bcm-tab-item-header[tab-id="${this._id}"]`);
-  }
-  headerMove() {
-    var _a, _b, _c, _d;
-    if (this.getHeaderItem()) {
-      (_a = this.getFindHeaderItem()) === null || _a === void 0 ? void 0 : _a.remove();
-      (_c = (_b = this.getParentTabGroup()) === null || _b === void 0 ? void 0 : _b.querySelector("#tab-header")) === null || _c === void 0 ? void 0 : _c.appendChild(this.getHeaderItem());
-      (_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.refresh();
-    }
-  }
-  indexControl() {
-    var _a;
-    if (!this.index) {
-      (_a = Generate.findParentElement(this.el, "bcm-tab-group")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("bcm-tab-item").forEach((item, index) => {
-        if (item === this.el) {
-          item.setAttribute("index", `${index + 1}`);
-        }
-      });
-    }
-  }
-  componentDidLoad() {
-    const observer = new MutationObserver(() => {
-      this.headerMove();
-    });
-    observer.observe(this.el, { childList: true, subtree: true });
-  }
-  render() {
-    return (h(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: {
-        "tw-block": this.active,
-        "tw-hidden": !this.active,
-        "tw-opacity-50": this.disabled,
-        "tw-w-full": true,
-      } }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-__decorate([
-  IsLoad()
-], BcmTabItem.prototype, "el", void 0);
-
-export { BcmTabItem as bcm_tab_item };

package/dist/esm/bcm-time-picker.entry.js

@@ -1,144 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
-import { c as classnames } from './index-ed9652af.js';
-import { I as IsLoad } from './is-load-decorator-bc14ec4b.js';
-import { G as Generate } from './generate-20047511.js';
-import { B as Bcm } from './bcm-9f50af9c.js';
-import { d as delay } from './utils-57652744.js';
-import './_commonjsHelpers-3016b722.js';
-import './colors-44c95e7e.js';
-
-const timePickerCss = "@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}:host{display:inline-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmTimePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.time = new Date();
-    this.value = undefined;
-    this.hidden = false;
-    this.name = undefined;
-    this.fullWidth = false;
-    this.required = false;
-    this.label = undefined;
-    this.placeholder = undefined;
-    this.disabled = false;
-    this.noCaption = false;
-    this.caption = '';
-    this.captionError = undefined;
-    this.captionType = 'default';
-    this.alignment = undefined;
-    this.placement = Bcm.Placement['bottom-start'];
-    this.linkedComponent = undefined;
-    this.clearable = false;
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    if (typeof this.time === 'string') {
-      const regTime = /\b([01][0-9]|2[0-3]):([0-5][0-9])\b/;
-      const regTimeCheck = regTime.test(this.time);
-      const timeSections = regTimeCheck ? this.time.split(':') : false;
-      if (timeSections) {
-        this.time = new Date(new Date().setHours(Number(timeSections[0]), Number(timeSections[1])));
-      }
-      else
-        this.time = new Date();
-    }
-  }
-  /**
-   * @desc
-   */
-  handlePickerLoad() {
-    this.value = this.picker.value;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handlePickerChange(event) {
-    this.value = event.detail;
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  async set(value) {
-    return this.picker.set(value);
-  }
-  async get() {
-    var _a;
-    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
-  }
-  /**
-   * @desc
-   * @param disabled
-   */
-  async setDisabled(disabled) {
-    this.disabled = disabled;
-  }
-  /**
-   * @desc
-   */
-  async getInput() {
-    return await this.picker.getInput();
-  }
-  /**
-   * @desc
-   */
-  async getValue() {
-    return this.value;
-  }
-  /**
-   * @desc
-   */
-  async isValid() {
-    return await this.picker.isValid();
-  }
-  async setClear() {
-    await this.picker.setClear();
-    await delay(10);
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    await delay(10);
-    await this.picker.resetCaption();
-    this.captionType = 'default';
-    this.captionError = null;
-    await delay(10);
-    return Promise.resolve();
-  }
-  /**
-   * @desc
-   */
-  async open() {
-    return await this.picker.open();
-  }
-  render() {
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
-      'full-width': this.fullWidth
-    });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
-  }
-  get el() { return getElement(this); }
-};
-__decorate([
-  IsLoad()
-], BcmTimePicker.prototype, "el", void 0);
-BcmTimePicker.style = timePickerCss;
-
-export { BcmTimePicker as bcm_time_picker };

package/dist/esm/bcm-toast.entry.js

@@ -1,111 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
-import { c as classnames } from './index-ed9652af.js';
-import { I as IsLoad } from './is-load-decorator-bc14ec4b.js';
-import { G as Generate } from './generate-20047511.js';
-import { S as StringHelper } from './string-helper-6bd24967.js';
-import { B as Bcm } from './bcm-9f50af9c.js';
-import { d as delay } from './utils-57652744.js';
-import './_commonjsHelpers-3016b722.js';
-import './colors-44c95e7e.js';
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmToast = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bcmToastClose = createEvent(this, "bcm-toast-close", 7);
-    this.bcmToastOpen = createEvent(this, "bcm-toast-open", 7);
-    this.bcmToastView = createEvent(this, "bcm-toast-view", 7);
-    this._id = Generate.UID();
-    this.status = undefined;
-    this.message = "";
-    this.description = "";
-    this.duration = 3000;
-    this.position = Bcm.Placement.bottom;
-    this.messageIcon = undefined;
-    this.viewButton = false;
-    this.closeButton = true;
-    this.visible = false;
-    this.visibleContainer = false;
-  }
-  async show() {
-    const container = document.getElementById(this._id + "-container");
-    if (container) {
-      document.body.appendChild(container);
-    }
-    this.visible = true;
-    await delay(50);
-    this.visibleContainer = true;
-    this.bcmToastOpen.emit();
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-    this.timer = setTimeout(() => this.hide(), this.duration);
-    return this.el;
-  }
-  async hide() {
-    this.visibleContainer = false;
-    clearTimeout(this.timer);
-    this.bcmToastClose.emit();
-    await delay(100);
-    this.visible = false;
-  }
-  handleMouseEnter() {
-    clearTimeout(this.timer);
-  }
-  handleMouseLeave() {
-    if (this.visible) {
-      this.timer = setTimeout(() => this.hide(), 1000);
-    }
-  }
-  render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: classnames("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
-        "tw-p-4": !this.description,
-        "tw-p-6": this.description,
-      }, "tw-fixed tw-z-50", "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
-        "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
-        "tw-opacity-0": !this.visibleContainer,
-        "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
-        "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
-      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: classnames("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-emerald-500": this.status === "success",
-        "tw-text-red-500": this.status === "error",
-        "tw-text-amber-500": this.status === "warning",
-        "tw-text-blue-500": this.status === "info",
-      }, {
-        "fa-check-circle": !this.messageIcon && this.status === "success",
-        "fa-exclamation-circle": !this.messageIcon && this.status === "error",
-        "fa-exclamation-triangle": !this.messageIcon && this.status === "warning",
-        "fa-info-circle": !this.messageIcon && this.status === "info",
-      }) })), h("span", { class: classnames({
-        "tw-text-4": !this.description,
-        "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: classnames("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
-        "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: classnames("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.description), h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
-__decorate([
-  IsLoad()
-], BcmToast.prototype, "el", void 0);
-
-export { BcmToast as bcm_toast };

package/dist/esm/bcm-typography.entry.js

@@ -1,31 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
-import { I as IsLoad } from './is-load-decorator-bc14ec4b.js';
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmTypography = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-__decorate([
-  IsLoad()
-], BcmTypography.prototype, "el", void 0);
-
-export { BcmTypography as bcm_typography };

package/dist/esm/color-helper-e8ce23d7.js

@@ -1,84 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { C as ColorPalette } from './colors-1d7854ea.js';
-import { e as extractColor } from './utils-57652744.js';
-import { c as colors } from './colors-44c95e7e.js';
-
-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) || colors['blue']['500'];
-ColorHelper.getTwColor = (colorName, checkTw = false) => {
-  if (colors[colorName]) {
-    return colors[colorName];
-  }
-  const splitted = colorName.split('-');
-  const grade = splitted[splitted.length - 1];
-  const swatch = splitted.slice(0, splitted.length - 1).join('-');
-  if (colors[swatch] && colors[swatch][grade]) {
-    return checkTw ? 1 : colors[swatch][grade];
-  }
-  else if (colors[swatch]) {
-    return checkTw ? 2 : colors[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));
-
-export { ColorHelper as C };

package/dist/esm/input-template-4d316446.js

@@ -1,90 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from './index-39133086.js';
-import { d as defaultIcons } from './types-6f06fa1a.js';
-import { B as Bcm } from './bcm-9f50af9c.js';
-import { c as classnames } from './index-ed9652af.js';
-import { s as snq } from './generate-20047511.js';
-
-const InputTemplate = ({ elementType, 
-//textarea
-rows, 
-//props
-id, internalId, type, placeholder, value, size, pattern, 
-//,
-unit, unitPrefix, maxLength, 
-//boolean
-disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, autocomplete, _suffix, _prefix, 
-// custom functions
-changePasswordVisibility, handleClear, steps, 
-//event functions
-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 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");
-    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,
-    disabled,
-    readonly,
-    invalid: inValid,
-    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    // 'empty': value?.length < 1,
-    error: captionType === "error",
-  });
-  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, 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 && {
-      type,
-      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() })))))));
-};
-
-export { InputTemplate as I };