@expressivecss/expressive 0.1.0-alpha.3

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

@@ -0,0 +1,51 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface PushpinOptions extends BaseOptions {
+    /**
+     * The distance in pixels from the top of the page where
+     * the element becomes fixed.
+     * @default 0
+     */
+    top: number;
+    /**
+     * The distance in pixels from the top of the page where
+     * the elements stops being fixed.
+     * @default Infinity
+     */
+    bottom: number;
+    /**
+     * The offset from the top the element will be fixed at.
+     * @default 0
+     */
+    offset: number;
+    /**
+     * Callback function called when pushpin position changes.
+     * You are provided with a position string.
+     * @default null
+     */
+    onPositionChange: (position: 'pinned' | 'pin-top' | 'pin-bottom') => void;
+}
+export declare class Pushpin extends Component<PushpinOptions> {
+    static _pushpins: Pushpin[];
+    originalOffset: number;
+    constructor(el: HTMLElement, options: Partial<PushpinOptions>);
+    static get defaults(): PushpinOptions;
+    /**
+     * Initializes instance of Pushpin.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<PushpinOptions>): Pushpin;
+    /**
+     * Initializes instances of Pushpin.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<PushpinOptions>): Pushpin[];
+    static getInstance(el: HTMLElement): Pushpin;
+    destroy(): void;
+    static _updateElements(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _updatePosition(): void;
+    _removePinClasses(): void;
+}

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

@@ -0,0 +1,80 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface ScrollSpyOptions extends BaseOptions {
+    /**
+     * Throttle of scroll handler.
+     * @default 100
+     */
+    throttle: number;
+    /**
+     * Offset for centering element when scrolled to.
+     * @default 200
+     */
+    scrollOffset: number;
+    /**
+     * Class applied to active elements.
+     * @default 'active'
+     */
+    activeClass: string;
+    /**
+     * Used to find active element.
+     * @default id => 'a[href="#' + id + '"]'
+     */
+    getActiveElement: (id: string) => string;
+    /**
+     * Used to keep last top element active even if
+     * scrollbar goes outside of scrollspy elements.
+     *
+     * If there is no last top element,
+     * then the active one will be the first element.
+     *
+     * @default false
+     */
+    keepTopElementActive: boolean;
+    /**
+     * Used to set scroll animation duration in milliseconds.
+     * @default null (browser's native animation implementation/duration)
+     */
+    animationDuration: number | null;
+}
+export declare class ScrollSpy extends Component<ScrollSpyOptions> {
+    static _elements: ScrollSpy[];
+    static _count: number;
+    static _increment: number;
+    static _elementsInView: ScrollSpy[];
+    static _visibleElements: HTMLElement[];
+    static _ticks: number;
+    static _keptTopActiveElement: HTMLElement | null;
+    private tickId;
+    private id;
+    constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
+    static get defaults(): ScrollSpyOptions;
+    /**
+     * Initializes instance of ScrollSpy.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
+    /**
+     * Initializes instances of ScrollSpy.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
+    static getInstance(el: HTMLElement): ScrollSpy;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleThrottledResize: () => void;
+    _handleTriggerClick: (e: MouseEvent) => void;
+    _handleWindowScroll: () => void;
+    static _offset(el: any): {
+        top: number;
+        left: number;
+    };
+    static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
+    _enter(): void;
+    _exit(): void;
+    private _resetKeptTopActiveElementIfNeeded;
+    private static _getDistanceToViewport;
+    private static _smoothScrollIntoView;
+}

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

@@ -0,0 +1,125 @@
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+export interface SidenavOptions extends BaseOptions {
+    /**
+     * Side of screen on which Sidenav appears.
+     * @default 'left'
+     */
+    edge: 'left' | 'right';
+    /**
+     * Allow swipe gestures to open/close Sidenav.
+     * @default true
+     */
+    draggable: boolean;
+    /**
+     * Width of the area where you can start dragging.
+     * @default '10px'
+     */
+    dragTargetWidth: string;
+    /**
+     * Length in ms of enter transition.
+     * @default 250
+     */
+    inDuration: number;
+    /**
+     * Length in ms of exit transition.
+     * @default 200
+     */
+    outDuration: number;
+    /**
+     * Prevent page from scrolling while sidenav is open.
+     * @default true
+     */
+    preventScrolling: boolean;
+    /**
+     * Function called when sidenav starts entering.
+     */
+    onOpenStart: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav finishes entering.
+     */
+    onOpenEnd: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav starts exiting.
+     */
+    onCloseStart: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav finishes exiting.
+     */
+    onCloseEnd: (elem: HTMLElement) => void;
+}
+export declare class Sidenav extends Component<SidenavOptions> implements Openable {
+    id: string;
+    /** Describes open/close state of Sidenav. */
+    isOpen: boolean;
+    /** Describes if sidenav is fixed. */
+    isFixed: boolean;
+    /** Describes if Sidenav is being dragged. */
+    isDragged: boolean;
+    lastWindowWidth: number;
+    lastWindowHeight: number;
+    static _sidenavs: Sidenav[];
+    private _overlay;
+    dragTarget: Element;
+    private _startingXpos;
+    private _xPos;
+    private _time;
+    private _width;
+    private _initialScrollTop;
+    private _verticallyScrolling;
+    private deltaX;
+    private velocityX;
+    private percentOpen;
+    constructor(el: HTMLElement, options: Partial<SidenavOptions>);
+    static get defaults(): SidenavOptions;
+    /**
+     * Initializes instance of Sidenav.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<SidenavOptions>): Sidenav;
+    /**
+     * Initializes instances of Sidenav.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<SidenavOptions>): Sidenav[];
+    static getInstance(el: HTMLElement): Sidenav;
+    destroy(): void;
+    private _createOverlay;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleTriggerClick;
+    private _startDrag;
+    private _dragMoveUpdate;
+    private _handleDragTargetDrag;
+    private _handleDragTargetRelease;
+    private _handleCloseDrag;
+    private _calculateDelta;
+    private _handleCloseRelease;
+    private _handleCloseTriggerClick;
+    private _handleWindowResize;
+    private _setupClasses;
+    private _removeClasses;
+    private _setupFixed;
+    private _isDraggable;
+    private _isCurrentlyFixed;
+    private _createDragTarget;
+    private _preventBodyScrolling;
+    private _enableBodyScrolling;
+    /**
+     * Opens Sidenav.
+     */
+    open: () => void;
+    /**
+     * Closes Sidenav.
+     */
+    close: () => void;
+    private _animateIn;
+    private _animateOut;
+    private _animateSidenavIn;
+    private _animateSidenavOut;
+    private _animateOverlayIn;
+    private _animateOverlayOut;
+    private _setAriaHidden;
+    private _setTabIndex;
+}

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

@@ -0,0 +1,101 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface SliderOptions extends BaseOptions {
+    /**
+     * Set to false to hide slide indicators.
+     * @default true
+     */
+    indicators: boolean;
+    /**
+     * Set height of slider.
+     * @default 400
+     */
+    height: number;
+    /**
+     * Set the duration of the transition animation in ms.
+     * @default 500
+     */
+    duration: number;
+    /**
+     * Set the duration between transitions in ms.
+     * @default 6000
+     */
+    interval: number;
+    /**
+     * If slider should pause when keyboard focus is received.
+     * @default true
+     */
+    pauseOnFocus: boolean;
+    /**
+     * If slider should pause when is hovered by a pointer.
+     * @default true
+     */
+    pauseOnHover: boolean;
+    /**
+     * Optional function used to generate ARIA label to indicators (for accessibility purposes).
+     * @param index Current index, starting from "1".
+     * @param current A which indicates whether it is the current element or not
+     * @returns a string to be used as label indicator.
+     * @default null
+     */
+    indicatorLabelFunc: (index: number, current: boolean) => string;
+}
+export declare class Slider extends Component<SliderOptions> {
+    /** Index of current slide. */
+    activeIndex: number;
+    interval: string | number | NodeJS.Timeout;
+    eventPause: boolean;
+    _slider: HTMLUListElement;
+    _slides: HTMLLIElement[];
+    _activeSlide: HTMLLIElement;
+    _indicators: HTMLLIElement[];
+    _hovered: boolean;
+    _focused: boolean;
+    _focusCurrent: boolean;
+    _sliderId: string;
+    constructor(el: HTMLElement, options: Partial<SliderOptions>);
+    static get defaults(): SliderOptions;
+    /**
+     * Initializes instance of Slider.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<SliderOptions>): Slider;
+    /**
+     * Initializes instances of Slider.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<SliderOptions>): Slider[];
+    static getInstance(el: HTMLElement): Slider;
+    destroy(): void;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleIndicatorClick;
+    private _handleAutoPauseHover;
+    private _handleAutoPauseFocus;
+    private _handleAutoStartHover;
+    private _handleAutoStartFocus;
+    private _handleInterval;
+    private _animateSlide;
+    private _setSliderHeight;
+    private _setupIndicators;
+    private _removeIndicators;
+    set(index: number): void;
+    _pause(fromEvent: boolean): void;
+    /**
+     * Pause slider autoslide.
+     */
+    pause: () => void;
+    /**
+     * Start slider autoslide.
+     */
+    start: () => void;
+    /**
+     * Move to next slider.
+     */
+    next: () => void;
+    /**
+     * Move to prev slider.
+     */
+    prev: () => void;
+}

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

@@ -0,0 +1,80 @@
+import { Carousel } from './carousel';
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface TabsOptions extends BaseOptions {
+    /**
+     * Transition duration in milliseconds.
+     * @default 300
+     */
+    duration: number;
+    /**
+     * Callback for when a new tab content is shown.
+     * @default null
+     */
+    onShow: (newContent: Element) => void;
+    /**
+     * Set to true to enable swipeable tabs.
+     * This also uses the responsiveThreshold option.
+     * @default false
+     */
+    swipeable: boolean;
+    /**
+     * The maximum width of the screen, in pixels,
+     * where the swipeable functionality initializes.
+     * @default infinity
+     */
+    responsiveThreshold: number;
+}
+export declare class Tabs extends Component<TabsOptions> {
+    _tabLinks: NodeListOf<HTMLAnchorElement>;
+    _index: number;
+    _indicator: HTMLLIElement;
+    _tabWidth: number;
+    _tabsWidth: number;
+    _tabsCarousel: Carousel;
+    _activeTabLink: HTMLAnchorElement;
+    _content: HTMLElement;
+    constructor(el: HTMLElement, options: Partial<TabsOptions>);
+    static get defaults(): TabsOptions;
+    /**
+     * Initializes instance of Tabs.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TabsOptions>): Tabs;
+    /**
+     * Initializes instances of Tabs.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TabsOptions>): Tabs[];
+    static getInstance(el: HTMLElement): Tabs;
+    destroy(): void;
+    /**
+     * The index of tab that is currently shown.
+     */
+    get index(): number;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleWindowResize: () => void;
+    _handleTabClick: (e: MouseEvent) => void;
+    _createIndicator(): void;
+    _setupActiveTabLink(): void;
+    _setupSwipeableTabs(): void;
+    _teardownSwipeableTabs(): void;
+    _setupNormalTabs(): void;
+    _teardownNormalTabs(): void;
+    _setTabsAndTabWidth(): void;
+    _calcRightPos(el: any): number;
+    _calcLeftPos(el: any): number;
+    /**
+     * Recalculate tab indicator position. This is useful when
+     * the indicator position is not correct.
+     */
+    updateTabIndicator(): void;
+    _animateIndicator(prevIndex: any): void;
+    /**
+     * Show tab content that corresponds to the tab with the id.
+     * @param tabId The id of the tab that you want to switch to.
+     */
+    select(tabId: string): void;
+}

package/dist/js/components/tap-target.d.ts

@@ -0,0 +1,58 @@
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+export interface TapTargetOptions extends BaseOptions {
+    /**
+     * Callback function called when Tap Target is opened.
+     * @default null
+     */
+    onOpen: (origin: HTMLElement) => void;
+    /**
+     * Callback function called when Tap Target is closed.
+     * @default null
+     */
+    onClose: (origin: HTMLElement) => void;
+}
+export declare class TapTarget extends Component<TapTargetOptions> implements Openable {
+    /**
+     * If the tap target is open.
+     */
+    isOpen: boolean;
+    static _taptargets: TapTarget[];
+    private wrapper;
+    private originEl;
+    private waveEl;
+    private contentEl;
+    constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
+    static get defaults(): TapTargetOptions;
+    /**
+     * Initializes instance of TapTarget.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
+    /**
+     * Initializes instances of TapTarget.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
+    static getInstance(el: HTMLElement): TapTarget;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleThrottledResize: () => void;
+    _handleKeyboardInteraction: (e: KeyboardEvent) => void;
+    _handleTargetToggle: () => void;
+    _handleResize: () => void;
+    _handleDocumentClick: (e: MouseEvent | TouchEvent | KeyboardEvent) => void;
+    _setup(): void;
+    private _offset;
+    _calculatePositioning(): void;
+    /**
+     * Open Tap Target.
+     */
+    open: () => void;
+    /**
+     * Close Tap Target.
+     */
+    close: () => void;
+}

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

@@ -0,0 +1,207 @@
+import { Component, BaseOptions, InitElements, MElement, I18nOptions } from '../foundation/component';
+export type Views = 'hours' | 'minutes';
+export interface TimepickerOptions extends BaseOptions {
+    /**
+     * Dial radius.
+     * @default 135
+     */
+    dialRadius: number;
+    /**
+     * Outer radius.
+     * @default 105
+     */
+    outerRadius: number;
+    /**
+     * Inner radius.
+     * @default 70
+     */
+    innerRadius: number;
+    /**
+     * Tick radius.
+     * @default 20
+     */
+    tickRadius: number;
+    /**
+     * Duration of the transition from/to the hours/minutes view.
+     * @default 350
+     */
+    duration: number;
+    /**
+     * Specify a DOM element OR selector for a DOM element to render
+     * the time picker in, by default it will be placed before the input.
+     * @default null
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Show the clear button in the Timepicker.
+     * @default false
+     */
+    showClearBtn: boolean;
+    /**
+     *  Autosubmit timepicker selection to input field
+     *  @default true
+     */
+    autoSubmit: true;
+    /**
+     * Default time to set on the timepicker 'now' or '13:14'.
+     * @default 'now';
+     */
+    defaultTime: string;
+    /**
+     * Millisecond offset from the defaultTime.
+     * @default 0
+     */
+    fromNow: number;
+    /**
+     * Internationalization options.
+     */
+    i18n: Partial<I18nOptions>;
+    /**
+     * Use 12 hour AM/PM clock instead of 24 hour clock.
+     * @default true
+     */
+    twelveHour: boolean;
+    /**
+     * Vibrate device when dragging clock hand.
+     * @default true
+     */
+    vibrate: boolean;
+    /**
+     * Callback function when a time is selected.
+     * @default null
+     */
+    onSelect: (hour: number, minute: number) => void;
+    /**
+     * Callback function for interaction with input field.
+     * @default null
+     */
+    onInputInteraction: (() => void) | null;
+    /**
+     * Callback function for done.
+     * @default null
+     */
+    onDone: (() => void) | null;
+    /**
+     * Callback function for cancel.
+     * @default null
+     */
+    onCancel: (() => void) | null;
+    /**
+     * Display plugin
+     */
+    displayPlugin: string;
+    /**
+     * Configurable display plugin options
+     */
+    displayPluginOptions: object;
+}
+type Point = {
+    x: number;
+    y: number;
+};
+export declare class Timepicker extends Component<TimepickerOptions> {
+    el: HTMLInputElement;
+    id: string;
+    containerEl: HTMLElement;
+    plate: HTMLElement;
+    digitalClock: HTMLElement;
+    inputHours: HTMLInputElement;
+    inputMinutes: HTMLInputElement;
+    x0: number;
+    y0: number;
+    moved: boolean;
+    dx: number;
+    dy: number;
+    /**
+     * Current view on the timepicker.
+     * @default 'hours'
+     */
+    currentView: Views;
+    hand: SVGElement;
+    minutesView: HTMLElement;
+    hours: number;
+    minutes: number;
+    /** The selected time. */
+    time: string;
+    /**
+     * If the time is AM or PM on twelve-hour clock.
+     * @default 'PM'
+     */
+    amOrPm: 'AM' | 'PM';
+    static _template: any;
+    /** Vibrate device when dragging clock hand. */
+    vibrate: 'vibrate' | 'webkitVibrate' | null;
+    _canvas: HTMLElement;
+    hoursView: HTMLElement;
+    spanAmPm: HTMLSpanElement;
+    footer: HTMLElement;
+    private _amBtn;
+    private _pmBtn;
+    bg: Element;
+    bearing: Element;
+    g: Element;
+    toggleViewTimer: string | number | NodeJS.Timeout;
+    vibrateTimer: NodeJS.Timeout | number;
+    private displayPlugin;
+    constructor(el: HTMLInputElement, options: Partial<TimepickerOptions>);
+    static get defaults(): TimepickerOptions;
+    /**
+     * Initializes instance of Timepicker.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<TimepickerOptions>): Timepicker;
+    /**
+     * Initializes instances of Timepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<TimepickerOptions>): Timepicker[];
+    static _addLeadingZero(num: number): string;
+    static _createSVGEl(name: string): SVGElement;
+    static _Pos(e: TouchEvent | MouseEvent): Point;
+    static getInstance(el: HTMLElement): Timepicker;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleInputClick: () => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _handleTimeInputEnterKey: (e: KeyboardEvent) => void;
+    _handleClockClickStart: (e: any) => void;
+    _handleDocumentClickMove: (e: any) => void;
+    _handleDocumentClickEnd: (e: any) => void;
+    _insertHTMLIntoDOM(): void;
+    _setupVariables(): void;
+    _pickerSetup(): void;
+    _clockSetup(): void;
+    _buildSVGClock(): void;
+    _buildHoursView(): void;
+    _buildHoursTick(i: number, radian: number, radius: number): void;
+    _buildMinutesView(): void;
+    _handleAmPmClick: (e: MouseEvent) => void;
+    _handleAmPmKeypress: (e: KeyboardEvent) => void;
+    _handleAmPmInteraction: (e: HTMLElement) => void;
+    _updateAmPmView(): void;
+    _updateTimeFromInput(): void;
+    /**
+     * Show hours or minutes view on timepicker.
+     * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
+     */
+    showView: (view: Views, delay?: number) => void;
+    resetClock(delay: any): void;
+    _inputFromTextField: () => void;
+    drawClockFromTimeInput(value: any, isHours: any): void;
+    setHand(x: any, y: any, roundBy5?: boolean): void;
+    setClockAttributes(radian: number, radius: number): void;
+    formatHours(): void;
+    formatMinutes(): void;
+    setHoursDefault(): void;
+    done: (clearValue?: any) => void;
+    confirm: () => void;
+    cancel: () => void;
+    clear: () => void;
+    open(): this;
+    close(): this;
+}
+export {};