jb-input - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/JBInput.js

@@ -1,4 +0,4 @@
-var HTML = "<div class=\"jb-input-web-component\">\r\n    <label><span class=\"label-value\"></span><span>:</span></label>\r\n    <div class=\"input-box\">\r\n        <input class=\"input-box\">\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>\r\n    <div class=\"message-box\"></div>\r\n</div>";
+var HTML = "<div class=\"jb-input-web-component\">\r\n    <label class=\"--hide\"><span class=\"label-value\"></span><span>:</span></label>\r\n    <div class=\"input-box\">\r\n        <input class=\"input-box\">\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>\r\n    <div class=\"message-box\"></div>\r\n</div>";
 
-var css_248z = ".jb-input-web-component {\n  width: 100%;\n  margin: 12px 0;\n  direction: rtl; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: 4px 0px;\n    display: block;\n    font-size: 0.8em;\n    color: #1f1735; }\n  .jb-input-web-component .input-box {\n    width: 100%;\n    box-sizing: border-box;\n    height: 40px;\n    border: solid 1px #f7f6f6;\n    background-color: #f7f6f6;\n    border-bottom: solid 3px #f7f6f6;\n    border-radius: 16px;\n    margin: 4px 0px;\n    display: block;\n    transition: ease 0.3s all;\n    overflow: hidden;\n    display: flex;\n    justify-content: space-between; }\n    .jb-input-web-component .input-box:focus-within {\n      border-color: #1e2832; }\n    .jb-input-web-component .input-box.type-password input {\n      width: calc(100% - 36px); }\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 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        .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 input {\n      border: none;\n      width: 100%;\n      box-sizing: border-box;\n      height: 100%;\n      background-color: transparent;\n      padding: 2px 12px 0 12px;\n      display: block;\n      font-family: inherit;\n      font-size: 1.1em;\n      color: #1f1735;\n      margin: 0;\n      border-radius: 0; }\n      .jb-input-web-component .input-box input:focus {\n        outline: none; }\n  .jb-input-web-component .message-box {\n    font-size: 0.7em;\n    padding: 2px 8px;\n    color: #929292; }\n    .jb-input-web-component .message-box:empty {\n      padding: 0; }\n    .jb-input-web-component .message-box.error {\n      color: red; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCSW5wdXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7RUFDWCxjQUFjO0VBQ2QsY0FBYyxFQUFFO0VBQ2hCO0lBQ0UsV0FBVztJQUNYLGVBQWU7SUFDZixjQUFjO0lBQ2QsZ0JBQWdCO0lBQ2hCLGNBQWMsRUFBRTtFQUNsQjtJQUNFLFdBQVc7SUFDWCxzQkFBc0I7SUFDdEIsWUFBWTtJQUNaLHlCQUF5QjtJQUN6Qix5QkFBeUI7SUFDekIsZ0NBQWdDO0lBQ2hDLG1CQUFtQjtJQUNuQixlQUFlO0lBQ2YsY0FBYztJQUNkLHlCQUF5QjtJQUN6QixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLDhCQUE4QixFQUFFO0lBQ2hDO01BQ0UscUJBQXFCLEVBQUU7SUFDekI7TUFDRSx3QkFBd0IsRUFBRTtJQUM1QjtNQUNFLGNBQWM7TUFDZCxZQUFZO01BQ1osV0FBVztNQUNYLHFCQUFxQjtNQUNyQixlQUFlLEVBQUU7TUFDakI7UUFDRSxXQUFXO1FBQ1gsWUFBWTtRQUNaLHFCQUFxQjtRQUNyQixzQkFBc0I7UUFDdEIsZ0JBQWdCLEVBQUU7UUFDbEI7VUFDRSxlQUFlO1VBQ2Ysd0NBQXdDLEVBQUU7UUFDNUM7VUFDRSxVQUFVO1VBQ1YscUJBQXFCO1VBQ3JCLDBCQUEwQixFQUFFO1FBQzlCO1VBQ0Usa0JBQWtCO1VBQ2xCLFlBQVk7VUFDWixVQUFVO1VBQ1YscUJBQXFCO1VBQ3JCLHNCQUFzQjtVQUN0QixnQkFBZ0I7VUFDaEIsd0NBQXdDLEVBQUU7UUFDNUM7VUFDRSxhQUFhO1VBQ2IsVUFBVTtVQUNWLG1CQUFtQixFQUFFO0lBQzNCO01BQ0UsYUFBYSxFQUFFO0lBQ2pCO01BQ0UsWUFBWTtNQUNaLFdBQVc7TUFDWCxzQkFBc0I7TUFDdEIsWUFBWTtNQUNaLDZCQUE2QjtNQUM3Qix3QkFBd0I7TUFDeEIsY0FBYztNQUNkLG9CQUFvQjtNQUNwQixnQkFBZ0I7TUFDaEIsY0FBYztNQUNkLFNBQVM7TUFDVCxnQkFBZ0IsRUFBRTtNQUNsQjtRQUNFLGFBQWEsRUFBRTtFQUNyQjtJQUNFLGdCQUFnQjtJQUNoQixnQkFBZ0I7SUFDaEIsY0FBYyxFQUFFO0lBQ2hCO01BQ0UsVUFBVSxFQUFFO0lBQ2Q7TUFDRSxVQUFVLEVBQUUiLCJmaWxlIjoiSkJJbnB1dC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLWlucHV0LXdlYi1jb21wb25lbnQge1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiAxMnB4IDA7XG4gIGRpcmVjdGlvbjogcnRsOyB9XG4gIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IGxhYmVsIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW46IDRweCAwcHg7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgZm9udC1zaXplOiAwLjhlbTtcbiAgICBjb2xvcjogIzFmMTczNTsgfVxuICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogNDBweDtcbiAgICBib3JkZXI6IHNvbGlkIDFweCAjZjdmNmY2O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmN2Y2ZjY7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgM3B4ICNmN2Y2ZjY7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBtYXJnaW46IDRweCAwcHg7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNpdGlvbjogZWFzZSAwLjNzIGFsbDtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOyB9XG4gICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveDpmb2N1cy13aXRoaW4ge1xuICAgICAgYm9yZGVyLWNvbG9yOiAjMWUyODMyOyB9XG4gICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIGlucHV0IHtcbiAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAzNnB4KTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGhlaWdodDogMjhweDtcbiAgICAgIHdpZHRoOiAyOHB4O1xuICAgICAgbWFyZ2luOiA0cHggMCA0cHggOHB4O1xuICAgICAgY3Vyc29yOiBwb2ludGVyOyB9XG4gICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kO1xuICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kO1xuICAgICAgICB0cmFuc2l0aW9uOiAwLjJzOyB9XG4gICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcucGFzc3dvcmQtdmlzaWJsZSAuZXllLWxpbmUge1xuICAgICAgICAgIHN0cm9rZTogIzAwYjYwMDtcbiAgICAgICAgICBkOiBwYXRoKFwiTSAxMCA2MCBDIDMwIDIwIDEwMCAyMCAxMTAgNjBcIik7IH1cbiAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2Zy5wYXNzd29yZC12aXNpYmxlIGNpcmNsZSB7XG4gICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAwLjJzIDAuMnM7XG4gICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDhweCk7IH1cbiAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2ZyAuZXllLWxpbmUge1xuICAgICAgICAgIHN0cm9rZS13aWR0aDogMTRweDtcbiAgICAgICAgICBzdHJva2U6ICNiYmI7XG4gICAgICAgICAgZmlsbDogbm9uZTtcbiAgICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7XG4gICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAwLjNzO1xuICAgICAgICAgIGQ6IHBhdGgoXCJNIDAgNjAgQyA0MCAxMDAgODAgMTAwIDEyMCA2MFwiKTsgfVxuICAgICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnIGNpcmNsZSB7XG4gICAgICAgICAgZmlsbDogIzAwYjYwMDtcbiAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgIHRyYW5zaXRpb246IDAuM3MgMHM7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IC5wYXNzd29yZC10cmlnZ2VyIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0IHtcbiAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgcGFkZGluZzogMnB4IDEycHggMCAxMnB4O1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogMS4xZW07XG4gICAgICBjb2xvcjogIzFmMTczNTtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDA7IH1cbiAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3ggaW5wdXQ6Zm9jdXMge1xuICAgICAgICBvdXRsaW5lOiBub25lOyB9XG4gIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveCB7XG4gICAgZm9udC1zaXplOiAwLjdlbTtcbiAgICBwYWRkaW5nOiAycHggOHB4O1xuICAgIGNvbG9yOiAjOTI5MjkyOyB9XG4gICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94OmVtcHR5IHtcbiAgICAgIHBhZGRpbmc6IDA7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3guZXJyb3Ige1xuICAgICAgY29sb3I6IHJlZDsgfVxuIl19 */";
+var css_248z = ".jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 12px 0);\n  direction: rtl; }\n  .jb-input-web-component label {\n    width: 100%;\n    margin: 4px 0px;\n    display: block;\n    font-size: 0.8em;\n    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: 40px;\n    border: solid 1px var(--jb-input-border-color, #f7f6f6);\n    background-color: var(--jb-input-bgcolor, #f7f6f6);\n    border-bottom: solid 3px var(--jb-input-border-color, #f7f6f6);\n    border-radius: var(--jb-input-border-radius, 16px);\n    margin: 4px 0px;\n    display: block;\n    transition: ease 0.3s all;\n    overflow: hidden;\n    display: flex;\n    justify-content: space-between; }\n    .jb-input-web-component .input-box:focus-within {\n      border-color: var(--jb-input-border-color-focus, #1e2832); }\n    .jb-input-web-component .input-box.type-password input {\n      width: calc(100% - 36px); }\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 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        .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 input {\n      border: none;\n      width: 100%;\n      box-sizing: border-box;\n      height: 100%;\n      background-color: transparent;\n      padding: 2px 12px 0 12px;\n      display: block;\n      font-family: inherit;\n      font-size: 1.1em;\n      color: #1f1735;\n      margin: 0;\n      border-radius: 0; }\n      .jb-input-web-component .input-box input:focus {\n        outline: none; }\n  .jb-input-web-component .message-box {\n    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: red; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCSW5wdXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7RUFDWCxzQ0FBc0M7RUFDdEMsY0FBYyxFQUFFO0VBQ2hCO0lBQ0UsV0FBVztJQUNYLGVBQWU7SUFDZixjQUFjO0lBQ2QsZ0JBQWdCO0lBQ2hCLGNBQWMsRUFBRTtJQUNoQjtNQUNFLGFBQWEsRUFBRTtFQUNuQjtJQUNFLFdBQVc7SUFDWCxzQkFBc0I7SUFDdEIsWUFBWTtJQUNaLHVEQUF1RDtJQUN2RCxrREFBa0Q7SUFDbEQsOERBQThEO0lBQzlELGtEQUFrRDtJQUNsRCxlQUFlO0lBQ2YsY0FBYztJQUNkLHlCQUF5QjtJQUN6QixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLDhCQUE4QixFQUFFO0lBQ2hDO01BQ0UseURBQXlELEVBQUU7SUFDN0Q7TUFDRSx3QkFBd0IsRUFBRTtJQUM1QjtNQUNFLGNBQWM7TUFDZCxZQUFZO01BQ1osV0FBVztNQUNYLHFCQUFxQjtNQUNyQixlQUFlLEVBQUU7TUFDakI7UUFDRSxXQUFXO1FBQ1gsWUFBWTtRQUNaLHFCQUFxQjtRQUNyQixzQkFBc0I7UUFDdEIsZ0JBQWdCLEVBQUU7UUFDbEI7VUFDRSxlQUFlO1VBQ2Ysd0NBQXdDLEVBQUU7UUFDNUM7VUFDRSxVQUFVO1VBQ1YscUJBQXFCO1VBQ3JCLDBCQUEwQixFQUFFO1FBQzlCO1VBQ0Usa0JBQWtCO1VBQ2xCLFlBQVk7VUFDWixVQUFVO1VBQ1YscUJBQXFCO1VBQ3JCLHNCQUFzQjtVQUN0QixnQkFBZ0I7VUFDaEIsd0NBQXdDLEVBQUU7UUFDNUM7VUFDRSxhQUFhO1VBQ2IsVUFBVTtVQUNWLG1CQUFtQixFQUFFO0lBQzNCO01BQ0UsYUFBYSxFQUFFO0lBQ2pCO01BQ0UsWUFBWTtNQUNaLFdBQVc7TUFDWCxzQkFBc0I7TUFDdEIsWUFBWTtNQUNaLDZCQUE2QjtNQUM3Qix3QkFBd0I7TUFDeEIsY0FBYztNQUNkLG9CQUFvQjtNQUNwQixnQkFBZ0I7TUFDaEIsY0FBYztNQUNkLFNBQVM7TUFDVCxnQkFBZ0IsRUFBRTtNQUNsQjtRQUNFLGFBQWEsRUFBRTtFQUNyQjtJQUNFLGdCQUFnQjtJQUNoQixnQkFBZ0I7SUFDaEIsY0FBYztJQUNkLG1EQUFtRCxFQUFFO0lBQ3JEO01BQ0UsVUFBVSxFQUFFO0lBQ2Q7TUFDRSxVQUFVLEVBQUUiLCJmaWxlIjoiSkJJbnB1dC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLWlucHV0LXdlYi1jb21wb25lbnQge1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiB2YXIoLS1qYi1pbnB1dC1tYXJnaW4sIDEycHggMCk7XG4gIGRpcmVjdGlvbjogcnRsOyB9XG4gIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IGxhYmVsIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW46IDRweCAwcHg7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgZm9udC1zaXplOiAwLjhlbTtcbiAgICBjb2xvcjogIzFmMTczNTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IGxhYmVsLi0taGlkZSB7XG4gICAgICBkaXNwbGF5OiBub25lOyB9XG4gIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgaGVpZ2h0OiA0MHB4O1xuICAgIGJvcmRlcjogc29saWQgMXB4IHZhcigtLWpiLWlucHV0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItaW5wdXQtYmdjb2xvciwgI2Y3ZjZmNik7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgM3B4IHZhcigtLWpiLWlucHV0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItaW5wdXQtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gICAgbWFyZ2luOiA0cHggMHB4O1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRyYW5zaXRpb246IGVhc2UgMC4zcyBhbGw7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tamItaW5wdXQtYm9yZGVyLWNvbG9yLWZvY3VzLCAjMWUyODMyKTsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCBpbnB1dCB7XG4gICAgICB3aWR0aDogY2FsYygxMDAlIC0gMzZweCk7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBoZWlnaHQ6IDI4cHg7XG4gICAgICB3aWR0aDogMjhweDtcbiAgICAgIG1hcmdpbjogNHB4IDAgNHB4IDhweDtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjsgfVxuICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2ZyB7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDtcbiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDtcbiAgICAgICAgdHJhbnNpdGlvbjogMC4yczsgfVxuICAgICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94LnR5cGUtcGFzc3dvcmQgLnBhc3N3b3JkLXRyaWdnZXIgc3ZnLnBhc3N3b3JkLXZpc2libGUgLmV5ZS1saW5lIHtcbiAgICAgICAgICBzdHJva2U6ICMwMGI2MDA7XG4gICAgICAgICAgZDogcGF0aChcIk0gMTAgNjAgQyAzMCAyMCAxMDAgMjAgMTEwIDYwXCIpOyB9XG4gICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcucGFzc3dvcmQtdmlzaWJsZSBjaXJjbGUge1xuICAgICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgICAgdHJhbnNpdGlvbjogMC4ycyAwLjJzO1xuICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCg4cHgpOyB9XG4gICAgICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5pbnB1dC1ib3gudHlwZS1wYXNzd29yZCAucGFzc3dvcmQtdHJpZ2dlciBzdmcgLmV5ZS1saW5lIHtcbiAgICAgICAgICBzdHJva2Utd2lkdGg6IDE0cHg7XG4gICAgICAgICAgc3Ryb2tlOiAjYmJiO1xuICAgICAgICAgIGZpbGw6IG5vbmU7XG4gICAgICAgICAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kO1xuICAgICAgICAgIHN0cm9rZS1saW5lam9pbjogcm91bmQ7XG4gICAgICAgICAgdHJhbnNpdGlvbjogMC4zcztcbiAgICAgICAgICBkOiBwYXRoKFwiTSAwIDYwIEMgNDAgMTAwIDgwIDEwMCAxMjAgNjBcIik7IH1cbiAgICAgICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveC50eXBlLXBhc3N3b3JkIC5wYXNzd29yZC10cmlnZ2VyIHN2ZyBjaXJjbGUge1xuICAgICAgICAgIGZpbGw6ICMwMGI2MDA7XG4gICAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAwLjNzIDBzOyB9XG4gICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveCAucGFzc3dvcmQtdHJpZ2dlciB7XG4gICAgICBkaXNwbGF5OiBub25lOyB9XG4gICAgLmpiLWlucHV0LXdlYi1jb21wb25lbnQgLmlucHV0LWJveCBpbnB1dCB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIHBhZGRpbmc6IDJweCAxMnB4IDAgMTJweDtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IDEuMWVtO1xuICAgICAgY29sb3I6ICMxZjE3MzU7XG4gICAgICBtYXJnaW46IDA7XG4gICAgICBib3JkZXItcmFkaXVzOiAwOyB9XG4gICAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAuaW5wdXQtYm94IGlucHV0OmZvY3VzIHtcbiAgICAgICAgb3V0bGluZTogbm9uZTsgfVxuICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3gge1xuICAgIGZvbnQtc2l6ZTogMC43ZW07XG4gICAgcGFkZGluZzogMnB4IDhweDtcbiAgICBjb2xvcjogIzkyOTI5MjtcbiAgICBkaXNwbGF5OiB2YXIoLS1qYi1pbnB1dC1tZXNzYWdlLWJveC1kaXNwbGF5LCBibG9jayk7IH1cbiAgICAuamItaW5wdXQtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3g6ZW1wdHkge1xuICAgICAgcGFkZGluZzogMDsgfVxuICAgIC5qYi1pbnB1dC13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveC5lcnJvciB7XG4gICAgICBjb2xvcjogcmVkOyB9XG4iXX0= */";
 
@@ -8,3 +8,3 @@ class JBInputWebComponent extends HTMLElement {
     get value() {
-        return this._value
+        return this._value;
     }
@@ -25,5 +25,18 @@ set value(value) {
         this.initWebComponent();
+    }
+    connectedCallback() {
+        // standard web component event that called when all of dom is binded
+        this.callOnLoadEvent();
         this.initProp();
-        // js standard input element to more assosicate it with form element
+        this.callOnInitEvent();
+        
     }
+    callOnLoadEvent() {
+        var event = new CustomEvent('load', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    callOnInitEvent() {
+        var event = new CustomEvent('init', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
     initWebComponent() {
@@ -65,2 +78,7 @@ this._shadowRoot = this.attachShadow({
                 this._shadowRoot.querySelector('label .label-value').innerHTML = value;
+                if(value == null || value == undefined || value == ""){
+                    this._shadowRoot.querySelector('label').classList.add('--hide');
+                }else {
+                    this._shadowRoot.querySelector('label').classList.remove('--hide');
+                }
                 break;
@@ -104,4 +122,14 @@ case 'type':
     }
-    onInputKeyDown(){
-        const event = new CustomEvent('keydown');
+    onInputKeyDown(e){
+        const 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
+        };
+        const event = new KeyboardEvent("keydown",keyDownnInitObj);
         this.dispatchEvent(event);
@@ -116,6 +144,16 @@ }
         const inputText = e.target.value;
-        this.triggerInputValidation(false);
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
         this._value = inputText;
-        const event = new CustomEvent('keyup');
+        this.triggerInputValidation(false);
+        const 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,
+        };
+        const event = new KeyboardEvent('keyup',keyUpInitObj);
         this.dispatchEvent(event);
@@ -143,7 +181,13 @@ }
         const validationResult = this.checkInputValidation(inputText);
-        
-        if (showError == true && !validationResult.isAllValid) {
+        this.validation = {
+            isValid: validationResult.isAllValid,
+            message: null
+        };
+        if(!validationResult.isAllValid){
             const firstFault = validationResult.validationList.find(x => !x.isValid);
-            this.showValidationError(firstFault.message);
-        } else if(validationResult.isAllValid) {
+            this.validation.message = firstFault.message;
+            if (showError == true) {
+                this.showValidationError(firstFault.message);
+            }
+        }else {
             this.clearValidationError();
@@ -183,3 +227,3 @@ }
                 validation: validation
-            }
+            };
         }
@@ -193,6 +237,2 @@ return {
     showValidationError(error) {
-        this.validation = {
-            isValid: false,
-            message: error
-        };
         this._shadowRoot.querySelector('.message-box').innerHTML = error;
@@ -202,6 +242,2 @@ this._shadowRoot.querySelector('.message-box').classList.add('error');
     clearValidationError() {
-        this.validation = {
-            isValid: true,
-            message: null
-        };
         const text = this.getAttribute('message') || '';
@@ -211,2 +247,9 @@ this._shadowRoot.querySelector('.message-box').innerHTML = text;
     }
+    /**
+     * @public
+     */
+    focus(){
+        //public method
+        this.inputElement.focus();
+    }
 }
@@ -213,0 +256,0 @@ const myElementNotExists = !customElements.get('jb-input');

lib/JBInput.js

@@ -6,3 +6,3 @@ import HTML from './JBInput.html';
     get value() {
-        return this._value
+        return this._value;
     }
@@ -23,5 +23,18 @@ set value(value) {
         this.initWebComponent();
+    }
+    connectedCallback() {
+        // standard web component event that called when all of dom is binded
+        this.callOnLoadEvent();
         this.initProp();
-        // js standard input element to more assosicate it with form element
+        this.callOnInitEvent();
+        
     }
+    callOnLoadEvent() {
+        var event = new CustomEvent('load', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    callOnInitEvent() {
+        var event = new CustomEvent('init', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
     initWebComponent() {
@@ -31,3 +44,3 @@ this._shadowRoot = this.attachShadow({
         });
-        this._html = `<style>${CSS}</style>` + '\n' + HTML
+        this._html = `<style>${CSS}</style>` + '\n' + HTML;
         this._element = document.createElement('template');
@@ -43,3 +56,3 @@ this._element.innerHTML = this._html;
         this.inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));
-        this.inputElement.addEventListener('keydown',this.onInputKeyDown.bind(this))
+        this.inputElement.addEventListener('keydown',this.onInputKeyDown.bind(this));
     }
@@ -52,3 +65,3 @@ initProp() {
             message: null
-        }
+        };
     }
@@ -66,2 +79,7 @@ static get observedAttributes() {
                 this._shadowRoot.querySelector('label .label-value').innerHTML = value;
+                if(value == null || value == undefined || value == ""){
+                    this._shadowRoot.querySelector('label').classList.add('--hide');
+                }else{
+                    this._shadowRoot.querySelector('label').classList.remove('--hide');
+                }
                 break;
@@ -92,3 +110,3 @@ case 'type':
         this.isPasswordvisible = false;
-        this._shadowRoot.querySelector('.password-trigger').addEventListener('click', this.onPasswordTriggerClicked.bind(this))
+        this._shadowRoot.querySelector('.password-trigger').addEventListener('click', this.onPasswordTriggerClicked.bind(this));
     }
@@ -100,10 +118,20 @@ onPasswordTriggerClicked() {
             this._shadowRoot.querySelector('.password-trigger svg').classList.add('password-visible');
-            textField.setAttribute('type', 'text')
+            textField.setAttribute('type', 'text');
         } else {
             this._shadowRoot.querySelector('.password-trigger svg').classList.remove('password-visible');
-            textField.setAttribute('type', 'password')
+            textField.setAttribute('type', 'password');
         }
     }
-    onInputKeyDown(){
-        const event = new CustomEvent('keydown');
+    onInputKeyDown(e){
+        const 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
+        };
+        const event = new KeyboardEvent("keydown",keyDownnInitObj);
         this.dispatchEvent(event);
@@ -118,6 +146,16 @@ }
         const inputText = e.target.value;
-        this.triggerInputValidation(false);
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
         this._value = inputText;
-        const event = new CustomEvent('keyup');
+        this.triggerInputValidation(false);
+        const 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,
+        };
+        const event = new KeyboardEvent('keyup',keyUpInitObj);
         this.dispatchEvent(event);
@@ -145,7 +183,13 @@ }
         const validationResult = this.checkInputValidation(inputText);
-        
-        if (showError == true && !validationResult.isAllValid) {
+        this.validation = {
+            isValid: validationResult.isAllValid,
+            message: null
+        };
+        if(!validationResult.isAllValid){
             const firstFault = validationResult.validationList.find(x => !x.isValid);
-            this.showValidationError(firstFault.message);
-        } else if(validationResult.isAllValid) {
+            this.validation.message = firstFault.message;
+            if (showError == true) {
+                this.showValidationError(firstFault.message);
+            }
+        }else{
             this.clearValidationError();
@@ -159,3 +203,3 @@ }
             isAllValid: true
-        }
+        };
         this.validationList.forEach((validation) => {
@@ -171,3 +215,3 @@ const res = this.checkValidation(value, validation);
     checkValidation(text, validation) {
-        var testRes
+        var testRes;
         if(validation.validator instanceof RegExp){
@@ -187,3 +231,3 @@ testRes = validation.validator.test(text);
                 validation: validation
-            }
+            };
         }
@@ -197,18 +241,17 @@ return {
     showValidationError(error) {
-        this.validation = {
-            isValid: false,
-            message: error
-        }
         this._shadowRoot.querySelector('.message-box').innerHTML = error;
-        this._shadowRoot.querySelector('.message-box').classList.add('error')
+        this._shadowRoot.querySelector('.message-box').classList.add('error');
     }
     clearValidationError() {
-        this.validation = {
-            isValid: true,
-            message: null
-        }
         const text = this.getAttribute('message') || '';
         this._shadowRoot.querySelector('.message-box').innerHTML = text;
-        this._shadowRoot.querySelector('.message-box').classList.remove('error')
+        this._shadowRoot.querySelector('.message-box').classList.remove('error');
     }
+    /**
+     * @public
+     */
+    focus(){
+        //public method
+        this.inputElement.focus();
+    }
 }
@@ -215,0 +258,0 @@ const myElementNotExists = !customElements.get('jb-input');

package.json

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

README.md

@@ -66,2 +66,14 @@ # jb-input
 | message        | in botton of input we show small message for example "user name must be at least 5 char"      |
-| autocomplete   | set autocomplete directly into dom element in case you need it                                |
+| autocomplete   | set autocomplete directly into dom element in case you need it                                |
+
+### set custome style
+
+in some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.    
+if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component 
+| css variable name                  | description                                                                                   |
+| -------------                      | -------------                                                                                 |
+| --jb-input-margin                  | web-component margin defualt is `0 12px`                                                      |
+| --jb-input-border-radius           | web-component border-radius defualt is `16px`                                                 |
+| --jb-input-border-color            | border color of select in normal mode                                                         |
+| --jb-input-border-color-focus      | border color of select in normal mode                                                         |
+| --jb-input-bgcolor                 | background color of input                                                                     |

No alert changes

Improved metrics

Total package byte prevSize

56518

increased by17.1%

Lines of code

518

increased by20.75%

Number of lines in readme file

78

increased by18.18%

No dependency changes