@uoguelph/web-components 1.1.2 → 1.2.0-rc.0

package/dist/components/uofg-menu2.js

@@ -4,259 +4,265 @@ import { W as WEB_ANIMATIONS_SUPPORTED, P as PREFERS_REDUCED_MOTION } from './ut
 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*\)$/;
 const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.expanded = createEvent(this, "expanded", 2);
-    this.collapsed = createEvent(this, "collapsed", 2);
-    this.animationStarted = createEvent(this, "animationStarted", 2);
-    this.animationEnded = createEvent(this, "animationEnded", 2);
-    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;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.expanded = createEvent(this, "expanded", 2);
+        this.collapsed = createEvent(this, "collapsed", 2);
+        this.animationStarted = createEvent(this, "animationStarted", 2);
+        this.animationEnded = createEvent(this, "animationEnded", 2);
+        this.computedStyle = null;
+        this.button = null;
+        this.content = null;
+        this.contentComputedStyle = null;
+        this.observer = new MutationObserver(this.handleMutation);
+        this.isExpanded = false;
+        this.autoCollapse = false;
     }
-    else {
-      this.content = content;
-      this.content.style.display = this.isExpanded ? '' : 'none';
-      this.contentComputedStyle = window.getComputedStyle(this.content);
+    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 });
     }
-  }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isExpanded = false;
-      if (e.target !== this.button) {
-        e.stopPropagation();
-        this.isExpanded = false;
-        this.button && this.button.focus();
-      }
+    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;
+        }
     }
-  }
-  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;
+    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);
+            }
+        });
     }
-  }
-  handleFocusout(e) {
-    if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
-      this.isExpanded = false;
+    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';
+        }
     }
-  }
-  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;
+    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);
     }
-    // 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') {
-      this.content.style.display = newValue ? '' : 'none';
-      return;
+    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';
+        }
     }
-    // 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;
+    fadeAnimation() {
+        return { keyframes: [{ opacity: 0 }, { opacity: 1 }] };
     }
-    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.display = '';
-    switch (type) {
-      case 'fade':
-        animationDef = this.fadeAnimation();
-        break;
-      case 'slide':
-        animationDef = this.slideAnimation();
-        break;
-      default:
-        animationDef = this.fadeAnimation();
+    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');
+            },
+        };
     }
-    // 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.content.style.display = this.isExpanded ? '' : 'none';
-        (_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';
+    render() {
+        return (h(Host, { key: '40c0e7a6dd7f457145ed744aaf86595f72566f8c', "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
     }
-  }
-  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;
+    /**
+     * Get the current expanded state of the menu.
+     * @returns A promise which will resolve to the current expanded state.
+     */
+    async getExpanded() {
+        return this.isExpanded;
     }
-    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';
+    /**
+     * Set the expanded state of the menu.
+     * @param value The new expanded state.
+     */
+    async setExpanded(value) {
+        this.isExpanded = value;
     }
-  }
-  fadeAnimation() {
-    return { keyframes: [{ opacity: 0 }, { opacity: 1 }] };
-  }
-  slideAnimation() {
-    var _a, _b, _c, _d, _e;
-    this.content && (this.content.style.overflowY = 'hidden');
-    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.overflowY = '');
-      },
-    };
-  }
-  render() {
-    return (h(Host, { "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;
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "isExpanded": ["handleIsExpandedChange"]
-  }; }
+    /**
+     * 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;
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "isExpanded": ["handleIsExpandedChange"]
+    }; }
 }, [0, "uofg-menu", {
-    "autoCollapse": [4, "auto-collapse"],
-    "isExpanded": [32],
-    "getExpanded": [64],
-    "setExpanded": [64],
-    "toggle": [64],
-    "collapse": [64],
-    "expand": [64]
-  }, undefined, {
-    "isExpanded": ["handleIsExpandedChange"]
-  }]);
+        "autoCollapse": [4, "auto-collapse"],
+        "isExpanded": [32],
+        "getExpanded": [64],
+        "setExpanded": [64],
+        "toggle": [64],
+        "collapse": [64],
+        "expand": [64]
+    }, undefined, {
+        "isExpanded": ["handleIsExpandedChange"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["uofg-menu"];
-  components.forEach(tagName => { switch (tagName) {
-    case "uofg-menu":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, UofgMenu);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["uofg-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "uofg-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UofgMenu);
+            }
+            break;
+    } });
 }
 
 export { UofgMenu as U, defineCustomElement as d };

package/dist/components/uofg-modal.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface UofgModal extends Components.UofgModal, HTMLElement {}
 export const UofgModal: {
-  prototype: UofgModal;
-  new (): UofgModal;
+    prototype: UofgModal;
+    new (): UofgModal;
 };
 /**
  * Used to define this component and all nested components recursively.