bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/collection/components/other/toast/toast.js

@@ -8,6 +8,7 @@ import { Generate } from "../../../helper/generate";
 import { StringHelper } from "../../../helper/string-helper";
 import Bcm from "../../../models/bcm";
 import { delay } from "../../../utils/utils";
+import { toastStyle } from "./toast.style";
 export class BcmToast {
   constructor() {
     this._id = Generate.UID();
@@ -64,44 +65,27 @@ export class BcmToast {
     if (!container) {
       container = document.createElement("div");
       container.id = containerId;
-      const classlist = cs("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
-        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-flex-col tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-flex-col tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
-      });
+      const { containerStyle } = toastStyle({ position: this.position });
+      const classlist = containerStyle();
       container.classList.add(...classlist.split(" "));
       document.body.appendChild(container);
     }
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("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-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "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: cs("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: cs({
-        "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: cs("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", {
+    const { position, visibleContainer, messageIcon, status, description } = this;
+    const positionSplit = position.split("-")[0] || "bottom";
+    const { base, header, headerLeft, headerRight, headerIcon, headerText, descriptionStyle } = toastStyle({
+      position: position,
+      visibleContainer,
+      positionSplit,
+      status,
+      messageIcon: messageIcon ? true : false,
+      description: description ? true : false
+    });
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: base() }, h("div", { class: header() }, h("div", { class: headerLeft() }, this.status && (h("i", { class: headerIcon() + " " + messageIcon })), h("span", { class: headerText() }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: headerRight() }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-appearance-none tw-border-0 ", "tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-2 tw-text-size-6 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "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: cs("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)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-appearance-none tw-border-0 ", "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-size-8 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, h("i", { class: "fa-regular fa-times" }))))), this.description && h("div", { class: descriptionStyle() }, this.description), h("div", { class: descriptionStyle() }, h("slot", null))))));
   }
   static get is() { return "bcm-toast"; }
   static get properties() {

package/dist/collection/components/other/toast/toast.style.js

@@ -0,0 +1,176 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const toastStyle = tv({
+  slots: {
+    base: [
+      "bcm-toast",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out",
+      "tw-flex tw-min-w-[256px] tw-max-w-[560px] tw-flex-col tw-gap-6 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-4",
+      "tw-border-gray-300 tw-bg-white tw-text-color-default",
+      "tw-p-7",
+      "tw-transform tw-transition tw-duration-300 tw-ease-in-out ",
+    ],
+    containerStyle: [
+      "tw-pointer-events-none tw-overflow-hidden tw-z-50",
+      "tw-fixed tw-flex",
+      "tw-p-4 tw-gap-4"
+    ],
+    header: ["tw-flex tw-items-center tw-justify-between tw-gap-5"],
+    headerLeft: ["tw-flex tw-items-center tw-gap-2.5"],
+    headerRight: ["tw-flex tw-items-baseline tw-gap-2"],
+    headerIcon: ["tw-text-size-8 "],
+    headerText: [],
+    descriptionStyle: ["tw-text-size-6 empty:tw-hidden tw-font-medium"],
+  },
+  variants: {
+    size: {
+      small: {
+        base: [],
+      },
+      medium: {
+        base: [],
+      },
+      large: {
+        base: [],
+      },
+    },
+    position: {
+      top: {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      bottom: {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      "top-start": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-left-4"
+        ]
+      },
+      "top-end": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-right-4"
+        ]
+      },
+      "bottom-start": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-left-4"
+        ]
+      },
+      "bottom-end": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-right-4"
+        ]
+      },
+    },
+    visibleContainer: {
+      true: {
+        base: [
+          "tw-translate-y-0 tw-opacity-100 "
+        ],
+      },
+      false: {
+        base: [
+          "tw-opacity-0"
+        ],
+      },
+    },
+    positionSplit: {
+      top: "",
+      bottom: "",
+    },
+    status: {
+      default: {
+        headerIcon: "",
+      },
+      success: {
+        headerIcon: "tw-text-color-success",
+      },
+      error: {
+        headerIcon: "tw-text-color-error",
+      },
+      warning: {
+        headerIcon: "tw-text-color-warning",
+      },
+      info: {
+        headerIcon: "tw-text-color-primary",
+      },
+    },
+    messageIcon: {
+      true: "",
+      false: "",
+    },
+    description: {
+      true: {
+        headerText: "tw-text-size-8 tw-font-semibold"
+      },
+      false: {
+        headerText: "tw-text-size-6"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      visibleContainer: false,
+      positionSplit: "top",
+      class: {
+        base: [
+          "tw-translate-y-[-100%]"
+        ]
+      },
+    },
+    {
+      visibleContainer: false,
+      positionSplit: "bottom",
+      class: {
+        base: [
+          "tw-translate-y-[100%]"
+        ]
+      },
+    },
+    {
+      messageIcon: false,
+      status: "success",
+      class: {
+        headerIcon: "fa-solid fa-check-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "error",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "warning",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-triangle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "info",
+      class: {
+        headerIcon: "fa-solid fa-info-circle",
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    position: "bottom",
+    visibleContainer: false,
+    positionSplit: "bottom",
+    status: "default",
+    messageIcon: false,
+    description: false,
+  },
+});

package/dist/collection/components/other_deprecated/listbox/listbox-item.js

@@ -145,7 +145,7 @@ export class BcmListboxItem {
       'size-2': size === 'small' || size === 'medium',
       'size-3': size === 'large',
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h("div", { class: "check-content" }, h("bcm-checkbox-lite", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h("div", { class: textContent, title: tooltipText }, h("div", null, (avatar || avatarName || avatarImage) && (h("div", { class: "avatar" }, h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h("bcm-icon", { class: "icon", icon: icon })), text && (h("span", { id: "text" }, text)) || (h("slot", null))), h("div", null, (secondaryText) && (h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h("div", { class: "check-content" }, h("bcm-checkbox", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h("div", { class: textContent, title: tooltipText }, h("div", null, (avatar || avatarName || avatarImage) && (h("div", { class: "avatar" }, h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h("bcm-icon", { class: "icon", icon: icon })), text && (h("span", { id: "text" }, text)) || (h("slot", null))), h("div", null, (secondaryText) && (h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
   }
   static get is() { return "bcm-listbox-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/other_deprecated/listbox/listbox.js

@@ -896,7 +896,7 @@ export class BcmListbox {
       customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
     }
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
-    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h("div", { class: bcmListbox, style: customStyles }, search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h("bcm-divider", null))), h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h("div", { class: classes, id: "checkall" }, h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox-lite", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), h("div", { class: textContent }, "Select All")), h("div", { class: "divider" }, h("bcm-divider", null)))), 
+    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h("div", { class: bcmListbox, style: customStyles }, search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h("bcm-divider", null))), h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h("div", { class: classes, id: "checkall" }, h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), h("div", { class: textContent }, "Select All")), h("div", { class: "divider" }, h("bcm-divider", null)))), 
     // this.empty == false && (
     h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
     // )

package/dist/collection/components/other_deprecated/old-input/old-input.css

@@ -278,20 +278,20 @@
   align-items: stretch;
   justify-content: start;
   position: relative;
-  background-color: var(--bcm-new-ds-color-white);
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
-  border-radius: 4px;
+  background-color: var(--bcm-ui-color-background-base-default);
+  border: 1px solid var(--bcm-ui-color-border-default);
+  border-radius: var(--bcm-ui-radius);
   vertical-align: middle;
   overflow: hidden;
-  padding: 0 4px;
+  padding: 0 var(--bcm-ui-spacing-2);
   cursor: text;
 }
 .input-base.disabled {
-  background-color: var(--bcm-new-ds-color-slate-50);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
   cursor: not-allowed;
 }
 .input-base.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-300);
+  color: var(--bcm-ui-color-text-disabled);
 }
 .input-base.readonly {
   background-color: var(--bcm-new-ds-color-slate-50);
@@ -307,10 +307,12 @@
   opacity: 1;
 }
 .input-base:not(.disabled).focused {
-  background-color: var(--bcm-new-ds-color-slate-50);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .input-base:not(.disabled):hover {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-ui-color-border-primary-info);
 }
 .input-base.focused:not(.disabled) .caret-container {
   opacity: 1;
@@ -334,18 +336,24 @@
   display: none;
 }
 .input-base.invalid, .input-base.error {
-  border-color: var(--bcm-new-ds-color-red-500);
+  border-color: var(--bcm-ui-color-border-error);
 }
-
-.error .label {
-  color: var(--bcm-new-ds-color-red-500) !important;
+.input-base.input-size-small {
+  font-size: var(--bcm-ui-font-size-4);
+}
+.input-base.input-size-medium {
+  font-size: var(--bcm-ui-font-size-5);
 }
+.input-base.input-size-large {
+  font-size: var(--bcm-ui-font-size-6);
+}
+
 .error .input-base {
-  border-color: var(--bcm-new-ds-color-red-500) !important;
+  border-color: var(--bcm-ui-color-border-error);
 }
 
 .input-base input {
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
   flex: 1 1 auto;
   width: 0%;
   border: none;
@@ -355,16 +363,22 @@
   padding: 0;
   margin: 0 4px;
   font-family: "Inter", sans-serif;
+  font-weight: 500;
   cursor: inherit;
   -webkit-appearance: none;
+  -moz-appearance: none;
   appearance: none;
+  outline: none;
+  font-size: inherit;
+  line-height: inherit;
 }
 .input-base input::-webkit-search-decoration, .input-base input::-webkit-search-cancel-button, .input-base input::-webkit-search-results-button, .input-base input::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 .input-base input::placeholder {
   font-family: "Inter", sans-serif;
-  color: var(--bcm-new-ds-color-slate-300);
+  font-weight: 400;
+  color: var(--bcm-ui-color-text-placeholder);
   user-select: none;
 }
 .input-base input:focus {
@@ -391,7 +405,7 @@ input[type=number] {
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-ui-color-text-placeholder);
 }
 
 .input-prefix ::slotted(*),
@@ -458,7 +472,7 @@ input[type=number] {
   flex: 0 0 auto;
   align-items: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: var(--bcm-ui-color-text-placeholder);
 }
 
 .caret-container {
@@ -526,19 +540,19 @@ input[type=number] {
   -moz-osx-font-smoothing: grayscale;
   margin-bottom: 4px;
   font-weight: 500;
-  color: #475569;
+  color: var(--bcm-ui-color-text-label);
 }
 .bcm-label.tw-text-1 {
-  font-size: 10px;
-  line-height: 18px;
+  font-size: var(--bcm-ui-font-size-3);
+  line-height: var(--bcm-ui-line-height-3);
 }
 .bcm-label.tw-text-2 {
-  font-size: 12px;
-  line-height: 20px;
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-label.tw-text-3 {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 
 .bcm-caption-area {

package/dist/collection/components/other_deprecated/old-input/old-input.js

@@ -361,7 +361,7 @@ export class BcmOldInput {
       'full-width': fullWidth,
       'error': captionType == 'error' ? true : false
     });
-    const baseClasses = cs('input-base', 'input-' + size, {
+    const baseClasses = cs('input-base', 'input-size-' + size, {
       'invalid': inValid,
       'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
       'focused': hasFocus,
@@ -371,7 +371,9 @@ export class BcmOldInput {
     });
     const inputClass = size === 'large' ? 'size-3' : 'size-2';
     const hostClasses = cs(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: cs(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
+    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: cs(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId,
+      // class={inputClass}
+      ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
         type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
         ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
         : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" })))), type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), type === 'number' && (h("div", { class: cs('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h("bcm-icon", { icon: "far fa-caret-up" })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));

package/dist/collection/components/other_deprecated/old-popover/old-popover-box.css

@@ -161,12 +161,13 @@
   font-weight: 400;
   font-size: 10px;
   line-height: calc(10px + 8px);
-  box-shadow: 0 4px 12px 2px rgba(17, 24, 38, 0.1);
-  border-radius: 4px;
+  box-shadow: var(--bcm-ui-box-shadow-4);
+  border-radius: var(--bcm-ui-radius);
   position: absolute;
   box-sizing: border-box;
   background-color: #FFFFFF;
   border: 1px solid #FFFFFF;
+  color: var(--bcm-ui-color-text-default);
   z-index: -99999;
   overflow: hidden;
   visibility: hidden;