@appartmint/mint 1.2.11 → 1.3.0

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

@@ -1,262 +0,0 @@
-/// _vars.scss - Global variables
-/// @author App Art Mint LLC
-///
-/// @group Vars
-@charset 'utf-8';
-
-/// Global Colors
-$bitcoin: #FF9900;
-$ethereum: #3C3C3D;
-$venmo: #008CFF;
-$facebook: #3b5998;
-$twitter: #1da1f2;
-$youtube: #F00;
-$apple: #DDD;
-$apple-music: #fc3c44;
-$spotify: #84bd00;
-$soundcloud: #f26f23;
-$bandcamp: #629aa9;
-$amazon-0: #F90;
-$amazon-1: #146eb4;
-$napster-0: #2ca6de;
-$napster-1: #fdb813;
-$google-play-0: #f55a34;
-$google-play-1: #ffd119;
-$google-play-2: #ff8c00;
-$instagram-0: #8a3ab9;
-$instagram-1: #4c68d7;
-$instagram-2: #cd486b;
-$instagram-3: #fbad50;
-$instagram-4: #fccc63;
-$instagram-5: #bc2a8d;
-$instagram-6: #e95950;
-
-/// Application Colors
-$black: #000 !default;
-$white: #fff !default;
-$grey: #888 !default;
-$trans-light: rgba(255, 255, 255, 0) !default;
-$trans-dark: rgba(0, 0, 0, 0) !default;
-
-$brand: #bada55 !default;
-$accent: #483d8b !default;
-$success: #208a20 !default;
-$danger: #ff4d4d !default;
-$warning: #ffaa22 !default;
-$info: $brand !default;
-
-$fore: lighten($black, 10%) !default;
-$back: darken($white, 10%) !default;
-
-/// Fonts
-$font-primary: sans-serif !default;
-$font-secondary: serif !default;
-$font-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$font-secondary-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$font-height: 1.25 !default;
-
-/// Font Sizes
-$font-size-tiny: (
-    h1: 15vw,
-    h2: 12vw,
-    h3: 10vw,
-    h4: 8vw,
-    h5: 7vw,
-    h6: 6vw,
-    p: 1rem,
-) !default;
-$font-size-mobile: (
-    h1: 2.5rem,
-    h2: 2rem,
-    h3: 1.75rem,
-    h4: 1.5rem,
-    h5: 1.25rem,
-    h6: 1.125rem,
-    p: 1rem,
-) !default;
-$font-size-desktop: (
-    h1: 3rem,
-    h2: 2.5rem,
-    h3: 2rem,
-    h4: 1.75rem,
-    h5: 1.5rem,
-    h6: 1.25rem,
-    p: 1.125rem,
-) !default;
-
-/// Structure
-$grid-gap: 2rem !default;
-
-/// Outline width
-$border-width: 0.125rem !default;
-$border-radius: 1rem !default;
-
-/// Root
-$root-bg-image: null !default;
-$root-bg-filter: null !default;
-$root-bg-size: null !default;
-$root-bg-position: null !default;
-
-/// Header
-$header-height: 4rem !default;
-$header-break: sm !default;
-$header-link-border-radius: $border-radius !default;
-
-/// Footer
-$footer-back: back !default;
-$footer-heel-back: brand-6 !default;
-$footer-shadow: null !default;
-
-/// Default Shadows
-$shadow-color: glow-2 !default;
-$shadow-size: 0 0 2rem -0.5rem !default;
-
-/// Images
-$image-shadow-size: 0.5rem !default;
-
-/// Buttons
-$link-color: brand-4 !default;
-$link-color-hover: accent-2 !default;
-
-$menu-bar-height: 0.4rem !default;
-$menu-bar-width: $menu-bar-height * 8 !default;
-$menu-btn-height: $menu-bar-height * 8 !default;
-$menu-btn-padding: $menu-bar-height * 1.5 !default;
-$menu-bar-color: fore !default;
-$menu-btn-color: shadow-6 !default;
-$menu-btn-shadow-color: $shadow-color !default;
-$menu-btn-shadow-size: $shadow-size !default;
-
-$btn-radius: $border-radius !default;
-$btn-fore: fore !default;
-$btn-fore-alt: $btn-fore !default;
-$btn-fore-hover: back !default;
-$btn-fore-alt-hover: $btn-fore-hover !default;
-$btn-back-alt: trans !default;
-$btn-back-alt-hover: accent-2 !default;
-
-$btn-padding-v: 0.5rem !default;
-$btn-padding-h: 1rem !default;
-$btn-padding-adjust: 0.75rem !default;
-
-$pill-radius: $border-radius !default;
-
-/// Cards
-$card-bg-color: back !default;
-$card-padding: 1.5rem !default;
-$card-radius: $border-radius !default;
-$card-shadow-color: $shadow-color !default;
-$card-shadow-size: $shadow-size !default;
-$card-logo-size: 4rem !default;
-
-/// Texture
-$texture-padding: 1rem !default;
-
-$texture-bg: null !default;
-$texture-bg-size: cover !default;
-$texture-bg-position: top !default;
-$texture-blend: null !default;
-$texture-filter: null !default;
-$texture-opacity: 1 !default;
-
-$texture-alt-bg: null !default;
-$texture-alt-num: 0 !default;
-$texture-alt-opacity: 1 !default;
-$texture-alt-bg-size: cover !default;
-$texture-alt-bg-position: center !default;
-$texture-alt-mask: null !default;
-$texture-alt-blend: null !default;
-
-$texture-border-width: 1.25rem !default;
-$texture-border-type: solid !default;
-$texture-border-color: null !default;
-$texture-border-image: null !default;
-$texture-border-slice: 42 42 !default;
-$texture-border-repeat: round !default;
-
-/// Backgrounds
-$back-bg-blur: 0.15vw !default;
-
-/// Material
-$mat-table-bg: back !default;
-$mat-table-fore: fore !default;
-$mat-select-bg: brand-4 !default;
-
-/// Amplify
-$amp-font-primary: fore !default;
-$amp-background-error: glow-0 !default;
-$amp-font-warning: warning !default;
-$amp-font-success: success !default;
-$amp-font-info: info !default;
-$amp-border-width: $border-width !default;
-
-
-/// Themes
-$theme-default: light !default;
-
-/// Default Theme (light)
-/// Buttons
-$btn-back-default: brand-2;
-$btn-back: $btn-back-default !default;
-
-$btn-border-default: brand-4;
-$btn-border: $btn-border-default !default;
-
-/// Header
-$header-back-default: brand-2;
-$header-back: $header-back-default !default;
-
-$header-fore-default: fore;
-$header-fore: $header-fore-default !default;
-
-$header-link-back-hover-default: shadow-5;
-$header-link-back-hover: $header-link-back-hover-default !default;
-
-$header-link-fore-default: fore;
-$header-link-fore: $header-link-fore-default !default;
-
-$header-link-fore-hover-default: back;
-$header-link-fore-hover: $header-link-fore-hover-default !default;
-
-/// Footer
-$footer-heel-fore-default: back;
-$footer-heel-fore: $footer-heel-fore-default !default;
-
-/// Amplify
-$amp-border-primary-default: brand-5;
-$amp-border-primary: $amp-border-primary-default !default;
-$amp-border-focus-default: brand-4;
-$amp-border-focus: $amp-border-focus-default !default;
-$amp-font-hover-default: brand-3;
-$amp-font-hover: $amp-font-hover-default !default;
-$amp-font-interactive-default: brand-5;
-$amp-font-interactive: $amp-font-interactive-default !default;
-$amp-font-secondary-default: brand-6;
-$amp-font-secondary: $amp-font-secondary-default !default;
-$amp-font-error-default: danger-5 !default;
-$amp-font-error: $amp-font-error-default !default;
-
-
-/// Dark Theme
-@if ($theme-default == dark) {
-
-    /// Buttons
-    $btn-back: if($btn-back != $btn-back-default, $btn-back, brand-5);
-    $btn-border: if($btn-border != $btn-border-default, $btn-border, brand-2);
-
-    /// Header
-    $header-back: if($header-back != $header-back-default, $header-back, brand-4);
-    $header-fore: if($header-fore != $header-fore-default, $header-fore, back);
-    $header-link-back-hover: if($header-link-back-hover != $header-link-back-hover-default, $header-link-back-hover, glow-5);
-
-    /// Footer
-    $footer-heel-fore: if($footer-heel-fore != $footer-heel-fore-default, $footer-heel-fore, fore);
-
-	/// Amplify
-	$amp-border-primary: if($amp-border-primary != $amp-border-primary-default, $amp-border-primary, brand-1);
-	$amp-border-focus: if($amp-border-focus != $amp-border-focus-default, $amp-border-focus, brand-3);
-	$amp-font-hover: if($amp-font-hover != $amp-font-hover-default, $amp-font-hover, brand-0);
-	$amp-font-interactive: if($amp-font-interactive != $amp-font-interactive-default, $amp-font-interactive, brand-1);
-	$amp-font-secondary: if($amp-font-secondary != $amp-font-secondary-default, $amp-font-secondary, brand-0);
-	$amp-font-error: if($amp-font-error != $amp-font-error-default, $amp-font-error, danger-4);
-}

package/src/scss/mint.scss

@@ -1,7 +0,0 @@
-/// mint.scss - Front-end library of App Art Mint LLC
-/// @author App Art Mint LLC
-/// 
-/// @group Mint
-
-/// Forwards
-@use './imports';

package/src/scss/noscript.scss

@@ -1,14 +0,0 @@
-/// noscript.scss - Styles for when JavaScript is disabled
-/// @author App Art Mint LLC
-/// 
-/// @group Main
-@charset 'utf-8';
-
-/// Imports
-@use './imports/util' as *;
-
-#{id(header)} {
-    #{id(wrapper)} {
-        position: unset !important;
-    }
-}

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

@@ -1,408 +0,0 @@
-/**
- * Imports
- */
-import { EMintSide } from '../enums';
-import {
-	MintDisplay,
-	MintEvent,
-	MintSelectors,
-	MintSettings,
-	MintWindow
-} from '../util';
-
-
-/**
- * Main header functionality
- * @public
- */
-export class MintHeader {
-    /**
-     * Navbar settings
-     */
-     settings: {[key: string]: any} = {
-        from: EMintSide.Top,
-        fixed: true
-    };
-
-    /**
-     * Frequently-referenced elements
-     */
-    el: {[key: string]: HTMLElement | null} = {};
-
-    /**
-     * Initializes and closes the menu
-     */
-    constructor (settings?: {[key: string]: any}) {
-        this.settings = {...this.settings, ...settings};
-
-        this.attachElements();
-        this.attachEvents();
-        this.addClasses();
-    }
-
-    /**
-     * Adds elements to {@link el | `this.el`}
-     */
-    attachElements () : void {
-        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.wrapper = document.getElementById('mint-wrapper');
-    }
-
-    /**
-     * Adds events to the dom
-     */
-    attachEvents () : void {
-        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),
-            lastFocusable = focusables?.[focusables?.length - 1];
-        lastFocusable?.addEventListener('keydown', MintEvent.throttleEvent(this.eWrapTab.bind(this)));
-        focusables?.forEach((focusable) => {
-            focusable.addEventListener('keydown', MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
-        });
-
-        let menuButtons = this.el.wrapper?.querySelectorAll(MintSelectors.controls());
-        menuButtons?.forEach((menuButton) => {
-            menuButton.addEventListener('click', MintEvent.throttleEvent(this.eToggleMenu.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));
-    }
-
-    /**
-     * Adds classes that inform the styles based on settings
-     */
-    addClasses () : void {
-        this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
-        this.el.header?.classList.add(`mint-${EMintSide[this.settings.from ?? 0].toLowerCase()}`);
-
-        if (this.settings.fixed) {
-            this.el.body?.classList.add('mint-fixed');
-        }
-        if (this.settings.tray) {
-            this.el.header?.classList.add('mint-tray');
-        }
-    }
-
-    /**
-     * Sets the state of the mobile menu
-     * @param open - `true` to open the menu or `false` to close it
-     */
-    setMobileMenu (open: boolean = false) : void {
-        let ariaExpanded: string = open ? 'true' : 'false',
-            ariaLabel: string = open ? 'close menu' : 'open menu';
-
-        this.el.mobileButton?.setAttribute('aria-expanded', ariaExpanded);
-        setTimeout(() => {
-            this.el.mobileButton?.setAttribute('aria-label', ariaLabel);
-        }, MintSettings.delay.fast);
-
-        if (open) {
-            if (this.settings.fixed !== true) {
-                window.scroll({
-                    top: 0,
-                    left: 0,
-                    behavior: 'smooth'
-                });
-            }
-
-            setTimeout(() => {
-                if (this.el.html) {
-                    let isMobile = MintWindow.width() <= MintSettings.break.sm,
-                        overflow = 'auto';
-
-                    if (this.settings.tray) {
-                        if (isMobile) {
-                            overflow = 'hidden';
-                        }
-                    } else {
-                        overflow = 'hidden';
-                    }
-                    this.el.html.style.overflow = overflow;
-                }
-            }, this.settings.from === EMintSide.Left ? MintSettings.delay.default : MintSettings.delay.instant);
-            
-            if (this.el.wrapper) {
-                this.el.wrapper.style.display = 'flex';
-            }
-
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.add('mint-open');
-            });
-        } else {
-            if (this.el.html) {
-                this.el.html.style.overflow = 'auto';
-            }            
-            
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.remove('mint-open');
-            });
-
-            this.closeAllMenus();
-        }
-    }
-
-    /**
-     * Toggles the state of the mobile menu
-     */
-    toggleMobileMenu () : void {
-        this.setMobileMenu(this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
-    }
-
-    /**
-     * Sets the state of the provided button's menu
-     * @param button - Button element to set
-     * @param open - `true` to open the menu or `false` to close it
-     */
-    setMenu (button?: HTMLElement | null,
-             open: boolean = false) : void {
-        let ariaExpanded: string = open ? 'true' : 'false',
-            menu: HTMLElement | null = button?.nextElementSibling as HTMLElement | null;
-        if (button && menu) {
-            button.setAttribute('aria-expanded', ariaExpanded);
-            if (open) {
-                MintDisplay.show(menu);
-            } else {
-                MintDisplay.hide(menu);
-                this.closeSubMenus(button);
-            }
-        }
-    }
-
-    /**
-     * Toggles the state of the provided button's menu
-     * @param button - Button element to toggle
-     */
-    toggleMenu (button?: HTMLElement | null) : void {
-        this.setMenu(button, button?.getAttribute('aria-expanded')?.toLowerCase() !== 'true');
-    }
-
-    /**
-     * Closes all submenus of the provided button's menu
-     * @param button - Button element of the parent menu
-     */
-    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.forEach((child: HTMLElement) => {
-            // setMenu calls this function, so ignore subsub menus
-            if (child.parentElement?.parentElement === menu) {
-                this.setMenu(child);
-            }
-        });
-    }
-
-    /**
-     * Closes all sibling menus of the provided button's menu
-     * @param button - Button element of the sibling menus
-     */
-    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.forEach((child: HTMLElement) => {
-            if (child !== button) {
-                this.setMenu(child);
-            }
-        });
-    }
-
-    /**
-     * Closes all submenus of the n4vbar
-     */
-    closeAllMenus () : void {
-        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(MintSelectors.subMenuButtons);
-        menuButtons?.forEach((menuButton: HTMLElement) => {
-            this.setMenu(menuButton);
-        });
-    }
-
-    /**
-     * Opens the menu closest to the document's focus
-     */
-    openClosestMenu () : void {
-        let activeButton: HTMLElement | null = document.activeElement as HTMLElement | null,
-            activeMenu: HTMLElement | null = activeButton?.nextElementSibling as HTMLElement | null,
-            showing: boolean = activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        if (activeButton?.getAttribute('aria-controls') === 'mint-wrapper') {
-            activeMenu = this.el.wrapper;
-        }
-
-        if (activeButton?.getAttribute('aria-controls') && activeMenu && !showing) {
-            activeButton.click();
-            let firstFocusable: HTMLElement | null = activeMenu.querySelector(MintSelectors.focusable);
-            firstFocusable?.focus();
-        }
-    }
-
-    /**
-     * Closes the menu closest to the document's focus
-     */
-    closeClosestMenu () : void {
-        let activeElement: HTMLElement | null = document.activeElement 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;
-        }
-
-        if (activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
-            activeButton?.click();
-            activeButton?.focus();
-        }
-    }
-
-    /**
-     * Toggles the menu closest to the document's focus
-     */
-    toggleClosestMenu () : void {
-        if (document.activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
-            this.closeClosestMenu();
-        } else {
-            this.openClosestMenu();
-        }
-    }
-
-    /**
-     * Closes the mobile menu when the window resizes
-     */
-    eHandleResize () : void {
-        let isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true',
-            isMobile = MintWindow.width() <= MintSettings.break.sm,
-            overflow = 'auto';
-        
-        if (isOpen) {
-            if (this.settings.tray) {
-                if (isMobile) {
-                    overflow = 'hidden';
-                }
-            } else {
-                overflow = 'hidden';
-            }
-        }
-
-        if (this.el.html) {
-            this.el.html.style.overflow = overflow;
-        }
-    }
-
-    /**
-     * Closes all submenus when the page is scrolled
-     */
-    eHandleScroll () : void {
-        this.closeAllMenus();
-    }
-
-    /**
-     * Sends the focus to the menu button after tabbing past the last menu item
-     * @param e - Keyboard event
-     */
-    eWrapTab (e: KeyboardEvent) : void {
-        if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
-            this.el.mobileButton?.focus();
-            if (document.activeElement === this.el.mobileButton) {
-                e.preventDefault();
-            }
-        }
-    }
-
-    /**
-     * Handles keypresses on n4vbar buttons
-     * @param e - Keyboard event
-     */
-    eHandleButtonKeypress (e: KeyboardEvent) : void {
-        let target = e.target as HTMLElement | null,
-            subMenu = target?.closest('li');
-        switch (e.key.toLowerCase()) {
-            case 'escape':
-                if (subMenu?.classList.contains('mint-open')) {
-                    this.setMenu(subMenu);
-                } else {
-                    this.setMobileMenu();
-                    this.el.menuButton?.focus();
-                }
-                break;
-            case 'arrowleft':
-                this.closeClosestMenu();
-                break;
-            case 'arrowright':
-                this.openClosestMenu();
-                break;
-            case 'enter':
-            case 'space':
-                target?.click();
-                break;
-        }
-    }
-
-    /**
-     * Handles keypresses on n4vbar links
-     * @param e - Keyboard event
-     */
-    eHandleLinkKeypress (e: KeyboardEvent) : void {
-        let target = e.target as HTMLElement | null;
-        switch (e.key.toLowerCase()) {
-            case 'escape':
-            case 'arrowleft':
-                this.closeClosestMenu();
-                break;
-            case 'arrowright':
-                this.openClosestMenu();
-                break;
-            case 'enter':
-            case 'space':
-                target?.click();
-                break;
-        }
-    }
-
-    /**
-     * Handles keypresses on the n4vbar
-     * @param e - Keyboard event
-     */
-    eHandleKeypress (e: KeyboardEvent) : void {
-        if (e.key.toLowerCase() !== 'tab') {
-            e.preventDefault();
-        }
-        const target = e.target as HTMLElement | null;
-        switch (target?.tagName.toLowerCase()) {
-            case 'a':
-                this.eHandleLinkKeypress(e);
-                break;
-            case 'button':
-                this.eHandleButtonKeypress(e);
-                break;
-        }
-    }
-
-    /**
-     * Toggles the mobile menu
-     */
-    eToggleMobileMenu () : void {
-        this.toggleMobileMenu();
-    }
-
-    /**
-     * Toggles the clicked submenu
-     * @param e - Mouse event
-     */
-    eToggleMenu (e: MouseEvent) : void {
-        let target = e.target as HTMLElement | null;
-        this.closeSiblingMenus(target);
-        this.toggleMenu(target);
-    }
-
-    /**
-     * Runs after the mobile menu transitions
-     */
-    eTransitionEnd () : void {
-        if (this.el.wrapper?.classList.contains('mint-open') === false ) {
-            this.el.wrapper.style.display = 'none';
-        }
-    };
-};
-export default MintHeader;

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

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

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

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