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

package/dist/carousel/carousel.presentation.d.ts

@@ -0,0 +1,379 @@
+import { CarouselEvents } from "./carousel.events.js";
+import { CarouselArgs, CarouselContext, CarouselDragStatus, CarouselSlide, CarouselState } from "./carousel.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/**
+ * Carousel definition: the DOM contract as data. Everything that MOVES is
+ * the browser: the item group is a native scroll container with scroll-snap,
+ * so a drag, a fling and a settle are one motion the platform owns and no
+ * transform is ever written.
+ *
+ * `index` is this machine's name for the page — the element's prop, its
+ * command and its event all say `index`, because a carousel pages slides
+ * and `page` is one word for two ideas.
+ */
+export interface CarouselItemProps {
+  readonly index: number;
+  readonly snapAlign?: "start" | "end" | "center";
+}
+export interface CarouselIndicatorProps {
+  readonly index: number;
+  readonly readOnly?: boolean;
+}
+/** A live value the markup's one-shot text channel cannot otherwise render. */
+export interface CarouselReadout {
+  value: string;
+}
+export interface CarouselIndexChange {
+  readonly index: number;
+  readonly pageCount: number;
+}
+export interface CarouselDragStatusChange {
+  readonly status: CarouselDragStatus;
+  readonly index: number;
+}
+export interface CarouselAutoplayStatusChange {
+  readonly status: "playing" | "stopped";
+  readonly index: number;
+}
+type ScopeLike = ViewFor<CarouselContext, CarouselEvents, CarouselState>;
+type SlotLike<R> = SlotViewFor<R, CarouselContext, CarouselEvents, CarouselState>;
+export declare const def: {
+  name: string;
+  machine: (args: CarouselArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<CarouselContext, CarouselEvents, CarouselState>;
+  start: (raw: Record<string, unknown>) => "idle" | "autoplay";
+  mounted: ({ props, id, root }: {
+    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;
+  }) => void;
+  settled: ({ after, id, root }: {
+    readonly after: {
+      readonly context: CarouselContext;
+      readonly state: CarouselState;
+    };
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly root: () => Element;
+  }) => void;
+  reconcile: ({ context, parsed, send }: {
+    readonly context: CarouselContext;
+    readonly state: CarouselState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    root: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "data-state": string;
+        onPointerdown: () => void;
+        "use:autoplay": {
+          interval: number;
+          enabled: boolean;
+          onTick: () => void;
+        };
+        id: string;
+        role: string;
+      };
+    };
+    control: {
+      attrs: (_scope: ScopeLike) => {
+        role: string;
+        "aria-label": string;
+      };
+    };
+    itemGroup: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "use:resize-observer": {
+          onResize: () => void;
+        };
+        "use:drag-scroll"?: {
+          onDragStart: () => void;
+          onDragEnd: (velocity: number) => void;
+        } | undefined;
+        tabindex: number;
+        onFocusin: () => void;
+        onFocusout: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        onScrollend: () => void;
+        "data-dragging"?: string | undefined;
+        id: string;
+        "data-orientation": "horizontal" | "vertical";
+        "data-draggable": string | undefined;
+        "data-slides": string;
+      };
+    };
+    prevTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "data-disabled": string | undefined;
+        "data-focus": string | undefined;
+        disabled: boolean;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        id: string;
+        type: string;
+        "aria-label": string;
+      };
+    };
+    nextTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "data-disabled": string | undefined;
+        "data-focus": string | undefined;
+        disabled: boolean;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        id: string;
+        type: string;
+        "aria-label": string;
+      };
+    };
+    autoplayTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "data-playing": string | undefined;
+        "data-focus": string | undefined;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        id: string;
+        type: string;
+        "aria-label": string;
+      };
+    };
+    indicatorGroup: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        id: string;
+        role: string;
+        "aria-label": string;
+        onKeydown: (event: KeyboardEvent) => void;
+      };
+    };
+    progressText: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        id: string;
+        "data-state": string;
+      };
+    };
+    autoplayProgress: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        id: string;
+        "data-state": string;
+      };
+    };
+    autoplayProgressFill: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+        "data-state": string;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: CarouselContext) => readonly (CarouselSlide & {
+        readonly index: number;
+      })[];
+      attrs: (scope: SlotLike<{
+        readonly index: number;
+      }>, arg?: unknown) => {
+        "use:intersect": {
+          threshold: number;
+          onVisibility: (visible: boolean) => void;
+        };
+        "aria-label": string;
+        "data-auto-size": string;
+        id: string;
+        role: string;
+        "data-index": number;
+        "data-orientation": "horizontal" | "vertical";
+        "data-inview": string | undefined;
+        "data-snap": string;
+      } | {
+        "use:intersect": {
+          threshold: number;
+          onVisibility: (visible: boolean) => void;
+        };
+        "aria-label": string;
+        id: string;
+        role: string;
+        "data-index": number;
+        "data-orientation": "horizontal" | "vertical";
+        "data-inview": string | undefined;
+        "data-snap": string;
+      };
+    };
+    indicator: {
+      indexes: (context: CarouselContext) => readonly (CarouselSlide & {
+        readonly index: number;
+      })[];
+      attrs: (scope: SlotLike<{
+        readonly index: number;
+        readonly label: string;
+      }>, arg?: unknown) => {
+        "aria-label": string;
+        "data-readonly": string | undefined;
+        "data-focus": string | undefined;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        id: string;
+        type: string;
+        "data-index": number;
+        "data-orientation": "horizontal" | "vertical";
+        "data-current": string | undefined;
+      };
+    };
+  };
+  commands: {
+    next: {
+      event: () => {
+        type: "NEXT";
+      };
+    };
+    prev: {
+      event: () => {
+        type: "PREV";
+      };
+    };
+    goTo: {
+      event: ([index]: [index: number]) => {
+        type: "GO_TO";
+        index: number;
+      };
+    };
+    setAutoplay: {
+      event: ([on]: [on: boolean]) => {
+        type: "AUTOPLAY.START" | "AUTOPLAY.STOP";
+      };
+    };
+    scrollToIndex: {
+      event: ([index]: [index: number], context: CarouselContext) => {
+        type: "GO_TO";
+        index: number;
+      };
+    };
+    scrollTo: {
+      event: ([page]: [page: number]) => {
+        type: "GO_TO";
+        index: number;
+      };
+    };
+    scrollNext: {
+      event: () => {
+        type: "NEXT";
+      };
+    };
+    scrollPrev: {
+      event: () => {
+        type: "PREV";
+      };
+    };
+    play: {
+      event: () => {
+        type: "AUTOPLAY.START";
+      };
+    };
+    pause: {
+      event: () => {
+        type: "AUTOPLAY.STOP";
+      };
+    };
+    refresh: {
+      event: (_args: readonly unknown[], context: CarouselContext) => {
+        type: "PAGES.SET";
+        count: number;
+      };
+    };
+  };
+  readers: {
+    slides: {
+      read: (context: CarouselContext) => CarouselSlide[];
+    };
+    focused: {
+      read: (context: CarouselContext) => boolean;
+    };
+    index: {
+      read: (context: CarouselContext) => number;
+    };
+    pageCount: {
+      read: (context: CarouselContext) => number;
+    };
+    slidesInView: {
+      read: (context: CarouselContext) => number[];
+    };
+    isPlaying: {
+      read: (_context: CarouselContext, state: CarouselState) => state is "autoplay";
+    };
+    isDragging: {
+      read: (context: CarouselContext) => boolean;
+    };
+    isSettling: {
+      read: (context: CarouselContext) => boolean;
+    };
+    dragStatus: {
+      read: (context: CarouselContext) => CarouselDragStatus;
+    };
+    canScrollNext: {
+      read: (context: CarouselContext) => boolean;
+    };
+    canScrollPrev: {
+      read: (context: CarouselContext) => boolean;
+    };
+  };
+  methods: {
+    getProgress: {
+      call: (context: CarouselContext) => number;
+    };
+    getProgressText: {
+      call: (context: CarouselContext) => string;
+    };
+    getProgressRows: {
+      call: (context: CarouselContext, _state: CarouselState, _args: readonly unknown[], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => CarouselReadout[];
+    };
+    isInView: {
+      call: (context: CarouselContext, _state: CarouselState, [index]: [index: number]) => boolean;
+    };
+  };
+  events: {
+    "index-change": {
+      prop: string;
+      watch: (context: CarouselContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        index: number;
+        pageCount: number;
+      };
+    };
+    "drag-status-change": {
+      prop: string;
+      watch: (context: CarouselContext) => (number | CarouselDragStatus)[];
+      detail: (watched: readonly unknown[]) => {
+        status: CarouselDragStatus;
+        index: number;
+      };
+    };
+    "autoplay-status-change": {
+      prop: string;
+      watch: (_context: CarouselContext, state: CarouselState) => boolean[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: CarouselContext) => {
+        status: string;
+        index: number;
+      };
+    };
+  };
+};
+export type CarouselApi = ApiOf<typeof def>;
+export declare const carousel: import("@spinjs/runtime").DefinedComponent<CarouselApi, CarouselArgs>;
+export type { CarouselDragStatus, CarouselSlide };
+//# sourceMappingURL=carousel.presentation.d.ts.map