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

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

@@ -7,166 +7,247 @@ import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
 import { faRightToBracket } from "@fortawesome/free-solid-svg-icons/faRightToBracket";
 import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
-const TopLinks = () => (h("ul", null, h("li", null, h("a", { href: "https://uoguelph.ca/apply/" }, "APPLY")), h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))));
-const HelloMenu = props => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, h("button", { slot: "button" }, h("span", null, "HELLO!"), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content" }, h("li", null, h("a", { href: "https://uoguelph.ca/future-students" }, "Future Students")), h("li", null, h("a", { href: "https://www.uoguelph.ca/students" }, "Current Students")), h("li", null, h("a", { href: "https://alumni.uoguelph.ca/" }, "Alumni & Donors")), h("li", null, h("a", { href: "https://www.uoguelph.ca/faculty" }, "Faculty & Staff")), h("li", null, h("a", { href: "https://cecs.uoguelph.ca/employers-institutions" }, "Employers & Partners")))));
-const MainLinks = () => (h("ul", { class: "uofg-header-global-links" }, h("li", null, h("a", { href: "https://uoguelph.ca/about" }, "About")), h("li", null, h("a", { href: "https://www.uoguelph.ca/explore-all-programs/" }, "Academics")), h("li", null, h("a", { href: "https://uoguelph.ca/admissions" }, "Admission")), h("li", null, h("a", { href: "https://uoguelph.ca/research" }, "Research")), h("li", null, h("a", { href: "https://www.uoguelph.ca/studentexperience/" }, "Student Life"))));
-const AccountLink = () => (h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "University of Guelph Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })));
-const SearchLink = () => (h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, h(FontAwesomeIcon, { icon: faSearch })));
-const PageSpecific = props => {
-  var _a;
-  return (h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(item => {
-    if (!item) {
-      return null;
-    }
-    if ('text' in item) {
-      return (h("li", null, h("a", Object.assign({ href: item.href }, item.attributes), item.text)));
-    }
-    return (h("li", null, h("uofg-menu", { autoCollapse: props.autoCollapse }, h("button", { slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content" }, item.links.map(link => (h("li", null, h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
-  }).filter(Boolean)));
-};
 const TRANSITION_BREAKPOINT = 1024;
 const MAX_CONTENT_WIDTH = 1320;
+const MENU_CHAR_LIMIT = 35;
+const topLinks = [
+    {
+        text: 'GIVE',
+        href: 'https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg',
+    },
+    {
+        text: 'NEWS',
+        href: 'https://news.uoguelph.ca/',
+    },
+    {
+        text: 'APPLY',
+        href: 'https://uoguelph.ca/apply/',
+        highlight: true,
+    },
+];
+const mainLinks = [
+    {
+        text: 'About',
+        href: 'https://uoguelph.ca/about',
+    },
+    {
+        text: 'Academics',
+        href: 'https://www.uoguelph.ca/explore-all-programs/',
+    },
+    {
+        text: 'Admission',
+        href: 'https://uoguelph.ca/admissions',
+    },
+    {
+        text: 'Research',
+        href: 'https://uoguelph.ca/research',
+    },
+    {
+        text: 'Student Life',
+        href: 'https://www.uoguelph.ca/studentexperience/',
+    },
+];
+const iconButtons = [
+    {
+        text: 'University of Guelph Intranet',
+        href: 'https://intranet.uoguelph.ca/',
+        icon: faRightToBracket,
+    },
+    {
+        text: 'Search the University of Guelph',
+        href: 'https://uoguelph.ca/search',
+        icon: faSearch,
+    },
+];
+const resources = [
+    {
+        text: 'Future Students',
+        href: 'https://uoguelph.ca/future-students',
+    },
+    {
+        text: 'Current Students',
+        href: 'https://www.uoguelph.ca/students',
+    },
+    {
+        text: 'Alumni & Donors',
+        href: 'https://alumni.uoguelph.ca/',
+    },
+    {
+        text: 'Faculty & Staff',
+        href: 'https://www.uoguelph.ca/faculty',
+    },
+    {
+        text: 'Employers & Partners',
+        href: 'https://cecs.uoguelph.ca/employers-institutions',
+    },
+];
 export class UofgHeader {
-  constructor() {
-    this.subContainerOverflowWidth = NaN;
-    this.needsOverflowWidthUpdate = false;
-    this.pageTitle = '';
-    this.pageUrl = '';
-    this.isFullSize = false;
-    this.pageSpecificContent = undefined;
-    this.isSubContainerOverflowing = false;
-  }
-  connectedCallback() {
-    var _a;
-    this.updateFullSize();
-    this.updatePageSpecificContent();
-    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
-      this.updatePageSpecificContent();
-      this.subContainerOverflowWidth = NaN; // Reset overflow width as it will have changed and needs to be recalculated
-      this.needsOverflowWidthUpdate = true;
-    }));
-    this.observer.observe(this.el, { childList: true, subtree: true });
-  }
-  componentDidLoad() {
-    this.updateSubContainerOverflow();
-  }
-  updateFullSize() {
-    this.isFullSize = window.innerWidth >= TRANSITION_BREAKPOINT;
-    this.updateSubContainerOverflow();
-  }
-  updateSubContainerOverflow() {
-    if (this.isFullSize && this.subContainer) {
-      const { clientWidth, scrollWidth } = this.subContainer;
-      if (scrollWidth > clientWidth) {
-        this.subContainerOverflowWidth = scrollWidth;
-      }
-      this.isSubContainerOverflowing = this.subContainerOverflowWidth > Math.min(clientWidth, MAX_CONTENT_WIDTH);
+    constructor() {
+        this.subContainerOverflowWidth = NaN;
+        this.needsOverflowWidthUpdate = false;
+        this.pageTitle = '';
+        this.pageUrl = '';
+        this.isFullSize = false;
+        this.pageSpecificContent = undefined;
+        this.isSubContainerOverflowing = false;
+    }
+    connectedCallback() {
+        var _a;
+        this.updateFullSize();
+        this.updatePageSpecificContent();
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+            this.updatePageSpecificContent();
+            this.subContainerOverflowWidth = NaN; // Reset overflow width as it will have changed and needs to be recalculated
+            this.needsOverflowWidthUpdate = true;
+        }));
+        this.observer.observe(this.el, { childList: true, subtree: true });
+    }
+    componentDidLoad() {
+        this.updateSubContainerOverflow();
+    }
+    updateFullSize() {
+        this.isFullSize = window.innerWidth >= TRANSITION_BREAKPOINT;
+        this.updateSubContainerOverflow();
+    }
+    updateSubContainerOverflow() {
+        if (this.isFullSize && this.subContainer) {
+            const { clientWidth, scrollWidth } = this.subContainer;
+            if (scrollWidth > clientWidth) {
+                this.subContainerOverflowWidth = scrollWidth;
+            }
+            this.isSubContainerOverflowing = this.subContainerOverflowWidth > Math.min(clientWidth, MAX_CONTENT_WIDTH);
+        }
+    }
+    componentDidRender() {
+        if (this.needsOverflowWidthUpdate) {
+            window.requestAnimationFrame(() => this.updateSubContainerOverflow());
+            this.needsOverflowWidthUpdate = false;
+        }
+    }
+    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,
+            };
+        };
+        this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
+            .filter(child => child.tagName === 'A' || child.tagName === 'UL')
+            .map(child => {
+            switch (child.tagName) {
+                case 'A':
+                    return aToPageSpecificLink(child);
+                case 'UL':
+                    const value = {
+                        title: child.getAttribute('data-title'),
+                        links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink),
+                    };
+                    value.wrapContent = value.links.reduce((shouldWrap, link) => {
+                        if (link.text.length > MENU_CHAR_LIMIT) {
+                            shouldWrap = true;
+                        }
+                        return shouldWrap;
+                    }, false);
+                    return value;
+            }
+        })
+            .filter(val => Boolean(val));
+    }
+    render() {
+        var _a, _b;
+        return (h("header", { key: 'd35a681463c288077d5350f451042e836354adc0', class: "tw-relative tw-z-[1000] tw-w-full tw-font-condensed tw-text-2xl" }, this.isFullSize && (h("div", { class: "tw-flex tw-h-16 tw-justify-end tw-bg-white tw-px-[calc((100%-1320px)/2)] tw-text-3xl" }, h("uofg-menu", { class: "tw-relative tw-block tw-h-full", "auto-collapse": true }, h("button", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, "Resources"), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", class: "tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-min-w-[20rem] tw-flex-col tw-bg-uofg-grey [&>li]:tw-contents" }, resources.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-500 tw-p-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: item.href }, item.text)))))), h("ul", { class: "tw-contents [&>li]:tw-contents" }, topLinks.map(item => (h("li", null, h("a", { href: item.href, class: `tw-flex tw-items-center tw-justify-center tw-p-4 tw-transition-colors hover:tw-bg-uofg-grey ${item.highlight ? 'tw-bg-uofg-yellow' : ''}` }, item.text))))))), h("nav", { key: 'ee10d9e2a71f96f356d1ab66086b6efb6ca75703', class: {
+                'tw-h-[10rem]': this.isFullSize,
+                'tw-h-[5rem]': !this.isFullSize,
+                'tw-relative tw-flex tw-justify-between tw-bg-black tw-px-[calc((100%-1320px)/2)] tw-text-3xl tw-text-white': true,
+            }, "aria-label": "Main" }, h("div", { key: '3cdd4fc2c9f4f7211a0eb7cd5ce6d5ed1d7a9396', class: "tw-flex" }, this.isFullSize && (h("div", { class: "tw-left-0 tw-h-full tw-w-[7.5rem] min-[1320px]:tw-absolute [&>svg]:tw-h-full", innerHTML: Decoration })), h("a", { key: '106b18dafb1991baaed4c6ed03040c8cf04ee9c1', class: "tw-left-[max(calc((100%-1320px)/2),7.5rem)] tw-h-full tw-transition-opacity hocus:tw-opacity-75 min-[1320px]:tw-absolute [&>svg]:tw-h-full", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (h("ul", { class: "tw-flex tw-items-center tw-justify-center tw-text-4xl [&>li]:tw-contents" }, mainLinks.map(item => (h("li", null, h("a", { href: item.href, class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-b-8 tw-border-solid tw-border-transparent tw-p-4 tw-pt-8 tw-transition-colors hover:tw-border-uofg-yellow hover:tw-text-uofg-yellow" }, item.text)))), iconButtons.map(item => (h("li", null, h("a", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-b-8 tw-border-solid tw-border-transparent tw-p-4 tw-pt-8 tw-text-uofg-yellow tw-transition-colors hover:tw-border-uofg-yellow hover:tw-text-white [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", href: item.href, "aria-label": item.text }, h(FontAwesomeIcon, { icon: item.icon }))))))) : (h("div", { class: "tw-flex tw-h-full" }, iconButtons.map(item => (h("a", { class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-950 tw-px-5 tw-transition-colors [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", href: item.href, "aria-label": item.text }, h(FontAwesomeIcon, { icon: item.icon })))), h("uofg-menu", { class: "tw-block tw-h-full", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu", class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-950 tw-px-5 tw-transition-colors aria-expanded:tw-bg-white aria-expanded:tw-text-black [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current" }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content", class: "tw-absolute tw-left-0 tw-top-full tw-z-50 tw-flex tw-w-full tw-flex-col tw-bg-white tw-px-4 tw-text-black tw-shadow-md" }, h("span", { class: "tw-my-4 tw-text-4xl tw-font-bold" }, "University of Guelph"), h("ul", { class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, mainLinks.concat(topLinks).map(item => (h("li", null, h("a", { href: item.href, class: `tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey ${(item === null || item === void 0 ? void 0 : item.highlight) ? 'tw-bg-uofg-yellow' : ''}` }, item.text))))), h("uofg-menu", { class: "tw-relative tw-block tw-h-full tw-pb-6 tw-text-black", "auto-collapse": false }, h("button", { class: "tw-flex tw-h-auto tw-w-full tw-items-center tw-justify-between tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, "Resources"), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, resources.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey", href: item.href }, item.text))))))))))), this.pageSpecificContent.length > 0 && (h("nav", { ref: node => (this.subContainer = node), "aria-label": "Department/Topic", class: "tw-align-items tw-relative tw-flex tw-h-[5rem] tw-justify-end tw-bg-uofg-grey tw-px-[calc((100%-1320px)/2)] tw-text-3xl lg:tw-h-16" }, this.pageTitle &&
+            (this.pageUrl != '' ? (h("a", { class: "tw-mr-auto tw-flex tw-h-full tw-items-center tw-justify-center tw-px-4 tw-font-bold tw-transition-colors hover:tw-bg-uofg-yellow", href: this.pageUrl }, this.pageTitle)) : (h("span", { class: "tw-mr-auto tw-flex tw-h-full tw-items-center tw-justify-center tw-px-4" }, this.pageTitle))), this.isFullSize && !this.isSubContainerOverflowing ? (h("ul", { class: "tw-flex tw-items-center tw-justify-center [&>li]:tw-contents" }, (_a = this.pageSpecificContent) === null || _a === void 0 ? void 0 : _a.map(item => {
+            if ('text' in item) {
+                return (h("li", null, h("a", Object.assign({ class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: item.href }, item.attributes), item.text)));
+            }
+            return (h("li", null, h("uofg-menu", { class: "tw-relative tw-h-full", "auto-collapse": true }, h("button", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-transition-colors hover:tw-bg-uofg-yellow aria-expanded:tw-bg-uofg-yellow [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", slot: "button" }, h("span", null, item === null || item === void 0 ? void 0 : item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", class: {
+                    'tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-min-w-[20rem] tw-flex-col tw-bg-uofg-grey [&>li]:tw-contents': true,
+                    'wrap-content': item.wrapContent || false,
+                } }, item.links.map(link => (h("li", null, h("a", Object.assign({ class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-500 tw-p-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: link.href }, link.attributes), link.text))))))));
+        }))) : (h("uofg-menu", { class: "tw-block tw-h-full lg:tw-relative", "auto-collapse": true }, h("button", { class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-300 tw-px-6 tw-transition-colors aria-expanded:tw-bg-uofg-yellow lg:tw-border-l-0 [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("ul", { class: "tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-w-full tw-flex-col tw-bg-white tw-px-4 tw-text-black tw-shadow-md lg:tw-w-[30rem] [&>li]:tw-contents", slot: "content" }, (_b = this.pageSpecificContent) === null || _b === void 0 ? void 0 : _b.map(item => {
+            if ('text' in item) {
+                return (h("li", { class: "[&>a]:last:tw-pb-4" }, h("a", { href: item.href, class: "tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey" }, item.text)));
+            }
+            return (h("li", { class: "[&>uofg-menu]:last:tw-pb-6" }, h("uofg-menu", { class: "tw-relative tw-block tw-h-full tw-text-black", "auto-collapse": false }, h("button", { class: "tw-flex tw-h-auto tw-w-full tw-items-center tw-justify-between tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, item.links.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey", href: item.href }, item.text))))))));
+        }))))))));
+    }
+    static get is() { return "uofg-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["uofg-header.css"]
+        };
+    }
+    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 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,
+                "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 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,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFullSize": {},
+            "pageSpecificContent": {},
+            "isSubContainerOverflowing": {}
+        };
     }
-  }
-  componentDidRender() {
-    if (this.needsOverflowWidthUpdate) {
-      window.requestAnimationFrame(() => this.updateSubContainerOverflow());
-      this.needsOverflowWidthUpdate = false;
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "updateFullSize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
     }
-  }
-  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,
-      };
-    };
-    this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.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(TopLinks, null), h(HelloMenu, { autoCollapse: true }))), h("nav", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize }, "aria-label": "Main" }, 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(MainLinks, null), h(AccountLink, null), h(SearchLink, null))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h(AccountLink, null), h(SearchLink, 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(MainLinks, null), h(HelloMenu, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("nav", { id: "uofg-header-sub-content-container", ref: node => (this.subContainer = node), "aria-label": "Department/Topic" }, 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 && !this.isSubContainerOverflowing ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapse: 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, class: { overflowed: this.isSubContainerOverflowing && this.isFullSize } }, 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 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,
-        "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 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,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isFullSize": {},
-      "pageSpecificContent": {},
-      "isSubContainerOverflowing": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "updateFullSize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }