diff --git a/types/materialize-css/autocomplete.d.ts b/types/materialize-css/autocomplete.d.ts
new file mode 100644
index 0000000000..83eae14bfb
--- /dev/null
+++ b/types/materialize-css/autocomplete.d.ts
@@ -0,0 +1,88 @@
+///
+
+declare namespace M {
+ class Autocomplete extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Autocomplete;
+
+ /**
+ * Init autocomplete
+ */
+ static init(els: Element, options?: Partial): Autocomplete;
+
+ /**
+ * Init autocompletes
+ */
+ static init(els: MElements, options?: Partial): Autocomplete[];
+
+ /**
+ * Select a specific autocomplete options.
+ * @param el Element of the autocomplete option.
+ */
+ selectOption(el: Element): void;
+
+ /**
+ * Update autocomplete options data.
+ * @param data Autocomplete options data object.
+ */
+ updateData(data: AutocompleteData): void;
+
+ /**
+ * If the autocomplete is open.
+ */
+ isOpen: boolean;
+
+ /**
+ * Number of matching autocomplete options.
+ */
+ count: number;
+
+ /**
+ * Index of the current selected option.
+ */
+ activeIndex: number;
+ }
+
+ interface AutocompleteData {
+ [key: string]: string | null;
+ }
+
+ interface AutocompleteOptions {
+ /**
+ * Data object defining autocomplete options with optional icon strings.
+ */
+ data: AutocompleteData;
+
+ /**
+ * Limit of results the autocomplete shows.
+ * @default infinity
+ */
+ limit: number;
+
+ /**
+ * Callback for when autocompleted.
+ */
+ onAutocomplete: (this: Autocomplete, text: string) => void;
+
+ /**
+ * Minimum number of characters before autocomplete starts.
+ * @default 1
+ */
+ minLength: number;
+
+ /**
+ * Sort function that defines the order of the list of autocomplete options.
+ */
+ sortFunction: (a: string, b: string, inputText: string) => number;
+ }
+}
+
+interface JQuery {
+ // Pick to check methods exist.
+ autocomplete(method: keyof Pick): JQuery;
+ autocomplete(method: keyof Pick, el: Element): JQuery;
+ autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery;
+ autocomplete(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/carousel.d.ts b/types/materialize-css/carousel.d.ts
new file mode 100644
index 0000000000..fd660694d1
--- /dev/null
+++ b/types/materialize-css/carousel.d.ts
@@ -0,0 +1,117 @@
+///
+
+declare namespace M {
+ class Carousel extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Carousel;
+
+ /**
+ * Init carousel
+ */
+ static init(els: Element, options?: Partial): Carousel;
+
+ /**
+ * Init carousels
+ */
+ static init(els: MElements, options?: Partial): Carousel[];
+
+ /**
+ * If the carousel is being clicked or tapped
+ */
+ pressed: boolean;
+
+ /**
+ * If the carousel is currently being dragged
+ */
+ dragged: number;
+
+ /**
+ * The index of the center carousel item
+ */
+ center: number;
+
+ /**
+ * Move carousel to next slide or go forward a given amount of slides
+ * @param n How many times the carousel slides
+ */
+ next(n?: number): void;
+
+ /**
+ * Move carousel to previous slide or go back a given amount of slides
+ * @param n How many times the carousel slides
+ */
+ prev(n?: number): void;
+
+ /**
+ * Move carousel to nth slide
+ * @param n Index of slide
+ */
+ set(n?: number): void;
+ }
+
+ interface CarouselOptions {
+ /**
+ * Transition duration in milliseconds
+ * @default 200
+ */
+ duration: number;
+
+ /**
+ * Perspective zoom. If 0, all items are the same size
+ * @default -100
+ */
+ dist: number;
+
+ /**
+ * Set the spacing of the center item
+ * @default 0
+ */
+ shift: number;
+
+ /**
+ * Set the padding between non center items
+ * @default 0
+ */
+ padding: number;
+
+ /**
+ * Set the number of visible items
+ * @default 5
+ */
+ numVisible: number;
+
+ /**
+ * Make the carousel a full width slider like the second example
+ * @default false
+ */
+ fullWidth: boolean;
+
+ /**
+ * Set to true to show indicators
+ * @default false
+ */
+ indicators: boolean;
+
+ /**
+ * Don't wrap around and cycle through items
+ * @default false
+ */
+ noWrap: boolean;
+
+ /**
+ * Callback for when a new slide is cycled to
+ * @default null
+ */
+ onCycleTo: (this: Carousel, current: Element, dragged: boolean) => void;
+ }
+}
+
+interface JQuery {
+ carousel(method: keyof Pick): JQuery;
+ carousel(method: keyof Pick, n?: number): JQuery;
+ carousel(method: keyof Pick, n?: number): JQuery;
+ carousel(method: keyof Pick, n?: number): JQuery;
+ carousel(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/character-counter.d.ts b/types/materialize-css/character-counter.d.ts
new file mode 100644
index 0000000000..4d34ac170e
--- /dev/null
+++ b/types/materialize-css/character-counter.d.ts
@@ -0,0 +1,25 @@
+///
+
+declare namespace M {
+ class CharacterCounter extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): CharacterCounter;
+
+ /**
+ * Init CharacterCounter
+ */
+ static init(els: Element, options?: Partial): CharacterCounter;
+
+ /**
+ * Init CharacterCounters
+ */
+ static init(els: MElements, options?: Partial): CharacterCounter[];
+ }
+}
+
+interface JQuery {
+ characterCounter(method: keyof Pick): JQuery;
+ characterCounter(): JQuery;
+}
diff --git a/types/materialize-css/chips.d.ts b/types/materialize-css/chips.d.ts
new file mode 100644
index 0000000000..d912d4ff7e
--- /dev/null
+++ b/types/materialize-css/chips.d.ts
@@ -0,0 +1,124 @@
+///
+///
+
+declare namespace M {
+ class Chips extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Chips;
+
+ /**
+ * Init Chips
+ */
+ static init(els: Element, options?: Partial): Chips;
+
+ /**
+ * Init Chipses
+ */
+ static init(els: MElements, options?: Partial): Chips[];
+
+ /**
+ * Array of the current chips data
+ */
+ chipsData: ChipData[];
+
+ /**
+ * If the chips has autocomplete enabled
+ */
+ hasAutocomplete: boolean;
+
+ /**
+ * Autocomplete instance, if any
+ */
+ autocomplete: Autocomplete;
+
+ /**
+ * Add chip to input
+ * @param data Chip data object
+ */
+ addChip(chip: ChipData): void;
+
+ /**
+ * Delete nth chip
+ * @param n Index of chip
+ */
+ deleteChip(n?: number): void;
+
+ /**
+ * Select nth chip
+ * @param n Index of chip
+ */
+ selectChip(n: number): void;
+ }
+
+ interface ChipData {
+ /**
+ * Chip tag
+ */
+ tag: string;
+
+ /**
+ * Chip image
+ */
+ img?: string;
+ }
+
+ interface ChipsOptions {
+ /**
+ * Set the chip data
+ * @default []
+ */
+ data: ChipData[];
+
+ /**
+ * Set first placeholder when there are no tags
+ * @default ''
+ */
+ placeholder: string;
+
+ /**
+ * Set second placeholder when adding additional tags
+ * @default ''
+ */
+ secondaryPlaceholder: string;
+
+ /**
+ * Set autocomplete options
+ * @default {}
+ */
+ autocompleteOptions: Partial;
+
+ /**
+ * Set chips limit
+ * @default Infinity
+ */
+ limit: number;
+
+ /**
+ * Callback for chip add
+ * @default null
+ */
+ onChipAdd: (this: Chips, element: Element, chip: Element) => void;
+
+ /**
+ * Callback for chip select
+ * @default null
+ */
+ onChipSelect: (this: Chips, element: Element, chip: Element) => void;
+
+ /**
+ * Callback for chip delete
+ * @default null
+ */
+ onChipDelete: (this: Chips, element: Element, chip: Element) => void;
+ }
+}
+
+interface JQuery {
+ chips(method: keyof Pick): JQuery;
+ chips(method: keyof Pick, chip: M.ChipData): JQuery;
+ chips(method: keyof Pick, n?: number): JQuery;
+ chips(method: keyof Pick, n: number): JQuery;
+ chips(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/collapsible.d.ts b/types/materialize-css/collapsible.d.ts
new file mode 100644
index 0000000000..649a59e9bb
--- /dev/null
+++ b/types/materialize-css/collapsible.d.ts
@@ -0,0 +1,83 @@
+///
+
+declare namespace M {
+ class Collapsible extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Collapsible;
+
+ /**
+ * Init Collapsible
+ */
+ static init(els: Element, options?: Partial): Collapsible;
+
+ /**
+ * Init Collapsibles
+ */
+ static init(els: MElements, options?: Partial): Collapsible[];
+
+ /**
+ * Open collapsible section
+ * @param n Nth section to open
+ */
+ open(n: number): void;
+
+ /**
+ * Close collapsible section
+ * @param n Nth section to close
+ */
+ close(n: number): void;
+ }
+
+ interface CollapsibleOptions {
+ /**
+ * If accordion versus collapsible
+ * @default true
+ */
+ accordion: boolean;
+
+ /**
+ * Transition in duration in milliseconds.
+ * @default 300
+ */
+ inDuration: number;
+
+ /**
+ * Transition out duration in milliseconds.
+ * @default 300
+ */
+ outDuration: number;
+
+ /**
+ * Callback function called before modal is opened
+ * @default null
+ */
+ onOpenStart: (this: Collapsible, el: Element) => void;
+
+ /**
+ * Callback function called after modal is opened
+ * @default null
+ */
+ onOpenEnd: (this: Collapsible, el: Element) => void;
+
+ /**
+ * Callback function called before modal is closed
+ * @default null
+ */
+ onCloseStart: (this: Collapsible, el: Element) => void;
+
+ /**
+ * Callback function called after modal is closed
+ * @default null
+ */
+ onCloseEnd: (this: Collapsible, el: Element) => void;
+ }
+}
+
+interface JQuery {
+ collapsible(method: keyof Pick): JQuery;
+ collapsible(method: keyof Pick, n: number): JQuery;
+ collapsible(method: keyof Pick, n: number): JQuery;
+ collapsible(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/common.d.ts b/types/materialize-css/common.d.ts
new file mode 100644
index 0000000000..605e9389be
--- /dev/null
+++ b/types/materialize-css/common.d.ts
@@ -0,0 +1,51 @@
+///
+///
+
+type MElements = NodeListOf | JQuery | Cash;
+
+declare namespace M {
+ abstract class Component extends ComponentBase {
+ /**
+ * Construct component instance and set everything up
+ */
+ constructor(elem: Element, options?: Partial);
+
+ /**
+ * Destroy plugin instance and teardown
+ */
+ destroy(): void;
+ }
+
+ abstract class ComponentBase {
+ constructor(options?: Partial);
+
+ /**
+ * The DOM element the plugin was initialized with
+ */
+ el: Element;
+
+ /**
+ * The options the instance was initialized with
+ */
+ options: TOptions;
+ }
+
+ interface Openable {
+ isOpen: boolean;
+ open(): void;
+ close(): void;
+ }
+
+ interface InternationalizationOptions {
+ cancel: string;
+ clear: string;
+ done: string;
+ previousMonth: string;
+ nextMonth: string;
+ months: string[];
+ monthsShort: string;
+ weekdays: string[];
+ weekdaysShort: string[];
+ weekdaysAbbrev: string[];
+ }
+}
diff --git a/types/materialize-css/datepicker.d.ts b/types/materialize-css/datepicker.d.ts
new file mode 100644
index 0000000000..3940027173
--- /dev/null
+++ b/types/materialize-css/datepicker.d.ts
@@ -0,0 +1,201 @@
+///
+
+declare namespace M {
+ class Datepicker extends Component implements Openable {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Datepicker;
+
+ /**
+ * Init Datepicker
+ */
+ static init(els: Element, options?: Partial): Datepicker;
+
+ /**
+ * Init Datepickers
+ */
+ static init(els: MElements, options?: Partial): Datepicker[];
+
+ /**
+ * If the picker is open.
+ */
+ isOpen: boolean;
+
+ /**
+ * The selected Date.
+ */
+ date: Date;
+
+ /**
+ * DONE button instance (undocumented!).
+ */
+ doneBtn: HTMLButtonElement;
+
+ /**
+ * CLEAR button instance (undocumented!).
+ */
+ clearBtn: HTMLButtonElement;
+
+ /**
+ * Open datepicker
+ */
+ open(): void;
+
+ /**
+ * Close datepicker
+ */
+ close(): void;
+
+ /**
+ * Gets a string representation of the selected date
+ */
+ toString(): string;
+
+ /**
+ * Set a date on the datepicker
+ * @param date Date to set on the datepicker.
+ * @param preventOnSelect Undocumented as of 5 March 2018
+ */
+ setDate(date?: Date | string, preventOnSelect?: boolean): void;
+
+ /**
+ * Change date view to a specific date on the datepicker
+ * @param date Date to show on the datepicker.
+ */
+ gotoDate(date: Date): void;
+
+ setInputValue(): void;
+ }
+
+ interface DatepickerOptions {
+ /**
+ * Automatically close picker when date is selected
+ * @default false
+ */
+ autoClose: boolean;
+
+ /**
+ * The date output format for the input field value.
+ * @default 'mmm dd, yyyy'
+ */
+ format: string;
+
+ /**
+ * Used to create date object from current input string.
+ */
+ parse: (value: string, format: string) => Date;
+
+ /**
+ * The initial date to view when first opened.
+ */
+ defaultDate: Date;
+
+ /**
+ * Make the `defaultDate` the initial selected value
+ * @default false
+ */
+ setDefaultDate: boolean;
+
+ /**
+ * Prevent selection of any date on the weekend.
+ * @default false
+ */
+ disableWeekends: boolean;
+
+ /**
+ * Custom function to disable certain days.
+ */
+ disableDayFn: (day: Date) => boolean;
+
+ /**
+ * First day of week (0: Sunday, 1: Monday etc).
+ * @default 0
+ */
+ firstDay: number;
+
+ /**
+ * The earliest date that can be selected.
+ */
+ minDate: Date;
+
+ /**
+ * The latest date that can be selected.
+ */
+ maxDate: Date;
+
+ /**
+ * Number of years either side, or array of upper/lower range.
+ * @default 10
+ */
+ yearRange: number | number[];
+
+ /**
+ * 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 a DOM element to render the calendar in, by default it will be placed before the input
+ * @default null
+ */
+ container: Element;
+
+ /**
+ * Show the clear button in the datepicker
+ * @default false
+ */
+ showClearBtn: boolean;
+
+ /**
+ * Internationalization options
+ */
+ i18n: Partial;
+
+ /**
+ * 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.
+ */
+ onSelect: (this: Datepicker, selectedDate: Date) => void;
+
+ /**
+ * Callback function when Datepicker is opened
+ */
+ onOpen: (this: Datepicker) => void;
+
+ /**
+ * Callback function when Datepicker is closed
+ */
+ onClose: (this: Datepicker) => void;
+
+ /**
+ * Callback function when Datepicker HTML is refreshed
+ */
+ onDraw: (this: Datepicker) => void;
+ }
+}
+
+interface JQuery {
+ datepicker(method: keyof Pick): JQuery;
+ datepicker(method: keyof Pick, date?: Date): JQuery;
+ datepicker(method: keyof Pick, date: Date): JQuery;
+ datepicker(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/dropdown.d.ts b/types/materialize-css/dropdown.d.ts
new file mode 100644
index 0000000000..fb9b7d90c1
--- /dev/null
+++ b/types/materialize-css/dropdown.d.ts
@@ -0,0 +1,145 @@
+///
+
+declare namespace M {
+ class Dropdown extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Dropdown;
+
+ /**
+ * Init Dropdown
+ */
+ static init(els: Element, options?: Partial): Dropdown;
+
+ /**
+ * Init Dropdowns
+ */
+ static init(els: MElements, options?: Partial): Dropdown[];
+
+ /**
+ * ID of the dropdown element
+ */
+ id: string;
+
+ /**
+ * The DOM element of the dropdown
+ */
+ dropdownEl: Element;
+
+ /**
+ * If the dropdown is open
+ */
+ isOpen: boolean;
+
+ /**
+ * If the dropdown content is scrollable
+ */
+ isScrollable: boolean;
+
+ /**
+ * The index of the item focused
+ */
+ focusedIndex: number;
+
+ /**
+ * Open dropdown
+ */
+ open(): void;
+
+ /**
+ * Close dropdown
+ */
+ close(): void;
+
+ /**
+ * While dropdown is open, you can recalculate its dimensions if its contents have changed
+ */
+ recalculateDimensions(): void;
+ }
+
+ interface DropdownOptions {
+ /**
+ * Defines the edge the menu is aligned to
+ * @default 'left'
+ */
+ alignment: 'left' | 'right';
+
+ /**
+ * If true, automatically focus dropdown el for keyboard
+ * @default true
+ */
+ autoTrigger: 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: (this: Dropdown, el: Element) => void;
+
+ /**
+ * Function called when dropdown finishes entering
+ * @default null
+ */
+ onOpenEnd: (this: Dropdown, el: Element) => void;
+
+ /**
+ * Function called when dropdown starts exiting
+ * @default null
+ */
+ onCloseStart: (this: Dropdown, el: Element) => void;
+
+ /**
+ * Function called when dropdown finishes exiting
+ * @default null
+ */
+ onCloseEnd: (this: Dropdown, el: Element) => void;
+ }
+}
+
+interface JQuery {
+ dropdown(method: keyof Pick): JQuery;
+ dropdown(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/fab.d.ts b/types/materialize-css/fab.d.ts
new file mode 100644
index 0000000000..74a7c89bfb
--- /dev/null
+++ b/types/materialize-css/fab.d.ts
@@ -0,0 +1,60 @@
+///
+
+declare namespace M {
+ class FloatingActionButton extends Component implements Openable {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): FloatingActionButton;
+
+ /**
+ * Init FloatingActionButton
+ */
+ static init(els: Element, options?: Partial): FloatingActionButton;
+
+ /**
+ * Init FloatingActionButtons
+ */
+ static init(els: MElements, options?: Partial): FloatingActionButton[];
+
+ /**
+ * Open FAB
+ */
+ open(): void;
+
+ /**
+ * Close FAB
+ */
+ close(): void;
+
+ /**
+ * Describes open/close state of FAB.
+ */
+ isOpen: boolean;
+ }
+
+ interface FloatingActionButtonOptions {
+ /**
+ * Direction FAB menu opens
+ * @default "top"
+ */
+ direction: "top" | "right" | "buttom" | "left";
+
+ /**
+ * true: FAB menu appears on hover, false: FAB menu appears on click
+ * @default true
+ */
+ hoverEnabled: boolean;
+
+ /**
+ * Enable transit the FAB into a toolbar on click
+ * @default false
+ */
+ toolbarEnabled: boolean;
+ }
+}
+
+interface JQuery {
+ floatingActionButton(method: keyof Pick): JQuery;
+ floatingActionButton(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/formselect.d.ts b/types/materialize-css/formselect.d.ts
new file mode 100644
index 0000000000..de901d7fbf
--- /dev/null
+++ b/types/materialize-css/formselect.d.ts
@@ -0,0 +1,70 @@
+///
+///
+
+declare namespace M {
+ class FormSelect extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): FormSelect;
+
+ /**
+ * Init FormSelect
+ */
+ static init(els: Element, options?: Partial): FormSelect;
+
+ /**
+ * Init FormSelects
+ */
+ static init(els: MElements, options?: Partial): FormSelect[];
+
+ /**
+ * If this is a multiple select
+ */
+ isMultiple: boolean;
+
+ /**
+ * The select wrapper element
+ */
+ wrapper: Element;
+
+ /**
+ * Dropdown UL element
+ */
+ dropdownOptions: HTMLUListElement;
+
+ /**
+ * Text input that shows current selected option
+ */
+ input: HTMLInputElement;
+
+ /**
+ * Instance of the dropdown plugin for this select
+ */
+ dropdown: Dropdown;
+
+ /**
+ * Get selected values in an array
+ */
+ getSelectedValues(): string[];
+ }
+
+ interface FormSelectOptions {
+ /**
+ * Classes to be added to the select wrapper element
+ * @default ''
+ */
+ classes: string;
+
+ /**
+ * Pass options object to select dropdown initialization
+ * @default {}
+ */
+ dropdownOptions: Partial;
+ }
+}
+
+interface JQuery {
+ formSelect(method: keyof Pick): JQuery;
+ formSelect(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts
index 0a383f1c65..f8502cafb4 100644
--- a/types/materialize-css/index.d.ts
+++ b/types/materialize-css/index.d.ts
@@ -1,975 +1,37 @@
// Type definitions for materialize-css 1.0
// Project: http://materializecss.com/
-// Definitions by: 胡玮文 , Maxim Balaganskiy
+// Definitions by: 胡玮文
+// Maxim Balaganskiy
+// David Moniz
+// Daniel Hoenes
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.4
///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
+///
export = M;
-
-declare global {
- namespace M {
- class Autocomplete extends Component {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Autocomplete;
-
- /**
- * Select a specific autocomplete options.
- * @param el Element of the autocomplete option.
- */
- selectOption(el: Element): void;
-
- /**
- * Update autocomplete options data.
- * @param data Autocomplete options data object.
- */
- updateData(data: AutocompleteData): void;
-
- /**
- * If the autocomplete is open.
- */
- isOpen: boolean;
-
- /**
- * Number of matching autocomplete options.
- */
- count: number;
-
- /**
- * Index of the current selected option.
- */
- activeIndex: number;
- }
-
- interface AutocompleteData {
- [key: string]: string | null;
- }
-
- interface AutocompleteOptions {
- /**
- * Data object defining autocomplete options with optional icon strings.
- */
- data: AutocompleteData;
-
- /**
- * Limit of results the autocomplete shows.
- * @default infinity
- */
- limit: number;
-
- /**
- * Callback for when autocompleted.
- */
- onAutocomplete: (this: Autocomplete, text: string) => void;
-
- /**
- * Minimum number of characters before autocomplete starts.
- * @default 1
- */
- minLength: number;
-
- /**
- * Sort function that defines the order of the list of autocomplete options.
- */
- sortFunction: (a: string, b: string, inputText: string) => number;
- }
-
- class DatePicker extends Component implements Openable {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): DatePicker;
-
- /**
- * If the picker is open.
- */
- isOpen: boolean;
-
- /**
- * The selected Date.
- */
- date: Date;
-
- /**
- * Open datepicker
- */
- open(): void;
-
- /**
- * Close datepicker
- */
- close(): void;
-
- /**
- * Gets a string representation of the selected date
- */
- toString(): string;
-
- /**
- * Set a date on the datepicker
- * @param date Date to set on the datepicker.
- */
- setDate(date?: Date): void;
-
- /**
- * Change date view to a specific date on the datepicker
- * @param date Date to show on the datepicker.
- */
- gotoDate(date: Date): void;
- }
-
- interface DatePickerOptions {
- /**
- * The date output format for the input field value.
- * @default 'mmm dd, yyyy'
- */
- format: string;
-
- /**
- * Used to create date object from current input string.
- */
- parse: (value: string, format: string) => Date;
-
- /**
- * The initial date to view when first opened.
- */
- defaultDate: Date;
-
- /**
- * Make the `defaultDate` the initial selected value
- * @default false
- */
- setDefaultDate: boolean;
-
- /**
- * Prevent selection of any date on the weekend.
- * @default false
- */
- disableWeekends: boolean;
-
- /**
- * Custom function to disable certain days.
- */
- disableDayFn: (day: Date) => boolean;
-
- /**
- * First day of week (0: Sunday, 1: Monday etc).
- * @default 0
- */
- firstDay: number;
-
- /**
- * The earliest date that can be selected.
- */
- minDate: Date;
-
- /**
- * The latest date that can be selected.
- */
- maxDate: Date;
-
- /**
- * Number of years either side, or array of upper/lower range.
- * @default 10
- */
- yearRange: number | number[];
-
- /**
- * 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 a selector for a DOM element to render the calendar in, by default it will be placed before the input.
- */
- container: string;
-
- /**
- * 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.
- */
- onSelect: (this: DatePicker, selectedDate: Date) => void;
-
- /**
- * Callback function when Datepicker is opened
- */
- onOpen: (this: DatePicker) => void;
-
- /**
- * Callback function when Datepicker is closed
- */
- onClose: (this: DatePicker) => void;
-
- /**
- * Callback function when Datepicker HTML is refreshed
- */
- onDraw: (this: DatePicker) => void;
- }
-
- interface DropdownOptions {
- /**
- * Defines the edge the menu is aligned to
- * @default 'left'
- */
- alignment: string;
-
- /**
- * If true, automatically focus dropdown el for keyboard
- * @default true
- */
- autoTrigger: 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 false, the dropdown will show below the trigger.
-
- /**
- * 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: (this: Dropdown, el: Element) => void;
-
- /**
- * Function called when dropdown finishes entering
- * @default null
- */
- onOpenEnd: (this: Dropdown, el: Element) => void;
-
- /**
- * Function called when dropdown starts exiting
- * @default null
- */
- onCloseStart: (this: Dropdown, el: Element) => void;
-
- /**
- * Function called when dropdown finishes exiting
- * @default null
- */
- onCloseEnd: (this: Dropdown, el: Element) => void;
- }
-
- class Dropdown extends Component {
- /**
- * ID of the dropdown element
- */
- id: string;
-
- /**
- * The DOM element of the dropdown
- */
- dropdownEl: Element;
-
- /**
- * If the dropdown is open
- */
- isOpen: boolean;
-
- /**
- * If the dropdown content is scrollable
- */
- isScrollable: boolean;
-
- /**
- * The index of the item focused
- */
- focusedIndex: number;
-
- /**
- * Open dropdown
- */
- open(): void;
-
- /**
- * Close dropdown
- */
- close(): void;
-
- /**
- * While dropdown is open, you can recalculate its dimensions if its contents have changed
- */
- recalculateDimensions(): void;
- }
-
- class FloatingActionButton extends Component implements Openable {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): FloatingActionButton;
-
- /**
- * Open FAB
- */
- open(): void;
-
- /**
- * Close FAB
- */
- close(): void;
-
- /**
- * Describes open/close state of FAB.
- */
- isOpen: boolean;
- }
-
- interface FloatingActionButtonOptions {
- /**
- * Direction FAB menu opens
- * @default "top"
- */
- direction: "top" | "right" | "buttom" | "left";
-
- /**
- * true: FAB menu appears on hover, false: FAB menu appears on click
- * @default true
- */
- hoverEnabled: boolean;
-
- /**
- * Enable transit the FAB into a toolbar on click
- * @default false
- */
- toolbarEnabled: boolean;
- }
-
- interface FormSelectOptions {
- /**
- * Classes to be added to the select wrapper element
- * @default ''
- */
- classes: string;
-
- /**
- * Pass options object to select dropdown initialization
- * @default {}
- */
- dropdownOptions: Partial;
- }
-
- class FormSelect extends Component {
- /**
- * If this is a multiple select
- */
- isMultiple: boolean;
-
- /**
- * The select wrapper element
- */
- wrapper: Element;
-
- /**
- * Dropdown UL element
- */
- dropdownOptions: HTMLUListElement;
-
- /**
- * Text input that shows current selected option
- */
- input: HTMLInputElement;
-
- /**
- * Instance of the dropdown plugin for this select
- */
- dropdown: Dropdown;
-
- /**
- * Get selected values in an array
- */
- getSelectedValues(): string[];
- }
-
- class Sidenav extends Component implements Openable {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Sidenav;
-
- /**
- * Opens Sidenav
- */
- open(): void;
-
- /**
- * Closes Sidenav
- */
- close(): void;
-
- /**
- * Describes open/close state of Sidenav
- */
- isOpen: boolean;
-
- /**
- * Describes if sidenav is fixed
- */
- isFixed: boolean;
-
- /**
- * Describes if Sidenav is being dragged
- */
- isDragged: boolean;
- }
-
- /**
- * Options for the Sidenav
- */
- interface SidenavOptions {
- /**
- * Side of screen on which Sidenav appears
- * @default 'left'
- */
- edge: 'left' | 'right';
-
- /**
- * Allow swipe gestures to open/close Sidenav
- * @default true
- */
- draggable: boolean;
-
- /**
- * Length in ms of enter transition
- * @default 250
- */
- inDuration: number;
-
- /**
- * Length in ms of exit transition
- * @default 200
- */
- outDuration: number;
-
- /**
- * Function called when sidenav starts entering
- */
- onOpenStart: (this: Sidenav, elem: Element) => void;
-
- /**
- * Function called when sidenav finishes entering
- */
- onOpenEnd: (this: Sidenav, elem: Element) => void;
-
- /**
- * Function called when sidenav starts exiting
- */
- onCloseStart: (this: Sidenav, elem: Element) => void;
-
- /**
- * Function called when sidenav finishes exiting
- */
- onCloseEnd: (this: Sidenav, elem: Element) => void;
- }
-
- class Tabs extends Component {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Tabs;
-
- /**
- * 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;
-
- /**
- * The index of tab that is currently shown
- */
- index: number;
- }
-
- /**
- * Options for the Tabs
- */
- interface TabsOptions {
- /**
- * Transition duration in milliseconds.
- * @default 300
- */
- duration: number;
-
- /**
- * Callback for when a new tab content is shown
- */
- onShow: (this: Tabs, 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;
- }
-
- class TimePicker extends Component {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): TimePicker;
-
- /**
- * If the picker is open.
- */
- isOpen: boolean;
-
- /**
- * The selected time.
- */
- time: string;
-
- /**
- * Open timepicker
- */
- open(): void;
-
- /**
- * Close timepicker
- */
- close(): void;
-
- /**
- * Show hours or minutes view on timepicker
- * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
- */
- showView(view: "hours" | "minutes"): void;
- }
-
- interface TimePickerOptions {
- /**
- * Duration of the transition from/to the hours/minutes view.
- * @default 350
- */
- duration: number;
-
- /**
- * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input.
- */
- container: string;
-
- /**
- * Default time to set on the timepicker 'now' or '13:14'
- * @default 'now';
- */
- defaultTime: string;
-
- /**
- * Millisecond offset from the defaultTime.
- * @default 0
- */
- fromnow: number;
-
- /**
- * Done button text.
- * @default 'Ok'
- */
- doneText: string;
-
- /**
- * Clear button text.
- * @default 'Clear'
- */
- clearText: string;
-
- /**
- * Cancel button text.
- * @default 'Cancel'
- */
- cancelText: string;
-
- /**
- * Automatically close picker when minute is selected.
- * @default false;
- */
- autoClose: boolean;
-
- /**
- * 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;
- }
-
- class Modal extends Component implements Openable {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Modal;
-
- /**
- * Open modal
- */
- open(): void;
-
- /**
- * Close modal
- */
- close(): void;
-
- /**
- * If the modal is open.
- */
- isOpen: boolean;
-
- /**
- * ID of the modal element
- */
- id: string;
- }
-
- /**
- * Options for the Modal
- */
- interface ModalOptions {
- /**
- * Opacity of the modal overlay.
- * @default 0.5
- */
- opacity: number;
-
- /**
- * Transition in duration in milliseconds.
- * @default 250
- */
- inDuration: number;
-
- /**
- * Transition out duration in milliseconds.
- * @default 250
- */
- outDuration: number;
-
- /**
- * Callback function called when modal is finished entering.
- */
- ready: (this: Modal, elem: Element, openingTrigger: Element) => void;
-
- /**
- * Callback function called when modal is finished exiting.
- */
- complete: (this: Modal, elem: Element) => void;
-
- /**
- * Allow modal to be dismissed by keyboard or overlay click.
- * @default true
- */
- dismissible: boolean;
-
- /**
- * Starting top offset
- * @default '4%'
- */
- startingTop: string;
-
- /**
- * Ending top offset
- * @default '10%'
- */
- endingTop: string;
- }
-
- class Toast extends ComponentBase {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Toast;
-
- /**
- * Describes the current pan state of the Toast.
- */
- panning: boolean;
-
- /**
- * The remaining amount of time in ms that the toast will stay before dismissal.
- */
- timeRemaining: number;
-
- /**
- * remove a specific toast
- */
- dismiss(): void;
-
- /**
- * dismiss all toasts
- */
- static dismissAll(): void;
- }
-
- interface ToastOptions {
- /**
- * The HTML content of the Toast.
- */
- html: 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.
- */
- classes: string;
-
- /**
- * Callback function called when toast is dismissed.
- */
- completeCallback: () => void;
-
- /**
- * The percentage of the toast's width it takes for a drag to dismiss a Toast.
- * @default 0.8
- */
- activationPercent: number;
- }
-
- /**
- * Create a toast
- */
- function toast(options: Partial): Toast;
-
- class Tooltip extends Component implements Openable {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): Tooltip;
-
- /**
- * Show tooltip.
- */
- open(): void;
-
- /**
- * Hide tooltip.
- */
- close(): void;
-
- /**
- * If tooltip is open.
- */
- isOpen: boolean;
-
- /**
- * If tooltip is hovered.
- */
- isHovered: boolean;
- }
-
- interface TooltipOptions {
- /**
- * Delay time before tooltip disappears.
- * @default 0
- */
- exitDelay: number;
-
- /**
- * Delay time before tooltip appears.
- * @default 200
- */
- enterDelay: number;
-
- /**
- * Can take regular text or HTML strings.
- * @default null
- */
- html: string | null;
-
- /**
- * Set distance tooltip appears away from its activator excluding transitionMovement.
- * @default 5
- */
- margin: number;
-
- /**
- * Enter transition duration.
- * @default 300
- */
- inDuration: number;
-
- /**
- * Exit transition duration.
- * @default 250
- */
- outDuration: number;
-
- /**
- * Set the direction of the tooltip.
- * @default 'bottom'
- */
- position: 'top' | 'right' | 'bottom' | 'left';
-
- /**
- * Amount in px that the tooltip moves during its transition.
- * @default 10
- */
- transitionMovement: number;
- }
-
- function updateTextFields(): void;
-
- class CharacterCounter extends Component {
- /**
- * Get Instance
- */
- static getInstance(elem: Element): CharacterCounter;
- }
-
- abstract class Component extends ComponentBase {
- /**
- * Construct component instance and set everything up
- */
- constructor(elem: Element, options?: Partial);
-
- /**
- * Destroy plugin instance and teardown
- */
- destroy(): void;
- }
-
- abstract class ComponentBase {
- constructor(options?: Partial);
-
- /**
- * The DOM element the plugin was initialized with
- */
- el: Element;
-
- /**
- * The options the instance was initialized with
- */
- options: TOptions;
- }
-
- interface Openable {
- isOpen: boolean;
- open(): void;
- close(): void;
- }
- }
-
- interface JQuery {
- // Pick to check methods exist.
- autocomplete(method: keyof Pick): JQuery;
- autocomplete(method: keyof Pick, el: Element): JQuery;
- autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery;
- autocomplete(options?: Partial): JQuery;
-
- datepicker(method: keyof Pick): JQuery;
- datepicker(method: keyof Pick, date?: Date): JQuery;
- datepicker(method: keyof Pick, date: Date): JQuery;
- datepicker(options?: Partial): JQuery;
-
- dropdown(method: keyof Pick): JQuery;
- dropdown(options?: Partial): JQuery;
-
- floatingActionButton(method: keyof Pick): JQuery;
- floatingActionButton(options?: Partial): JQuery;
-
- formSelect(method: keyof Pick): JQuery;
- formSelect(options?: Partial): JQuery;
-
- sidenav(method: keyof Pick): JQuery;
- sidenav(options?: Partial): JQuery;
-
- tabs(method: keyof Pick): JQuery;
- tabs(method: keyof Pick, tabId: string): JQuery;
- tabs(options?: Partial): JQuery;
-
- timepicker(method: keyof Pick): JQuery;
- timepicker(method: keyof Pick, view: "hours" | "minutes"): JQuery;
- timepicker(options?: Partial): JQuery;
-
- // Toast can not be invoked using jQuery.
-
- tooltip(method: keyof Pick): JQuery;
- tooltip(options?: Partial): JQuery;
-
- modal(method: keyof Pick): JQuery;
- modal(options?: Partial): JQuery;
-
- // tslint:disable-next-line unified-signatures
- characterCounter(method: keyof Pick): JQuery;
- characterCounter(): JQuery;
- }
-}
diff --git a/types/materialize-css/inputfields.d.ts b/types/materialize-css/inputfields.d.ts
new file mode 100644
index 0000000000..23c5ca9489
--- /dev/null
+++ b/types/materialize-css/inputfields.d.ts
@@ -0,0 +1,7 @@
+///
+
+declare namespace M {
+ function updateTextFields(): void;
+
+ function textareaAutoResize(textarea: Element | JQuery | Cash): void;
+}
diff --git a/types/materialize-css/materialbox.d.ts b/types/materialize-css/materialbox.d.ts
new file mode 100644
index 0000000000..225afd67e6
--- /dev/null
+++ b/types/materialize-css/materialbox.d.ts
@@ -0,0 +1,98 @@
+///
+
+declare namespace M {
+ class Materialbox extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Materialbox;
+
+ /**
+ * Init Materialbox
+ */
+ static init(els: Element, options?: Partial): Materialbox;
+
+ /**
+ * Init Materialboxes
+ */
+ static init(els: MElements, options?: Partial): Materialbox[];
+
+ /**
+ * 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;
+
+ /**
+ * Open materialbox
+ */
+ open(): void;
+
+ /**
+ * Close materialbox
+ */
+ close(): void;
+ }
+
+ interface MaterialboxOptions {
+ /**
+ * 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: (this: Materialbox, el: Element) => void;
+
+ /**
+ * Callback function called after materialbox is opened
+ * @default null
+ */
+ onOpenEnd: (this: Materialbox, el: Element) => void;
+
+ /**
+ * Callback function called before materialbox is closed
+ * @default null
+ */
+ onCloseStart: (this: Materialbox, el: Element) => void;
+
+ /**
+ * Callback function called after materialbox is closed
+ * @default null
+ */
+ onCloseEnd: (this: Materialbox, el: Element) => void;
+ }
+}
+
+interface JQuery {
+ materialbox(method: keyof Pick): JQuery;
+ materialbox(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/modal.d.ts b/types/materialize-css/modal.d.ts
new file mode 100644
index 0000000000..d23a4f9c33
--- /dev/null
+++ b/types/materialize-css/modal.d.ts
@@ -0,0 +1,116 @@
+///
+
+declare namespace M {
+ class Modal extends Component implements Openable {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Modal;
+
+ /**
+ * Init Modal
+ */
+ static init(els: Element, options?: Partial): Modal;
+
+ /**
+ * Init Modals
+ */
+ static init(els: MElements, options?: Partial): Modal[];
+
+ /**
+ * Open modal
+ */
+ open(): void;
+
+ /**
+ * Close modal
+ */
+ close(): void;
+
+ /**
+ * If the modal is open.
+ */
+ isOpen: boolean;
+
+ /**
+ * ID of the modal element
+ */
+ id: string;
+ }
+
+ /**
+ * Options for the Modal
+ */
+ interface ModalOptions {
+ /**
+ * Opacity of the modal overlay.
+ * @default 0.5
+ */
+ opacity: number;
+
+ /**
+ * Transition in duration in milliseconds.
+ * @default 250
+ */
+ inDuration: number;
+
+ /**
+ * Transition out duration in milliseconds.
+ * @default 250
+ */
+ outDuration: number;
+
+ /**
+ * Prevent page from scrolling while modal is open
+ * @default true
+ */
+ preventScrolling: boolean;
+
+ /**
+ * Callback function called before modal is opened
+ * @default null
+ */
+ onOpenStart: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called after modal is opened
+ * @default null
+ */
+ onOpenEnd: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called before modal is closed
+ * @default null
+ */
+ onCloseStart: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called after modal is closed
+ * @default null
+ */
+ onCloseEnd: (this: Modal, el: Element) => void;
+
+ /**
+ * Allow modal to be dismissed by keyboard or overlay click.
+ * @default true
+ */
+ dismissible: boolean;
+
+ /**
+ * Starting top offset
+ * @default '4%'
+ */
+ startingTop: string;
+
+ /**
+ * Ending top offset
+ * @default '10%'
+ */
+ endingTop: string;
+ }
+}
+
+interface JQuery {
+ modal(method: keyof Pick): JQuery;
+ modal(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/parallax.d.ts b/types/materialize-css/parallax.d.ts
new file mode 100644
index 0000000000..17d2de56b9
--- /dev/null
+++ b/types/materialize-css/parallax.d.ts
@@ -0,0 +1,33 @@
+///
+
+declare namespace M {
+ class Parallax extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Parallax;
+
+ /**
+ * Init Parallax
+ */
+ static init(els: Element, options?: Partial): Parallax;
+
+ /**
+ * Init Parallaxs
+ */
+ static init(els: MElements, options?: Partial): Parallax[];
+ }
+
+ interface ParallaxOptions {
+ /**
+ * The minimum width of the screen, in pixels, where the parallax functionality starts working
+ * @default 0
+ */
+ responsiveThreshold: number;
+ }
+}
+
+interface JQuery {
+ parallax(options?: Partial): JQuery;
+ parallax(method: keyof Pick): JQuery;
+}
diff --git a/types/materialize-css/pushpin.d.ts b/types/materialize-css/pushpin.d.ts
new file mode 100644
index 0000000000..cab559e713
--- /dev/null
+++ b/types/materialize-css/pushpin.d.ts
@@ -0,0 +1,56 @@
+///
+
+declare namespace M {
+ class Pushpin extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Pushpin;
+
+ /**
+ * Init Pushpin
+ */
+ static init(els: Element, options?: Partial): Pushpin;
+
+ /**
+ * Init Pushpins
+ */
+ static init(els: MElements, options?: Partial): Pushpin[];
+
+ /**
+ * Original offsetTop of element
+ */
+ originalOffset: number;
+ }
+
+ interface PushpinOptions {
+ /**
+ * 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: (this: Pushpin, position: "pinned" | "pin-top" | "pin-bottom") => void;
+ }
+}
+
+interface JQuery {
+ pushpin(options?: Partial): JQuery;
+ pushpin(method: keyof Pick): JQuery;
+}
diff --git a/types/materialize-css/range.d.ts b/types/materialize-css/range.d.ts
new file mode 100644
index 0000000000..dac7a7edf2
--- /dev/null
+++ b/types/materialize-css/range.d.ts
@@ -0,0 +1,25 @@
+///
+
+declare namespace M {
+ class Range extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Range;
+
+ /**
+ * Init Range
+ */
+ static init(els: Element, options?: Partial): Range;
+
+ /**
+ * Init Ranges
+ */
+ static init(els: MElements, options?: Partial): Range[];
+ }
+}
+
+interface JQuery {
+ range(): JQuery;
+ range(method: keyof Pick): JQuery;
+}
diff --git a/types/materialize-css/scrollspy.d.ts b/types/materialize-css/scrollspy.d.ts
new file mode 100644
index 0000000000..3f5f2bd21b
--- /dev/null
+++ b/types/materialize-css/scrollspy.d.ts
@@ -0,0 +1,51 @@
+///
+
+declare namespace M {
+ class ScrollSpy extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): ScrollSpy;
+
+ /**
+ * Init ScrollSpy
+ */
+ static init(els: Element, options?: Partial): ScrollSpy;
+
+ /**
+ * Init ScrollSpies
+ */
+ static init(els: MElements, options?: Partial): ScrollSpy[];
+ }
+
+ interface ScrollSpyOptions {
+ /**
+ * 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;
+ }
+}
+
+interface JQuery {
+ scrollSpy(options?: Partial): JQuery;
+ scrollSpy(method: keyof Pick): JQuery;
+}
diff --git a/types/materialize-css/sidenav.d.ts b/types/materialize-css/sidenav.d.ts
new file mode 100644
index 0000000000..3843393d88
--- /dev/null
+++ b/types/materialize-css/sidenav.d.ts
@@ -0,0 +1,99 @@
+///
+
+declare namespace M {
+ class Sidenav extends Component implements Openable {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Sidenav;
+
+ /**
+ * Init Sidenav
+ */
+ static init(els: Element, options?: Partial): Sidenav;
+
+ /**
+ * Init Sidenavs
+ */
+ static init(els: MElements, options?: Partial): Sidenav[];
+
+ /**
+ * Opens Sidenav
+ */
+ open(): void;
+
+ /**
+ * Closes Sidenav
+ */
+ close(): void;
+
+ /**
+ * Describes open/close state of Sidenav
+ */
+ isOpen: boolean;
+
+ /**
+ * Describes if sidenav is fixed
+ */
+ isFixed: boolean;
+
+ /**
+ * Describes if Sidenav is being dragged
+ */
+ isDragged: boolean;
+ }
+
+ /**
+ * Options for the Sidenav
+ */
+ interface SidenavOptions {
+ /**
+ * Side of screen on which Sidenav appears
+ * @default 'left'
+ */
+ edge: 'left' | 'right';
+
+ /**
+ * Allow swipe gestures to open/close Sidenav
+ * @default true
+ */
+ draggable: boolean;
+
+ /**
+ * Length in ms of enter transition
+ * @default 250
+ */
+ inDuration: number;
+
+ /**
+ * Length in ms of exit transition
+ * @default 200
+ */
+ outDuration: number;
+
+ /**
+ * Function called when sidenav starts entering
+ */
+ onOpenStart: (this: Sidenav, elem: Element) => void;
+
+ /**
+ * Function called when sidenav finishes entering
+ */
+ onOpenEnd: (this: Sidenav, elem: Element) => void;
+
+ /**
+ * Function called when sidenav starts exiting
+ */
+ onCloseStart: (this: Sidenav, elem: Element) => void;
+
+ /**
+ * Function called when sidenav finishes exiting
+ */
+ onCloseEnd: (this: Sidenav, elem: Element) => void;
+ }
+}
+
+interface JQuery {
+ sidenav(method: keyof Pick): JQuery;
+ sidenav(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/slider.d.ts b/types/materialize-css/slider.d.ts
new file mode 100644
index 0000000000..4ab110ba58
--- /dev/null
+++ b/types/materialize-css/slider.d.ts
@@ -0,0 +1,86 @@
+///
+
+declare namespace M {
+ class Slider extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Slider;
+
+ /**
+ * Init Slider
+ */
+ static init(els: Element, options?: Partial): Slider;
+
+ /**
+ * Init Sliders
+ */
+ static init(els: MElements, options?: Partial): Slider[];
+
+ /**
+ * ID of the dropdown element
+ */
+ el: Element;
+
+ /**
+ * ID of the dropdown element
+ */
+ options: SliderOptions;
+
+ /**
+ * Index of current slide
+ */
+ activeIndex: number;
+
+ /**
+ * Pause slider autoslide
+ */
+ pause(): void;
+
+ /**
+ * Start slider autoslide
+ */
+ start(): void;
+
+ /**
+ * Move to next slider
+ */
+ next(): void;
+
+ /**
+ * Move to prev slider
+ */
+ prev(): void;
+ }
+
+ interface SliderOptions {
+ /**
+ * 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;
+ }
+}
+
+interface JQuery {
+ slider(method: keyof Pick): JQuery;
+ slider(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/tabs.d.ts b/types/materialize-css/tabs.d.ts
new file mode 100644
index 0000000000..b8cb2d5fec
--- /dev/null
+++ b/types/materialize-css/tabs.d.ts
@@ -0,0 +1,70 @@
+///
+
+declare namespace M {
+ class Tabs extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Tabs;
+
+ /**
+ * Init Tabs
+ */
+ static init(els: Element, options?: Partial): Tabs;
+
+ /**
+ * Init Tabses
+ */
+ static init(els: MElements, options?: Partial): Tabs[];
+
+ /**
+ * 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;
+
+ /**
+ * The index of tab that is currently shown
+ */
+ index: number;
+
+ /**
+ * Recalculate tab indicator position. This is useful when the indicator position is not correct
+ */
+ updateTabIndicator(): void;
+ }
+
+ /**
+ * Options for the Tabs
+ */
+ interface TabsOptions {
+ /**
+ * Transition duration in milliseconds.
+ * @default 300
+ */
+ duration: number;
+
+ /**
+ * Callback for when a new tab content is shown
+ */
+ onShow: (this: Tabs, 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;
+ }
+}
+
+interface JQuery {
+ tabs(method: keyof Pick): JQuery;
+ tabs(method: keyof Pick, tabId: string): JQuery;
+ tabs(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/taptarget.d.ts b/types/materialize-css/taptarget.d.ts
new file mode 100644
index 0000000000..eeea843592
--- /dev/null
+++ b/types/materialize-css/taptarget.d.ts
@@ -0,0 +1,54 @@
+///
+
+declare namespace M {
+ class TapTarget extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): TapTarget;
+
+ /**
+ * Init TapTarget
+ */
+ static init(els: Element, options?: Partial): TapTarget;
+
+ /**
+ * Init TapTargets
+ */
+ static init(els: MElements, options?: Partial): TapTarget[];
+
+ /**
+ * If the tap target is open
+ */
+ isOpen: boolean;
+
+ /**
+ * Open Tap Target
+ */
+ open(): void;
+
+ /**
+ * Close Tap Target
+ */
+ close(): void;
+ }
+
+ interface TapTargetOptions {
+ /**
+ * Callback function called when Tap Target is opened
+ * @default null
+ */
+ onOpen: (this: TapTarget, origin: Element) => void;
+
+ /**
+ * Callback function called when Tap Target is closed
+ * @default null
+ */
+ onClose: (this: TapTarget, origin: Element) => void;
+ }
+}
+
+interface JQuery {
+ tapTarget(method: keyof Pick): JQuery;
+ tapTarget(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/test/autocomplete.test.ts b/types/materialize-css/test/autocomplete.test.ts
new file mode 100644
index 0000000000..dece4118bd
--- /dev/null
+++ b/types/materialize-css/test/autocomplete.test.ts
@@ -0,0 +1,55 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Autocomplete
+const _autocomplete = new M.Autocomplete(elem);
+// $ExpectType Autocomplete
+const el = M.Autocomplete.init(elem);
+// $ExpectType Autocomplete[]
+const els = M.Autocomplete.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Autocomplete
+new materialize.Autocomplete(elem);
+// $ExpectType Autocomplete
+const autocomplete = new materialize.Autocomplete(elem, {
+ data: {
+ Apple: null,
+ Google: "https://placehold.it/250x250"
+ },
+ minLength: 3,
+ limit: 3,
+ onAutocomplete(text) {
+ // $ExpectType Autocomplete
+ this;
+ // $ExpectType string
+ text;
+ },
+ sortFunction(a, b, input) {
+ // $ExpectType string
+ a;
+ // $ExpectType string
+ b;
+ // $ExpectType string
+ input;
+ return 0;
+ }
+});
+// $ExpectType void
+autocomplete.updateData({ Microsoft: null });
+// $ExpectType void
+autocomplete.destroy();
+// $ExpectType AutocompleteOptions
+autocomplete.options;
+// $ExpectType Element
+autocomplete.el;
+// $ExpectType boolean
+autocomplete.isOpen;
+
+$(".whatever").autocomplete({
+ data: {
+ Apple: null,
+ Google: "https://placehold.it/250x250"
+ }
+});
+$(".whatever").autocomplete("updateData", { Microsoft: null });
diff --git a/types/materialize-css/test/carousel.test.ts b/types/materialize-css/test/carousel.test.ts
new file mode 100644
index 0000000000..e6658e8862
--- /dev/null
+++ b/types/materialize-css/test/carousel.test.ts
@@ -0,0 +1,53 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Carousel
+const _carousel = new M.Carousel(elem);
+// $ExpectType Carousel
+const el = M.Carousel.init(elem);
+// $ExpectType Carousel[]
+const els = M.Carousel.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Carousel
+const carousel = new materialize.Carousel(elem, {
+ dist: 1,
+ duration: 1,
+ fullWidth: true,
+ indicators: true,
+ noWrap: true,
+ numVisible: 10,
+ onCycleTo(current, dragged) {
+ // $ExpectType Element
+ current;
+ // $ExpectType boolean
+ dragged;
+ },
+ padding: 1,
+ shift: 1
+});
+
+// $ExpectType number
+carousel.center;
+// $ExpectType number
+carousel.dragged;
+// $ExpectType Element
+carousel.el;
+// $ExpectType CarouselOptions
+carousel.options;
+// $ExpectType boolean
+carousel.pressed;
+// $ExpectType void
+carousel.destroy();
+// $ExpectType void
+carousel.next(1);
+// $ExpectType void
+carousel.prev(1);
+// $ExpectType void
+carousel.set(2);
+
+$(".whatever").carousel();
+$(".whatever").carousel("destroy");
+$(".whatever").carousel("next", 1);
+$(".whatever").carousel("prev", 1);
+$(".whatever").carousel("set", 1);
diff --git a/types/materialize-css/test/character-counter.test.ts b/types/materialize-css/test/character-counter.test.ts
new file mode 100644
index 0000000000..e928510662
--- /dev/null
+++ b/types/materialize-css/test/character-counter.test.ts
@@ -0,0 +1,20 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType CharacterCounter
+const _characterCounter = new M.CharacterCounter(elem);
+// $ExpectType CharacterCounter
+const el = M.CharacterCounter.init(elem);
+// $ExpectType CharacterCounter[]
+const els = M.CharacterCounter.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType CharacterCounter
+const characterCounter = new materialize.CharacterCounter(elem);
+// $ExpectType void
+characterCounter.destroy();
+// $ExpectType Element
+characterCounter.el;
+
+$(".whatever").characterCounter();
+$(".whatever").characterCounter("destroy");
diff --git a/types/materialize-css/test/chips.test.ts b/types/materialize-css/test/chips.test.ts
new file mode 100644
index 0000000000..de68820070
--- /dev/null
+++ b/types/materialize-css/test/chips.test.ts
@@ -0,0 +1,40 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Chips
+const _chips = new M.Chips(elem);
+// $ExpectType Chips
+const el = M.Chips.init(elem);
+// $ExpectType Chips[]
+const els = M.Chips.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Chips
+const chips = new materialize.Chips(elem, {
+ data: [{ tag: "tag" }],
+ onChipAdd() { },
+ onChipDelete() { },
+ onChipSelect() { }
+});
+
+// $ExpectType void
+chips.addChip({ tag: "tag" });
+// $ExpectType void
+chips.deleteChip(1);
+// $ExpectType void
+chips.destroy();
+// $ExpectType void
+chips.selectChip(1);
+// $ExpectType Autocomplete
+chips.autocomplete;
+// $ExpectType ChipData[]
+chips.chipsData;
+// $ExpectType Element
+chips.el;
+// $ExpectType boolean
+chips.hasAutocomplete;
+// $ExpectType ChipsOptions
+chips.options;
+
+$(".whatever").chips({ data: [{ tag: "tag" }] });
+$(".whatever").chips("destroy");
diff --git a/types/materialize-css/test/collapsible.test.ts b/types/materialize-css/test/collapsible.test.ts
new file mode 100644
index 0000000000..927cd16cb7
--- /dev/null
+++ b/types/materialize-css/test/collapsible.test.ts
@@ -0,0 +1,49 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Collapsible
+const _collapsible = new M.Collapsible(elem);
+// $ExpectType Collapsible
+const el = M.Collapsible.init(elem);
+// $ExpectType Collapsible[]
+const els = M.Collapsible.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Collapsible
+const collapsible = new materialize.Collapsible(elem, {
+ accordion: true,
+ inDuration: 1,
+ outDuration: 1,
+ onCloseEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onCloseStart(el) {
+ // $ExpectType Element
+ el;
+ },
+ onOpenEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onOpenStart(el) {
+ // $ExpectType Element
+ el;
+ }
+});
+
+// $ExpectType void
+collapsible.close(1);
+// $ExpectType void
+collapsible.destroy();
+// $ExpectType void
+collapsible.open(1);
+// $ExpectType Element
+collapsible.el;
+// $ExpectType CollapsibleOptions
+collapsible.options;
+
+$(".whatever").collapsible();
+$(".whatever").collapsible("destroy");
+$(".whatever").collapsible("open", 1);
+$(".whatever").collapsible("close", 1);
diff --git a/types/materialize-css/test/common.test.ts b/types/materialize-css/test/common.test.ts
new file mode 100644
index 0000000000..a46cd7fe28
--- /dev/null
+++ b/types/materialize-css/test/common.test.ts
@@ -0,0 +1,13 @@
+import * as M from "materialize-css";
+import * as jQuery from "jquery";
+
+// Test Component Initialization
+
+// $ExpectType Autocomplete
+M.Autocomplete.init(document.querySelector('.whatever')!);
+// $ExpectType Autocomplete[]
+M.Autocomplete.init(document.querySelectorAll('.whatever'));
+// $ExpectType Autocomplete[]
+M.Autocomplete.init(jQuery('.whatever'));
+// $ExpectType Autocomplete[]
+M.Autocomplete.init(cash('.whatever'));
diff --git a/types/materialize-css/test/datepicker.test.ts b/types/materialize-css/test/datepicker.test.ts
new file mode 100644
index 0000000000..bd5279243e
--- /dev/null
+++ b/types/materialize-css/test/datepicker.test.ts
@@ -0,0 +1,42 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Datepicker
+const _datePicker = new M.Datepicker(elem);
+// $ExpectType Datepicker
+const el = M.Datepicker.init(elem);
+// $ExpectType Datepicker[]
+const els = M.Datepicker.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Datepicker
+new materialize.Datepicker(elem);
+// $ExpectType Datepicker
+const datePicker = new materialize.Datepicker(elem, {
+ defaultDate: new Date(),
+ onSelect(date) {
+ // $ExpectType Datepicker
+ this;
+ // $ExpectType Date
+ date;
+ }
+});
+// $ExpectType void
+datePicker.open();
+// $ExpectType void
+datePicker.setDate(new Date());
+// $ExpectType void
+datePicker.destroy();
+// $ExpectType DatepickerOptions
+datePicker.options;
+// $ExpectType Element
+datePicker.el;
+// $ExpectType boolean
+datePicker.isOpen;
+
+$(".whatever").datepicker();
+$(".whatever").datepicker({ defaultDate: new Date() });
+$(".whatever").datepicker("open");
+$(".whatever").datepicker("destroy");
+$(".whatever").datepicker("setDate", new Date());
+$(".whatever").datepicker("gotoDate", new Date());
diff --git a/types/materialize-css/test/dropdown.test.ts b/types/materialize-css/test/dropdown.test.ts
new file mode 100644
index 0000000000..a10eef6fc1
--- /dev/null
+++ b/types/materialize-css/test/dropdown.test.ts
@@ -0,0 +1,46 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Dropdown
+const _dropdown = new M.Dropdown(elem);
+// $ExpectType Dropdown
+const el = M.Dropdown.init(elem);
+// $ExpectType Dropdown[]
+const els = M.Dropdown.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Dropdown
+new materialize.Dropdown(elem);
+// $ExpectType Dropdown
+const dropdown = new materialize.Dropdown(elem, {
+ alignment: "left"
+});
+// $ExpectType void
+dropdown.open();
+// $ExpectType void
+dropdown.close();
+// $ExpectType void
+dropdown.destroy();
+// $ExpectType void
+dropdown.recalculateDimensions();
+// $ExpectType Element
+dropdown.dropdownEl;
+// $ExpectType Element
+dropdown.el;
+// $ExpectType number
+dropdown.focusedIndex;
+// $ExpectType string
+dropdown.id;
+// $ExpectType boolean
+dropdown.isOpen;
+// $ExpectType boolean
+dropdown.isScrollable;
+// $ExpectType DropdownOptions
+dropdown.options;
+
+$(".whatever").dropdown();
+$(".whatever").dropdown({ alignment: "left" });
+$(".whatever").dropdown("open");
+$(".whatever").dropdown("close");
+$(".whatever").dropdown("destroy");
+$(".whatever").dropdown("recalculateDimensions");
diff --git a/types/materialize-css/test/fab.test.ts b/types/materialize-css/test/fab.test.ts
new file mode 100644
index 0000000000..988adbf4bb
--- /dev/null
+++ b/types/materialize-css/test/fab.test.ts
@@ -0,0 +1,32 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType FloatingActionButton
+const _fab = new M.FloatingActionButton(elem);
+// $ExpectType FloatingActionButton
+const el = M.FloatingActionButton.init(elem);
+// $ExpectType FloatingActionButton[]
+const els = M.FloatingActionButton.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType FloatingActionButton
+new materialize.FloatingActionButton(elem);
+// $ExpectType FloatingActionButton
+const fab = new materialize.FloatingActionButton(elem, {
+ direction: 'left'
+});
+// $ExpectType void
+fab.open();
+// $ExpectType void
+fab.destroy();
+// $ExpectType FloatingActionButtonOptions
+fab.options;
+// $ExpectType Element
+fab.el;
+// $ExpectType boolean
+fab.isOpen;
+
+$(".whatever").floatingActionButton();
+$(".whatever").floatingActionButton({ direction: "left" });
+$(".whatever").floatingActionButton("open");
+$(".whatever").floatingActionButton("destroy");
diff --git a/types/materialize-css/test/formselect.test.ts b/types/materialize-css/test/formselect.test.ts
new file mode 100644
index 0000000000..1a5192de41
--- /dev/null
+++ b/types/materialize-css/test/formselect.test.ts
@@ -0,0 +1,42 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType FormSelect
+const _formselect = new M.FormSelect(elem);
+// $ExpectType FormSelect
+const el = M.FormSelect.init(elem);
+// $ExpectType FormSelect[]
+const els = M.FormSelect.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType FormSelect
+new materialize.FormSelect(elem);
+// $ExpectType FormSelect
+const formSelect = new materialize.FormSelect(elem, {
+ classes: "whatever",
+ dropdownOptions: {
+ alignment: "left"
+ }
+});
+// $ExpectType string[]
+formSelect.getSelectedValues();
+// $ExpectType void
+formSelect.destroy();
+// $ExpectType FormSelectOptions
+formSelect.options;
+// $ExpectType Element
+formSelect.el;
+// $ExpectType Dropdown
+formSelect.dropdown;
+// $ExpectType HTMLUListElement
+formSelect.dropdownOptions;
+// $ExpectType HTMLInputElement
+formSelect.input;
+// $ExpectType boolean
+formSelect.isMultiple;
+// $ExpectType Element
+formSelect.wrapper;
+
+$(".whatever").formSelect();
+$(".whatever").formSelect({ classes: "whatever" });
+$(".whatever").formSelect("destroy");
diff --git a/types/materialize-css/test/inputfields.test.ts b/types/materialize-css/test/inputfields.test.ts
new file mode 100644
index 0000000000..ecde571537
--- /dev/null
+++ b/types/materialize-css/test/inputfields.test.ts
@@ -0,0 +1,7 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+M.textareaAutoResize(elem);
+M.textareaAutoResize($(elem));
+M.textareaAutoResize(cash(elem));
diff --git a/types/materialize-css/test/materialbox.test.ts b/types/materialize-css/test/materialbox.test.ts
new file mode 100644
index 0000000000..277edb7305
--- /dev/null
+++ b/types/materialize-css/test/materialbox.test.ts
@@ -0,0 +1,49 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Materialbox
+const _materialbox = new M.Materialbox(elem);
+// $ExpectType Materialbox
+const el = M.Materialbox.init(elem);
+// $ExpectType Materialbox[]
+const els = M.Materialbox.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Materialbox
+const materialbox = new materialize.Materialbox(elem, {
+ inDuration: 1,
+ outDuration: 1,
+ onCloseEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onCloseStart(el) {
+ // $ExpectType Element
+ el;
+ },
+ onOpenEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onOpenStart(el) {
+ // $ExpectType Element
+ el;
+ }
+});
+
+// $ExpectType void
+materialbox.close();
+// $ExpectType void
+materialbox.destroy();
+// $ExpectType void
+materialbox.open();
+// $ExpectType Element
+materialbox.el;
+// $ExpectType MaterialboxOptions
+materialbox.options;
+
+$(".whatever").materialbox();
+$(".whatever").materialbox({ inDuration: 2 });
+$(".whatever").materialbox("open");
+$(".whatever").materialbox("destroy");
+$(".whatever").materialbox("close");
diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts
deleted file mode 100644
index 79ed142be4..0000000000
--- a/types/materialize-css/test/materialize-css-global.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-const elem = document.querySelector('.whatever')!;
-// $ExpectType Sidenav
-const sidenav = new M.Sidenav(elem);
-
-// $ExpectType Tabs
-const tabs = new M.Tabs(elem);
-
-// $ExpectType Modal
-const modal = new M.Modal(elem);
-
-// $ExpectType Autocomplete
-const autocomplete = new M.Autocomplete(elem);
-
-// $ExpectType CharacterCounter
-const characterCounter = new M.CharacterCounter(elem);
-
-// $ExpectType Tooltip
-const tooltips = new M.Tooltip(elem);
-
-// $ExpectType FloatingActionButton
-const fab = new M.FloatingActionButton(elem);
-
-// $ExpectType Toast
-const toast = M.toast({ html: 'I am a toast!' });
-
-// $ExpectType DatePicker
-const datePicker = new M.DatePicker(elem);
-
-// $ExpectType TimePicker
-const timePicker = new M.TimePicker(elem);
-
-// $ExpectType Dropdown
-const dropdown = new M.Dropdown(elem);
-
-// $ExpectType FormSelect
-const formSelect = new M.FormSelect(elem);
diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts
deleted file mode 100644
index 7bf9faa957..0000000000
--- a/types/materialize-css/test/materialize-css-jquery.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-$(".whatever").sidenav();
-$(".whatever").sidenav({ inDuration: 200 });
-$(".whatever").sidenav("open");
-$(".whatever").sidenav("destroy");
-
-$(".whatever").tabs();
-$(".whatever").tabs({ duration: 200 });
-$(".whatever").tabs("destroy");
-$(".whatever").tabs("select", "id");
-
-$(".whatever").modal();
-$(".whatever").modal({ inDuration: 200 });
-$(".whatever").modal("open");
-$(".whatever").modal("destroy");
-
-$(".whatever").characterCounter();
-$(".whatever").characterCounter("destroy");
-
-$(".whatever").autocomplete({
- data: {
- Apple: null,
- Google: "https://placehold.it/250x250"
- }
-});
-$(".whatever").autocomplete("updateData", { Microsoft: null });
-
-$(".whatever").tooltip();
-$(".whatever").tooltip({ html: "
" });
-$(".whatever").tooltip("open");
-$(".whatever").tooltip("destroy");
-
-$(".whatever").floatingActionButton();
-$(".whatever").floatingActionButton({ direction: "left" });
-$(".whatever").floatingActionButton("open");
-$(".whatever").floatingActionButton("destroy");
-
-// Toast can not be invoked using jQuery.
-
-$(".whatever").datepicker();
-$(".whatever").datepicker({ defaultDate: new Date() });
-$(".whatever").datepicker("open");
-$(".whatever").datepicker("destroy");
-$(".whatever").datepicker("setDate", new Date());
-$(".whatever").datepicker("gotoDate", new Date());
-
-$(".whatever").timepicker();
-$(".whatever").timepicker({ defaultTime: "13:14" });
-$(".whatever").timepicker("open");
-$(".whatever").timepicker("destroy");
-$(".whatever").timepicker("showView", "hours");
-
-$(".whatever").formSelect();
-$(".whatever").formSelect({ classes: "whatever" });
-$(".whatever").formSelect("destroy");
-
-$(".whatever").dropdown();
-$(".whatever").dropdown({ alignment: "left" });
-$(".whatever").dropdown("open");
-$(".whatever").dropdown("close");
-$(".whatever").dropdown("destroy");
-$(".whatever").dropdown("recalculateDimensions");
diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts
deleted file mode 100644
index 874e596aaa..0000000000
--- a/types/materialize-css/test/materialize-css-module.test.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import * as materialize from "materialize-css";
-
-const elem = document.querySelector('.whatever')!;
-
-// Sidenav
-// $ExpectType Sidenav
-new materialize.Sidenav(elem);
-// $ExpectType Sidenav
-const sidenav = new materialize.Sidenav(elem, {
- edge: "left",
- inDuration: 300,
- onCloseStart(el) {
- // $ExpectType Sidenav
- this;
- // $ExpectType Element
- el;
- }
-});
-// $ExpectType void
-sidenav.open();
-// $ExpectType void
-sidenav.destroy();
-// $ExpectType SidenavOptions
-sidenav.options;
-// $ExpectType Element
-sidenav.el;
-// $ExpectType boolean
-sidenav.isOpen;
-
-// Tabs
-// $ExpectType Tabs
-new materialize.Tabs(elem);
-// $ExpectType Tabs
-const tabs = new materialize.Tabs(elem, {
- duration: 200,
- onShow(content) {
- // $ExpectType Tabs
- this;
- // $ExpectType Element
- content;
- }
-});
-// $ExpectType void
-tabs.destroy();
-// $ExpectType void
-tabs.select("id");
-// $ExpectType TabsOptions
-tabs.options;
-// $ExpectType Element
-tabs.el;
-// $ExpectType number
-tabs.index;
-
-// Modal
-// $ExpectType Modal
-new materialize.Modal(elem);
-// $ExpectType Modal
-const modal = new materialize.Modal(elem, {
- inDuration: 300,
- ready(el, trigger) {
- // $ExpectType Modal
- this;
- // $ExpectType Element
- el;
- // $ExpectType Element
- trigger;
- }
-});
-// $ExpectType void
-modal.open();
-// $ExpectType void
-modal.destroy();
-// $ExpectType ModalOptions
-modal.options;
-// $ExpectType Element
-modal.el;
-// $ExpectType boolean
-modal.isOpen;
-
-// CharacterCounter
-// $ExpectType CharacterCounter
-const characterCounter = new materialize.CharacterCounter(elem);
-// $ExpectType void
-characterCounter.destroy();
-// $ExpectType Element
-characterCounter.el;
-
-// Autocomplete
-// $ExpectType Autocomplete
-new materialize.Autocomplete(elem);
-// $ExpectType Autocomplete
-const autocomplete = new materialize.Autocomplete(elem, {
- data: {
- Apple: null,
- Google: "https://placehold.it/250x250"
- },
- minLength: 3,
- onAutocomplete(text) {
- // $ExpectType Autocomplete
- this;
- // $ExpectType string
- text;
- },
- sortFunction(a, b, input) {
- // $ExpectType string
- a;
- // $ExpectType string
- b;
- // $ExpectType string
- input;
- return 0;
- }
-});
-// $ExpectType void
-autocomplete.updateData({ Microsoft: null });
-// $ExpectType void
-autocomplete.destroy();
-// $ExpectType AutocompleteOptions
-autocomplete.options;
-// $ExpectType Element
-autocomplete.el;
-// $ExpectType boolean
-autocomplete.isOpen;
-
-// Tooltip
-// $ExpectType Tooltip
-new materialize.Tooltip(elem);
-// $ExpectType Tooltip
-const tooltip = new materialize.Tooltip(elem, {
- inDuration: 300,
- position: "right"
-});
-// $ExpectType void
-tooltip.open();
-// $ExpectType void
-tooltip.destroy();
-// $ExpectType TooltipOptions
-tooltip.options;
-// $ExpectType Element
-tooltip.el;
-// $ExpectType boolean
-tooltip.isOpen;
-
-// FloatingActionButton
-// $ExpectType FloatingActionButton
-new materialize.FloatingActionButton(elem);
-// $ExpectType FloatingActionButton
-const fab = new materialize.FloatingActionButton(elem, {
- direction: 'left'
-});
-// $ExpectType void
-fab.open();
-// $ExpectType void
-fab.destroy();
-// $ExpectType FloatingActionButtonOptions
-fab.options;
-// $ExpectType Element
-fab.el;
-// $ExpectType boolean
-fab.isOpen;
-
-// Toasts
-// $ExpectType Toast
-const toast = materialize.toast({ html: 'I am a toast!' });
-// $ExpectType ToastOptions
-toast.options;
-// $ExpectType Element
-fab.el;
-// $ExpectType void
-toast.dismiss();
-// $ExpectType void
-materialize.Toast.dismissAll();
-
-// DatePicker
-// $ExpectType DatePicker
-new materialize.DatePicker(elem);
-// $ExpectType DatePicker
-const datePicker = new materialize.DatePicker(elem, {
- defaultDate: new Date(),
- onSelect(date) {
- // $ExpectType DatePicker
- this;
- // $ExpectType Date
- date;
- }
-});
-// $ExpectType void
-datePicker.open();
-// $ExpectType void
-datePicker.setDate(new Date());
-// $ExpectType void
-datePicker.destroy();
-// $ExpectType DatePickerOptions
-datePicker.options;
-// $ExpectType Element
-datePicker.el;
-// $ExpectType boolean
-datePicker.isOpen;
-
-// TimePicker
-// $ExpectType TimePicker
-new materialize.TimePicker(elem);
-// $ExpectType TimePicker
-const timePicker = new materialize.TimePicker(elem, {
- defaultTime: "13:14"
-});
-// $ExpectType void
-timePicker.open();
-// $ExpectType void
-timePicker.showView("hours");
-// $ExpectType void
-timePicker.destroy();
-// $ExpectType TimePickerOptions
-timePicker.options;
-// $ExpectType Element
-timePicker.el;
-// $ExpectType boolean
-timePicker.isOpen;
-
-// Dropdown
-// $ExpectType Dropdown
-new materialize.Dropdown(elem);
-// $ExpectType Dropdown
-const dropdown = new materialize.Dropdown(elem, {
- alignment: "left"
-});
-// $ExpectType void
-dropdown.open();
-// $ExpectType void
-dropdown.close();
-// $ExpectType void
-dropdown.destroy();
-// $ExpectType void
-dropdown.recalculateDimensions();
-// $ExpectType Element
-dropdown.dropdownEl;
-// $ExpectType Element
-dropdown.el;
-// $ExpectType number
-dropdown.focusedIndex;
-// $ExpectType string
-dropdown.id;
-// $ExpectType boolean
-dropdown.isOpen;
-// $ExpectType boolean
-dropdown.isScrollable;
-// $ExpectType DropdownOptions
-dropdown.options;
-
-// FormSelect
-// $ExpectType FormSelect
-new materialize.FormSelect(elem);
-// $ExpectType FormSelect
-const formSelect = new materialize.FormSelect(elem, {
- classes: "whatever",
- dropdownOptions: {
- alignment: "left"
- }
-});
-// $ExpectType string[]
-formSelect.getSelectedValues();
-// $ExpectType void
-formSelect.destroy();
-// $ExpectType FormSelectOptions
-formSelect.options;
-// $ExpectType Element
-formSelect.el;
-// $ExpectType Dropdown
-formSelect.dropdown;
-// $ExpectType HTMLUListElement
-formSelect.dropdownOptions;
-// $ExpectType HTMLInputElement
-formSelect.input;
-// $ExpectType boolean
-formSelect.isMultiple;
-// $ExpectType Element
-formSelect.wrapper;
diff --git a/types/materialize-css/test/modal.test.ts b/types/materialize-css/test/modal.test.ts
new file mode 100644
index 0000000000..3d3923e28b
--- /dev/null
+++ b/types/materialize-css/test/modal.test.ts
@@ -0,0 +1,38 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Modal
+const _modal = new M.Modal(elem);
+// $ExpectType Modal
+const el = M.Modal.init(elem);
+// $ExpectType Modal[]
+const els = M.Modal.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Modal
+new materialize.Modal(elem);
+// $ExpectType Modal
+const modal = new materialize.Modal(elem, {
+ inDuration: 300,
+ onOpenStart(el) {
+ // $ExpectType Modal
+ this;
+ // $ExpectType Element
+ el;
+ }
+});
+// $ExpectType void
+modal.open();
+// $ExpectType void
+modal.destroy();
+// $ExpectType ModalOptions
+modal.options;
+// $ExpectType Element
+modal.el;
+// $ExpectType boolean
+modal.isOpen;
+
+$(".whatever").modal();
+$(".whatever").modal({ inDuration: 200 });
+$(".whatever").modal("open");
+$(".whatever").modal("destroy");
diff --git a/types/materialize-css/test/parallax.test.ts b/types/materialize-css/test/parallax.test.ts
new file mode 100644
index 0000000000..62beb046e7
--- /dev/null
+++ b/types/materialize-css/test/parallax.test.ts
@@ -0,0 +1,24 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Parallax
+const _parallax = new M.Parallax(elem);
+// $ExpectType Parallax
+const el = M.Parallax.init(elem);
+// $ExpectType Parallax[]
+const els = M.Parallax.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Parallax
+const parallax = new materialize.Parallax(elem, { responsiveThreshold: 1 });
+
+// $ExpectType void
+parallax.destroy();
+// $ExpectType Element
+parallax.el;
+// $ExpectType ParallaxOptions
+parallax.options;
+
+$(".whatever").parallax();
+$(".whatever").parallax({ responsiveThreshold: 2 });
+$(".whatever").parallax("destroy");
diff --git a/types/materialize-css/test/pushpin.test.ts b/types/materialize-css/test/pushpin.test.ts
new file mode 100644
index 0000000000..bb521b2cf6
--- /dev/null
+++ b/types/materialize-css/test/pushpin.test.ts
@@ -0,0 +1,34 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Pushpin
+const _pushpin = new M.Pushpin(elem);
+// $ExpectType Pushpin
+const el = M.Pushpin.init(elem);
+// $ExpectType Pushpin[]
+const els = M.Pushpin.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Pushpin
+const pushpin = new materialize.Pushpin(elem, {
+ bottom: 1,
+ offset: 1,
+ onPositionChange(position) {
+ // $ExpectType "pinned" | "pin-top" | "pin-bottom"
+ position;
+ },
+ top: 1
+});
+
+// $ExpectType void
+pushpin.destroy();
+// $ExpectType Element
+pushpin.el;
+// $ExpectType PushpinOptions
+pushpin.options;
+// $ExpectType number
+pushpin.originalOffset;
+
+$(".whatever").pushpin();
+$(".whatever").pushpin({ top: 2 });
+$(".whatever").pushpin("destroy");
diff --git a/types/materialize-css/test/range.test.ts b/types/materialize-css/test/range.test.ts
new file mode 100644
index 0000000000..cf343b0341
--- /dev/null
+++ b/types/materialize-css/test/range.test.ts
@@ -0,0 +1,22 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Range
+const _range = new M.Range(elem);
+// $ExpectType Range
+const el = M.Range.init(elem);
+// $ExpectType Range[]
+const els = M.Range.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Range
+const range = new materialize.Range(elem);
+// $ExpectType void
+range.destroy();
+// $ExpectType Element
+range.el;
+// $ExpectType undefined
+range.options;
+
+$(".whatever").range();
+$(".whatever").range("destroy");
diff --git a/types/materialize-css/test/scrollspy.test.ts b/types/materialize-css/test/scrollspy.test.ts
new file mode 100644
index 0000000000..a797123626
--- /dev/null
+++ b/types/materialize-css/test/scrollspy.test.ts
@@ -0,0 +1,32 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType ScrollSpy
+const _scrollspy = new M.ScrollSpy(elem);
+// $ExpectType ScrollSpy
+const el = M.ScrollSpy.init(elem);
+// $ExpectType ScrollSpy[]
+const els = M.ScrollSpy.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType ScrollSpy
+const scrollspy = new materialize.ScrollSpy(elem, {
+ activeClass: "class",
+ getActiveElement(id) {
+ // $ExpectType string
+ id;
+ return "string";
+ },
+ scrollOffset: 1,
+ throttle: 1
+});
+
+// $ExpectType void
+scrollspy.destroy();
+// $ExpectType Element
+scrollspy.el;
+// $ExpectType ScrollSpyOptions
+scrollspy.options;
+
+$(".whatever").scrollSpy();
+$(".whatever").scrollSpy("destroy");
diff --git a/types/materialize-css/test/sidenav.test.ts b/types/materialize-css/test/sidenav.test.ts
new file mode 100644
index 0000000000..485c3be144
--- /dev/null
+++ b/types/materialize-css/test/sidenav.test.ts
@@ -0,0 +1,39 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Sidenav
+const _sidenav = new M.Sidenav(elem);
+// $ExpectType Sidenav
+const el = M.Sidenav.init(elem);
+// $ExpectType Sidenav[]
+const els = M.Sidenav.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Sidenav
+new materialize.Sidenav(elem);
+// $ExpectType Sidenav
+const sidenav = new materialize.Sidenav(elem, {
+ edge: "left",
+ inDuration: 300,
+ onCloseStart(el) {
+ // $ExpectType Sidenav
+ this;
+ // $ExpectType Element
+ el;
+ }
+});
+// $ExpectType void
+sidenav.open();
+// $ExpectType void
+sidenav.destroy();
+// $ExpectType SidenavOptions
+sidenav.options;
+// $ExpectType Element
+sidenav.el;
+// $ExpectType boolean
+sidenav.isOpen;
+
+$(".whatever").sidenav();
+$(".whatever").sidenav({ inDuration: 200 });
+$(".whatever").sidenav("open");
+$(".whatever").sidenav("destroy");
diff --git a/types/materialize-css/test/slider.test.ts b/types/materialize-css/test/slider.test.ts
new file mode 100644
index 0000000000..c1950ed165
--- /dev/null
+++ b/types/materialize-css/test/slider.test.ts
@@ -0,0 +1,43 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Slider
+const _slider = new M.Slider(elem);
+// $ExpectType Slider
+const el = M.Slider.init(elem);
+// $ExpectType Slider[]
+const els = M.Slider.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Slider
+const slider = new materialize.Slider(elem, {
+ duration: 1,
+ height: 1,
+ indicators: true,
+ interval: 1
+});
+
+// $ExpectType void
+slider.destroy();
+// $ExpectType Element
+slider.el;
+// $ExpectType SliderOptions
+slider.options;
+// $ExpectType number
+slider.activeIndex;
+// $ExpectType void
+slider.next();
+// $ExpectType void
+slider.pause();
+// $ExpectType void
+slider.prev();
+// $ExpectType void
+slider.start();
+
+$(".whatever").slider();
+$(".whatever").slider({ duration: 1 });
+$(".whatever").slider("destroy");
+$(".whatever").slider("next");
+$(".whatever").slider("pause");
+$(".whatever").slider("prev");
+$(".whatever").slider("start");
diff --git a/types/materialize-css/test/tabs.test.ts b/types/materialize-css/test/tabs.test.ts
new file mode 100644
index 0000000000..9c0c0acdad
--- /dev/null
+++ b/types/materialize-css/test/tabs.test.ts
@@ -0,0 +1,38 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Tabs
+const _tabs = new M.Tabs(elem);
+// $ExpectType Tabs
+const el = M.Tabs.init(elem);
+// $ExpectType Tabs[]
+const els = M.Tabs.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Tabs
+new materialize.Tabs(elem);
+// $ExpectType Tabs
+const tabs = new materialize.Tabs(elem, {
+ duration: 200,
+ onShow(content) {
+ // $ExpectType Tabs
+ this;
+ // $ExpectType Element
+ content;
+ }
+});
+// $ExpectType void
+tabs.destroy();
+// $ExpectType void
+tabs.select("id");
+// $ExpectType TabsOptions
+tabs.options;
+// $ExpectType Element
+tabs.el;
+// $ExpectType number
+tabs.index;
+
+$(".whatever").tabs();
+$(".whatever").tabs({ duration: 200 });
+$(".whatever").tabs("destroy");
+$(".whatever").tabs("select", "id");
diff --git a/types/materialize-css/test/taptarget.test.ts b/types/materialize-css/test/taptarget.test.ts
new file mode 100644
index 0000000000..91b00168cd
--- /dev/null
+++ b/types/materialize-css/test/taptarget.test.ts
@@ -0,0 +1,38 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType TapTarget
+const _taptarget = new M.TapTarget(elem);
+// $ExpectType TapTarget
+const el = M.TapTarget.init(elem);
+// $ExpectType TapTarget[]
+const els = M.TapTarget.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType TapTarget
+const taptarget = new materialize.TapTarget(elem, {
+ onClose(origin) {
+ // $ExpectType Element
+ origin;
+ },
+ onOpen(origin) {
+ // $ExpectType Element
+ origin;
+ }
+});
+
+// $ExpectType void
+taptarget.destroy();
+// $ExpectType void
+taptarget.close();
+// $ExpectType void
+taptarget.open();
+// $ExpectType Element
+taptarget.el;
+// $ExpectType TapTargetOptions
+taptarget.options;
+
+$(".whatever").tapTarget();
+$(".whatever").tapTarget("destroy");
+$(".whatever").tapTarget("close");
+$(".whatever").tapTarget("open");
diff --git a/types/materialize-css/test/timepicker.test.ts b/types/materialize-css/test/timepicker.test.ts
new file mode 100644
index 0000000000..6c187b2cfe
--- /dev/null
+++ b/types/materialize-css/test/timepicker.test.ts
@@ -0,0 +1,65 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Timepicker
+const _timePicker = new M.Timepicker(elem);
+// $ExpectType Timepicker
+const el = M.Timepicker.init(elem);
+// $ExpectType Timepicker[]
+const els = M.Timepicker.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Timepicker
+new materialize.Timepicker(elem);
+// $ExpectType Timepicker
+const timePicker = new materialize.Timepicker(elem, {
+ duration: 1,
+ container: "selector",
+ showClearBtn: true,
+ defaultTime: "13:14",
+ fromNow: 1,
+ i18n: { done: "Ok, Mate" },
+ autoClose: true,
+ twelveHour: true,
+ vibrate: true,
+ onOpenStart(el) {
+ // $ExpectType Element
+ el;
+ },
+ onOpenEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onCloseStart(el) {
+ // $ExpectType Element
+ el;
+ },
+ onCloseEnd(el) {
+ // $ExpectType Element
+ el;
+ },
+ onSelect(hour, minute) {
+ // $ExpectType number
+ hour;
+ // $ExpectType number
+ minute;
+ }
+});
+// $ExpectType void
+timePicker.open();
+// $ExpectType void
+timePicker.showView("hours");
+// $ExpectType void
+timePicker.destroy();
+// $ExpectType TimepickerOptions
+timePicker.options;
+// $ExpectType Element
+timePicker.el;
+// $ExpectType boolean
+timePicker.isOpen;
+
+$(".whatever").timepicker();
+$(".whatever").timepicker({ defaultTime: "13:14" });
+$(".whatever").timepicker("open");
+$(".whatever").timepicker("destroy");
+$(".whatever").timepicker("showView", "hours");
diff --git a/types/materialize-css/test/toast.test.ts b/types/materialize-css/test/toast.test.ts
new file mode 100644
index 0000000000..ede26bcc20
--- /dev/null
+++ b/types/materialize-css/test/toast.test.ts
@@ -0,0 +1,17 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Toast
+const _toast = M.toast({ html: 'I am a toast!' });
+
+// $ExpectType Toast
+const toast = materialize.toast({ html: 'I am a toast!' });
+// $ExpectType ToastOptions
+toast.options;
+// $ExpectType Element
+toast.el;
+// $ExpectType void
+toast.dismiss();
+// $ExpectType void
+materialize.Toast.dismissAll();
diff --git a/types/materialize-css/test/tooltip.test.ts b/types/materialize-css/test/tooltip.test.ts
new file mode 100644
index 0000000000..db9453e95f
--- /dev/null
+++ b/types/materialize-css/test/tooltip.test.ts
@@ -0,0 +1,33 @@
+import * as materialize from "materialize-css";
+
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType Tooltip
+const _tooltip = new M.Tooltip(elem);
+// $ExpectType Tooltip
+const el = M.Tooltip.init(elem);
+// $ExpectType Tooltip[]
+const els = M.Tooltip.init(document.querySelectorAll('.whatever'));
+
+// $ExpectType Tooltip
+new materialize.Tooltip(elem);
+// $ExpectType Tooltip
+const tooltip = new materialize.Tooltip(elem, {
+ inDuration: 300,
+ position: "right"
+});
+// $ExpectType void
+tooltip.open();
+// $ExpectType void
+tooltip.destroy();
+// $ExpectType TooltipOptions
+tooltip.options;
+// $ExpectType Element
+tooltip.el;
+// $ExpectType boolean
+tooltip.isOpen;
+
+$(".whatever").tooltip();
+$(".whatever").tooltip({ html: "
" });
+$(".whatever").tooltip("open");
+$(".whatever").tooltip("destroy");
diff --git a/types/materialize-css/test/waves.test.ts b/types/materialize-css/test/waves.test.ts
new file mode 100644
index 0000000000..c73ae78904
--- /dev/null
+++ b/types/materialize-css/test/waves.test.ts
@@ -0,0 +1,4 @@
+const elem = document.querySelector('.whatever')!;
+
+// $ExpectType void
+Waves.attach(elem);
diff --git a/types/materialize-css/timepicker.d.ts b/types/materialize-css/timepicker.d.ts
new file mode 100644
index 0000000000..5f9b3ec5bf
--- /dev/null
+++ b/types/materialize-css/timepicker.d.ts
@@ -0,0 +1,136 @@
+///
+
+declare namespace M {
+ class Timepicker extends Component {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Timepicker;
+
+ /**
+ * Init Timepicker
+ */
+ static init(els: Element, options?: Partial): Timepicker;
+
+ /**
+ * Init Timepickers
+ */
+ static init(els: MElements, options?: Partial): Timepicker[];
+
+ /**
+ * If the picker is open.
+ */
+ isOpen: boolean;
+
+ /**
+ * The selected time.
+ */
+ time: string;
+
+ /**
+ * Open timepicker
+ */
+ open(): void;
+
+ /**
+ * Close timepicker
+ */
+ close(): void;
+
+ /**
+ * Show hours or minutes view on timepicker
+ * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+ */
+ showView(view: "hours" | "minutes"): void;
+ }
+
+ interface TimepickerOptions {
+ /**
+ * Duration of the transition from/to the hours/minutes view.
+ * @default 350
+ */
+ duration: number;
+
+ /**
+ * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input.
+ */
+ container: string;
+
+ /**
+ * Show the clear button in the Timepicker
+ * @default false
+ */
+ showClearBtn: boolean;
+
+ /**
+ * 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;
+
+ /**
+ * Automatically close picker when minute is selected.
+ * @default false;
+ */
+ autoClose: boolean;
+
+ /**
+ * 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 called before modal is opened
+ * @default null
+ */
+ onOpenStart: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called after modal is opened
+ * @default null
+ */
+ onOpenEnd: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called before modal is closed
+ * @default null
+ */
+ onCloseStart: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function called after modal is closed
+ * @default null
+ */
+ onCloseEnd: (this: Modal, el: Element) => void;
+
+ /**
+ * Callback function when a time is selected
+ * @default null
+ */
+ onSelect: (this: Modal, hour: number, minute: number) => void;
+ }
+}
+
+interface JQuery {
+ timepicker(method: keyof Pick): JQuery;
+ timepicker(method: keyof Pick, view: "hours" | "minutes"): JQuery;
+ timepicker(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/toast.d.ts b/types/materialize-css/toast.d.ts
new file mode 100644
index 0000000000..4953c7135b
--- /dev/null
+++ b/types/materialize-css/toast.d.ts
@@ -0,0 +1,76 @@
+///
+
+declare namespace M {
+ class Toast extends ComponentBase {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Toast;
+
+ /**
+ * Describes the current pan state of the Toast.
+ */
+ panning: boolean;
+
+ /**
+ * The remaining amount of time in ms that the toast will stay before dismissal.
+ */
+ timeRemaining: number;
+
+ /**
+ * remove a specific toast
+ */
+ dismiss(): void;
+
+ /**
+ * dismiss all toasts
+ */
+ static dismissAll(): void;
+ }
+
+ interface ToastOptions {
+ /**
+ * The HTML content of the Toast.
+ */
+ html: 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.
+ */
+ classes: string;
+
+ /**
+ * Callback function called when toast is dismissed.
+ */
+ completeCallback: () => void;
+
+ /**
+ * The percentage of the toast's width it takes for a drag to dismiss a Toast.
+ * @default 0.8
+ */
+ activationPercent: number;
+ }
+
+ /**
+ * Create a toast
+ */
+ function toast(options: Partial): Toast;
+}
diff --git a/types/materialize-css/tooltip.d.ts b/types/materialize-css/tooltip.d.ts
new file mode 100644
index 0000000000..6b7320a20a
--- /dev/null
+++ b/types/materialize-css/tooltip.d.ts
@@ -0,0 +1,95 @@
+///
+
+declare namespace M {
+ class Tooltip extends Component implements Openable {
+ /**
+ * Get Instance
+ */
+ static getInstance(elem: Element): Tooltip;
+
+ /**
+ * Init Tooltip
+ */
+ static init(els: Element, options?: Partial): Tooltip;
+
+ /**
+ * Init Tooltips
+ */
+ static init(els: MElements, options?: Partial): Tooltip[];
+
+ /**
+ * Show tooltip.
+ */
+ open(): void;
+
+ /**
+ * Hide tooltip.
+ */
+ close(): void;
+
+ /**
+ * If tooltip is open.
+ */
+ isOpen: boolean;
+
+ /**
+ * If tooltip is hovered.
+ */
+ isHovered: boolean;
+ }
+
+ interface TooltipOptions {
+ /**
+ * Delay time before tooltip disappears.
+ * @default 0
+ */
+ exitDelay: number;
+
+ /**
+ * Delay time before tooltip appears.
+ * @default 200
+ */
+ enterDelay: number;
+
+ /**
+ * Can take regular text or HTML strings.
+ * @default null
+ */
+ html: string;
+
+ /**
+ * Set distance tooltip appears away from its activator excluding transitionMovement.
+ * @default 5
+ */
+ margin: number;
+
+ /**
+ * Enter transition duration.
+ * @default 300
+ */
+ inDuration: number;
+
+ /**
+ * Exit transition duration.
+ * @default 250
+ */
+ outDuration: number;
+
+ /**
+ * Set the direction of the tooltip.
+ * @default 'bottom'
+ */
+ position: 'top' | 'right' | 'bottom' | 'left';
+
+ /**
+ * Amount in px that the tooltip moves during its transition.
+ * @default 10
+ */
+ transitionMovement: number;
+ }
+}
+
+interface JQuery {
+ tooltip(method: keyof Pick): JQuery;
+ tooltip(options?: Partial): JQuery;
+}
diff --git a/types/materialize-css/tsconfig.json b/types/materialize-css/tsconfig.json
index 617d1b925a..cf2b279cb7 100644
--- a/types/materialize-css/tsconfig.json
+++ b/types/materialize-css/tsconfig.json
@@ -19,8 +19,30 @@
},
"files": [
"index.d.ts",
- "test/materialize-css-global.test.ts",
- "test/materialize-css-module.test.ts",
- "test/materialize-css-jquery.test.ts"
+ "test/autocomplete.test.ts",
+ "test/carousel.test.ts",
+ "test/character-counter.test.ts",
+ "test/chips.test.ts",
+ "test/collapsible.test.ts",
+ "test/common.test.ts",
+ "test/datepicker.test.ts",
+ "test/dropdown.test.ts",
+ "test/fab.test.ts",
+ "test/formselect.test.ts",
+ "test/inputfields.test.ts",
+ "test/materialbox.test.ts",
+ "test/modal.test.ts",
+ "test/parallax.test.ts",
+ "test/pushpin.test.ts",
+ "test/range.test.ts",
+ "test/scrollspy.test.ts",
+ "test/sidenav.test.ts",
+ "test/slider.test.ts",
+ "test/tabs.test.ts",
+ "test/taptarget.test.ts",
+ "test/timepicker.test.ts",
+ "test/toast.test.ts",
+ "test/tooltip.test.ts",
+ "test/waves.test.ts"
]
-}
\ No newline at end of file
+}
diff --git a/types/materialize-css/waves.d.ts b/types/materialize-css/waves.d.ts
new file mode 100644
index 0000000000..cc86b017e4
--- /dev/null
+++ b/types/materialize-css/waves.d.ts
@@ -0,0 +1,9 @@
+declare namespace Waves {
+ /**
+ * Attach Waves to an input element (or any element which doesn't
+ * bubble mouseup/mousedown events).
+ * Intended to be used with dynamically loaded forms/inputs, or
+ * where the user doesn't want a delegated click handler.
+ */
+ function attach(element: Element): void;
+}