@venite/components 0.16.7 → 0.16.13

package/dist/cjs/index-e4c51e4d.js

@@ -0,0 +1,307 @@
+'use strict';
+
+const hardwareBackButton = require('./hardware-back-button-8c2f48d2.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const animation = require('./animation-34a434a2.js');
+
+/**
+ * baseAnimation
+ * Base class which is extended by the various types. Each
+ * type will provide their own animations for open and close
+ * and registers itself with Menu.
+ */
+const baseAnimation = (isIos) => {
+    // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
+    // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
+    /**
+     * "Apply the sharp curve to items temporarily leaving the screen that may return
+     * from the same exit point. When they return, use the deceleration curve. On mobile,
+     * this transition typically occurs over 300ms" -- MD Motion Guide
+     */
+    return animation.createAnimation().duration(isIos ? 400 : 300);
+};
+
+/**
+ * Menu Overlay Type
+ * The menu slides over the content. The content
+ * itself, which is under the menu, does not move.
+ */
+const menuOverlayAnimation = (menu) => {
+    let closedX;
+    let openedX;
+    const width = menu.width + 8;
+    const menuAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    if (menu.isEndSide) {
+        // right side
+        closedX = width + 'px';
+        openedX = '0px';
+    }
+    else {
+        // left side
+        closedX = -width + 'px';
+        openedX = '0px';
+    }
+    menuAnimation
+        .addElement(menu.menuInnerEl)
+        .fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+    const mode = ionicGlobal.getIonMode(menu);
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
+    backdropAnimation
+        .addElement(menu.backdropEl)
+        .fromTo('opacity', 0.01, opacity);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+};
+
+/**
+ * Menu Push Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself also slides over to reveal its bad self.
+ */
+const menuPushAnimation = (menu) => {
+    let contentOpenedX;
+    let menuClosedX;
+    const mode = ionicGlobal.getIonMode(menu);
+    const width = menu.width;
+    if (menu.isEndSide) {
+        contentOpenedX = -width + 'px';
+        menuClosedX = width + 'px';
+    }
+    else {
+        contentOpenedX = width + 'px';
+        menuClosedX = -width + 'px';
+    }
+    const menuAnimation = animation.createAnimation()
+        .addElement(menu.menuInnerEl)
+        .fromTo('transform', `translateX(${menuClosedX})`, 'translateX(0px)');
+    const contentAnimation = animation.createAnimation()
+        .addElement(menu.contentEl)
+        .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
+    const backdropAnimation = animation.createAnimation()
+        .addElement(menu.backdropEl)
+        .fromTo('opacity', 0.01, 0.32);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+};
+
+/**
+ * Menu Reveal Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself, which is under the content, does not move.
+ */
+const menuRevealAnimation = (menu) => {
+    const mode = ionicGlobal.getIonMode(menu);
+    const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
+    const contentOpen = animation.createAnimation()
+        .addElement(menu.contentEl) // REVIEW
+        .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
+    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+};
+
+const createMenuController = () => {
+    const menuAnimations = new Map();
+    const menus = [];
+    const open = async (menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            return menuEl.open();
+        }
+        return false;
+    };
+    const close = async (menu) => {
+        const menuEl = await (menu !== undefined ? get(menu) : getOpen());
+        if (menuEl !== undefined) {
+            return menuEl.close();
+        }
+        return false;
+    };
+    const toggle = async (menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            return menuEl.toggle();
+        }
+        return false;
+    };
+    const enable = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.disabled = !shouldEnable;
+        }
+        return menuEl;
+    };
+    const swipeGesture = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.swipeGesture = shouldEnable;
+        }
+        return menuEl;
+    };
+    const isOpen = async (menu) => {
+        if (menu != null) {
+            const menuEl = await get(menu);
+            return (menuEl !== undefined && menuEl.isOpen());
+        }
+        else {
+            const menuEl = await getOpen();
+            return menuEl !== undefined;
+        }
+    };
+    const isEnabled = async (menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            return !menuEl.disabled;
+        }
+        return false;
+    };
+    const get = async (menu) => {
+        await waitUntilReady();
+        if (menu === 'start' || menu === 'end') {
+            // there could be more than one menu on the same side
+            // so first try to get the enabled one
+            const menuRef = find(m => m.side === menu && !m.disabled);
+            if (menuRef) {
+                return menuRef;
+            }
+            // didn't find a menu side that is enabled
+            // so try to get the first menu side found
+            return find(m => m.side === menu);
+        }
+        else if (menu != null) {
+            // the menuId was not left or right
+            // so try to get the menu by its "id"
+            return find(m => m.menuId === menu);
+        }
+        // return the first enabled menu
+        const menuEl = find(m => !m.disabled);
+        if (menuEl) {
+            return menuEl;
+        }
+        // get the first menu in the array, if one exists
+        return menus.length > 0 ? menus[0].el : undefined;
+    };
+    /**
+     * Get the instance of the opened menu. Returns `null` if a menu is not found.
+     */
+    const getOpen = async () => {
+        await waitUntilReady();
+        return _getOpenSync();
+    };
+    /**
+     * Get all menu instances.
+     */
+    const getMenus = async () => {
+        await waitUntilReady();
+        return getMenusSync();
+    };
+    /**
+     * Get whether or not a menu is animating. Returns `true` if any
+     * menu is currently animating.
+     */
+    const isAnimating = async () => {
+        await waitUntilReady();
+        return isAnimatingSync();
+    };
+    const registerAnimation = (name, animation) => {
+        menuAnimations.set(name, animation);
+    };
+    const _register = (menu) => {
+        if (menus.indexOf(menu) < 0) {
+            if (!menu.disabled) {
+                _setActiveMenu(menu);
+            }
+            menus.push(menu);
+        }
+    };
+    const _unregister = (menu) => {
+        const index = menus.indexOf(menu);
+        if (index > -1) {
+            menus.splice(index, 1);
+        }
+    };
+    const _setActiveMenu = (menu) => {
+        // if this menu should be enabled
+        // then find all the other menus on this same side
+        // and automatically disable other same side menus
+        const side = menu.side;
+        menus
+            .filter(m => m.side === side && m !== menu)
+            .forEach(m => m.disabled = true);
+    };
+    const _setOpen = async (menu, shouldOpen, animated) => {
+        if (isAnimatingSync()) {
+            return false;
+        }
+        if (shouldOpen) {
+            const openedMenu = await getOpen();
+            if (openedMenu && menu.el !== openedMenu) {
+                await openedMenu.setOpen(false, false);
+            }
+        }
+        return menu._setOpen(shouldOpen, animated);
+    };
+    const _createAnimation = (type, menuCmp) => {
+        const animationBuilder = menuAnimations.get(type);
+        if (!animationBuilder) {
+            throw new Error('animation not registered');
+        }
+        const animation = animationBuilder(menuCmp);
+        return animation;
+    };
+    const _getOpenSync = () => {
+        return find(m => m._isOpen);
+    };
+    const getMenusSync = () => {
+        return menus.map(menu => menu.el);
+    };
+    const isAnimatingSync = () => {
+        return menus.some(menu => menu.isAnimating);
+    };
+    const find = (predicate) => {
+        const instance = menus.find(predicate);
+        if (instance !== undefined) {
+            return instance.el;
+        }
+        return undefined;
+    };
+    const waitUntilReady = () => {
+        return Promise.all(Array.from(document.querySelectorAll('ion-menu'))
+            .map(menu => menu.componentOnReady()));
+    };
+    registerAnimation('reveal', menuRevealAnimation);
+    registerAnimation('push', menuPushAnimation);
+    registerAnimation('overlay', menuOverlayAnimation);
+    /* tslint:disable-next-line */
+    if (typeof document !== 'undefined') {
+        document.addEventListener('ionBackButton', (ev) => {
+            const openMenu = _getOpenSync();
+            if (openMenu) {
+                ev.detail.register(hardwareBackButton.MENU_BACK_BUTTON_PRIORITY, () => {
+                    return openMenu.close();
+                });
+            }
+        });
+    }
+    return {
+        registerAnimation,
+        get,
+        getMenus,
+        getOpen,
+        isEnabled,
+        swipeGesture,
+        isAnimating,
+        isOpen,
+        enable,
+        toggle,
+        close,
+        open,
+        _getOpenSync,
+        _createAnimation,
+        _register,
+        _unregister,
+        _setOpen,
+        _setActiveMenu,
+    };
+};
+const menuController = /*@__PURE__*/ createMenuController();
+
+exports.menuController = menuController;

package/dist/cjs/index.cjs.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class MenuOption {
+}
+
+exports.MenuOption = MenuOption;

package/dist/cjs/input-shims-9c2d56bd.js

@@ -0,0 +1,357 @@
+'use strict';
+
+const helpers = require('./helpers-41dfb43a.js');
+
+const cloneMap = new WeakMap();
+const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0) => {
+    if (cloneMap.has(componentEl) === shouldRelocate) {
+        return;
+    }
+    if (shouldRelocate) {
+        addClone(componentEl, inputEl, inputRelativeY);
+    }
+    else {
+        removeClone(componentEl, inputEl);
+    }
+};
+const isFocused = (input) => {
+    return input === input.getRootNode().activeElement;
+};
+const addClone = (componentEl, inputEl, inputRelativeY) => {
+    // this allows for the actual input to receive the focus from
+    // the user's touch event, but before it receives focus, it
+    // moves the actual input to a location that will not screw
+    // up the app's layout, and does not allow the native browser
+    // to attempt to scroll the input into place (messing up headers/footers)
+    // the cloned input fills the area of where native input should be
+    // while the native input fakes out the browser by relocating itself
+    // before it receives the actual focus event
+    // We hide the focused input (with the visible caret) invisible by making it scale(0),
+    const parentEl = inputEl.parentNode;
+    // DOM WRITES
+    const clonedEl = inputEl.cloneNode(false);
+    clonedEl.classList.add('cloned-input');
+    clonedEl.tabIndex = -1;
+    parentEl.appendChild(clonedEl);
+    cloneMap.set(componentEl, clonedEl);
+    const doc = componentEl.ownerDocument;
+    const tx = doc.dir === 'rtl' ? 9999 : -9999;
+    componentEl.style.pointerEvents = 'none';
+    inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
+};
+const removeClone = (componentEl, inputEl) => {
+    const clone = cloneMap.get(componentEl);
+    if (clone) {
+        cloneMap.delete(componentEl);
+        clone.remove();
+    }
+    componentEl.style.pointerEvents = '';
+    inputEl.style.transform = '';
+};
+
+const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
+    if (!scrollEl || !inputEl) {
+        return () => { return; };
+    }
+    const scrollHideCaret = (shouldHideCaret) => {
+        if (isFocused(inputEl)) {
+            relocateInput(componentEl, inputEl, shouldHideCaret);
+        }
+    };
+    const onBlur = () => relocateInput(componentEl, inputEl, false);
+    const hideCaret = () => scrollHideCaret(true);
+    const showCaret = () => scrollHideCaret(false);
+    scrollEl.addEventListener('ionScrollStart', hideCaret);
+    scrollEl.addEventListener('ionScrollEnd', showCaret);
+    inputEl.addEventListener('blur', onBlur);
+    return () => {
+        scrollEl.removeEventListener('ionScrollStart', hideCaret);
+        scrollEl.removeEventListener('ionScrollEnd', showCaret);
+        inputEl.addEventListener('ionBlur', onBlur);
+    };
+};
+
+const SKIP_SELECTOR = 'input, textarea, [no-blur]';
+const enableInputBlurring = () => {
+    let focused = true;
+    let didScroll = false;
+    const doc = document;
+    const onScroll = () => {
+        didScroll = true;
+    };
+    const onFocusin = () => {
+        focused = true;
+    };
+    const onTouchend = (ev) => {
+        // if app did scroll return early
+        if (didScroll) {
+            didScroll = false;
+            return;
+        }
+        const active = doc.activeElement;
+        if (!active) {
+            return;
+        }
+        // only blur if the active element is a text-input or a textarea
+        if (active.matches(SKIP_SELECTOR)) {
+            return;
+        }
+        // if the selected target is the active element, do not blur
+        const tapped = ev.target;
+        if (tapped === active) {
+            return;
+        }
+        if (tapped.matches(SKIP_SELECTOR) || tapped.closest(SKIP_SELECTOR)) {
+            return;
+        }
+        focused = false;
+        // TODO: find a better way, why 50ms?
+        setTimeout(() => {
+            if (!focused) {
+                active.blur();
+            }
+        }, 50);
+    };
+    doc.addEventListener('ionScrollStart', onScroll);
+    doc.addEventListener('focusin', onFocusin, true);
+    doc.addEventListener('touchend', onTouchend, false);
+    return () => {
+        doc.removeEventListener('ionScrollStart', onScroll, true);
+        doc.removeEventListener('focusin', onFocusin, true);
+        doc.removeEventListener('touchend', onTouchend, false);
+    };
+};
+
+const SCROLL_ASSIST_SPEED = 0.3;
+const getScrollData = (componentEl, contentEl, keyboardHeight) => {
+    const itemEl = componentEl.closest('ion-item,[ion-item]') || componentEl;
+    return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight);
+};
+const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {
+    // compute input's Y values relative to the body
+    const inputTop = inputRect.top;
+    const inputBottom = inputRect.bottom;
+    // compute visible area
+    const visibleAreaTop = contentRect.top;
+    const visibleAreaBottom = Math.min(contentRect.bottom, platformHeight - keyboardHeight);
+    // compute safe area
+    const safeAreaTop = visibleAreaTop + 15;
+    const safeAreaBottom = visibleAreaBottom * 0.5;
+    // figure out if each edge of the input is within the safe area
+    const distanceToBottom = safeAreaBottom - inputBottom;
+    const distanceToTop = safeAreaTop - inputTop;
+    // desiredScrollAmount is the negated distance to the safe area according to our calculations.
+    const desiredScrollAmount = Math.round((distanceToBottom < 0)
+        ? -distanceToBottom
+        : (distanceToTop > 0)
+            ? -distanceToTop
+            : 0);
+    // our calculations make some assumptions that aren't always true, like the keyboard being closed when an input
+    // gets focus, so make sure we don't scroll the input above the visible area
+    const scrollAmount = Math.min(desiredScrollAmount, inputTop - visibleAreaTop);
+    const distance = Math.abs(scrollAmount);
+    const duration = distance / SCROLL_ASSIST_SPEED;
+    const scrollDuration = Math.min(400, Math.max(150, duration));
+    return {
+        scrollAmount,
+        scrollDuration,
+        scrollPadding: keyboardHeight,
+        inputSafeY: -(inputTop - safeAreaTop) + 4
+    };
+};
+
+const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {
+    let coord;
+    const touchStart = (ev) => {
+        coord = helpers.pointerCoord(ev);
+    };
+    const touchEnd = (ev) => {
+        // input cover touchend/mouseup
+        if (!coord) {
+            return;
+        }
+        // get where the touchend/mouseup ended
+        const endCoord = helpers.pointerCoord(ev);
+        // focus this input if the pointer hasn't moved XX pixels
+        // and the input doesn't already have focus
+        if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            // begin the input focus process
+            jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight);
+        }
+    };
+    componentEl.addEventListener('touchstart', touchStart, true);
+    componentEl.addEventListener('touchend', touchEnd, true);
+    return () => {
+        componentEl.removeEventListener('touchstart', touchStart, true);
+        componentEl.removeEventListener('touchend', touchEnd, true);
+    };
+};
+const jsSetFocus = (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {
+    if (!contentEl && !footerEl) {
+        return;
+    }
+    const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight);
+    if (contentEl && Math.abs(scrollData.scrollAmount) < 4) {
+        // the text input is in a safe position that doesn't
+        // require it to be scrolled into view, just set focus now
+        inputEl.focus();
+        return;
+    }
+    // temporarily move the focus to the focus holder so the browser
+    // doesn't freak out while it's trying to get the input in place
+    // at this point the native text input still does not have focus
+    relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
+    inputEl.focus();
+    /* tslint:disable-next-line */
+    if (typeof window !== 'undefined') {
+        let scrollContentTimeout;
+        const scrollContent = async () => {
+            // clean up listeners and timeouts
+            if (scrollContentTimeout !== undefined) {
+                clearTimeout(scrollContentTimeout);
+            }
+            window.removeEventListener('resize', scrollContent);
+            window.removeEventListener('keyboardWillShow', scrollContent);
+            // scroll the input into place
+            if (contentEl) {
+                await contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration);
+            }
+            // the scroll view is in the correct position now
+            // give the native text input focus
+            relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);
+            // ensure this is the focused input
+            inputEl.focus();
+        };
+        window.addEventListener('resize', scrollContent);
+        window.addEventListener('keyboardWillShow', scrollContent);
+        // fallback in case resize never fires
+        scrollContentTimeout = setTimeout(scrollContent, 300);
+    }
+};
+const hasPointerMoved = (threshold, startCoord, endCoord) => {
+    if (startCoord && endCoord) {
+        const deltaX = (startCoord.x - endCoord.x);
+        const deltaY = (startCoord.y - endCoord.y);
+        const distance = deltaX * deltaX + deltaY * deltaY;
+        return distance > (threshold * threshold);
+    }
+    return false;
+};
+
+const PADDING_TIMER_KEY = '$ionPaddingTimer';
+const enableScrollPadding = (keyboardHeight) => {
+    const doc = document;
+    const onFocusin = (ev) => {
+        setScrollPadding(ev.target, keyboardHeight);
+    };
+    const onFocusout = (ev) => {
+        setScrollPadding(ev.target, 0);
+    };
+    doc.addEventListener('focusin', onFocusin);
+    doc.addEventListener('focusout', onFocusout);
+    return () => {
+        doc.removeEventListener('focusin', onFocusin);
+        doc.removeEventListener('focusout', onFocusout);
+    };
+};
+const setScrollPadding = (input, keyboardHeight) => {
+    if (input.tagName !== 'INPUT') {
+        return;
+    }
+    if (input.parentElement && input.parentElement.tagName === 'ION-INPUT') {
+        return;
+    }
+    if (input.parentElement &&
+        input.parentElement.parentElement &&
+        input.parentElement.parentElement.tagName === 'ION-SEARCHBAR') {
+        return;
+    }
+    const el = input.closest('ion-content');
+    if (el === null) {
+        return;
+    }
+    const timer = el[PADDING_TIMER_KEY];
+    if (timer) {
+        clearTimeout(timer);
+    }
+    if (keyboardHeight > 0) {
+        el.style.setProperty('--keyboard-offset', `${keyboardHeight}px`);
+    }
+    else {
+        el[PADDING_TIMER_KEY] = setTimeout(() => {
+            el.style.setProperty('--keyboard-offset', '0px');
+        }, 120);
+    }
+};
+
+const INPUT_BLURRING = true;
+const SCROLL_PADDING = true;
+const startInputShims = (config) => {
+    const doc = document;
+    const keyboardHeight = config.getNumber('keyboardHeight', 290);
+    const scrollAssist = config.getBoolean('scrollAssist', true);
+    const hideCaret = config.getBoolean('hideCaretOnScroll', true);
+    const inputBlurring = config.getBoolean('inputBlurring', true);
+    const scrollPadding = config.getBoolean('scrollPadding', true);
+    const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea'));
+    const hideCaretMap = new WeakMap();
+    const scrollAssistMap = new WeakMap();
+    const registerInput = async (componentEl) => {
+        if (componentEl.componentOnReady) {
+            await componentEl.componentOnReady();
+        }
+        const inputRoot = componentEl.shadowRoot || componentEl;
+        const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
+        const scrollEl = componentEl.closest('ion-content');
+        const footerEl = (!scrollEl) ? componentEl.closest('ion-footer') : null;
+        if (!inputEl) {
+            return;
+        }
+        if (!!scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {
+            const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
+            hideCaretMap.set(componentEl, rmFn);
+        }
+        if ((!!scrollEl || !!footerEl) && scrollAssist && !scrollAssistMap.has(componentEl)) {
+            const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, footerEl, keyboardHeight);
+            scrollAssistMap.set(componentEl, rmFn);
+        }
+    };
+    const unregisterInput = (componentEl) => {
+        if (hideCaret) {
+            const fn = hideCaretMap.get(componentEl);
+            if (fn) {
+                fn();
+            }
+            hideCaretMap.delete(componentEl);
+        }
+        if (scrollAssist) {
+            const fn = scrollAssistMap.get(componentEl);
+            if (fn) {
+                fn();
+            }
+            scrollAssistMap.delete(componentEl);
+        }
+    };
+    if (inputBlurring && INPUT_BLURRING) {
+        enableInputBlurring();
+    }
+    if (scrollPadding && SCROLL_PADDING) {
+        enableScrollPadding(keyboardHeight);
+    }
+    // Input might be already loaded in the DOM before ion-device-hacks did.
+    // At this point we need to look for all of the inputs not registered yet
+    // and register them.
+    for (const input of inputs) {
+        registerInput(input);
+    }
+    doc.addEventListener('ionInputDidLoad', ((ev) => {
+        registerInput(ev.detail);
+    }));
+    doc.addEventListener('ionInputDidUnload', ((ev) => {
+        unregisterInput(ev.detail);
+    }));
+};
+
+exports.startInputShims = startInputShims;