@seliaco/giant-panda-components - npm Package Compare versions

Comparing version 1.0.28 to 1.0.29

dist/components/fields/PasswordComponent.d.ts

@@ -5,6 +5,9 @@ declare const PasswordComponent_base: any;
     regex: string;
+    showHint: boolean;
     iconName: string;
     inputType: string;
+    static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
     get errorTemplate(): import("lit-html").TemplateResult<1>;
+    get hintTemplate(): import("lit-html").TemplateResult<1>;
     setValue(event: Event): void;
@@ -11,0 +14,0 @@ handleToggleMask(): void;

dist/index.js

@@ -874,2 +874,3 @@ (function (global, factory) {
             this.regex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$';
+            this.showHint = false;
             this.iconName = 'icon-Eyes-off-outline';
@@ -918,2 +919,15 @@ this.inputType = 'password';
         }
+        get hintTemplate() {
+            if (this.showHint && this.value.length > 0) {
+                const validationRegex = new RegExp(this.regex).test(this.value);
+                return x `
+        <div class="password-validation">
+          <div class="body-small text-gray-80">${translations[this.lang].form.passwordSecurity}</div>
+          <li class="body-small ${this.value.length >= 8 ? 'text-green' : 'text-gray-50'}">${translations[this.lang].form.passwordLength}</li>
+          <li class="body-small ${validationRegex ? 'text-green' : 'text-gray-50'}">${translations[this.lang].form.passwordRegexRules}</li>
+        </div>
+      `;
+            }
+            return x ``;
+        }
         setValue(event) {
@@ -937,2 +951,8 @@ const input = event.target;
     };
+    exports.PasswordComponent.styles = i$3 `
+    .password-validation {
+      align-self: flex-start;
+      margin-left: 12px;
+    }
+  `;
     __decorate([
@@ -945,2 +965,5 @@ n$1({ type: Boolean })
     __decorate([
+        n$1({ type: Boolean })
+    ], exports.PasswordComponent.prototype, "showHint", void 0);
+    __decorate([
         t$1()
@@ -947,0 +970,0 @@ ], exports.PasswordComponent.prototype, "iconName", void 0);

package.json

 {
-  "version": "1.0.28",
+  "version": "1.0.29",
   "name": "@seliaco/giant-panda-components",
@@ -4,0 +4,0 @@ "type": "module",

README.md

@@ -0,0 +0,0 @@ # Selia Components

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77510

increased by0.98%

Lines of code

1463

increased by1.81%

No dependency changes