@uoguelph/web-components 1.2.0-rc.7 → 1.2.0-rc.9

package/dist/collection/components/uofg-menu/uofg-menu.js

@@ -1,438 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from "../../utils/utils";
-const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
-const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
-export class UofgMenu {
-    constructor() {
-        this.computedStyle = null;
-        this.button = null;
-        this.content = null;
-        this.contentComputedStyle = null;
-        this.observer = new MutationObserver(this.handleMutation);
-        this.isExpanded = false;
-        this.autoCollapse = false;
-    }
-    connectedCallback() {
-        // Bind functions so that "this" correctly refers to the component's instance.
-        this.handleMutation = this.handleMutation.bind(this);
-        this.handleClick = this.handleClick.bind(this);
-        this.handleFocusout = this.handleFocusout.bind(this);
-        this.handleKeyUp = this.handleKeyUp.bind(this);
-        this.computedStyle = window.getComputedStyle(this.el);
-        this.handleMutation();
-        this.observer.observe(this.el, { childList: true });
-    }
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-    handleMutation() {
-        // Update the button element
-        const button = this.el.querySelector('[slot="button"]');
-        // Set up the new button
-        button === null || button === void 0 ? void 0 : button.setAttribute('aria-expanded', this.isExpanded ? 'true' : 'false');
-        button === null || button === void 0 ? void 0 : button.setAttribute('aria-haspopup', 'true');
-        this.button = button;
-        // Update the content element
-        const content = this.el.querySelector('[slot="content"]');
-        if (content == null) {
-            this.content = null;
-            this.contentComputedStyle = null;
-        }
-        else {
-            this.content = content;
-            this.isExpanded
-                ? this.content.style.removeProperty('display')
-                : this.content.style.setProperty('display', 'none', 'important');
-            this.contentComputedStyle = window.getComputedStyle(this.content);
-        }
-    }
-    handleKeyUp(e) {
-        if (e.key === 'Escape') {
-            this.isExpanded = false;
-            if (e.target !== this.button) {
-                e.stopPropagation();
-                this.isExpanded = false;
-                this.button && this.button.focus();
-            }
-        }
-    }
-    handleClick(e) {
-        //Check if the click was on the button or a descendant of the button
-        if (this.button && this.button.contains(e.target)) {
-            this.isExpanded = !this.isExpanded;
-            return;
-        }
-    }
-    handleFocusout(e) {
-        if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
-            this.isExpanded = false;
-        }
-    }
-    handleIsExpandedChange(newValue) {
-        var _a, _b, _c;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', newValue ? 'true' : 'false');
-        newValue ? this.expanded.emit() : this.collapsed.emit();
-        // No content is slotted, so we don't need to do anything else.
-        if (this.content == null) {
-            return;
-        }
-        // Determine what animation type the user wants.
-        const type = this.getAnimationType();
-        // If Web Animations API isn't supported, or the user requested no animation, we can simply set display style
-        if (!WEB_ANIMATIONS_SUPPORTED() || PREFERS_REDUCED_MOTION() || type === 'none') {
-            newValue
-                ? this.content.style.removeProperty('display')
-                : this.content.style.setProperty('display', 'none', 'important');
-            return;
-        }
-        // Check if we are in the middle of an animation.
-        const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(animation => animation.id === 'uofg-menu-animation');
-        // If we are, then we want to reverse the existing one rather than starting a new animation.
-        if (animations.length > 0) {
-            animations === null || animations === void 0 ? void 0 : animations.forEach(animation => animation.reverse());
-            return;
-        }
-        let animationDef;
-        const options = {
-            id: 'uofg-menu-animation',
-            duration: this.getAnimationDuration(),
-            fill: 'none',
-            easing: this.getAnimationEasing(),
-            direction: newValue ? 'normal' : 'reverse',
-        };
-        // Need to remove display none, otherwise keyframe values won't be calculated correctly.
-        this.content.style.removeProperty('display');
-        switch (type) {
-            case 'fade':
-                animationDef = this.fadeAnimation();
-                break;
-            case 'slide':
-                animationDef = this.slideAnimation();
-                break;
-            default:
-                animationDef = this.fadeAnimation();
-        }
-        // We can start the animation.
-        this.animationStarted.emit(newValue);
-        (_c = this.content) === null || _c === void 0 ? void 0 : _c.animate(animationDef.keyframes, options).finished.finally(() => {
-            var _a;
-            // Once the animation is done (or something went wrong during it), we update the content's display style.
-            if (this.content) {
-                this.isExpanded
-                    ? this.content.style.removeProperty('display')
-                    : this.content.style.setProperty('display', 'none', 'important');
-                (_a = animationDef.callback) === null || _a === void 0 ? void 0 : _a.call(animationDef);
-                this.animationEnded.emit(this.isExpanded);
-            }
-        });
-    }
-    getAnimationType() {
-        var _a;
-        const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-type')) || '';
-        switch (str) {
-            case 'slide':
-            case 'fade':
-                return str;
-            default:
-                return 'none';
-        }
-    }
-    getAnimationDuration() {
-        var _a;
-        const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-duration')) || '';
-        const matches = DURATION_REGEX.exec(str);
-        if (matches == null) {
-            return 200;
-        }
-        return Number.parseFloat(matches[1]) * (matches[2] == 's' ? 1000 : 1);
-    }
-    getAnimationEasing() {
-        var _a;
-        const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-easing')) || '';
-        switch (str) {
-            case 'linear':
-            case 'ease':
-            case 'ease-in':
-            case 'ease-out':
-            case 'ease-in-out':
-            case 'step-start':
-            case 'step-end':
-                return str;
-            default:
-                return EASING_FUNCTION_REGEX.test(str) ? str : 'ease-in-out';
-        }
-    }
-    fadeAnimation() {
-        return { keyframes: [{ opacity: 0 }, { opacity: 1 }] };
-    }
-    slideAnimation() {
-        var _a, _b, _c, _d, _e;
-        this.content && this.content.style.setProperty('overflow-y', 'hidden', 'important');
-        return {
-            keyframes: [
-                {
-                    height: 0,
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                    marginTop: 0,
-                    marginBottom: 0,
-                },
-                {
-                    height: ((_a = this.contentComputedStyle) === null || _a === void 0 ? void 0 : _a.height) || 0,
-                    paddingTop: ((_b = this.contentComputedStyle) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0,
-                    paddingBottom: ((_c = this.contentComputedStyle) === null || _c === void 0 ? void 0 : _c.paddingBottom) || 0,
-                    marginTop: ((_d = this.contentComputedStyle) === null || _d === void 0 ? void 0 : _d.marginTop) || 0,
-                    marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0,
-                },
-            ],
-            callback: () => {
-                this.content && this.content.style.removeProperty('overflow-y');
-            },
-        };
-    }
-    render() {
-        return (h(Host, { key: '40c0e7a6dd7f457145ed744aaf86595f72566f8c', "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
-    }
-    /**
-     * Get the current expanded state of the menu.
-     * @returns A promise which will resolve to the current expanded state.
-     */
-    async getExpanded() {
-        return this.isExpanded;
-    }
-    /**
-     * Set the expanded state of the menu.
-     * @param value The new expanded state.
-     */
-    async setExpanded(value) {
-        this.isExpanded = value;
-    }
-    /**
-     * Toggle the expanded state of the menu.
-     * @returns A promise which will resolve to the new expanded state.
-     */
-    async toggle() {
-        this.isExpanded = !this.isExpanded;
-        return this.isExpanded;
-    }
-    /**
-     * Collapse the menu. This is the same as setting the expanded state to false.
-     * @returns empty Promise.
-     */
-    async collapse() {
-        this.isExpanded = false;
-    }
-    /**
-     * Expand the menu. This is the same as setting the expanded state to true.
-     * @returns empty Promise.
-     */
-    async expand() {
-        this.isExpanded = true;
-    }
-    static get is() { return "uofg-menu"; }
-    static get properties() {
-        return {
-            "autoCollapse": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Controls whether the menu should automatically collapse when the focused element in the page is not contained within the menu (e.g. it's button or content). This is useful for when you want the menu to collapse whenever a user interacts with any other part of the page."
-                },
-                "attribute": "auto-collapse",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isExpanded": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "expanded",
-                "name": "expanded",
-                "bubbles": false,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Dispatched whenever the menu is expanded whether by user interaction or or programmatically (e.g. expand())."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "collapsed",
-                "name": "collapsed",
-                "bubbles": false,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Dispatched whenever the menu is collapsed whether by user interaction or programmatically (e.g. collapse())."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "animationStarted",
-                "name": "animationStarted",
-                "bubbles": false,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Dispatched whenever the menu is expanding or collapsing and the animation has started. This event is not dispatched if the animation is disabled (e.g. due to reduced motion, css variable set to none, or lack of Web Animations API support)."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "animationEnded",
-                "name": "animationEnded",
-                "bubbles": false,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Dispatched whenever the menu is expanding or collapsing and the animation has ended. This event is not dispatched if the animation is disabled (e.g. due to reduced motion, css variable set to none, or lack of Web Animations API support)."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getExpanded": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Get the current expanded state of the menu.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A promise which will resolve to the current expanded state."
-                        }]
-                }
-            },
-            "setExpanded": {
-                "complexType": {
-                    "signature": "(value: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "boolean",
-                            "docs": "The new expanded state."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set the expanded state of the menu.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "value The new expanded state."
-                        }]
-                }
-            },
-            "toggle": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Toggle the expanded state of the menu.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A promise which will resolve to the new expanded state."
-                        }]
-                }
-            },
-            "collapse": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Collapse the menu. This is the same as setting the expanded state to false.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "empty Promise."
-                        }]
-                }
-            },
-            "expand": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Expand the menu. This is the same as setting the expanded state to true.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "empty Promise."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "isExpanded",
-                "methodName": "handleIsExpandedChange"
-            }];
-    }
-}