@appartmint/mint 0.15.9 → 1.0.0

package/src/scss/imports/components/_header.scss

@@ -167,7 +167,11 @@
 					&+ul {
 						display: flex !important;
 						height: auto !important;
-						margin-bottom: 1rem !important;
+						margin-bottom: 3rem !important;
+
+						&>li:first-child {
+							font-size: 1.5em;
+						}
 					}
 				}
 			}
@@ -181,7 +185,11 @@
 					&+ul {
 						display: flex !important;
 						height: auto !important;
-						margin-bottom: 1rem;
+						margin-bottom: 3rem;
+
+						&>li:first-child {
+							font-size: 1.5em;
+						}
 					}
 				}
 			}
@@ -213,16 +221,6 @@
 				li {
 					width: 100%;
 				}
-
-				#{$has-controls} {
-					&+ul {
-						margin-bottom: 3rem !important;
-
-						&>li:first-child {
-							font-size: 1.5em;
-						}
-					}
-				}
 			}
 		}
 	}

package/src/scss/imports/global/_global.scss

@@ -75,13 +75,21 @@ main {
 	overflow: hidden;
 	z-index: 1000;
 
-
 	&>router-outlet {
 		flex-grow: 0;
 		
 		&+* {
-			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
 			flex-grow: 1;
+			width: 100%;
+
+			&+:not(mint-footer) {
+				height: 0;
+				overflow: hidden;
+			}
 		}
 	}
 }

package/src/scss/imports/global/_texture.scss

@@ -30,6 +30,9 @@
         @if ($texture-blend) {
             mix-blend-mode: $texture-blend;
         }
+        @if ($texture-filter) {
+            filter: $texture-filter;
+        }
     }
 
     &::after {

package/src/scss/imports/util/_vars.scss

@@ -152,8 +152,9 @@ $texture-padding: 1rem !default;
 
 $texture-bg: null !default;
 $texture-bg-size: cover !default;
-$texture-bg-position: center !default;
+$texture-bg-position: top !default;
 $texture-blend: null !default;
+$texture-filter: null !default;
 $texture-opacity: 1 !default;
 
 $texture-alt-bg: null !default;

package/src/ts/imports/components/header.ts

@@ -1,21 +1,26 @@
 /**
  * Imports
  */
-import { mintSide } from '../enum';
-import mintUtil from '../../util';
-import mintSelectors from '../util/selectors';
-import mintSettings from '../util/settings';
+import { EMintSide } from '../enums';
+import {
+	MintDisplay,
+	MintEvent,
+	MintSelectors,
+	MintSettings,
+	MintWindow
+} from '../util';
+
 
 /**
  * Main header functionality
  * @public
  */
-export class mintHeader {
+export class MintHeader {
     /**
      * Navbar settings
      */
      settings: {[key: string]: any} = {
-        from: mintSide.Top,
+        from: EMintSide.Top,
         fixed: true
     };
 
@@ -42,7 +47,7 @@ export class mintHeader {
         this.el.html = document.querySelector('html');
         this.el.body = document.querySelector('body');
         this.el.header = document.getElementById('mint-header');
-        this.el.mobileButton = this.el.header?.querySelector(mintSelectors.controls('mint-wrapper')) || null;
+        this.el.mobileButton = this.el.header?.querySelector(MintSelectors.controls('mint-wrapper')) || null;
         this.el.wrapper = document.getElementById('mint-wrapper');
     }
 
@@ -50,22 +55,22 @@ export class mintHeader {
      * Adds events to the dom
      */
     attachEvents () : void {
-        window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default));
-        window.addEventListener('scroll', mintUtil.throttleEvent(this.eHandleScroll.bind(this), mintSettings.delay.default, { trailing: false }));
+        window.addEventListener('resize', MintEvent.throttleEvent(this.eHandleResize.bind(this), MintSettings.delay.default));
+        window.addEventListener('scroll', MintEvent.throttleEvent(this.eHandleScroll.bind(this), MintSettings.delay.default, { trailing: false }));
 
-        let focusables = this.el.header?.querySelectorAll(mintSelectors.focusable),
+        let focusables = this.el.header?.querySelectorAll(MintSelectors.focusable),
             lastFocusable = focusables?.[focusables?.length - 1];
-        lastFocusable?.addEventListener('keydown', mintUtil.throttleEvent(this.eWrapTab.bind(this)));
+        lastFocusable?.addEventListener('keydown', MintEvent.throttleEvent(this.eWrapTab.bind(this)));
         focusables?.forEach((focusable) => {
-            focusable.addEventListener('keydown', mintUtil.throttleEvent(this.eHandleKeypress.bind(this)));
+            focusable.addEventListener('keydown', MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
         });
 
-        let menuButtons = this.el.wrapper?.querySelectorAll(mintSelectors.controls());
+        let menuButtons = this.el.wrapper?.querySelectorAll(MintSelectors.controls());
         menuButtons?.forEach((menuButton) => {
-            menuButton.addEventListener('click', mintUtil.throttleEvent(this.eToggleMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
+            menuButton.addEventListener('click', MintEvent.throttleEvent(this.eToggleMenu.bind(this), MintSettings.delay.slow, { trailing: false }));
         });
 
-        this.el.mobileButton?.addEventListener('click', mintUtil.throttleEvent(this.eToggleMobileMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
+        this.el.mobileButton?.addEventListener('click', MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), MintSettings.delay.slow, { trailing: false }));
         this.el.wrapper?.addEventListener('transitionend', this.eTransitionEnd.bind(this));
     }
 
@@ -74,7 +79,7 @@ export class mintHeader {
      */
     addClasses () : void {
         this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
-        this.el.header?.classList.add(`mint-${mintSide[this.settings.from ?? 0].toLowerCase()}`);
+        this.el.header?.classList.add(`mint-${EMintSide[this.settings.from ?? 0].toLowerCase()}`);
 
         if (this.settings.fixed) {
             this.el.body?.classList.add('mint-fixed');
@@ -95,7 +100,7 @@ export class mintHeader {
         this.el.mobileButton?.setAttribute('aria-expanded', ariaExpanded);
         setTimeout(() => {
             this.el.mobileButton?.setAttribute('aria-label', ariaLabel);
-        }, mintSettings.delay.fast);
+        }, MintSettings.delay.fast);
 
         if (open) {
             if (this.settings.fixed !== true) {
@@ -108,7 +113,7 @@ export class mintHeader {
 
             setTimeout(() => {
                 if (this.el.html) {
-                    let isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+                    let isMobile = MintWindow.width() <= MintSettings.break.sm,
                         overflow = 'auto';
 
                     if (this.settings.tray) {
@@ -120,7 +125,7 @@ export class mintHeader {
                     }
                     this.el.html.style.overflow = overflow;
                 }
-            }, this.settings.from === mintSide.Left ? mintSettings.delay.default : mintSettings.delay.instant);
+            }, this.settings.from === EMintSide.Left ? MintSettings.delay.default : MintSettings.delay.instant);
             
             if (this.el.wrapper) {
                 this.el.wrapper.style.display = 'flex';
@@ -161,9 +166,9 @@ export class mintHeader {
         if (button && menu) {
             button.setAttribute('aria-expanded', ariaExpanded);
             if (open) {
-                mintUtil.show(menu);
+                MintDisplay.show(menu);
             } else {
-                mintUtil.hide(menu);
+                MintDisplay.hide(menu);
                 this.closeSubMenus(button);
             }
         }
@@ -183,7 +188,7 @@ export class mintHeader {
      */
     closeSubMenus (button?: HTMLElement | null) : void {
         let menu: HTMLElement | null | undefined = button?.nextElementSibling as HTMLElement,
-            subMenus: NodeListOf<HTMLElement> = menu?.querySelectorAll(mintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
+            subMenus: NodeListOf<HTMLElement> = menu?.querySelectorAll(MintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
         subMenus.forEach((child: HTMLElement) => {
             // setMenu calls this function, so ignore subsub menus
             if (child.parentElement?.parentElement === menu) {
@@ -198,7 +203,7 @@ export class mintHeader {
      */
     closeSiblingMenus (button?: HTMLElement | null) : void {
         let menu: HTMLElement | null | undefined = button?.parentElement as HTMLElement,
-            siblingMenus: NodeListOf<HTMLElement> = menu?.parentElement?.querySelectorAll(mintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
+            siblingMenus: NodeListOf<HTMLElement> = menu?.parentElement?.querySelectorAll(MintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
         siblingMenus.forEach((child: HTMLElement) => {
             if (child !== button) {
                 this.setMenu(child);
@@ -210,7 +215,7 @@ export class mintHeader {
      * Closes all submenus of the n4vbar
      */
     closeAllMenus () : void {
-        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(mintSelectors.subMenuButtons);
+        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(MintSelectors.subMenuButtons);
         menuButtons?.forEach((menuButton: HTMLElement) => {
             this.setMenu(menuButton);
         });
@@ -229,7 +234,7 @@ export class mintHeader {
 
         if (activeButton?.getAttribute('aria-controls') && activeMenu && !showing) {
             activeButton.click();
-            let firstFocusable: HTMLElement | null = activeMenu.querySelector(mintSelectors.focusable);
+            let firstFocusable: HTMLElement | null = activeMenu.querySelector(MintSelectors.focusable);
             firstFocusable?.focus();
         }
     }
@@ -239,7 +244,7 @@ export class mintHeader {
      */
     closeClosestMenu () : void {
         let activeElement: HTMLElement | null = document.activeElement as HTMLElement | null,
-            activeMenu: HTMLElement | null = activeElement?.closest(mintSelectors.subMenu) as HTMLElement | null,
+            activeMenu: HTMLElement | null = activeElement?.closest(MintSelectors.subMenu) as HTMLElement | null,
             activeButton: HTMLElement | null = activeMenu?.previousElementSibling ? activeMenu.previousElementSibling as HTMLElement : this.el.mobileButton;
         if (activeElement?.getAttribute('aria-controls') && activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
             activeButton = activeElement;
@@ -267,7 +272,7 @@ export class mintHeader {
      */
     eHandleResize () : void {
         let isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true',
-            isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+            isMobile = MintWindow.width() <= MintSettings.break.sm,
             overflow = 'auto';
         
         if (isOpen) {
@@ -399,5 +404,5 @@ export class mintHeader {
             this.el.wrapper.style.display = 'none';
         }
     };
-}
-export default mintHeader;
+};
+export default MintHeader;

package/src/ts/imports/components/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Forward all exports from the components directory
+ */
+export * from './header';

package/src/ts/imports/enums/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Forward all exports from the enums directory
+ */
+export * from './side';

package/src/ts/imports/{enum.ts → enums/side.ts}

@@ -1,7 +1,7 @@
 /**
  * Side Enum
  */
- export enum mintSide {
+export enum EMintSide {
     Top,
     Right,
     Bottom,

package/src/ts/imports/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Forward all exports from the imports directory
+ */
+export * from './components';
+export * from './enums';
+export * from './models';
+export * from './util';

package/src/ts/imports/models/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Forward all exports from the models directory
+ */
+export * from './color';
+export * from './item';

package/src/ts/imports/models/item.ts

@@ -3,7 +3,7 @@
  * @note - this class must be convertable with JSON
  *       - only add strings, numbers, booleans, arrays, and objects
  */
-export class mintItem {
+export class MintItem {
 	/**
 	 * Item settings
 	 */
@@ -32,7 +32,7 @@ export class mintItem {
 	category?: string;
 	type?: string;
 	unit?: string;
-	logo?: mintItem;
+	logo?: MintItem;
 	icon?: string;
 	position?: string;
 	transform?: string;
@@ -59,8 +59,8 @@ export class mintItem {
 	 */
 	paragraphs?: string[] = [];
 	classes?: string[] = [];
-	items?: mintItem[] = [];
-	images?: mintItem[] = [];
-	buttons?: mintItem[] = [];
+	items?: MintItem[] = [];
+	images?: MintItem[] = [];
+	buttons?: MintItem[] = [];
 };
-export default mintItem;
+export default MintItem;

package/src/ts/imports/util/display.ts

@@ -1,7 +1,72 @@
+/**
+ * Imports
+ */
+import { EMintSide } from '../enums';
+import { MintSettings } from './settings';
+
 /**
  * Handles the display of elements
  */
-export abstract class mintDisplay {
+export abstract class MintDisplay {
+	/**
+     * Sets the element's height to its `innerHeight`, then to `auto` after a delay
+     * @param el - the element whose height will be set
+     * @param delay - the amount of time in milliseconds that the show animation will be active
+     * @param from - the side that the element is animating from
+     */
+    static show (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
+        if (el) {
+            el.style.display = '';
+            requestAnimationFrame(() => {
+                if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                    el.style.height = `${el.scrollHeight}px`;
+                } else {
+                    el.style.width = `${el.scrollWidth}px`;
+                }
+                
+                setTimeout(() => {
+                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                        el.style.height = 'auto';
+                    } else {
+                        el.style.width = 'auto';
+                    }
+                }, delay);
+            });
+        }
+    }
 
+    /**
+     * Sets the element's height to 0
+     * @param el - the element whose height will be set
+     * @param delay - the amount of time in milliseconds that the show animation will be active
+     * @param from - the side that the element is animating from
+     */
+    static hide (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
+        if (el) {
+            let height = el.scrollHeight,
+                width = el.scrollWidth,
+                transition = el.style.transition;
+            el.style.transition = '';
+            requestAnimationFrame(() => {
+                if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                    el.style.height = `${height}px`;
+                } else {
+                    el.style.width = `${width}px`;
+                }
+                
+                el.style.transition = transition;
+                requestAnimationFrame(() => {
+                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                        el.style.height = '0';
+                    } else {
+                        el.style.width = '0';
+                    }
+                });
+            });
+            setTimeout(() => {
+                el.style.display = 'none';
+            }, delay);
+        }
+    }
 };
-export default mintDisplay;
+export default MintDisplay;

package/src/ts/imports/util/event.ts

@@ -1,7 +1,93 @@
+import MintSettings from "./settings";
+
 /**
  * Event helper functions
  */
-export abstract class mintEvent {
+export abstract class MintEvent {
+	/**
+     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+     * @param func - the function to debounce
+     * @param wait - the amount of time to wait before running the function
+     * @returns - the debounced function
+     */
+    static debounce (func: Function, wait: number = MintSettings.delay.default) : Function {
+        let timer: number;
+        return function (e: any) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(func, wait, e);
+        }
+    }
+
+    /**
+     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+     * @param func - the function to debounce
+     * @param wait - the amount of time to wait before running the function
+     * @returns - the debounced function as an EventListener
+     */
+    static debounceEvent (func: Function, wait: number = MintSettings.delay.default) : EventListener {
+        return MintEvent.debounce(func, wait) as EventListener;
+    }
+
+    /**
+     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+     * @param func - the function to throttle
+     * @param wait - the amount of time between function calls
+     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+     * @returns - the throttled function
+     */
+    static throttle (func: Function,
+                     wait: number = MintSettings.delay.default,
+                     options?: {[key: string]: boolean}) : Function {
+        let context: any, args: any, result: any,
+            timeout: number, previous: number = 0,
+            later: Function = function () {
+                previous = options?.leading === false ? 0 : new Date().getTime();
+                timeout = 0;
+                result = func.apply(context, args);
+                if (!timeout) {
+                    context = args = null;
+                }
+            },
+            throttled: Function = function (this: any): any {
+                let now: number = new Date().getTime();
+                if (!previous && options?.leading === false) {
+                    previous = now;
+                }
+                let remaining: number = wait - now + previous;
+                context = this;
+                args = arguments;
+                if (remaining <= 0 || remaining > wait) {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = 0;
+                    }
+                    previous = now;
+                    result = func.apply(context, args);
+                    if (!timeout) {
+                        context = args = null;
+                    }
+                } else if (!timeout && options?.trailing !== false) {
+                    timeout = window.setTimeout(later, remaining);
+                }
+                return result;
+            };
+
+        return throttled;
+    }
 
+    /**
+     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+     * @param func - the function to throttle
+     * @param wait - the amount of time between function calls
+     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+     * @returns - the throttled function as an EventListener
+     */
+    static throttleEvent (func: Function,
+                          wait: number = MintSettings.delay.default,
+                          options?: {[key: string]: boolean}) : EventListener {
+        return MintEvent.throttle(func, wait, options) as EventListener;
+    }
 };
-export default mintEvent;
+export default MintEvent;

package/src/ts/imports/util/icon.ts

@@ -6,7 +6,7 @@ import mintObject from "./object";
 /**
  * Icon helper functions
  */
-export abstract class mintIcon {
+export abstract class MintIcon {
     /**
      * Default icons
      */
@@ -64,4 +64,4 @@ export abstract class mintIcon {
         });
     }
 };
-export default mintIcon;
+export default MintIcon;

package/src/ts/imports/util/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Forward all exports from the util directory
+ */
+export * from './display';
+export * from './event';
+export * from './icon';
+export * from './list';
+export * from './math';
+export * from './object';
+export * from './scroll';
+export * from './selectors';
+export * from './settings';
+export * from './text';
+export * from './window';

package/src/ts/imports/util/list.ts

@@ -1,7 +1,7 @@
 /**
  * List functions for the util library
  */
-export abstract class mintList {
+export abstract class MintList {
 	/**
 	 * Returns a copy of the provided list with the items in random order
 	 * @param list - the list to shuffle
@@ -36,4 +36,4 @@ export abstract class mintList {
 		return list;
 	}
 };
-export default mintList;
+export default MintList;

package/src/ts/imports/util/math.ts

@@ -1,7 +1,7 @@
 /**
  * Math functions for the util library
  */
-export abstract class mintMath {
+export abstract class MintMath {
     /**
      * Get a random integer between min and max
      * @param max Maximum value to return
@@ -14,4 +14,4 @@ export abstract class mintMath {
         return Math.floor(Math.random() * (max - min) + min);
     }
 };
-export default mintMath;
+export default MintMath;

package/src/ts/imports/util/object.ts

@@ -1,7 +1,7 @@
 /**
  * Object functions for the util library
  */
-export abstract class mintObject {
+export abstract class MintObject {
     /**
      * Returns true if the provided objects have the same entries
      */
@@ -52,7 +52,7 @@ export abstract class mintObject {
         // If the children of the subset are subsets of the
         // respective children of the superset, it is a superset
         Object.keys(subset).forEach((key: string) => {
-            isSuperset = isSuperset && mintObject.isSuperset(superset[key], subset[key]);
+            isSuperset = isSuperset && MintObject.isSuperset(superset[key], subset[key]);
         });
         return isSuperset;
     }
@@ -198,4 +198,4 @@ export abstract class mintObject {
         newObjects?.forEach(newObject => original.push(newObject));
     }
 };
-export default mintObject;
+export default MintObject;

package/src/ts/imports/util/scroll.ts

@@ -1,7 +1,7 @@
 /**
  * Scroll functions
  */
-export abstract class mintScroll {
+export abstract class MintScroll {
 	/**
 	 * Scroll to the top of the page
 	 */
@@ -38,4 +38,4 @@ export abstract class mintScroll {
 		});
 	}
 };
-export default mintScroll;
+export default MintScroll;

package/src/ts/imports/util/selectors.ts

@@ -2,7 +2,7 @@
  * CSS-selector helpers
  * @public
  */
-export abstract class mintSelectors {
+export abstract class MintSelectors {
     /**
      * The library name that will be added as a prefix
      */
@@ -181,5 +181,5 @@ export abstract class mintSelectors {
         } while (current);
         return true;
     }
-}
-export default mintSelectors;
+};
+export default MintSelectors;

package/src/ts/imports/util/settings.ts

@@ -2,7 +2,7 @@
  * Settings management
  * @public
  */
-export abstract class mintSettings {
+export abstract class MintSettings {
     /**
      * Value added to all delay variables
      */
@@ -82,5 +82,4 @@ export abstract class mintSettings {
         };
     }
 };
-
-export default mintSettings;
+export default MintSettings;