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

Web package with UI elements

import { AttributeMap } from "../baseElement";
import WUPScrolled from "../helpers/scrolled";
import WUPTimeObject from "../objects/timeObject";
import WUPPopupElement from "../popup/popupElement";
import WUPBaseComboControl, { MenuCloseCases, MenuOpenCases } from "./baseCombo";
declare const tagName = "wup-time";
declare global {
    namespace WUP.Time {
        interface EventMap extends WUP.BaseCombo.EventMap {
        }
        interface ValidityMap extends WUP.BaseCombo.ValidityMap {
            /** Enabled if option [min] is pointed; If $value < pointed shows message 'Min time is {x}` */
            min: WUPTimeObject;
            /** Enabled if option [min] is pointed; if $value > pointed shows message 'Max time is {x}` */
            max: WUPTimeObject;
            /** User can't select time in excluded range */
            exclude: {
                test: (v: WUPTimeObject, c: WUPTimeControl) => boolean;
            };
        }
        interface NewOptions {
            /** String representation of displayed time (enables mask, - to disable mask set $options.mask="");
             * @defaultValue localeInfo.time
             * @example `hh:mm a` or `h:m`
             * @tutorial Troubleshooting
             * * with changing $options.format need to change/reset mask/maskholder also */
            format: string;
            /** Increment value in minutes
             *  @defaultValue 1
             * @tutorial Troubleshooting
             * If set step = 5 user still able to set minutes not divisible step */
            step: number;
            /** Set `false` to hide menu buttons 'Ok' & 'Cancel'
             * @tutorial Troubleshooting
             * in this case any changing selection in menu changes value & input; so user don't need to press Enter
             * but if press escape: menu closed and value reverted to that was before
             * @defaultValue false */
            menuButtonsOff: boolean;
            /** User can't select time less than min */
            min: WUPTimeObject | null;
            /** User can't select time more than max */
            max: WUPTimeObject | null;
            /** User can't select time in excluded range */
            exclude: {
                test: (v: WUPTimeObject, c: WUPTimeControl) => boolean;
            } | null;
        }
        interface Options<T = WUPTimeObject, VM = ValidityMap> extends WUP.BaseCombo.Options<T, VM>, NewOptions {
        }
        interface JSXProps<C = WUPTimeControl> extends WUP.BaseCombo.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
            /** Default value in format hh:mm or hh:mm a */
            "w-initValue"?: string;
            "w-format"?: string;
            "w-step"?: number;
            "w-menuButtonsOff"?: boolean | "";
            /** User can't select date less than min; format hh:mm */
            "w-min"?: string;
            /** User can't select date more than max; format hh:mm */
            "w-max"?: string;
            /** Points that user can't choose
            /** Global reference to object with array
             * @example
             * ```js
             * window.exclude = [new WUPTimeObject("02:30"), ...];
             * <wup-time w-exclude="window.exclude"></wup-time>
             * ``` */
            "w-exclude"?: string;
        }
        interface MenuListElement extends HTMLElement {
            _scrolled: WUPScrolled;
            _value: number;
            goToNext(isNext: boolean): void;
            reInit(): void;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPTimeControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with timepicker
             *  @see {@link WUPTimeControl} */
            [tagName]: WUP.Base.ReactHTML<WUPTimeControl> & WUP.Time.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with timepicker
             *  @see {@link WUPTimeControl} */
            [tagName]: HTMLAttributes<WUPTimeControl> & WUP.Time.JSXProps;
        }
    }
}
/** Form-control with timepicker
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/time}
 * @tutorial Troubleshooting
 * * $options.format related only to displayed text, to work with other time-options like min/max use strict format 'hh:mm'
 * * if increase `--ctrl-icon-size`: change `ctrl-icon-img` to `--ctrl-icon-img: var(--ctrl-time-icon-img-lg)`: otherwise quality is ugly on larger icon
 * @example
  const el = document.createElement("wup-time");
  el.$options.name = "time";
  el.$initValue = new WUPTimeObject(22, 15);
  el.$options.validations = { required: true, min=new WUPTimeObject(01,05), max=new WUPTimeObject(23,00), exclude= };
  el.$options.format = "hh-mm A";
  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-time w-name="time" w-initvalue="22:15" w-min="01:05" w-max="23:00"/>
  </wup-form>; */
export default class WUPTimeControl<ValueType extends WUPTimeObject = WUPTimeObject, TOptions extends WUP.Time.Options = WUP.Time.Options, EventMap extends WUP.Time.EventMap = WUP.Time.EventMap> extends WUPBaseComboControl<ValueType, TOptions, EventMap> {
    #private;
    /** Text announced by screen-readers when button Ok pressed in menu; @defaultValue `Ok` */
    static $ariaOk: string;
    /** Text announced by screen-readers when button Cancel pressed in menu; @defaultValue `Cancel` */
    static $ariaCancel: string;
    /** Aria-label for list in menu; @defaultValue `Hours` */
    static $ariaHours: string;
    /** Aria-label for list in menu; @defaultValue `Minutes` */
    static $ariaMinutes: string;
    /** Aria-label for list in menu; @defaultValue `AM PM` */
    static $ariaHours12: string;
    static get $styleRoot(): string;
    static get $style(): string;
    static get mappedAttributes(): Record<string, AttributeMap>;
    static $defaults: WUP.Time.Options;
    constructor();
    /** Parse string to WUPTimeObject */
    parse(text: string): ValueType | undefined;
    /** Called to parse input text to value (related to locale or pointed format) */
    parseInput(text: string): ValueType | undefined;
    canParseInput(_text: string): boolean;
    valueToStorage(v: ValueType): string;
    protected gotChanges(propsChanged: Array<keyof WUP.Time.Options> | null): void;
    $refMenuLists?: WUP.Time.MenuListElement[];
    $refButtonOk?: HTMLButtonElement;
    $refButtonCancel?: HTMLButtonElement;
    protected get validations(): WUP.Text.Options["validations"];
    /** Set [disabled] for items according to $options.min & max */
    protected disableItems(): void;
    protected renderMenu(popup: WUPPopupElement, menuId: string, rows?: number): HTMLElement;
    protected renderMenuButtons(popup: WUPPopupElement): void;
    protected goOpenMenu(openCase: MenuOpenCases, e?: MouseEvent | FocusEvent | null): Promise<WUPPopupElement | null>;
    protected removePopup(): void;
    /** Cast selected items in menu to WUPTimeObject */
    protected getMenuValue(): ValueType;
    /** Called when need to change/cancel changing & close */
    protected gotBtnsClick(e: MouseEvent, isOk: boolean): void;
    /** Set value base on menu-selected if menuButtons is off */
    protected trySetValue(): void;
    protected selectMenuItem(next: HTMLElement | null): void;
    protected goCloseMenu(closeCase: MenuCloseCases, e?: MouseEvent | FocusEvent | null | undefined): Promise<boolean>;
    protected valueToInput(v: ValueType | undefined): string;
    protected gotInput(e: WUP.Text.GotInputEvent): void;
    protected focusMenuItem(next: HTMLElement | null): void;
    protected focusMenuItemByKeydown(e: KeyboardEvent): void;
    protected gotKeyDown(e: KeyboardEvent): void;
    protected gotFocusLost(): void;
}
export {};