jb-input - npm Package Compare versions

Comparing version 2.8.1 to 2.8.2

dist/JBInput.js

@@ -1,2 +0,2 @@
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -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, 12px 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 .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";
 
@@ -184,2 +184,22 @@ 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>";
 class JBInputWebComponent extends HTMLElement {
+    static get formAssociated() { return true; }
+    get value() {
+        return __classPrivateFieldGet(this, _JBInputWebComponent_value, "f");
+    }
+    set value(value) {
+        const standardedValue = this.standardValue(value);
+        __classPrivateFieldSet(this, _JBInputWebComponent_value, standardedValue.value, "f");
+        //comment for typescript problem
+        if (this.internals_ && typeof this.internals_.setFormValue == "function") {
+            this.internals_.setFormValue(standardedValue.value);
+        }
+        this.elements.input.value = standardedValue.displayValue;
+    }
+    get validationList() {
+        return __classPrivateFieldGet(this, _JBInputWebComponent_validationList, "f");
+    }
+    set validationList(value) {
+        __classPrivateFieldSet(this, _JBInputWebComponent_validationList, value, "f");
+        this.checkValidity(false);
+    }
     constructor() {
@@ -213,22 +233,2 @@ super();
     }
-    static get formAssociated() { return true; }
-    get value() {
-        return __classPrivateFieldGet(this, _JBInputWebComponent_value, "f");
-    }
-    set value(value) {
-        const standardedValue = this.standardValue(value);
-        __classPrivateFieldSet(this, _JBInputWebComponent_value, standardedValue.value, "f");
-        //comment for typescript problem
-        if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-            this.internals_.setFormValue(standardedValue.value);
-        }
-        this.elements.input.value = standardedValue.displayValue;
-    }
-    get validationList() {
-        return __classPrivateFieldGet(this, _JBInputWebComponent_validationList, "f");
-    }
-    set validationList(value) {
-        __classPrivateFieldSet(this, _JBInputWebComponent_validationList, value, "f");
-        this.checkValidity(false);
-    }
     connectedCallback() {
@@ -235,0 +235,0 @@ // standard web component event that called when all of dom is binded

dist/JBInput.umd.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -38,3 +38,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, 12px 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 .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";
 
@@ -191,2 +191,22 @@ 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>";
     class JBInputWebComponent extends HTMLElement {
+        static get formAssociated() { return true; }
+        get value() {
+            return __classPrivateFieldGet(this, _JBInputWebComponent_value, "f");
+        }
+        set value(value) {
+            const standardedValue = this.standardValue(value);
+            __classPrivateFieldSet(this, _JBInputWebComponent_value, standardedValue.value, "f");
+            //comment for typescript problem
+            if (this.internals_ && typeof this.internals_.setFormValue == "function") {
+                this.internals_.setFormValue(standardedValue.value);
+            }
+            this.elements.input.value = standardedValue.displayValue;
+        }
+        get validationList() {
+            return __classPrivateFieldGet(this, _JBInputWebComponent_validationList, "f");
+        }
+        set validationList(value) {
+            __classPrivateFieldSet(this, _JBInputWebComponent_validationList, value, "f");
+            this.checkValidity(false);
+        }
         constructor() {
@@ -220,22 +240,2 @@ super();
         }
-        static get formAssociated() { return true; }
-        get value() {
-            return __classPrivateFieldGet(this, _JBInputWebComponent_value, "f");
-        }
-        set value(value) {
-            const standardedValue = this.standardValue(value);
-            __classPrivateFieldSet(this, _JBInputWebComponent_value, standardedValue.value, "f");
-            //comment for typescript problem
-            if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-                this.internals_.setFormValue(standardedValue.value);
-            }
-            this.elements.input.value = standardedValue.displayValue;
-        }
-        get validationList() {
-            return __classPrivateFieldGet(this, _JBInputWebComponent_validationList, "f");
-        }
-        set validationList(value) {
-            __classPrivateFieldSet(this, _JBInputWebComponent_validationList, value, "f");
-            this.checkValidity(false);
-        }
         connectedCallback() {
@@ -242,0 +242,0 @@ // standard web component event that called when all of dom is binded

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

@@ -1,2 +0,2 @@
-export declare type ElementsObject = {
+export type ElementsObject = {
     input: HTMLInputElement;
@@ -10,3 +10,3 @@ inputBox: HTMLDivElement;
 };
-export declare type NumberFieldParameter = {
+export type NumberFieldParameter = {
     step: number;
@@ -23,11 +23,11 @@ decimalPrecision: number | null;
 };
-declare type Paritial<T> = {
+type Paritial<T> = {
     [P in keyof T]?: T[P];
 };
-export declare type NumberFieldParameterInput = Paritial<NumberFieldParameter>;
-export declare type ValidationResultSummary = {
+export type NumberFieldParameterInput = Paritial<NumberFieldParameter>;
+export type ValidationResultSummary = {
     isValid: boolean | null;
     message: string | null;
 };
-export declare type ValidationResultItem = {
+export type ValidationResultItem = {
     isValid: boolean | null;
@@ -37,11 +37,11 @@ message: string | null;
 };
-export declare type ValidationResult = {
+export type ValidationResult = {
     validationList: ValidationResultItem[];
     isAllValid: boolean;
 };
-export declare type JBInputValidationItem = {
+export type JBInputValidationItem = {
     validator: RegExp | ((value: string) => boolean);
     message: string;
 };
-export declare type JBInputStandardValueObject = {
+export type JBInputStandardValueObject = {
     value: string;
@@ -48,0 +48,0 @@ displayValue: string;

package.json

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

README.md

@@ -152,3 +152,3 @@ # jb-input
 | -------------                      | -------------                                                                                 |
-| --jb-input-margin                  | web-component margin default is `0 12px`                                                      |
+| --jb-input-margin                  | web-component margin default is `0 0`                                                      |
 | --jb-input-border-radius           | web-component border-radius default is `16px`                                                 |
@@ -155,0 +155,0 @@ | --jb-input-border-color            | border color of select in normal mode                                                         |

No alert changes

Improved metrics

Total package byte prevSize

307268

increased by2.05%

No dependency changes