@materializecss/materialize 2.0.1-alpha → 2.0.3-alpha

package/dist/src/utils.d.ts

@@ -0,0 +1,97 @@
+import { Edges } from './edges';
+import { Bounding } from './bounding';
+/**
+ * Class with utilitary functions for global usage.
+ */
+export declare class Utils {
+    /** Specifies wether tab is pressed or not. */
+    static tabPressed: boolean;
+    /** Specifies wether there is a key pressed. */
+    static keyDown: boolean;
+    /**
+     * Key maps.
+     */
+    static keys: {
+        TAB: string[];
+        ENTER: string[];
+        ESC: string[];
+        BACKSPACE: string[];
+        ARROW_UP: string[];
+        ARROW_DOWN: string[];
+        ARROW_LEFT: string[];
+        ARROW_RIGHT: string[];
+        DELETE: string[];
+    };
+    /**
+     * Detects when a key is pressed.
+     * @param e Event instance.
+     */
+    static docHandleKeydown(e: KeyboardEvent): void;
+    /**
+     * Detects when a key is released.
+     * @param e Event instance.
+     */
+    static docHandleKeyup(e: KeyboardEvent): void;
+    /**
+     * Detects when document is focused.
+     * @param e Event instance.
+     */
+    static docHandleFocus(e: FocusEvent): void;
+    /**
+     * Detects when document is not focused.
+     * @param e Event instance.
+     */
+    static docHandleBlur(e: FocusEvent): void;
+    /**
+     * Generates a unique string identifier.
+     */
+    static guid(): string;
+    /**
+     * Checks for exceeded edges
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges;
+    /**
+     * Checks if element can be aligned in multiple directions.
+     * @param el Element to be inspected.
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkPossibleAlignments(el: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): {
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+        spaceOnTop: number;
+        spaceOnRight: number;
+        spaceOnBottom: number;
+        spaceOnLeft: number;
+    };
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger: HTMLElement): string;
+    /**
+     * Retrieves document scroll postion from top.
+     */
+    static getDocumentScrollTop(): number;
+    /**
+     * Retrieves document scroll postion from left.
+     */
+    static getDocumentScrollLeft(): number;
+    /**
+     * Fires the given function after a certain ammount of time.
+     * @param func Function to be fired.
+     * @param wait Wait time.
+     * @param options Additional options.
+     */
+    static throttle(func: Function, wait: number, options?: Partial<{
+        leading: boolean;
+        trailing: boolean;
+    }>): () => any;
+}
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC;;GAEG;AACH,qBAAa,KAAK;IAChB,8CAA8C;IAC9C,MAAM,CAAC,UAAU,EAAE,OAAO,CAAS;IACnC,+CAA+C;IAC/C,MAAM,CAAC,OAAO,EAAE,OAAO,CAAS;IAEhC;;OAEG;IACH,MAAM,CAAC,IAAI;;;;;;;;;;MAUT;IAEF;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,aAAa;IAOxC;;;OAGG;IACH,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOtC;;;OAGG;IACH,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU;IAMnC;;;OAGG;IACH,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;IAIlC;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,MAAM;IASrB;;;;;OAKG;IACH,MAAM,CAAC,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK;IA+C9F;;;;;;OAMG;IACH,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM;aAEjG,OAAO;eACL,OAAO;gBACN,OAAO;cACT,OAAO;oBACD,MAAM;sBACJ,MAAM;uBACL,MAAM;qBACR,MAAM;;IA4DvB;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM;IASrD;;OAEG;IACH,MAAM,CAAC,oBAAoB,IAAI,MAAM;IAIrC;;OAEG;IACH,MAAM,CAAC,qBAAqB,IAAI,MAAM;IAItC;;;;;OAKG;WACW,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,OAAO,CAAC;QAAC,OAAO,EAAC,OAAO,CAAC;QAAA,QAAQ,EAAC,OAAO,CAAA;KAAC,CAAQ;CA6BjH"}

package/dist/src/waves.d.ts

@@ -0,0 +1,16 @@
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+type Position = {
+    x: number;
+    y: number;
+};
+export declare class Waves {
+    private static _offset;
+    static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void;
+    static Init(): void;
+}
+export {};
+//# sourceMappingURL=waves.d.ts.map

package/dist/src/waves.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waves.d.ts","sourceRoot":"","sources":["../../src/waves.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAA;AAED,KAAK,QAAQ,GAAG;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAA;AAED,qBAAa,KAAK;IAEhB,OAAO,CAAC,MAAM,CAAC,OAAO;WAWR,gBAAgB,CAAC,aAAa,EAAE,WAAW,EAAE,QAAQ,GAAE,QAAQ,GAAC,IAAW,EAAE,KAAK,GAAE,QAAQ,GAAC,IAAW,GAAG,IAAI;IAyB7H,MAAM,CAAC,IAAI;CAoBZ"}

package/package.json

@@ -3,10 +3,12 @@
   "description": "Builds Materialize distribution packages",
   "author": "Alvin Wang, Alan Chang",
   "homepage": "https://materializecss.github.io/materialize/",
-  "version": "2.0.1-alpha",
+  "version": "2.0.3-alpha",
   "main": "dist/js/materialize.js",
+  "module": "src/index.ts",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
+  "typings": "dist/src/index.d.ts",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,6 +39,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@types/node": "^20.5.2",
     "autoprefixer": "^7.1.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",

package/sass/components/_cards.scss

@@ -10,6 +10,7 @@
 }
 
 .card {
+  overflow: hidden;
   position: relative;
   //margin: $element-top-margin 0 $element-bottom-margin 0;
   background-color: $card-bg-color;
@@ -17,7 +18,6 @@
   border-radius: 12px;
   @extend .z-depth-1;
 
-
   .card-title {
     font-size: 24px;
     font-weight: 300;

package/sass/components/_collapsible.scss

@@ -43,47 +43,6 @@
   background-color: $collapsible-bg-color;
 }
 
-// Sidenav collapsible styling
-.sidenav,
-.sidenav.sidenav-fixed {
-
-  .collapsible {
-    border: none;
-    box-shadow: none;
-
-    li {
-      padding: 0;
-    }
-  }
-
-  > li:hover,
-  > li.active {
-    background-color: transparent;
-  }
-
-  .collapsible-header {
-    background-color: transparent;
-    border: none;
-    line-height: inherit;
-    height: inherit;
-    padding: 0 $sidenav-padding;
-
-    i {
-      line-height: inherit;
-    }
-  }
-
-  .collapsible-body {
-    border: 0;
-    background-color: $collapsible-bg-color;
-
-    li a {
-      padding: 0 (7.5px + $sidenav-padding) 0 (15px + $sidenav-padding);
-    }
-  }
-
-}
-
 // Popout Collapsible
 
 .collapsible.popout {

package/sass/components/_global.scss

@@ -210,7 +210,8 @@ video.responsive-video {
 
   i,
   [class^="mdi-"], [class*="mdi-"],
-  i.material-icons {
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp {
     display: block;
     float: left;
     font-size: 24px;
@@ -221,7 +222,7 @@ video.responsive-video {
     color: $font-on-primary-color-medium;
     vertical-align: top;
     display: inline-block;
-    font-family: 'Material Icons';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 25px;
@@ -395,6 +396,11 @@ ul.staggered-list li {
   }
 }
 
+.page-footer ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+
 // Tables
 table, th, td {
   border: none;
@@ -665,3 +671,48 @@ td, th {
 .no-padding {
   padding: 0 !important;
 }
+
+/**************************
+  Utility Spacing Classes
+**************************/
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+
+@each $property, $shortcut in $spacing-shortcuts{
+  @each $name, $value in $spacing-values{
+    // All direction spacing
+
+    .#{$shortcut}-#{$name}{
+      #{$property}: $value !important;
+    }
+
+    // (t, b, r, l) spacing
+    @each $direction, $suffix in $spacing-directions{
+      .#{$shortcut}#{$suffix}-#{$name}{
+        #{$property}-#{$direction}: $value !important 
+      }
+    }
+
+    // x spacing
+    @if $spacing-horizontal != null{
+       .#{$shortcut}#{$spacing-horizontal}-#{$name}{
+         #{$property}-left: $value !important;
+         #{$property}-right: $value !important;
+       }
+    }
+
+    // y spacing
+    @if $spacing-vertical != null{
+      .#{$shortcut}#{$spacing-vertical}-#{$name}{
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+        
+    }
+      
+  }
+} 

package/sass/components/_grid.scss

@@ -16,28 +16,9 @@
     width: 70%;
   }
 }
-/*
-.col .row {
-  margin-left: (-1 * $gutter-width * 0.5);
-  margin-right: (-1 * $gutter-width * 0.5);
-}
-*/
 
 .section {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  // No documented
-  /*
-  &.no-pad {
-    padding: 0;
-  }
-  &.no-pad-bot {
-    padding-bottom: 0;
-  }
-  &.no-pad-top {
-    padding-top: 0;
-  }
-  */
+  padding: 1rem 0;
 }
 
 // Mixins to eliminate code repetition
@@ -80,15 +61,15 @@
   .s11 { grid-column: auto / span 11; }
   .s12 { grid-column: auto / span 12; }
 
-  .offset-s1  { grid-column-start:  2; }
-  .offset-s2  { grid-column-start:  3; }
-  .offset-s3  { grid-column-start:  4; }
-  .offset-s4  { grid-column-start:  5; }
-  .offset-s5  { grid-column-start:  6; }
-  .offset-s6  { grid-column-start:  7; }
-  .offset-s7  { grid-column-start:  8; }
-  .offset-s8  { grid-column-start:  9; }
-  .offset-s9  { grid-column-start: 10; }
+  .offset-s1 { grid-column-start:  3; }
+  .offset-s2 { grid-column-start:  2; }
+  .offset-s3 { grid-column-start:  4; }
+  .offset-s4 { grid-column-start:  5; }
+  .offset-s5 { grid-column-start:  6; }
+  .offset-s6 { grid-column-start:  7; }
+  .offset-s7 { grid-column-start:  8; }
+  .offset-s8 { grid-column-start:  9; }
+  .offset-s9 { grid-column-start: 10; }
   .offset-s10 { grid-column-start: 11; }
   .offset-s11 { grid-column-start: 12; }
 
@@ -107,15 +88,15 @@
     .m11 { grid-column: auto / span 11; }
     .m12 { grid-column: auto / span 12; }
   
-    .offset-m1  { grid-column-start:  2; }
-    .offset-m2  { grid-column-start:  3; }
-    .offset-m3  { grid-column-start:  4; }
-    .offset-m4  { grid-column-start:  5; }
-    .offset-m5  { grid-column-start:  6; }
-    .offset-m6  { grid-column-start:  7; }
-    .offset-m7  { grid-column-start:  8; }
-    .offset-m8  { grid-column-start:  9; }
-    .offset-m9  { grid-column-start: 10; }
+    .offset-m1 { grid-column-start:  2; }
+    .offset-m2 { grid-column-start:  3; }
+    .offset-m3 { grid-column-start:  4; }
+    .offset-m4 { grid-column-start:  5; }
+    .offset-m5 { grid-column-start:  6; }
+    .offset-m6 { grid-column-start:  7; }
+    .offset-m7 { grid-column-start:  8; }
+    .offset-m8 { grid-column-start:  9; }
+    .offset-m9 { grid-column-start: 10; }
     .offset-m10 { grid-column-start: 11; }
     .offset-m11 { grid-column-start: 12; }
   }
@@ -163,15 +144,15 @@
     .xl11 { grid-column: auto / span 11; }
     .xl12 { grid-column: auto / span 12; }
   
-    .offset-xl1  { grid-column-start:  2; }
-    .offset-xl2  { grid-column-start:  3; }
-    .offset-xl3  { grid-column-start:  4; }
-    .offset-xl4  { grid-column-start:  5; }
-    .offset-xl5  { grid-column-start:  6; }
-    .offset-xl6  { grid-column-start:  7; }
-    .offset-xl7  { grid-column-start:  8; }
-    .offset-xl8  { grid-column-start:  9; }
-    .offset-xl9  { grid-column-start: 10; }
+    .offset-xl1 { grid-column-start:  2; }
+    .offset-xl2 { grid-column-start:  3; }
+    .offset-xl3 { grid-column-start:  4; }
+    .offset-xl4 { grid-column-start:  5; }
+    .offset-xl5 { grid-column-start:  6; }
+    .offset-xl6 { grid-column-start:  7; }
+    .offset-xl7 { grid-column-start:  8; }
+    .offset-xl8 { grid-column-start:  9; }
+    .offset-xl9 { grid-column-start: 10; }
     .offset-xl10 { grid-column-start: 11; }
     .offset-xl11 { grid-column-start: 12; }
   }

package/sass/components/_icons-material-design.scss

@@ -1,5 +1,6 @@
 /* This is needed for some mobile phones to display the Google Icon font properly */
-.material-icons {
+.material-icons, .material-symbols-outlined,
+.material-symbols-rounded, .material-symbols-sharp {
   text-rendering: optimizeLegibility;
   font-feature-settings: 'liga';
 }

package/sass/components/_navbar.scss

@@ -15,7 +15,7 @@ nav {
 
   color: $navbar-font-color;
   @extend .z-depth-1;
-  background-color: $primary-color;
+  background-color: $secondary-container-color;
 
   width: 100%;
   height: $navbar-height-mobile;
@@ -27,7 +27,8 @@ nav {
 
   i,
   [class^="mdi-"], [class*="mdi-"],
-  i.material-icons {
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp {
     display: block;
     font-size: 24px;
     height: $navbar-height-mobile;
@@ -97,7 +98,8 @@ nav {
 
     i,
     [class^="mdi-"], [class*="mdi-"],
-    i.material-icons {
+    i.material-icons, i.material-symbols-outlined,
+    i.material-symbols-rounded, i.material-symbols-sharp {
       float: left;
       margin-right: 15px;
     }
@@ -117,37 +119,38 @@ nav {
     list-style-type: none;
     margin: 0;
 
-    li {
+    & > li {
       transition: background-color .3s;
       float: left;
       padding: 0;
-    }
 
-    a {
-      transition: background-color .3s;
-      font-size: $navbar-font-size;
-      color: $navbar-font-color;
-      display: block;
-      padding: 0 15px;
-      cursor: pointer;
-
-      &.active {
-        background-color: $navbar-bg-color-focus;
-      }
+      & > a {
+        transition: background-color .3s;
+        font-size: $navbar-font-size;
+        color: $navbar-font-color;
+        display: block;
+        padding: 0 15px;
+        cursor: pointer;
 
-      &:hover:not(.active) {
-        background-color: $navbar-bg-color-hover;
-      }
+        &.active {
+          background-color: $navbar-bg-color-focus;
+        }
 
-      &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-        margin-top: -2px;
-        margin-left: 15px;
-        margin-right: 15px;
-        display: inline-block;
+        &:hover:not(.active) {
+          background-color: $navbar-bg-color-hover;
+        }
 
-        & > .material-icons {
-          height: inherit;
-          line-height: inherit;
+        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
+          margin-top: -2px;
+          margin-left: 15px;
+          margin-right: 15px;
+          display: inline-block;
+
+          & > .material-icons, & > .material-symbols-outlined,
+          & > .material-symbols-rounded, & > .material-symbols-sharp {
+            height: inherit;
+            line-height: inherit;
+          }
         }
       }
     }

package/sass/components/_pulse.scss

@@ -3,6 +3,7 @@
     content: '';
     display: block;
     position: absolute;
+    pointer-events: none;
     width: 100%;
     height: 100%;
     top: 0;