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

Web package with UI elements

import WUPBaseControl, { SetValueReasons } from "./baseControl";
declare const tagName = "wup-radio";
declare global {
    namespace WUP.Radio {
        interface EventMap extends WUP.BaseControl.EventMap {
        }
        interface ValidityMap extends WUP.BaseControl.ValidityMap {
        }
        interface NewOptions<T = any> {
            /** Items showed as radio-buttons
             * @tutorial Troubleshooting
             * * array items is converted to Proxy (observer) so
             * ```js
             * const items = [text: "1", value: {name: "Jenny"}]
             * el.$options.items = items;
             * setTimeout(()=> console.warn(el.$options.items === items)},1) // returns 'false'
             * setTimeout(()=> console.warn(el.$options.items[0].value === items[0].value)},1) // returns 'true'
             * ``` */
            items: WUP.Select.MenuItem<T>[] | (() => WUP.Select.MenuItem<T>[]);
            /** Reversed-style (radio+label for true vs label+radio)
             * @defaultValue false */
            reverse: boolean;
        }
        interface Options<T = any, VM = ValidityMap> extends WUP.BaseControl.Options<T, VM>, NewOptions<T> {
        }
        interface JSXProps<C = WUPRadioControl> extends WUP.BaseControl.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
            "w-reverse"?: boolean | "";
            /** Global reference to object with array
             * @see  {@link WUP.Select.MenuItems}
             * @example
             * ```js
             * window.myItems = [...];
             * <wup-radio w-items="window.myItems"></wup-circle>
             * ``` */
            "w-items"?: string;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPRadioControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with radio buttons
             *  @see {@link WUPRadioControl} */
            [tagName]: WUP.Base.ReactHTML<WUPRadioControl> & WUP.Radio.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with radio buttons
             *  @see {@link WUPRadioControl} */
            [tagName]: HTMLAttributes<WUPRadioControl> & WUP.Radio.JSXProps;
        }
    }
}
interface ExtInputElement extends HTMLInputElement {
    _index: number;
}
/** Form-control with radio buttons
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/radio}
 * @example
  const el = document.createElement("wup-radio");
  el.$options.name = "gender";
  el.$options.items = [
    { value: 1, text: "Male" },
    { value: 2, text: "Female" },
    { value: 3, text: "Other/Skip" },
  ];
  el.$initValue = 3;
  el.$options.validations = { required: true };
  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-radio w-name="gender" w-initvalue="3" w-validations="myValidations" w-items="myRadioItems"/>
  </wup-form>;
 * @tutorial innerHTML @example
 * <fieldset>
 *   <legend><strong>{$options.label}</strong></legend>
 *   <label> <input/> <span/> </label>
 *   <label> <input/> <span/> </label>
 *   // etc.
 * </fieldset> */
export default class WUPRadioControl<ValueType = any, TOptions extends WUP.Radio.Options = WUP.Radio.Options, EventMap extends WUP.Radio.EventMap = WUP.Radio.EventMap> extends WUPBaseControl<ValueType, TOptions, EventMap> {
    #private;
    /** Custom text that announced by screen-readers. Redefine it to use with another language */
    static $ariaReadonly: string;
    static get $styleRoot(): string;
    static get $style(): string;
    static $defaults: WUP.Radio.Options;
    static cloneDefaults<T extends Record<string, any>>(): T;
    /** Called when need to parse attr [initValue] */
    parse(attrValue: string): ValueType | undefined;
    protected gotReady(): void;
    /** Called when user touches inputs */
    protected gotInput(e: Event & {
        target: ExtInputElement;
    }): void;
    protected getItems(): WUP.Select.MenuItem<ValueType>[];
    $refFieldset: HTMLFieldSetElement;
    $refItems: ExtInputElement[];
    /** It's true when items was added as children in manual way */
    _isCustomRendered: boolean;
    protected getLabel(): string | null;
    protected renderControl(): void;
    protected renderItems(parent: HTMLFieldSetElement): void;
    /** Called when need to update check-state of inputs */
    protected checkInput(v: ValueType | undefined): void;
    protected setValue(v: ValueType, reason: SetValueReasons): boolean | null;
    protected gotChanges(propsChanged: Array<keyof WUP.Radio.Options> | null): void;
    gotFormChanges(propsChanged: Array<keyof WUP.Form.Options> | null): void;
    setupInputReadonly(): void;
    protected gotFocus(e: FocusEvent): Array<() => void>;
    focus(): boolean;
    protected goShowError(err: string, target: HTMLElement): void;
    /** Returns string for storage */
    valueToStrCompare(a: WUP.Select.MenuItem<ValueType>): string | null;
    valueFromStorage(str: string): ValueType | undefined;
    /** Store value to storage; if item.text is not function then stored text, otherwise value.toString()
     *  @see {@link valueToStrCompare} */
    valueToStorage(v: ValueType): string | null;
}
export {};