bromcom-ui 2.11.1-rc.9-3 → 2.11.1-rc.9-5

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

@@ -2,131 +2,342 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, 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 { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
+import { d as delay } from './utils.js';
 import { B as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
-import './index2.js';
+import { c as classnames } from './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 { i as inputStyle } from './input.style.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './label.js';
+import { d as defineCustomElement$3 } from './react-input.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.focus = createEvent(this, "bcm-focus", 3);
+    this.blur = createEvent(this, "bcm-blur", 3);
+    this.clear = createEvent(this, "bcm-clear", 3);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 3);
+    this.beforeClear = createEvent(this, "bcm-input-before-clear", 3);
+    this._onChange = createEvent(this, "bcm-onchange", 3);
+    this.inValid = false;
+    this.onInput = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", (e) => {
+        this.input.emit(e);
+      });
+    };
+    this.onChange = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
+        this.change.emit(e);
+      });
+    };
+    this.onFocus = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", e => {
+        this.isFocus = true;
+        this.focus.emit(e);
+      });
+    };
+    this.onBlur = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", e => {
+        this.isFocus = false;
+        this.blur.emit(e);
+      });
+    };
+    this.onKeydown = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.up();
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.down();
+        }
+      });
+    };
+    this.listener = () => {
+      this.onInput();
+      this.onChange();
+      this.onFocus();
+      this.onBlur();
+      this.onKeydown();
     };
     this._id = Generate.UID();
-    this.size = Bcm.Size.medium;
-    this.min = 0;
-    this.max = 100;
+    this.value = "";
+    this.defaultValue = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.size = "medium";
+    this.min = undefined;
+    this.max = undefined;
     this.step = 1;
-    this.placeholder = undefined;
     this.label = undefined;
-    this.tooltip = undefined;
-    this.value = 0;
-    this.disabled = false;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.clearable = false;
     this.readonly = false;
+    this.disabled = false;
     this.required = false;
-    this.pattern = undefined;
+    this.mode = "none";
+    this.placeholder = undefined;
+    this.thousandSeparator = false;
+    this.decimalSeparator = undefined;
+    this.decimalScale = undefined;
+    this.fixedDecimalScale = false;
+    this.allowNegative = true;
+    this.allowLeadingZeros = false;
+    this.unitPrefix = undefined;
+    this.unitSuffix = 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;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.valueCache = "";
+  }
+  connectedCallback() {
+    if (this.defaultValue)
+      this.value = +this.defaultValue;
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentDidLoad() {
+    this.listener();
+  }
+  up() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value + +this.step;
+    if (this.mode === "strict") {
+      if (this.max && +this.value > +this.max) {
+        this.value = this.max;
+      }
+    }
+  }
+  down() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value - +this.step;
+    if (this.mode === "strict") {
+      if (this.min && +this.value < +this.min) {
+        this.value = this.min;
+      }
+    }
+  }
+  handleClear(e) {
+    if (this.disabled)
+      return;
+    const event = this.beforeClear.emit(e);
+    if (event.defaultPrevented)
+      return;
+    this.value = "";
+    this.clear.emit(e);
+  }
+  checkLength() {
+    const { min, max, value } = this;
+    const minLength = min;
+    const maxLength = max;
+    let valuePoint = value === null || value === void 0 ? void 0 : value.toString();
+    if (min && max) {
+      if (+valuePoint < +min || +valuePoint > +max) {
+        this.setCaption(StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (+valuePoint < +minLength) {
+        this.setCaption(StringHelper.getMessage("minlength", [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (valuePoint > maxLength) {
+        this.setCaption(StringHelper.getMessage("maxlength", [maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+  }
+  watchValue() {
+    this.checkLength();
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.value = value;
+  }
+  async setClear() {
+    this.value = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+    return Promise.resolve();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput.bind(this));
+    (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.onChange.bind(this));
+    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onFocus.bind(this));
+    (_d = this.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener("blur", this.onBlur.bind(this));
+    (_e = this.inputElement) === null || _e === void 0 ? void 0 : _e.removeEventListener("keydown", this.onKeydown.bind(this));
   }
   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 })));
+    const { _prefix, _suffix, noCaption, captionType, captionError, caption, required, _id, label, size, fullWidth, clearable, value, placeholder, thousandSeparator, decimalSeparator, decimalScale, fixedDecimalScale, allowNegative, allowLeadingZeros, unitPrefix, unitSuffix, min, max, step, defaultValue, disabled, mode, } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.toString().length) > 0 && clearable;
+    const isInvalid = this.captionType == "error" || this.inValid;
+    const { host, inputContainer, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider, input } = inputStyle({
+      size,
+      fullWidth,
+      clearable: isActiveClearable,
+      disabled,
+      invalid: isInvalid,
+    });
+    const numericProps = {
+      placeholder,
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale,
+      fixedDecimalScale,
+      allowNegative,
+      allowLeadingZeros,
+      prefix: unitPrefix,
+      suffix: unitSuffix,
+    };
+    /* input  props */
+    const inputProps = {
+      min,
+      max,
+      step,
+      value,
+      defaultValue,
+    };
+    const generalProps = Object.assign(Object.assign(Object.assign({ "id": _id + "-base-input", "name": this.name, disabled,
+      mode, "aria-label": label, "aria-labelledby": _id + "-label", "getInputRef": el => {
+        this.inputElement = el;
+      }, "className": input() }, numericProps), inputProps), { "onValueChange": (e) => {
+        const { floatValue } = e;
+        this.value = floatValue;
+        this._onChange.emit(e);
+      } });
+    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
   }
-  static get style() { return numberInputCss; }
-}, [0, "bcm-number-input", {
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+}, [4, "bcm-number-input", {
     "_id": [513, "id"],
+    "value": [1032],
+    "defaultValue": [8, "default-value"],
+    "_prefix": [1, "prefix"],
+    "_suffix": [1, "suffix"],
     "size": [1],
-    "min": [2],
-    "max": [2],
+    "min": [8],
+    "max": [8],
     "step": [2],
-    "placeholder": [1],
     "label": [1],
-    "tooltip": [1025],
-    "value": [1026],
-    "disabled": [4],
+    "name": [1],
+    "fullWidth": [4, "full-width"],
+    "clearable": [4],
     "readonly": [4],
+    "disabled": [4],
     "required": [4],
-    "pattern": [1025],
+    "mode": [1],
+    "placeholder": [1],
+    "thousandSeparator": [8, "thousand-separator"],
+    "decimalSeparator": [1, "decimal-separator"],
+    "decimalScale": [2, "decimal-scale"],
+    "fixedDecimalScale": [4, "fixed-decimal-scale"],
+    "allowNegative": [4, "allow-negative"],
+    "allowLeadingZeros": [4, "allow-leading-zeros"],
+    "unitPrefix": [1, "unit-prefix"],
+    "unitSuffix": [1, "unit-suffix"],
     "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]
+    "captionCache": [32],
+    "captionTypeCache": [32],
+    "valueCache": [32],
+    "onBcmFocus": [64],
+    "onBcmBlur": [64],
+    "onBcmSelect": [64],
+    "set": [64],
+    "get": [64],
+    "setValue": [64],
+    "setClear": [64],
+    "resetCaption": [64],
+    "setCaption": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-react-number", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-number-input":
       if (!customElements.get(tagName)) {
@@ -135,10 +346,15 @@ function defineCustomElement$1() {
       break;
     case "bcm-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-react-number":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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

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

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

@@ -0,0 +1,10 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { B as BcmReactNumber$1, d as defineCustomElement$1 } from './react-input.js';
+
+const BcmReactNumber = BcmReactNumber$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmReactNumber, defineCustomElement };

package/dist/components/bcm-select.js

@@ -27,7 +27,7 @@ import { d as defineCustomElement$4 } from './treeview.js';
 import { d as defineCustomElement$3 } from './treeview-item.js';
 import { d as defineCustomElement$2 } from './typography.js';
 
-const selectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;margin:0}:host(.hidden){display:none}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;width:100%}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;height:100%;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.options-viewport{display:block}.options-viewport bcm-select-option,.options-viewport ::slotted(bcm-select-option){white-space:normal}.options-viewport.hidden{display:none}.options-viewport.vertical{height:fit-content;max-height:200px}.options-viewport.horizontal:not(.flex){overflow-x:auto;width:100%}.options-viewport.horizontal:not(.flex) bcm-select-option,.options-viewport.horizontal:not(.flex) ::slotted(bcm-select-option){white-space:nowrap}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9)}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}";
+const selectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;margin:0}:host(.hidden){display:none}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;width:100%}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:#6B7280;user-select:none;font-size:14px;height:100%;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.options-viewport{display:block}.options-viewport bcm-select-option,.options-viewport ::slotted(bcm-select-option){white-space:normal}.options-viewport.hidden{display:none}.options-viewport.vertical{height:fit-content;max-height:200px}.options-viewport.horizontal:not(.flex){overflow-x:auto;width:100%}.options-viewport.horizontal:not(.flex) bcm-select-option,.options-viewport.horizontal:not(.flex) ::slotted(bcm-select-option){white-space:nowrap}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9)}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}";
 
 /**
  * @desc

package/dist/components/colors2.js

@@ -21,11 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    dim: ()=>dim,
-    default: ()=>_default
+    dim: function() {
+        return dim;
+    },
+    default: function() {
+        return _default;
+    }
 });
-const _picocolors = /*#__PURE__*/ _interopRequireDefault(picocolors_browser);
-function _interopRequireDefault(obj) {
+const _picocolors = /*#__PURE__*/ _interop_require_default(picocolors_browser);
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -75,10 +79,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>_default
+    get: function() {
+        return _default;
+    }
 });
-const _log = /*#__PURE__*/ _interopRequireDefault(log_1);
-function _interopRequireDefault(obj) {
+const _log = /*#__PURE__*/ _interop_require_default(log_1);
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };

package/dist/components/form.js

@@ -103,7 +103,8 @@ const BcmForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         DATETIME_PICKER: 'datetime-picker',
         // silinecek komponentler
         SELECT: 'select',
-        LISTBOX: 'listbox'
+        LISTBOX: 'listbox',
+        NUMBER_INPUT: 'number-input',
       },
       helpers: {
         randomId: function () {
@@ -156,7 +157,6 @@ const BcmForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     const validate = this.validation;
     this.validation = false;
-    // debugger
     this.selector = this.el;
     await this.getInputs();
     if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "2.11.1-rc.9-3";
+const version = "2.11.1-rc.9-5";
 
 /**
  * 'status' prop predefined values

package/dist/components/index.d.ts

@@ -40,6 +40,7 @@ export { BcmForm2 as BcmForm2 } from '../types/components/organism/form-2/form-2
 export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/form-group';
 export { BcmIcon as BcmIcon } from '../types/components/atoms/icon/icon';
 export { BcmInput as BcmInput } from '../types/components/molecules/input/input';
+export { BcmInput2 as BcmInput2 } from '../types/components/molecules/input/input2';
 export { BcmInputCustom as BcmInputCustom } from '../types/components/other/input-custom/input-custom';
 export { BcmInputDropdown as BcmInputDropdown } from '../types/components/molecules/input-dropdown/input-dropdown';
 export { BcmItem as BcmItem } from '../types/components/molecules/item/item';
@@ -72,6 +73,7 @@ export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/ra
 export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
 export { BcmRcOverflow as BcmRcOverflow } from '../types/components/third-parts/rc-overflow/rc-overflow';
 export { BcmRcPicker as BcmRcPicker } from '../types/components/third-parts/rc-picker/rc-picker';
+export { BcmReactNumber as BcmReactNumber } from '../types/components/molecules/number-input/react-input';
 export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
 export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
 export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';

package/dist/components/index.js

@@ -48,6 +48,7 @@ export { BcmForm2, defineCustomElement as defineCustomElementBcmForm2 } from './
 export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup } from './bcm-form-group.js';
 export { BcmIcon, defineCustomElement as defineCustomElementBcmIcon } from './bcm-icon.js';
 export { BcmInput, defineCustomElement as defineCustomElementBcmInput } from './bcm-input.js';
+export { BcmInput2, defineCustomElement as defineCustomElementBcmInput2 } from './bcm-input-2.js';
 export { BcmInputCustom, defineCustomElement as defineCustomElementBcmInputCustom } from './bcm-input-custom.js';
 export { BcmInputDropdown, defineCustomElement as defineCustomElementBcmInputDropdown } from './bcm-input-dropdown.js';
 export { BcmItem, defineCustomElement as defineCustomElementBcmItem } from './bcm-item.js';
@@ -80,6 +81,7 @@ export { BcmRadioGroup, defineCustomElement as defineCustomElementBcmRadioGroup
 export { BcmRange, defineCustomElement as defineCustomElementBcmRange } from './bcm-range.js';
 export { BcmRcOverflow, defineCustomElement as defineCustomElementBcmRcOverflow } from './bcm-rc-overflow.js';
 export { BcmRcPicker, defineCustomElement as defineCustomElementBcmRcPicker } from './bcm-rc-picker.js';
+export { BcmReactNumber, defineCustomElement as defineCustomElementBcmReactNumber } from './bcm-react-number.js';
 export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
 export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
 export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';