@uoguelph/web-components 0.0.16 → 0.0.18

package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
+import { faChevronUp } from "@fortawesome/pro-solid-svg-icons";
+export class UofgBackToTop {
+  constructor() {
+    this.threshold = 50;
+    this.isVisible = false;
+  }
+  connectedCallback() {
+    this.onScroll();
+  }
+  onScroll() {
+    this.isVisible = window.scrollY >= this.threshold;
+  }
+  render() {
+    return (h("button", { id: "uofg-back-to-top", "aria-label": "Go back to the top", class: { visible: this.isVisible }, onClick: () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      } }, h(FontAwesomeIcon, { icon: faChevronUp })));
+  }
+  static get is() { return "uofg-back-to-top"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-back-to-top.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-back-to-top.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "threshold": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of pixels the user has to scroll down before the button appears."
+        },
+        "attribute": "threshold",
+        "reflect": false,
+        "defaultValue": "50"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isVisible": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "onScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -84,7 +84,7 @@ export class UofgHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The title of the pages that the header is being used on. For example, for the Convocation pages, this would be set to \"Convocation\"."
+          "text": "The title of the department/topic that the header is being used for. For example, for the Convocation pages, this would be set to \"Convocation\"."
         },
         "attribute": "page-title",
         "reflect": false,
@@ -102,7 +102,7 @@ export class UofgHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The URL to the home/landing page for the pages the header is being used on. For example, for the Convocation pages, this would be set to \"https://www.uoguelph.ca/convocation/\"."
+          "text": "The URL to the home/landing page of the department/topic the header is being used for. For example, for the Convocation pages, this would be set to \"https://www.uoguelph.ca/convocation/\"."
         },
         "attribute": "page-url",
         "reflect": false,

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

@@ -1,65 +1,38 @@
 import { h, Host } from "@stencil/core";
-import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from "../../utils/feature-check";
+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*\)$/;
-const observer = new MutationObserver(mutations => {
-  for (const mutation of mutations) {
-    mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
-  }
-});
-const observerConfig = {
-  childList: true,
-};
 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.handleChildListChange = this.handleChildListChange.bind(this);
-    this.updateButton = this.updateButton.bind(this);
-    this.updateContent = this.updateContent.bind(this);
-    this.handleButtonClick = this.handleButtonClick.bind(this);
+    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.isExpanded = false;
-    this.handleChildListChange();
-    observer.observe(this.el, observerConfig);
+    this.handleMutation();
+    this.observer.observe(this.el, { childList: true });
   }
-  handleChildListChange() {
-    this.updateButton();
-    this.updateContent();
+  disconnectedCallback() {
+    this.observer.disconnect();
   }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isExpanded = false;
-      if (e.target !== this.button) {
-        e.stopPropagation();
-        this.isExpanded = false;
-        this.button && this.button.focus();
-      }
-    }
-  }
-  updateButton() {
-    var _a, _b, _c;
+  handleMutation() {
+    // Update the button element
     const button = this.el.querySelector('[slot="button"]');
-    // Clean up the old button before setting the new one
-    (_a = this.button) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
-    (_b = this.button) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-expanded');
-    (_c = this.button) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
     // 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');
-    button === null || button === void 0 ? void 0 : button.addEventListener('click', this.handleButtonClick);
     this.button = button;
-  }
-  updateContent() {
+    // Update the content element
     const content = this.el.querySelector('[slot="content"]');
     if (content == null) {
       this.content = null;
@@ -71,8 +44,22 @@ export class UofgMenu {
       this.contentComputedStyle = window.getComputedStyle(this.content);
     }
   }
-  handleButtonClick() {
-    this.isExpanded = !this.isExpanded;
+  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)) {
@@ -198,7 +185,7 @@ export class UofgMenu {
     };
   }
   render() {
-    return (h(Host, { tabindex: -1, "data-expanded": this.isExpanded, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp }));
+    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.
@@ -444,13 +431,4 @@ export class UofgMenu {
         "methodName": "handleIsExpandedChange"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "onChildListChange",
-        "method": "handleChildListChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/uofg-modal/uofg-modal.css

@@ -0,0 +1,80 @@
+:host {
+  visibility: visible !important;
+  position: relative !important;
+}
+
+:focus-visible {
+  outline: 2px solid #ffc72a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#uofg-modal {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  visibility: hidden;
+  opacity: 0;
+  padding: 2rem;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  transition-property: visibility, opacity;
+}
+#uofg-modal #uofg-modal-dismiss {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5rem;
+  height: 3.5rem;
+  width: 3.5rem;
+  font-size: 2rem;
+  line-height: 1;
+  color: var(--uofg-modal-dismiss-color, #fff);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+}
+#uofg-modal #uofg-modal-dismiss > svg {
+  display: block;
+  height: 1em;
+  fill: currentColor;
+}
+#uofg-modal > #uofg-modal-content {
+  position: absolute;
+  left: 50%;
+  transition: transform 0.3s ease-in-out;
+  transform: translate(-50%, -50px);
+  z-index: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  #uofg-modal > #uofg-modal-content {
+    transition: none;
+  }
+}
+#uofg-modal > #uofg-modal-content.centered {
+  top: 50%;
+  transform: translate(-50%, calc(-50% - 50px));
+}
+#uofg-modal.open {
+  visibility: visible;
+  opacity: 1;
+}
+#uofg-modal.open #uofg-modal-content {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+#uofg-modal.open #uofg-modal-content.centered {
+  transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,325 @@
+import { h } from "@stencil/core";
+import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
+import { faTimes } from "@fortawesome/pro-solid-svg-icons";
+import { getAllFocusableElements } from "../../utils/utils";
+export class UofgModal {
+  constructor() {
+    this.label = undefined;
+    this.alertDialog = false;
+    this.centered = false;
+    this.staticBackdrop = false;
+    this.autoOpen = false;
+    this.isOpen = false;
+  }
+  connectedCallback() {
+    // Bind event handlers so that 'this' is always the component instance.
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    if (this.autoOpen) {
+      this.isOpen = true;
+    }
+  }
+  handleClick(e) {
+    if (!this.staticBackdrop && e.target === e.currentTarget) {
+      this.isOpen = false;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === 'Tab') {
+      const focusableElements = getAllFocusableElements(this.el);
+      const firstFocusable = this.dismissButton; // The dismiss button is always the first focusable element in the modal.
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      if (e.target === firstFocusable && e.shiftKey) {
+        e.preventDefault();
+        lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.focus();
+      }
+      else if (e.target === lastFocusable && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+      }
+    }
+  }
+  handleIsOpenChange(newValue) {
+    if (newValue === true) {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            this.dismissButton.focus();
+          });
+        });
+      });
+    }
+  }
+  render() {
+    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.isOpen ? (this.alertDialog ? 'alertdialog' : 'dialog') : '', "aria-modal": this.isOpen, "aria-label": this.label, "aria-hidden": !this.isOpen, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("div", { id: "uofg-modal-content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
+  }
+  /**
+   * Get the current state of the modal.
+   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+   */
+  async getState() {
+    return this.isOpen;
+  }
+  /**
+   * Set the state of the modal.
+   * @param value The new state, set it to true to open the modal, or false to close the modal.
+   */
+  async setState(value) {
+    this.isOpen = value;
+  }
+  /**
+   * Toggle the state of the modal.
+   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+    return this.isOpen;
+  }
+  /**
+   * Closes the modal.
+   * @returns empty Promise.
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  /**
+   * Opens the modal.
+   * @returns empty Promise.
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  static get is() { return "uofg-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the modal. It is recommended that you set this to describe the modal's content.\nThis is required for accessibility."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "alertDialog": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal should be rendered as an alert dialog.\nThis is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.\nIf this is set to true, the modal will be rendered with a role of \"alertdialog\" instead of \"dialog\"."
+        },
+        "attribute": "alert-dialog",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "centered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal content is centered vertically."
+        },
+        "attribute": "centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "staticBackdrop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether clicking on the backdrop of the modal will close the modal.\nIf this is set to true, clicking on the backdrop will NOT close the modal."
+        },
+        "attribute": "static-backdrop",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "autoOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal should open automatically when the component is first rendered.\nIt is important to ensure this is only set to true for ONE modal on the page."
+        },
+        "attribute": "auto-open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+  static get methods() {
+    return {
+      "getState": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Get the current state of the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "A promise which will resolve to true when the modal is open, or false when the modal is closed."
+            }]
+        }
+      },
+      "setState": {
+        "complexType": {
+          "signature": "(value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "value The new state, set it to true to open the modal, or false to close the modal."
+                }],
+              "text": "The new state, set it to true to open the modal, or false to close the modal."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set the state of the modal.",
+          "tags": [{
+              "name": "param",
+              "text": "value The new state, set it to true to open the modal, or false to close the modal."
+            }]
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Toggle the state of the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "A promise which will resolve to true (if the modal opened) or false (if the modal closed)."
+            }]
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Closes the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "empty Promise."
+            }]
+        }
+      },
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Opens the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "empty Promise."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "handleIsOpenChange"
+      }];
+  }
+}

package/dist/collection/utils/utils.js

@@ -0,0 +1,6 @@
+export const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
+export const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const getAllFocusableElements = (container) => {
+  const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
+  return Array.from(container.querySelectorAll(query));
+};

package/dist/components/font-awesome-icon.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core/internal/client';
+
+const FontAwesomeIcon = props => {
+  const width = props.icon.icon[0];
+  const height = props.icon.icon[1];
+  const iconPathData = props.icon.icon[4];
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(path => h("path", { d: path }))) : (h("path", { d: iconPathData }))));
+};
+
+export { FontAwesomeIcon as F };

package/dist/components/index.d.ts

@@ -1,10 +1,16 @@
 /* UofgWebComponents custom elements */
+export { UofgAlert as UofgAlert } from '../types/components/uofg-alert/uofg-alert';
+export { defineCustomElement as defineCustomElementUofgAlert } from './uofg-alert';
+export { UofgBackToTop as UofgBackToTop } from '../types/components/uofg-back-to-top/uofg-back-to-top';
+export { defineCustomElement as defineCustomElementUofgBackToTop } from './uofg-back-to-top';
 export { UofgFooter as UofgFooter } from '../types/components/uofg-footer/uofg-footer';
 export { defineCustomElement as defineCustomElementUofgFooter } from './uofg-footer';
 export { UofgHeader as UofgHeader } from '../types/components/uofg-header/uofg-header';
 export { defineCustomElement as defineCustomElementUofgHeader } from './uofg-header';
 export { UofgMenu as UofgMenu } from '../types/components/uofg-menu/uofg-menu';
 export { defineCustomElement as defineCustomElementUofgMenu } from './uofg-menu';
+export { UofgModal as UofgModal } from '../types/components/uofg-modal/uofg-modal';
+export { defineCustomElement as defineCustomElementUofgModal } from './uofg-modal';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -1,4 +1,7 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { UofgAlert, defineCustomElement as defineCustomElementUofgAlert } from './uofg-alert.js';
+export { UofgBackToTop, defineCustomElement as defineCustomElementUofgBackToTop } from './uofg-back-to-top.js';
 export { UofgFooter, defineCustomElement as defineCustomElementUofgFooter } from './uofg-footer.js';
 export { UofgHeader, defineCustomElement as defineCustomElementUofgHeader } from './uofg-header.js';
 export { UofgMenu, defineCustomElement as defineCustomElementUofgMenu } from './uofg-menu.js';
+export { UofgModal, defineCustomElement as defineCustomElementUofgModal } from './uofg-modal.js';