UNPKG

18.4 kBTypeScriptView Raw
1/*! Tripetto Autoscroll Runner 6.1.7 - Copyright (C) 2022 Tripetto B.V. - All Rights Reserved */
2
3declare module "tripetto-runner-autoscroll" {
4 import * as TripettoAutoscroll from "tripetto-runner-autoscroll/module";
5 export * from "tripetto-runner-autoscroll/module";
6 export { TripettoAutoscroll };
7 export default TripettoAutoscroll;
8}
9
10declare module "tripetto-runner-autoscroll/module" {
11 import { CSSProperties, FocusEvent, ReactNode } from "react";
12 import { TOverlayContext } from "tripetto-runner-fabric/overlay";
13 import { IDefinition, ISnapshot, Instance, L10n, NodeBlock, TL10n, TStyles } from "tripetto-runner-foundation";
14 import { IRunnerAttachments, IRunnerProps, TRunnerPreviewData, TRunnerViews } from "tripetto-runner-react-hook";
15 import styled from "styled-components";
16
17 export interface IAutoscrollStyles extends TStyles {
18 readonly direction?: "horizontal" | "vertical";
19 readonly verticalAlignment?: "top" | "middle" | "bottom";
20 readonly hidePast?: boolean;
21 readonly hideUpcoming?: boolean;
22 readonly color?: string;
23 readonly autoFocus?: boolean;
24 readonly showSeparateSubmit?: boolean;
25 readonly showPreviousButton?: boolean;
26 readonly showNavigation?: "auto" | "always" | "never";
27 readonly showProgressbar?: boolean;
28 readonly showEnumerators?: boolean;
29 readonly hideRequiredIndicator?: boolean;
30 readonly showScrollbar?: boolean;
31 readonly disableScrolling?: boolean;
32 readonly noBranding?: boolean;
33 readonly font?: {
34 readonly family?: string;
35 readonly size?: number;
36 readonly sizeSmall?: number;
37 };
38 readonly background?: {
39 readonly color?: string;
40 readonly url?: string;
41 readonly opacity?: number;
42 readonly positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
43 };
44 readonly inputs?: {
45 readonly backgroundColor?: string;
46 readonly borderColor?: string;
47 readonly borderSize?: number;
48 readonly roundness?: number;
49 readonly textColor?: string;
50 readonly errorColor?: string;
51 readonly agreeColor?: string;
52 readonly declineColor?: string;
53 readonly selectionColor?: string;
54 };
55 readonly buttons?: {
56 readonly baseColor?: string;
57 readonly textColor?: string;
58 readonly roundness?: number;
59 readonly mode?: "fill" | "outline";
60 readonly finishColor?: string;
61 };
62 readonly navigation?: {
63 readonly backgroundColor?: string;
64 readonly textColor?: string;
65 readonly progressbarColor?: string;
66 };
67 }
68 export interface IRuntimeStyles extends IAutoscrollStyles {
69 readonly direction: "horizontal" | "vertical";
70 readonly verticalAlignment: "top" | "middle" | "bottom";
71 readonly font: {
72 readonly family: string;
73 readonly size: number;
74 readonly sizeSmall: number;
75 readonly color: string;
76 };
77 readonly background: {
78 readonly color: string;
79 readonly opacity: number;
80 readonly url?: string;
81 readonly positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
82 };
83 readonly inputs: {
84 readonly backgroundColor: string;
85 readonly borderColor: string;
86 readonly borderSize: number;
87 readonly roundness: number | undefined;
88 readonly textColor: string;
89 readonly errorColor: string;
90 readonly scale: number;
91 };
92 readonly checkboxes: {
93 readonly backgroundColor: string;
94 readonly borderColor: string;
95 readonly borderSize: number;
96 readonly roundness: number | undefined;
97 readonly textColor: string;
98 readonly errorColor: string;
99 readonly scale: number;
100 readonly hideRequiredIndicator: boolean;
101 };
102 readonly radiobuttons: {
103 readonly backgroundColor: string;
104 readonly borderColor: string;
105 readonly borderSize: number;
106 readonly textColor: string;
107 readonly scale: number;
108 };
109 readonly matrix: {
110 readonly backgroundColor: string;
111 readonly borderColor: string;
112 readonly borderSize: number;
113 readonly textColor: string;
114 readonly errorColor: string;
115 readonly scale: number;
116 readonly hideRequiredIndicator: boolean;
117 };
118 readonly yesNo: {
119 readonly yesColor: string;
120 readonly noColor: string;
121 readonly outlineSize: number;
122 readonly roundness: number | undefined;
123 readonly scale: number;
124 readonly margin: number;
125 readonly alignment: "horizontal" | "vertical";
126 };
127 readonly rating: {
128 readonly color: string;
129 readonly scale: number;
130 };
131 readonly scale: {
132 readonly color: string;
133 readonly outlineSize: number;
134 readonly roundness: number | undefined;
135 readonly scale: number;
136 readonly margin: number;
137 readonly labelColor: string;
138 };
139 readonly multipleChoice: {
140 readonly color: string;
141 readonly outlineSize: number;
142 readonly roundness: number | undefined;
143 readonly scale: number;
144 readonly margin: number;
145 };
146 readonly pictureChoice: {
147 readonly color: string;
148 readonly outlineSize: number;
149 readonly roundness: number | undefined;
150 readonly scale: number;
151 readonly margin: number;
152 };
153 readonly fileUpload: {
154 readonly backgroundColor: string;
155 readonly borderColor: string;
156 readonly borderSize: number;
157 readonly roundness: number | undefined;
158 readonly textColor: string;
159 readonly errorColor: string;
160 readonly scale: number;
161 };
162 readonly buttons: {
163 readonly baseColor: string;
164 readonly textColor: string | undefined;
165 readonly outlineSize: number;
166 readonly roundness: number | undefined;
167 readonly mode: "fill" | "outline";
168 readonly scale: number;
169 };
170 readonly finishButton: {
171 readonly baseColor: string;
172 readonly textColor: string | undefined;
173 readonly outlineSize: number;
174 readonly roundness: number | undefined;
175 readonly mode: "fill" | "outline";
176 readonly scale: number;
177 };
178 }
179 export interface IAutoscrollRenderProps {
180 readonly index: number;
181 readonly id: string;
182 readonly l10n: L10n.Namespace;
183 readonly styles: IRuntimeStyles;
184 readonly overlay: TOverlayContext;
185 readonly view: TRunnerViews;
186 readonly name: JSX.Element | undefined;
187 readonly description: JSX.Element | undefined;
188 readonly explanation: JSX.Element | undefined;
189 readonly label: JSX.Element | undefined;
190 readonly placeholder: string;
191 readonly tabIndex: number;
192 readonly isActivated: boolean;
193 readonly isFailed: boolean;
194 readonly isPage: boolean;
195 readonly ariaDescribedBy: string | undefined;
196 readonly ariaDescription: JSX.Element | undefined;
197 readonly focus: <T>(e: FocusEvent) => T;
198 readonly blur: <T>(e: FocusEvent) => T;
199 readonly autoFocus: (element: HTMLElement | null) => void;
200 readonly attachments: IRunnerAttachments | undefined;
201 readonly markdownifyToJSX: (md: string, lineBreaks?: boolean) => JSX.Element;
202 readonly markdownifyToURL: (md: string) => string;
203 readonly markdownifyToImage: (md: string) => string;
204 readonly markdownifyToString: (md: string) => string;
205 }
206 export interface IAutoscrollRendering extends NodeBlock {
207 readonly required?: boolean;
208 readonly hideRequiredIndicatorFromName?: boolean;
209 readonly hideAriaDescription?: boolean;
210 readonly hideButtons?: boolean;
211 readonly autoSubmit?: boolean;
212 readonly autoFocus?: boolean;
213 readonly render?: (props: IAutoscrollRenderProps, done?: () => void, cancel?: () => void) => ReactNode;
214 }
215 export interface IAutoscrollSnapshot {
216 /** Contains the active block. */
217 readonly a?: string;
218 /** Contains focus information. */
219 readonly b?: {
220 [key: string]: false | true | undefined;
221 };
222 /** Contains the email address that was used to pause. */
223 readonly d?: string;
224 /** Contains a timestamp of the snapshot. */
225 readonly e?: number;
226 }
227 export interface IAutoscrollController {
228 definition: IDefinition;
229 styles: IAutoscrollStyles;
230 l10n: TL10n;
231 view: TRunnerViews;
232 readonly instance: Instance | undefined;
233 readonly fingerprint: string;
234 readonly snapshot: ISnapshot<IAutoscrollSnapshot> | undefined;
235 readonly isRunning: boolean;
236 readonly isFinishing: boolean;
237 readonly isPausing: boolean;
238 readonly allowStart: boolean;
239 readonly allowRestart: boolean;
240 readonly allowPause: boolean;
241 readonly allowStop: boolean;
242 readonly start: () => void;
243 readonly restart: () => void;
244 readonly pause: () => ISnapshot<IAutoscrollSnapshot> | Promise<ISnapshot<IAutoscrollSnapshot>> | undefined;
245 readonly stop: () => void;
246 readonly doPreview: (data: TRunnerPreviewData) => void;
247 }
248 export type TAutoscrollDisplay = "inline" | "page";
249 export type TAutoscrollPause =
250 | {
251 readonly recipe: "email";
252 readonly onPause: (
253 emailAddress: string,
254 snapshot: ISnapshot,
255 language: string,
256 locale: string,
257 namespace: string
258 ) => Promise<void> | boolean | void;
259 }
260 | ((snapshot: ISnapshot, language: string, locale: string, namespace: string) => Promise<void> | boolean | void);
261 export interface IAutoscrollProps extends IRunnerProps<IAutoscrollSnapshot> {
262 readonly styles?: IAutoscrollStyles;
263 readonly l10n?: TL10n;
264 readonly view?: TRunnerViews;
265 readonly display?: TAutoscrollDisplay;
266 readonly controller?: [IAutoscrollController | undefined];
267 readonly className?: string;
268 readonly customStyle?: CSSProperties;
269 readonly customCSS?: string;
270 readonly onL10n?: (l10n: TL10n) => Promise<void>;
271 readonly onReload?: () => IDefinition | Promise<IDefinition>;
272 readonly onEdit?: (type: "prologue" | "epilogue" | "styles" | "l10n" | "block", id?: string) => void;
273 readonly onPause?: TAutoscrollPause;
274 readonly onTouch?: () => void;
275 }
276 export const AutoscrollRunner: (props: IAutoscrollProps) => JSX.Element;
277 export interface IAutoscroll {
278 /** Specifies the parent element for the runner. */
279 readonly element?: HTMLElement | null;
280 /** Specifies the definition to run. */
281 readonly definition?: IDefinition | Promise<IDefinition | undefined>;
282 /** Specifies the snapshot that should be restored. */
283 readonly snapshot?: ISnapshot<IAutoscrollSnapshot> | Promise<ISnapshot<IAutoscrollSnapshot> | undefined>;
284 /** Specifies the styles. */
285 readonly styles?: IAutoscrollStyles | Promise<IAutoscrollStyles | undefined>;
286 /** Specifies the localization information. */
287 readonly l10n?: TL10n | Promise<TL10n | undefined>;
288 /** Specifies the view mode. */
289 readonly view?: TRunnerViews;
290 /** Specifies the display mode. */
291 readonly display?: TAutoscrollDisplay;
292 /** Try to store sessions in the local store to preserve persistency on navigation between multiple pages that host the runner. */
293 readonly persistent?: boolean;
294 /** Specifies a custom class name for the runner element. */
295 readonly className?: string;
296 /** Specifies the inline style for the runner element. */
297 readonly customStyle?: CSSProperties;
298 /**
299 * Specifies custom CSS rules.
300 * To specify rules for a specific block, use this selector: [data-block="<block identifier>"] { ... }
301 */
302 readonly customCSS?: string;
303 /** Specifies the attachments handler. */
304 readonly attachments?: IRunnerAttachments;
305 /** Specifies the preferred language (when no language is specified in the definition). */
306 readonly language?: string;
307 /** Provides locale information. */
308 readonly locale?: L10n.ILocale | ((locale: string) => L10n.ILocale | Promise<L10n.ILocale | undefined> | undefined);
309 /** Provides translations. */
310 readonly translations?:
311 | L10n.TTranslation
312 | L10n.TTranslation[]
313 | ((
314 language: string,
315 name: string,
316 version: string
317 ) => L10n.TTranslation | L10n.TTranslation[] | Promise<L10n.TTranslation | L10n.TTranslation[] | undefined> | undefined);
318 /** Specifies a function that is invoked when the runner is ready. */
319 readonly onReady?: (instance?: Instance) => void;
320 /** Specifies a function that is invoked when the runner is touched by a user. */
321 readonly onTouch?: () => void;
322 /** Specifies a function that is invoked when the user performs an action. */
323 readonly onAction?: (
324 type: "start" | "stage" | "unstage" | "focus" | "blur" | "pause" | "complete",
325 definition: {
326 readonly fingerprint: string;
327 readonly name: string;
328 },
329 block?: {
330 readonly id: string;
331 readonly name: string;
332 }
333 ) => void;
334 /** Invoked when data can be imported into the instance. */
335 readonly onImport?: (instance: Instance) => void;
336 /** Invoked when there is a change. */
337 readonly onChange?: (instance: Instance) => void;
338 /** Invoked when there is a data change. */
339 readonly onData?: (instance: Instance) => void;
340 /** Specifies a function that is invoked when the runner wants to pause. */
341 readonly onPause?: TAutoscrollPause;
342 /** Specifies a function that is invoked when the runner submits data. */
343 readonly onSubmit?: (
344 instance: Instance,
345 language: string,
346 locale: string,
347 namespace?: string
348 ) => Promise<string | undefined> | boolean | void;
349 /** Invoked when the runner is completed (after the data is submitted). */
350 readonly onComplete?: (instance: Instance, id?: string) => void;
351 /** Invoked when the runner wants to reload the definition. */
352 readonly onReload?: () => IDefinition | Promise<IDefinition>;
353 /** Specifies a function that is invoked when an edit action is requested. */
354 readonly onEdit?: (type: "prologue" | "epilogue" | "styles" | "l10n" | "block", id?: string) => void;
355 /** Specifies a function that is invoked when the runner is destroyed. */
356 readonly onDestroy?: () => void;
357 }
358 export interface IAutoscrollRunner extends IAutoscrollController {
359 readonly destroy: () => void;
360 }
361 /**
362 * Bootstraps a new runner.
363 * @param props Specifies the properties for the runner.
364 * @returns Returns a promise to the runner controller.
365 */
366 export function run(props: IAutoscroll): Promise<IAutoscrollRunner>;
367 /** Namespace identifier for the runner. */
368 export const namespace: string;
369 export { color } from "tripetto-runner-fabric/color";
370 export { ButtonFabric } from "tripetto-runner-fabric/components/button";
371 export { CheckboxFabric } from "tripetto-runner-fabric/components/checkbox";
372 export { CheckboxesFabric, ICheckbox } from "tripetto-runner-fabric/components/checkboxes";
373 export { DateTimeFabric } from "tripetto-runner-fabric/components/datetime";
374 export { DropdownFabric, IDropdownFabricOption } from "tripetto-runner-fabric/components/dropdown";
375 export { EmailFabric } from "tripetto-runner-fabric/components/email";
376 export { FileFabric, FileThumbnailFabric, IFileController, IFileService } from "tripetto-runner-fabric/components/file";
377 export { InputFabric } from "tripetto-runner-fabric/components/input";
378 export { MatrixFabric, IMatrixColumn, IMatrixRow } from "tripetto-runner-fabric/components/matrix";
379 export { MultiSelectFabric, IMultiSelectOption } from "tripetto-runner-fabric/components/multi-select";
380 export { MultipleChoiceFabric, IMultipleChoiceButton } from "tripetto-runner-fabric/components/multiple-choice";
381 export { NumberFabric } from "tripetto-runner-fabric/components/number";
382 export { PasswordFabric } from "tripetto-runner-fabric/components/password";
383 export { PhoneNumberFabric } from "tripetto-runner-fabric/components/phone-number";
384 export { PictureChoiceFabric, IPictureChoiceOption } from "tripetto-runner-fabric/components/picture-choice";
385 export { RadiobuttonsFabric, IRadiobutton } from "tripetto-runner-fabric/components/radiobuttons";
386 export { RatingFabric, RatingShapes } from "tripetto-runner-fabric/components/rating";
387 export { RequiredIndicatorFabric } from "tripetto-runner-fabric/components/required-indicator";
388 export { ScaleFabric, IScaleNumeric, IScaleOption } from "tripetto-runner-fabric/components/scale";
389 export { TextFabric } from "tripetto-runner-fabric/components/text";
390 export { TextareaFabric } from "tripetto-runner-fabric/components/textarea";
391 export { URLFabric } from "tripetto-runner-fabric/components/url";
392 export { YesNoFabric, IYesNo } from "tripetto-runner-fabric/components/yes-no";
393 export { styled };
394 export { css, keyframes } from "styled-components";
395}