@expressivecss/expressive 0.1.0-alpha.3

package/dist/js/components/toast.d.ts

@@ -0,0 +1,93 @@
+import { BaseOptions } from '../foundation/component';
+export interface ToastOptions extends BaseOptions {
+    /**
+     * The content of the Toast.
+     * @default ""
+     */
+    text: string;
+    /**
+     * Element Id for the tooltip.
+     * @default ""
+     */
+    toastId?: string;
+    /**
+     * Length in ms the Toast stays before dismissal.
+     * @default 4000
+     */
+    displayLength: number;
+    /**
+     * Transition in duration in milliseconds.
+     * @default 300
+     */
+    inDuration: number;
+    /**
+     * Transition out duration in milliseconds.
+     * @default 375
+     */
+    outDuration: number;
+    /**
+     * Classes to be added to the toast element.
+     * @default ""
+     */
+    classes: string;
+    /**
+     * Callback function called when toast is dismissed.
+     * @default null
+     */
+    completeCallback: () => void;
+    /**
+     * The percentage of the toast's width it takes fora drag
+     * to dismiss a Toast.
+     * @default 0.8
+     */
+    activationPercent: number;
+}
+export declare class Toast {
+    /** The toast element. */
+    el: HTMLElement;
+    /**
+     * The remaining amount of time in ms that the toast
+     * will stay before dismissal.
+     */
+    timeRemaining: number;
+    /**
+     * Describes the current pan state of the Toast.
+     */
+    panning: boolean;
+    options: ToastOptions;
+    message: string;
+    counterInterval: NodeJS.Timeout | number;
+    wasSwiped: boolean;
+    startingXPos: number;
+    xPos: number;
+    time: number;
+    deltaX: number;
+    velocityX: number;
+    static _toasts: Toast[];
+    static _container: HTMLElement;
+    static _draggedToast: Toast;
+    constructor(options: Partial<ToastOptions>);
+    static get defaults(): ToastOptions;
+    static getInstance(el: HTMLElement): Toast;
+    static _createContainer(): void;
+    static _removeContainer(): void;
+    static _onDragStart(e: TouchEvent | MouseEvent): void;
+    static _onDragMove(e: TouchEvent | MouseEvent): void;
+    static _onDragEnd(): void;
+    static _xPos(e: TouchEvent | MouseEvent): number;
+    /**
+     * dismiss all toasts.
+     */
+    static dismissAll(): void;
+    _createToast(): HTMLElement;
+    _animateIn(): void;
+    /**
+     * Create setInterval which automatically removes toast when timeRemaining >= 0
+     * has been reached.
+     */
+    _setTimer(): void;
+    /**
+     * Dismiss toast with animation.
+     */
+    dismiss(): void;
+}

package/dist/js/components/tooltip.d.ts

@@ -0,0 +1,117 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface TooltipOptions extends BaseOptions {
+    /**
+     * Delay time before tooltip disappears.
+     * @default 200
+     */
+    exitDelay: number;
+    /**
+     * Delay time before tooltip appears.
+     * @default 0
+     */
+    enterDelay: number;
+    /**
+     * Element Id for the tooltip.
+     * @default ""
+     */
+    tooltipId?: string;
+    /**
+     * Text string for the tooltip.
+     * @default ""
+     */
+    text: string;
+    /**
+     * Set distance tooltip appears away from its activator
+     * excluding transitionMovement.
+     * @default 5
+     */
+    margin: number;
+    /**
+     * Enter transition duration.
+     * @default 300
+     */
+    inDuration: number;
+    /**
+     * Opacity of the tooltip.
+     * @default 1
+     */
+    opacity: number;
+    /**
+     * Exit transition duration.
+     * @default 250
+     */
+    outDuration: number;
+    /**
+     * Set the direction of the tooltip.
+     * @default 'bottom'
+     */
+    position: TooltipPosition;
+    /**
+     * Amount in px that the tooltip moves during its transition.
+     * @default 10
+     */
+    transitionMovement: number;
+}
+export declare class Tooltip extends Component<TooltipOptions> {
+    /**
+     * If tooltip is open.
+     */
+    isOpen: boolean;
+    /**
+     * If tooltip is hovered.
+     */
+    isHovered: boolean;
+    /**
+     * If tooltip is focused.
+     */
+    isFocused: boolean;
+    tooltipEl: HTMLElement;
+    private _exitDelayTimeout;
+    private _enterDelayTimeout;
+    xMovement: number;
+    yMovement: number;
+    constructor(el: HTMLElement, options: Partial<TooltipOptions>);
+    static get defaults(): TooltipOptions;
+    /**
+     * Initializes instance of Tooltip.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TooltipOptions>): Tooltip;
+    /**
+     * Initializes instances of Tooltip.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TooltipOptions>): Tooltip[];
+    static getInstance(el: HTMLElement): Tooltip;
+    destroy(): void;
+    _appendTooltipEl(): void;
+    _setTooltipContent(tooltipContentEl: HTMLElement): void;
+    _updateTooltipContent(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    /**
+     * Show tooltip.
+     */
+    open: (isManual: boolean) => void;
+    /**
+     * Hide tooltip.
+     */
+    close: () => void;
+    _setExitDelayTimeout(): void;
+    _setEnterDelayTimeout(isManual: any): void;
+    _positionTooltip(): void;
+    _repositionWithinScreen(x: number, y: number, width: number, height: number): {
+        x: number;
+        y: number;
+    };
+    _animateIn(): void;
+    _animateOut(): void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: () => void;
+    _handleFocus: () => void;
+    _handleBlur: () => void;
+    _getAttributeOptions(): Partial<TooltipOptions>;
+}

package/dist/js/components/waves.d.ts

@@ -0,0 +1,15 @@
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+type Position = {
+    x: number;
+    y: number;
+};
+export declare class Waves {
+    private static _offset;
+    static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void;
+    static Init(): void;
+}
+export {};