@materializecss/materialize 2.0.2-alpha → 2.0.3-beta

package/sass/components/typography.module.scss

@@ -0,0 +1,150 @@
+.display-large{
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--md-sys-typescale-display-large-height);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+}
+.display-medium{
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--md-sys-typescale-display-medium-height);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+}
+.display-small{
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--md-sys-typescale-display-small-height);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+}
+.headline-large{
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--md-sys-typescale-headline-large-height);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+}
+.headline-medium{
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--md-sys-typescale-headline-medium-height);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+}
+.headline-small{
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--md-sys-typescale-headline-small-height);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+}
+.body-large{
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--md-sys-typescale-body-large-height);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+}
+.body-medium{
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+.body-small{
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--md-sys-typescale-body-small-height);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+}
+.label-large{
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+.label-medium{
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--md-sys-typescale-label-medium-height);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+}
+.label-small{
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--md-sys-typescale-label-small-height);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+}
+.title-large{
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--md-sys-typescale-title-large-height);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+}
+.title-medium{
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--md-sys-typescale-title-medium-height);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+}
+.title-small{
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+}

package/sass/materialize.scss

@@ -1,4 +1,11 @@
 @charset "UTF-8";
+@import "components/tokens.module";
+@import "components/colors.module";
+@import "components/typography.module";
+@import "components/theme.light.module";
+@import "components/theme.dark.module";
+@import "components/_theme_variables";
+
 // Color
 @import "components/color-variables";
 @import "components/color-classes";
@@ -35,4 +42,3 @@
 @import "components/pulse";
 @import "components/datepicker";
 @import "components/timepicker";
-@import "components/_theme_variables";

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

@@ -134,7 +134,7 @@ export interface DatepickerOptions extends BaseOptions {
    * @default null
    */
   onDraw: (() => void) | null;
-  
+
   /** Field used for internal calculations DO NOT CHANGE IT */
   minYear?: any;
   /** Field used for internal calculations DO NOT CHANGE IT */
@@ -261,7 +261,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>) {
     super(el, options, Datepicker);
     (this.el as any).M_Datepicker = this;
-    
+
     this.options = {
       ...Datepicker.defaults,
       ...options
@@ -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() {
@@ -847,8 +847,8 @@ export class Datepicker extends Component<DatepickerOptions> {
     });
 
     // Add change handlers for select
-    yearSelect.addEventListener('change', () => this._handleYearChange);
-    monthSelect.addEventListener('change', () => this._handleMonthChange);
+    yearSelect.addEventListener('change', this._handleYearChange);
+    monthSelect.addEventListener('change', this._handleMonthChange);
 
     if (typeof this.options.onDraw === 'function') {
       this.options.onDraw.call(this);

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-beta';
 
   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();

package/src/tooltip.ts

@@ -4,6 +4,8 @@ import { Utils } from "./utils";
 import { Bounding } from "./bounding";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
 
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
 export interface TooltipOptions extends BaseOptions {
   /**
    * Delay time before tooltip disappears.
@@ -15,6 +17,11 @@ export interface TooltipOptions extends BaseOptions {
    * @default 0
    */
   enterDelay: number;
+  /**
+   * Element Id for the tooltip.
+   * @default ""
+   */
+  tooltipId?: string;
   /**
    * Text string for the tooltip.
    * @default ""
@@ -45,7 +52,7 @@ export interface TooltipOptions extends BaseOptions {
    * Set the direction of the tooltip.
    * @default 'bottom'
    */
-  position: 'top' | 'right' | 'bottom' | 'left';
+  position: TooltipPosition;
   /**
    * Amount in px that the tooltip moves during its transition.
    * @default 10
@@ -60,7 +67,7 @@ const _defaults: TooltipOptions = {
   margin: 5,
   inDuration: 250,
   outDuration: 200,
-  position: 'bottom',
+  position: 'bottom' as TooltipPosition,
   transitionMovement: 10,
   opacity: 1
 };
@@ -90,6 +97,7 @@ export class Tooltip extends Component<TooltipOptions> {
 
     this.options = {
       ...Tooltip.defaults,
+      ...this._getAttributeOptions(),
       ...options
     };
     
@@ -139,7 +147,12 @@ export class Tooltip extends Component<TooltipOptions> {
     this.tooltipEl = document.createElement('div');
     this.tooltipEl.classList.add('material-tooltip');
 
-    const tooltipContentEl = document.createElement('div');
+    const tooltipContentEl = this.options.tooltipId 
+      ? document.getElementById(this.options.tooltipId)
+      : document.createElement('div');
+    this.tooltipEl.append( tooltipContentEl);
+    tooltipContentEl.style.display = ""; 
+    
     tooltipContentEl.classList.add('tooltip-content');
     this._setTooltipContent(tooltipContentEl);
     this.tooltipEl.appendChild(tooltipContentEl);
@@ -147,7 +160,9 @@ export class Tooltip extends Component<TooltipOptions> {
   }
 
   _setTooltipContent(tooltipContentEl: HTMLElement) {
-    tooltipContentEl.innerText = this.options.text;
+    if (this.options.tooltipId) 
+      return;
+    tooltipContentEl.innerText = this.options.text;        
   }
 
   _updateTooltipContent() {
@@ -331,16 +346,21 @@ export class Tooltip extends Component<TooltipOptions> {
     this.close();
   }
 
-  _getAttributeOptions() {
-    const attributeOptions = {};
+  _getAttributeOptions(): Partial<TooltipOptions> {    
+    let attributeOptions: Partial<TooltipOptions> = { };
     const tooltipTextOption = this.el.getAttribute('data-tooltip');
+    const tooltipId = this.el.getAttribute('data-tooltip-id');
     const positionOption = this.el.getAttribute('data-position');
     if (tooltipTextOption) {
-      (attributeOptions as any).text = tooltipTextOption;
+      attributeOptions.text = tooltipTextOption;
     }
     if (positionOption) {
-      (attributeOptions as any).position = positionOption;
+      attributeOptions.position = positionOption as TooltipPosition;
+    }
+    if (tooltipId) {
+      attributeOptions.tooltipId = tooltipId;
     }
+
     return attributeOptions;
   }
 }