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

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

@@ -1,280 +0,0 @@
-import { h } from "@stencil/core";
-import Decoration from "./decoration.svg";
-import FullSizeLogo from "./logo-full.svg";
-import ReducedSizeLogo from "./logo-reduced.svg";
-import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
-import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
-import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
-import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
-import { attachTailwind } from "../../utils/utils";
-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: 'Quick Links',
-        links: [
-            {
-                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',
-            },
-        ],
-    },
-    {
-        text: 'APPLY NOW',
-        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 search = {
-    text: 'Search the University of Guelph',
-    href: 'https://uoguelph.ca/search',
-    icon: faSearch,
-};
-const account = {
-    text: 'Account Menu',
-    links: [
-        {
-            text: 'Intranet',
-            href: 'https://intranet.uoguelph.ca/',
-        },
-        {
-            text: 'WebAdvisor',
-            href: 'https://www.uoguelph.ca/webadvisor/',
-        },
-        {
-            text: 'GryphMail',
-            href: 'https://mail.uoguelph.ca/',
-        },
-        {
-            text: 'CourseLink',
-            href: 'https://courselink.uoguelph.ca/',
-        },
-        {
-            text: 'GryphLife',
-            href: 'https://gryphlife.uoguelph.ca/',
-        },
-    ],
-    icon: faUser,
-};
-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;
-        attachTailwind(this.el.shadowRoot);
-        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: '086e88ed7fc9986ccd763b97a2d030f28c70b2f5', class: "tw-relative tw-z-[1000] tw-w-full tw-font-condensed tw-text-2xl tw-text-black" }, 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("ul", { class: "tw-contents [&>li]:tw-contents" }, [...topLinks, account].map(item => {
-            if ('links' in item) {
-                return (h("li", null, 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-p-4 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': true,
-                        '[&>svg]:aria-expanded:tw-rotate-180': !item.icon,
-                    }, slot: "button" }, !item.icon && h("span", null, item.text.toUpperCase()), h(FontAwesomeIcon, { icon: item.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" }, item.links.map(link => (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: link.href }, link.text))))))));
-            }
-            return (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 tw-px-6 tw-font-bold' : ''}` }, item.text.toUpperCase())));
-        })))), h("nav", { key: '8512ab7abce3d2e54d60f2bb0c594c1ebfa3de6f', 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: '91ec9a844ce48c58dbbd298b04057457b81dd835', class: "tw-flex tw-w-fit" }, this.isFullSize && (h("div", { class: "tw-left-0 tw-h-full tw-w-[7.5rem] min-[1320px]:tw-absolute [&>svg]:tw-block [&>svg]:tw-h-full [&>svg]:tw-w-auto", innerHTML: Decoration })), h("a", { key: '2e7ff366c59aea7e4760815c886db8303f3981a3', class: "tw-h-full tw-w-fit tw-transition-opacity hocus:tw-opacity-75 min-[1320px]:tw-absolute min-[1320px]:tw-left-[max(calc((100%-1320px)/2),7.5rem)] [&>svg]:tw-block [&>svg]:tw-h-full [&>svg]:tw-w-auto", 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-3xl tw-font-medium tw-tracking-wide [&>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-6 tw-pt-8 tw-transition-colors hover:tw-border-uofg-yellow hover:tw-text-uofg-yellow" }, item.text)))), 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-pb-6 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: search.href, "aria-label": search.text }, h(FontAwesomeIcon, { icon: search.icon }))))) : (h("div", { class: "tw-flex tw-h-full" }, 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: search.href, "aria-label": search.text }, h(FontAwesomeIcon, { icon: search.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: account.icon })), h("div", { slot: "content", class: "tw-absolute tw-left-0 tw-top-full tw-z-50 tw-flex tw-max-h-[calc(100vh-5rem)] tw-w-full tw-flex-col tw-overflow-y-auto tw-bg-white tw-px-4 tw-text-black tw-shadow-md" }, h("ul", { class: "tw-flex tw-w-full tw-flex-col tw-py-6 [&>li]:tw-contents" }, account.links.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-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-max-h-[calc(100vh-5rem)] tw-w-full tw-flex-col tw-overflow-y-auto 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 tw-pb-6 [&>li]:tw-contents" }, mainLinks.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)))), topLinks.map(item => {
-            if ('links' in item) {
-                return (h("li", null, 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.text), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, item.links.map(link => (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: link.href }, link.text))))))));
-            }
-            return (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 tw-font-bold' : ''}` }, 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 lg:tw-whitespace-nowrap" }, 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 tw-whitespace-normal 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 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
-            }];
-    }
-}