@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/date-picker/date-picker.presentation.d.ts

@@ -0,0 +1,256 @@
+import { DatePickerArgs, DatePickerContext, DatePickerState, DatePickerValue, DatePickerView } from "./date-picker.state.js";
+import { DatePickerEvents, DatePickerValueChange } from "./date-picker.events.js";
+import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+/**
+ * One grid cell. `value` is the day it names in every view — a month cell
+ * is that month's first day, a year cell January first — so the machine's
+ * clamp and the focus moves speak one currency.
+ */
+export interface DatePickerCellView {
+  readonly key: string;
+  readonly value: DatePickerValue;
+  /** A day from the month before or after, shown greyed (day view only). */
+  readonly outside: boolean;
+  readonly isToday: boolean;
+  readonly selected: boolean;
+  /** Inside the selected range, including its hover preview. */
+  readonly inRange: boolean;
+  readonly rangeEdge: "start" | "end" | null;
+  readonly disabled: boolean;
+}
+type SlotLike<R> = SlotViewFor<R, DatePickerContext, DatePickerEvents, DatePickerState>;
+type IdFn = (part: string, slot?: unknown) => string;
+declare const def: {
+  name: string;
+  machine: (args: DatePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<DatePickerContext, DatePickerEvents, DatePickerState>;
+  establish: (raw: Record<string, unknown>, authored: (name: string) => boolean) => {
+    type: string;
+  }[];
+  settled: ({ before, after, root }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: DatePickerContext;
+      readonly state: DatePickerState;
+    };
+    readonly after: {
+      readonly context: DatePickerContext;
+      readonly state: DatePickerState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+  parts: {
+    trigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        onClick: () => void;
+        "data-state": string;
+        id: string;
+        "aria-label": string;
+      };
+    };
+    content: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+        role: string;
+        "use:date-picker-focus": {
+          open: boolean;
+          cellId: string;
+        };
+        "aria-label": string;
+        "data-state": string;
+        "use:dismissable": {
+          onOutside: (event: PointerEvent) => void;
+          onEscape: () => void;
+        };
+      };
+    };
+    grid: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        "data-view": DatePickerView;
+        class: string;
+        onPointerLeave: () => void;
+        id: string;
+        role: string;
+        tabIndex: number;
+      };
+    };
+    label: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+      };
+    };
+    prevTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+        "aria-label": string;
+        onClick: () => void;
+      };
+    };
+    nextTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+        "aria-label": string;
+        onClick: () => void;
+      };
+    };
+    viewControl: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+        "data-view": DatePickerView;
+        onClick: () => void;
+      };
+    };
+    clearTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+        id: string;
+        "aria-label": string;
+        hidden: boolean;
+        onClick: () => void;
+      };
+    };
+  };
+  slots: {
+    cell: {
+      indexes: (context: DatePickerContext) => readonly DatePickerCellView[];
+      attrs: (scope: SlotLike<DatePickerCellView>) => {
+        onClick: () => void;
+        onPointerMove: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+        "data-value": string;
+        "data-selected": string | undefined;
+        "data-in-range": string | undefined;
+        "data-outside": string | undefined;
+        "data-view": DatePickerView;
+        tabIndex: number;
+        text: string;
+        id: string;
+        role: string;
+      };
+    };
+  };
+  commands: {
+    open: {
+      event: () => {
+        type: "OPEN";
+      };
+    };
+    close: {
+      event: () => {
+        type: "CLOSE";
+      };
+    };
+    clear: {
+      event: () => {
+        type: "VALUE.CLEAR";
+      };
+    };
+    setValue: {
+      event: ([raw]: [value: readonly DatePickerValue[] | null]) => {
+        type: "VALUE.SET";
+        value: DatePickerValue[];
+      };
+    };
+  };
+  readers: {
+    isOpen: {
+      read: (_context: DatePickerContext, state: DatePickerState) => state is "open";
+    };
+    value: {
+      read: (context: DatePickerContext) => DatePickerValue[];
+    };
+    valueAsString: {
+      read: (context: DatePickerContext) => string[];
+    };
+    focusedValue: {
+      read: (context: DatePickerContext) => {
+        year: number;
+        month: number;
+        day: number;
+      };
+    };
+    view: {
+      read: (context: DatePickerContext) => DatePickerView;
+    };
+  };
+  methods: {
+    getWeekdayLabels: {
+      call: (context: DatePickerContext) => readonly string[];
+    };
+    getValueTextRows: {
+      call: (context: DatePickerContext, _state: DatePickerState, _args: readonly unknown[], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => readonly {
+        readonly value: string;
+        readonly text: string;
+        readonly first: boolean;
+      }[];
+    };
+    getViewTextRows: {
+      call: (context: DatePickerContext, _state: DatePickerState, _args: readonly unknown[], _props: Record<string, unknown>, id: IdFn) => readonly {
+        readonly value: string;
+        readonly text: string;
+      }[];
+    };
+    getCells: {
+      call: (context: DatePickerContext) => readonly DatePickerCellView[];
+    };
+    getCellState: {
+      call: (context: DatePickerContext, _state: DatePickerState, [key]: [key: string]) => {
+        readonly selected: boolean;
+        readonly inRange: boolean;
+        readonly disabled: boolean;
+        readonly outside: boolean;
+      };
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: DatePickerContext) => string[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: DatePickerContext) => {
+        value: DatePickerValue[];
+        valueAsString: string[];
+      };
+    };
+    "focus-change": {
+      prop: string;
+      watch: (context: DatePickerContext) => string[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: DatePickerContext) => {
+        focusedValue: {
+          year: number;
+          month: number;
+          day: number;
+        };
+        view: DatePickerView;
+      };
+    };
+    "view-change": {
+      prop: string;
+      watch: (context: DatePickerContext) => DatePickerView[];
+      detail: (watched: readonly unknown[]) => {
+        view: DatePickerView;
+      };
+    };
+    "open-change": {
+      prop: string;
+      watch: (_context: DatePickerContext, state: DatePickerState) => boolean[];
+      detail: (watched: readonly unknown[]) => {
+        open: boolean;
+      };
+    };
+  };
+};
+export type DatePickerApi = ApiOf<typeof def>;
+export declare const datePicker: import("@spinjs/runtime").DefinedComponent<DatePickerApi, DatePickerArgs>;
+export type { DatePickerValue, DatePickerValueChange, DatePickerView };
+//# sourceMappingURL=date-picker.presentation.d.ts.map