jb-input - npm Package Compare versions

Comparing version 2.8.2 to 2.8.3

dist/JBInput.js

@@ -31,3 +31,3 @@ /******************************************************************************
 
-var css_248z$1 = ":host(:focus),\n:host(:focus-visible) {\n  outline: none; }\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0); }\n  .jb-input-web-component:focus-visible {\n    outline: none; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: var(--jb-input-label-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    margin: var(--jb-input-label-margin, 0);\n    font-weight: var(--jb-input-label-font-weight, 300); }\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 var(--jb-input-border-width, 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      border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n      border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n      box-shadow: var(--jb-input-box-shadow-focus, none); }\n    .jb-input-web-component .input-box.--type-number.--without-number-button .number-control-wrapper {\n      display: none; }\n    .jb-input-web-component .input-box.--type-number:not(.--without-number-button) {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) input {\n        width: 100%; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .number-control-wrapper .number-control-buttons {\n        display: flex;\n        height: 100%; }\n        .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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      font-weight: var(--jb-input-input-font-weight, initial);\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: var(--jb-input-message-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";
+var css_248z$1 = ":host(:focus),\n:host(:focus-visible) {\n  outline: none; }\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0); }\n  .jb-input-web-component:focus-visible {\n    outline: none; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: var(--jb-input-label-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    margin: var(--jb-input-label-margin, 0);\n    font-weight: var(--jb-input-label-font-weight, 300); }\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 var(--jb-input-border-width, 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      border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n      border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n      box-shadow: var(--jb-input-box-shadow-focus, none); }\n    .jb-input-web-component .input-box.--type-number.--without-number-button .number-control-wrapper {\n      display: none; }\n    .jb-input-web-component .input-box.--type-number:not(.--without-number-button) {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) input {\n        width: 100%; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .number-control-wrapper .number-control-buttons {\n        display: flex;\n        height: 100%; }\n        .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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      font-weight: var(--jb-input-input-font-weight, initial);\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 .input-box .jb-input-start-section-wrapper {\n      display: flex;\n      height: 100%;\n      width: auto;\n      align-items: center;\n      justify-content: center; }\n  .jb-input-web-component .message-box {\n    font-size: var(--jb-input-message-font-size, 0.7em);\n    padding: 2px 8px;\n    color: var(--jb-input-message-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";
 
@@ -182,3 +182,3 @@ var NumberInputButtonsHTML = "<div class=\"number-control-buttons\">\r\n    <div class=\"increase-number-button number-control-button\">\r\n        <svg class=\"increase-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M60,40 L60,80\"></path>\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n    <div class=\"decrease-number-button number-control-button\">\r\n        <svg class=\"decrease-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n</div>";
 
-var _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled;
+var _JBInputWebComponent_instances, _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled, _JBInputWebComponent_dispatchBeforeInputEvent;
 class JBInputWebComponent extends HTMLElement {
@@ -207,2 +207,3 @@ static get formAssociated() { return true; }
         super();
+        _JBInputWebComponent_instances.add(this);
         _JBInputWebComponent_value.set(this, '');
@@ -583,24 +584,4 @@ _JBInputWebComponent_validationList.set(this, []);
         }
-        this.dispatchBeforeInputEvent(e);
+        __classPrivateFieldGet(this, _JBInputWebComponent_instances, "m", _JBInputWebComponent_dispatchBeforeInputEvent).call(this, e);
     }
-    dispatchBeforeInputEvent(e) {
-        const 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(),
-        };
-        const event = new InputEvent('beforeinput', eventInitDict);
-        this.dispatchEvent(event);
-        if (event.defaultPrevented) {
-            e.preventDefault();
-        }
-        return event.defaultPrevented;
-    }
     onInputChange(e) {
@@ -650,3 +631,3 @@ const inputText = e.target.value;
     /**
-     * @deprecated use checkValidity instead it will be removed in future version
+     * @description check validation of input
      * @param {boolean} showError indicate whether show error or not
@@ -764,3 +745,22 @@ * @return {ValidationResult}
 }
-_JBInputWebComponent_value = new WeakMap(), _JBInputWebComponent_validationList = new WeakMap(), _JBInputWebComponent_disabled = new WeakMap();
+_JBInputWebComponent_value = new WeakMap(), _JBInputWebComponent_validationList = new WeakMap(), _JBInputWebComponent_disabled = new WeakMap(), _JBInputWebComponent_instances = new WeakSet(), _JBInputWebComponent_dispatchBeforeInputEvent = function _JBInputWebComponent_dispatchBeforeInputEvent(e) {
+    const 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(),
+    };
+    const event = new InputEvent('beforeinput', eventInitDict);
+    this.dispatchEvent(event);
+    if (event.defaultPrevented) {
+        e.preventDefault();
+    }
+    return event.defaultPrevented;
+};
 const myElementNotExists = !customElements.get('jb-input');
@@ -767,0 +767,0 @@ if (myElementNotExists) {

dist/JBInput.umd.js

@@ -37,3 +37,3 @@ (function (global, factory) {
 
-    var css_248z$1 = ":host(:focus),\n:host(:focus-visible) {\n  outline: none; }\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0); }\n  .jb-input-web-component:focus-visible {\n    outline: none; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: var(--jb-input-label-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    margin: var(--jb-input-label-margin, 0);\n    font-weight: var(--jb-input-label-font-weight, 300); }\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 var(--jb-input-border-width, 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      border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n      border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n      box-shadow: var(--jb-input-box-shadow-focus, none); }\n    .jb-input-web-component .input-box.--type-number.--without-number-button .number-control-wrapper {\n      display: none; }\n    .jb-input-web-component .input-box.--type-number:not(.--without-number-button) {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) input {\n        width: 100%; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .number-control-wrapper .number-control-buttons {\n        display: flex;\n        height: 100%; }\n        .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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      font-weight: var(--jb-input-input-font-weight, initial);\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: var(--jb-input-message-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";
+    var css_248z$1 = ":host(:focus),\n:host(:focus-visible) {\n  outline: none; }\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0); }\n  .jb-input-web-component:focus-visible {\n    outline: none; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: var(--jb-input-label-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    margin: var(--jb-input-label-margin, 0);\n    font-weight: var(--jb-input-label-font-weight, 300); }\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 var(--jb-input-border-width, 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      border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n      border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n      box-shadow: var(--jb-input-box-shadow-focus, none); }\n    .jb-input-web-component .input-box.--type-number.--without-number-button .number-control-wrapper {\n      display: none; }\n    .jb-input-web-component .input-box.--type-number:not(.--without-number-button) {\n      grid-template-columns: auto 1fr auto auto; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) input {\n        width: 100%; }\n      .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .number-control-wrapper .number-control-buttons {\n        display: flex;\n        height: 100%; }\n        .jb-input-web-component .input-box.--type-number:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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:not(.--without-number-button) .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      font-weight: var(--jb-input-input-font-weight, initial);\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 .input-box .jb-input-start-section-wrapper {\n      display: flex;\n      height: 100%;\n      width: auto;\n      align-items: center;\n      justify-content: center; }\n  .jb-input-web-component .message-box {\n    font-size: var(--jb-input-message-font-size, 0.7em);\n    padding: 2px 8px;\n    color: var(--jb-input-message-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";
 
@@ -188,3 +188,3 @@ var NumberInputButtonsHTML = "<div class=\"number-control-buttons\">\r\n    <div class=\"increase-number-button number-control-button\">\r\n        <svg class=\"increase-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M60,40 L60,80\"></path>\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n    <div class=\"decrease-number-button number-control-button\">\r\n        <svg class=\"decrease-icon\" viewBox=\"0 0 120 120\">\r\n            <path stroke-linecap=\"round\" d=\"M40,60 L80,60\"></path>\r\n        </svg>\r\n    </div>\r\n</div>";
 
-    var _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled;
+    var _JBInputWebComponent_instances, _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled, _JBInputWebComponent_dispatchBeforeInputEvent;
     class JBInputWebComponent extends HTMLElement {
@@ -213,2 +213,3 @@ static get formAssociated() { return true; }
             super();
+            _JBInputWebComponent_instances.add(this);
             _JBInputWebComponent_value.set(this, '');
@@ -589,24 +590,4 @@ _JBInputWebComponent_validationList.set(this, []);
             }
-            this.dispatchBeforeInputEvent(e);
+            __classPrivateFieldGet(this, _JBInputWebComponent_instances, "m", _JBInputWebComponent_dispatchBeforeInputEvent).call(this, e);
         }
-        dispatchBeforeInputEvent(e) {
-            const 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(),
-            };
-            const event = new InputEvent('beforeinput', eventInitDict);
-            this.dispatchEvent(event);
-            if (event.defaultPrevented) {
-                e.preventDefault();
-            }
-            return event.defaultPrevented;
-        }
         onInputChange(e) {
@@ -656,3 +637,3 @@ const inputText = e.target.value;
         /**
-         * @deprecated use checkValidity instead it will be removed in future version
+         * @description check validation of input
          * @param {boolean} showError indicate whether show error or not
@@ -770,3 +751,22 @@ * @return {ValidationResult}
     }
-    _JBInputWebComponent_value = new WeakMap(), _JBInputWebComponent_validationList = new WeakMap(), _JBInputWebComponent_disabled = new WeakMap();
+    _JBInputWebComponent_value = new WeakMap(), _JBInputWebComponent_validationList = new WeakMap(), _JBInputWebComponent_disabled = new WeakMap(), _JBInputWebComponent_instances = new WeakSet(), _JBInputWebComponent_dispatchBeforeInputEvent = function _JBInputWebComponent_dispatchBeforeInputEvent(e) {
+        const 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(),
+        };
+        const event = new InputEvent('beforeinput', eventInitDict);
+        this.dispatchEvent(event);
+        if (event.defaultPrevented) {
+            e.preventDefault();
+        }
+        return event.defaultPrevented;
+    };
     const myElementNotExists = !customElements.get('jb-input');
@@ -773,0 +773,0 @@ if (myElementNotExists) {

dist/web-component/jb-input/lib/JBInput.d.ts

@@ -67,3 +67,2 @@ import './inbox-element/inbox-element';
     onInputBeforeInput(e: InputEvent): void;
-    private dispatchBeforeInputEvent;
     onInputChange(e: Event): void;
@@ -78,3 +77,3 @@ dispatchOnChangeEvent(): void;
     /**
-     * @deprecated use checkValidity instead it will be removed in future version
+     * @description check validation of input
      * @param {boolean} showError indicate whether show error or not
@@ -81,0 +80,0 @@ * @return {ValidationResult}

lib/JBInput.ts

@@ -7,2 +7,3 @@ import HTML from './JBInput.html';
 import { standardValueForNumberInput } from './utils';
+
 export class JBInputWebComponent extends HTMLElement {
@@ -411,5 +412,5 @@ static get formAssociated() { return true; }
         }
-        this.dispatchBeforeInputEvent(e);
+        this.#dispatchBeforeInputEvent(e);
     }
-    private dispatchBeforeInputEvent(e: InputEvent): boolean {
+    #dispatchBeforeInputEvent(e: InputEvent): boolean {
         const eventInitDict = {
@@ -479,3 +480,3 @@ bubbles: e.bubbles,
     /**
-     * @deprecated use checkValidity instead it will be removed in future version
+     * @description check validation of input
      * @param {boolean} showError indicate whether show error or not
@@ -482,0 +483,0 @@ * @return {ValidationResult}

package.json

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

README.md

@@ -95,3 +95,3 @@ # jb-input
 
-you can check is image input value meet your validation standad by `dom.checkValidity(showError)`
+you can check is image input value meet your validation standad by `dom.triggerInputValidation(showError)`
 the `showError` parameter is optional and its defualt is true but you cant set it false so if value is invalid component dont react and show error to user and just return validation object.  
@@ -98,0 +98,0 @@ in `change` event we have detail object you can access it by `event.detail.isValid` so you can see in new value is a valid value or not this way is really useful when you dont access to DOM directly like what we have in js frameworks.

No alert changes

Improved metrics

Total package byte prevSize

308262

increased by0.32%

Lines of code

2622

increased by0.04%

No dependency changes