web-ui-pack/controls/password.d.ts

Web package with UI elements

import WUPTextControl from "./text";
declare const tagName = "wup-pwd";
declare global {
    namespace WUP.Password {
        interface EventMap extends WUP.Text.EventMap {
        }
        interface ValidityMap extends WUP.Text.ValidityMap {
            /** If count of numbers < pointed shows message 'Must contain at least {x} numbers' */
            minNumber: number;
            /** If count of uppercase letters < pointed shows message 'Must contain at least {x} upper case' */
            minUpper: number;
            /** If count of lowercase letters < pointed shows message 'Must contain at least {x} lower case' */
            minLower: number;
            /** If count of pointed chars < pointed shows message 'Must contain at least {x} special characters' */
            special: {
                min: number;
                chars: string;
            };
            /** If $value != with previous siblint wup-pwd.$value shows message 'Passwords must be equal' */
            confirm: boolean;
        }
        interface Options<T = string, VM = ValidityMap> extends Omit<WUP.Text.Options<T, VM>, "mask" | "maskholder" | "storageKey" | "storage"> {
            /** Reversed-style for button-eye
             * @defaultValue false */
            reverse: boolean;
        }
        interface JSXProps<C = WUPPasswordControl> extends Omit<WUP.Text.JSXProps<C>, "mask" | "maskholder" | "prefix" | "postfix"> {
            /** Reversed-style for button-eye
             * @defaultValue false */
            "w-reverse"?: boolean | string;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPPasswordControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with password input
             *  @see {@link WUPPasswordControl} */
            [tagName]: WUP.Base.ReactHTML<WUPPasswordControl> & WUP.Password.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with password input
             *  @see {@link WUPPasswordControl} */
            [tagName]: HTMLAttributes<WUPPasswordControl> & WUP.Password.JSXProps;
        }
    }
}
/** Form-control with password input
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/password}
 * @example
  const el = document.createElement("wup-pwd");
  el.$options.name = "password";
  el.$options.validations = {
    required: true,
    min: 8,
    minNumber: 1,
    minUpper: 1,
    minLower: 1,
    special: { min: 1, chars: "#!-_?,.@:;'" }
  };
  el.$options.validationShowAll = true;

  const elConfirm = document.createElement("wup-pwd");
  elConfirm.$options.name = "passwordConfirm";
  elConfirm.$options.validations = { confirm: true };

  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-pwd w-name="password" w-validations="myValidations"/>
    <wup-pwd w-name="passwordConfirm" w-validations="myValidations2"/>
  </wup-form>;
 * @tutorial innerHTML @example
 * <label>
 *   <span> // extra span requires to use with icons via label:before, label:after without adjustments
 *      <input/>
 *      <strong>{$options.label}</strong>
 *   </span>
 *   <button clear/>
 * </label> */
export default class WUPPasswordControl<ValueType extends string = string, TOptions extends WUP.Password.Options = WUP.Password.Options, EventMap extends WUP.Password.EventMap = WUP.Password.EventMap> extends WUPTextControl<ValueType, TOptions, EventMap> {
    #private;
    /** Text announced by screen-readers when input cleared; @defaultValue `input cleared` */
    static $ariaDescription: string;
    static get $style(): string;
    /** Default options - applied to every element. Change it to configure default behavior */
    static $defaults: WUP.Password.Options;
    $refBtnEye: HTMLButtonElement;
    protected renderControl(): void;
    /** Create & append element to control */
    protected renderBtnEye(): void;
    protected toggleVisibility(): void;
    /** Called for toggling input type + fix browser issue when font affects on input height */
    protected changeInputType(isVisible: boolean): void;
    protected gotChanges(propsChanged: Array<string> | null): void;
    protected gotKeyDown(e: KeyboardEvent): void;
    protected storageSet(): void;
}
export {};