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

package/dist/components/search.js

@@ -4,12 +4,11 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as snq, G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
-import { I as InputTemplate } from './input-template.js';
+import { B as Bcm } from './bcm.js';
+import { i as inputStyle } from './input.style.js';
 import { d as delay } from './utils.js';
-import { c as createStore } from './index4.js';
+import { c as createStore } from './index5.js';
 import { S as StringHelper } from './string-helper.js';
-import { d as defineCustomElement$1 } from './icon.js';
 
 const { state } = createStore({
   value: new Map(),
@@ -146,8 +145,6 @@ const searchState = {
   searchData,
 };
 
-const searchCss = "@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-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
 const BcmSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -226,15 +223,21 @@ const BcmSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
   }
   render() {
-    const { _id, placeholder, disabled, readonly } = this;
-    return h(Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h(InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
+    const { _id, placeholder, disabled, readonly, size } = this;
+    const { host, inputContainer, input, slotClass, clearButton } = inputStyle({
+      size,
+      fullWidth: true,
+      clearable: this.isActiveClearable,
+      disabled,
+      readonly,
+    });
+    return h(Host, { class: host(), onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h("div", { class: inputContainer(), id: _id + "-container" }, h("input", { class: input(), id: _id + "-input", type: "search", placeholder: placeholder, disabled: disabled, readonly: readonly, onInput: this.debounceHandler, onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), autocomplete: "off", ref: el => (this.inputElement = el) }), h("div", { class: slotClass() }, this.isActiveClearable && (h("button", { type: "button", class: clearButton(), onClick: () => this.handleClear() }, h("i", { class: "far fa-times" }))))));
   }
   get el() { return this; }
   static get watchers() { return {
     "data": ["dataChanged"]
   }; }
-  static get style() { return searchCss; }
-}, [4, "bcm-search", {
+}, [0, "bcm-search", {
     "_id": [1537, "id"],
     "placeholder": [1025],
     "disabled": [1028],
@@ -257,18 +260,13 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-search", "bcm-icon"];
+  const components = ["bcm-search"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-search":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmSearch);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
   } });
 }
 

package/dist/components/segment-picker.style.js

@@ -0,0 +1,53 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as ce } from './index4.js';
+
+const segmentPickerStyle = ce({
+  slots: {
+    base: [
+      "bcm-segment-picker bcm-ui-element bcm-ui-action",
+      "tw-bg-color-default tw-rounded-cards tw-p-1 tw-gap-0.5 tw-text-color",
+      "tw-text-size-5 tw-font-medium",
+      "tw-flex tw-flex-row tw-justify-center tw-items-center",
+      "tw-relative",
+      "before:tw-bg-[var(--highlight-color)] before:tw-rounded before:tw-absolute before:tw-z-0 before:tw-top-1 before:tw-bottom-1 before:tw-left-0",
+      "before:tw-w-[var(--highlight-width)] before:tw-transform before:tw-translate-x-[var(--highlight-x-pos)]",
+      "before:tw-transition-all before:tw-duration-300 before:tw-ease-in-out",
+    ],
+    item: [
+      "bcm-segment-picker__item",
+      "tw-py-2 tw-px-3 tw-gap-2.5 tw-rounded",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-relative tw-z-10",
+      "tw-transition-color tw-duration-300 tw-ease-in-out",
+    ],
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+    disabled: {
+      true: { item: "tw-cursor-not-allowed" },
+      false: {
+        item: ["tw-cursor-pointer", "tw-text-color"],
+      },
+    },
+    active: {
+      true: {
+        item: ["", "tw-text-color-base"],
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    active: false,
+  },
+});
+
+export { segmentPickerStyle as s };

package/dist/components/select-box.js

@@ -4,10 +4,9 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$i } from './avatar.js';
-import { d as defineCustomElement$h } from './badge.js';
-import { d as defineCustomElement$g } from './checkbox.js';
-import { d as defineCustomElement$f } from './checkbox-lite.js';
+import { d as defineCustomElement$h } from './avatar.js';
+import { d as defineCustomElement$g } from './badge.js';
+import { d as defineCustomElement$f } from './checkbox.js';
 import { d as defineCustomElement$e } from './divider.js';
 import { d as defineCustomElement$d } from './empty.js';
 import { d as defineCustomElement$c } from './icon.js';
@@ -62,7 +61,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-select-box", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-checkbox-lite", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
+  const components = ["bcm-select-box", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-select-box":
       if (!customElements.get(tagName)) {
@@ -70,21 +69,16 @@ function defineCustomElement() {
       }
       break;
     case "bcm-avatar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "bcm-checkbox":
+    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }
       break;
-    case "bcm-checkbox-lite":
+    case "bcm-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }

package/dist/components/skeleton.js

@@ -4,13 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const skeletonStyle = ce({
   slots: {

package/dist/components/step.js

@@ -5,7 +5,7 @@
 import { forceUpdate, proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
-import { c as createStore } from './index4.js';
+import { c as createStore } from './index5.js';
 
 const { state } = createStore({
   value: new Map(),

package/dist/components/string-helper.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as createCommonjsModule, b as commonjsGlobal } from './_commonjsHelpers.js';
 
 var slugify = createCommonjsModule(function (module, exports) {

package/dist/components/tab-group.syle.js

@@ -0,0 +1,66 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as ce } from './index4.js';
+
+const tabGroupStyle = ce({
+  slots: {
+    tabGroup: [
+      "bcm-tab-group",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans"
+    ],
+    tabHeader: [
+      "tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between"
+    ],
+    inkBar: [
+      "tw-bg-default-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform"
+    ],
+    tabHeaderItem: [
+      "tw-flex tw-flex-1 tw-items-center tw-w-full tw-justify-center tw-border-4 tw-focus:outline-none tw-font-medium tw-py-1 tw-px-3"
+    ],
+    tabItem: [
+      "tw-w-full"
+    ]
+  },
+  variants: {
+    size: {
+      small: {
+        tabHeaderItem: "tw-text-3 tw-gap-2",
+      },
+      medium: {
+        tabHeaderItem: "tw-text-base tw-gap-2.5",
+      },
+      large: {
+        tabHeaderItem: "tw-text-4 tw-gap-3",
+      },
+    },
+    disabled: {
+      true: {
+        tabHeaderItem: "tw-cursor-not-allowed tw-text-color-disabled tw-opacity-50",
+        tabItem: "tw-opacity-50"
+      },
+      false: {
+        tabHeaderItem: "tw-cursor-pointer"
+      },
+    },
+    active: {
+      true: {
+        tabHeaderItem: "tw-text-color-primary",
+        tabItem: "tw-block"
+      },
+      false: {
+        tabHeaderItem: "tw-text-color",
+        tabItem: "tw-hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    active: false
+  },
+});
+
+export { tabGroupStyle as t };

package/dist/components/textarea.js

@@ -3,28 +3,133 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
-import { I as InputTemplate } from './input-template.js';
 import { d as delay } from './utils.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './label.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-var ResizeType;
-(function (ResizeType) {
-  ResizeType["none"] = "none";
-  ResizeType["both"] = "both";
-  ResizeType["horizontal"] = "horizontal";
-  ResizeType["vertical"] = "vertical";
-  ResizeType["initial"] = "initial";
-  ResizeType["inherit"] = "inherit";
-})(ResizeType || (ResizeType = {}));
-
-const textareaCss = "@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-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
+const textareaStyle = ce({
+  slots: {
+    host: "bcm-textarea bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    base: "",
+    inputContainer: ["bcm-textarea__container", "tw-bg-color-base tw-border tw-border-solid tw-border-color tw-rounded", "tw-flex tw-items-center tw-justify-between tw-gap-2", "tw-pl-3", "tw-relative"],
+    input: [
+      "bcm-textarea-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none",
+      "tw-text-color placeholder:tw-text-color-placeholder placeholder:tw-font-normal",
+      "tw-font-sans tw-antialiased tw-font-medium",
+      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+    ],
+    slotClass: "tw-flex tw-items-center tw-justify-between tw-gap-2 empty:tw-hidden tw-text-color-placeholder",
+    clearButton: [
+      "clear-button tw-cursor-pointer tw-appearance-none tw-border-0 tw-text-color-placeholder tw-text-size-inherit tw-bg-transparent tw-py-1 tw-px-2 -tw-mx-2 tw-w-8 tw-flex tw-items-center tw-justify-center",
+      "hover:tw-text-color",
+      "tw-absolute tw-right-1 tw-top-0.5 "
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-textarea__container--small",
+        inputContainer: "input2-size-small tw-min-h-6",
+        input: "tw-text-size-4 tw-min-h-6",
+      },
+      medium: {
+        host: "bcm-textarea__container--medium",
+        inputContainer: "input2-size-medium tw-min-h-8",
+        input: "tw-text-size-5 tw-min-h-8",
+      },
+      large: {
+        host: "bcm-textarea__container--large",
+        inputContainer: "input2-size-large tw-min-h-10",
+        input: "tw-text-size-6 tw-min-h-10",
+      },
+    },
+    fullWidth: {
+      true: {
+        host: "full-width tw-max-w-full",
+      },
+    },
+    noMargin: {
+      true: {
+        host: "no-margin tw-mb-0",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden tw-hidden",
+      },
+    },
+    focused: {
+      true: {
+        host: "focused",
+      },
+    },
+    clearable: {
+      true: {
+        host: "clearable",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled",
+        input: "",
+        inputContainer: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled tw-cursor-not-allowed",
+      },
+      false: {
+        inputContainer: ["has-[:not([disabled]):focus-visible]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    invalid: {
+      true: {
+        host: "invalid",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus-visible]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+        inputContainer: "tw-border-color-error",
+      },
+    },
+    resize: {
+      vertical: {
+        input: "tw-resize-y",
+      },
+      horizontal: {
+        input: "tw-resize-x",
+      },
+      both: {
+        input: "tw-resize",
+      },
+      none: {
+        input: "tw-resize-none",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    noMargin: false,
+    fullWidth: false,
+    hidden: false,
+    focused: false,
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    error: false,
+    resize: "vertical",
+  },
+});
 
 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;
@@ -51,6 +156,7 @@ const BcmTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = undefined;
     this.placeholder = undefined;
     this.label = undefined;
+    this.tooltip = undefined;
     this.name = undefined;
     this.required = false;
     this.caption = undefined;
@@ -62,7 +168,7 @@ const BcmTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.disabled = undefined;
     this.readonly = false;
     this.clearable = undefined;
-    this.resize = ResizeType.vertical;
+    this.resize = "vertical";
     this.fullWidth = false;
     this.maxLength = undefined;
     this.focused = false;
@@ -139,39 +245,49 @@ const BcmTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     e.stopPropagation();
   }
   render() {
-    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
-    const hostClasses = classnames('bcm-input', {
+    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required, tooltip } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const { host, inputContainer, input, slotClass, clearButton } = textareaStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
       hidden,
-      'full-width': fullWidth,
+      resize,
     });
-    return (h(Host, { class: hostClasses }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { elementType: Bcm.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el, captionType: captionType }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
+    return (h(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h("bcm-label", { tooltip: tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: inputContainer(), id: _id + "-container" }, h("div", { class: slotClass() }, h("slot", { name: "prefix" })), h("textarea", { id: _id + "-input", value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, class: input(), readonly: readonly, onInput: _event => this.handleInput(), onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), ref: (el) => this.textarea = el }), isActiveClearable && (h("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("div", { class: slotClass() }, h("slot", { name: "suffix" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
   }
   get el() { return this; }
   static get watchers() { return {
     "value": ["watchValue"]
   }; }
-  static get style() { return textareaCss; }
 }, [4, "bcm-textarea", {
-    "_id": [1537, "id"],
-    "_internal_id": [1025],
-    "hidden": [1028],
+    "_id": [513, "id"],
+    "_internal_id": [1],
+    "hidden": [4],
     "value": [1025],
-    "placeholder": [1025],
-    "label": [1025],
-    "name": [1025],
-    "required": [1028],
+    "placeholder": [1],
+    "label": [1],
+    "tooltip": [1],
+    "name": [1],
+    "required": [4],
     "caption": [1025],
-    "noCaption": [1028, "no-caption"],
+    "noCaption": [4, "no-caption"],
     "captionError": [1025, "caption-error"],
     "captionType": [1025, "caption-type"],
-    "rows": [1026],
-    "size": [1025],
-    "disabled": [1028],
-    "readonly": [1028],
-    "clearable": [1028],
-    "resize": [1032],
-    "fullWidth": [1028, "full-width"],
-    "maxLength": [1026, "max-length"],
+    "rows": [2],
+    "size": [1],
+    "disabled": [4],
+    "readonly": [4],
+    "clearable": [4],
+    "resize": [1],
+    "fullWidth": [4, "full-width"],
+    "maxLength": [2, "max-length"],
     "focused": [32],
     "captionCache": [32],
     "captionTypeCache": [32],

package/dist/components/tooltip-helper.js

@@ -7,10 +7,9 @@ import { S as StringHelper } from './string-helper.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { C as ColorHelper } from './color-helper.js';
-import './validators.js';
+import { t as tooltipStyle } from './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
-import { B as Bcm } from './bcm.js';
 
 class Tooltip {
   constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
@@ -23,18 +22,6 @@ class Tooltip {
       this.removeListener();
     };
     this.target = () => document.getElementById(this.targetId);
-    this.sizeClass = () => {
-      switch (this.size) {
-        case Bcm.Size.small:
-          return "tw-text-1";
-        case Bcm.Size.medium:
-          return "tw-text-2";
-        case Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
     this.init = () => {
       const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
       const dc = Generate.getTwColor({
@@ -45,10 +32,10 @@ class Tooltip {
         variable: "--bcm-tooltip",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      const { tooltip } = tooltipStyle({ size: this.size });
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "class": tooltip(),
         "role": "tooltip",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),

package/dist/components/tooltip.js

@@ -4,13 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import { t as tooltipStyle } from './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import { T as Tooltip } from './tooltip-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 
 const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -23,7 +23,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.placement = Bcm.Placement.top;
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
-    this.color = "slate";
+    this.color = "gray";
     this.size = Bcm.Size.medium;
     this.openDelay = 0;
     this.closeDelay = 0;
@@ -79,7 +79,8 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h("slot", null)));
+    const { host } = tooltipStyle();
+    return (h(Host, { class: host(), role: "tooltip" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-tooltip", {

package/dist/esm/{bcm-a50d55ba.js → bcm-7f07539b.js}

@@ -73,7 +73,7 @@ var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
-    Kind["ghost-link"] = "ghost-link";
+    Kind["outline"] = "outline";
   })(Bcm.Kind || (Bcm.Kind = {}));
   (function (ButtonType) {
     ButtonType["button"] = "button";
@@ -444,6 +444,12 @@ var Bcm;
     ListType["select"] = "select";
     ListType["autocomplete"] = "autocomplete";
   })(Bcm.ListType || (Bcm.ListType = {}));
+  (function (Target) {
+    Target["blank"] = "_blank";
+    Target["parent"] = "_parent";
+    Target["self"] = "_self";
+    Target["top"] = "_top";
+  })(Bcm.Target || (Bcm.Target = {}));
 })(Bcm || (Bcm = {}));
 const Bcm$1 = Bcm;