@uoguelph/web-components 0.0.7

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

@@ -0,0 +1,548 @@
+* {
+  box-sizing: border-box;
+}
+
+:focus-visible {
+  outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
+}
+
+a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul > li {
+  display: contents;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+button[type=submit] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #d50029;
+  color: #fff;
+  padding: 0.5rem;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+input[type=text],
+input[type=password] {
+  background-color: #eff6f7;
+  border: 1px solid #69a3b9;
+  padding: 1rem;
+  color: #555555;
+  font-size: inherit;
+  font-family: inherit;
+}
+input[type=text]:focus-visible, input[type=text]:focus,
+input[type=password]:focus-visible,
+input[type=password]:focus {
+  outline: none;
+  background-color: #fffdf7;
+}
+
+uofg-menu {
+  --uofg-menu-animation-type: slide;
+  --uofg-menu-animation-duration: 0.2s;
+  --uofg-menu-animation-easing: ease-in-out;
+  display: block;
+  position: relative;
+}
+uofg-menu > [slot=button] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 0 1rem;
+}
+uofg-menu > [slot=button] > svg {
+  height: 1em;
+  fill: currentColor;
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+uofg-menu > [slot=content] {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 1;
+  min-width: 20rem;
+  right: 0;
+  background-color: #fff;
+  color: #000;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+}
+
+#uofg-header {
+  position: relative;
+  width: 100%;
+  z-index: 10000;
+  font-size: 1.6rem;
+  font-family: "Roboto Condensed", Arial, sans-serif;
+}
+
+#uofg-header-top-content-container,
+#uofg-header-main-content-container,
+#uofg-header-sub-content-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 calc((100vw - 1500px) / 2);
+}
+
+#uofg-header-top-content-container {
+  height: 3.5rem;
+  background-color: #fff;
+  color: #000;
+  z-index: 3;
+}
+#uofg-header-top-content-container > ul {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+#uofg-header-top-content-container > ul > li > a {
+  height: 100%;
+  padding: 0 1rem;
+}
+#uofg-header-top-content-container > ul > li > a:hover, #uofg-header-top-content-container > ul > li > a:focus-visible, #uofg-header-top-content-container > ul > li > a[aria-expanded=true] {
+  background-color: #ddd;
+}
+#uofg-header-top-content-container > uofg-menu {
+  height: 100%;
+}
+#uofg-header-top-content-container > uofg-menu > [slot=button] {
+  padding: 0 1rem;
+  background-color: #ffc72a;
+  color: #000;
+  font-weight: bold;
+}
+#uofg-header-top-content-container > uofg-menu > [slot=button]:hover, #uofg-header-top-content-container > uofg-menu > [slot=button]:focus-visible, #uofg-header-top-content-container > uofg-menu > [slot=button][aria-expanded=true] {
+  background-color: #ccc;
+  color: #000;
+}
+#uofg-header-top-content-container > uofg-menu > [slot=button][aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
+#uofg-header-top-content-container > uofg-menu > [slot=content] {
+  background-color: #ddd;
+  color: #000;
+}
+#uofg-header-top-content-container > uofg-menu > [slot=content] a {
+  height: 100%;
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+#uofg-header-top-content-container > uofg-menu > [slot=content] a:hover, #uofg-header-top-content-container > uofg-menu > [slot=content] a:focus-visible {
+  background-color: #ffc72a;
+}
+
+#uofg-header-main-content-container {
+  height: 5rem;
+  background-color: #000;
+  color: #fff;
+  z-index: 2;
+}
+#uofg-header-main-content-container > * {
+  height: 100%;
+}
+#uofg-header-main-content-container.full-height {
+  height: 8rem;
+}
+
+#uofg-header-logo-container {
+  display: flex;
+  height: 100%;
+  margin-right: auto;
+  overflow: hidden;
+}
+#uofg-header-logo-container > * {
+  height: 100%;
+}
+#uofg-header-logo-container svg {
+  width: auto;
+}
+
+#uofg-header-decorative-img {
+  position: absolute;
+  left: 0;
+}
+#uofg-header-decorative-img > svg {
+  height: 100%;
+}
+@media screen and (max-width: 1500px) {
+  #uofg-header-decorative-img {
+    position: static;
+  }
+}
+
+#uofg-header-logo {
+  height: 100%;
+  position: relative;
+  margin-left: 1rem;
+  transition: opacity 0.2s ease-in-out;
+}
+#uofg-header-logo > svg {
+  height: 100%;
+}
+#uofg-header-logo:hover, #uofg-header-logo:focus-visible {
+  opacity: 0.8;
+}
+@media screen and (min-width: 1500px) and (max-width: calc(1500px + 7rem)) {
+  #uofg-header-logo {
+    position: absolute;
+    left: 0;
+    margin-left: 7rem;
+  }
+}
+
+#uofg-header-full-main-content,
+#uofg-header-reduced-main-content {
+  display: flex;
+}
+#uofg-header-full-main-content svg,
+#uofg-header-reduced-main-content svg {
+  height: 1em;
+  fill: currentColor;
+}
+
+#uofg-header-full-main-content > ul {
+  display: flex;
+  align-items: center;
+}
+#uofg-header-full-main-content > ul > li > a,
+#uofg-header-full-main-content > a,
+#uofg-header-full-main-content > uofg-menu > [slot=button] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 1.5rem;
+  font-size: 1.8rem;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+#uofg-header-full-main-content > ul > li > a:hover, #uofg-header-full-main-content > ul > li > a:focus-visible,
+#uofg-header-full-main-content > a:hover,
+#uofg-header-full-main-content > a:focus-visible,
+#uofg-header-full-main-content > uofg-menu > [slot=button]:hover,
+#uofg-header-full-main-content > uofg-menu > [slot=button]:focus-visible {
+  background-color: #333;
+  color: #ffc72a;
+}
+#uofg-header-full-main-content > uofg-menu > [slot=button] {
+  color: #ffc72a;
+}
+#uofg-header-full-main-content > uofg-menu > [slot=content] {
+  color: #000;
+  background-color: #fff;
+  padding: 2rem;
+  width: 35rem;
+}
+#uofg-header-full-main-content > uofg-menu > [slot=content] > span {
+  display: block;
+  font-size: 2.4rem;
+  font-weight: bold;
+  padding: 1rem 0;
+}
+#uofg-header-full-main-content > a {
+  color: #ffc72a;
+}
+
+#uofg-header-reduced-main-content > uofg-menu > [slot=button],
+#uofg-header-reduced-main-content > a {
+  justify-content: center;
+  padding: 0 1.5rem;
+  font-size: 2rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.15);
+}
+#uofg-header-reduced-main-content > uofg-menu > [slot=button]:hover, #uofg-header-reduced-main-content > uofg-menu > [slot=button]:focus-visible, #uofg-header-reduced-main-content > uofg-menu > [slot=button][aria-expanded=true],
+#uofg-header-reduced-main-content > a:hover,
+#uofg-header-reduced-main-content > a:focus-visible,
+#uofg-header-reduced-main-content > a[aria-expanded=true] {
+  background-color: #fff;
+  color: #000;
+}
+#uofg-header-reduced-main-content > uofg-menu {
+  position: static;
+  height: 100%;
+}
+#uofg-header-reduced-main-content > uofg-menu > [slot=content] {
+  background-color: #fff;
+  color: #000;
+  width: 100%;
+  padding: 1rem 2rem 2rem;
+}
+#uofg-header-reduced-main-content > uofg-menu > [slot=content] > span {
+  display: block;
+  font-size: 2.4rem;
+  font-weight: bold;
+  padding: 1rem 0;
+}
+
+#uofg-header-main-menu > [slot=content] {
+  overflow-y: auto;
+  max-height: calc(100vh - 5rem);
+}
+#uofg-header-main-menu uofg-menu {
+  position: relative;
+}
+#uofg-header-main-menu uofg-menu > [slot=button] {
+  display: flex;
+  padding: 0.75rem;
+  height: auto;
+  width: 100%;
+  color: inherit;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#uofg-header-main-menu uofg-menu > [slot=button] > svg {
+  margin-left: auto;
+}
+#uofg-header-main-menu uofg-menu > [slot=button]:hover, #uofg-header-main-menu uofg-menu > [slot=button]:focus-visible, #uofg-header-main-menu uofg-menu > [slot=button][aria-expanded=true] {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+#uofg-header-main-menu uofg-menu > [slot=button][aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
+#uofg-header-main-menu uofg-menu > [slot=content] {
+  position: relative;
+  box-shadow: none;
+  padding: 0;
+}
+#uofg-header-main-menu uofg-menu > [slot=content] > li > a {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+#uofg-header-main-menu uofg-menu > [slot=content] > li > a:hover, #uofg-header-main-menu uofg-menu > [slot=content] > li > a:focus-visible {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu > [slot=button] {
+  background-color: #ffc72a;
+  color: #000;
+  font-weight: bold;
+}
+#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu > [slot=content] {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #000;
+}
+#uofg-header-main-menu ul > li > a {
+  padding: 0.75rem;
+  width: 100%;
+  color: inherit;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+#uofg-header-main-menu ul > li > a:hover, #uofg-header-main-menu ul > li > a:focus-visible, #uofg-header-main-menu ul > li > a[aria-expanded=true] {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/*
+.uofg-header-account-menu {
+  .uofg-header-single-sign-on {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1rem;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    > input[type='text'],
+    > input[type='password'] {
+      height: 4rem;
+      width: 100%;
+    }
+
+    > button[type='submit'] {
+      height: 4rem;
+      width: 100%;
+      margin-top: 1rem;
+    }
+
+    > a {
+      color: #69a3b9;
+      text-decoration: underline;
+    }
+  }
+}
+*/
+.uofg-header-search-menu .uofg-header-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uofg-header-search-menu .uofg-header-search-bar > input {
+  flex: 1;
+}
+.uofg-header-search-menu .uofg-header-search-bar > button[type=submit] {
+  width: 4rem;
+  height: 4rem;
+}
+
+#uofg-header-sub-content-container {
+  height: 4rem;
+  background-color: #ddd;
+  color: #000;
+  z-index: 1;
+}
+#uofg-header-sub-content-container #uofg-header-page-title {
+  display: flex;
+  align-items: center;
+  margin-right: auto;
+  padding: 0 1rem;
+  height: 100%;
+  font-weight: bold;
+}
+#uofg-header-sub-content-container uofg-menu {
+  position: relative;
+  height: 100%;
+}
+#uofg-header-sub-content-container uofg-menu > [slot=button] {
+  color: inherit;
+}
+#uofg-header-sub-content-container uofg-menu > [slot=button]:hover, #uofg-header-sub-content-container uofg-menu > [slot=button]:focus-visible, #uofg-header-sub-content-container uofg-menu > [slot=button][aria-expanded=true] {
+  background-color: #ffc72a;
+  color: #000;
+}
+#uofg-header-sub-content-container uofg-menu > [slot=content] {
+  position: absolute;
+  background-color: #ddd;
+  color: #000;
+}
+#uofg-header-sub-content-container uofg-menu > [slot=content] > li:not(:last-child) > a {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#uofg-header-sub-content-container uofg-menu > [slot=content] > li > a {
+  padding: 0.75rem;
+  justify-content: flex-start;
+}
+#uofg-header-sub-content-container a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+#uofg-header-sub-content-container a:hover, #uofg-header-sub-content-container a:focus-visible {
+  background-color: #ffc72a;
+  color: #000;
+}
+
+#uofg-header-full-sub-content,
+#uofg-header-reduced-sub-content {
+  height: 100%;
+}
+#uofg-header-full-sub-content a,
+#uofg-header-reduced-sub-content a {
+  padding: 0 0.5rem;
+}
+
+#uofg-header-full-sub-content {
+  height: 100%;
+}
+#uofg-header-full-sub-content > ul {
+  display: flex;
+  align-items: center;
+}
+#uofg-header-full-sub-content uofg-menu > [slot=button][aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
+#uofg-header-full-sub-content .uofg-header-page-specific {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+#uofg-header-reduced-sub-content > uofg-menu {
+  position: static;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=button] {
+  font-size: 2rem;
+  padding: 0 1.5rem;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] {
+  background-color: #fff;
+  color: #000;
+  padding: 2rem;
+  overflow-y: auto;
+  max-height: calc(100vh - 5rem - 4rem);
+  width: 100%;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] > span {
+  display: block;
+  font-size: 2.4rem;
+  font-weight: bold;
+  padding: 1rem 0;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] a {
+  height: auto;
+  padding: 1rem;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] a:hover, #uofg-header-reduced-sub-content > uofg-menu > [slot=content] a:focus-visible {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #000;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu {
+  height: auto;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button] {
+  width: 100%;
+  padding: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button] > svg {
+  margin-left: auto;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button]:hover, #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button]:focus-visible, #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button][aria-expanded=true] {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #000;
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button][aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
+#uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=content] {
+  position: static;
+  background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
+}

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

@@ -0,0 +1,131 @@
+import { h } from '@stencil/core';
+import { PageSpecific } from './page-specific';
+import Decoration from './decoration.svg';
+import FullSizeLogo from './logo-full-size.svg';
+import ReducedSizeLogo from './logo-reduced-size.svg';
+import { GlobalLinks } from './global-links';
+import { FontAwesomeIcon } from '../../utils/font-awesome-icon';
+import { faBars, faRightToBracket, faSearch } from '@fortawesome/pro-solid-svg-icons';
+import { HelloYou } from './hello-you';
+import { SearchBar } from './search';
+export class UofgHeader {
+  constructor() {
+    this.pageTitle = '';
+    this.pageUrl = '';
+    this.isFullSize = false;
+    this.pageSpecificContent = undefined;
+  }
+  connectedCallback() {
+    var _a;
+    this.updateFullSize();
+    this.updatePageSpecificContent();
+    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+      this.updatePageSpecificContent();
+    }));
+    this.observer.observe(this.el, { childList: true });
+  }
+  updateFullSize() {
+    this.isFullSize = window.innerWidth >= 1024;
+  }
+  updatePageSpecificContent() {
+    var _a;
+    const aToPageSpecificLink = (a) => {
+      const attributes = {};
+      a.getAttributeNames()
+        .filter((name) => name !== 'href')
+        .forEach((name) => (attributes[name] = a.getAttribute(name)));
+      return {
+        href: a.getAttribute('href'),
+        text: a.textContent,
+        attributes
+      };
+    };
+    const firstChild = (_a = this.el) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    const root = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.tagName) == 'TEMPLATE' ? firstChild === null || firstChild === void 0 ? void 0 : firstChild.content : this.el;
+    this.pageSpecificContent = Array.from(root.children)
+      .filter((child) => child.tagName === 'A' || child.tagName === 'UL')
+      .map((child) => {
+      switch (child.tagName) {
+        case 'A':
+          return aToPageSpecificLink(child);
+        case 'UL':
+          return {
+            title: child.getAttribute('data-title'),
+            links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink)
+          };
+      }
+    });
+  }
+  render() {
+    return (h("header", { id: "uofg-header" }, this.isFullSize && (h("div", { id: "uofg-header-top-content-container" }, h("ul", null, h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "/new-header/apply" }, "APPLY")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))), h(HelloYou, { autoCollapse: true }))), h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, h("div", { id: "uofg-header-logo-container" }, this.isFullSize && h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), h("a", { id: "uofg-header-logo", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, h(GlobalLinks, null), h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))), h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu" }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(GlobalLinks, null), h(HelloYou, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
+      (this.pageUrl ? (h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapseMenus: true }))) : (h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
+  }
+  static get is() { return "uofg-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pageTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "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\"."
+        },
+        "attribute": "page-title",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "pageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "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/\"."
+        },
+        "attribute": "page-url",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isFullSize": {},
+      "pageSpecificContent": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "updateFullSize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}