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

Web package with UI elements

import { SetValueReasons } from "./baseControl";
import WUPTextControl from "./text";
declare const tagName = "wup-num";
declare global {
    namespace WUP.Number {
        interface Format {
            /** Decimal separator; for number 123.4 it's dot
             *  @see {@link localeInfo.sepDecimal} */
            sepDecimal?: string;
            /** Thousands separator; for number 1,234.5 it's comma
             *  @see {@link localeInfo.sep1000} */
            sep1000?: string;
            /** Maximum displayed fraction digits; for 123.45 it's 2
             * @defaultValue 0 */
            maxDecimal?: number;
            /** Minimun displayed fraction digits; if pointed 2 then 123.4 goes to 123.40
             * @defaultValue 0 */
            minDecimal?: number;
        }
        interface EventMap extends WUP.BaseControl.EventMap {
        }
        interface ValidityMap extends WUP.Text.ValidityMap {
            /** If $value < pointed shows message 'Min value {x}` */
            min: number;
            /** If $value < pointed shows message 'Max value {x}` */
            max: number;
        }
        interface NewOptions {
            /** String representation of displayed value
             * @defaultValue no-decimal and separators from localeInfo */
            format: Format | null;
            /** Multiply value to store value different from text-value
             * @example point 0.01 when need to cast text value `100` to 1 (user sees `100` but stored 1)
             * @defaultValue 1 */
            scale: number;
            /** Shift value to store value different from text-value
             * @example point 20 when need to cast text value `100` to 120 (user sees `100` but stored 120)
             * @defaultValue 0 */
            offset: number;
        }
        interface TextAnyOptions<T = any, VM = ValidityMap> extends WUP.Text.Options<T, VM> {
        }
        interface Options<T = number, VM extends ValidityMap = ValidityMap> extends TextAnyOptions<T, VM>, NewOptions {
        }
        interface JSXProps<C = WUPNumberControl> extends WUP.Text.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
            /** String representation of displayed value
             * Point Global reference to object @see {@link Format}
             * @example
             * ```js
             * window.format = {};
             * <wup-number w-items="window.format"></wup-number>
             * ```
             * @defaultValue no-decimal and separators from localeInfo */
            "w-format"?: string;
            "w-scale"?: number;
            "w-offset"?: number;
            "w-initValue"?: number;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPNumberControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with number input
             *  @see {@link WUPNumberControl} */
            [tagName]: WUP.Base.ReactHTML<WUPNumberControl> & WUP.Number.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with number input
             *  @see {@link WUPNumberControl} */
            [tagName]: HTMLAttributes<WUPNumberControl> & WUP.Number.JSXProps;
        }
    }
}
declare abstract class TextAnyControl<ValueType, TOptions extends WUP.Number.TextAnyOptions, EventMap extends WUP.Text.EventMap> extends WUPTextControl<ValueType, TOptions, EventMap> {
}
/** Form-control with number-input
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/number}
 * @example
  const el = document.createElement("wup-num");
  el.$options.name = "number";
  el.$options.validations = {
    min: 1,
    max: 1000,
  };

  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-num w-name="number" w-validations="myValidations"/>
  </wup-form>;
 * @see {@link WUPTextControl} */
export default class WUPNumberControl<ValueType = number, TOptions extends WUP.Number.Options = WUP.Number.Options, EventMap extends WUP.Number.EventMap = WUP.Number.EventMap> extends TextAnyControl<ValueType, TOptions, EventMap> {
    #private;
    /** Default options - applied to every element. Change it to configure default behavior */
    static $defaults: WUP.Number.Options;
    /** Custom number parsing: better Number.parse because ignores wrong chars + depends format */
    static $parse(s: string, format: Required<WUP.Number.Format>): number | undefined;
    static $stringify(v: number | undefined | null, format: Required<WUP.Number.Format>): string;
    /** Returns $options.format joined with defaults */
    get $format(): Required<WUP.Number.Format>;
    valueToInput(v: ValueType | undefined, skipScaling?: boolean): string;
    parse(text: string): ValueType | undefined;
    canParseInput(text: string): boolean;
    parseInput(text: string): ValueType | undefined;
    protected setInputValue(v: ValueType | undefined, reason: SetValueReasons): void;
    protected renderControl(): void;
    protected gotChanges(propsChanged: Array<keyof WUP.Number.Options> | null): void;
    protected gotBeforeInput(e: WUP.Text.GotInputEvent): void;
    private _canShowDeclined?;
    protected gotInput(e: WUP.Text.GotInputEvent): void;
    protected gotFocus(ev: FocusEvent): Array<() => void>;
    /** To prevent focus to browser panel by Alt key */
    _wasInc?: boolean;
    _isAltDown?: true;
    _isShiftDown?: true;
    _isCtrlDown?: true;
    protected gotKeyDown(e: KeyboardEvent): void;
    /** Called when user tries to increment/decrement value (via ArrowKeys/Mouse/Swipe) */
    protected gotIncrement(dval: number): void;
}
export {};