@expressivecss/expressive 0.1.0-alpha.3

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

@@ -0,0 +1,336 @@
+import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../foundation/component';
+export interface DateI18nOptions extends I18nOptions {
+    previousMonth: string;
+    nextMonth: string;
+    months: string[];
+    monthsShort: string[];
+    weekdays: string[];
+    weekdaysShort: string[];
+    weekdaysAbbrev: string[];
+}
+export interface DatepickerOptions extends BaseOptions {
+    /**
+     * The date output format for the input field value
+     * or a function taking the date and outputting the
+     * formatted date string.
+     * @default 'mmm dd, yyyy'
+     */
+    format: string | ((d: Date) => string);
+    /**
+     * Used to create date object from current input string.
+     * @default null
+     */
+    parse: ((value: string, format: string) => Date) | null;
+    /**
+     * The initial condition if the datepicker is based on date range.
+     * @default false
+     */
+    isDateRange: boolean;
+    /**
+     * The selector of the user specified date range end element
+     */
+    dateRangeEndEl: string | null;
+    /**
+     * The initial condition if the datepicker is based on multiple date selection.
+     * @default false
+     */
+    isMultipleSelection: boolean;
+    /**
+     * The initial date to view when first opened.
+     * @default null
+     */
+    defaultDate: Date | null;
+    /**
+     * The initial end date to view when first opened.
+     * @default null
+     */
+    defaultEndDate: Date | null;
+    /**
+     * Make the `defaultDate` the initial selected value.
+     * @default false
+     */
+    setDefaultDate: boolean;
+    /**
+     * Make the `defaultEndDate` the initial selected value.
+     * @default false
+     */
+    setDefaultEndDate: boolean;
+    /**
+     * Prevent selection of any date on the weekend.
+     * @default false
+     */
+    disableWeekends: boolean;
+    /**
+     * Custom function to disable certain days.
+     * @default null
+     */
+    disableDayFn: ((day: Date) => boolean) | null;
+    /**
+     * First day of week (0: Sunday, 1: Monday etc).
+     * @default 0
+     */
+    firstDay: number;
+    /**
+     * The earliest date that can be selected.
+     * @default null
+     */
+    minDate: Date | null;
+    /**
+     * The latest date that can be selected.
+     * @default null
+     */
+    maxDate: Date | null;
+    /**
+     * Number of years either side, or array of upper/lower range.
+     * @default 10
+     */
+    yearRange: number | number[];
+    /**
+     * Sort year range in reverse order.
+     * @default false
+     */
+    yearRangeReverse: boolean;
+    /**
+     * Changes Datepicker to RTL.
+     * @default false
+     */
+    isRTL: boolean;
+    /**
+     * Show month after year in Datepicker title.
+     * @default false
+     */
+    showMonthAfterYear: boolean;
+    /**
+     * Render days of the calendar grid that fall in the next
+     * or previous month.
+     * @default false
+     */
+    showDaysInNextAndPreviousMonths: boolean;
+    /**
+     * Specify if the docked datepicker is in open state by default
+     */
+    openByDefault: boolean;
+    /**
+     * Specify a DOM element OR selector for a DOM element to render
+     * the calendar in, by default it will be placed before the input.
+     * @default null
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Show the clear button in the datepicker.
+     * @default false
+     */
+    showClearBtn: boolean;
+    /**
+     *  Autosubmit calendar day select to input field
+     *  @default false
+     */
+    autoSubmit: true;
+    /**
+     * Internationalization options.
+     */
+    i18n: Partial<DateI18nOptions>;
+    /**
+     * An array of string returned by `Date.toDateString()`,
+     * indicating there are events in the specified days.
+     * @default []
+     */
+    events: string[];
+    /**
+     * Callback function when date is selected,
+     * first parameter is the newly selected date.
+     * @default null
+     */
+    onSelect: ((selectedDate: Date) => void) | null;
+    /**
+     * Callback function when Datepicker is closed.
+     * @default null
+     */
+    /**
+     * Callback function when Datepicker HTML is refreshed.
+     * @default null
+     */
+    onDraw: (() => void) | null;
+    /**
+     * Callback function for interaction with input field.
+     * @default null
+     */
+    onInputInteraction: (() => void) | null;
+    /**
+     * Callback function for interaction with confirm button.
+     * @default null
+     */
+    onConfirm: (() => void) | null;
+    /**
+     * Callback function for interaction with close button.
+     * @default null
+     */
+    onCancel: (() => void) | null;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    minYear?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    maxYear?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    minMonth?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    maxMonth?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    startRange?: Date;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    endRange?: Date;
+    /**
+     * Display plugin
+     */
+    displayPlugin: string;
+    /**
+     * Configurable display plugin options
+     */
+    displayPluginOptions: object;
+}
+export declare class Datepicker extends Component<DatepickerOptions> {
+    el: HTMLInputElement;
+    id: string;
+    multiple: boolean;
+    calendarEl: HTMLElement;
+    /** CLEAR button instance. */
+    /** DONE button instance */
+    containerEl: HTMLElement;
+    yearTextEl: HTMLElement;
+    dateTextEl: HTMLElement;
+    endDateEl: HTMLInputElement;
+    dateEls: HTMLInputElement[];
+    /** The selected Date. */
+    date: Date;
+    endDate: null | Date;
+    dates: Date[];
+    formats: object;
+    calendars: [{
+        month: number;
+        year: number;
+    }];
+    private _y;
+    private _m;
+    private displayPlugin;
+    private footer;
+    static _template: string;
+    constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>);
+    static get defaults(): DatepickerOptions;
+    /**
+     * Initializes instance of Datepicker.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<DatepickerOptions>): Datepicker;
+    /**
+     * Initializes instances of Datepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<DatepickerOptions>): Datepicker[];
+    static _isDate(obj: any): boolean;
+    static _isWeekend(date: any): boolean;
+    /**
+     * @deprecated as this function has no effect without any return statement or global parameter setter.
+     */
+    static _setToStartOfDay(date: any): void;
+    static _getDaysInMonth(year: any, month: any): number;
+    static _isLeapYear(year: any): boolean;
+    static _compareDates(a: any, b: any): boolean;
+    static _compareWithinRange(day: Date, date: Date, dateEnd: Date): boolean;
+    static _comparePastDate(a: Date, b: Date): boolean;
+    static getInstance(el: HTMLElement): Datepicker;
+    destroy(): void;
+    destroySelects(): void;
+    _insertHTMLIntoDOM(): void;
+    /**
+     * Renders the date input format
+     */
+    _renderDateInputFormat(el: HTMLInputElement): void;
+    /**
+     * Gets a string representation of the given date.
+     */
+    toString(date?: Date, format?: string | ((d: Date) => string)): string;
+    /**
+     * Returns the formatted date.
+     */
+    formatDate(date: Date, format: string): string;
+    /**
+     * Sets date from input field.
+     */
+    setDateFromInput(el: HTMLInputElement): void;
+    /**
+     * Set a date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param preventOnSelect Undocumented as of 5 March 2018.
+     * @param isEndDate
+     * @param fromUserInput
+     */
+    setDate(date?: Date, preventOnSelect?: boolean, isEndDate?: boolean, fromUserInput?: boolean): void;
+    validateDate(date: Date): void | Date;
+    /**
+     * Set a single date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param isEndDate
+     */
+    setSingleDate(date: Date, isEndDate: boolean): void;
+    /**
+     * Set a multi date on the datepicker.
+     * @param date Date to set on the datepicker.
+     */
+    setMultiDate(date: Date): void;
+    /**
+     * Sets the data-date attribute on the date input field
+     */
+    setDataDate(el: any, date: any): void;
+    /**
+     * Sets dates on the input values.
+     */
+    setInputValues(): void;
+    setMultipleSelectionInputValues(): void;
+    /**
+     * Sets given date as the input value on the given element.
+     */
+    setInputValue(el: any, date: any): void;
+    /**
+     * Renders the date in the modal head section.
+     */
+    _renderDateDisplay(date: Date, endDate?: Date): void;
+    /**
+     * Change date view to a specific date on the datepicker.
+     * @param date Date to show on the datepicker.
+     */
+    gotoDate(date: Date): void;
+    adjustCalendars(): void;
+    adjustCalendar(calendar: any): any;
+    nextMonth(): void;
+    prevMonth(): void;
+    render(year: any, month: any, randId: any): string;
+    renderDay(opts: any): string;
+    renderRow(days: any, isRTL: any, isRowSelected: any): string;
+    renderTable(opts: any, data: any, randId: any): string;
+    renderHead(opts: any): string;
+    renderBody(rows: any): string;
+    renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string;
+    draw(): void;
+    _setupEventHandlers(): void;
+    _setupVariables(): void;
+    _removeEventHandlers(): void;
+    _handleInputClick: (e: any) => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _handleCalendarClick: (e: any) => void;
+    _handleDateRangeCalendarClick: (date: Date) => void;
+    _handleClearClick: () => void;
+    _clearDates: () => void;
+    _handleMonthChange: (e: any) => void;
+    _handleYearChange: (e: any) => void;
+    gotoMonth(month: any): void;
+    gotoYear(year: any): void;
+    _handleInputChange: (e: Event) => void;
+    renderDayName(opts: any, day: any, abbr?: boolean): any;
+    createDateInput(): HTMLInputElement;
+    _finishSelection: () => void;
+    _confirm: () => void;
+    _cancel: () => void;
+    open(): this;
+    close(): this;
+}

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

@@ -0,0 +1,148 @@
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../foundation/component';
+export interface DropdownOptions extends BaseOptions {
+    /**
+     * Defines the edge the menu is aligned to.
+     * @default 'left'
+     */
+    alignment: 'left' | 'right';
+    /**
+     * If true, automatically focus dropdown el for keyboard.
+     * @default true
+     */
+    autoFocus: boolean;
+    /**
+     * If true, constrainWidth to the size of the dropdown activator.
+     * @default true
+     */
+    constrainWidth: boolean;
+    /**
+     * Provide an element that will be the bounding container of the dropdown.
+     * @default null
+     */
+    container: Element;
+    /**
+     * If false, the dropdown will show below the trigger.
+     * @default true
+     */
+    coverTrigger: boolean;
+    /**
+     * If true, close dropdown on item click.
+     * @default true
+     */
+    closeOnClick: boolean;
+    /**
+     * If true, the dropdown will open on hover.
+     * @default false
+     */
+    hover: boolean;
+    /**
+     * The duration of the transition enter in milliseconds.
+     * @default 150
+     */
+    inDuration: number;
+    /**
+     * The duration of the transition out in milliseconds.
+     * @default 250
+     */
+    outDuration: number;
+    /**
+     * Function called when dropdown starts entering.
+     * @default null
+     */
+    onOpenStart: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown finishes entering.
+     * @default null
+     */
+    onOpenEnd: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown starts exiting.
+     * @default null
+     */
+    onCloseStart: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown finishes exiting.
+     * @default null
+     */
+    onCloseEnd: (el: HTMLElement) => void;
+    /**
+     * Function called when item is clicked.
+     * @default null
+     */
+    onItemClick: (el: HTMLLIElement) => void;
+}
+export declare class Dropdown extends Component<DropdownOptions> implements Openable {
+    static _dropdowns: Dropdown[];
+    /** ID of the dropdown element. */
+    id: string;
+    /** The DOM element of the dropdown. */
+    dropdownEl: HTMLElement;
+    /** If the dropdown is open. */
+    isOpen: boolean;
+    /** If the dropdown content is scrollable. */
+    isScrollable: boolean;
+    isTouchMoving: boolean;
+    /** The index of the item focused. */
+    focusedIndex: number;
+    filterQuery: string[];
+    filterTimeout: NodeJS.Timeout | number;
+    constructor(el: HTMLElement, options: Partial<DropdownOptions>);
+    static get defaults(): DropdownOptions;
+    /**
+     * Initializes instance of Dropdown.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<DropdownOptions>): Dropdown;
+    /**
+     * Initializes instances of Dropdown.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<DropdownOptions>): Dropdown[];
+    static getInstance(el: HTMLElement): Dropdown;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupTemporaryEventHandlers(): void;
+    _removeTemporaryEventHandlers(): void;
+    _handleClick: (e: MouseEvent) => void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: (e: MouseEvent) => void;
+    _handleDocumentClick: (e: MouseEvent) => void;
+    _handleTriggerKeydown: (e: KeyboardEvent) => void;
+    _handleDocumentTouchmove: (e: TouchEvent) => void;
+    _handleDropdownClick: (e: MouseEvent) => void;
+    _handleDropdownKeydown: (e: KeyboardEvent) => void;
+    _handleWindowResize: () => void;
+    _resetFilterQuery: () => void;
+    _resetDropdownStyles(): void;
+    _resetDropdownPositioningStyles(): void;
+    _moveDropdownToElement(containerEl?: HTMLElement): void;
+    _makeDropdownFocusable(): void;
+    _focusFocusedItem(): void;
+    _getDropdownPosition(closestOverflowParent: HTMLElement): {
+        x: number;
+        y: number;
+        verticalAlignment: string;
+        horizontalAlignment: "right" | "left";
+        height: number;
+        width: number;
+    };
+    _animateIn(): void;
+    _animateOut(): void;
+    private _getClosestAncestor;
+    _placeDropdown(): void;
+    /**
+     * Open dropdown.
+     */
+    open: () => void;
+    /**
+     * Close dropdown.
+     */
+    close: () => void;
+    /**
+     * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+     */
+    recalculateDimensions: () => void;
+}

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

@@ -0,0 +1,21 @@
+export { Autocomplete, AutocompleteOptions } from './autocomplete';
+export { FloatingActionButton, FloatingActionButtonOptions } from './buttons';
+export { Cards, CardsOptions } from './cards';
+export { Carousel, CarouselOptions } from './carousel';
+export { Chips, ChipsOptions } from './chips';
+export { Collapsible, CollapsibleOptions } from './collapsible';
+export { Datepicker, DatepickerOptions } from './datepicker';
+export { Dropdown, DropdownOptions } from './dropdown';
+export { Materialbox, MaterialboxOptions } from './materialbox';
+export { Modal, ModalOptions } from './modal';
+export { Parallax, ParallaxOptions } from './parallax';
+export { Pushpin, PushpinOptions } from './pushpin';
+export { ScrollSpy, ScrollSpyOptions } from './scrollspy';
+export { Sidenav, SidenavOptions } from './sidenav';
+export { Slider, SliderOptions } from './slider';
+export { Tabs, TabsOptions } from './tabs';
+export { TapTarget, TapTargetOptions } from './tap-target';
+export { Timepicker, TimepickerOptions } from './timepicker';
+export { Toast, ToastOptions } from './toast';
+export { Tooltip, TooltipOptions } from './tooltip';
+export { Waves } from './waves';

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

@@ -0,0 +1,97 @@
+import { BaseOptions, Component, InitElements, MElement } from '../foundation/component';
+export interface MaterialboxOptions extends BaseOptions {
+    /**
+     * Transition in duration in milliseconds.
+     * @default 275
+     */
+    inDuration: number;
+    /**
+     * Transition out duration in milliseconds.
+     * @default 200
+     */
+    outDuration: number;
+    /**
+     * Callback function called before materialbox is opened.
+     * @default null
+     */
+    onOpenStart: (el: Element) => void;
+    /**
+     * Callback function called after materialbox is opened.
+     * @default null
+     */
+    onOpenEnd: (el: Element) => void;
+    /**
+     * Callback function called before materialbox is closed.
+     * @default null
+     */
+    onCloseStart: (el: Element) => void;
+    /**
+     * Callback function called after materialbox is closed.
+     * @default null
+     */
+    onCloseEnd: (el: Element) => void;
+}
+export declare class Materialbox extends Component<MaterialboxOptions> {
+    /** If the materialbox overlay is showing. */
+    overlayActive: boolean;
+    /** If the materialbox is no longer being animated. */
+    doneAnimating: boolean;
+    /** Caption, if specified. */
+    caption: string;
+    /** Original width of image. */
+    originalWidth: number;
+    /** Original height of image. */
+    originalHeight: number;
+    private originInlineStyles;
+    private placeholder;
+    private _changedAncestorList;
+    private newHeight;
+    private newWidth;
+    private windowWidth;
+    private windowHeight;
+    private attrWidth;
+    private attrHeight;
+    private _overlay;
+    private _photoCaption;
+    constructor(el: HTMLElement, options: Partial<MaterialboxOptions>);
+    static get defaults(): MaterialboxOptions;
+    /**
+     * Initializes instance of MaterialBox.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
+    /**
+     * Initializes instances of MaterialBox.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
+    static getInstance(el: HTMLElement): Materialbox;
+    destroy(): void;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleMaterialboxClick;
+    private _handleMaterialboxKeypress;
+    private _handleMaterialboxToggle;
+    private _handleWindowScroll;
+    private _handleWindowResize;
+    private _handleWindowEscape;
+    private _makeAncestorsOverflowVisible;
+    private _offset;
+    private _updateVars;
+    private _animateImageIn;
+    private _animateImageOut;
+    private _addCaption;
+    private _removeCaption;
+    private _addOverlay;
+    private _removeOverlay;
+    /**
+     * Open materialbox.
+     */
+    open: () => void;
+    /**
+     * Close materialbox.
+     */
+    close: () => void;
+}

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

@@ -0,0 +1,45 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface ModalOptions extends BaseOptions {
+    opacity: number;
+    inDuration: number;
+    outDuration: number;
+    preventScrolling: boolean;
+    onOpenStart: (this: Modal, el: HTMLElement) => void;
+    onOpenEnd: (this: Modal, el: HTMLElement) => void;
+    onCloseStart: (el: HTMLElement) => void;
+    onCloseEnd: (el: HTMLElement) => void;
+    dismissible: boolean;
+    startingTop: string;
+    endingTop: string;
+}
+export declare class Modal extends Component<ModalOptions> {
+    #private;
+    constructor(el: HTMLElement, options: Partial<ModalOptions>);
+    static get defaults(): {
+        opacity: number;
+        inDuration: number;
+        outDuration: number;
+        onOpenStart: any;
+        onOpenEnd: any;
+        onCloseStart: any;
+        onCloseEnd: any;
+        preventScrolling: boolean;
+        dismissible: boolean;
+        startingTop: string;
+        endingTop: string;
+    };
+    static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
+    static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
+    static getInstance(el: HTMLElement): Modal;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleTriggerClick(): void;
+    _handleOverlayClick(): void;
+    _handleModalCloseClick(): void;
+    _handleKeydown(): void;
+    _handleFocus(): void;
+    open(): this;
+    close(): this;
+    static create(config: any): string | HTMLDialogElement;
+}

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

@@ -0,0 +1,40 @@
+import { Utils } from '../foundation/utils';
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface ParallaxOptions extends BaseOptions {
+    /**
+     * The minimum width of the screen, in pixels, where the parallax functionality starts working.
+     * @default 0
+     */
+    responsiveThreshold: number;
+}
+export declare class Parallax extends Component<ParallaxOptions> {
+    private _enabled;
+    private _img;
+    static _parallaxes: Parallax[];
+    static _handleScrollThrottled: () => Utils;
+    static _handleWindowResizeThrottled: () => Utils;
+    constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
+    static get defaults(): ParallaxOptions;
+    /**
+     * Initializes instance of Parallax.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<ParallaxOptions>): Parallax;
+    /**
+     * Initializes instances of Parallax.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<ParallaxOptions>): Parallax[];
+    static getInstance(el: HTMLElement): Parallax;
+    destroy(): void;
+    static _handleScroll(): void;
+    static _handleWindowResize(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupStyles(): void;
+    _handleImageLoad: () => void;
+    private _offset;
+    _updateParallax(): void;
+}