myrta-ui 17.0.19 → 17.0.20

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/Panzoom.d.ts

@@ -0,0 +1,357 @@
+import { Component } from '../shared/Base/Component';
+import { PluginsType, EventsType, Bounds, MatrixValues, ZoomOptions } from './types';
+import { States } from './consts';
+import { OptionsType } from './options';
+export * from './plugins/index';
+export declare class Panzoom extends Component<OptionsType, EventsType> {
+    static defaults: Partial<OptionsType>;
+    static Plugins: PluginsType;
+    private pointerTracker;
+    private resizeObserver;
+    private updateTimer;
+    private clickTimer;
+    private rAF;
+    private isTicking;
+    private ignoreBounds;
+    private isBouncingX;
+    private isBouncingY;
+    private clicks;
+    private trackingPoints;
+    private pwt;
+    private cwd;
+    private pmme;
+    private friction;
+    /**
+     * Current state of the instance
+     */
+    state: States;
+    /**
+     * True if the user is currently dragging
+     */
+    isDragging: boolean;
+    /**
+     * Reference to the container element
+     */
+    container: HTMLElement;
+    /**
+     * Reference to the content element
+     */
+    content: HTMLElement | HTMLImageElement | HTMLPictureElement;
+    /**
+     * Reference to the loading indicator element
+     */
+    spinner: HTMLElement | null;
+    /**
+     * Container dimensions.
+     * `innerWidth` & `innerHeight` values are width/height without padding.
+     */
+    containerRect: {
+        width: number;
+        height: number;
+        innerWidth: number;
+        innerHeight: number;
+    };
+    /**
+     * Content dimensions and position relative to parent.
+     * `width` & `height` values are in current scale.
+     */
+    contentRect: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        fullWidth: number;
+        fullHeight: number;
+        fitWidth: number;
+        fitHeight: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Initial position of the drag
+     */
+    dragStart: {
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        time: number;
+    };
+    /**
+     * Current position of the drag
+     */
+    dragOffset: {
+        x: number;
+        y: number;
+        time: number;
+    };
+    /**
+     * Transformation matrix values that define current x/y position and scale
+     */
+    current: MatrixValues;
+    /**
+     * Transformation matrix values that define the x/y position and scale of the end of the current animation
+     */
+    target: MatrixValues;
+    /**
+     * The velocity of each transformation matrix value
+     */
+    velocity: MatrixValues;
+    /**
+     * Axis that is currently locked
+     */
+    lockedAxis: false | 'x' | 'y';
+    get fits(): boolean;
+    /**
+     * True if the user is on a touch device
+     */
+    get isTouchDevice(): boolean;
+    get isMobile(): boolean;
+    /**
+     * Current pan mode - `mousemove` or `drag`
+     */
+    get panMode(): 'mousemove' | 'drag';
+    /**
+     * If the content can be dragged when it fits into the container
+     */
+    get panOnlyZoomed(): boolean | ((...any: any) => boolean | 'auto');
+    /**
+     * True if the content has any boundaries
+     */
+    get isInfinite(): boolean | 'x' | 'y';
+    /**
+     * At what angle the content is rotated
+     */
+    get angle(): number;
+    /**
+     * At what angle the content is rotated at the end of the current animation
+     */
+    get targetAngle(): number;
+    /**
+     * At what scale the content is scaled
+     */
+    get scale(): number;
+    /**
+     * At what scale the content is scaled at the end of the current animation
+     */
+    get targetScale(): number;
+    /**
+     * Minimum scale level
+     */
+    get minScale(): number;
+    /**
+     * At what scale the content will be at full width and height (1 to 1)
+     */
+    get fullScale(): number;
+    /**
+     * Maximum scale level given the `maxScale` option
+     */
+    get maxScale(): number;
+    /**
+     * At what scale the content will cover the container
+     */
+    get coverScale(): number;
+    /**
+     * True if the content is currently animated and the scale level is changing
+     */
+    get isScaling(): boolean;
+    /**
+     * True if the content (image) has not finished loading
+     */
+    get isContentLoading(): boolean;
+    /**
+     * True if the animation is complete and the content fits within the bounds
+     */
+    get isResting(): boolean;
+    constructor(container: HTMLElement | null, userOptions?: Partial<OptionsType>, userPlugins?: PluginsType);
+    private initContent;
+    private onLoad;
+    private onError;
+    /**
+     * Initialize the resize observer
+     */
+    attachObserver(): void;
+    /**
+     * Remove the resize observer
+     */
+    detachObserver(): void;
+    /**
+     * Enable click, wheel, mousemove and all touch events
+     */
+    attachEvents(): void;
+    /**
+     * Remove click, wheel, mouse movement and all touch events
+     */
+    detachEvents(): void;
+    private animate;
+    private setTargetForce;
+    private checkBounds;
+    private clampTargetBounds;
+    private calculateContentDim;
+    private setEdgeForce;
+    private enable;
+    private onClick;
+    private addTrackingPoint;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private startDecelAnim;
+    private onWheel;
+    private onMouseMove;
+    private onKeydown;
+    private onResize;
+    private setTransform;
+    /**
+     * Calculate dimensions of contents and container
+     */
+    updateMetrics(silently?: boolean): void;
+    calculateBounds(): Bounds;
+    /**
+     * Get information about current content boundaries
+     */
+    getBounds(): Bounds;
+    /**
+     * Enable or disable controls depending on the current size of the content
+     */
+    updateControls(): void;
+    /**
+     * Pan content to selected position and scale, use `friction` to control duration
+     */
+    panTo({ x, y, scale, friction, angle, originX, originY, flipX, flipY, ignoreBounds, }: {
+        x?: number;
+        y?: number;
+        scale?: number;
+        friction?: number;
+        angle?: number;
+        originX?: number;
+        originY?: number;
+        flipX?: boolean;
+        flipY?: boolean;
+        ignoreBounds?: boolean;
+    }): void;
+    /**
+     * Relatively change position, scale, or angle of content, and flip content horizontally or vertically
+     */
+    applyChange({ panX, panY, scale, angle, originX, originY, friction, flipX, flipY, ignoreBounds, bounce, }: {
+        panX?: number;
+        panY?: number;
+        scale?: number;
+        angle?: number;
+        originX?: number;
+        originY?: number;
+        friction?: number;
+        flipX?: boolean;
+        flipY?: boolean;
+        ignoreBounds?: boolean;
+        bounce?: boolean;
+    }): void;
+    /**
+     * Stop animation and optionally set target values to the current values (or vice versa)
+     */
+    stop(freeze?: 'current' | 'target' | false): void;
+    /**
+     * Request an animation frame to check if the content position or scale needs to be changed based on the target values or if the content is out of bounds
+     */
+    requestTick(): void;
+    /**
+     * Update the current position based on the mouse move event
+     */
+    panWithMouse(event: MouseEvent, friction?: number): void;
+    /**
+     * Update the current scale based on the mouse scroll event
+     */
+    zoomWithWheel(event: WheelEvent): void;
+    /**
+     * Check if the content can be scaled up
+     */
+    canZoomIn(): boolean;
+    /**
+     * Check if the content can be scaled down
+     */
+    canZoomOut(): boolean;
+    /**
+     * Increase scale level
+     */
+    zoomIn(scale?: number, opts?: ZoomOptions): void;
+    /**
+     * Reduce scale level
+     */
+    zoomOut(scale?: number, opts?: ZoomOptions): void;
+    /**
+     * Change the scale level so that the content fits inside the container
+     */
+    zoomToFit(opts?: ZoomOptions): void;
+    /**
+     * Change the scale level so that the content covers the container
+     */
+    zoomToCover(opts?: ZoomOptions): void;
+    /**
+     * Change the scale level so that the content has full width and height (e.g, on a 1-to-1 scale)
+     */
+    zoomToFull(opts?: ZoomOptions): void;
+    /**
+     * Change the scale level to maximum
+     */
+    zoomToMax(opts?: ZoomOptions): void;
+    /**
+     * Toggle `full` scale level: `fit` -> `full` -> `fit`
+     */
+    toggleZoom(opts?: ZoomOptions): void;
+    /**
+     * Toggle scale level: `fit` -> `max` -> `fit`
+     */
+    toggleMax(opts?: ZoomOptions): void;
+    /**
+     * Toggle scale level: `fit` -> `cover` -> `fit`
+     */
+    toggleCover(opts?: ZoomOptions): void;
+    /**
+     * Iterate scale level: `fit` -> `full` -> `max` -> `fit`
+     */
+    iterateZoom(opts?: ZoomOptions): void;
+    /**
+     * Scale the content to a specific step or level.
+     * Note: Origin `[0,0]` is in the center, because content has CSS `transform-origin: center center;`
+     */
+    zoomTo(zoomLevel?: number | 'fit' | 'cover' | 'full' | 'max' | 'next', { friction, originX, originY, event, }?: ZoomOptions): void;
+    /**
+     * Rotate the content counterclockwise
+     */
+    rotateCCW(): void;
+    /**
+     * Rotate the content clockwise
+     */
+    rotateCW(): void;
+    /**
+     * Flip content horizontally
+     */
+    flipX(): void;
+    /**
+     * Flip content vertically
+     */
+    flipY(): void;
+    /**
+     * Change the scale level so that the content fits the container horizontally
+     */
+    fitX(): void;
+    /**
+     * Change the scale level so that the content fits the container vertically
+     */
+    fitY(): void;
+    /**
+     * Toggle full screen mode
+     */
+    toggleFS(): void;
+    /**
+     * Get transformation matrix values
+     */
+    getMatrix(source?: MatrixValues): DOMMatrix;
+    /**
+     * Reset all transformations AND animate to the original position
+     */
+    reset(friction?: number): void;
+    /**
+     * Destroy the instance
+     */
+    destroy(): void;
+}

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/consts.d.ts

@@ -0,0 +1,9 @@
+export declare enum States {
+    Init = 0,
+    Error = 1,
+    Ready = 2,
+    Panning = 3,
+    Mousemove = 4,
+    Destroy = 5
+}
+export declare const MatrixKeys: readonly ['a', 'b', 'c', 'd', 'e', 'f'];

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/options.d.ts

@@ -0,0 +1,172 @@
+import { Bounds, Events, ClickAction, WheelAction } from './types';
+export interface PluginsOptionsType {
+}
+export interface classesType {
+    /**
+     * Class name that specifies the content
+     */
+    content: string;
+    /**
+     * Content is currently loading
+     */
+    isLoading: string;
+    /**
+     * Content can be zoomed in
+     */
+    canZoomIn: string;
+    /**
+     * Content can be zoomed out
+     */
+    canZoomOut: string;
+    /**
+     * Content is draggable
+     */
+    isDraggable: string;
+    /**
+     * User is currently dragging
+     */
+    isDragging: string;
+    /**
+     * Container is in the fullscreen mode
+     */
+    inFullscreen: string;
+    /**
+     * Class name applied to `html` element indicating that at least one container is in full screen mode
+     */
+    htmlHasFullscreen: string;
+}
+export interface ComponentOptionsType {
+    /**
+     * Specify the content element. If no content is specified, it will be assumed that the content is the first child element
+     */
+    content: Element | null | ((...any: any) => Element | null);
+    /**
+     * Content width
+     */
+    width: 'auto' | number | ((...any: any) => 'auto' | number);
+    /**
+     * Content height
+     */
+    height: 'auto' | number | ((...any: any) => 'auto' | number);
+    /**
+     * Use touch events to pan content or follow the cursor.
+     * Automatically switches to `drag` if user’s primary input mechanism can not hover over elements.
+     * Tip: experiment with `mouseMoveFactor` option for better ux.
+     */
+    panMode: 'drag' | 'mousemove';
+    /**
+     * Enable touch guestures
+     */
+    touch: boolean | ((...any: any) => boolean);
+    /**
+     * If a CSS transformation is to be applied to the parent element of the content
+     */
+    transformParent: boolean;
+    /**
+     * Minimum touch drag distance to start panning content;
+     * it can help detect click events on touch devices
+     */
+    dragMinThreshold: number;
+    /**
+     * Lock axis while dragging
+     */
+    lockAxis: 'x' | 'y' | 'xy' | false;
+    /**
+     * The proportion by which the content pans relative to the cursor position;
+     * for example, `2` means the cursor only needs to move 80% of the width/height of the content to reach the container border
+     */
+    mouseMoveFactor: number;
+    /**
+     * Animation friction when content is moved depending on cursor position
+     */
+    mouseMoveFriction: number;
+    /**
+     * Globally enable (or disable) any zooming
+     */
+    zoom: boolean | ((...any: any) => boolean);
+    /**
+     * Enable pinch-to-zoom guesture to zoom in/out using two fingers
+     */
+    pinchToZoom: boolean | ((...any: any) => boolean);
+    /**
+     * Allow panning only when content is zoomed in.
+     * Using `true` allows other components (e.g. Carousel) to pick up touch events.
+     * Note: if set to "auto", disables for touch devices (to allow page scrolling).
+     */
+    panOnlyZoomed: boolean | 'auto' | ((...any: any) => boolean | 'auto');
+    /**
+     * Minimum scale level
+     */
+    minScale: number | ((...any: any) => number);
+    /**
+     * The maximum zoom level the user can zoom.
+     * If, for example, it is `2`, then the user can zoom content to 2x the original size
+     */
+    maxScale: number | ((...any: any) => number);
+    /**
+     * Default friction for animations, the value must be in the interval [0, 1)
+     */
+    friction: number;
+    /**
+     * Friction while panning/dragging
+     */
+    dragFriction: number;
+    /**
+     * Friction while decelerating after drag end
+     */
+    decelFriction: number;
+    /**
+     * Add click event listener
+     */
+    click: ClickAction | ((...any: any) => ClickAction);
+    /**
+     * Add double click event listener
+     */
+    dblClick: ClickAction | ((...any: any) => ClickAction);
+    /**
+     * Add mouse wheel event listener
+     */
+    wheel: WheelAction | ((...any: any) => WheelAction);
+    /**
+     * Number of times to stop restricting wheel operation after min/max zoom level is reached
+     */
+    wheelLimit: number;
+    /**
+     * Content x/y boundaries
+     */
+    bounds: 'auto' | ((...any: any) => Bounds);
+    /**
+     * Force to ignore boundaries boundar; always or only when the drag is locked on the axis
+     */
+    infinite: boolean | 'x' | 'y';
+    /**
+     * If enable rubberband effect - drag out of bounds with resistance
+     */
+    rubberband: boolean;
+    /**
+     * Show loading icon
+     */
+    spinner: boolean;
+    /**
+     * Bounce after hitting the edge
+     */
+    bounce: boolean;
+    /**
+     * Limit the animation's maximum acceleration
+     */
+    maxVelocity: number | ((...any: any) => number);
+    /**
+     * Class names for DOM elements
+     */
+    classes: classesType;
+    /**
+     * Localization of strings
+     */
+    l10n?: Record<string, string>;
+    /**
+     * Optional event listeners
+     */
+    on?: Partial<Events>;
+}
+export declare const defaultOptions: ComponentOptionsType;
+export type OptionsType = PluginsOptionsType & ComponentOptionsType;

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/plugins/Pins/Pins.d.ts

@@ -0,0 +1,18 @@
+import { Panzoom } from "../../../Panzoom/Panzoom";
+import { Plugin } from "../../../shared/Base/Plugin";
+declare module "../../../Panzoom/options" {
+    interface PluginsOptionsType {
+        Pins?: Boolean;
+    }
+}
+type PinsOptionsType = {};
+type PinsEventsType = "";
+export declare class Pins extends Plugin<Panzoom, PinsOptionsType, PinsEventsType> {
+    static defaults: {};
+    container: HTMLElement | null;
+    pins: Array<HTMLElement>;
+    onTransform(instance: Panzoom): void;
+    attach(): void;
+    detach(): void;
+}
+export {};

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/plugins/Toolbar/Toolbar.d.ts

@@ -0,0 +1,31 @@
+import { Plugin } from "../../../shared/Base/Plugin";
+import { Panzoom } from "../../Panzoom";
+import { PanzoomButtons } from "../../../shared/buttons";
+export type ToolbarItemType = {
+    icon: string;
+    action?: string;
+    change?: Record<string, number | boolean>;
+    click?: (instance: Panzoom) => void;
+    title?: string;
+};
+export type ToolbarOptionsType = {
+    display: Array<keyof typeof PanzoomButtons>;
+    items: Record<string, ToolbarItemType>;
+    svgAttr: Record<string, string>;
+};
+declare module "../../../Panzoom/options" {
+    interface PluginsOptionsType {
+        Toolbar?: Boolean | Partial<ToolbarOptionsType>;
+    }
+}
+type ToolbarEventsType = "";
+export declare class Toolbar extends Plugin<Panzoom, ToolbarOptionsType, ToolbarEventsType> {
+    static defaults: ToolbarOptionsType;
+    container: HTMLElement | null;
+    addItem(key: string): void;
+    createContainer(): void;
+    removeContainer(): void;
+    attach(): void;
+    detach(): void;
+}
+export {};

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/plugins/index.d.ts

@@ -0,0 +1,2 @@
+import { PluginsType } from '../types';
+export declare const PanzoomPlugins: PluginsType;

package/src/lib/helpers/mrx-gallery-lib/types/Panzoom/types.d.ts

@@ -0,0 +1,112 @@
+import { MatrixKeys } from './consts';
+export type MatrixValues = {
+    [K in (typeof MatrixKeys)[number]]: number;
+};
+export type Bounds = {
+    x: {
+        min: number;
+        max: number;
+    };
+    y: {
+        min: number;
+        max: number;
+    };
+};
+import { ComponentEventsType , Constructor } from '../shared/Base/types';
+export type EventsType = ComponentEventsType
+/**
+ * Initialization has started, plugins have been added
+ */
+ | 'init'
+/**
+ * Content is loading
+ */
+ | 'beforeLoad'
+/**
+ * Content has loaded successfully
+ */
+ | 'afterLoad'
+/**
+ * Content did not load successfully
+ */
+ | 'error'
+/**
+ * Panzoom has successfully launched
+ */
+ | 'ready'
+/**
+ * Single click event has been detected
+ */
+ | 'click'
+/**
+ * Double click event has been detected
+ */
+ | 'dblClick'
+/**
+ * Wheel event has been detected
+ */
+ | 'wheel'
+/**
+ * Container and content dimensions have been updated
+ */
+ | 'refresh'
+/**
+ * Pointer down event has been detected
+ */
+ | 'touchStart'
+/**
+ * Pointer move event has been detected
+ */
+ | 'touchMove'
+/**
+ * Pointer up/cancel event has been detected
+ */
+ | 'touchEnd'
+/**
+ * Deceleration animation has started
+ */
+ | 'decel'
+/**
+ * Mouse move event has been detected
+ */
+ | 'mouseMove'
+/**
+ * Animation has started
+ */
+ | 'startAnimation'
+/**
+ * Animation has ended
+ */
+ | 'endAnimation'
+/**
+ * The "transform" CSS property of the content will be updated.
+ */
+ | 'beforeTransform'
+/**
+ * The "transform" CSS property of the content has been updated
+ */
+ | 'afterTransform'
+/**
+ * Enter full-screen mode
+ */
+ | 'enterFS'
+/**
+ * Exit full-screen mode
+ */
+ | 'exitFS'
+/**
+ * Instance is detroyed
+ */
+ | 'destroy';
+export type Events = Record<EventsType, (...args: any[]) => void>;
+import { Plugin } from '../shared/Base/Plugin';
+import { Panzoom } from './Panzoom';
+export type PluginsType = Record<string, Constructor<Plugin<Panzoom, any, any>>>;
+export type ClickAction = 'toggleZoom' | 'toggleCover' | 'toggleMax' | 'zoomToFit' | 'zoomToMax' | 'iterateZoom' | false;
+export type WheelAction = 'zoom' | 'pan' | false;
+export type ZoomOptions = {
+    friction?: number | 'auto';
+    originX?: number | 'auto';
+    originY?: number | 'auto';
+    event?: Event & MouseEvent;
+};

package/src/lib/helpers/mrx-gallery-lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Panzoom/Panzoom';
+export * from './Carousel/Carousel';
+export * from './Fancybox/Fancybox';