@materializecss/materialize 2.0.2-alpha → 2.0.3-alpha

package/src/carousel.ts

@@ -84,7 +84,7 @@ export class Carousel extends Component<CarouselOptions> {
   velocity: number;
   frame: number;
   timestamp: number;
-  ticker: NodeJS.Timer;
+  ticker: string | number | NodeJS.Timeout;
   amplitude: number;
   /** The index of the center carousel item. */
   center: number = 0;

package/src/chips.ts

@@ -140,7 +140,7 @@ export class Chips extends Component<ChipsOptions> {
    * @param el HTML element.
    * @param options Component options.
    */
-  static init(el: HTMLElement, options?: Partial<ChipsOptions>): Chips;
+  static init(el: InitElements<MElement>, options?: Partial<ChipsOptions>): Chips;
   /**
    * Initializes instances of Chips.
    * @param els HTML elements.

package/src/datepicker.ts

@@ -463,7 +463,7 @@ export class Datepicker extends Component<DatepickerOptions> {
    */
   setInputValue() {
     this.el.value = this.toString();
-    this.el.dispatchEvent(new CustomEvent('change', {detail: {firedBy: this}}));
+    this.el.dispatchEvent(new CustomEvent('change', {bubbles:true, cancelable:true, composed:true, detail: {firedBy: this}}));
   }
 
   _renderDateDisplay() {

package/src/dropdown.ts

@@ -641,7 +641,4 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     }
   }
 
-  static {
-    Dropdown._dropdowns = [];
-  }
 }

package/src/forms.ts

@@ -94,17 +94,28 @@ export class Forms {
       });
 
       document.querySelectorAll('.materialize-textarea').forEach((textArea: HTMLTextAreaElement) => {
-        // Save Data in Element
-        textArea.setAttribute('original-height', textArea.getBoundingClientRect().height.toString());
-        textArea.setAttribute('previous-length', textArea.value.length.toString());
-        Forms.textareaAutoResize(textArea);
-
-        textArea.addEventListener('keyup', e => Forms.textareaAutoResize(textArea));
-        textArea.addEventListener('keydown', e => Forms.textareaAutoResize(textArea));
+          Forms.textareaAutoResize(textArea);
       });
 
       // File Input Path
       document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput: HTMLInputElement) => {
+          Forms.InitFileInputPath(fileInput);
+      });
+
+    });
+  }
+
+  static InitTextarea(textarea: HTMLTextAreaElement){
+        // Save Data in Element
+        textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        textarea.setAttribute('previous-length', textarea.value.length.toString());
+        Forms.textareaAutoResize(textarea);
+
+        textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea));
+        textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea));
+  }
+
+  static InitFileInputPath(fileInput: HTMLInputElement){
         fileInput.addEventListener('change', e => {
           const fileField = fileInput.closest('.file-field');
           const pathInput = <HTMLInputElement>fileField.querySelector('input.file-path');
@@ -114,10 +125,8 @@ export class Forms {
             filenames.push(files[i].name);
           }
           pathInput.value = filenames.join(', ');
-          pathInput.dispatchEvent(new Event('change'));
+          pathInput.dispatchEvent(new Event('change',{bubbles:true, cancelable:true, composed:true}));
         });
-      });
-
-    });
   }
+  
 }

package/src/global.ts

@@ -26,7 +26,7 @@ import { Range } from './range';
 import { Utils } from './utils';
 
 export class M {
-  static version = '2.0.2-alpha';
+  static version = '2.0.3-alpha';
 
   static Autocomplete: typeof Autocomplete = Autocomplete;
   static Tabs: typeof Tabs = Tabs;
@@ -46,7 +46,7 @@ export class M {
   static Slider: typeof Slider = Slider;
   static Timepicker: typeof Timepicker = Timepicker;
   /** Creates a toast. */
-  static toast: (opt: ToastOptions) => Toast = (opt) => new Toast(opt) ;
+  static toast: (opt: Partial<ToastOptions>) => Toast = (opt) => new Toast(opt) ;
   static Tooltip: typeof Tooltip = Tooltip;
   static Sidenav: typeof Sidenav = Sidenav;
   static TapTarget: typeof TapTarget = TapTarget;
@@ -73,24 +73,24 @@ export class M {
    */
   static AutoInit(context: HTMLElement = document.body) {
     let registry = {
-      Autocomplete: <NodeListOf<HTMLElement>>context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
-      Carousel: <NodeListOf<HTMLElement>>context.querySelectorAll('.carousel:not(.no-autoinit)'),
-      Chips: <NodeListOf<HTMLElement>>context.querySelectorAll('.chips:not(.no-autoinit)'),
-      Collapsible: <NodeListOf<HTMLElement>>context.querySelectorAll('.collapsible:not(.no-autoinit)'),
-      Datepicker: <NodeListOf<HTMLElement>>context.querySelectorAll('.datepicker:not(.no-autoinit)'),
-      Dropdown: <NodeListOf<HTMLElement>>context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
-      Materialbox: <NodeListOf<HTMLElement>>context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
-      Modal: <NodeListOf<HTMLElement>>context.querySelectorAll('.modal:not(.no-autoinit)'),
-      Parallax: <NodeListOf<HTMLElement>>context.querySelectorAll('.parallax:not(.no-autoinit)'),
-      Pushpin: <NodeListOf<HTMLElement>>context.querySelectorAll('.pushpin:not(.no-autoinit)'),
-      ScrollSpy: <NodeListOf<HTMLElement>>context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
-      FormSelect: <NodeListOf<HTMLElement>>context.querySelectorAll('select:not(.no-autoinit)'),
-      Sidenav: <NodeListOf<HTMLElement>>context.querySelectorAll('.sidenav:not(.no-autoinit)'),
-      Tabs: <NodeListOf<HTMLElement>>context.querySelectorAll('.tabs:not(.no-autoinit)'),
-      TapTarget: <NodeListOf<HTMLElement>>context.querySelectorAll('.tap-target:not(.no-autoinit)'),
-      Timepicker: <NodeListOf<HTMLElement>>context.querySelectorAll('.timepicker:not(.no-autoinit)'),
-      Tooltip: <NodeListOf<HTMLElement>>context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
-      FloatingActionButton: <NodeListOf<HTMLElement>>context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
+      Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+      Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
+      Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
+      Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
+      Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
+      Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+      Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+      Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
+      Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
+      Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
+      ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+      FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+      Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
+      Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
+      TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
+      Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
+      Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+      FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
     };
     M.Autocomplete.init(registry.Autocomplete, {});
     M.Carousel.init(registry.Carousel, {});
@@ -111,6 +111,4 @@ export class M {
     M.Tooltip.init(registry.Tooltip, {});
     M.FloatingActionButton.init(registry.FloatingActionButton, {});
   }
-}
-
-export default M;
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+export * from './global';
+export { Autocomplete } from './autocomplete';
+export { FloatingActionButton } from './buttons';
+export { Cards } from './cards';
+export { Carousel } from './carousel';
+export { CharacterCounter } from './characterCounter';
+export { Chips } from './chips';
+export { Collapsible } from './collapsible';
+export { Datepicker } from './datepicker';
+export { Dropdown } from './dropdown';
+export { Forms } from './forms';
+export { Materialbox } from './materialbox';
+export { Modal } from './modal';
+export { Parallax } from './parallax';
+export { Pushpin } from './pushpin';
+export { ScrollSpy } from './scrollspy';
+export { FormSelect } from './select';
+export { Sidenav } from './sidenav';
+export { Slider } from './slider';
+export { Tabs } from './tabs';
+export { TapTarget } from './tapTarget';
+export { Timepicker } from './timepicker';
+export { Toast } from './toasts';
+export { Tooltip } from './tooltip';
+export { Waves } from './waves';
+export { Range } from './range';

package/src/select.ts

@@ -160,7 +160,7 @@ export class FormSelect extends Component<FormSelectOptions> {
         previousSelectedValues,
         actualSelectedValues
       );
-      if (selectionHasChanged) this.el.dispatchEvent(new Event('change')); // trigger('change');
+      if (selectionHasChanged) this.el.dispatchEvent(new Event('change',{bubbles:true, cancelable:true, composed:true})); // trigger('change');
     }
     if (!this.isMultiple) this.dropdown.close();
   }

package/src/timepicker.ts

@@ -792,7 +792,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     this.el.value = value;
     // Trigger change event
     if (value !== last) {
-      this.el.dispatchEvent(new Event('change'));
+      this.el.dispatchEvent(new Event('change',{bubbles:true, cancelable:true, composed:true}));
     }
     this.close();
     this.el.focus();