bromcom-ui 2.10.1-rc.0 → 2.10.1-rc.10

package/dist/components/bcm-caption.js

@@ -0,0 +1,64 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as Bcm } from './bcm.js';
+import './string-helper.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import './index2.js';
+import './types.js';
+import './color-helper.js';
+import './validators.js';
+import './generate.js';
+import './number-helper.js';
+import './element-dragger.js';
+import './types2.js';
+
+const BcmCaption$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionClasses = undefined;
+    this.caption = undefined;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.size = Bcm.Size.medium;
+    this.maxLength = undefined;
+    this.value = undefined;
+  }
+  render() {
+    const { noCaption, captionType, captionClasses, caption, captionError, customErrorMessage, size, maxLength, value } = this;
+    return (h(Host, { class: "tw-block" }, h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionClasses: captionClasses, caption: caption, captionError: captionError, customErrorMessage: customErrorMessage, size: size, maxLength: maxLength, value: value })));
+  }
+}, [0, "bcm-caption", {
+    "noCaption": [4, "no-caption"],
+    "captionType": [1, "caption-type"],
+    "captionClasses": [8, "caption-classes"],
+    "caption": [1],
+    "captionError": [1, "caption-error"],
+    "customErrorMessage": [1, "custom-error-message"],
+    "size": [1],
+    "maxLength": [8, "max-length"],
+    "value": [8]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmCaption$1);
+      }
+      break;
+  } });
+}
+
+const BcmCaption = BcmCaption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmCaption, defineCustomElement };

package/dist/components/bcm-checkbox-group.js

@@ -8,13 +8,18 @@ import { G as Generate, s as snq } from './generate.js';
 import { B as Bcm } from './bcm.js';
 import { d as delay, g as getChildElements } from './utils.js';
 import { c as createStore } from './index4.js';
-import { L as LabelTemplate } from './label-template.js';
+import { L as LabelTemplate, d as defineCustomElement$3 } from './label.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { d as defineCustomElement$5 } from './checkbox.js';
 import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
+const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
+  return (h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
+    return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+  })));
+};
+
 const { state } = createStore({
   group: new Map(),
   allChecked: true,
@@ -208,12 +213,6 @@ const checkBoxGroupState = {
   changeIndeterminate,
 };
 
-const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
-  return (h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
-    return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
-  })));
-};
-
 const groupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:16px;margin-top:16px;border-top:1px solid #efefef}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/components/bcm-chip-group.js

@@ -13,13 +13,12 @@ import { a as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
 import { c as classnames } from './index2.js';
 import './types.js';
-import { L as LabelTemplate } from './label-template.js';
+import { L as LabelTemplate, d as defineCustomElement$6 } from './label.js';
 import './types2.js';
 import { d as defineCustomElement$a } from './avatar.js';
 import { d as defineCustomElement$9 } from './badge.js';
 import { d as defineCustomElement$8 } from './chip.js';
 import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './label.js';
 import { d as defineCustomElement$5 } from './list.js';
 import { d as defineCustomElement$4 } from './rc-overflow.js';
 import { d as defineCustomElement$3 } from './search.js';

package/dist/components/bcm-date.js

@@ -14,9 +14,11 @@ import { a as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
 import { c as classnames } from './index2.js';
 import './types.js';
-import { L as LabelTemplate } from './label-template.js';
 import './types2.js';
-import { h as hooks, d as defineCustomElement$2 } from './rc-picker.js';
+import { h as hooks, d as defineCustomElement$3 } from './rc-picker.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './label.js';
+import { d as defineCustomElement$2 } from './tooltip.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;
@@ -40,13 +42,15 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // type a göre format belirleme işlemi
     this.getFormat = () => {
       if (!this.format) {
+        const hourFormat = this.use12Hours ? "hh" : "HH";
+        const timeFormat = `${this.showSecond ? `${hourFormat}:mm:ss` : this.showMinute ? `${hourFormat}:mm` : `${hourFormat}`}${this.use12Hours ? " a" : ""}`;
         switch (this.type) {
           case "time":
-            return this.showSecond ? "HH:mm:ss" : this.showMinute ? "HH:mm" : "HH";
+            return `${timeFormat}`;
           case "date":
             return "DD/MM/YYYY";
           case "datetime":
-            return this.showSecond ? "DD/MM/YYYY HH:mm:ss" : this.showMinute ? "DD/MM/YYYY HH:mm" : "DD/MM/YYYY HH";
+            return `DD/MM/YYYY ${timeFormat}`;
           case "week":
             return "YYYY-wo";
           case "month":
@@ -161,7 +165,7 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { class: classnames("bcm-ui-element bcm-ui-input", "tw-relative tw-m-0 tw-inline-flex tw-w-full tw-flex-col", {
         "tw-max-w-[256px]": !this.fullWidth,
         "tw-mb-2": !this.noMargin,
-      }) }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", class: classnames("w-full tw-flex"), onBcmRCPickerChange: e => this.onChange(e), disabled: this.disabled, clearable: this.clearable, size: size, placeholder: this.placeholder, error: this.captionType === "error", type: this.type, format: this.getFormat(), range: this.range, showToday: this.showToday, disabledDates: this.disabledDates, showTime: this.showTime, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, hourStep: this.hourStep, minuteStep: this.minuteStep, secondStep: this.secondStep, hideDisabledOptions: this.hideDisabledOptions, disabledTime: this.disabledTime }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", class: classnames("w-full tw-flex"), onBcmRCPickerChange: e => this.onChange(e), disabled: this.disabled, clearable: this.clearable, size: size, placeholder: this.placeholder, error: this.captionType === "error", type: this.type, format: this.getFormat(), range: this.range, showToday: this.showToday, disabledDates: this.disabledDates, showTime: this.showTime, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, hourStep: this.hourStep, minuteStep: this.minuteStep, secondStep: this.secondStep, hideDisabledOptions: this.hideDisabledOptions, disabledTime: this.disabledTime }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   get el() { return this; }
 }, [0, "bcm-date", {
@@ -188,7 +192,7 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "showHour": [4, "show-hour"],
     "showMinute": [4, "show-minute"],
     "showSecond": [4, "show-second"],
-    "use12Hours": [4, "use-1-2-hours"],
+    "use12Hours": [4, "use-12-hours"],
     "hourStep": [2, "hour-step"],
     "minuteStep": [2, "minute-step"],
     "secondStep": [2, "second-step"],
@@ -211,14 +215,29 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-date", "bcm-rc-picker"];
+  const components = ["bcm-date", "bcm-icon", "bcm-label", "bcm-rc-picker", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-date":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmDate$1);
       }
       break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
     case "bcm-rc-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/bcm-input-dropdown.js

@@ -43,7 +43,7 @@ const inputDropdownStyle = ce({
     menuItem: "tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 hover:tw-bg-blue-100",
     selectedItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 tw-bg-primary-200",
     disabledItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-cursor-not-allowed tw-text-slate-400 tw-bg-slate-100 hover:tw-bg-slate-100 tw-list-none",
-    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-gap-3 tw-rounded tw-p-4 tw-shadow-2",
+    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-rounded tw-p-4 tw-shadow-2",
   },
   variants: {
     size: {
@@ -93,7 +93,7 @@ const inputDropdownStyle = ce({
   },
 });
 
-const inputDropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:host{display:flex;flex-direction:column;width:100%;position:relative}.input-dropdown-button i{transition:transform 0.2s ease-in-out}.input-dropdown-button[linked-is-open]>i{transform:rotate(-180deg);transition:transform 0.2s ease-in-out}";
+const inputDropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:host{display:flex;flex-direction:column;width:100%;position:relative}.input-dropdown-button i{transition:transform 0.2s ease-in-out}.input-dropdown-button[linked-is-open]>i{transform:rotate(-180deg);transition:transform 0.2s ease-in-out}";
 
 const BcmInputDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -287,7 +287,7 @@ const BcmInputDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     };
     const CommentTemplate = () => {
       var _a, _b, _c;
-      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, "no-caption": true, autocomplete: false, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
     };
     return (h(Host, { class: base() }, label && h("bcm-label", { htmlFor: _id + "-dropdown-input", size: size, value: label, required: required }), h("div", { class: content() }, h("div", { class: inputArea() }, h("input", { id: _id + "-dropdown-input", class: input(), style: { color: (_a = this.value) === null || _a === void 0 ? void 0 : _a.color }, type: "text", tabIndex: -1, placeholder: placeholder, value: (_b = this.value) === null || _b === void 0 ? void 0 : _b.key, disabled: disabled, required: required, autoComplete: "off", readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el) }), h("button", { disabled: disabled, id: `i-dropdown-button-${_id}`, class: button(), onClick: () => (this.isOpenMenu = true) }, h("i", { class: "fas fa-chevron-down" })), h("bcm-linked", { "onBcm-open": ({ detail }) => { var _a; return detail && ((_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide()); }, class: "tw-mt-1", id: `i-dropdown-menu-${_id}`, "target-id": `i-dropdown-button-${_id}`, placement: "bottom-start" }, h(MenuTemplates, null)), h("bcm-linked", { id: `i-dropdown-comment-${_id}`, "target-id": _id, trigger: "custom", placement: "left" }, h(CommentTemplate, null))), !this.hideComment ? (h("span", { onClick: () => {
         var _a, _b;

package/dist/components/bcm-number-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmNumberInput extends Components.BcmNumberInput, HTMLElement {}
+export const BcmNumberInput: {
+  prototype: BcmNumberInput;
+  new (): BcmNumberInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-number-input.js

@@ -0,0 +1,157 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import './index2.js';
+import './types.js';
+import './types2.js';
+import { c as ce } from './index5.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const numberInputStyle = ce({
+  slots: {
+    host: "bcm-number-input bcm-ui-element tw-flex tw-flex-col tw-items-start tw-justify-start tw-max-w-[256px] tw-w-full",
+    container: "tw-flex tw-flex-row tw-items-center tw-justify-between tw-rounded tw-border tw-border-solid tw-border-slate-300 tw-w-full tw-min-h-full hover:tw-bg-slate-50",
+    inputContainer: "tw-flex tw-min-h-fit tw-w-full tw-flex-row tw-items-center tw-justify-center tw-gap-2 tw-px-3",
+    input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
+    caretContainer: "tw-flex tw-flex-col tw-min-h-full tw-border-l tw-items-stretch tw-self-stretch tw-justify-center tw-border-l-slate-300 tw-select-none tw-w-[30px]",
+    caretIcon: "tw-flex tw-items-center tw-text-slate-500 tw-justify-center tw-h-full tw-cursor-pointer active:tw-bg-slate-400 last:tw-border-t last:tw-border-t-slate-300",
+    slotIcon: "tw-text-slate-500",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-gap-0.5 tw-text-xs",
+        slotIcon: "tw-text-[10px]",
+        inputContainer: "tw-py-[2px]",
+        caretIcon: "tw-text-[10px]",
+      },
+      medium: {
+        host: "tw-gap-1 tw-text-base",
+        slotIcon: "tw-text-xs",
+        inputContainer: "tw-py-[5px]",
+      },
+      large: {
+        host: "tw-gap-2 tw-text-base",
+        slotIcon: "tw-text-[14px]",
+        inputContainer: "tw-py-2",
+      },
+    },
+    focus: {
+      true: {
+        container: "tw-ring-1 tw-ring-blue-600",
+        input: "tw-text-slate-700",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const numberInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");\n.size-1 {\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.size-2 {\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.size-3 {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.size-4 {\n  font-size: 20px;\n  line-height: 28px;\n}\n\n.size-5 {\n  font-size: 24px;\n  line-height: 32px;\n}\n\n.size-6 {\n  font-size: 30px;\n  line-height: 38px;\n}\n\n.size-7 {\n  font-size: 38px;\n  line-height: 46px;\n}\n\n.size-8 {\n  font-size: 46px;\n  line-height: 54px;\n}\n\n.size-9 {\n  font-size: 56px;\n  line-height: 64px;\n}\n\n.weight-regular {\n  font-weight: 400;\n}\n\n.weight-semibold {\n  font-weight: 500;\n}\n\n/**\n * Generator\n */\n.input-size-large {\n  height: 40px;\n}\n\n.input-size-medium {\n  height: 32px;\n}\n\n.input-size-small {\n  height: 24px;\n}\n\n.resize-none textarea {\n  resize: none;\n}\n\n.resize-vertical textarea {\n  resize: vertical;\n}\n\n.resize-auto textarea {\n  height: auto;\n  resize: none;\n}\n\n.textarea-size-large {\n  padding: 4px 0 0 4px;\n  min-height: 40px;\n}\n.textarea-size-large .bcm-input-element {\n  min-height: calc((40px - 8px) + 2px);\n}\n.textarea-size-large .input-clear-button {\n  height: calc( 40px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n.textarea-size-medium {\n  padding: 4px 0 0 4px;\n  min-height: 32px;\n}\n.textarea-size-medium .bcm-input-element {\n  min-height: calc((32px - 8px) + 2px);\n}\n.textarea-size-medium .input-clear-button {\n  height: calc( 32px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n.textarea-size-small {\n  padding: 0px 0 0 4px;\n  min-height: 24px;\n}\n.textarea-size-small .bcm-input-element {\n  min-height: calc((24px - 8px) + 2px);\n}\n.textarea-size-small .input-clear-button {\n  height: calc( 24px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n@layer base {\n  .bcm-number-input input[type=number]::-webkit-outer-spin-button,\n.bcm-number-input input[type=number]::-webkit-inner-spin-button,\n.bcm-number-input input[type=number] {\n    -webkit-appearance: none;\n    padding: 0px;\n    margin: 0px;\n    outline: none;\n    border: 0px;\n    vertical-align: baseline;\n    -moz-appearance: textfield !important;\n  }\n}";
+
+const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.blockInvalidChar = e => {
+      return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
+    };
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.placeholder = undefined;
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.value = 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.pattern = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.prefixIcon = undefined;
+    this.suffixIcon = undefined;
+    this.isFocus = false;
+    this.isError = false;
+  }
+  render() {
+    const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
+    const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
+    return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), h("input", { type: "number", class: input(), min: min, max: max, step: step, value: value, inputmode: "numeric", pattern: pattern, ref: input => (this.nativeInput = input), onKeyPress: this.blockInvalidChar, onFocus: () => (this.isFocus = true), onBlur: () => (this.isFocus = false), onError: e => console.log(e), onErrorCapture: e => console.log(e) }), suffixIcon && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  }
+  static get style() { return numberInputCss; }
+}, [0, "bcm-number-input", {
+    "_id": [513, "id"],
+    "size": [1],
+    "min": [2],
+    "max": [2],
+    "step": [2],
+    "placeholder": [1],
+    "label": [1],
+    "tooltip": [1025],
+    "value": [1026],
+    "disabled": [4],
+    "readonly": [4],
+    "required": [4],
+    "pattern": [1025],
+    "caption": [1025],
+    "noCaption": [1028, "no-caption"],
+    "captionType": [1025, "caption-type"],
+    "captionError": [1025, "caption-error"],
+    "customErrorMessage": [1025, "custom-error-message"],
+    "prefixIcon": [1025, "prefix-icon"],
+    "suffixIcon": [1025, "suffix-icon"],
+    "isFocus": [32],
+    "isError": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-number-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NumberInput);
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmNumberInput = NumberInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmNumberInput, defineCustomElement };

package/dist/components/bcm-switch.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const switchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-switch{display:inline-flex;user-select:none;flex-direction:column;margin-bottom:8px}.bcm-switch__container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.bcm-switch__container--left,.bcm-switch__container--right{align-items:center}.bcm-switch__container--left .bcm-label__text,.bcm-switch__container--right .bcm-label__text{margin:0}.bcm-switch__container--left{flex-direction:row}.bcm-switch__container--left .bcm-label__text{margin-right:4px}.bcm-switch__container--right{flex-direction:row-reverse}.bcm-switch__container--right .bcm-label__text{margin-left:4px}.bcm-switch:focus-visible{outline:none}.bcm-switch:focus-visible .bcm-switch__toggle{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch:hover{outline:none}.bcm-switch:hover .bcm-switch__toggle .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch *{box-sizing:border-box}.bcm-switch.hidden{display:none}.bcm-switch input{display:none}.bcm-switch.disabled .bcm-switch__toggle{cursor:not-allowed;opacity:40%}.bcm-switch.readonly .bcm-switch__toggle{cursor:default;opacity:80%}.bcm-switch__label{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;align-items:center;margin:0}.bcm-switch__label .active-text{color:var(--bcm-new-ds-color-blue-500);margin:0 0 0 4px}.bcm-switch__label .inactive-text{color:var(--bcm-new-ds-color-slate-500);margin:0 4px 0 0}.bcm-switch__toggle{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-new-ds-color-slate-300);position:relative;cursor:pointer}.bcm-switch__toggle .handle{padding:1px;position:absolute;background-color:var(--bcm-new-ds-color-slate-50);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:left 0.2s ease-in-out, width 0.2s ease-in-out;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-switch__toggle .icon-active{opacity:0;margin-left:2px}.bcm-switch__toggle .icon-inactive{opacity:1;margin-right:2px}.bcm-switch__toggle.bcm-switch__size-small{width:32px;min-width:32px;height:16px;padding:4px}.bcm-switch__toggle.bcm-switch__size-small .handle{width:12px;height:12px;left:2px}.bcm-switch__toggle.bcm-switch__size-small.switch-checked .handle{left:18px}.bcm-switch__toggle.bcm-switch__size-small:active:not(.disabled):not(.readonly) .handle{width:16px}.bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle{left:12px}.bcm-switch__toggle.bcm-switch__size-small .switch-spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-medium{width:36px;min-width:36px;height:18px;padding:4px}.bcm-switch__toggle.bcm-switch__size-medium .handle{width:14px;height:14px;left:2px}.bcm-switch__toggle.bcm-switch__size-medium.switch-checked .handle{left:20px}.bcm-switch__toggle.bcm-switch__size-medium:active:not(.disabled):not(.readonly) .handle{width:18px}.bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle{left:14px}.bcm-switch__toggle.bcm-switch__size-medium .switch-spinner{box-sizing:border-box;display:inline-flex;width:11px;height:11px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-large{width:40px;min-width:40px;height:20px;padding:4px}.bcm-switch__toggle.bcm-switch__size-large .handle{width:16px;height:16px;left:2px}.bcm-switch__toggle.bcm-switch__size-large.switch-checked .handle{left:22px}.bcm-switch__toggle.bcm-switch__size-large:active:not(.disabled):not(.readonly) .handle{width:20px}.bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle{left:16px}.bcm-switch__toggle.bcm-switch__size-large .switch-spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-500)}.bcm-switch__toggle.switch-checked .icon-active{color:var(--bcm-new-ds-color-slate-100);opacity:1}.bcm-switch__toggle.switch-checked .icon-inactive{opacity:0}.bcm-switch__toggle.switch-checked .switch-spinner{border-top-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch__size-small .bcm-switch__label,.bcm-switch__size-small .bcm-label__text{font-size:12px}.bcm-switch__size-small .bcm-switch__toggle{font-size:8px}.bcm-switch__size-medium .bcm-switch__label,.bcm-switch__size-medium .bcm-label__text{font-size:13px}.bcm-switch__size-medium .bcm-switch__toggle{font-size:9px}.bcm-switch__size-large .bcm-switch__label,.bcm-switch__size-large .bcm-label__text{font-size:16px}.bcm-switch__size-large .bcm-switch__toggle{font-size:12px}@keyframes switch-spinner{to{transform:rotate(360deg)}}";
+const switchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-switch{display:inline-flex;user-select:none;flex-direction:column;margin-bottom:8px}.bcm-switch__container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.bcm-switch__container--left,.bcm-switch__container--right{align-items:center}.bcm-switch__container--left .bcm-label__text,.bcm-switch__container--right .bcm-label__text{margin:0}.bcm-switch__container--left{flex-direction:row}.bcm-switch__container--left .bcm-label__text{margin-right:4px}.bcm-switch__container--right{flex-direction:row-reverse}.bcm-switch__container--right .bcm-label__text{margin-left:4px}.bcm-switch:focus-visible{outline:none}.bcm-switch:focus-visible .bcm-switch__toggle{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch:hover{outline:none}.bcm-switch:hover .bcm-switch__toggle .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch *{box-sizing:border-box}.bcm-switch.hidden{display:none}.bcm-switch input{display:none}.bcm-switch.disabled .bcm-switch__toggle{cursor:not-allowed;opacity:40%}.bcm-switch.readonly .bcm-switch__toggle{cursor:default;opacity:80%}.bcm-switch__label{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;align-items:center;margin:0}.bcm-switch__label .active-text{color:var(--bcm-new-ds-color-blue-500);margin:0 0 0 4px}.bcm-switch__label .inactive-text{color:var(--bcm-new-ds-color-slate-500);margin:0 4px 0 0}.bcm-switch__toggle{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-new-ds-color-slate-300);position:relative;cursor:pointer}.bcm-switch__toggle .handle{padding:1px;position:absolute;background-color:var(--bcm-new-ds-color-slate-50);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:left 0.2s ease-in-out, width 0.2s ease-in-out;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-switch__toggle .icon-active{opacity:0;margin-left:2px}.bcm-switch__toggle .icon-inactive{opacity:1;margin-right:2px}.bcm-switch__toggle.bcm-switch__size-small{width:32px;min-width:32px;height:16px;padding:4px}.bcm-switch__toggle.bcm-switch__size-small .handle{width:12px;height:12px;left:2px}.bcm-switch__toggle.bcm-switch__size-small.switch-checked .handle{left:18px}.bcm-switch__toggle.bcm-switch__size-small:active:not(.disabled):not(.readonly) .handle{width:16px}.bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle{left:12px}.bcm-switch__toggle.bcm-switch__size-small .switch-spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-medium{width:36px;min-width:36px;height:18px;padding:4px}.bcm-switch__toggle.bcm-switch__size-medium .handle{width:14px;height:14px;left:2px}.bcm-switch__toggle.bcm-switch__size-medium.switch-checked .handle{left:20px}.bcm-switch__toggle.bcm-switch__size-medium:active:not(.disabled):not(.readonly) .handle{width:18px}.bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle{left:14px}.bcm-switch__toggle.bcm-switch__size-medium .switch-spinner{box-sizing:border-box;display:inline-flex;width:11px;height:11px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-large{width:40px;min-width:40px;height:20px;padding:4px}.bcm-switch__toggle.bcm-switch__size-large .handle{width:16px;height:16px;left:2px}.bcm-switch__toggle.bcm-switch__size-large.switch-checked .handle{left:22px}.bcm-switch__toggle.bcm-switch__size-large:active:not(.disabled):not(.readonly) .handle{width:20px}.bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle{left:16px}.bcm-switch__toggle.bcm-switch__size-large .switch-spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-500)}.bcm-switch__toggle.switch-checked .icon-active{color:var(--bcm-new-ds-color-slate-100);opacity:1}.bcm-switch__toggle.switch-checked .icon-inactive{opacity:0}.bcm-switch__toggle.switch-checked .switch-spinner{border-top-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch__size-small .bcm-switch__label,.bcm-switch__size-small .bcm-label__text{font-size:12px}.bcm-switch__size-small .bcm-switch__toggle{font-size:8px}.bcm-switch__size-medium .bcm-switch__label,.bcm-switch__size-medium .bcm-label__text{font-size:13px}.bcm-switch__size-medium .bcm-switch__toggle{font-size:9px}.bcm-switch__size-large .bcm-switch__label,.bcm-switch__size-large .bcm-label__text{font-size:16px}.bcm-switch__size-large .bcm-switch__toggle{font-size:12px}@keyframes switch-spinner{to{transform:rotate(360deg)}}";
 
 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;

package/dist/components/bcm.js

@@ -379,34 +379,34 @@ var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    "email": "Please enter a valid email address",
-    "password": "Please enter a valid password",
-    "url": "Please enter a valid URL",
-    "phone": "Please enter a valid phone number",
-    "search": "Please enter a valid search term",
-    "number": "Please enter a valid number",
-    "text": "Please enter a valid text",
-    "required": "This field is required",
-    "minlength": "Must be at least {0} chars long",
-    "maxlength": "Must be at most {0} chars long",
-    "betweenlength": "Must be between {0} and {1} chars long",
-    "min": "This field must be at least {0}",
-    "max": "This field must be at most {0}",
-    "between": "This field must be between {0} and {1}",
-    "pattern": "Please use a valid format",
-    "date": "Please enter a valid date",
-    "time": "Please enter a valid time",
-    "datetime": "Please enter a valid date and time",
-    "datetime-local": "Please enter a valid date and time",
-    "month": "Please enter a valid month",
-    "week": "Please enter a valid week",
-    "color": "Please enter a valid color",
-    "file": "Please enter a valid file",
-    "range": "Please enter a valid range",
-    "radio": "Please select a valid option",
-    "checkbox": "Please select a valid option",
-    "select": "Please select a valid option",
-    "multiple": "Please select a valid option",
+    "email": "Please enter a valid email address.",
+    "password": "Please enter a valid password.",
+    "url": "Please enter a valid URL.",
+    "phone": "Please enter a valid phone number.",
+    "search": "Please enter a valid search term.",
+    "number": "Please enter a valid number.",
+    "text": "Please enter a valid text.",
+    "required": "This field is required.",
+    "minlength": "Must be at least {0} chars long.",
+    "maxlength": "Must be at most {0} chars long.",
+    "betweenlength": "Must be between {0} and {1} chars long.",
+    "min": "This field must be at least {0}.",
+    "max": "This field must be at most {0}.",
+    "between": "This field must be between {0} and {1}.",
+    "pattern": "Please use a valid format.",
+    "date": "Please enter a valid date.",
+    "time": "Please enter a valid time.",
+    "datetime": "Please enter a valid date and time.",
+    "datetime-local": "Please enter a valid date and time.",
+    "month": "Please enter a valid month.",
+    "week": "Please enter a valid week.",
+    "color": "Please enter a valid color.",
+    "file": "Please enter a valid file.",
+    "range": "Please enter a valid range.",
+    "radio": "Please select a valid option.",
+    "checkbox": "Please select a valid option.",
+    "select": "Please select a valid option.",
+    "multiple": "Please select a valid option.",
   };
   (function (IndeterminateType) {
     IndeterminateType["uncheck"] = "uncheck";

package/dist/components/caption-template.js

@@ -5,25 +5,23 @@
 import { h } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const CaptionTemplate = ({ noCaption, captionType, captionClasses, caption, captionError, customErrorMessage, size, 
+const CaptionTemplate = ({ noCaption, captionType, caption, captionError, customErrorMessage, size, 
 //textarea props
-maxLength, value }) => {
+maxLength, value, }) => {
   size = size || "medium";
-  const hostClasses = classnames('bcm-caption-area', 'bcm-caption-area__size-' + size);
-  const classes = `bcm-caption-area__text`;
-  const captionTextClass = `${classes} ${captionType} ${captionClasses}`;
-  const countClasses = `${classes} default ${captionClasses}`;
-  return ((noCaption == false || maxLength) && (h("div", { class: hostClasses },
-    h("span", { class: captionTextClass }, captionType == "error"
-      ? h("span", null,
-        " ",
-        customErrorMessage || captionError,
-        " ")
-      : caption && h("span", null,
-        " ",
-        caption,
-        " ")),
-    maxLength && h("span", { class: countClasses },
+  return ((noCaption == false || maxLength) && (h("div", { class: classnames("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
+      "tw-text-slate-500": !captionType || captionType == "default",
+      "tw-text-blue-600": captionType == "info",
+      "tw-text-emerald-600": captionType == "success",
+      "tw-text-amber-600": captionType == "warning",
+      "tw-text-red-600": captionType == "error",
+    }, {
+      "tw-text-1": size == "small",
+      "tw-text-2": size == "medium",
+      "tw-text-3": size == "large",
+    }) },
+    h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption),
+    maxLength && h("div", { class: "bcm-caption-area__text tw-text-slate-500" },
       " ",
       `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`,
       " "))));