@appartmint/mint 1.2.12 → 1.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "1.2.12",
+  "version": "1.3.1",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [
@@ -19,10 +19,11 @@
   "bugs": {
     "url": "https://github.com/App-Art-Mint/npm-mint/issues"
   },
-  "main": "src/ts/index.ts",
+  "main": "dist/js/index.min.js",
+  "types": "dist/js/index.d.ts",
   "type": "module",
   "files": [
-    "src/**/*.{ts,scss}",
+    "src/**/*.scss",
     "dist/**/*.{css,js,d.ts,map}"
   ],
   "directories": {

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';

package/src/ts/imports/enums/side.ts

@@ -1,9 +0,0 @@
-/**
- * Side Enum
- */
-export enum EMintSide {
-    Top,
-    Right,
-    Bottom,
-    Left
-};

package/src/ts/imports/index.ts

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

package/src/ts/imports/models/color.ts

@@ -1,96 +0,0 @@
-/**
- * Color
- */
-export class mintColor {
-    protected static hexBase: number = 16;
-    protected static hexMax: string = 'FF';
-    public r: number;
-    public g: number;
-    public b: number;
-    public a: number;
-
-    constructor (args: {[key: string]: number | string}) {
-        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
-        if (typeof args.color === 'string') {
-            this.stringConstructor(args.color);
-        }
-    }
-
-    /**
-     * Constructor from a string argument
-     */
-    protected stringConstructor (str: string) : void {
-        if (str.startsWith('#')) {
-            this.hexConstructor(str);
-        } else {
-            if (~str.indexOf('linear-gradient')) {
-                str = str.substring(str.indexOf('linear-gradient'), str.length);
-            }
-            this.rgbConstructor(str);
-        }
-    }
-
-    /**
-     * Constructor from a hex argument
-     */
-    protected hexConstructor (hex: string) : void {
-        switch (hex.length) {
-            case 1:
-            case 5:
-            case 6:
-                return;
-            case 2:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
-                break;
-            case 3:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
-                break;
-            case 4:
-                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
-                break;
-            case 7:
-                hex += mintColor.hexMax;
-                break;
-            case 8:
-                hex += hex[hex.length - 1];
-                break;
-            default:
-                hex = hex.substring(0, 9);
-        }
-
-        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
-        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
-        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
-        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
-    }
-
-    /**
-     * Constructor from an rgba argument
-     */
-    protected rgbConstructor (rgb: string) : void {
-        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
-        if (match) {
-            this.r = parseInt(match[1]);
-            this.g = parseInt(match[2]);
-            this.b = parseInt(match[3]);
-            this.a = parseFloat(match[4]);
-        }
-    }
-
-    /**
-     * Returns the perceived brightness of the color
-     */
-    getBrightness () : number {
-        if (this.a === 0) {
-            return 262;
-        }
-        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
-            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
-        }
-        return -1;
-    }
-}
-export default mintColor;

package/src/ts/imports/models/file.ts

@@ -1,16 +0,0 @@
-/**
- * File model for Amplify Storage
- */
-export interface IMintFile {
-	path?: string;
-	eTag?: string;
-	lastModified?: string;
-	size?: number;
-	progress?: number;
-	error?: boolean;
-	fetched?: boolean;
-	empty?: boolean;
-	files?: { [key: string]: IMintFile }
-	metadata?: { [key: string]: string }
-}
-export default IMintFile;

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

@@ -1,9 +0,0 @@
-/**
- * Forward all exports from the models directory
- */
-export * from './color';
-export * from './file';
-export * from './item';
-export * from './minify';
-export * from './page';
-export * from './recaptcha';

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

@@ -1,72 +0,0 @@
-/**
- * A generic item
- * @note - this class must be convertable with JSON
- *       - only add strings, numbers, booleans, arrays, and objects
- */
-export class MintItem {
-	/**
-	 * Item settings
-	 */
-	version?: number = 0;
-	priority?: number = 0;
-	price?: number = 0;
-	level?: number = 0;
-	size?: number = 0;
-	num?: number = 0;
-	width?: number = 0;
-	height?: number = 0;
-
-	active?: boolean = false;
-	centered?: boolean = false;
-	disabled?: boolean = false;
-	private?: boolean = false;
-
-	/**
-	 * Item properties
-	 */
-	id?: string;
-	slug?: string;
-	name?: string;
-	title?: string;
-	subtitle?: string;
-	description?: string;
-	category?: string;
-	type?: string;
-	unit?: string;
-	logo?: MintItem;
-	icon?: string;
-	position?: string;
-	transform?: string;
-	date?: string;
-
-	/**
-	 * Item links
-	 */
-	src?: string;
-	href?: string;
-	target?: string;
-	routerLink?: string[];
-
-	/**
-	 * Item data
-	 */
-	attr?: { [key: string]: string } = {};
-	params?: { [key: string]: string } = {};
-	options?: { [key: string]: string } = {};
-	lists?: { [key: string]: string[] } = {};
-
-	/**
-	 * Item lists
-	 */
-	paragraphs?: string[] = [];
-	classes?: string[] = [];
-	items?: MintItem[] = [];
-	images?: MintItem[] = [];
-	buttons?: MintItem[] = [];
-
-	/**
-	 * Item functions
-	 */
-	click?: Function;
-};
-export default MintItem;

package/src/ts/imports/models/minify.ts

@@ -1,11 +0,0 @@
-/**
- * Minify Interface
- */
-export interface IMintMinify {
-	url: string,
-	format?: string[],
-	method?: string,
-	width?: number,
-	height?: number
-}
-export default IMintMinify;

package/src/ts/imports/models/page.ts

@@ -1,19 +0,0 @@
-/**
- * Imports
- */
-import MintItem from "./item";
-
-
-/**
- * Page Interface
- */
-export interface IMintPage {
-	slug: string;
-	title?: string;
-	description?: string;
-	image?: string;
-	items?: MintItem[];
-	createdAt?: string;
-	updatedAt?: string;
-}
-export default IMintPage;

package/src/ts/imports/models/recaptcha.ts

@@ -1,8 +0,0 @@
-/**
- * Recaptcha Interface
- */
-export interface IMintRecaptcha {
-	token: string;
-	action: string;
-};
-export default IMintRecaptcha;