@instawork/design-system/lib/time-selector/time-selector.component.d.ts

The design system for Instawork's web apps

import { DateTime, Duration } from 'luxon';
import { SyncValueAttribute, TemporalComponent } from '../temporal-component';
import './time-selector.component.scss';
export interface TimeSelectorElement extends HTMLSelectElement {
    min: DateTime;
    max: DateTime;
    step: Duration;
    labelFormat: string;
    placeholder?: string;
}
declare global {
    interface HTMLElementTagNameMap {
        'iw-time-selector': TimeSelectorElement;
    }
    interface JQuery {
        iwTimeSelector(): JQuery<TimeSelectorElement>;
    }
}
/**
 * Wraps an HTML <select> component to act as a time selector, and automatically generates incremented options between
 * a min and max time, given an increment in minutes.
 *
 * If the max value does not occur naturally from increments of the min value, it will be added as the last option.
 *
 * Attributes:
 *   min (required): An ISO 8601, Python "naive", or Python "aware" formatted datetime string representing the first
 *                   possible time option
 *   max (required): An ISO 8601, Python "naive", or Python "aware" formatted datetime string representing the last
 *                   possible time option
 *   step (optional): A numeric value representing the option value increment in minutes. Defaults to 15.
 *   label-format (optional): A Luxon format string to use for formatting the text of the options. Defaults to "h:mm a"
 *                            (1:30 PM)
 *   placeholder (optional): A string label to use as a placeholder for an empty value. Defaults to an empty string.
 *                           No empty value placeholder is added if the field is required.
 *   value (optional): An ISO 8601, Python "naive", or Python "aware" formatted datetime string representing the initial
 *                     value
 *
 * Usage:
 * ```html
 *   <iw-time-selector required min="2020-11-03T08:00:00.000" max="2020-11-03T016:00:00.000" value="2020-11-03T12:00:00.000" increment="15" label-format="h:mm a" />
 * ```
 */
export declare class TimeSelectorComponent extends TemporalComponent<TimeSelectorElement> {
    static readonly COMPONENT_SELECTOR = "iw-time-selector";
    static readonly TEMPLATE: string;
    static loadPlugin(): void;
    readonly valueEl: HTMLSelectElement;
    readonly $value: JQuery<HTMLSelectElement>;
    get min(): DateTime;
    get max(): DateTime;
    get step(): Duration;
    get labelFormat(): string;
    protected get syncValueAttr(): SyncValueAttribute;
    protected allowedValues: DateTime[];
    constructor($el: JQuery<TimeSelectorElement>);
    protected validateHostAttributes(): void;
    protected initDom(): void;
    protected syncOptions(): void;
    protected selectValue(value: DateTime | string): void;
    /**
     * Returns the index of the option that represents the value. For undefined values, returns -1 if the input is
     * marked as "required"; otherwise 0 (to select the "empty" option). Returns undefined for values that do not have a
     * corresponding option (these will be invalid).
     * @param value
     * @protected
     */
    protected getValueIndex(value: DateTime | string): number;
    protected createOptions(): Generator<string>;
    protected createOptionValues(): Generator<DateTime>;
    protected onValue(value: DateTime, isChanged: boolean, isValid: boolean): void;
    protected updateValidityState(value: DateTime): DateTime;
    protected setAttrProp(name: string, value: any): void;
    protected setValue(value: string): JQuery;
}