@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/types/slotted-angular-time-picker.d.ts

@@ -0,0 +1,260 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, TimePickerMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, OnInit, TemplateRef, ElementRef } from '@angular/core';
+import { TimeGranularity, PlainTime, TimeOption } from '@slotted/core/date';
+import { ChangeRequest } from '@slotted/core/state';
+import { TimeFieldHourCycle, TimeFieldChangeRequest, SlTimeField } from '@slotted/angular/time-field';
+
+type TimePickerSize = 'sm' | 'md' | 'lg';
+type TimePickerVariant = 'outline' | 'subtle' | 'plain';
+/** Where the surface opens, before the positioner has read the room. */
+type TimePickerPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';
+/**
+ * Whether choosing a time closes the surface. `auto` closes, because one press
+ * chooses a whole time — there is no second half to come back for.
+ */
+type TimePickerCloseOnSelect = 'auto' | 'always' | 'never';
+/** What a time a bound or the predicate refuses looks like in the list. */
+type TimePickerUnavailableOptions = 'disable' | 'hide';
+/**
+ * A quarter of an hour, which is the slot a booking flow asks in and the step
+ * every surveyed panel defaults to within a factor of two.
+ */
+declare const TIME_PICKER_STEP = 900;
+/**
+ * How long the list may get: a whole day at a one-minute step, which is the
+ * finest whole-day list any surveyed implementation offers. A day at a
+ * one-second step is 86 400 rows and a configuration mistake rather than a
+ * list; it is cut rather than handed to the DOM.
+ */
+declare const TIME_PICKER_MAX_OPTIONS = 1440;
+interface TimePickerDefaults {
+    closeOnSelect: TimePickerCloseOnSelect;
+    granularity: TimeGranularity;
+    hourCycle: TimeFieldHourCycle | undefined;
+    maxOptions: number;
+    placement: TimePickerPlacement;
+    size: TimePickerSize;
+    step: number;
+    timeZone: string | undefined;
+    unavailableOptions: TimePickerUnavailableOptions;
+    variant: TimePickerVariant;
+}
+declare const TIME_PICKER_DEFAULTS: InjectionToken<TimePickerDefaults>;
+/**
+ * An application decides once what step its panels offer, rather than repeating
+ * the same inputs on every picker in a product. A picker that states any of
+ * them itself still wins. The locale and the words come from the language in
+ * force (`provideSlotted`).
+ *
+ * `step` is the one worth setting first: a product books in twenty-minute slots
+ * and a quarter-hour default puts a panel of the wrong times in front of every
+ * reader.
+ */
+declare function provideTimePickerDefaults(defaults: Partial<TimePickerDefaults>): {
+    provide: InjectionToken<TimePickerDefaults>;
+    useFactory: () => TimePickerDefaults;
+};
+/** What a time picker renders as here, before it states anything of its own. */
+declare function injectTimePickerDefaults(): TimePickerDefaults;
+
+/**
+ * A time field, a trigger, and a list of times behind them.
+ *
+ * **It composes `time-field` and redraws none of it.** The field keeps its own
+ * `data-ui`; this family owns the box the positioner measures, the trigger
+ * inside the field's end slot, and the layer the list stands on.
+ *
+ * **One panel shape, at every step.** A listbox of whole times. A column per
+ * unit was drawn and withdrawn — the field types every second, and `options`
+ * states any set of times a step cannot describe.
+ *
+ * **The panel never takes the field away.** `Alt`+`ArrowDown` opens it and
+ * leaves focus in the field, so the segments keep every key they had.
+ */
+declare class SlTimePicker implements OnInit {
+    readonly value: _angular_core.InputSignal<PlainTime | null | undefined>;
+    readonly defaultValue: _angular_core.InputSignal<PlainTime | null | undefined>;
+    /** Present means the consumer owns whether the surface is showing. */
+    readonly open: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly defaultOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Where the reader is in the list. Present means the consumer owns it. */
+    readonly highlightedValue: _angular_core.InputSignal<PlainTime | null | undefined>;
+    readonly defaultHighlightedValue: _angular_core.InputSignal<PlainTime | null | undefined>;
+    readonly min: _angular_core.InputSignal<PlainTime | undefined>;
+    readonly max: _angular_core.InputSignal<PlainTime | undefined>;
+    readonly isTimeUnavailable: _angular_core.InputSignal<((time: PlainTime) => boolean) | undefined>;
+    /** Seconds between two offered times. Ignored when `options` states the list. */
+    readonly step: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * The times to offer, stated rather than stepped. A step describes a regular
+     * list and a great many real ones are not: a clinic open at 09:00, 09:20 and
+     * 13:45, a broadcast schedule, a set of second-level marks.
+     */
+    readonly options: _angular_core.InputSignal<readonly PlainTime[] | undefined>;
+    readonly maxOptions: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly unavailableOptions: _angular_core.InputSignal<TimePickerUnavailableOptions | undefined>;
+    /** BCP 47. Unset, the language in force (`provideSlotted`) decides. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly timeZone: _angular_core.InputSignal<string | undefined>;
+    readonly hourCycle: _angular_core.InputSignal<TimeFieldHourCycle | undefined>;
+    readonly granularity: _angular_core.InputSignal<TimeGranularity | undefined>;
+    readonly referenceTime: _angular_core.InputSignal<PlainTime | undefined>;
+    readonly size: _angular_core.InputSignal<TimePickerSize | undefined>;
+    readonly variant: _angular_core.InputSignal<TimePickerVariant | undefined>;
+    readonly placement: _angular_core.InputSignal<TimePickerPlacement | undefined>;
+    readonly closeOnSelect: _angular_core.InputSignal<TimePickerCloseOnSelect | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly relative: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's two names, the now control, and what the panel says when it is
+     * empty or cut short.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<TimePickerMessages> | undefined>;
+    readonly valueChange: _angular_core.OutputEmitterRef<TimeFieldChangeRequest | ChangeRequest<PlainTime | null>>;
+    readonly openChange: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    readonly highlightedValueChange: _angular_core.OutputEmitterRef<ChangeRequest<PlainTime | null>>;
+    /**
+     * What one row draws. The row is the family's — its role, its states and its
+     * keyboard — and what is written inside it is the consumer's. A template
+     * rather than a slot, because it is re-rendered once per option.
+     */
+    protected optionTemplate?: TemplateRef<unknown>;
+    protected layer?: ElementRef<HTMLElement>;
+    protected triggerRef?: ElementRef<HTMLButtonElement>;
+    protected listRef?: ElementRef<HTMLElement>;
+    protected field?: SlTimeField;
+    private readonly element;
+    private readonly defaults;
+    private readonly appLocale;
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<TimePickerMessages>;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly enclosing;
+    protected readonly contentId: string;
+    private readonly ownOpen;
+    private readonly ownValue;
+    private readonly ownHighlight;
+    private readonly clock;
+    protected readonly positioned: _angular_core.WritableSignal<boolean>;
+    protected readonly sheet: _angular_core.WritableSignal<boolean>;
+    private positioner;
+    private dismissable;
+    private typeahead;
+    protected readonly isOpen: _angular_core.Signal<boolean>;
+    protected readonly held: _angular_core.Signal<PlainTime | null>;
+    protected readonly resolvedLocale: _angular_core.Signal<string>;
+    protected readonly resolvedTimeZone: _angular_core.Signal<string | undefined>;
+    protected readonly resolvedHourCycle: _angular_core.Signal<TimeFieldHourCycle | undefined>;
+    protected readonly resolvedGranularity: _angular_core.Signal<TimeGranularity>;
+    protected readonly resolvedSize: _angular_core.Signal<TimePickerSize>;
+    protected readonly resolvedVariant: _angular_core.Signal<TimePickerVariant>;
+    protected readonly resolvedPlacement: _angular_core.Signal<TimePickerPlacement>;
+    protected readonly resolvedDisabled: _angular_core.Signal<boolean | undefined>;
+    protected readonly resolvedReadOnly: _angular_core.Signal<boolean | undefined>;
+    protected readonly resolvedRequired: _angular_core.Signal<boolean | undefined>;
+    /**
+     * Validity the family owns, beside the validity the consumer states: a time
+     * outside the bounds or refused by the predicate is invalid whatever the
+     * field around it says, because this control is the only thing that knows.
+     */
+    protected readonly resolvedInvalid: _angular_core.Signal<boolean | undefined>;
+    protected readonly editable: _angular_core.Signal<boolean>;
+    private readonly format;
+    private readonly anchor;
+    private readonly listOptions;
+    protected readonly list: _angular_core.Signal<TimeOption[]>;
+    protected readonly truncated: _angular_core.Signal<boolean>;
+    private readonly labels;
+    protected readonly highlight: _angular_core.Signal<PlainTime | null>;
+    protected readonly highlightIndex: _angular_core.Signal<number>;
+    /**
+     * The trigger's accessible name. Focus returns here when the surface closes,
+     * so this is where the reader is told what was chosen.
+     */
+    protected readonly triggerLabel: _angular_core.Signal<string>;
+    private readonly closesOnSelect;
+    constructor();
+    ngOnInit(): void;
+    /** Puts focus on the first segment of the field. */
+    focus(): void;
+    openSurface(source?: Event): void;
+    closeSurface(source?: Event): void;
+    protected labelFor(option: TimeOption): string;
+    protected isSelected(option: TimeOption): boolean;
+    protected contextFor(option: TimeOption, index: number): {
+        $implicit: PlainTime;
+        current: boolean;
+        label: string;
+        selected: boolean;
+        unavailable: boolean;
+    };
+    protected toggle(source: Event): void;
+    protected chooseNow(source: Event): void;
+    protected select(option: TimeOption, source: Event): void;
+    private close;
+    /**
+     * Where the panel opens: on the chosen time, on the nearest step to now when
+     * nothing is chosen, and on the first available option when that is refused.
+     */
+    private openingIndex;
+    private enterList;
+    private focusOption;
+    protected onControlKeyDown(event: KeyboardEvent): void;
+    protected onTriggerKeyDown(event: KeyboardEvent): void;
+    protected onListKeyDown(event: KeyboardEvent): void;
+    protected onFieldValue(request: TimeFieldChangeRequest): void;
+    private commit;
+    private setHighlight;
+    private setOpen;
+    /** Places the layer and puts it in the single stack. */
+    private attach;
+    private release;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTimePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlTimePicker, "[slTimePicker]", ["slTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "highlightedValue": { "alias": "highlightedValue"; "required": false; "isSignal": true; }; "defaultHighlightedValue": { "alias": "defaultHighlightedValue"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isTimeUnavailable": { "alias": "isTimeUnavailable"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "maxOptions": { "alias": "maxOptions"; "required": false; "isSignal": true; }; "unavailableOptions": { "alias": "unavailableOptions"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "referenceTime": { "alias": "referenceTime"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "relative": { "alias": "relative"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; "highlightedValueChange": "highlightedValueChange"; }, ["optionTemplate"], ["[slTimePickerPresets]", "[slTimePickerFooter]"], true, never>;
+}
+
+/**
+ * What one row of the panel draws.
+ *
+ * The row is the family's — its role, its states, its keyboard and its target
+ * size — and what is written inside it is the consumer's. It is a template
+ * rather than a projected slot because it is re-rendered once per option, which
+ * is exactly the case `references/frameworks.md` names `NgTemplateOutlet` for.
+ *
+ * The context carries the time as `$implicit`, plus `label`, `selected`,
+ * `current` and `unavailable`.
+ */
+declare class SlTimePickerOption {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTimePickerOption, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTimePickerOption, "[slTimePickerOption]", ["slTimePickerOption"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * The consumer's own shortcuts, in a column beside the list.
+ *
+ * This family ships no list of them: "start of the shift" is a business clock
+ * and a library that guessed at one would be guessing at an industry. What it
+ * ships is the column they stand in.
+ */
+declare class SlTimePickerPresets {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTimePickerPresets, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTimePickerPresets, "[slTimePickerPresets]", ["slTimePickerPresets"], {}, {}, never, never, true, never>;
+}
+/** The consumer's own actions, under the list. */
+declare class SlTimePickerFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTimePickerFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTimePickerFooter, "[slTimePickerFooter]", ["slTimePickerFooter"], {}, {}, never, never, true, never>;
+}
+
+export { SlTimePicker, SlTimePickerFooter, SlTimePickerOption, SlTimePickerPresets, TIME_PICKER_DEFAULTS, TIME_PICKER_MAX_OPTIONS, TIME_PICKER_STEP, injectTimePickerDefaults, provideTimePickerDefaults };
+export type { TimePickerCloseOnSelect, TimePickerDefaults, TimePickerPlacement, TimePickerSize, TimePickerUnavailableOptions, TimePickerVariant };
+//# sourceMappingURL=slotted-angular-time-picker.d.ts.map

package/types/slotted-angular-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-time-picker.d.ts","sources":["../../time-picker/src/time-picker-defaults.ts","../../time-picker/src/time-picker.ts","../../time-picker/src/time-picker-option.ts","../../time-picker/src/time-picker-parts.ts"],"mappings":"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","names":[]}