@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/src/characterCounter.ts

@@ -1,34 +1,64 @@
-import { Component } from "./component";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
 
-let _defaults = {};
+export interface CharacterCounterOptions extends BaseOptions {};
 
-export class CharacterCounter extends Component {
+const _defaults = Object.freeze({});
+
+type InputElement = HTMLInputElement | HTMLTextAreaElement;
+
+export class CharacterCounter extends Component<{}> {
+  
+  declare el: InputElement;
+  /** Stores the reference to the counter HTML element. */
+  counterEl: HTMLSpanElement;
+  /** Specifies whether the input is valid or not. */
   isInvalid: boolean;
+  /** Specifies whether the input text has valid length or not. */
   isValidLength: boolean;
-  private _handleUpdateCounterBound: any;
-  counterEl: HTMLSpanElement;
 
-  constructor(el: Element, options: Object) {
-    super(CharacterCounter, el, options);
+  constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial<CharacterCounterOptions>) {
+    super(el, {}, CharacterCounter);
     (this.el as any).M_CharacterCounter = this;
-    this.options = {...CharacterCounter.defaults, ...options};
+
+    this.options = {
+      ...CharacterCounter.defaults,
+      ...options
+    };
+
     this.isInvalid = false;
     this.isValidLength = false;
+    
     this._setupCounter();
     this._setupEventHandlers();
   }
 
-  static get defaults() {
+  static get defaults(): CharacterCounterOptions {
     return _defaults;
   }
 
-  static init(els, options) {
-    return super.init(this, els, options);
+  /**
+   * Initializes instance of CharacterCounter.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: InputElement, options?: Partial<CharacterCounterOptions>): CharacterCounter;
+  /**
+   * Initializes instances of CharacterCounter.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<InputElement | MElement>, options?: Partial<CharacterCounterOptions>): CharacterCounter[];
+  /**
+   * Initializes instances of CharacterCounter.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InputElement | InitElements<InputElement | MElement>, options: Partial<CharacterCounterOptions> = {}): CharacterCounter | CharacterCounter[] {
+    return super.init(els, options, CharacterCounter);
   }
 
-  static getInstance(el) {
-    let domElem = !!el.jquery ? el[0] : el;
-    return domElem.M_CharacterCounter;
+  static getInstance(el: InputElement): CharacterCounter {
+    return (el as any).M_CharacterCounter;
   }
 
   destroy() {
@@ -38,14 +68,13 @@ export class CharacterCounter extends Component {
   }
 
   _setupEventHandlers() {
-    this._handleUpdateCounterBound = this.updateCounter.bind(this);
-    this.el.addEventListener('focus', this._handleUpdateCounterBound, true);
-    this.el.addEventListener('input', this._handleUpdateCounterBound, true);
+    this.el.addEventListener('focus', this.updateCounter, true);
+    this.el.addEventListener('input', this.updateCounter, true);
   }
 
   _removeEventHandlers() {
-    this.el.removeEventListener('focus', this._handleUpdateCounterBound, true);
-    this.el.removeEventListener('input', this._handleUpdateCounterBound, true);
+    this.el.removeEventListener('focus', this.updateCounter, true);
+    this.el.removeEventListener('input', this.updateCounter, true);
   }
 
   _setupCounter() {
@@ -61,8 +90,8 @@ export class CharacterCounter extends Component {
     this.counterEl.remove();
   }
 
-  updateCounter() {
-    let maxLength = parseInt(this.el.getAttribute('data-length')),
+  updateCounter = () => {
+    let maxLength = parseInt(this.el.getAttribute('maxlength')),
       actualLength = (this.el as HTMLInputElement).value.length;
 
     this.isValidLength = actualLength <= maxLength;

package/src/chips.ts

@@ -1,11 +1,80 @@
-import { Component } from "./component";
-import { M } from "./global";
-import { Autocomplete } from "./autocomplete";
+import { Utils } from "./utils";
+import { Autocomplete, AutocompleteOptions } from "./autocomplete";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface ChipData {
+  /**
+   * Unique identifier.
+   */
+  id: number|string;
+  /**
+   * Chip text. If not specified, "id" will be used.
+   */
+  text?: string;
+  /**
+   * Chip image (URL).
+   */
+  image?: string;
+}
+
+export interface ChipsOptions extends BaseOptions{
+  /**
+   * 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<AutocompleteOptions>;
+  /**
+   * Toggles abililty to add custom value not in autocomplete list.
+   * @default false
+   */
+  autocompleteOnly: boolean;
+  /**
+   * Set chips limit.
+   * @default Infinity
+   */
+  limit: number;
+  /**
+   * Specifies class to be used in "close" button (useful when working with Material Symbols icon set).
+   * @default 'material-icons'
+   */
+  closeIconClass: string;
+  /**
+   * Callback for chip add.
+   * @default null
+   */
+  onChipAdd: (element: HTMLElement, chip: HTMLElement) => void;
+  /**
+   * Callback for chip select.
+   * @default null
+   */
+  onChipSelect: (element: HTMLElement, chip: HTMLElement) => void;
+  /**
+   * Callback for chip delete.
+   * @default null
+   */
+  onChipDelete: (element: HTMLElement, chip: HTMLElement) => void;
+}
 
-let _defaults = {
+let _defaults: ChipsOptions = {
   data: [],
   placeholder: '',
   secondaryPlaceholder: '',
+  closeIconClass: 'material-icons',
   autocompleteOptions: {},
   autocompleteOnly: false,
   limit: Infinity,
@@ -14,35 +83,31 @@ let _defaults = {
   onChipDelete: null
 };
 
-interface DataBit {
-  id: string, // required
-  text?: string,
-  image?: string,
-  description?: string,
-}
-
 function gGetIndex(el: HTMLElement): number {
   return [...el.parentNode.children].indexOf(el);
 }
 
-export class Chips extends Component {
-  chipsData: DataBit[];
+export class Chips extends Component<ChipsOptions> {
+  /** Array of the current chips data. */
+  chipsData: ChipData[];
+  /** If the chips has autocomplete enabled. */
   hasAutocomplete: boolean;
+  /** Autocomplete instance, if any. */
   autocomplete: Autocomplete;
   _input: HTMLInputElement;
   _label: any;
   _chips: HTMLElement[];
-  private _handleChipClickBound: any;
-  private _handleInputKeydownBound: any;
-  private _handleInputFocusBound: any;
-  private _handleInputBlurBound: any;
   static _keydown: boolean;
   private _selectedChip: any;
 
-  constructor(el, options) {
-    super(Chips, el, options);
+  constructor(el: HTMLElement, options: Partial<ChipsOptions>) {
+    super(el, options, Chips);
     (this.el as any).M_Chips = this;
-    this.options = {...Chips.defaults, ...options};
+
+    this.options = {
+      ...Chips.defaults,
+      ...options
+    };
 
     this.el.classList.add('chips', 'input-field');
     this.chipsData = [];
@@ -52,7 +117,7 @@ export class Chips extends Component {
 
     // Set input id
     if (!this._input.getAttribute('id'))
-      this._input.setAttribute('id', M.guid());
+      this._input.setAttribute('id', Utils.guid());
 
     // Render initial chips
     if (this.options.data.length) {
@@ -70,13 +135,29 @@ export class Chips extends Component {
     return _defaults;
   }
 
-  static init(els, options) {
-    return super.init(this, els, options);
+  /**
+   * Initializes instance of Chips.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<ChipsOptions>): Chips;
+  /**
+   * Initializes instances of Chips.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<ChipsOptions>): Chips[];
+  /**
+   * Initializes instances of Chips.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<ChipsOptions> = {}): Chips | Chips[] {
+    return super.init(els, options, Chips);
   }
 
-  static getInstance(el) {
-    const domElem = !!el.jquery ? el[0] : el;
-    return domElem.M_Chips;
+  static getInstance(el: HTMLElement): Chips {
+    return (el as any).M_Chips;
   }
 
   getData() {
@@ -91,30 +172,26 @@ export class Chips extends Component {
   }
 
   _setupEventHandlers() {
-    this._handleChipClickBound = this._handleChipClick.bind(this);
-    this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
-    this._handleInputFocusBound = this._handleInputFocus.bind(this);
-    this._handleInputBlurBound = this._handleInputBlur.bind(this);
-    this.el.addEventListener('click', this._handleChipClickBound);
+    this.el.addEventListener('click', this._handleChipClick);
     document.addEventListener('keydown', Chips._handleChipsKeydown);
     document.addEventListener('keyup', Chips._handleChipsKeyup);
     this.el.addEventListener('blur', Chips._handleChipsBlur, true);
-    this._input.addEventListener('focus', this._handleInputFocusBound);
-    this._input.addEventListener('blur', this._handleInputBlurBound);
-    this._input.addEventListener('keydown', this._handleInputKeydownBound);
+    this._input.addEventListener('focus', this._handleInputFocus);
+    this._input.addEventListener('blur', this._handleInputBlur);
+    this._input.addEventListener('keydown', this._handleInputKeydown);
   }
 
   _removeEventHandlers() {
-    this.el.removeEventListener('click', this._handleChipClickBound);
+    this.el.removeEventListener('click', this._handleChipClick);
     document.removeEventListener('keydown', Chips._handleChipsKeydown);
     document.removeEventListener('keyup', Chips._handleChipsKeyup);
     this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
-    this._input.removeEventListener('focus', this._handleInputFocusBound);
-    this._input.removeEventListener('blur', this._handleInputBlurBound);
-    this._input.removeEventListener('keydown', this._handleInputKeydownBound);
+    this._input.removeEventListener('focus', this._handleInputFocus);
+    this._input.removeEventListener('blur', this._handleInputBlur);
+    this._input.removeEventListener('keydown', this._handleInputKeydown);
   }
 
-  _handleChipClick(e) {
+  _handleChipClick = (e: MouseEvent) => {
     const _chip = (<HTMLElement>e.target).closest('.chip');
     const clickedClose = (<HTMLElement>e.target).classList.contains('close');
     if (_chip) {
@@ -133,7 +210,7 @@ export class Chips extends Component {
     }
   }
 
-  static _handleChipsKeydown(e) {
+  static _handleChipsKeydown(e: KeyboardEvent) {
     Chips._keydown = true;
     const chips = (<HTMLElement>e.target).closest('.chips');
     const chipsKeydown = e.target && chips;
@@ -141,10 +218,10 @@ export class Chips extends Component {
     // Don't handle keydown inputs on input and textarea
     const tag = (<HTMLElement>e.target).tagName;
     if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown) return;
-    
+
     const currChips: Chips = (chips as any).M_Chips;
-    // backspace and delete
-    if (e.keyCode === 8 || e.keyCode === 46) {
+
+    if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
       e.preventDefault();
       let selectIndex = currChips.chipsData.length;
       if (currChips._selectedChip) {
@@ -159,16 +236,14 @@ export class Chips extends Component {
       else
         currChips._input.focus();
     }
-    // left arrow key
-    else if (e.keyCode === 37) {
+    else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) - 1;
         if (selectIndex < 0) return;
         currChips.selectChip(selectIndex);
       }
     }
-    // right arrow key
-    else if (e.keyCode === 39) {
+    else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) + 1;
         if (selectIndex >= currChips.chipsData.length)
@@ -179,11 +254,11 @@ export class Chips extends Component {
     }
   }
 
-  static _handleChipsKeyup(e) {
+  static _handleChipsKeyup(e: Event) {
     Chips._keydown = false;
   }
 
-  static _handleChipsBlur(e) {
+  static _handleChipsBlur(e: Event) {
     if (!Chips._keydown && document.hidden) {
       const chips = (<HTMLElement>e.target).closest('.chips');
       const currChips: Chips = (chips as any).M_Chips;
@@ -191,18 +266,17 @@ export class Chips extends Component {
     }
   }
 
-  _handleInputFocus() {
+  _handleInputFocus = () => {
     this.el.classList.add('focus');
   }
 
-  _handleInputBlur() {
+  _handleInputBlur = () => {
     this.el.classList.remove('focus');
   }
 
-  _handleInputKeydown(e) {
+  _handleInputKeydown = (e: KeyboardEvent) => {
     Chips._keydown = true;
-    // enter
-    if (e.keyCode === 13) {
+    if (Utils.keys.ENTER.includes(e.key)) {
       // Override enter if autocompleting.
       if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
         return;
@@ -212,10 +286,9 @@ export class Chips extends Component {
         this.addChip({id: this._input.value});
       }
       this._input.value = '';
-      // delete or left
     }
-    else if (
-      (e.keyCode === 8 || e.keyCode === 37) &&
+    else if (      
+      (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
       this._input.value === '' &&
       this.chipsData.length
     ) {
@@ -224,14 +297,14 @@ export class Chips extends Component {
     }
   }
 
-  _renderChip(chip: DataBit): HTMLDivElement {
+  _renderChip(chip: ChipData): HTMLDivElement {
     if (!chip.id) return;
     const renderedChip = document.createElement('div');
     renderedChip.classList.add('chip');
-    renderedChip.innerText = chip.text || chip.id;
+    renderedChip.innerText = chip.text || <string>chip.id;
     renderedChip.setAttribute('tabindex', "0");
     const closeIcon = document.createElement('i');
-    closeIcon.classList.add('material-icons', 'close');
+    closeIcon.classList.add(this.options.closeIconClass, 'close');
     closeIcon.innerText = 'close';
     // attach image if needed
     if (chip.image) {
@@ -256,7 +329,11 @@ export class Chips extends Component {
 
   _setupAutocomplete() {
     this.options.autocompleteOptions.onAutocomplete = (items) => {
-      if (items.length > 0) this.addChip(items[0]);
+      if (items.length > 0) this.addChip({
+        id: items[0].id,
+        text: items[0].text,
+        image: items[0].image
+      });
       this._input.value = '';
       this._input.focus();
     };
@@ -289,13 +366,17 @@ export class Chips extends Component {
     }
   }
 
-  _isValidAndNotExist(chip: DataBit) {
+  _isValidAndNotExist(chip: ChipData) {
     const isValid = !!chip.id;
     const doesNotExist = !this.chipsData.some(item => item.id == chip.id);
     return isValid && doesNotExist;
   }
 
-  addChip(chip: DataBit) {
+  /**
+   * Add chip to input.
+   * @param chip Chip data object
+   */
+  addChip(chip: ChipData) {
     if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit) return;
     const renderedChip = this._renderChip(chip);
     this._chips.push(renderedChip);
@@ -309,6 +390,10 @@ export class Chips extends Component {
     }
   }
 
+  /**
+   * Delete nth chip.
+   * @param chipIndex  Index of chip
+   */
   deleteChip(chipIndex: number) {
     const chip = this._chips[chipIndex];
     this._chips[chipIndex].remove();
@@ -321,6 +406,10 @@ export class Chips extends Component {
     }
   }
 
+  /**
+   * Select nth chip.
+   * @param chipIndex Index of chip
+   */
   selectChip(chipIndex: number) {
     const chip = this._chips[chipIndex];
     this._selectedChip = chip;

package/src/collapsible.ts

@@ -1,25 +1,68 @@
-import { Component } from "./component";
 import anim from "animejs";
 
-const _defaults = {
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface CollapsibleOptions extends BaseOptions {
+  /**
+   * 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 collapsible is opened.
+   * @default null
+   */
+  onOpenStart: (el: Element) => void;
+  /**
+   * Callback function called after collapsible is opened.
+   * @default null
+   */
+  onOpenEnd: (el: Element) => void;
+  /**
+   * Callback function called before collapsible is closed.
+   * @default null
+   */
+  onCloseStart: (el: Element) => void;
+  /**
+   * Callback function called after collapsible is closed.
+   * @default null
+   */
+  onCloseEnd: (el: Element) => void;
+}
+
+const _defaults: CollapsibleOptions = {
   accordion: true,
-  onOpenStart: undefined,
-  onOpenEnd: undefined,
-  onCloseStart: undefined,
-  onCloseEnd: undefined,
+  onOpenStart: null,
+  onOpenEnd: null,
+  onCloseStart: null,  
+  onCloseEnd: null,
   inDuration: 300,
   outDuration: 300
 };
 
-export class Collapsible extends Component {
+export class Collapsible extends Component<CollapsibleOptions> {
   private _headers: HTMLElement[];
-  private _handleCollapsibleClickBound: any;
-  private _handleCollapsibleKeydownBound: any;
 
-  constructor(el, options) {
-    super(Collapsible, el, options);
+  constructor(el: HTMLElement, options: Partial<CollapsibleOptions>) {
+    super(el, options, Collapsible);
     (this.el as any).M_Collapsible = this;
-    this.options = {...Collapsible.defaults, ...options};
+
+    this.options = {
+      ...Collapsible.defaults,
+      ...options
+    };
+
     // Setup tab indices
     this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
     this._headers.forEach(el => el.tabIndex = 0);
@@ -29,21 +72,37 @@ export class Collapsible extends Component {
     if (this.options.accordion)
       if (activeBodies.length > 0)
         activeBodies[0].style.display = 'block'; // Accordion
-    else 
+    else
       activeBodies.forEach(el => el.style.display = 'block'); // Expandables
   }
 
-  static get defaults() {
+  static get defaults(): CollapsibleOptions {
     return _defaults;
   }
 
-  static init(els, options) {
-    return super.init(this, els, options);
+  /**
+   * Initializes instance of Collapsible.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
+  /**
+   * Initializes instances of Collapsible.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
+  /**
+   * Initializes instances of Collapsible.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<CollapsibleOptions> = {}): Collapsible | Collapsible[] {
+    return super.init(els, options, Collapsible);
   }
 
-  static getInstance(el) {
-    const domElem = !!el.jquery ? el[0] : el;
-    return domElem.M_Collapsible;
+  static getInstance(el: HTMLElement): Collapsible {
+    return (el as any).M_Collapsible;
   }
 
   destroy() {
@@ -52,19 +111,17 @@ export class Collapsible extends Component {
   }
 
   _setupEventHandlers() {
-    this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this);
-    this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this);
-    this.el.addEventListener('click', this._handleCollapsibleClickBound);
-    this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydownBound));
+    this.el.addEventListener('click', this._handleCollapsibleClick);
+    this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydown));
   }
 
   _removeEventHandlers() {
-    this.el.removeEventListener('click', this._handleCollapsibleClickBound);
-    this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydownBound));
+    this.el.removeEventListener('click', this._handleCollapsibleClick);
+    this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
   }
 
-  _handleCollapsibleClick(e) {
-    const header = e.target.closest('.collapsible-header');
+  _handleCollapsibleClick = (e: MouseEvent | KeyboardEvent) => {
+    const header = (e.target as HTMLElement).closest('.collapsible-header');
     if (e.target && header) {
       const collapsible = header.closest('.collapsible');
       if (collapsible !== this.el) return;
@@ -80,9 +137,9 @@ export class Collapsible extends Component {
     }
   }
 
-  _handleCollapsibleKeydown(e) {
-    if (e.keyCode === 13) {
-      this._handleCollapsibleClickBound(e);
+  _handleCollapsibleKeydown = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this._handleCollapsibleClick(e);
     }
   }
 
@@ -147,7 +204,11 @@ export class Collapsible extends Component {
     });
   }
 
-  open(index: number) {
+  /**
+   * Open collapsible section.
+   * @param n Nth section to open.
+   */
+  open = (index: number) => {
     const listItems = Array.from(this.el.children).filter(c => c.tagName === 'LI');
     const li = listItems[index];
     if (li && !li.classList.contains('active')) {
@@ -169,7 +230,11 @@ export class Collapsible extends Component {
     }
   }
 
-  close(index: number) {
+  /**
+   * Close collapsible section.
+   * @param n Nth section to close.
+   */
+  close = (index: number) => {
     const li = Array.from(this.el.children).filter(c => c.tagName === 'LI')[index];
     if (li && li.classList.contains('active')) {
       // onCloseStart callback