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

Web package with UI elements

import WUPBaseControl, { SetValueReasons } from "./baseControl";
declare const tagName = "wup-switch";
declare global {
    namespace WUP.Switch {
        interface EventMap extends WUP.BaseControl.EventMap {
        }
        interface ValidityMap extends WUP.BaseControl.ValidityMap {
        }
        interface NewOptions {
            /** Reversed-style (switch+label for true vs label+switch)
             * @defaultValue false */
            reverse: boolean;
        }
        interface Options<T = boolean, VM = ValidityMap> extends WUP.BaseControl.Options<T, VM>, NewOptions {
        }
        interface JSXProps<C = WUPSwitchControl> extends WUP.BaseControl.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
            "w-reverse"?: boolean | "";
            /** @deprecated use `initValue` instead */
            defaultChecked?: boolean;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPSwitchControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with toggle button
             *  @see {@link WUPSwitchControl} */
            [tagName]: WUP.Base.ReactHTML<WUPSwitchControl> & WUP.Switch.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with toggle button
             *  @see {@link WUPSwitchControl} */
            [tagName]: HTMLAttributes<WUPSwitchControl> & WUP.Switch.JSXProps;
        }
    }
}
/** Form-control with toggle button
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/switch}
 * @example
  const el = document.createElement("wup-switch");
  el.$options.name = "isDarkMode";
  el.$options.label = "Dark Mode";
  el.$initValue = false;
  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-switch w-name="isDarkMode" w-label="Dark Mode" w-initvalue="false"/>
  </wup-form>;
 * @tutorial innerHTML @example
 * <label>
 *    <input type='checkbox'/>
 *    <strong>{$options.label}</strong>
 *    <span bar>
 *        <span thumb></span>
 *    </span>
 * </label> */
export default class WUPSwitchControl<TOptions extends WUP.Switch.Options = WUP.Switch.Options, EventMap extends WUP.Switch.EventMap = WUP.Switch.EventMap> extends WUPBaseControl<boolean, TOptions, EventMap> {
    #private;
    static get $styleRoot(): string;
    static get $style(): string;
    static $isEqual(v1: boolean | undefined, v2: boolean | undefined): boolean;
    static get observedAttributes(): Array<string>;
    static $defaults: WUP.Switch.Options;
    get $value(): boolean;
    set $value(v: boolean);
    parse(text: string): boolean | undefined;
    valueToStorage(v: boolean): string | null;
    protected renderControl(): void;
    protected gotReady(): void;
    /** Called when user changes value via click or keyboard */
    protected gotInput(e: Event): void;
    protected setValue(v: boolean, reason: SetValueReasons): boolean | null;
    protected gotChanges(propsChanged: Array<keyof WUP.Switch.Options | any> | null): void;
    gotFormChanges(propsChanged: Array<keyof WUP.Form.Options> | null): void;
    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}
export {};