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

The design system for Instawork's web apps

import { DateTime, Duration } from 'luxon';
import { CustomComponent } from '../common';
import { TemporalComponent, TemporalInputElement } from '../temporal-component';
import { TimeRangeDurationState } from './time-range-duration-state';
declare global {
    interface JQuery {
        iwTimeRange(): JQuery;
    }
}
/**
 * @event TimeRangeComponent#change - Emitted when the value of the duration changes
 */
/**
 * Component controller that calculates a time range between two {@link TemporalComponent} instances, and corrects the
 * respective dates to ensure the time range is constrained to less than 24 hours.
 *
 * This component does not have a UI of its own, instead providing the {@link TimeRangeComponent.value} property and
 * firing the {@link TimeRangeComponent#event:change} event when the value changes.
 *
 * TODO: the logic in {@link onTimeInputChange} may need additional changes to work correctly with time ranges that are
 *       intended to exceed 24 hours.
 *
 * @example
 * ```
 * <div iw-time-range start="#start" end="#end" add-minutes="#overtime" subtract-minutes="#breakLength">
 *   <iw-time-input id="start" />
 *   <iw-time-input id="end" />
 *   <input type="number" id="overtime" />
 *   <input type="number" id="breakLength" />
 * </div>
 * ```
 *
 * Note: The time inputs are not required to be children of the time range, but it is recommended to do so for clarity.
 */
export declare class TimeRangeComponent extends CustomComponent {
    static readonly COMPONENT_SELECTOR: string;
    static get ID_PREFIX(): string;
    static loadPlugin(): void;
    get startSelector(): string;
    get endSelector(): string;
    get addMinutesSelector(): string;
    get subtractMinutesSelector(): string;
    get value(): TimeRangeDurationState;
    get originalDuration(): Duration;
    /**
     * Whether the component will automatically adjust the date of the start or end time when values are entered or
     * selected that would put the start after the end.
     */
    get autoAdjust(): boolean;
    readonly $start: JQuery<TemporalInputElement>;
    readonly $end: JQuery<TemporalInputElement>;
    readonly $addMinutes: JQuery;
    readonly $subtractMinutes: JQuery;
    readonly startCtrl: TemporalComponent;
    readonly endCtrl: TemporalComponent;
    readonly $triggers: JQuery;
    constructor($el: JQuery);
    protected getMax(): DateTime;
    protected onInvalid(): void;
    /**
     * Handles change events detected from time inputs.
     */
    protected onTimeInputChange(e: Event): void;
    /**
     * Calculates the duration represented by the `start` and `end` values, and emits a
     * {@link TimeRangeComponent#:event:change} event if the values has changed.
     *
     * @fires TimeRangeComponent#change
     * @param start
     * @param end
     * @param isInitial - A flag representing whether the call is for calculating the initial value for the component. If
     *                    `true`, then the calculated duration is used as the `original` value for the generated
     *                    {@link TimeRangeDurationState}.
     */
    protected calculateValue(start: DateTime, end: DateTime, isInitial?: boolean): void;
    /**
     * Calculates the difference between the update and original durations.
     */
    protected calculateDiff(updatedDuration: Duration, originalDuration: Duration): Duration;
    protected calculateExtraMins(): number;
    protected countExtraMinutes($el: JQuery): number;
}