@uoguelph/web-components 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-160752dd.js → index-f0452ddd.js} +4 -8
- package/dist/cjs/loader.cjs.js +1 -10
- package/dist/cjs/uofg-footer_3.cjs.entry.js +24 -24
- package/dist/cjs/uofg-web-components.cjs.js +2 -5
- package/dist/collection/collection-manifest.json +4 -4
- package/dist/collection/components/uofg-footer/footer-links.js +4 -4
- package/dist/collection/components/uofg-footer/social-links.js +4 -4
- package/dist/collection/components/uofg-footer/uofg-footer.js +6 -6
- package/dist/collection/components/uofg-header/global-links.js +1 -1
- package/dist/collection/components/uofg-header/hello-you.js +4 -4
- package/dist/collection/components/uofg-header/page-specific.js +6 -6
- package/dist/collection/components/uofg-header/search.js +3 -3
- package/dist/collection/components/uofg-header/single-sign-on.js +1 -1
- package/dist/collection/components/uofg-header/uofg-header.js +16 -16
- package/dist/collection/components/uofg-menu/uofg-menu.js +21 -16
- package/dist/collection/utils/font-awesome-icon.js +3 -3
- package/dist/components/index2.js +2 -2
- package/dist/components/uofg-footer.js +2 -2
- package/dist/components/uofg-header.js +10 -10
- package/dist/components/uofg-menu2.js +9 -9
- package/dist/esm/{index-48bb3110.js → index-24999f13.js} +4 -8
- package/dist/esm/loader.js +2 -11
- package/dist/esm/uofg-footer_3.entry.js +24 -24
- package/dist/esm/uofg-web-components.js +3 -6
- package/dist/uofg-web-components/{p-b6a9700a.js → p-b7dfbfdc.js} +1 -1
- package/dist/uofg-web-components/{p-d148b8e8.entry.js → p-d87070ab.entry.js} +1 -1
- package/dist/uofg-web-components/uofg-web-components.esm.js +1 -1
- package/{dist/loader → loader}/cdn.js +1 -1
- package/{dist/loader → loader}/index.cjs.js +1 -1
- package/{dist/loader → loader}/index.d.ts +1 -1
- package/loader/index.es2017.js +3 -0
- package/{dist/loader → loader}/index.js +2 -2
- package/package.json +10 -7
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/loader/index.es2017.js +0 -3
- /package/{dist/loader → loader}/package.json +0 -0
|
@@ -330,9 +330,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
|
|
|
330
330
|
}
|
|
331
331
|
styles.set(scopeId, style);
|
|
332
332
|
};
|
|
333
|
-
const addStyle = (styleContainerNode, cmpMeta, mode
|
|
333
|
+
const addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
334
334
|
var _a;
|
|
335
|
-
|
|
335
|
+
const scopeId = getScopeId(cmpMeta);
|
|
336
336
|
const style = styles.get(scopeId);
|
|
337
337
|
// if an element is NOT connected then getRootNode() will return the wrong root node
|
|
338
338
|
// so the fallback is to always use the document for the root node in those cases
|
|
@@ -347,11 +347,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
|
347
347
|
}
|
|
348
348
|
if (!appliedStyles.has(scopeId)) {
|
|
349
349
|
{
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
styleElm = doc.createElement('style');
|
|
353
|
-
styleElm.innerHTML = style;
|
|
354
|
-
}
|
|
350
|
+
styleElm = doc.createElement('style');
|
|
351
|
+
styleElm.innerHTML = style;
|
|
355
352
|
// Apply CSP nonce to the style tag if it exists
|
|
356
353
|
const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
|
|
357
354
|
if (nonce != null) {
|
|
@@ -376,7 +373,6 @@ const attachStyles = (hostRef) => {
|
|
|
376
373
|
const flags = cmpMeta.$flags$;
|
|
377
374
|
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
|
378
375
|
const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
|
|
379
|
-
// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
|
|
380
376
|
if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
|
|
381
377
|
// only required when we're NOT using native shadow dom (slot)
|
|
382
378
|
// or this browser doesn't support native shadow dom
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,20 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
|
|
7
|
-
/*
|
|
8
|
-
Stencil Client Patch Esm v3.4.0 | MIT Licensed | https://stenciljs.com
|
|
9
|
-
*/
|
|
10
|
-
const patchEsm = () => {
|
|
11
|
-
return index.promiseResolve();
|
|
12
|
-
};
|
|
5
|
+
const index = require('./index-f0452ddd.js');
|
|
13
6
|
|
|
14
7
|
const defineCustomElements = (win, options) => {
|
|
15
8
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
|
-
return patchEsm().then(() => {
|
|
17
9
|
return index.bootstrapLazy([["uofg-footer_3.cjs",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-footer"],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]},[[0,"onChildListChange","handleChildListChange"]]]]]], options);
|
|
18
|
-
});
|
|
19
10
|
};
|
|
20
11
|
|
|
21
12
|
exports.setNonce = index.setNonce;
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-f0452ddd.js');
|
|
6
6
|
|
|
7
|
-
const FontAwesomeIcon =
|
|
7
|
+
const FontAwesomeIcon = props => {
|
|
8
8
|
const width = props.icon.icon[0];
|
|
9
9
|
const height = props.icon.icon[1];
|
|
10
10
|
const iconPathData = props.icon.icon[4];
|
|
11
|
-
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(
|
|
11
|
+
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(path => index.h("path", { d: path }))) : (index.h("path", { d: iconPathData }))));
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
var faSquareTwitter = {
|
|
@@ -44,7 +44,7 @@ var faYoutube = {
|
|
|
44
44
|
icon: [576, 512, [61802], "f167", "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"]
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
-
const SocialLink =
|
|
47
|
+
const SocialLink = props => (index.h("li", null,
|
|
48
48
|
index.h("a", { href: props.url, "aria-label": props.name },
|
|
49
49
|
index.h(FontAwesomeIcon, { icon: props.icon }))));
|
|
50
50
|
const SocialLinks = () => (index.h("ul", { id: "uofg-footer-social-links" },
|
|
@@ -127,7 +127,7 @@ var faBriefcase = {
|
|
|
127
127
|
icon: [512, 512, [128188], "f0b1", "M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 320 512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM512 288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288z"]
|
|
128
128
|
};
|
|
129
129
|
|
|
130
|
-
const FooterLink =
|
|
130
|
+
const FooterLink = props => (index.h("li", null,
|
|
131
131
|
index.h("a", { href: props.url, title: props.title },
|
|
132
132
|
index.h(FontAwesomeIcon, { icon: props.icon }),
|
|
133
133
|
index.h("span", null, props.text))));
|
|
@@ -161,9 +161,9 @@ const UofgFooter = class {
|
|
|
161
161
|
};
|
|
162
162
|
UofgFooter.style = uofgFooterCss;
|
|
163
163
|
|
|
164
|
-
const PageSpecific =
|
|
164
|
+
const PageSpecific = props => {
|
|
165
165
|
var _a;
|
|
166
|
-
return (index.h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(
|
|
166
|
+
return (index.h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(item => {
|
|
167
167
|
if (!item) {
|
|
168
168
|
return null;
|
|
169
169
|
}
|
|
@@ -176,7 +176,7 @@ const PageSpecific = (props) => {
|
|
|
176
176
|
index.h("button", { slot: "button" },
|
|
177
177
|
index.h("span", null, item.title),
|
|
178
178
|
index.h(FontAwesomeIcon, { icon: faCaretDown })),
|
|
179
|
-
index.h("ul", { slot: "content", role: "menu" }, item.links.map(
|
|
179
|
+
index.h("ul", { slot: "content", role: "menu" }, item.links.map(link => (index.h("li", null,
|
|
180
180
|
index.h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
|
|
181
181
|
}).filter(Boolean)));
|
|
182
182
|
};
|
|
@@ -199,7 +199,7 @@ const GlobalLinks = () => (index.h("ul", { class: "uofg-header-global-links" },
|
|
|
199
199
|
index.h("li", null,
|
|
200
200
|
index.h("a", { href: "https://uoguelph.ca/student-life" }, "Student Life"))));
|
|
201
201
|
|
|
202
|
-
const HelloYou =
|
|
202
|
+
const HelloYou = props => (index.h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse },
|
|
203
203
|
index.h("button", { slot: "button", "aria-label": "Hello, YOU! menu" },
|
|
204
204
|
index.h("span", null, "Hello, YOU!"),
|
|
205
205
|
index.h(FontAwesomeIcon, { icon: faCaretDown })),
|
|
@@ -252,24 +252,24 @@ const UofgHeader = class {
|
|
|
252
252
|
const aToPageSpecificLink = (a) => {
|
|
253
253
|
const attributes = {};
|
|
254
254
|
a.getAttributeNames()
|
|
255
|
-
.filter(
|
|
256
|
-
.forEach(
|
|
255
|
+
.filter(name => name !== 'href')
|
|
256
|
+
.forEach(name => (attributes[name] = a.getAttribute(name)));
|
|
257
257
|
return {
|
|
258
258
|
href: a.getAttribute('href'),
|
|
259
259
|
text: a.textContent,
|
|
260
|
-
attributes
|
|
260
|
+
attributes,
|
|
261
261
|
};
|
|
262
262
|
};
|
|
263
263
|
this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
|
|
264
|
-
.filter(
|
|
265
|
-
.map(
|
|
264
|
+
.filter(child => child.tagName === 'A' || child.tagName === 'UL')
|
|
265
|
+
.map(child => {
|
|
266
266
|
switch (child.tagName) {
|
|
267
267
|
case 'A':
|
|
268
268
|
return aToPageSpecificLink(child);
|
|
269
269
|
case 'UL':
|
|
270
270
|
return {
|
|
271
271
|
title: child.getAttribute('data-title'),
|
|
272
|
-
links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink)
|
|
272
|
+
links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink),
|
|
273
273
|
};
|
|
274
274
|
}
|
|
275
275
|
});
|
|
@@ -287,13 +287,13 @@ const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduc
|
|
|
287
287
|
|
|
288
288
|
const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
|
|
289
289
|
const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
|
|
290
|
-
const observer = new MutationObserver(
|
|
290
|
+
const observer = new MutationObserver(mutations => {
|
|
291
291
|
for (const mutation of mutations) {
|
|
292
292
|
mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
|
|
293
293
|
}
|
|
294
294
|
});
|
|
295
295
|
const observerConfig = {
|
|
296
|
-
childList: true
|
|
296
|
+
childList: true,
|
|
297
297
|
};
|
|
298
298
|
const UofgMenu = class {
|
|
299
299
|
constructor(hostRef) {
|
|
@@ -385,10 +385,10 @@ const UofgMenu = class {
|
|
|
385
385
|
return;
|
|
386
386
|
}
|
|
387
387
|
// Check if we are in the middle of an animation.
|
|
388
|
-
const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(
|
|
388
|
+
const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(animation => animation.id === 'uofg-menu-animation');
|
|
389
389
|
// If we are, then we want to reverse the existing one rather than starting a new animation.
|
|
390
390
|
if (animations.length > 0) {
|
|
391
|
-
animations === null || animations === void 0 ? void 0 : animations.forEach(
|
|
391
|
+
animations === null || animations === void 0 ? void 0 : animations.forEach(animation => animation.reverse());
|
|
392
392
|
return;
|
|
393
393
|
}
|
|
394
394
|
let animationDef;
|
|
@@ -397,7 +397,7 @@ const UofgMenu = class {
|
|
|
397
397
|
duration: this.getAnimationDuration(),
|
|
398
398
|
fill: 'none',
|
|
399
399
|
easing: this.getAnimationEasing(),
|
|
400
|
-
direction: newValue ? 'normal' : 'reverse'
|
|
400
|
+
direction: newValue ? 'normal' : 'reverse',
|
|
401
401
|
};
|
|
402
402
|
// Need to remove display none, otherwise keyframe values won't be calculated correctly.
|
|
403
403
|
this.content.style.display = '';
|
|
@@ -472,19 +472,19 @@ const UofgMenu = class {
|
|
|
472
472
|
paddingTop: 0,
|
|
473
473
|
paddingBottom: 0,
|
|
474
474
|
marginTop: 0,
|
|
475
|
-
marginBottom: 0
|
|
475
|
+
marginBottom: 0,
|
|
476
476
|
},
|
|
477
477
|
{
|
|
478
478
|
height: ((_a = this.contentComputedStyle) === null || _a === void 0 ? void 0 : _a.height) || 0,
|
|
479
479
|
paddingTop: ((_b = this.contentComputedStyle) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0,
|
|
480
480
|
paddingBottom: ((_c = this.contentComputedStyle) === null || _c === void 0 ? void 0 : _c.paddingBottom) || 0,
|
|
481
481
|
marginTop: ((_d = this.contentComputedStyle) === null || _d === void 0 ? void 0 : _d.marginTop) || 0,
|
|
482
|
-
marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0
|
|
483
|
-
}
|
|
482
|
+
marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0,
|
|
483
|
+
},
|
|
484
484
|
],
|
|
485
485
|
callback: () => {
|
|
486
486
|
this.content && (this.content.style.overflowY = '');
|
|
487
|
-
}
|
|
487
|
+
},
|
|
488
488
|
};
|
|
489
489
|
}
|
|
490
490
|
render() {
|
|
@@ -2,19 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-f0452ddd.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Browser
|
|
8
|
+
Stencil Client Patch Browser v4.0.1 | MIT Licensed | https://stenciljs.com
|
|
9
9
|
*/
|
|
10
10
|
const patchBrowser = () => {
|
|
11
11
|
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('uofg-web-components.cjs.js', document.baseURI).href));
|
|
12
12
|
const opts = {};
|
|
13
|
-
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
|
|
14
13
|
if (importMeta !== '') {
|
|
15
14
|
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
16
|
-
// TODO(STENCIL-661): Remove code related to the dynamic import shim
|
|
17
|
-
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
|
|
18
15
|
}
|
|
19
16
|
return index.promiseResolve(opts);
|
|
20
17
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"components/uofg-footer/uofg-footer.js",
|
|
4
|
+
"components/uofg-header/uofg-header.js",
|
|
5
|
+
"components/uofg-menu/uofg-menu.js"
|
|
6
6
|
],
|
|
7
7
|
"compiler": {
|
|
8
8
|
"name": "@stencil/core",
|
|
9
|
-
"version": "
|
|
9
|
+
"version": "4.0.1",
|
|
10
10
|
"typescriptVersion": "5.0.4"
|
|
11
11
|
},
|
|
12
12
|
"collections": [],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { faBriefcase, faCalendarRange, faCircleCheck, faHandHoldingHeart, faKey, faList, faSitemap, faTrees, faUniversalAccess } from
|
|
4
|
-
const FooterLink =
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { faBriefcase, faCalendarRange, faCircleCheck, faHandHoldingHeart, faKey, faList, faSitemap, faTrees, faUniversalAccess, } from "@fortawesome/pro-solid-svg-icons";
|
|
4
|
+
const FooterLink = props => (h("li", null, h("a", { href: props.url, title: props.title }, h(FontAwesomeIcon, { icon: props.icon }), h("span", null, props.text))));
|
|
5
5
|
export const FooterLinks = () => (h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess }), h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey }), h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/site-map/", icon: faSitemap }), h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck }), h(FooterLink, { text: "Land Acknowledgement", url: "https://www.uoguelph.ca/land-acknowledgement/", icon: faTrees, title: "The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and M\u00E9tis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work." }), h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase }), h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendarRange }), h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendarRange }), h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList }), h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart })));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { faFacebookSquare, faInstagram, faLinkedin, faTiktok, faTwitterSquare, faYoutube } from
|
|
4
|
-
const SocialLink =
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { faFacebookSquare, faInstagram, faLinkedin, faTiktok, faTwitterSquare, faYoutube, } from "@fortawesome/free-brands-svg-icons";
|
|
4
|
+
const SocialLink = props => (h("li", null, h("a", { href: props.url, "aria-label": props.name }, h(FontAwesomeIcon, { icon: props.icon }))));
|
|
5
5
|
export const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" }, h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }), h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare }), h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram }), h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube }), h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }), h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { SocialLinks } from
|
|
4
|
-
import { FooterLinks } from
|
|
5
|
-
import { faPhoneFlip } from
|
|
6
|
-
import improveLifeLogo from
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { SocialLinks } from "./social-links";
|
|
4
|
+
import { FooterLinks } from "./footer-links";
|
|
5
|
+
import { faPhoneFlip } from "@fortawesome/pro-solid-svg-icons";
|
|
6
|
+
import improveLifeLogo from "./improve-life.svg";
|
|
7
7
|
export class UofgFooter {
|
|
8
8
|
render() {
|
|
9
9
|
return (h("footer", { id: "uofg-footer" }, h("div", { id: "uofg-footer-content" }, h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), h(SocialLinks, null), h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h(FooterLinks, null), h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, h("strong", null, "University of Guelph"), h("span", null, "50 Stone Road East,"), h("span", null, "Guelph, Ontario, Canada"), h("span", null, "N1G 2W1"), h("a", { href: "tel:1-519-824-4120" }, h(FontAwesomeIcon, { icon: faPhoneFlip }), h("span", null, "519-824-4120"))))));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { h } from
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
2
|
export const GlobalLinks = () => (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://uoguelph.ca/academics" }, "Academics")), h("li", null, h("a", { href: "https://uoguelph.ca/admissions" }, "Admissions")), h("li", null, h("a", { href: "https://uoguelph.ca/research" }, "Research")), h("li", null, h("a", { href: "https://uoguelph.ca/student-life" }, "Student Life"))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { faCaretDown } from
|
|
4
|
-
export const HelloYou =
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { faCaretDown } from "@fortawesome/pro-solid-svg-icons";
|
|
4
|
+
export const HelloYou = props => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, h("button", { slot: "button", "aria-label": "Hello, YOU! menu" }, h("span", null, "Hello, YOU!"), 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://uoguelph.ca/current-students" }, "Current Students")), h("li", null, h("a", { href: "https://uoguelph.ca/alumni-and-donors" }, "Alumni & Donors")), h("li", null, h("a", { href: "https://uoguelph.ca/staff-and-faculty" }, "Staff & Faculty")), h("li", null, h("a", { href: "https://uoguelph.ca/parents-and-visitors" }, "Parents & Visitors")), h("li", null, h("a", { href: "https://uoguelph.ca/employers-and-partners" }, "Employers & Partners")))));
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { faCaretDown } from
|
|
4
|
-
export const PageSpecific =
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { faCaretDown } from "@fortawesome/pro-solid-svg-icons";
|
|
4
|
+
export const PageSpecific = props => {
|
|
5
5
|
var _a;
|
|
6
|
-
return (h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(
|
|
6
|
+
return (h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(item => {
|
|
7
7
|
if (!item) {
|
|
8
8
|
return null;
|
|
9
9
|
}
|
|
10
10
|
if ('text' in item) {
|
|
11
11
|
return (h("li", null, h("a", Object.assign({ href: item.href }, item.attributes), item.text)));
|
|
12
12
|
}
|
|
13
|
-
return (h("li", null, h("uofg-menu", { autoCollapse: props.autoCollapseMenus }, h("button", { slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", role: "menu" }, item.links.map(
|
|
13
|
+
return (h("li", null, h("uofg-menu", { autoCollapse: props.autoCollapseMenus }, h("button", { slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", role: "menu" }, item.links.map(link => (h("li", null, h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
|
|
14
14
|
}).filter(Boolean)));
|
|
15
15
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { FontAwesomeIcon } from
|
|
3
|
-
import { faSearch } from
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
|
+
import { faSearch } from "@fortawesome/pro-solid-svg-icons";
|
|
4
4
|
export const SearchBar = () => (h("form", { class: "uofg-header-search-bar", method: "get", role: "search", action: "https://uoguelph.ca/search/" }, h("input", { type: "text", name: "q" }), h("input", { type: "hidden", name: "cx", value: "002616817380988741256:tp3ks5ha2dw" }), h("input", { type: "hidden", name: "cof", value: "FORID:11" }), h("input", { type: "hidden", name: "ie", value: "UTF-8" }), h("button", { class: "uofg-search-bar-button", "aria-label": "Search", type: "submit" }, h(FontAwesomeIcon, { icon: faSearch }))));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { h } from
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
2
|
export const SingleSignOn = () => (h("form", { class: "uofg-header-single-sign-on" }, h("span", null, "Please log in with your Central Login Account"), h("label", null, h("span", null, "Username"), h("input", { type: "text", name: "username" })), h("label", null, h("span", null, "Password"), h("input", { type: "password", name: "password" })), h("button", { type: "submit" }, "Sign in"), h("a", { href: "#" }, "Forgot your password?")));
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
import { PageSpecific } from
|
|
3
|
-
import Decoration from
|
|
4
|
-
import FullSizeLogo from
|
|
5
|
-
import ReducedSizeLogo from
|
|
6
|
-
import { GlobalLinks } from
|
|
7
|
-
import { FontAwesomeIcon } from
|
|
8
|
-
import { faBars, faRightToBracket, faSearch } from
|
|
9
|
-
import { HelloYou } from
|
|
10
|
-
import { SearchBar } from
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
import { PageSpecific, } from "./page-specific";
|
|
3
|
+
import Decoration from "./decoration.svg";
|
|
4
|
+
import FullSizeLogo from "./logo-full-size.svg";
|
|
5
|
+
import ReducedSizeLogo from "./logo-reduced-size.svg";
|
|
6
|
+
import { GlobalLinks } from "./global-links";
|
|
7
|
+
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
8
|
+
import { faBars, faRightToBracket, faSearch } from "@fortawesome/pro-solid-svg-icons";
|
|
9
|
+
import { HelloYou } from "./hello-you";
|
|
10
|
+
import { SearchBar } from "./search";
|
|
11
11
|
export class UofgHeader {
|
|
12
12
|
constructor() {
|
|
13
13
|
this.pageTitle = '';
|
|
@@ -32,24 +32,24 @@ export class UofgHeader {
|
|
|
32
32
|
const aToPageSpecificLink = (a) => {
|
|
33
33
|
const attributes = {};
|
|
34
34
|
a.getAttributeNames()
|
|
35
|
-
.filter(
|
|
36
|
-
.forEach(
|
|
35
|
+
.filter(name => name !== 'href')
|
|
36
|
+
.forEach(name => (attributes[name] = a.getAttribute(name)));
|
|
37
37
|
return {
|
|
38
38
|
href: a.getAttribute('href'),
|
|
39
39
|
text: a.textContent,
|
|
40
|
-
attributes
|
|
40
|
+
attributes,
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
43
|
this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
|
|
44
|
-
.filter(
|
|
45
|
-
.map(
|
|
44
|
+
.filter(child => child.tagName === 'A' || child.tagName === 'UL')
|
|
45
|
+
.map(child => {
|
|
46
46
|
switch (child.tagName) {
|
|
47
47
|
case 'A':
|
|
48
48
|
return aToPageSpecificLink(child);
|
|
49
49
|
case 'UL':
|
|
50
50
|
return {
|
|
51
51
|
title: child.getAttribute('data-title'),
|
|
52
|
-
links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink)
|
|
52
|
+
links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink),
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
});
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { h, Host } from
|
|
2
|
-
import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from "../../utils/feature-check";
|
|
3
3
|
const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
|
|
4
4
|
const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
|
|
5
|
-
const observer = new MutationObserver(
|
|
5
|
+
const observer = new MutationObserver(mutations => {
|
|
6
6
|
for (const mutation of mutations) {
|
|
7
7
|
mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
|
|
8
8
|
}
|
|
9
9
|
});
|
|
10
10
|
const observerConfig = {
|
|
11
|
-
childList: true
|
|
11
|
+
childList: true,
|
|
12
12
|
};
|
|
13
13
|
export class UofgMenu {
|
|
14
14
|
constructor() {
|
|
@@ -95,10 +95,10 @@ export class UofgMenu {
|
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
97
97
|
// Check if we are in the middle of an animation.
|
|
98
|
-
const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(
|
|
98
|
+
const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(animation => animation.id === 'uofg-menu-animation');
|
|
99
99
|
// If we are, then we want to reverse the existing one rather than starting a new animation.
|
|
100
100
|
if (animations.length > 0) {
|
|
101
|
-
animations === null || animations === void 0 ? void 0 : animations.forEach(
|
|
101
|
+
animations === null || animations === void 0 ? void 0 : animations.forEach(animation => animation.reverse());
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
104
104
|
let animationDef;
|
|
@@ -107,7 +107,7 @@ export class UofgMenu {
|
|
|
107
107
|
duration: this.getAnimationDuration(),
|
|
108
108
|
fill: 'none',
|
|
109
109
|
easing: this.getAnimationEasing(),
|
|
110
|
-
direction: newValue ? 'normal' : 'reverse'
|
|
110
|
+
direction: newValue ? 'normal' : 'reverse',
|
|
111
111
|
};
|
|
112
112
|
// Need to remove display none, otherwise keyframe values won't be calculated correctly.
|
|
113
113
|
this.content.style.display = '';
|
|
@@ -182,19 +182,19 @@ export class UofgMenu {
|
|
|
182
182
|
paddingTop: 0,
|
|
183
183
|
paddingBottom: 0,
|
|
184
184
|
marginTop: 0,
|
|
185
|
-
marginBottom: 0
|
|
185
|
+
marginBottom: 0,
|
|
186
186
|
},
|
|
187
187
|
{
|
|
188
188
|
height: ((_a = this.contentComputedStyle) === null || _a === void 0 ? void 0 : _a.height) || 0,
|
|
189
189
|
paddingTop: ((_b = this.contentComputedStyle) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0,
|
|
190
190
|
paddingBottom: ((_c = this.contentComputedStyle) === null || _c === void 0 ? void 0 : _c.paddingBottom) || 0,
|
|
191
191
|
marginTop: ((_d = this.contentComputedStyle) === null || _d === void 0 ? void 0 : _d.marginTop) || 0,
|
|
192
|
-
marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0
|
|
193
|
-
}
|
|
192
|
+
marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0,
|
|
193
|
+
},
|
|
194
194
|
],
|
|
195
195
|
callback: () => {
|
|
196
196
|
this.content && (this.content.style.overflowY = '');
|
|
197
|
-
}
|
|
197
|
+
},
|
|
198
198
|
};
|
|
199
199
|
}
|
|
200
200
|
render() {
|
|
@@ -335,7 +335,8 @@ export class UofgMenu {
|
|
|
335
335
|
"parameters": [],
|
|
336
336
|
"references": {
|
|
337
337
|
"Promise": {
|
|
338
|
-
"location": "global"
|
|
338
|
+
"location": "global",
|
|
339
|
+
"id": "global::Promise"
|
|
339
340
|
}
|
|
340
341
|
},
|
|
341
342
|
"return": "Promise<boolean>"
|
|
@@ -360,7 +361,8 @@ export class UofgMenu {
|
|
|
360
361
|
}],
|
|
361
362
|
"references": {
|
|
362
363
|
"Promise": {
|
|
363
|
-
"location": "global"
|
|
364
|
+
"location": "global",
|
|
365
|
+
"id": "global::Promise"
|
|
364
366
|
}
|
|
365
367
|
},
|
|
366
368
|
"return": "Promise<void>"
|
|
@@ -379,7 +381,8 @@ export class UofgMenu {
|
|
|
379
381
|
"parameters": [],
|
|
380
382
|
"references": {
|
|
381
383
|
"Promise": {
|
|
382
|
-
"location": "global"
|
|
384
|
+
"location": "global",
|
|
385
|
+
"id": "global::Promise"
|
|
383
386
|
}
|
|
384
387
|
},
|
|
385
388
|
"return": "Promise<boolean>"
|
|
@@ -398,7 +401,8 @@ export class UofgMenu {
|
|
|
398
401
|
"parameters": [],
|
|
399
402
|
"references": {
|
|
400
403
|
"Promise": {
|
|
401
|
-
"location": "global"
|
|
404
|
+
"location": "global",
|
|
405
|
+
"id": "global::Promise"
|
|
402
406
|
}
|
|
403
407
|
},
|
|
404
408
|
"return": "Promise<void>"
|
|
@@ -417,7 +421,8 @@ export class UofgMenu {
|
|
|
417
421
|
"parameters": [],
|
|
418
422
|
"references": {
|
|
419
423
|
"Promise": {
|
|
420
|
-
"location": "global"
|
|
424
|
+
"location": "global",
|
|
425
|
+
"id": "global::Promise"
|
|
421
426
|
}
|
|
422
427
|
},
|
|
423
428
|
"return": "Promise<void>"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { h } from
|
|
2
|
-
export const FontAwesomeIcon =
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
export const FontAwesomeIcon = props => {
|
|
3
3
|
const width = props.icon.icon[0];
|
|
4
4
|
const height = props.icon.icon[1];
|
|
5
5
|
const iconPathData = props.icon.icon[4];
|
|
6
|
-
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(
|
|
6
|
+
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 }))));
|
|
7
7
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const FontAwesomeIcon =
|
|
3
|
+
const FontAwesomeIcon = props => {
|
|
4
4
|
const width = props.icon.icon[0];
|
|
5
5
|
const height = props.icon.icon[1];
|
|
6
6
|
const iconPathData = props.icon.icon[4];
|
|
7
|
-
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(
|
|
7
|
+
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 }))));
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
var faTrees = {
|
|
@@ -34,7 +34,7 @@ var faYoutube = {
|
|
|
34
34
|
icon: [576, 512, [61802], "f167", "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"]
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
-
const SocialLink =
|
|
37
|
+
const SocialLink = props => (h("li", null,
|
|
38
38
|
h("a", { href: props.url, "aria-label": props.name },
|
|
39
39
|
h(FontAwesomeIcon, { icon: props.icon }))));
|
|
40
40
|
const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" },
|
|
@@ -45,7 +45,7 @@ const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" },
|
|
|
45
45
|
h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }),
|
|
46
46
|
h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })));
|
|
47
47
|
|
|
48
|
-
const FooterLink =
|
|
48
|
+
const FooterLink = props => (h("li", null,
|
|
49
49
|
h("a", { href: props.url, title: props.title },
|
|
50
50
|
h(FontAwesomeIcon, { icon: props.icon }),
|
|
51
51
|
h("span", null, props.text))));
|