Widget to validate password.

Functionalities:

• Customize all rules and text.
• Add how many rules you want.
• Show dropbox on Top or Bottom.
• Trigger an event with a list with all rules not accepted and if password is valid.

A complete demo how to use and how to customize : )

Easy to customize with CSS variables

.password-validation-container {

    --fix-dropdown-position: 0px; /* To fix position 5px / -10px / -5px */

    --dropdown-title-font-text-color: var(--color-neutral-10);

    --dropdown-title-font-weight: 700;

    --dropdown-title-font-size: var(--font-size-base);

    --dropdown-title-margin-bottom: 10px;

    --dropdown-padding: 15px;

    --dropdown-shadow: 3px 3px 3px 0px rgba(0,0,0,0.23);

    --dropdown-border-radius: 2px;

    --dropdown-border-width: 1px;

    --dropdown-border-left-width: 5px;

    --dropdown-border-color: var(--color-neutral-6);

    --dropdown-background-color: var(--color-neutral-0);

    --dropdown-font-text-color: var(--color-neutral-6);

    --dropdown-font-text-color-password-length: var(--color-neutral-7);

    --dropdown-font-text-color-isvalid: var(--color-neutral-10);

    --dropdown-font-weight-isvalid: 500;

    --dropdown-icon-color-isvalid: var(--color-success);

    --dropdown-icon-color-isinvalid: var(--color-error);

    --not-allowed-pattern-font-color : rgb(255,102,102,0.7);

    --dropdown-border-color-isvalid: var(--color-success);

    --dropdown-progressbar-color: var(--color-success);

    --dropdown-progressbar-height: var(--dropdown-border-left-width);

    --dropdown-icon-color-warning: var(--color-warning);

    --dropdown-border-color-warning: var(--color-warning);

 }