jb-input - npm Package Compare versions

Comparing version 2.0.5 to 2.1.5

dist/JBInput.d.ts

 import './inbox-element/inbox-element';
-import { ElementsObject, JBInputValidationItem, NumberFieldParameter, ValidationResult, ValidationResultItem, ValidationResultSummary } from './Types';
+import { ElementsObject, JBInputStandardValueObject, JBInputValidationItem, NumberFieldParameter, NumberFieldParameterInput, ValidationResult, ValidationResultItem, ValidationResultSummary } from './Types';
 export declare class JBInputWebComponent extends HTMLElement {
     #private;
     static get formAssociated(): boolean;
-    elements?: ElementsObject;
+    elements: ElementsObject;
     internals_?: ElementInternals;
@@ -27,9 +27,9 @@ numberFieldParameters: NumberFieldParameter | undefined;
      */
-    standardValue(valueString: string): string;
+    standardValue(valueString: string): JBInputStandardValueObject;
     /**
      *
-     * @param {String} valueString
+     * @param {String} inputValueString
      * @return {String} standard value
      */
-    standardValueForNumberInput(valueString: string): string;
+    standardValueForNumberInput(inputValueString: string): JBInputStandardValueObject;
     registerEventListener(): void;
@@ -44,5 +44,5 @@ initProp(): void;
      * change number input config base on developer need
-     * @param {NumberFieldParameter} numberFieldParameters
+     * @param {NumberFieldParameterInput} numberFieldParameters
      */
-    setNumberFieldParameter(numberFieldParameters: NumberFieldParameter): void;
+    setNumberFieldParameter(numberFieldParameters: NumberFieldParameterInput): void;
     onPasswordTriggerClicked(): void;
@@ -62,3 +62,10 @@ /**
     onInputInput(e: InputEvent): void;
+    dispatchOnInputEvent(e: InputEvent): void;
     /**
+     * check if string value is a number
+     * @param {string} value
+     * @return {boolean}
+     */
+    private isStringisNumber;
+    /**
     *
@@ -68,4 +75,16 @@ * @param {InputEvent} e
     onInputBeforeInput(e: InputEvent): void;
+    private dispatchBeforeInputEvent;
     onInputChange(e: Event): void;
     dispatchOnChangeEvent(): void;
+    /**
+     * check if input validation list is fullfilled or not
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult}
+     */
+    checkValidity(showError?: boolean): ValidationResult;
+    /**
+     * @deprecated use checkValidity instead it will be removed in future version
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult}
+     */
     triggerInputValidation(showError?: boolean): ValidationResult;
@@ -72,0 +91,0 @@ checkInputValidation(value: string): ValidationResult;

dist/JBInput.js

 var HTML = "<div class=\"jb-input-web-component\">\r\n    <label class=\"--hide\"><span class=\"label-value\"></span></label>\r\n    <div class=\"input-box\">\r\n        <div class=\"jb-input-start-section-wrapper\">\r\n            <slot name=\"start-section\"></slot>\r\n        </div>\r\n        <input>\r\n        <div class=\"password-trigger\">\r\n            <svg viewBox=\"0 0 120 120\">\r\n                <path class=\"eye-line\" stroke-linecap=\"round\"></path>\r\n                <circle cx=\"60\" cy=\"60\" r=\"20\"></circle>\r\n            </svg>\r\n        </div>\r\n        <div class=\"jb-input-end-section-wrapper\">\r\n            <slot name=\"end-section\"></slot>\r\n        </div>\r\n    </div>\r\n    <div class=\"message-box\"></div>\r\n</div>";
 
-var css_248z = ":host(:focus), :host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 12px 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: 4px 0px;\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid 1px var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box.--type-number {\n  grid-template-columns: auto 1fr auto auto;\n}\n.jb-input-web-component .input-box.--type-number input {\n  width: 100%;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons {\n  display: flex;\n  height: 100%;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .number-control-button {\n  width: var(--jb-input-number-button-width, 36px);\n  height: 100%;\n  text-align: center;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button {\n  background: var(--jb-input-increase-button-bg, transparent);\n  border: var(--jb-input-increase-button-border, none);\n  border-radius: var(--jb-input-increase-button-border-radius, 0);\n  box-sizing: border-box;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button .increase-icon {\n  stroke: var(--jb-input-increase-button-color, #bbb);\n  stroke-width: 14px;\n  height: 100%;\n  width: 100%;\n  display: block;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button:hover .increase-icon {\n  stroke: var(--jb-input-increase-button-color-hover, #00b600);\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button {\n  border: var(--jb-input-decrease-button-border, none);\n  border-radius: var(--jb-input-decrease-button-border-radius, 0);\n  background: var(--jb-input-decrease-button-bg, transparent);\n  box-sizing: border-box;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button .decrease-icon {\n  stroke: var(--jb-input-decrease-button-color, #bbb);\n  stroke-width: 14px;\n  height: 100%;\n  width: 100%;\n  display: block;\n}\n.jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button:hover .decrease-icon {\n  stroke: var(--jb-input-decrease-button-color-hover, #FF1026);\n}\n.jb-input-web-component .input-box.type-password {\n  grid-template-columns: auto 1fr auto auto;\n}\n.jb-input-web-component .input-box.type-password .password-trigger {\n  display: block;\n  height: 28px;\n  width: 28px;\n  margin: 4px 0 4px 0px;\n  margin-inline-end: 8px;\n  cursor: pointer;\n}\n.jb-input-web-component .input-box.type-password .password-trigger svg {\n  width: 100%;\n  height: 100%;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transition: 0.2s;\n}\n.jb-input-web-component .input-box.type-password .password-trigger svg.password-visible .eye-line {\n  stroke: #00b600;\n  d: path(\"M 10 60 C 30 20 100 20 110 60\");\n}\n.jb-input-web-component .input-box.type-password .password-trigger svg.password-visible circle {\n  opacity: 1;\n  transition: 0.2s 0.2s;\n  transform: translateX(8px);\n}\n:host([direction=ltr]) .jb-input-web-component .input-box.type-password .password-trigger svg.password-visible circle {\n  transform: translateX(-8px);\n}\n.jb-input-web-component .input-box.type-password .password-trigger svg .eye-line {\n  stroke-width: 14px;\n  stroke: #bbb;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transition: 0.3s;\n  d: path(\"M 0 60 C 40 100 80 100 120 60\");\n}\n.jb-input-web-component .input-box.type-password .password-trigger svg circle {\n  fill: #00b600;\n  opacity: 0;\n  transition: 0.3s 0s;\n}\n.jb-input-web-component .input-box .password-trigger {\n  display: none;\n}\n.jb-input-web-component .input-box .number-control-buttons {\n  display: none;\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1em);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1em);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7em);\n  padding: 2px 8px;\n  color: #929292;\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCSW5wdXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQWE7QUFDZjs7QUFFQTtFQUNFLFdBQVc7RUFDWCxzQ0FBc0M7QUFDeEM7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0UsV0FBVztFQUNYLGVBQWU7RUFDZixjQUFjO0VBQ2QsaURBQWlEO0VBQ2pELDJDQUEyQztBQUM3QztBQUNBO0VBQ0UsYUFBYTtBQUNmO0FBQ0E7RUFDRSxXQUFXO0VBQ1gsc0JBQXNCO0VBQ3RCLG9DQUFvQztFQUNwQyx1REFBdUQ7RUFDdkQsa0RBQWtEO0VBQ2xELG1HQUFtRztFQUNuRyxrREFBa0Q7RUFDbEQsZUFBZTtFQUNmLHlCQUF5QjtFQUN6QixnQkFBZ0I7RUFDaEIsYUFBYTtFQUNiLG9DQUFvQztFQUNwQyw0Q0FBNEM7QUFDOUM7QUFDQTtFQUNFLHlEQUF5RDtFQUN6RCxrREFBa0Q7QUFDcEQ7QUFDQTtFQUNFLHlDQUF5QztBQUMzQztBQUNBO0VBQ0UsV0FBVztBQUNiO0FBQ0E7RUFDRSxhQUFhO0VBQ2IsWUFBWTtBQUNkO0FBQ0E7RUFDRSxnREFBZ0Q7RUFDaEQsWUFBWTtFQUNaLGtCQUFrQjtBQUNwQjtBQUNBO0VBQ0UsMkRBQTJEO0VBQzNELG9EQUFvRDtFQUNwRCwrREFBK0Q7RUFDL0Qsc0JBQXNCO0FBQ3hCO0FBQ0E7RUFDRSxtREFBbUQ7RUFDbkQsa0JBQWtCO0VBQ2xCLFlBQVk7RUFDWixXQUFXO0VBQ1gsY0FBYztBQUNoQjtBQUNBO0VBQ0UsNERBQTREO0FBQzlEO0FBQ0E7RUFDRSxvREFBb0Q7RUFDcEQsK0RBQStEO0VBQy9ELDJEQUEyRDtFQUMzRCxzQkFBc0I7QUFDeEI7QUFDQTtFQUNFLG1EQUFtRDtFQUNuRCxrQkFBa0I7RUFDbEIsWUFBWTtFQUNaLFdBQVc7RUFDWCxjQUFjO0FBQ2hCO0FBQ0E7RUFDRSw0REFBNEQ7QUFDOUQ7QUFDQTtFQUNFLHlDQUF5QztBQUMzQztBQUNBO0VBQ0UsY0FBYztFQUNkLFlBQVk7RUFDWixXQUFXO0VBQ1gscUJBQXFCO0VBQ3JCLHNCQUFzQjtFQUN0QixlQUFlO0FBQ2pCO0FBQ0E7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLHFCQUFxQjtFQUNyQixzQkFBc0I7RUFDdEIsZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRSxlQUFlO0VBQ2Ysd0NBQXdDO0FBQzFDO0FBQ0E7RUFDRSxVQUFVO0VBQ1YscUJBQXFCO0VBQ3JCLDBCQUEwQjtBQUM1QjtBQUNBO0VBQ0UsMkJBQTJCO0FBQzdCO0FBQ0E7RUFDRSxrQkFBa0I7RUFDbEIsWUFBWTtFQUNaLFVBQVU7RUFDVixxQkFBcUI7RUFDckIsc0JBQXNCO0VBQ3RCLGdCQUFnQjtFQUNoQix3Q0FBd0M7QUFDMUM7QUFDQTtFQUNFLGFBQWE7RUFDYixVQUFVO0VBQ1YsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0UsWUFBWTtFQUNaLFdBQVc7RUFDWCxzQkFBc0I7RUFDdEIsWUFBWTtFQUNaLDZCQUE2QjtFQUM3Qix1REFBdUQ7RUFDdkQsY0FBYztFQUNkLG9CQUFvQjtFQUNwQixpREFBaUQ7RUFDakQsMkNBQTJDO0VBQzNDLFNBQVM7RUFDVCxnQkFBZ0I7RUFDaEIscURBQXFEO0VBQ3JELG1EQUFtRDtFQUNuRCxnQ0FBZ0M7RUFDaEMsWUFBWTtBQUNkO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFLGlEQUFpRDtFQUNqRCx1REFBdUQ7QUFDekQ7QUFDQTtFQUNFLHdCQUF3QjtFQUN4QixTQUFTO0FBQ1g7QUFDQTtFQUNFLDBCQUEwQjtBQUM1QjtBQUNBO0VBQ0UsbURBQW1EO0VBQ25ELGdCQUFnQjtFQUNoQixjQUFjO0VBQ2QsbURBQW1EO0FBQ3JEO0FBQ0E7RUFDRSxVQUFVO0FBQ1o7QUFDQTtFQUNFLCtDQUErQztBQUNqRCIsImZpbGUiOiJKQklucHV0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6aG9zdCg6Zm9jdXMpLCA6aG9zdCg6Zm9jdXMtdmlzaWJsZSkge1xuICBvdXRsaW5lOiBub25lO1xufVxuXG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCB7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXJnaW46IHZhcigtLWpiLWlucHV0LW1hcmdpbiwgMTJweCAwKTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50OmZvY3VzLXZpc2libGUge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgbGFiZWwge1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiA0cHggMHB4O1xuICBkaXNwbGF5OiBibG9jaztcbiAgZm9udC1zaXplOiB2YXIoLS1qYi1pbnB1dC1sYWJlbC1mb250LXNpemUsIDAuOGVtKTtcbiAgY29sb3I6IHZhcigtLWpiLWlucHV0LWxhYmVsLWNvbG9yLCAjMWYxNzM1KTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IGxhYmVsLi0taGlkZSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogdmFyKC0tamItaW5wdXQtaGVpZ2h0LCA0MHB4KTtcbiAgYm9yZGVyOiBzb2xpZCAxcHggdmFyKC0tamItaW5wdXQtYm9yZGVyLWNvbG9yLCAjZjdmNmY2KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItaW5wdXQtYmdjb2xvciwgI2Y3ZjZmNik7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIHZhcigtLWpiLWlucHV0LWJvcmRlci1ib3R0b20td2lkdGgsIDNweCkgdmFyKC0tamItaW5wdXQtYm9yZGVyLWNvbG9yLCAjZjdmNmY2KTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItaW5wdXQtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gIG1hcmdpbjogNHB4IDBweDtcbiAgdHJhbnNpdGlvbjogZWFzZSAwLjNzIGFsbDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvIDFmciBhdXRvO1xuICBib3gtc2hhZG93OiB2YXIoLS1qYi1pbnB1dC1ib3gtc2hhZG93LCBub25lKTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1qYi1pbnB1dC1ib3JkZXItY29sb3ItZm9jdXMsICMxZTI4MzIpO1xuICBib3gtc2hhZG93OiB2YXIoLS1qYi1pbnB1dC1ib3gtc2hhZG93LWZvY3VzLCBub25lKTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciB7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byAxZnIgYXV0byBhdXRvO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIGlucHV0IHtcbiAgd2lkdGg6IDEwMCU7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94Li0tdHlwZS1udW1iZXIgLm51bWJlci1jb250cm9sLXdyYXBwZXIgLm51bWJlci1jb250cm9sLWJ1dHRvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94Li0tdHlwZS1udW1iZXIgLm51bWJlci1jb250cm9sLXdyYXBwZXIgLm51bWJlci1jb250cm9sLWJ1dHRvbnMgLm51bWJlci1jb250cm9sLWJ1dHRvbiB7XG4gIHdpZHRoOiB2YXIoLS1qYi1pbnB1dC1udW1iZXItYnV0dG9uLXdpZHRoLCAzNnB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94Li0tdHlwZS1udW1iZXIgLm51bWJlci1jb250cm9sLXdyYXBwZXIgLm51bWJlci1jb250cm9sLWJ1dHRvbnMgLmluY3JlYXNlLW51bWJlci1idXR0b24ge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tYmcsIHRyYW5zcGFyZW50KTtcbiAgYm9yZGVyOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tYm9yZGVyLCBub25lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItaW5wdXQtaW5jcmVhc2UtYnV0dG9uLWJvcmRlci1yYWRpdXMsIDApO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5pbmNyZWFzZS1udW1iZXItYnV0dG9uIC5pbmNyZWFzZS1pY29uIHtcbiAgc3Ryb2tlOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tY29sb3IsICNiYmIpO1xuICBzdHJva2Utd2lkdGg6IDE0cHg7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5pbmNyZWFzZS1udW1iZXItYnV0dG9uOmhvdmVyIC5pbmNyZWFzZS1pY29uIHtcbiAgc3Ryb2tlOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tY29sb3ItaG92ZXIsICMwMGI2MDApO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5kZWNyZWFzZS1udW1iZXItYnV0dG9uIHtcbiAgYm9yZGVyOiB2YXIoLS1qYi1pbnB1dC1kZWNyZWFzZS1idXR0b24tYm9yZGVyLCBub25lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItaW5wdXQtZGVjcmVhc2UtYnV0dG9uLWJvcmRlci1yYWRpdXMsIDApO1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1qYi1pbnB1dC1kZWNyZWFzZS1idXR0b24tYmcsIHRyYW5zcGFyZW50KTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciAubnVtYmVyLWNvbnRyb2wtd3JhcHBlciAubnVtYmVyLWNvbnRyb2wtYnV0dG9ucyAuZGVjcmVhc2UtbnVtYmVyLWJ1dHRvbiAuZGVjcmVhc2UtaWNvbiB7XG4gIHN0cm9rZTogdmFyKC0tamItaW5wdXQtZGVjcmVhc2UtYnV0dG9uLWNvbG9yLCAjYmJiKTtcbiAgc3Ryb2tlLXdpZHRoOiAxNHB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBibG9jaztcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciAubnVtYmVyLWNvbnRyb2wtd3JhcHBlciAubnVtYmVyLWNvbnRyb2wtYnV0dG9ucyAuZGVjcmVhc2UtbnVtYmVyLWJ1dHRvbjpob3ZlciAuZGVjcmVhc2UtaWNvbiB7XG4gIHN0cm9rZTogdmFyKC0tamItaW5wdXQtZGVjcmVhc2UtYnV0dG9uLWNvbG9yLWhvdmVyLCAjRkYxMDI2KTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCB7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byAxZnIgYXV0byBhdXRvO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogMjhweDtcbiAgd2lkdGg6IDI4cHg7XG4gIG1hcmdpbjogNHB4IDAgNHB4IDBweDtcbiAgbWFyZ2luLWlubGluZS1lbmQ6IDhweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2ZyB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHN0cm9rZS1saW5lY2FwOiByb3VuZDtcbiAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDtcbiAgdHJhbnNpdGlvbjogMC4ycztcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcucGFzc3dvcmQtdmlzaWJsZSAuZXllLWxpbmUge1xuICBzdHJva2U6ICMwMGI2MDA7XG4gIGQ6IHBhdGgoXCJNIDEwIDYwIEMgMzAgMjAgMTAwIDIwIDExMCA2MFwiKTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcucGFzc3dvcmQtdmlzaWJsZSBjaXJjbGUge1xuICBvcGFjaXR5OiAxO1xuICB0cmFuc2l0aW9uOiAwLjJzIDAuMnM7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWCg4cHgpO1xufVxuOmhvc3QoW2RpcmVjdGlvbj1sdHJdKSAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnLnBhc3N3b3JkLXZpc2libGUgY2lyY2xlIHtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC04cHgpO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2ZyAuZXllLWxpbmUge1xuICBzdHJva2Utd2lkdGg6IDE0cHg7XG4gIHN0cm9rZTogI2JiYjtcbiAgZmlsbDogbm9uZTtcbiAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kO1xuICBzdHJva2UtbGluZWpvaW46IHJvdW5kO1xuICB0cmFuc2l0aW9uOiAwLjNzO1xuICBkOiBwYXRoKFwiTSAwIDYwIEMgNDAgMTAwIDgwIDEwMCAxMjAgNjBcIik7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnIGNpcmNsZSB7XG4gIGZpbGw6ICMwMGI2MDA7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zaXRpb246IDAuM3MgMHM7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IC5wYXNzd29yZC10cmlnZ2VyIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggLm51bWJlci1jb250cm9sLWJ1dHRvbnMge1xuICBkaXNwbGF5OiBub25lO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveCBpbnB1dCB7XG4gIGJvcmRlcjogbm9uZTtcbiAgd2lkdGg6IDEwMCU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IHZhcigtLWpiLWlucHV0LWlucHV0LXBhZGRpbmcsIDJweCAxMnB4IDAgMTJweCk7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgZm9udC1zaXplOiB2YXIoLS1qYi1pbnB1dC12YWx1ZS1mb250LXNpemUsIDEuMWVtKTtcbiAgY29sb3I6IHZhcigtLWpiLWlucHV0LXZhbHVlLWNvbG9yLCAjMWYxNzM1KTtcbiAgbWFyZ2luOiAwO1xuICBib3JkZXItcmFkaXVzOiAwO1xuICB0ZXh0LWFsaWduOiB2YXIoLS1qYi1pbnB1dC1pbnB1dC10ZXh0LWFsaWduLCBpbml0aWFsKTtcbiAgZGlyZWN0aW9uOiB2YXIoLS1qYi1pbnB1dC1pbnB1dC1kaXJlY3Rpb24sIGluaGVyaXQpO1xuICAvKiBDaHJvbWUsIFNhZmFyaSwgRWRnZSwgT3BlcmEgKi9cbiAgLyogRmlyZWZveCAqL1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveCBpbnB1dDpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0OjpwbGFjZWhvbGRlciB7XG4gIGNvbG9yOiB2YXIoLS1qYi1pbnB1dC1wbGFjZWhvbGRlci1jb2xvciwgaW5pdGlhbCk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tamItaW5wdXQtcGxhY2Vob2xkZXItZm9udC1zaXplLCAxLjFlbSk7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0Ojotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLCAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0Ojotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcbiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuICBtYXJnaW46IDA7XG59XG4uamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0W3R5cGU9bnVtYmVyXSB7XG4gIC1tb3otYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94IHtcbiAgZm9udC1zaXplOiB2YXIoLS1qYi1pbnB1dC1tZXNzYWdlLWZvbnQtc2l6ZSwgMC43ZW0pO1xuICBwYWRkaW5nOiAycHggOHB4O1xuICBjb2xvcjogIzkyOTI5MjtcbiAgZGlzcGxheTogdmFyKC0tamItaW5wdXQtbWVzc2FnZS1ib3gtZGlzcGxheSwgYmxvY2spO1xufVxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94OmVtcHR5IHtcbiAgcGFkZGluZzogMDtcbn1cbi5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveC5lcnJvciB7XG4gIGNvbG9yOiB2YXIoLS1qYi1pbnB1dC1tZXNzYWdlLWVycm9yLWNvbG9yLCByZWQpO1xufSJdfQ== */";
+var css_248z = ":host(:focus), :host(:focus-visible) {\n  outline: none; }\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 12px 0); }\n  .jb-input-web-component:focus-visible {\n    outline: none; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: 4px 0px;\n    display: block;\n    font-size: var(--jb-input-label-font-size, 0.8em);\n    color: var(--jb-input-label-color, #1f1735); }\n    .jb-input-web-component label.--hide {\n      display: none; }\n  .jb-input-web-component .input-box {\n    width: 100%;\n    box-sizing: border-box;\n    height: var(--jb-input-height, 40px);\n    border: solid 1px var(--jb-input-border-color, #f7f6f6);\n    background-color: var(--jb-input-bgcolor, #f7f6f6);\n    border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n    border-radius: var(--jb-input-border-radius, 16px);\n    margin: 4px 0px;\n    transition: ease 0.3s all;\n    overflow: hidden;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    box-shadow: var(--jb-input-box-shadow, none); }\n    .jb-input-web-component .input-box:focus-within {\n      border-color: var(--jb-input-border-color-focus, #1e2832);\n      box-shadow: var(--jb-input-box-shadow-focus, none); }\n    .jb-input-web-component .input-box.--type-number {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.--type-number input {\n        width: 100%; }\n      .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons {\n        display: flex;\n        height: 100%; }\n        .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .number-control-button {\n          width: var(--jb-input-number-button-width, 36px);\n          height: 100%;\n          text-align: center; }\n        .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button {\n          background: var(--jb-input-increase-button-bg, transparent);\n          border: var(--jb-input-increase-button-border, none);\n          border-radius: var(--jb-input-increase-button-border-radius, 0);\n          box-sizing: border-box; }\n          .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button .increase-icon {\n            stroke: var(--jb-input-increase-button-color, #bbb);\n            stroke-width: 14px;\n            height: 100%;\n            width: 100%;\n            display: block; }\n          .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .increase-number-button:hover .increase-icon {\n            stroke: var(--jb-input-increase-button-color-hover, #00b600); }\n        .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button {\n          border: var(--jb-input-decrease-button-border, none);\n          border-radius: var(--jb-input-decrease-button-border-radius, 0);\n          background: var(--jb-input-decrease-button-bg, transparent);\n          box-sizing: border-box; }\n          .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button .decrease-icon {\n            stroke: var(--jb-input-decrease-button-color, #bbb);\n            stroke-width: 14px;\n            height: 100%;\n            width: 100%;\n            display: block; }\n          .jb-input-web-component .input-box.--type-number .number-control-wrapper .number-control-buttons .decrease-number-button:hover .decrease-icon {\n            stroke: var(--jb-input-decrease-button-color-hover, #FF1026); }\n    .jb-input-web-component .input-box.type-password {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.type-password .password-trigger {\n        display: block;\n        height: 28px;\n        width: 28px;\n        margin: 4px 0 4px 0px;\n        margin-inline-end: 8px;\n        cursor: pointer; }\n        .jb-input-web-component .input-box.type-password .password-trigger svg {\n          width: 100%;\n          height: 100%;\n          stroke-linecap: round;\n          stroke-linejoin: round;\n          transition: 0.2s; }\n          .jb-input-web-component .input-box.type-password .password-trigger svg.password-visible .eye-line {\n            stroke: #00b600;\n            d: path(\"M 10 60 C 30 20 100 20 110 60\"); }\n          .jb-input-web-component .input-box.type-password .password-trigger svg.password-visible circle {\n            opacity: 1;\n            transition: 0.2s 0.2s;\n            transform: translateX(8px); }\n            :host([direction=\"ltr\"]) .jb-input-web-component .input-box.type-password .password-trigger svg.password-visible circle {\n              transform: translateX(-8px); }\n          .jb-input-web-component .input-box.type-password .password-trigger svg .eye-line {\n            stroke-width: 14px;\n            stroke: #bbb;\n            fill: none;\n            stroke-linecap: round;\n            stroke-linejoin: round;\n            transition: 0.3s;\n            d: path(\"M 0 60 C 40 100 80 100 120 60\"); }\n          .jb-input-web-component .input-box.type-password .password-trigger svg circle {\n            fill: #00b600;\n            opacity: 0;\n            transition: 0.3s 0s; }\n    .jb-input-web-component .input-box .password-trigger {\n      display: none; }\n    .jb-input-web-component .input-box .number-control-buttons {\n      display: none; }\n    .jb-input-web-component .input-box input {\n      border: none;\n      width: 100%;\n      box-sizing: border-box;\n      height: 100%;\n      background-color: transparent;\n      padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n      display: block;\n      font-family: inherit;\n      font-size: var(--jb-input-value-font-size, 1.1em);\n      color: var(--jb-input-value-color, #1f1735);\n      margin: 0;\n      border-radius: 0;\n      text-align: var(--jb-input-input-text-align, initial);\n      direction: var(--jb-input-input-direction, inherit);\n      /* Chrome, Safari, Edge, Opera */\n      /* Firefox */ }\n      .jb-input-web-component .input-box input:focus {\n        outline: none; }\n      .jb-input-web-component .input-box input::placeholder {\n        color: var(--jb-input-placeholder-color, initial);\n        font-size: var(--jb-input-placeholder-font-size, 1.1em); }\n      .jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0; }\n      .jb-input-web-component .input-box input[type=\"number\"] {\n        -moz-appearance: textfield; }\n  .jb-input-web-component .message-box {\n    font-size: var(--jb-input-message-font-size, 0.7em);\n    padding: 2px 8px;\n    color: #929292;\n    display: var(--jb-input-message-box-display, block); }\n    .jb-input-web-component .message-box:empty {\n      padding: 0; }\n    .jb-input-web-component .message-box.error {\n      color: var(--jb-input-message-error-color, red); }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCSW5wdXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQWEsRUFBRTs7QUFFakI7RUFDRSxXQUFXO0VBQ1gsc0NBQXNDLEVBQUU7RUFDeEM7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxXQUFXO0lBQ1gsZUFBZTtJQUNmLGNBQWM7SUFDZCxpREFBaUQ7SUFDakQsMkNBQTJDLEVBQUU7SUFDN0M7TUFDRSxhQUFhLEVBQUU7RUFDbkI7SUFDRSxXQUFXO0lBQ1gsc0JBQXNCO0lBQ3RCLG9DQUFvQztJQUNwQyx1REFBdUQ7SUFDdkQsa0RBQWtEO0lBQ2xELG1HQUFtRztJQUNuRyxrREFBa0Q7SUFDbEQsZUFBZTtJQUNmLHlCQUF5QjtJQUN6QixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLG9DQUFvQztJQUNwQyw0Q0FBNEMsRUFBRTtJQUM5QztNQUNFLHlEQUF5RDtNQUN6RCxrREFBa0QsRUFBRTtJQUN0RDtNQUNFLHlDQUF5QyxFQUFFO01BQzNDO1FBQ0UsV0FBVyxFQUFFO01BQ2Y7UUFDRSxhQUFhO1FBQ2IsWUFBWSxFQUFFO1FBQ2Q7VUFDRSxnREFBZ0Q7VUFDaEQsWUFBWTtVQUNaLGtCQUFrQixFQUFFO1FBQ3RCO1VBQ0UsMkRBQTJEO1VBQzNELG9EQUFvRDtVQUNwRCwrREFBK0Q7VUFDL0Qsc0JBQXNCLEVBQUU7VUFDeEI7WUFDRSxtREFBbUQ7WUFDbkQsa0JBQWtCO1lBQ2xCLFlBQVk7WUFDWixXQUFXO1lBQ1gsY0FBYyxFQUFFO1VBQ2xCO1lBQ0UsNERBQTRELEVBQUU7UUFDbEU7VUFDRSxvREFBb0Q7VUFDcEQsK0RBQStEO1VBQy9ELDJEQUEyRDtVQUMzRCxzQkFBc0IsRUFBRTtVQUN4QjtZQUNFLG1EQUFtRDtZQUNuRCxrQkFBa0I7WUFDbEIsWUFBWTtZQUNaLFdBQVc7WUFDWCxjQUFjLEVBQUU7VUFDbEI7WUFDRSw0REFBNEQsRUFBRTtJQUN0RTtNQUNFLHlDQUF5QyxFQUFFO01BQzNDO1FBQ0UsY0FBYztRQUNkLFlBQVk7UUFDWixXQUFXO1FBQ1gscUJBQXFCO1FBQ3JCLHNCQUFzQjtRQUN0QixlQUFlLEVBQUU7UUFDakI7VUFDRSxXQUFXO1VBQ1gsWUFBWTtVQUNaLHFCQUFxQjtVQUNyQixzQkFBc0I7VUFDdEIsZ0JBQWdCLEVBQUU7VUFDbEI7WUFDRSxlQUFlO1lBQ2Ysd0NBQXdDLEVBQUU7VUFDNUM7WUFDRSxVQUFVO1lBQ1YscUJBQXFCO1lBQ3JCLDBCQUEwQixFQUFFO1lBQzVCO2NBQ0UsMkJBQTJCLEVBQUU7VUFDakM7WUFDRSxrQkFBa0I7WUFDbEIsWUFBWTtZQUNaLFVBQVU7WUFDVixxQkFBcUI7WUFDckIsc0JBQXNCO1lBQ3RCLGdCQUFnQjtZQUNoQix3Q0FBd0MsRUFBRTtVQUM1QztZQUNFLGFBQWE7WUFDYixVQUFVO1lBQ1YsbUJBQW1CLEVBQUU7SUFDN0I7TUFDRSxhQUFhLEVBQUU7SUFDakI7TUFDRSxhQUFhLEVBQUU7SUFDakI7TUFDRSxZQUFZO01BQ1osV0FBVztNQUNYLHNCQUFzQjtNQUN0QixZQUFZO01BQ1osNkJBQTZCO01BQzdCLHVEQUF1RDtNQUN2RCxjQUFjO01BQ2Qsb0JBQW9CO01BQ3BCLGlEQUFpRDtNQUNqRCwyQ0FBMkM7TUFDM0MsU0FBUztNQUNULGdCQUFnQjtNQUNoQixxREFBcUQ7TUFDckQsbURBQW1EO01BQ25ELGdDQUFnQztNQUNoQyxZQUFZLEVBQUU7TUFDZDtRQUNFLGFBQWEsRUFBRTtNQUNqQjtRQUNFLGlEQUFpRDtRQUNqRCx1REFBdUQsRUFBRTtNQUMzRDtRQUNFLHdCQUF3QjtRQUN4QixTQUFTLEVBQUU7TUFDYjtRQUNFLDBCQUEwQixFQUFFO0VBQ2xDO0lBQ0UsbURBQW1EO0lBQ25ELGdCQUFnQjtJQUNoQixjQUFjO0lBQ2QsbURBQW1ELEVBQUU7SUFDckQ7TUFDRSxVQUFVLEVBQUU7SUFDZDtNQUNFLCtDQUErQyxFQUFFIiwiZmlsZSI6IkpCSW5wdXQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIjpob3N0KDpmb2N1cyksIDpob3N0KDpmb2N1cy12aXNpYmxlKSB7XG4gIG91dGxpbmU6IG5vbmU7IH1cblxuLmpiLWlucHV0LXdlYi1jb21wb25lbnQge1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiB2YXIoLS1qYi1pbnB1dC1tYXJnaW4sIDEycHggMCk7IH1cbiAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQ6Zm9jdXMtdmlzaWJsZSB7XG4gICAgb3V0bGluZTogbm9uZTsgfVxuICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCBsYWJlbCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWFyZ2luOiA0cHggMHB4O1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tamItaW5wdXQtbGFiZWwtZm9udC1zaXplLCAwLjhlbSk7XG4gICAgY29sb3I6IHZhcigtLWpiLWlucHV0LWxhYmVsLWNvbG9yLCAjMWYxNzM1KTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IGxhYmVsLi0taGlkZSB7XG4gICAgICBkaXNwbGF5OiBub25lOyB9XG4gIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgaGVpZ2h0OiB2YXIoLS1qYi1pbnB1dC1oZWlnaHQsIDQwcHgpO1xuICAgIGJvcmRlcjogc29saWQgMXB4IHZhcigtLWpiLWlucHV0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItaW5wdXQtYmdjb2xvciwgI2Y3ZjZmNik7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgdmFyKC0tamItaW5wdXQtYm9yZGVyLWJvdHRvbS13aWR0aCwgM3B4KSB2YXIoLS1qYi1pbnB1dC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLWlucHV0LWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgIG1hcmdpbjogNHB4IDBweDtcbiAgICB0cmFuc2l0aW9uOiBlYXNlIDAuM3MgYWxsO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gMWZyIGF1dG87XG4gICAgYm94LXNoYWRvdzogdmFyKC0tamItaW5wdXQtYm94LXNoYWRvdywgbm9uZSk7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94OmZvY3VzLXdpdGhpbiB7XG4gICAgICBib3JkZXItY29sb3I6IHZhcigtLWpiLWlucHV0LWJvcmRlci1jb2xvci1mb2N1cywgIzFlMjgzMik7XG4gICAgICBib3gtc2hhZG93OiB2YXIoLS1qYi1pbnB1dC1ib3gtc2hhZG93LWZvY3VzLCBub25lKTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gMWZyIGF1dG8gYXV0bzsgfVxuICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIGlucHV0IHtcbiAgICAgICAgd2lkdGg6IDEwMCU7IH1cbiAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciAubnVtYmVyLWNvbnRyb2wtd3JhcHBlciAubnVtYmVyLWNvbnRyb2wtYnV0dG9ucyB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGhlaWdodDogMTAwJTsgfVxuICAgICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94Li0tdHlwZS1udW1iZXIgLm51bWJlci1jb250cm9sLXdyYXBwZXIgLm51bWJlci1jb250cm9sLWJ1dHRvbnMgLm51bWJlci1jb250cm9sLWJ1dHRvbiB7XG4gICAgICAgICAgd2lkdGg6IHZhcigtLWpiLWlucHV0LW51bWJlci1idXR0b24td2lkdGgsIDM2cHgpO1xuICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7IH1cbiAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5pbmNyZWFzZS1udW1iZXItYnV0dG9uIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tYmcsIHRyYW5zcGFyZW50KTtcbiAgICAgICAgICBib3JkZXI6IHZhcigtLWpiLWlucHV0LWluY3JlYXNlLWJ1dHRvbi1ib3JkZXIsIG5vbmUpO1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLWlucHV0LWluY3JlYXNlLWJ1dHRvbi1ib3JkZXItcmFkaXVzLCAwKTtcbiAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OyB9XG4gICAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5pbmNyZWFzZS1udW1iZXItYnV0dG9uIC5pbmNyZWFzZS1pY29uIHtcbiAgICAgICAgICAgIHN0cm9rZTogdmFyKC0tamItaW5wdXQtaW5jcmVhc2UtYnV0dG9uLWNvbG9yLCAjYmJiKTtcbiAgICAgICAgICAgIHN0cm9rZS13aWR0aDogMTRweDtcbiAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7IH1cbiAgICAgICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94Li0tdHlwZS1udW1iZXIgLm51bWJlci1jb250cm9sLXdyYXBwZXIgLm51bWJlci1jb250cm9sLWJ1dHRvbnMgLmluY3JlYXNlLW51bWJlci1idXR0b246aG92ZXIgLmluY3JlYXNlLWljb24ge1xuICAgICAgICAgICAgc3Ryb2tlOiB2YXIoLS1qYi1pbnB1dC1pbmNyZWFzZS1idXR0b24tY29sb3ItaG92ZXIsICMwMGI2MDApOyB9XG4gICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciAubnVtYmVyLWNvbnRyb2wtd3JhcHBlciAubnVtYmVyLWNvbnRyb2wtYnV0dG9ucyAuZGVjcmVhc2UtbnVtYmVyLWJ1dHRvbiB7XG4gICAgICAgICAgYm9yZGVyOiB2YXIoLS1qYi1pbnB1dC1kZWNyZWFzZS1idXR0b24tYm9yZGVyLCBub25lKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1pbnB1dC1kZWNyZWFzZS1idXR0b24tYm9yZGVyLXJhZGl1cywgMCk7XG4gICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tamItaW5wdXQtZGVjcmVhc2UtYnV0dG9uLWJnLCB0cmFuc3BhcmVudCk7XG4gICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDsgfVxuICAgICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3guLS10eXBlLW51bWJlciAubnVtYmVyLWNvbnRyb2wtd3JhcHBlciAubnVtYmVyLWNvbnRyb2wtYnV0dG9ucyAuZGVjcmVhc2UtbnVtYmVyLWJ1dHRvbiAuZGVjcmVhc2UtaWNvbiB7XG4gICAgICAgICAgICBzdHJva2U6IHZhcigtLWpiLWlucHV0LWRlY3JlYXNlLWJ1dHRvbi1jb2xvciwgI2JiYik7XG4gICAgICAgICAgICBzdHJva2Utd2lkdGg6IDE0cHg7XG4gICAgICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrOyB9XG4gICAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC4tLXR5cGUtbnVtYmVyIC5udW1iZXItY29udHJvbC13cmFwcGVyIC5udW1iZXItY29udHJvbC1idXR0b25zIC5kZWNyZWFzZS1udW1iZXItYnV0dG9uOmhvdmVyIC5kZWNyZWFzZS1pY29uIHtcbiAgICAgICAgICAgIHN0cm9rZTogdmFyKC0tamItaW5wdXQtZGVjcmVhc2UtYnV0dG9uLWNvbG9yLWhvdmVyLCAjRkYxMDI2KTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gMWZyIGF1dG8gYXV0bzsgfVxuICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIGhlaWdodDogMjhweDtcbiAgICAgICAgd2lkdGg6IDI4cHg7XG4gICAgICAgIG1hcmdpbjogNHB4IDAgNHB4IDBweDtcbiAgICAgICAgbWFyZ2luLWlubGluZS1lbmQ6IDhweDtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyOyB9XG4gICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcge1xuICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7XG4gICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAwLjJzOyB9XG4gICAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2Zy5wYXNzd29yZC12aXNpYmxlIC5leWUtbGluZSB7XG4gICAgICAgICAgICBzdHJva2U6ICMwMGI2MDA7XG4gICAgICAgICAgICBkOiBwYXRoKFwiTSAxMCA2MCBDIDMwIDIwIDEwMCAyMCAxMTAgNjBcIik7IH1cbiAgICAgICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnLnBhc3N3b3JkLXZpc2libGUgY2lyY2xlIHtcbiAgICAgICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgICAgICB0cmFuc2l0aW9uOiAwLjJzIDAuMnM7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoOHB4KTsgfVxuICAgICAgICAgICAgOmhvc3QoW2RpcmVjdGlvbj1cImx0clwiXSkgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2Zy5wYXNzd29yZC12aXNpYmxlIGNpcmNsZSB7XG4gICAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtOHB4KTsgfVxuICAgICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcgLmV5ZS1saW5lIHtcbiAgICAgICAgICAgIHN0cm9rZS13aWR0aDogMTRweDtcbiAgICAgICAgICAgIHN0cm9rZTogI2JiYjtcbiAgICAgICAgICAgIGZpbGw6IG5vbmU7XG4gICAgICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7XG4gICAgICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kO1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogMC4zcztcbiAgICAgICAgICAgIGQ6IHBhdGgoXCJNIDAgNjAgQyA0MCAxMDAgODAgMTAwIDEyMCA2MFwiKTsgfVxuICAgICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcgY2lyY2xlIHtcbiAgICAgICAgICAgIGZpbGw6ICMwMGI2MDA7XG4gICAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogMC4zcyAwczsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggLnBhc3N3b3JkLXRyaWdnZXIge1xuICAgICAgZGlzcGxheTogbm9uZTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggLm51bWJlci1jb250cm9sLWJ1dHRvbnMge1xuICAgICAgZGlzcGxheTogbm9uZTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggaW5wdXQge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICBwYWRkaW5nOiB2YXIoLS1qYi1pbnB1dC1pbnB1dC1wYWRkaW5nLCAycHggMTJweCAwIDEycHgpO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0tamItaW5wdXQtdmFsdWUtZm9udC1zaXplLCAxLjFlbSk7XG4gICAgICBjb2xvcjogdmFyKC0tamItaW5wdXQtdmFsdWUtY29sb3IsICMxZjE3MzUpO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgYm9yZGVyLXJhZGl1czogMDtcbiAgICAgIHRleHQtYWxpZ246IHZhcigtLWpiLWlucHV0LWlucHV0LXRleHQtYWxpZ24sIGluaXRpYWwpO1xuICAgICAgZGlyZWN0aW9uOiB2YXIoLS1qYi1pbnB1dC1pbnB1dC1kaXJlY3Rpb24sIGluaGVyaXQpO1xuICAgICAgLyogQ2hyb21lLCBTYWZhcmksIEVkZ2UsIE9wZXJhICovXG4gICAgICAvKiBGaXJlZm94ICovIH1cbiAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggaW5wdXQ6Zm9jdXMge1xuICAgICAgICBvdXRsaW5lOiBub25lOyB9XG4gICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0OjpwbGFjZWhvbGRlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1qYi1pbnB1dC1wbGFjZWhvbGRlci1jb2xvciwgaW5pdGlhbCk7XG4gICAgICAgIGZvbnQtc2l6ZTogdmFyKC0tamItaW5wdXQtcGxhY2Vob2xkZXItZm9udC1zaXplLCAxLjFlbSk7IH1cbiAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggaW5wdXQ6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggaW5wdXQ6Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuICAgICAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgIG1hcmdpbjogMDsgfVxuICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveCBpbnB1dFt0eXBlPVwibnVtYmVyXCJdIHtcbiAgICAgICAgLW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7IH1cbiAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94IHtcbiAgICBmb250LXNpemU6IHZhcigtLWpiLWlucHV0LW1lc3NhZ2UtZm9udC1zaXplLCAwLjdlbSk7XG4gICAgcGFkZGluZzogMnB4IDhweDtcbiAgICBjb2xvcjogIzkyOTI5MjtcbiAgICBkaXNwbGF5OiB2YXIoLS1qYi1pbnB1dC1tZXNzYWdlLWJveC1kaXNwbGF5LCBibG9jayk7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3g6ZW1wdHkge1xuICAgICAgcGFkZGluZzogMDsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveC5lcnJvciB7XG4gICAgICBjb2xvcjogdmFyKC0tamItaW5wdXQtbWVzc2FnZS1lcnJvci1jb2xvciwgcmVkKTsgfVxuIl19 */";
 
@@ -9,3 +9,3 @@ var NumberInputButtonsHTML = "<div class=\"number-control-buttons\">\r\n    <div class=\"increase-number-button number-control-button\">\r\n        <svg class=\"increase-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M60,40 L60,80\"></path>\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n    <div class=\"decrease-number-button number-control-button\">\r\n        <svg class=\"decrease-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n</div>";
 
-var css_248z$1 = ".jb-input-inbox-element-web-component {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 0 8px;\n  width: auto;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluYm94LWVsZW1lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsdUJBQXVCO0VBQ3ZCLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3QixjQUFjO0VBQ2QsV0FBVztBQUNiIiwiZmlsZSI6ImluYm94LWVsZW1lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1pbnB1dC1pbmJveC1lbGVtZW50LXdlYi1jb21wb25lbnQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdy15OiBoaWRkZW47XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwIDhweDtcbiAgd2lkdGg6IGF1dG87XG59Il19 */";
+var css_248z$1 = ".jb-input-inbox-element-web-component {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 0 8px;\n  width: auto; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluYm94LWVsZW1lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsdUJBQXVCO0VBQ3ZCLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3QixjQUFjO0VBQ2QsV0FBVyxFQUFFIiwiZmlsZSI6ImluYm94LWVsZW1lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1pbnB1dC1pbmJveC1lbGVtZW50LXdlYi1jb21wb25lbnQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdy15OiBoaWRkZW47XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwIDhweDtcbiAgd2lkdGg6IGF1dG87IH1cbiJdfQ== */";
 
@@ -88,8 +88,8 @@ class JBInputInboxElementWebComponent extends HTMLElement {
         const standardedValue = this.standardValue(value);
-        this.#value = standardedValue;
+        this.#value = standardedValue.value;
         //comment for typescript problem
         if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-            this.internals_.setFormValue(standardedValue);
+            this.internals_.setFormValue(standardedValue.value);
         }
-        this.elements.input.value = standardedValue;
+        this.elements.input.value = standardedValue.displayValue;
     }
@@ -101,3 +101,3 @@ get validationList() {
         this.#validationList = value;
-        this.triggerInputValidation(false);
+        this.checkValidity(false);
     }
@@ -151,5 +151,8 @@ constructor() {
     standardValue(valueString) {
-        let standardedValue = valueString;
+        let standardedValue = {
+            displayValue: valueString,
+            value: valueString
+        };
         if (this.getAttribute('type') == "number") {
-            standardedValue = this.standardValueForNumberInput(`${standardedValue}`);
+            standardedValue = this.standardValueForNumberInput(valueString);
         }
@@ -160,6 +163,18 @@ return standardedValue;
      *
-     * @param {String} valueString
+     * @param {String} inputValueString
      * @return {String} standard value
      */
-    standardValueForNumberInput(valueString) {
+    standardValueForNumberInput(inputValueString) {
+        if (inputValueString == '-' && this.numberFieldParameters.acceptNegative == true) {
+            //if user type - and we accept negative number we let user to continue typing
+            return {
+                displayValue: inputValueString,
+                value: inputValueString
+            };
+        }
+        let valueString = inputValueString;
+        //if  comma separator is used we need to remove it
+        if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
+            valueString = valueString.replace(new RegExp(`${this.numberFieldParameters.thousandSeparator}`, 'g'), '');
+        }
         //if our input type is number and user want to set it to new value we do nececcery logic here
@@ -188,3 +203,11 @@ const value = parseFloat(valueString);
         }
-        return valueString;
+        const standardValueObject = {
+            displayValue: valueString,
+            value: valueString,
+        };
+        // add thousand separator comma
+        if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
+            standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, this.numberFieldParameters.thousandSeparator);
+        }
+        return standardValueObject;
     }
@@ -217,3 +240,7 @@ registerEventListener() {
             //if user type or paste something not a number, this char will be filled the replacement in most cases will be '0'
-            invalidNumberReplacement: ''
+            invalidNumberReplacement: '',
+            //for money and big number seperate with a comma
+            useThousandSeparator: false,
+            thousandSeparator: ',',
+            acceptNegative: true,
         };
@@ -240,3 +267,6 @@ }
             case 'type':
-                this.elements.input.setAttribute('type', value);
+                if (value !== 'number') {
+                    //we handle number manually
+                    this.elements.input.setAttribute('type', value);
+                }
                 if (value == "password") {
@@ -246,2 +276,5 @@ this.initPassword();
                 if (value == "number") {
+                    if (this.getAttribute('inputmode') == null) {
+                        this.setAttribute('inputmode', 'numeric');
+                    }
                     this.initNumberField();
@@ -287,3 +320,3 @@ }
      * change number input config base on developer need
-     * @param {NumberFieldParameter} numberFieldParameters
+     * @param {NumberFieldParameterInput} numberFieldParameters
      */
@@ -300,2 +333,11 @@ setNumberFieldParameter(numberFieldParameters) {
         }
+        if (typeof numberFieldParameters.useThousandSeparator == 'boolean') {
+            this.numberFieldParameters.useThousandSeparator = numberFieldParameters.useThousandSeparator;
+        }
+        if (typeof numberFieldParameters.thousandSeparator == 'string') {
+            this.numberFieldParameters.thousandSeparator = numberFieldParameters.thousandSeparator;
+        }
+        if (typeof numberFieldParameters.acceptNegative == 'boolean') {
+            this.numberFieldParameters.acceptNegative = numberFieldParameters.acceptNegative;
+        }
     }
@@ -331,3 +373,2 @@ onPasswordTriggerClicked() {
             }
-            //debugger;
         }
@@ -394,3 +435,6 @@ //trigger componnet event
         this.value = inputText;
-        this.triggerInputValidation(false);
+        this.checkValidity(false);
+        this.dispatchOnInputEvent(e);
+    }
+    dispatchOnInputEvent(e) {
         const eventInitDict = {
@@ -412,2 +456,15 @@ bubbles: e.bubbles,
     /**
+     * check if string value is a number
+     * @param {string} value
+     * @return {boolean}
+     */
+    isStringisNumber(value) {
+        if (value == null || value == undefined || value.trim().length == 0) {
+            return false;
+        }
+        else {
+            return !isNaN(Number(value));
+        }
+    }
+    /**
     *
@@ -417,2 +474,23 @@ * @param {InputEvent} e
     onInputBeforeInput(e) {
+        const endCarretPos = e.target.selectionEnd || 0;
+        const startCarretPos = e.target.selectionStart || 0;
+        let isPreventDefault = false;
+        // we check number input type field and prevent non number values
+        if (this.getAttribute('type') == 'number' && e.inputType !== 'deleteContentBackward' && !this.isStringisNumber(e.data)) {
+            isPreventDefault = true;
+            // we made exception for . char if its valid by user
+            if (e.data == '.' && this.numberFieldParameters.decimalPrecision !== 0 && this.value.indexOf('.') == -1 && !(endCarretPos == 0 || startCarretPos == 0) && !(this.numberFieldParameters.decimalPrecision !== null && this.value.substring(endCarretPos).length > this.numberFieldParameters.decimalPrecision)) {
+                isPreventDefault = false;
+            }
+            //for '-' char we check if negetive number is allowed
+            if (this.numberFieldParameters && this.numberFieldParameters.acceptNegative && e.data == '-' && (startCarretPos == 0 || endCarretPos == 0)) {
+                isPreventDefault = false;
+            }
+        }
+        if (isPreventDefault) {
+            e.preventDefault();
+        }
+        this.dispatchBeforeInputEvent(e);
+    }
+    dispatchBeforeInputEvent(e) {
         const eventInitDict = {
@@ -435,6 +513,7 @@ bubbles: e.bubbles,
         }
+        return event.defaultPrevented;
     }
     onInputChange(e) {
         const inputText = e.target.value;
-        this.triggerInputValidation(true);
+        this.checkValidity(true);
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
@@ -454,3 +533,8 @@ this.value = inputText;
     }
-    triggerInputValidation(showError = true) {
+    /**
+     * check if input validation list is fullfilled or not
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult}
+     */
+    checkValidity(showError = true) {
         // this method is for use out of component  for example if user click on submit button and developer want to check if all fields are valid
@@ -476,2 +560,10 @@ //takeAction determine if we want to show user error in web component difualtManner or developer will handle it by himself
     }
+    /**
+     * @deprecated use checkValidity instead it will be removed in future version
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult}
+     */
+    triggerInputValidation(showError = true) {
+        return this.checkValidity(showError);
+    }
     checkInputValidation(value) {
@@ -555,3 +647,6 @@ const validationResult = {
             }
-            const newNumber = addFloatNumber(currentNumber, (-1 * this.numberFieldParameters.step));
+            let newNumber = addFloatNumber(currentNumber, (-1 * this.numberFieldParameters.step));
+            if (newNumber < 0 && !this.numberFieldParameters.acceptNegative) {
+                newNumber = 0;
+            }
             this.value = `${newNumber}`;
@@ -558,0 +653,0 @@ this.dispatchOnChangeEvent();

dist/Types.d.ts

@@ -14,3 +14,10 @@ export declare type ElementsObject = {
     invalidNumberReplacement: string;
+    useThousandSeparator: boolean;
+    thousandSeparator: string;
+    acceptNegative: boolean;
 };
+declare type Paritial<T> = {
+    [P in keyof T]?: T[P];
+};
+export declare type NumberFieldParameterInput = Paritial<NumberFieldParameter>;
 export declare type ValidationResultSummary = {
@@ -33,2 +40,6 @@ isValid: boolean | null;
 };
+export declare type JBInputStandardValueObject = {
+    value: string;
+    displayValue: string;
+};
 declare global {
@@ -39,1 +50,2 @@ interface ElementInternals {
 }
+export {};

lib/JBInput.ts

@@ -5,7 +5,7 @@ import HTML from './JBInput.html';
 import './inbox-element/inbox-element';
-import { ElementsObject, JBInputValidationItem, NumberFieldParameter, ValidationResult, ValidationResultItem, ValidationResultSummary } from './Types';
+import { ElementsObject, JBInputStandardValueObject, JBInputValidationItem, NumberFieldParameter, NumberFieldParameterInput, ValidationResult, ValidationResultItem, ValidationResultSummary } from './Types';
 export class JBInputWebComponent extends HTMLElement {
     static get formAssociated() { return true; }
     #value = '';
-    elements?: ElementsObject;
+    elements!: ElementsObject;
     #validationList: JBInputValidationItem[] = [];
@@ -24,8 +24,8 @@ #disabled = false;
         const standardedValue = this.standardValue(value);
-        this.#value = standardedValue;
+        this.#value = standardedValue.value;
         //comment for typescript problem
         if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-            this.internals_.setFormValue(standardedValue);
+            this.internals_.setFormValue(standardedValue.value);
         }
-        this.elements!.input.value = standardedValue;
+        this.elements.input.value = standardedValue.displayValue;
     }
@@ -37,3 +37,3 @@ get validationList(): JBInputValidationItem[] {
         this.#validationList = value;
-        this.triggerInputValidation(false);
+        this.checkValidity(false);
     }
@@ -88,6 +88,9 @@ constructor() {
      */
-    standardValue(valueString: string): string {
-        let standardedValue = valueString;
+    standardValue(valueString: string): JBInputStandardValueObject {
+        let standardedValue:JBInputStandardValueObject = {
+            displayValue:valueString,
+            value:valueString
+        };
         if (this.getAttribute('type') == "number") {
-            standardedValue = this.standardValueForNumberInput(`${standardedValue}`);
+            standardedValue = this.standardValueForNumberInput(valueString);
         }
@@ -98,6 +101,18 @@ return standardedValue;
      * 
-     * @param {String} valueString 
+     * @param {String} inputValueString 
      * @return {String} standard value
      */
-    standardValueForNumberInput(valueString: string): string {
+    standardValueForNumberInput(inputValueString: string): JBInputStandardValueObject {
+        if(inputValueString == '-' && this.numberFieldParameters!.acceptNegative == true){
+            //if user type - and we accept negative number we let user to continue typing
+            return {
+                displayValue:inputValueString,
+                value:inputValueString
+            };
+        }
+        let valueString = inputValueString;
+        //if  comma separator is used we need to remove it
+        if(this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator){
+            valueString = valueString.replace(new RegExp(`${this.numberFieldParameters.thousandSeparator}`,'g'), '');
+        }
         //if our input type is number and user want to set it to new value we do nececcery logic here
@@ -126,11 +141,19 @@ const value: number = parseFloat(valueString);
         }
-        return valueString;
+        const standardValueObject: JBInputStandardValueObject = {
+            displayValue: valueString,
+            value: valueString,
+        };
+        // add thousand separator comma
+        if(this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator){
+            standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, this.numberFieldParameters.thousandSeparator);
+        }
+        return standardValueObject;
     }
     registerEventListener(): void {
-        this.elements!.input.addEventListener('change', (e) => this.onInputChange((e)));
-        this.elements!.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
-        this.elements!.input.addEventListener('input', (e) => this.onInputInput((e as unknown as InputEvent)));
-        this.elements!.input.addEventListener('keypress', this.onInputKeyPress.bind(this));
-        this.elements!.input.addEventListener('keyup', this.onInputKeyup.bind(this));
-        this.elements!.input.addEventListener('keydown', this.onInputKeyDown.bind(this));
+        this.elements.input.addEventListener('change', (e) => this.onInputChange((e)));
+        this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
+        this.elements.input.addEventListener('input', (e) => this.onInputInput((e as unknown as InputEvent)));
+        this.elements.input.addEventListener('keypress', this.onInputKeyPress.bind(this));
+        this.elements.input.addEventListener('keyup', this.onInputKeyup.bind(this));
+        this.elements.input.addEventListener('keydown', this.onInputKeyDown.bind(this));
     }
@@ -155,3 +178,8 @@ initProp() {
             //if user type or paste something not a number, this char will be filled the replacement in most cases will be '0'
-            invalidNumberReplacement: ''
+            invalidNumberReplacement: '',
+            //for money and big number seperate with a comma
+            useThousandSeparator: false,
+            thousandSeparator:',',
+            acceptNegative: true,
+            
         };
@@ -169,11 +197,14 @@ }
             case 'label':
-                this.elements!.labelValue.innerHTML = value;
+                this.elements.labelValue.innerHTML = value;
                 if (value == null || value == undefined || value == "") {
-                    this.elements!.label.classList.add('--hide');
+                    this.elements.label.classList.add('--hide');
                 } else {
-                    this.elements!.label.classList.remove('--hide');
+                    this.elements.label.classList.remove('--hide');
                 }
                 break;
             case 'type':
-                this.elements!.input.setAttribute('type', value);
+                if(value !=='number'){
+                    //we handle number manually
+                    this.elements.input.setAttribute('type', value);
+                }
                 if (value == "password") {
@@ -183,2 +214,5 @@ this.initPassword();
                 if (value == "number") {
+                    if(this.getAttribute('inputmode') == null){
+                        this.setAttribute('inputmode', 'numeric');
+                    }
                     this.initNumberField();
@@ -189,3 +223,3 @@ }
             case 'message':
-                this.elements!.messageBox.innerHTML = value;
+                this.elements.messageBox.innerHTML = value;
                 break;
@@ -196,9 +230,9 @@ case 'value':
             case 'name':
-                this.elements!.input.setAttribute('name', value);
+                this.elements.input.setAttribute('name', value);
                 break;
             case 'autocomplete':
-                this.elements!.input.setAttribute('autocomplete', value);
+                this.elements.input.setAttribute('autocomplete', value);
                 break;
             case 'placeholder':
-                this.elements!.input.placeholder = value;
+                this.elements.input.placeholder = value;
                 break;
@@ -208,10 +242,10 @@ case 'disabled':
                     this.#disabled = true;
-                    this.elements!.input.setAttribute('disabled', 'true');
+                    this.elements.input.setAttribute('disabled', 'true');
                 } else if (value == "false") {
                     this.#disabled = false;
-                    this.elements!.input.removeAttribute('disabled');
+                    this.elements.input.removeAttribute('disabled');
                 }
                 break;
             case 'inputmode':
-                this.elements!.input.setAttribute("inputmode", value);
+                this.elements.input.setAttribute("inputmode", value);
 
@@ -222,5 +256,5 @@ }
     initPassword(): void {
-        this.elements!.inputBox.classList.add('type-password');
+        this.elements.inputBox.classList.add('type-password');
         this.isPasswordvisible = false;
-        this.elements!.passwordTrigger.addEventListener('click', this.onPasswordTriggerClicked.bind(this));
+        this.elements.passwordTrigger.addEventListener('click', this.onPasswordTriggerClicked.bind(this));
     }
@@ -230,5 +264,5 @@ /**
      * change number input config base on developer need
-     * @param {NumberFieldParameter} numberFieldParameters 
+     * @param {NumberFieldParameterInput} numberFieldParameters 
      */
-    setNumberFieldParameter(numberFieldParameters: NumberFieldParameter): void {
+    setNumberFieldParameter(numberFieldParameters: NumberFieldParameterInput): void {
         if (numberFieldParameters.step && !isNaN(numberFieldParameters.step)) {
@@ -243,7 +277,16 @@ this.numberFieldParameters!.step = numberFieldParameters.step;
         }
+        if(typeof numberFieldParameters.useThousandSeparator == 'boolean'){
+            this.numberFieldParameters!.useThousandSeparator = numberFieldParameters.useThousandSeparator;
+        }
+        if(typeof numberFieldParameters.thousandSeparator == 'string'){
+            this.numberFieldParameters!.thousandSeparator = numberFieldParameters.thousandSeparator;
+        }
+        if(typeof numberFieldParameters.acceptNegative == 'boolean'){
+            this.numberFieldParameters!.acceptNegative = numberFieldParameters.acceptNegative;
+        }
     }
     onPasswordTriggerClicked(): void {
         this.isPasswordvisible = !this.isPasswordvisible;
-        const textField = this.elements!.input;
-        const passwordTriggerSVG = this.elements!.passwordTrigger.querySelector('svg')!;
+        const textField = this.elements.input;
+        const passwordTriggerSVG = this.elements.passwordTrigger.querySelector('svg')!;
         if (this.isPasswordvisible) {
@@ -273,3 +316,2 @@ passwordTriggerSVG.classList.add('password-visible');
             }
-            //debugger;
         }
@@ -336,3 +378,7 @@ //trigger componnet event
         this.value = inputText;
-        this.triggerInputValidation(false);
+        this.checkValidity(false);
+        this.dispatchOnInputEvent(e);
+
+    }
+    dispatchOnInputEvent(e: InputEvent): void {
         const eventInitDict: InputEventInit = {
@@ -352,5 +398,16 @@ bubbles: e.bubbles,
         this.dispatchEvent(event);
-
     }
     /**
+     * check if string value is a number
+     * @param {string} value 
+     * @return {boolean}
+     */
+    private isStringisNumber(value: string | null): boolean {
+        if( value == null || value == undefined ||value.trim().length == 0){
+            return false;
+        }else{
+            return !isNaN(Number(value));
+        }
+    }
+    /**
     * 
@@ -360,2 +417,23 @@ * @param {InputEvent} e
     onInputBeforeInput(e: InputEvent): void {
+        const endCarretPos = (e.target as HTMLInputElement).selectionEnd || 0;
+        const startCarretPos = (e.target as HTMLInputElement).selectionStart || 0;
+        let isPreventDefault = false;
+        // we check number input type field and prevent non number values
+        if(this.getAttribute('type') == 'number' && e.inputType !== 'deleteContentBackward' && !this.isStringisNumber(e.data)){
+            isPreventDefault = true;
+            // we made exception for . char if its valid by user
+            if(e.data == '.' && this.numberFieldParameters!.decimalPrecision !== 0 && this.value.indexOf('.') == -1 && !(endCarretPos == 0 || startCarretPos == 0) && !(this.numberFieldParameters!.decimalPrecision !== null && this.value.substring(endCarretPos).length > this.numberFieldParameters!.decimalPrecision)){
+                isPreventDefault = false;
+            }
+            //for '-' char we check if negetive number is allowed
+            if(this.numberFieldParameters && this.numberFieldParameters.acceptNegative && e.data == '-' && (startCarretPos == 0 || endCarretPos == 0)){
+                isPreventDefault = false;
+            }
+        }
+        if(isPreventDefault){
+            e.preventDefault();
+        }
+        this.dispatchBeforeInputEvent(e);
+    }
+    private dispatchBeforeInputEvent(e: InputEvent): boolean {
         const eventInitDict = {
@@ -378,6 +456,7 @@ bubbles: e.bubbles,
         }
+        return event.defaultPrevented;
     }
     onInputChange(e: Event): void {
         const inputText = (e.target as HTMLInputElement).value;
-        this.triggerInputValidation(true);
+        this.checkValidity(true);
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
@@ -397,6 +476,12 @@ this.value = inputText;
     }
-    triggerInputValidation(showError = true):ValidationResult{
+    /**
+     * check if input validation list is fullfilled or not
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult} 
+     */
+    checkValidity(showError = true):ValidationResult{
+    
         // this method is for use out of component  for example if user click on submit button and developer want to check if all fields are valid
         //takeAction determine if we want to show user error in web component difualtManner or developer will handle it by himself
-        const inputText = this.elements!.input.value;
+        const inputText = this.elements.input.value;
 
@@ -419,2 +504,10 @@ const validationResult = this.checkInputValidation(inputText);
     }
+    /**
+     * @deprecated use checkValidity instead it will be removed in future version
+     * @param {boolean} showError indicate whether show error or not
+     * @return {ValidationResult} 
+     */
+    triggerInputValidation(showError = true):ValidationResult{
+        return this.checkValidity(showError);
+    }
     checkInputValidation(value: string) {
@@ -459,9 +552,9 @@ const validationResult: ValidationResult = {
     showValidationError(error: string) {
-        this.elements!.messageBox.innerHTML = error;
-        this.elements!.messageBox.classList.add('error');
+        this.elements.messageBox.innerHTML = error;
+        this.elements.messageBox.classList.add('error');
     }
     clearValidationError() {
         const text = this.getAttribute('message') || '';
-        this.elements!.messageBox.innerHTML = text;
-        this.elements!.messageBox.classList.remove('error');
+        this.elements.messageBox.innerHTML = text;
+        this.elements.messageBox.classList.remove('error');
     }
@@ -473,3 +566,3 @@ /**
         //public method
-        this.elements!.input.focus();
+        this.elements.input.focus();
     }
@@ -498,3 +591,6 @@ initNumberField() {
             if (isNaN(currentNumber)) { return; }
-            const newNumber = addFloatNumber(currentNumber, (-1 * this.numberFieldParameters!.step));
+            let newNumber = addFloatNumber(currentNumber, (-1 * this.numberFieldParameters!.step));
+            if(newNumber < 0 && !this.numberFieldParameters!.acceptNegative){
+                newNumber = 0;
+            }
             this.value = `${newNumber}`;
@@ -504,3 +600,3 @@ this.dispatchOnChangeEvent();
         //if user set type="number" attribute
-        this.elements!.inputBox.classList.add('--type-number');
+        this.elements.inputBox.classList.add('--type-number');
         const buttonsElement = document.createElement('div');
@@ -511,3 +607,3 @@ buttonsElement.classList.add("number-control-wrapper");
         buttonsElement.querySelector('.decrease-number-button')!.addEventListener('click', this.decreaseNumber.bind(this));
-        this.elements!.inputBox.appendChild(buttonsElement);
+        this.elements.inputBox.appendChild(buttonsElement);
     }
@@ -514,0 +610,0 @@ }

lib/Types.ts

@@ -14,3 +14,10 @@ export type ElementsObject = {
     invalidNumberReplacement:string;
+    useThousandSeparator:boolean;
+    thousandSeparator:string;
+    acceptNegative:boolean;
 }
+type Paritial<T> = {
+    [P in keyof T]?: T[P];
+}
+export type NumberFieldParameterInput = Paritial<NumberFieldParameter>;
 export type ValidationResultSummary = {
@@ -33,2 +40,6 @@ isValid:boolean | null;
 }
+export type JBInputStandardValueObject = {
+    value:string;
+    displayValue:string;
+}
 //becuase this._internal is not a standard we have to extend HTMLELEMENT to use it
@@ -35,0 +46,0 @@ declare global {

package.json

@@ -17,3 +17,3 @@ {
   ],
-  "version": "2.0.5",
+  "version": "2.1.5",
   "bugs": "https://github.com/javadbat/jb-input/issues",
@@ -20,0 +20,0 @@ "license": "MIT",

README.md

@@ -91,3 +91,3 @@ # jb-input
 
-you can check is image input value meet your validation standad by `dom.triggerInputValidation(showError)`
+you can check is image input value meet your validation standad by `dom.checkValidity(showError)`
 the `showError` parameter is optional and its defualt is true but you cant set it false so if value is invalid component dont react and show error to user and just return validation object.  
@@ -113,3 +113,9 @@ in `change` event we have detail object you can access it by `event.detail.isValid` so you can see in new value is a valid value or not this way is really useful when you dont access to DOM directly like what we have in js frameworks.
         // what char replaced to input if user paste some illeglal value defualt is '' (empty string)
-        invalidNumberReplacement:'0'
+        invalidNumberReplacement:'0',
+        // separate every 3 number with comma like 1000000 => 1,000,000
+        useThousandSeparator:false,
+        // which char we use to separate thousand number
+        thousandSeparator:',',
+        //can input accept negativenumber or not
+        acceptNegative:true,
     })
@@ -116,0 +122,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

148585

increased by16.15%

Lines of code

1543

increased by18.15%

Number of lines in readme file

193

increased by3.21%

No dependency changes