jb-input-react - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/JBInput.js

 import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import 'jb-input';
 
@@ -108,1061 +109,2 @@ function createCommonjsModule(fn, basedir, module) {
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-var assertThisInitialized = _assertThisInitialized;
-
-function _classPrivateFieldBase(receiver, privateKey) {
-  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-    throw new TypeError("attempted to use private field on non-instance");
-  }
-
-  return receiver;
-}
-
-var classPrivateFieldLooseBase = _classPrivateFieldBase;
-
-var id = 0;
-
-function _classPrivateFieldKey(name) {
-  return "__private_" + id++ + "_" + name;
-}
-
-var classPrivateFieldLooseKey = _classPrivateFieldKey;
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-var classCallCheck = _classCallCheck;
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-var createClass = _createClass;
-
-var setPrototypeOf = createCommonjsModule(function (module) {
-function _setPrototypeOf(o, p) {
-  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-module.exports = _setPrototypeOf;
-});
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) setPrototypeOf(subClass, superClass);
-}
-
-var inherits = _inherits;
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return assertThisInitialized(self);
-}
-
-var possibleConstructorReturn = _possibleConstructorReturn;
-
-var getPrototypeOf = createCommonjsModule(function (module) {
-function _getPrototypeOf(o) {
-  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-module.exports = _getPrototypeOf;
-});
-
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-var isNativeFunction = _isNativeFunction;
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-var isNativeReflectConstruct = _isNativeReflectConstruct;
-
-var construct = createCommonjsModule(function (module) {
-function _construct(Parent, args, Class) {
-  if (isNativeReflectConstruct()) {
-    module.exports = _construct = Reflect.construct;
-  } else {
-    module.exports = _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
-}
-
-module.exports = _construct;
-});
-
-var wrapNativeSuper = createCommonjsModule(function (module) {
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  module.exports = _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return construct(Class, arguments, getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return setPrototypeOf(Wrapper, Class);
-  };
-
-  return _wrapNativeSuper(Class);
-}
-
-module.exports = _wrapNativeSuper;
-});
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-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.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 */";
-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 HTML$1 = "<div class=\"jb-input-inbox-element-web-component\">\r\n    <slot></slot>\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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluYm94LWVsZW1lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsdUJBQXVCO0VBQ3ZCLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3QixjQUFjO0VBQ2QsV0FBVyxFQUFFIiwiZmlsZSI6ImluYm94LWVsZW1lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1pbnB1dC1pbmJveC1lbGVtZW50LXdlYi1jb21wb25lbnQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdy15OiBoaWRkZW47XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwIDhweDtcbiAgd2lkdGg6IGF1dG87IH1cbiJdfQ== */";
-
-var JBInputInboxElementWebComponent = /*#__PURE__*/function (_HTMLElement) {
-  inherits(JBInputInboxElementWebComponent, _HTMLElement);
-
-  var _super = _createSuper(JBInputInboxElementWebComponent);
-
-  function JBInputInboxElementWebComponent() {
-    var _this;
-
-    classCallCheck(this, JBInputInboxElementWebComponent);
-
-    _this = _super.call(this);
-
-    _this.initWebComponent();
-
-    return _this;
-  }
-
-  createClass(JBInputInboxElementWebComponent, [{
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      // standard web component event that called when all of dom is binded
-      this.callOnLoadEvent();
-      this.initProp();
-      this.callOnInitEvent();
-    }
-  }, {
-    key: "callOnLoadEvent",
-    value: function callOnLoadEvent() {
-      var event = new CustomEvent('load', {
-        bubbles: true,
-        composed: true
-      });
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "callOnInitEvent",
-    value: function callOnInitEvent() {
-      var event = new CustomEvent('init', {
-        bubbles: true,
-        composed: true
-      });
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "initWebComponent",
-    value: function initWebComponent() {
-      this._shadowRoot = this.attachShadow({
-        mode: 'open',
-        delegatesFocus: true
-      });
-      var html = "<style>".concat(css_248z$1, "</style>") + '\n' + HTML$1;
-      var element = document.createElement('template');
-      element.innerHTML = html;
-
-      this._shadowRoot.appendChild(element.content.cloneNode(true));
-
-      this.elements = {};
-    }
-  }, {
-    key: "initProp",
-    value: function initProp() {}
-  }, {
-    key: "attributeChangedCallback",
-    value: function attributeChangedCallback(name, oldValue, newValue) {
-      // do something when an attribute has changed
-      this.onAttributeChange(name, newValue);
-    }
-  }, {
-    key: "onAttributeChange",
-    value: function onAttributeChange(name, value) {// switch (name) {
-      // }
-    }
-  }], [{
-    key: "observedAttributes",
-    get: function get() {
-      return [];
-    }
-  }]);
-
-  return JBInputInboxElementWebComponent;
-}( /*#__PURE__*/wrapNativeSuper(HTMLElement));
-
-var myElementNotExists = !customElements.get('jb-input-inbox-element');
-
-if (myElementNotExists) {
-  window.customElements.define('jb-input-inbox-element', JBInputInboxElementWebComponent);
-}
-
-var _value = classPrivateFieldLooseKey("value");
-
-var _validationList = classPrivateFieldLooseKey("validationList");
-
-var _disabled = classPrivateFieldLooseKey("disabled");
-
-var JBInputWebComponent = /*#__PURE__*/function (_HTMLElement2) {
-  inherits(JBInputWebComponent, _HTMLElement2);
-
-  var _super2 = _createSuper(JBInputWebComponent);
-
-  createClass(JBInputWebComponent, [{
-    key: "value",
-    get: function get() {
-      return classPrivateFieldLooseBase(this, _value)[_value];
-    },
-    set: function set(value) {
-      var standardedValue = this.standardValue(value);
-      classPrivateFieldLooseBase(this, _value)[_value] = standardedValue.value; //comment for typescript problem
-
-      if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-        this.internals_.setFormValue(standardedValue.value);
-      }
-
-      this.elements.input.value = standardedValue.displayValue;
-    }
-  }, {
-    key: "validationList",
-    get: function get() {
-      return classPrivateFieldLooseBase(this, _validationList)[_validationList];
-    },
-    set: function set(value) {
-      classPrivateFieldLooseBase(this, _validationList)[_validationList] = value;
-      this.checkValidity(false);
-    }
-  }], [{
-    key: "formAssociated",
-    get: function get() {
-      return true;
-    }
-  }]);
-
-  function JBInputWebComponent() {
-    var _this2;
-
-    classCallCheck(this, JBInputWebComponent);
-
-    _this2 = _super2.call(this);
-    Object.defineProperty(assertThisInitialized(_this2), _value, {
-      writable: true,
-      value: ''
-    });
-    _this2.elements = void 0;
-    Object.defineProperty(assertThisInitialized(_this2), _validationList, {
-      writable: true,
-      value: []
-    });
-    Object.defineProperty(assertThisInitialized(_this2), _disabled, {
-      writable: true,
-      value: false
-    });
-    _this2.internals_ = void 0;
-    _this2.numberFieldParameters = void 0;
-    _this2.validation = void 0;
-    _this2.isPasswordvisible = void 0;
-    _this2.increaseNumber = void 0;
-    _this2.decreaseNumber = void 0;
-
-    if (typeof _this2.attachInternals == "function") {
-      //some browser dont support attachInternals
-      _this2.internals_ = _this2.attachInternals();
-    }
-
-    _this2.initWebComponent();
-
-    return _this2;
-  }
-
-  createClass(JBInputWebComponent, [{
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      // standard web component event that called when all of dom is binded
-      this.callOnLoadEvent();
-      this.initProp();
-      this.callOnInitEvent();
-    }
-  }, {
-    key: "callOnLoadEvent",
-    value: function callOnLoadEvent() {
-      var event = new CustomEvent('load', {
-        bubbles: true,
-        composed: true
-      });
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "callOnInitEvent",
-    value: function callOnInitEvent() {
-      var event = new CustomEvent('init', {
-        bubbles: true,
-        composed: true
-      });
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "initWebComponent",
-    value: function initWebComponent() {
-      var shadowRoot = this.attachShadow({
-        mode: 'open',
-        delegatesFocus: true
-      });
-      var html = "<style>".concat(css_248z, "</style>") + '\n' + HTML;
-      var element = document.createElement('template');
-      element.innerHTML = html;
-      shadowRoot.appendChild(element.content.cloneNode(true));
-      this.elements = {
-        input: shadowRoot.querySelector('.input-box input'),
-        inputBox: shadowRoot.querySelector('.input-box'),
-        label: shadowRoot.querySelector('label'),
-        labelValue: shadowRoot.querySelector('label .label-value'),
-        messageBox: shadowRoot.querySelector('.message-box'),
-        passwordTrigger: shadowRoot.querySelector('.password-trigger')
-      };
-      this.registerEventListener();
-    }
-    /**
-     * this function will get user inputed or pasted text and convert it to standard one base on developer config
-     * @param {String} valueString
-     * @return {String} standard value
-     */
-
-  }, {
-    key: "standardValue",
-    value: function standardValue(valueString) {
-      var standardedValue = {
-        displayValue: valueString,
-        value: valueString
-      };
-
-      if (this.getAttribute('type') == "number") {
-        standardedValue = this.standardValueForNumberInput(valueString);
-      }
-
-      return standardedValue;
-    }
-    /**
-     *
-     * @param {String} inputValueString
-     * @return {String} standard value
-     */
-
-  }, {
-    key: "standardValueForNumberInput",
-    value: function 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
-        };
-      }
-
-      var valueString = inputValueString; //if  comma separator is used we need to remove it
-
-      if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-        valueString = valueString.replace(new RegExp("".concat(this.numberFieldParameters.thousandSeparator), 'g'), '');
-      } //if our input type is number and user want to set it to new value we do nececcery logic here
-
-
-      var value = parseFloat(valueString);
-
-      if (isNaN(value)) {
-        //we change nothing
-        valueString = this.numberFieldParameters.invalidNumberReplacement;
-      } //TODO: add max and min checker to prevent bigger value assignment
-      // if(value> this.numberFieldParameters.maxValue){
-      //     return `${this.numberFieldParameters.maxValue}`;
-      // }
-      // if(value< this.numberFieldParameters.minValue){
-      //     return `${this.numberFieldParameters.minValue}`;
-      // }
-
-
-      var decimalNums = valueString.split('.')[1];
-      var decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
-
-      if (!(this.numberFieldParameters.decimalPrecision === null || this.numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > this.numberFieldParameters.decimalPrecision) {
-        // truncate extra decimal
-        var checkRegex = new RegExp("^-?\\d+(?:\\.\\d{0,".concat(this.numberFieldParameters.decimalPrecision, "})?"));
-        var match = valueString.match(checkRegex);
-
-        if (match && match[0]) {
-          valueString = match[0];
-        }
-      }
-
-      var 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;
-    }
-  }, {
-    key: "registerEventListener",
-    value: function registerEventListener() {
-      var _this3 = this;
-
-      this.elements.input.addEventListener('change', function (e) {
-        return _this3.onInputChange(e);
-      });
-      this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
-      this.elements.input.addEventListener('input', function (e) {
-        return _this3.onInputInput(e);
-      });
-      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));
-    }
-  }, {
-    key: "initProp",
-    value: function initProp() {
-      classPrivateFieldLooseBase(this, _disabled)[_disabled] = false;
-      classPrivateFieldLooseBase(this, _validationList)[_validationList] = [];
-      this.value = this.getAttribute('value') || '';
-      this.validation = {
-        isValid: null,
-        message: null
-      }; //our config when user use type="number" and want more config
-
-      this.numberFieldParameters = {
-        //if input type is number we use this step to change value on +- clicks
-        step: 1,
-        //TODO: add min and max limit on type
-        // maxValue:20,
-        // minValue:10,
-        //how many decimal  place we accept
-        decimalPrecision: null,
-        //if user type or paste something not a number, this char will be filled the replacement in most cases will be '0'
-        invalidNumberReplacement: '',
-        //for money and big number seperate with a comma
-        useThousandSeparator: false,
-        thousandSeparator: ',',
-        acceptNegative: true
-      };
-    }
-  }, {
-    key: "attributeChangedCallback",
-    value: function attributeChangedCallback(name, oldValue, newValue) {
-      // do something when an attribute has changed
-      this.onAttributeChange(name, newValue);
-    }
-  }, {
-    key: "onAttributeChange",
-    value: function onAttributeChange(name, value) {
-      switch (name) {
-        case 'label':
-          this.elements.labelValue.innerHTML = value;
-
-          if (value == null || value == undefined || value == "") {
-            this.elements.label.classList.add('--hide');
-          } else {
-            this.elements.label.classList.remove('--hide');
-          }
-
-          break;
-
-        case 'type':
-          if (value !== 'number') {
-            //we handle number manually
-            this.elements.input.setAttribute('type', value);
-          }
-
-          if (value == "password") {
-            this.initPassword();
-          }
-
-          if (value == "number") {
-            if (this.getAttribute('inputmode') == null) {
-              this.setAttribute('inputmode', 'numeric');
-            }
-
-            this.initNumberField();
-          }
-
-          break;
-
-        case 'message':
-          this.elements.messageBox.innerHTML = value;
-          break;
-
-        case 'value':
-          this.value = value;
-          break;
-
-        case 'name':
-          this.elements.input.setAttribute('name', value);
-          break;
-
-        case 'autocomplete':
-          this.elements.input.setAttribute('autocomplete', value);
-          break;
-
-        case 'placeholder':
-          this.elements.input.placeholder = value;
-          break;
-
-        case 'disabled':
-          if (value == '' || value === "true") {
-            classPrivateFieldLooseBase(this, _disabled)[_disabled] = true;
-            this.elements.input.setAttribute('disabled', 'true');
-          } else if (value == "false") {
-            classPrivateFieldLooseBase(this, _disabled)[_disabled] = false;
-            this.elements.input.removeAttribute('disabled');
-          }
-
-          break;
-
-        case 'inputmode':
-          this.elements.input.setAttribute("inputmode", value);
-      }
-    }
-  }, {
-    key: "initPassword",
-    value: function initPassword() {
-      this.elements.inputBox.classList.add('type-password');
-      this.isPasswordvisible = false;
-      this.elements.passwordTrigger.addEventListener('click', this.onPasswordTriggerClicked.bind(this));
-    }
-    /**
-     * @public
-     * change number input config base on developer need
-     * @param {NumberFieldParameterInput} numberFieldParameters
-     */
-
-  }, {
-    key: "setNumberFieldParameter",
-    value: function setNumberFieldParameter(numberFieldParameters) {
-      if (numberFieldParameters.step && !isNaN(numberFieldParameters.step)) {
-        this.numberFieldParameters.step = numberFieldParameters.step;
-      }
-
-      if (numberFieldParameters.decimalPrecision && !isNaN(numberFieldParameters.decimalPrecision)) {
-        this.numberFieldParameters.decimalPrecision = numberFieldParameters.decimalPrecision;
-      }
-
-      if (numberFieldParameters.invalidNumberReplacement) {
-        this.numberFieldParameters.invalidNumberReplacement = numberFieldParameters.invalidNumberReplacement;
-      }
-
-      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;
-      }
-    }
-  }, {
-    key: "onPasswordTriggerClicked",
-    value: function onPasswordTriggerClicked() {
-      this.isPasswordvisible = !this.isPasswordvisible;
-      var textField = this.elements.input;
-      var passwordTriggerSVG = this.elements.passwordTrigger.querySelector('svg');
-
-      if (this.isPasswordvisible) {
-        passwordTriggerSVG.classList.add('password-visible');
-        textField.setAttribute('type', 'text');
-      } else {
-        passwordTriggerSVG.classList.remove('password-visible');
-        textField.setAttribute('type', 'password');
-      }
-    }
-    /**
-     *
-     * @param {KeyboardEvent} e
-     */
-
-  }, {
-    key: "onInputKeyDown",
-    value: function onInputKeyDown(e) {
-      //handle up and down on number key
-      if (this.getAttribute('type') == "number") {
-        var key = e.key;
-
-        if (key == "ArrowUp") {
-          this.increaseNumber();
-          e.preventDefault();
-        }
-
-        if (key == "ArrowDown") {
-          this.decreaseNumber();
-          e.preventDefault();
-        }
-      } //trigger componnet event
-
-
-      var keyDownnInitObj = {
-        key: e.key,
-        keyCode: e.keyCode,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        charCode: e.charCode,
-        which: e.which
-      };
-      var event = new KeyboardEvent("keydown", keyDownnInitObj);
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "onInputKeyPress",
-    value: function onInputKeyPress(e) {
-      var keyPressInitObj = {
-        key: e.key,
-        keyCode: e.keyCode,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        charCode: e.charCode,
-        which: e.which,
-        isComposing: e.isComposing,
-        cancelable: e.cancelable,
-        bubbles: e.bubbles,
-        composed: e.composed
-      };
-      var event = new KeyboardEvent('keypress', keyPressInitObj);
-      this.dispatchEvent(event);
-    }
-  }, {
-    key: "onInputKeyup",
-    value: function onInputKeyup(e) {
-      var keyUpInitObj = {
-        key: e.key,
-        keyCode: e.keyCode,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        charCode: e.charCode,
-        which: e.which
-      };
-      var event = new KeyboardEvent('keyup', keyUpInitObj);
-      this.dispatchEvent(event);
-
-      if (e.keyCode == 13) {
-        this.onInputEnter();
-      }
-    }
-  }, {
-    key: "onInputEnter",
-    value: function onInputEnter() {
-      var event = new CustomEvent('enter');
-      this.dispatchEvent(event);
-    }
-    /**
-     *
-     * @param {InputEvent} e
-     */
-
-  }, {
-    key: "onInputInput",
-    value: function onInputInput(e) {
-      var inputText = e.target.value;
-      this.value = inputText;
-      this.checkValidity(false);
-      this.dispatchOnInputEvent(e);
-    }
-  }, {
-    key: "dispatchOnInputEvent",
-    value: function dispatchOnInputEvent(e) {
-      var eventInitDict = {
-        bubbles: e.bubbles,
-        cancelable: e.cancelable,
-        composed: e.composed,
-        data: e.data,
-        isComposing: e.isComposing,
-        inputType: e.inputType,
-        dataTransfer: e.dataTransfer,
-        view: e.view,
-        detail: e.detail,
-        targetRanges: e.getTargetRanges()
-      };
-      var event = new InputEvent('input', eventInitDict);
-      this.dispatchEvent(event);
-    }
-    /**
-     * check if string value is a number
-     * @param {string} value
-     * @return {boolean}
-     */
-
-  }, {
-    key: "isStringisNumber",
-    value: function isStringisNumber(value) {
-      if (value == null || value == undefined || value.trim().length == 0) {
-        return false;
-      } else {
-        return !isNaN(Number(value));
-      }
-    }
-    /**
-    *
-    * @param {InputEvent} e
-    */
-
-  }, {
-    key: "onInputBeforeInput",
-    value: function onInputBeforeInput(e) {
-      var endCarretPos = e.target.selectionEnd || 0;
-      var startCarretPos = e.target.selectionStart || 0;
-      var 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);
-    }
-  }, {
-    key: "dispatchBeforeInputEvent",
-    value: function dispatchBeforeInputEvent(e) {
-      var eventInitDict = {
-        bubbles: e.bubbles,
-        cancelable: e.cancelable,
-        composed: e.composed,
-        data: e.data,
-        isComposing: e.isComposing,
-        inputType: e.inputType,
-        dataTransfer: e.dataTransfer,
-        view: e.view,
-        detail: e.detail,
-        targetRanges: e.getTargetRanges()
-      };
-      var event = new InputEvent('beforeinput', eventInitDict);
-      this.dispatchEvent(event);
-
-      if (event.defaultPrevented) {
-        e.preventDefault();
-      }
-
-      return event.defaultPrevented;
-    }
-  }, {
-    key: "onInputChange",
-    value: function onInputChange(e) {
-      var inputText = e.target.value;
-      this.checkValidity(true); //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
-
-      this.value = inputText;
-      this.dispatchOnChangeEvent();
-    }
-  }, {
-    key: "dispatchOnChangeEvent",
-    value: function dispatchOnChangeEvent() {
-      var validationObject = this.checkInputValidation(this.value);
-      var event = new CustomEvent('change', {
-        detail: {
-          isValid: validationObject.isAllValid,
-          validationObject: validationObject
-        }
-      });
-      this.dispatchEvent(event);
-    }
-    /**
-     * check if input validation list is fullfilled or not
-     * @param {boolean} showError indicate whether show error or not
-     * @return {ValidationResult}
-     */
-
-  }, {
-    key: "checkValidity",
-    value: function checkValidity() {
-      var showError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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
-      //takeAction determine if we want to show user error in web component difualtManner or developer will handle it by himself
-      var inputText = this.elements.input.value;
-      var validationResult = this.checkInputValidation(inputText);
-      this.validation = {
-        isValid: validationResult.isAllValid,
-        message: null
-      };
-
-      if (!validationResult.isAllValid) {
-        var firstFault = validationResult.validationList.find(function (x) {
-          return !x.isValid;
-        });
-        this.validation.message = firstFault.message;
-
-        if (showError == true) {
-          this.showValidationError(firstFault.message);
-        }
-      } else {
-        this.clearValidationError();
-      }
-
-      return validationResult;
-    }
-    /**
-     * @deprecated use checkValidity instead it will be removed in future version
-     * @param {boolean} showError indicate whether show error or not
-     * @return {ValidationResult}
-     */
-
-  }, {
-    key: "triggerInputValidation",
-    value: function triggerInputValidation() {
-      var showError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      return this.checkValidity(showError);
-    }
-  }, {
-    key: "checkInputValidation",
-    value: function checkInputValidation(value) {
-      var _this4 = this;
-
-      var validationResult = {
-        validationList: [],
-        isAllValid: true
-      };
-      this.validationList.forEach(function (validation) {
-        var res = _this4.checkValidation(value, validation);
-
-        validationResult.validationList.push(res);
-
-        if (!res.isValid) {
-          validationResult.isAllValid = false;
-        }
-      });
-      return validationResult;
-    }
-  }, {
-    key: "checkValidation",
-    value: function checkValidation(text, validation) {
-      var testRes;
-
-      if (validation.validator instanceof RegExp) {
-        testRes = validation.validator.test(text);
-        validation.validator.lastIndex = 0;
-      }
-
-      if (typeof validation.validator == "function") {
-        testRes = validation.validator(text);
-      }
-
-      if (!testRes) {
-        return {
-          isValid: false,
-          message: validation.message,
-          validation: validation
-        };
-      }
-
-      return {
-        isValid: true,
-        message: '',
-        validation: validation
-      };
-    }
-  }, {
-    key: "showValidationError",
-    value: function showValidationError(error) {
-      this.elements.messageBox.innerHTML = error;
-      this.elements.messageBox.classList.add('error');
-    }
-  }, {
-    key: "clearValidationError",
-    value: function clearValidationError() {
-      var text = this.getAttribute('message') || '';
-      this.elements.messageBox.innerHTML = text;
-      this.elements.messageBox.classList.remove('error');
-    }
-    /**
-     * @public
-     */
-
-  }, {
-    key: "focus",
-    value: function focus() {
-      //public method
-      this.elements.input.focus();
-    }
-  }, {
-    key: "initNumberField",
-    value: function initNumberField() {
-      var _this5 = this;
-
-      var addFloatNumber = function addFloatNumber(num1, num2) {
-        var prec1 = "".concat(num1).split('.')[1];
-        var prec2 = "".concat(num2).split('.')[1];
-        var zarib1 = prec1 ? Math.pow(10, prec1.length + 1) : 1;
-        var zarib2 = prec2 ? Math.pow(10, prec2.length + 1) : 1;
-        var zarib = Math.max(zarib1, zarib2);
-        var stNum1 = num1 * zarib;
-        var stNum2 = num2 * zarib;
-        var res = stNum1 + stNum2;
-        return res / zarib;
-      };
-
-      this.increaseNumber = function () {
-        var currentNumber = parseFloat(_this5.value);
-
-        if (isNaN(currentNumber)) {
-          return;
-        }
-
-        var newNumber = addFloatNumber(currentNumber, _this5.numberFieldParameters.step);
-        _this5.value = "".concat(newNumber);
-
-        _this5.dispatchOnChangeEvent();
-      };
-
-      this.decreaseNumber = function () {
-        var currentNumber = parseFloat(_this5.value);
-
-        if (isNaN(currentNumber)) {
-          return;
-        }
-
-        var newNumber = addFloatNumber(currentNumber, -1 * _this5.numberFieldParameters.step);
-
-        if (newNumber < 0 && !_this5.numberFieldParameters.acceptNegative) {
-          newNumber = 0;
-        }
-
-        _this5.value = "".concat(newNumber);
-
-        _this5.dispatchOnChangeEvent();
-      }; //if user set type="number" attribute
-
-
-      this.elements.inputBox.classList.add('--type-number');
-      var buttonsElement = document.createElement('div');
-      buttonsElement.classList.add("number-control-wrapper");
-      buttonsElement.innerHTML = NumberInputButtonsHTML;
-      buttonsElement.querySelector('.increase-number-button').addEventListener('click', this.increaseNumber.bind(this));
-      buttonsElement.querySelector('.decrease-number-button').addEventListener('click', this.decreaseNumber.bind(this));
-      this.elements.inputBox.appendChild(buttonsElement);
-    }
-  }], [{
-    key: "observedAttributes",
-    get: function get() {
-      return ['label', 'type', 'message', 'value', 'name', 'autocomplete', 'placeholder', 'disabled', 'inputmode'];
-    }
-  }]);
-
-  return JBInputWebComponent;
-}( /*#__PURE__*/wrapNativeSuper(HTMLElement));
-
-var myElementNotExists$1 = !customElements.get('jb-input');
-
-if (myElementNotExists$1) {
-  window.customElements.define('jb-input', JBInputWebComponent);
-}
-
 function useEvent(dom, event, handler) {
@@ -1169,0 +111,0 @@ var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

dist/JBInput.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
-	typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types'), require('jb-input')) :
+	typeof define === 'function' && define.amd ? define(['react', 'prop-types', 'jb-input'], factory) :
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.JBInput = factory(global.React, global.PropTypes));
@@ -116,1061 +116,2 @@ }(this, (function (React, PropTypes) { 'use strict';
 
-	function _assertThisInitialized(self) {
-	  if (self === void 0) {
-	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-	  }
-
-	  return self;
-	}
-
-	var assertThisInitialized = _assertThisInitialized;
-
-	function _classPrivateFieldBase(receiver, privateKey) {
-	  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-	    throw new TypeError("attempted to use private field on non-instance");
-	  }
-
-	  return receiver;
-	}
-
-	var classPrivateFieldLooseBase = _classPrivateFieldBase;
-
-	var id = 0;
-
-	function _classPrivateFieldKey(name) {
-	  return "__private_" + id++ + "_" + name;
-	}
-
-	var classPrivateFieldLooseKey = _classPrivateFieldKey;
-
-	function _classCallCheck(instance, Constructor) {
-	  if (!(instance instanceof Constructor)) {
-	    throw new TypeError("Cannot call a class as a function");
-	  }
-	}
-
-	var classCallCheck = _classCallCheck;
-
-	function _defineProperties(target, props) {
-	  for (var i = 0; i < props.length; i++) {
-	    var descriptor = props[i];
-	    descriptor.enumerable = descriptor.enumerable || false;
-	    descriptor.configurable = true;
-	    if ("value" in descriptor) descriptor.writable = true;
-	    Object.defineProperty(target, descriptor.key, descriptor);
-	  }
-	}
-
-	function _createClass(Constructor, protoProps, staticProps) {
-	  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-	  if (staticProps) _defineProperties(Constructor, staticProps);
-	  return Constructor;
-	}
-
-	var createClass = _createClass;
-
-	var setPrototypeOf = createCommonjsModule(function (module) {
-	function _setPrototypeOf(o, p) {
-	  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-	    o.__proto__ = p;
-	    return o;
-	  };
-
-	  return _setPrototypeOf(o, p);
-	}
-
-	module.exports = _setPrototypeOf;
-	});
-
-	function _inherits(subClass, superClass) {
-	  if (typeof superClass !== "function" && superClass !== null) {
-	    throw new TypeError("Super expression must either be null or a function");
-	  }
-
-	  subClass.prototype = Object.create(superClass && superClass.prototype, {
-	    constructor: {
-	      value: subClass,
-	      writable: true,
-	      configurable: true
-	    }
-	  });
-	  if (superClass) setPrototypeOf(subClass, superClass);
-	}
-
-	var inherits = _inherits;
-
-	function _possibleConstructorReturn(self, call) {
-	  if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
-	    return call;
-	  }
-
-	  return assertThisInitialized(self);
-	}
-
-	var possibleConstructorReturn = _possibleConstructorReturn;
-
-	var getPrototypeOf = createCommonjsModule(function (module) {
-	function _getPrototypeOf(o) {
-	  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-	    return o.__proto__ || Object.getPrototypeOf(o);
-	  };
-	  return _getPrototypeOf(o);
-	}
-
-	module.exports = _getPrototypeOf;
-	});
-
-	function _isNativeFunction(fn) {
-	  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-	}
-
-	var isNativeFunction = _isNativeFunction;
-
-	function _isNativeReflectConstruct() {
-	  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-	  if (Reflect.construct.sham) return false;
-	  if (typeof Proxy === "function") return true;
-
-	  try {
-	    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-	    return true;
-	  } catch (e) {
-	    return false;
-	  }
-	}
-
-	var isNativeReflectConstruct = _isNativeReflectConstruct;
-
-	var construct = createCommonjsModule(function (module) {
-	function _construct(Parent, args, Class) {
-	  if (isNativeReflectConstruct()) {
-	    module.exports = _construct = Reflect.construct;
-	  } else {
-	    module.exports = _construct = function _construct(Parent, args, Class) {
-	      var a = [null];
-	      a.push.apply(a, args);
-	      var Constructor = Function.bind.apply(Parent, a);
-	      var instance = new Constructor();
-	      if (Class) setPrototypeOf(instance, Class.prototype);
-	      return instance;
-	    };
-	  }
-
-	  return _construct.apply(null, arguments);
-	}
-
-	module.exports = _construct;
-	});
-
-	var wrapNativeSuper = createCommonjsModule(function (module) {
-	function _wrapNativeSuper(Class) {
-	  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-	  module.exports = _wrapNativeSuper = function _wrapNativeSuper(Class) {
-	    if (Class === null || !isNativeFunction(Class)) return Class;
-
-	    if (typeof Class !== "function") {
-	      throw new TypeError("Super expression must either be null or a function");
-	    }
-
-	    if (typeof _cache !== "undefined") {
-	      if (_cache.has(Class)) return _cache.get(Class);
-
-	      _cache.set(Class, Wrapper);
-	    }
-
-	    function Wrapper() {
-	      return construct(Class, arguments, getPrototypeOf(this).constructor);
-	    }
-
-	    Wrapper.prototype = Object.create(Class.prototype, {
-	      constructor: {
-	        value: Wrapper,
-	        enumerable: false,
-	        writable: true,
-	        configurable: true
-	      }
-	    });
-	    return setPrototypeOf(Wrapper, Class);
-	  };
-
-	  return _wrapNativeSuper(Class);
-	}
-
-	module.exports = _wrapNativeSuper;
-	});
-
-	function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-
-	function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-	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.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 */";
-	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 HTML$1 = "<div class=\"jb-input-inbox-element-web-component\">\r\n    <slot></slot>\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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluYm94LWVsZW1lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsdUJBQXVCO0VBQ3ZCLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3QixjQUFjO0VBQ2QsV0FBVyxFQUFFIiwiZmlsZSI6ImluYm94LWVsZW1lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1pbnB1dC1pbmJveC1lbGVtZW50LXdlYi1jb21wb25lbnQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdy15OiBoaWRkZW47XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwIDhweDtcbiAgd2lkdGg6IGF1dG87IH1cbiJdfQ== */";
-
-	var JBInputInboxElementWebComponent = /*#__PURE__*/function (_HTMLElement) {
-	  inherits(JBInputInboxElementWebComponent, _HTMLElement);
-
-	  var _super = _createSuper(JBInputInboxElementWebComponent);
-
-	  function JBInputInboxElementWebComponent() {
-	    var _this;
-
-	    classCallCheck(this, JBInputInboxElementWebComponent);
-
-	    _this = _super.call(this);
-
-	    _this.initWebComponent();
-
-	    return _this;
-	  }
-
-	  createClass(JBInputInboxElementWebComponent, [{
-	    key: "connectedCallback",
-	    value: function connectedCallback() {
-	      // standard web component event that called when all of dom is binded
-	      this.callOnLoadEvent();
-	      this.initProp();
-	      this.callOnInitEvent();
-	    }
-	  }, {
-	    key: "callOnLoadEvent",
-	    value: function callOnLoadEvent() {
-	      var event = new CustomEvent('load', {
-	        bubbles: true,
-	        composed: true
-	      });
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "callOnInitEvent",
-	    value: function callOnInitEvent() {
-	      var event = new CustomEvent('init', {
-	        bubbles: true,
-	        composed: true
-	      });
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "initWebComponent",
-	    value: function initWebComponent() {
-	      this._shadowRoot = this.attachShadow({
-	        mode: 'open',
-	        delegatesFocus: true
-	      });
-	      var html = "<style>".concat(css_248z$1, "</style>") + '\n' + HTML$1;
-	      var element = document.createElement('template');
-	      element.innerHTML = html;
-
-	      this._shadowRoot.appendChild(element.content.cloneNode(true));
-
-	      this.elements = {};
-	    }
-	  }, {
-	    key: "initProp",
-	    value: function initProp() {}
-	  }, {
-	    key: "attributeChangedCallback",
-	    value: function attributeChangedCallback(name, oldValue, newValue) {
-	      // do something when an attribute has changed
-	      this.onAttributeChange(name, newValue);
-	    }
-	  }, {
-	    key: "onAttributeChange",
-	    value: function onAttributeChange(name, value) {// switch (name) {
-	      // }
-	    }
-	  }], [{
-	    key: "observedAttributes",
-	    get: function get() {
-	      return [];
-	    }
-	  }]);
-
-	  return JBInputInboxElementWebComponent;
-	}( /*#__PURE__*/wrapNativeSuper(HTMLElement));
-
-	var myElementNotExists = !customElements.get('jb-input-inbox-element');
-
-	if (myElementNotExists) {
-	  window.customElements.define('jb-input-inbox-element', JBInputInboxElementWebComponent);
-	}
-
-	var _value = classPrivateFieldLooseKey("value");
-
-	var _validationList = classPrivateFieldLooseKey("validationList");
-
-	var _disabled = classPrivateFieldLooseKey("disabled");
-
-	var JBInputWebComponent = /*#__PURE__*/function (_HTMLElement2) {
-	  inherits(JBInputWebComponent, _HTMLElement2);
-
-	  var _super2 = _createSuper(JBInputWebComponent);
-
-	  createClass(JBInputWebComponent, [{
-	    key: "value",
-	    get: function get() {
-	      return classPrivateFieldLooseBase(this, _value)[_value];
-	    },
-	    set: function set(value) {
-	      var standardedValue = this.standardValue(value);
-	      classPrivateFieldLooseBase(this, _value)[_value] = standardedValue.value; //comment for typescript problem
-
-	      if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-	        this.internals_.setFormValue(standardedValue.value);
-	      }
-
-	      this.elements.input.value = standardedValue.displayValue;
-	    }
-	  }, {
-	    key: "validationList",
-	    get: function get() {
-	      return classPrivateFieldLooseBase(this, _validationList)[_validationList];
-	    },
-	    set: function set(value) {
-	      classPrivateFieldLooseBase(this, _validationList)[_validationList] = value;
-	      this.checkValidity(false);
-	    }
-	  }], [{
-	    key: "formAssociated",
-	    get: function get() {
-	      return true;
-	    }
-	  }]);
-
-	  function JBInputWebComponent() {
-	    var _this2;
-
-	    classCallCheck(this, JBInputWebComponent);
-
-	    _this2 = _super2.call(this);
-	    Object.defineProperty(assertThisInitialized(_this2), _value, {
-	      writable: true,
-	      value: ''
-	    });
-	    _this2.elements = void 0;
-	    Object.defineProperty(assertThisInitialized(_this2), _validationList, {
-	      writable: true,
-	      value: []
-	    });
-	    Object.defineProperty(assertThisInitialized(_this2), _disabled, {
-	      writable: true,
-	      value: false
-	    });
-	    _this2.internals_ = void 0;
-	    _this2.numberFieldParameters = void 0;
-	    _this2.validation = void 0;
-	    _this2.isPasswordvisible = void 0;
-	    _this2.increaseNumber = void 0;
-	    _this2.decreaseNumber = void 0;
-
-	    if (typeof _this2.attachInternals == "function") {
-	      //some browser dont support attachInternals
-	      _this2.internals_ = _this2.attachInternals();
-	    }
-
-	    _this2.initWebComponent();
-
-	    return _this2;
-	  }
-
-	  createClass(JBInputWebComponent, [{
-	    key: "connectedCallback",
-	    value: function connectedCallback() {
-	      // standard web component event that called when all of dom is binded
-	      this.callOnLoadEvent();
-	      this.initProp();
-	      this.callOnInitEvent();
-	    }
-	  }, {
-	    key: "callOnLoadEvent",
-	    value: function callOnLoadEvent() {
-	      var event = new CustomEvent('load', {
-	        bubbles: true,
-	        composed: true
-	      });
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "callOnInitEvent",
-	    value: function callOnInitEvent() {
-	      var event = new CustomEvent('init', {
-	        bubbles: true,
-	        composed: true
-	      });
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "initWebComponent",
-	    value: function initWebComponent() {
-	      var shadowRoot = this.attachShadow({
-	        mode: 'open',
-	        delegatesFocus: true
-	      });
-	      var html = "<style>".concat(css_248z, "</style>") + '\n' + HTML;
-	      var element = document.createElement('template');
-	      element.innerHTML = html;
-	      shadowRoot.appendChild(element.content.cloneNode(true));
-	      this.elements = {
-	        input: shadowRoot.querySelector('.input-box input'),
-	        inputBox: shadowRoot.querySelector('.input-box'),
-	        label: shadowRoot.querySelector('label'),
-	        labelValue: shadowRoot.querySelector('label .label-value'),
-	        messageBox: shadowRoot.querySelector('.message-box'),
-	        passwordTrigger: shadowRoot.querySelector('.password-trigger')
-	      };
-	      this.registerEventListener();
-	    }
-	    /**
-	     * this function will get user inputed or pasted text and convert it to standard one base on developer config
-	     * @param {String} valueString
-	     * @return {String} standard value
-	     */
-
-	  }, {
-	    key: "standardValue",
-	    value: function standardValue(valueString) {
-	      var standardedValue = {
-	        displayValue: valueString,
-	        value: valueString
-	      };
-
-	      if (this.getAttribute('type') == "number") {
-	        standardedValue = this.standardValueForNumberInput(valueString);
-	      }
-
-	      return standardedValue;
-	    }
-	    /**
-	     *
-	     * @param {String} inputValueString
-	     * @return {String} standard value
-	     */
-
-	  }, {
-	    key: "standardValueForNumberInput",
-	    value: function 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
-	        };
-	      }
-
-	      var valueString = inputValueString; //if  comma separator is used we need to remove it
-
-	      if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-	        valueString = valueString.replace(new RegExp("".concat(this.numberFieldParameters.thousandSeparator), 'g'), '');
-	      } //if our input type is number and user want to set it to new value we do nececcery logic here
-
-
-	      var value = parseFloat(valueString);
-
-	      if (isNaN(value)) {
-	        //we change nothing
-	        valueString = this.numberFieldParameters.invalidNumberReplacement;
-	      } //TODO: add max and min checker to prevent bigger value assignment
-	      // if(value> this.numberFieldParameters.maxValue){
-	      //     return `${this.numberFieldParameters.maxValue}`;
-	      // }
-	      // if(value< this.numberFieldParameters.minValue){
-	      //     return `${this.numberFieldParameters.minValue}`;
-	      // }
-
-
-	      var decimalNums = valueString.split('.')[1];
-	      var decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
-
-	      if (!(this.numberFieldParameters.decimalPrecision === null || this.numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > this.numberFieldParameters.decimalPrecision) {
-	        // truncate extra decimal
-	        var checkRegex = new RegExp("^-?\\d+(?:\\.\\d{0,".concat(this.numberFieldParameters.decimalPrecision, "})?"));
-	        var match = valueString.match(checkRegex);
-
-	        if (match && match[0]) {
-	          valueString = match[0];
-	        }
-	      }
-
-	      var 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;
-	    }
-	  }, {
-	    key: "registerEventListener",
-	    value: function registerEventListener() {
-	      var _this3 = this;
-
-	      this.elements.input.addEventListener('change', function (e) {
-	        return _this3.onInputChange(e);
-	      });
-	      this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
-	      this.elements.input.addEventListener('input', function (e) {
-	        return _this3.onInputInput(e);
-	      });
-	      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));
-	    }
-	  }, {
-	    key: "initProp",
-	    value: function initProp() {
-	      classPrivateFieldLooseBase(this, _disabled)[_disabled] = false;
-	      classPrivateFieldLooseBase(this, _validationList)[_validationList] = [];
-	      this.value = this.getAttribute('value') || '';
-	      this.validation = {
-	        isValid: null,
-	        message: null
-	      }; //our config when user use type="number" and want more config
-
-	      this.numberFieldParameters = {
-	        //if input type is number we use this step to change value on +- clicks
-	        step: 1,
-	        //TODO: add min and max limit on type
-	        // maxValue:20,
-	        // minValue:10,
-	        //how many decimal  place we accept
-	        decimalPrecision: null,
-	        //if user type or paste something not a number, this char will be filled the replacement in most cases will be '0'
-	        invalidNumberReplacement: '',
-	        //for money and big number seperate with a comma
-	        useThousandSeparator: false,
-	        thousandSeparator: ',',
-	        acceptNegative: true
-	      };
-	    }
-	  }, {
-	    key: "attributeChangedCallback",
-	    value: function attributeChangedCallback(name, oldValue, newValue) {
-	      // do something when an attribute has changed
-	      this.onAttributeChange(name, newValue);
-	    }
-	  }, {
-	    key: "onAttributeChange",
-	    value: function onAttributeChange(name, value) {
-	      switch (name) {
-	        case 'label':
-	          this.elements.labelValue.innerHTML = value;
-
-	          if (value == null || value == undefined || value == "") {
-	            this.elements.label.classList.add('--hide');
-	          } else {
-	            this.elements.label.classList.remove('--hide');
-	          }
-
-	          break;
-
-	        case 'type':
-	          if (value !== 'number') {
-	            //we handle number manually
-	            this.elements.input.setAttribute('type', value);
-	          }
-
-	          if (value == "password") {
-	            this.initPassword();
-	          }
-
-	          if (value == "number") {
-	            if (this.getAttribute('inputmode') == null) {
-	              this.setAttribute('inputmode', 'numeric');
-	            }
-
-	            this.initNumberField();
-	          }
-
-	          break;
-
-	        case 'message':
-	          this.elements.messageBox.innerHTML = value;
-	          break;
-
-	        case 'value':
-	          this.value = value;
-	          break;
-
-	        case 'name':
-	          this.elements.input.setAttribute('name', value);
-	          break;
-
-	        case 'autocomplete':
-	          this.elements.input.setAttribute('autocomplete', value);
-	          break;
-
-	        case 'placeholder':
-	          this.elements.input.placeholder = value;
-	          break;
-
-	        case 'disabled':
-	          if (value == '' || value === "true") {
-	            classPrivateFieldLooseBase(this, _disabled)[_disabled] = true;
-	            this.elements.input.setAttribute('disabled', 'true');
-	          } else if (value == "false") {
-	            classPrivateFieldLooseBase(this, _disabled)[_disabled] = false;
-	            this.elements.input.removeAttribute('disabled');
-	          }
-
-	          break;
-
-	        case 'inputmode':
-	          this.elements.input.setAttribute("inputmode", value);
-	      }
-	    }
-	  }, {
-	    key: "initPassword",
-	    value: function initPassword() {
-	      this.elements.inputBox.classList.add('type-password');
-	      this.isPasswordvisible = false;
-	      this.elements.passwordTrigger.addEventListener('click', this.onPasswordTriggerClicked.bind(this));
-	    }
-	    /**
-	     * @public
-	     * change number input config base on developer need
-	     * @param {NumberFieldParameterInput} numberFieldParameters
-	     */
-
-	  }, {
-	    key: "setNumberFieldParameter",
-	    value: function setNumberFieldParameter(numberFieldParameters) {
-	      if (numberFieldParameters.step && !isNaN(numberFieldParameters.step)) {
-	        this.numberFieldParameters.step = numberFieldParameters.step;
-	      }
-
-	      if (numberFieldParameters.decimalPrecision && !isNaN(numberFieldParameters.decimalPrecision)) {
-	        this.numberFieldParameters.decimalPrecision = numberFieldParameters.decimalPrecision;
-	      }
-
-	      if (numberFieldParameters.invalidNumberReplacement) {
-	        this.numberFieldParameters.invalidNumberReplacement = numberFieldParameters.invalidNumberReplacement;
-	      }
-
-	      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;
-	      }
-	    }
-	  }, {
-	    key: "onPasswordTriggerClicked",
-	    value: function onPasswordTriggerClicked() {
-	      this.isPasswordvisible = !this.isPasswordvisible;
-	      var textField = this.elements.input;
-	      var passwordTriggerSVG = this.elements.passwordTrigger.querySelector('svg');
-
-	      if (this.isPasswordvisible) {
-	        passwordTriggerSVG.classList.add('password-visible');
-	        textField.setAttribute('type', 'text');
-	      } else {
-	        passwordTriggerSVG.classList.remove('password-visible');
-	        textField.setAttribute('type', 'password');
-	      }
-	    }
-	    /**
-	     *
-	     * @param {KeyboardEvent} e
-	     */
-
-	  }, {
-	    key: "onInputKeyDown",
-	    value: function onInputKeyDown(e) {
-	      //handle up and down on number key
-	      if (this.getAttribute('type') == "number") {
-	        var key = e.key;
-
-	        if (key == "ArrowUp") {
-	          this.increaseNumber();
-	          e.preventDefault();
-	        }
-
-	        if (key == "ArrowDown") {
-	          this.decreaseNumber();
-	          e.preventDefault();
-	        }
-	      } //trigger componnet event
-
-
-	      var keyDownnInitObj = {
-	        key: e.key,
-	        keyCode: e.keyCode,
-	        code: e.code,
-	        ctrlKey: e.ctrlKey,
-	        shiftKey: e.shiftKey,
-	        altKey: e.altKey,
-	        charCode: e.charCode,
-	        which: e.which
-	      };
-	      var event = new KeyboardEvent("keydown", keyDownnInitObj);
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "onInputKeyPress",
-	    value: function onInputKeyPress(e) {
-	      var keyPressInitObj = {
-	        key: e.key,
-	        keyCode: e.keyCode,
-	        code: e.code,
-	        ctrlKey: e.ctrlKey,
-	        shiftKey: e.shiftKey,
-	        altKey: e.altKey,
-	        charCode: e.charCode,
-	        which: e.which,
-	        isComposing: e.isComposing,
-	        cancelable: e.cancelable,
-	        bubbles: e.bubbles,
-	        composed: e.composed
-	      };
-	      var event = new KeyboardEvent('keypress', keyPressInitObj);
-	      this.dispatchEvent(event);
-	    }
-	  }, {
-	    key: "onInputKeyup",
-	    value: function onInputKeyup(e) {
-	      var keyUpInitObj = {
-	        key: e.key,
-	        keyCode: e.keyCode,
-	        code: e.code,
-	        ctrlKey: e.ctrlKey,
-	        shiftKey: e.shiftKey,
-	        altKey: e.altKey,
-	        charCode: e.charCode,
-	        which: e.which
-	      };
-	      var event = new KeyboardEvent('keyup', keyUpInitObj);
-	      this.dispatchEvent(event);
-
-	      if (e.keyCode == 13) {
-	        this.onInputEnter();
-	      }
-	    }
-	  }, {
-	    key: "onInputEnter",
-	    value: function onInputEnter() {
-	      var event = new CustomEvent('enter');
-	      this.dispatchEvent(event);
-	    }
-	    /**
-	     *
-	     * @param {InputEvent} e
-	     */
-
-	  }, {
-	    key: "onInputInput",
-	    value: function onInputInput(e) {
-	      var inputText = e.target.value;
-	      this.value = inputText;
-	      this.checkValidity(false);
-	      this.dispatchOnInputEvent(e);
-	    }
-	  }, {
-	    key: "dispatchOnInputEvent",
-	    value: function dispatchOnInputEvent(e) {
-	      var eventInitDict = {
-	        bubbles: e.bubbles,
-	        cancelable: e.cancelable,
-	        composed: e.composed,
-	        data: e.data,
-	        isComposing: e.isComposing,
-	        inputType: e.inputType,
-	        dataTransfer: e.dataTransfer,
-	        view: e.view,
-	        detail: e.detail,
-	        targetRanges: e.getTargetRanges()
-	      };
-	      var event = new InputEvent('input', eventInitDict);
-	      this.dispatchEvent(event);
-	    }
-	    /**
-	     * check if string value is a number
-	     * @param {string} value
-	     * @return {boolean}
-	     */
-
-	  }, {
-	    key: "isStringisNumber",
-	    value: function isStringisNumber(value) {
-	      if (value == null || value == undefined || value.trim().length == 0) {
-	        return false;
-	      } else {
-	        return !isNaN(Number(value));
-	      }
-	    }
-	    /**
-	    *
-	    * @param {InputEvent} e
-	    */
-
-	  }, {
-	    key: "onInputBeforeInput",
-	    value: function onInputBeforeInput(e) {
-	      var endCarretPos = e.target.selectionEnd || 0;
-	      var startCarretPos = e.target.selectionStart || 0;
-	      var 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);
-	    }
-	  }, {
-	    key: "dispatchBeforeInputEvent",
-	    value: function dispatchBeforeInputEvent(e) {
-	      var eventInitDict = {
-	        bubbles: e.bubbles,
-	        cancelable: e.cancelable,
-	        composed: e.composed,
-	        data: e.data,
-	        isComposing: e.isComposing,
-	        inputType: e.inputType,
-	        dataTransfer: e.dataTransfer,
-	        view: e.view,
-	        detail: e.detail,
-	        targetRanges: e.getTargetRanges()
-	      };
-	      var event = new InputEvent('beforeinput', eventInitDict);
-	      this.dispatchEvent(event);
-
-	      if (event.defaultPrevented) {
-	        e.preventDefault();
-	      }
-
-	      return event.defaultPrevented;
-	    }
-	  }, {
-	    key: "onInputChange",
-	    value: function onInputChange(e) {
-	      var inputText = e.target.value;
-	      this.checkValidity(true); //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
-
-	      this.value = inputText;
-	      this.dispatchOnChangeEvent();
-	    }
-	  }, {
-	    key: "dispatchOnChangeEvent",
-	    value: function dispatchOnChangeEvent() {
-	      var validationObject = this.checkInputValidation(this.value);
-	      var event = new CustomEvent('change', {
-	        detail: {
-	          isValid: validationObject.isAllValid,
-	          validationObject: validationObject
-	        }
-	      });
-	      this.dispatchEvent(event);
-	    }
-	    /**
-	     * check if input validation list is fullfilled or not
-	     * @param {boolean} showError indicate whether show error or not
-	     * @return {ValidationResult}
-	     */
-
-	  }, {
-	    key: "checkValidity",
-	    value: function checkValidity() {
-	      var showError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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
-	      //takeAction determine if we want to show user error in web component difualtManner or developer will handle it by himself
-	      var inputText = this.elements.input.value;
-	      var validationResult = this.checkInputValidation(inputText);
-	      this.validation = {
-	        isValid: validationResult.isAllValid,
-	        message: null
-	      };
-
-	      if (!validationResult.isAllValid) {
-	        var firstFault = validationResult.validationList.find(function (x) {
-	          return !x.isValid;
-	        });
-	        this.validation.message = firstFault.message;
-
-	        if (showError == true) {
-	          this.showValidationError(firstFault.message);
-	        }
-	      } else {
-	        this.clearValidationError();
-	      }
-
-	      return validationResult;
-	    }
-	    /**
-	     * @deprecated use checkValidity instead it will be removed in future version
-	     * @param {boolean} showError indicate whether show error or not
-	     * @return {ValidationResult}
-	     */
-
-	  }, {
-	    key: "triggerInputValidation",
-	    value: function triggerInputValidation() {
-	      var showError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-	      return this.checkValidity(showError);
-	    }
-	  }, {
-	    key: "checkInputValidation",
-	    value: function checkInputValidation(value) {
-	      var _this4 = this;
-
-	      var validationResult = {
-	        validationList: [],
-	        isAllValid: true
-	      };
-	      this.validationList.forEach(function (validation) {
-	        var res = _this4.checkValidation(value, validation);
-
-	        validationResult.validationList.push(res);
-
-	        if (!res.isValid) {
-	          validationResult.isAllValid = false;
-	        }
-	      });
-	      return validationResult;
-	    }
-	  }, {
-	    key: "checkValidation",
-	    value: function checkValidation(text, validation) {
-	      var testRes;
-
-	      if (validation.validator instanceof RegExp) {
-	        testRes = validation.validator.test(text);
-	        validation.validator.lastIndex = 0;
-	      }
-
-	      if (typeof validation.validator == "function") {
-	        testRes = validation.validator(text);
-	      }
-
-	      if (!testRes) {
-	        return {
-	          isValid: false,
-	          message: validation.message,
-	          validation: validation
-	        };
-	      }
-
-	      return {
-	        isValid: true,
-	        message: '',
-	        validation: validation
-	      };
-	    }
-	  }, {
-	    key: "showValidationError",
-	    value: function showValidationError(error) {
-	      this.elements.messageBox.innerHTML = error;
-	      this.elements.messageBox.classList.add('error');
-	    }
-	  }, {
-	    key: "clearValidationError",
-	    value: function clearValidationError() {
-	      var text = this.getAttribute('message') || '';
-	      this.elements.messageBox.innerHTML = text;
-	      this.elements.messageBox.classList.remove('error');
-	    }
-	    /**
-	     * @public
-	     */
-
-	  }, {
-	    key: "focus",
-	    value: function focus() {
-	      //public method
-	      this.elements.input.focus();
-	    }
-	  }, {
-	    key: "initNumberField",
-	    value: function initNumberField() {
-	      var _this5 = this;
-
-	      var addFloatNumber = function addFloatNumber(num1, num2) {
-	        var prec1 = "".concat(num1).split('.')[1];
-	        var prec2 = "".concat(num2).split('.')[1];
-	        var zarib1 = prec1 ? Math.pow(10, prec1.length + 1) : 1;
-	        var zarib2 = prec2 ? Math.pow(10, prec2.length + 1) : 1;
-	        var zarib = Math.max(zarib1, zarib2);
-	        var stNum1 = num1 * zarib;
-	        var stNum2 = num2 * zarib;
-	        var res = stNum1 + stNum2;
-	        return res / zarib;
-	      };
-
-	      this.increaseNumber = function () {
-	        var currentNumber = parseFloat(_this5.value);
-
-	        if (isNaN(currentNumber)) {
-	          return;
-	        }
-
-	        var newNumber = addFloatNumber(currentNumber, _this5.numberFieldParameters.step);
-	        _this5.value = "".concat(newNumber);
-
-	        _this5.dispatchOnChangeEvent();
-	      };
-
-	      this.decreaseNumber = function () {
-	        var currentNumber = parseFloat(_this5.value);
-
-	        if (isNaN(currentNumber)) {
-	          return;
-	        }
-
-	        var newNumber = addFloatNumber(currentNumber, -1 * _this5.numberFieldParameters.step);
-
-	        if (newNumber < 0 && !_this5.numberFieldParameters.acceptNegative) {
-	          newNumber = 0;
-	        }
-
-	        _this5.value = "".concat(newNumber);
-
-	        _this5.dispatchOnChangeEvent();
-	      }; //if user set type="number" attribute
-
-
-	      this.elements.inputBox.classList.add('--type-number');
-	      var buttonsElement = document.createElement('div');
-	      buttonsElement.classList.add("number-control-wrapper");
-	      buttonsElement.innerHTML = NumberInputButtonsHTML;
-	      buttonsElement.querySelector('.increase-number-button').addEventListener('click', this.increaseNumber.bind(this));
-	      buttonsElement.querySelector('.decrease-number-button').addEventListener('click', this.decreaseNumber.bind(this));
-	      this.elements.inputBox.appendChild(buttonsElement);
-	    }
-	  }], [{
-	    key: "observedAttributes",
-	    get: function get() {
-	      return ['label', 'type', 'message', 'value', 'name', 'autocomplete', 'placeholder', 'disabled', 'inputmode'];
-	    }
-	  }]);
-
-	  return JBInputWebComponent;
-	}( /*#__PURE__*/wrapNativeSuper(HTMLElement));
-
-	var myElementNotExists$1 = !customElements.get('jb-input');
-
-	if (myElementNotExists$1) {
-	  window.customElements.define('jb-input', JBInputWebComponent);
-	}
-
 	function useEvent(dom, event, handler) {
@@ -1177,0 +118,0 @@ var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

lib/JBInput.js

 import React, { useRef, useEffect, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
-import '../../../web-component/jb-input/dist/JBInput';
+import 'jb-input';
 import { useEvent } from '../../custom-hooks/UseEvent';
@@ -5,0 +5,0 @@ // eslint-disable-next-line react/display-name

package.json

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

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

64977

decreased by-78.25%

Lines of code

577

decreased by-77.21%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes