@pairbo/ui-kit 0.3.29 → 0.3.31

package/dist/src/components/editor/editor.component.d.ts

@@ -14,6 +14,8 @@ export default class PboEditor extends PairboElement {
     submitHandwrittenForm: SubmitHandwrittenForm | undefined;
     getProcessedImg: GetProcessedImg | undefined;
     onClose: () => void;
+    typeFormCtaLabel: string;
+    handwrittenFormCtaLabel: string;
     typeForm: PboTypeForm;
     handwrittenForm: PboHandwrittenForm;
     slider: PboEditorCardSlider;

package/dist/src/components/editor-card-slider/editor-card-slider.component.d.ts

@@ -34,7 +34,9 @@ export default class PboEditorCardSlider extends PairboElement {
         isLoading: boolean;
         processedFileUrl: string | null;
     };
-    type: "type" | "handwritten";
+    type: EditorType;
+    allowPinchToToggle: boolean;
+    distance: null | number;
     thumbnailCarousel: HTMLDivElement;
     mainCarousel: HTMLDivElement;
     zoomedPreview: PboDrawer;
@@ -46,6 +48,7 @@ export default class PboEditorCardSlider extends PairboElement {
     mainImageTemplates: TemplateResult[];
     handleCardChange(_: Card | null, newValue: Card | null): void;
     handleFocusIndexChange(oldValue: number, newValue: number): void;
+    handleAllowPinchToToggle(): void;
     /**
      * Focus on a specific card.
      *
@@ -56,6 +59,8 @@ export default class PboEditorCardSlider extends PairboElement {
     closeZoomedPreview: () => void;
     openZoomedPreview: () => void;
     handleOpenZoomedClick: (event: Event) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleTouchEnd: () => void;
     get mainSlides(): TemplateResult<1> | never[];
     render(): TemplateResult<1>;
 }

package/dist/src/components/handwritten-form/handwritten-form.component.d.ts

@@ -39,6 +39,7 @@ export default class PboHandwrittenForm extends PairboElement {
     onClose: () => void;
     /** The loading state when submitting the form */
     isSubmitLoading: boolean;
+    ctaPrimaryLabel: string;
     /** The disabled state when submitting the form */
     isSubmitDisabled: boolean;
     imageInput: HTMLInputElement;
@@ -121,9 +122,9 @@ export default class PboHandwrittenForm extends PairboElement {
     handleProcessingErrorChange(): void;
     /**
      * When the source image changes, reset the processed file URL,
-     * and emit `pbo-change` event with loading state.
+     * and emit `pbo-handwritten-form-change` event with loading state.
      *
-     * The `pbo-change` event is for:
+     * The `pbo-handwritten-form-change-change` event is for:
      * - Indicating that the image is being processed
      * - Focusing the main image to the preview image in the `handwritten-canvas` component
      */

package/dist/src/components/page-manager/page-manager.component.d.ts

@@ -41,6 +41,8 @@ export default class PboPageManager extends PairboElement {
     errorMessage: string;
     selectionTitle: string;
     editorTitle: string;
+    typeFormCtaLabel: string;
+    handwrittenFormCtaLabel: string;
     selectedCard: Card | null;
     selectedCardId: string | null;
     selectedCardDetails: {

package/dist/src/components/textarea/textarea.component.d.ts

@@ -32,6 +32,7 @@ export default class PboTextarea extends PairboElement implements PairboFormCont
     value: string;
     size: "small" | "medium" | "large";
     filled: boolean;
+    title: string;
     placeholder: string;
     rows: number;
     resize: "none" | "vertical" | "auto";
@@ -68,6 +69,7 @@ export default class PboTextarea extends PairboElement implements PairboFormCont
     setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none"): void;
     /** Replaces a range of text with a new string. */
     setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void;
+    private removeEmojis;
     /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
     checkValidity(): boolean;
     /** Gets the associated form, if one exists. */

package/dist/src/components/type-form/type-form.component.d.ts

@@ -29,16 +29,6 @@ export default class PboTypeForm extends PairboElement {
         "pbo-radio-button": typeof PboRadioGroup;
         "pbo-button": typeof PboButton;
     };
-    static readonly CTA_STATES: {
-        danger: {
-            type: string;
-            message: string;
-        };
-        primary: {
-            type: string;
-            message: string;
-        };
-    };
     private resizeTimeout;
     cardInnerImageUrl: string;
     card: Card | null;
@@ -46,13 +36,23 @@ export default class PboTypeForm extends PairboElement {
     loading: boolean;
     disabled: boolean;
     onClose: () => void;
-    greetingText: PboTextarea;
+    ctaButtonPrimaryLabel: string;
+    textarea: PboTextarea;
     fontSelector: PboFontSelector;
     textColor: PboRadioGroup;
     textAlignment: PboRadioGroup;
     typingForm: HTMLFormElement;
-    textArea: PboTextarea;
     ctaButtons: NodeListOf<PboButton>;
+    CTA_STATES: {
+        danger: {
+            type: string;
+            message: string;
+        };
+        primary: {
+            type: string;
+            message: string;
+        };
+    };
     windowHeight: number;
     charsNum: number;
     ctaButtonState: {

package/dist/src/components/zoomed-preview/zoomed-preview.component.d.ts

@@ -29,5 +29,9 @@ export default class PboZoomedPreview extends PairboElement {
         isLoading: boolean;
         url: string | null;
     };
+    pinchToCloseDisabled: boolean;
+    distance: number | null;
+    handleTouchMove: (event: TouchEvent) => void;
+    handleTouchEnd: () => void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/src/events/events.d.ts

@@ -1,2 +1,5 @@
 export type { PboCategoryCardSelectEvent } from './pbo-category-card-select.js';
 export type { HandwrittenImageDimensionsChangedEvent } from './handwritten-image-dimensions-changed.js';
+export type { PboBlurEvent } from './pbo-blur.js';
+export type { PboFocusEvent } from './pbo-focus.js';
+export type { PboSwitchEditorEvent } from './pbo-switch-editor.js';

package/dist/src/events/pbo-after-drawer-closed.d.ts

@@ -0,0 +1,6 @@
+export type PboAfterDrawerClosedEvent = CustomEvent<Record<string, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-after-drawer-closed": PboAfterDrawerClosedEvent;
+    }
+}

package/dist/src/events/pbo-blur.d.ts

@@ -0,0 +1,6 @@
+export type PboBlurEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-blur": PboBlurEvent;
+    }
+}

package/dist/src/events/pbo-change.d.ts

@@ -0,0 +1,6 @@
+export type PboChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-change": PboChangeEvent;
+    }
+}

package/dist/src/events/pbo-close-drawer.d.ts

@@ -0,0 +1,6 @@
+export type PboCloseDrawerEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-close-drawer": PboCloseDrawerEvent;
+    }
+}

package/dist/src/events/pbo-editor-selector-change.d.ts

@@ -0,0 +1,8 @@
+export type PboEditorSelectorChangeEvent = CustomEvent<{
+    editor: EditorType;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-editor-selector-change": PboEditorSelectorChangeEvent;
+    }
+}

package/dist/src/events/pbo-focus.d.ts

@@ -0,0 +1,6 @@
+export type PboFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-focus": PboFocusEvent;
+    }
+}

package/dist/src/events/pbo-font-change.d.ts

@@ -0,0 +1,8 @@
+export type PboFontChangeEvent = CustomEvent<{
+    font: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-font-change": PboFontChangeEvent;
+    }
+}

package/dist/src/events/pbo-handwritten-form-change.d.ts

@@ -0,0 +1,9 @@
+export type PboHandwrittenFormChangeEvent = CustomEvent<{
+    isLoading: boolean;
+    processedFileUrl: string | null;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-handwritten-form-change": PboHandwrittenFormChangeEvent;
+    }
+}

package/dist/src/events/pbo-handwritten-form-submitted.d.ts

@@ -0,0 +1,6 @@
+export type PboHandwrittenFormSubmittedEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-handwritten-form-submitted": PboHandwrittenFormSubmittedEvent;
+    }
+}

package/dist/src/events/pbo-input.d.ts

@@ -0,0 +1,6 @@
+export type PboInputEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-input": PboInputEvent;
+    }
+}

package/dist/src/events/pbo-open-drawer.d.ts

@@ -0,0 +1,6 @@
+export type PboOpenDrawerEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-open-drawer": PboOpenDrawerEvent;
+    }
+}

package/dist/src/events/pbo-switch-editor.d.ts

@@ -0,0 +1,9 @@
+export type PboSwitchEditorEvent = CustomEvent<{
+    fromEditor: EditorType;
+    toEditor: EditorType;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-switch-editor": PboSwitchEditorEvent;
+    }
+}

package/dist/src/events/pbo-type-form-change.d.ts

@@ -0,0 +1,6 @@
+export type PboTypeFormChange = CustomEvent<TypeFormData>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-type-form-change": PboTypeFormChange;
+    }
+}

package/dist/src/events/pbo-type-form-submitted.d.ts

@@ -0,0 +1,6 @@
+export type PboTypeFormSubmittedEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-type-form-submitted": PboTypeFormSubmittedEvent;
+    }
+}

package/dist/src/events/pbo_close_live_preview.d.ts

@@ -0,0 +1,8 @@
+export type PboCloseLivePreviewEvent = CustomEvent<{
+    editor: EditorType;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_close_live_preview: PboCloseLivePreviewEvent;
+    }
+}

package/dist/src/events/pbo_edit_handwritten_form.d.ts

@@ -0,0 +1,8 @@
+export type PboEditorHandwrittenFormEvent = CustomEvent<{
+    action: "upload" | "reupload";
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_edit_handwritten_form: PboEditorHandwrittenFormEvent;
+    }
+}

package/dist/src/events/pbo_edit_type_form.d.ts

@@ -0,0 +1,8 @@
+export type PboEditTypeFormEvent = CustomEvent<{
+    action: "message" | "font" | "color" | "alignment";
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_edit_type_form: PboEditTypeFormEvent;
+    }
+}

package/dist/src/events/pbo_open_live_preview.d.ts

@@ -0,0 +1,8 @@
+export type PboOpenLivePreviewEvent = CustomEvent<{
+    editor: EditorType;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_open_live_preview: PboOpenLivePreviewEvent;
+    }
+}

package/dist/src/events/pbo_toggle_free_message.d.ts

@@ -0,0 +1,8 @@
+export type PboToggleFreeMessageEvent = CustomEvent<{
+    is_checked: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_toggle_free_message: PboToggleFreeMessageEvent;
+    }
+}

package/dist/src/events/pbo_toggle_is_gift.d.ts

@@ -0,0 +1,8 @@
+export type PboToggleIsGiftEvent = CustomEvent<{
+    is_checked: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_toggle_is_gift: PboToggleIsGiftEvent;
+    }
+}

package/dist/src/events/pbo_toggle_is_premium_card.d.ts

@@ -0,0 +1,8 @@
+export type PboToggleIsPremiumCardEvent = CustomEvent<{
+    is_checked: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        pbo_toggle_is_premium_card: PboToggleIsPremiumCardEvent;
+    }
+}

package/dist/src/internal/pairbo-element.d.ts

@@ -55,6 +55,24 @@ export interface PairboFormControl extends LitElement {
     reportValidity: () => boolean;
     setCustomValidity: (error: string) => void;
 }
+type IsCustomEvent<T> = T extends CustomEvent<Record<PropertyKey, unknown>> ? true : false;
+type IsEmptyDetail<T> = T extends CustomEvent<Record<PropertyKey, never>> ? true : false;
+type HasOptionalDetail<T> = T extends CustomEvent<infer Detail> ? Partial<Detail> extends Detail ? true : false : false;
+type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? IsCustomEvent<GlobalEventHandlersEventMap[T]> extends true ? IsEmptyDetail<GlobalEventHandlersEventMap[T]> extends true ? never : HasOptionalDetail<GlobalEventHandlersEventMap[T]> extends true ? never : T : never : never;
+type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? IsCustomEvent<GlobalEventHandlersEventMap[T]> extends true ? IsEmptyDetail<GlobalEventHandlersEventMap[T]> extends false ? HasOptionalDetail<GlobalEventHandlersEventMap[T]> extends true ? T : never : T : T : never;
+type EventTypesWithRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
+};
+type EventTypesWithoutRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
+};
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type PboEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]["detail"]> : Partial<GlobalEventHandlersEventMap[T]["detail"]> extends GlobalEventHandlersEventMap[T]["detail"] ? CustomEventInit<GlobalEventHandlersEventMap[T]["detail"]> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]["detail"]>, "detail"> : CustomEventInit : CustomEventInit;
+type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
 export default class PairboElement extends LitElement {
-    emit(name: string, options?: CustomEventInit<unknown> | undefined): CustomEvent<unknown>;
+    emit<T extends keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: PboEventInit<T> | undefined): GetCustomEventType<T>;
+    emit<T extends keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: PboEventInit<T>): GetCustomEventType<T>;
 }
+export {};

package/dist/src/themes/default-rem.css

@@ -361,8 +361,8 @@
   /* Fonts */
   --pbo-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   --pbo-font-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --pbo-font-serif: Georgia, "Times New Roman", serif;
 
   /* Font sizes */
@@ -400,7 +400,8 @@
   --pbo-focus-ring-color: var(--pbo-color-primary-600);
   --pbo-focus-ring-style: solid;
   --pbo-focus-ring-width: 3px;
-  --pbo-focus-ring: var(--pbo-focus-ring-style) var(--pbo-focus-ring-width) var(--pbo-focus-ring-color);
+  --pbo-focus-ring: var(--pbo-focus-ring-style) var(--pbo-focus-ring-width)
+    var(--pbo-focus-ring-color);
   --pbo-focus-ring-offset: 1px;
 
   /*

package/dist/src/themes/default.css

@@ -362,8 +362,8 @@
   --pbo-font-family: inherit;
   --pbo-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   --pbo-font-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --pbo-font-serif: Georgia, "Times New Roman", serif;
 
   /* Font sizes */
@@ -401,7 +401,8 @@
   --pbo-focus-ring-color: var(--pbo-color-primary-600);
   --pbo-focus-ring-style: solid;
   --pbo-focus-ring-width: 3px;
-  --pbo-focus-ring: var(--pbo-focus-ring-style) var(--pbo-focus-ring-width) var(--pbo-focus-ring-color);
+  --pbo-focus-ring: var(--pbo-focus-ring-style) var(--pbo-focus-ring-width)
+    var(--pbo-focus-ring-color);
   --pbo-focus-ring-offset: 1px;
 
   /*

package/dist/src/utilities/index.d.ts

@@ -3,3 +3,10 @@ export declare const isNullOrUndefined: (...values: any[]) => boolean;
 export declare const isValid: <T>(value: T) => value is NonNullable<T>;
 export declare const removeNullUndefined: <T extends Object>(obj: T) => Partial<T>;
 export declare function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): (this: any, ...args: Parameters<T>) => void;
+export declare const getDistance: (point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}) => number;