@uoguelph/web-components 1.2.0-rc.6 → 1.2.0-rc.7
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-cdb046b4.js → index-eb919017.js} +0 -102
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/uofg-alert.cjs.entry.js +7 -7
- package/dist/cjs/uofg-back-to-top_5.cjs.entry.js +93 -80
- package/dist/cjs/uofg-modal.cjs.entry.js +6 -10
- package/dist/cjs/uofg-web-components.cjs.js +1 -1
- package/dist/cjs/utils-93383c5b.js +65 -0
- package/dist/collection/components/uofg-alert/uofg-alert.js +6 -11
- package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.js +5 -12
- package/dist/collection/components/uofg-card/uofg-card.js +6 -11
- package/dist/collection/components/uofg-footer/uofg-footer.js +5 -13
- package/dist/collection/components/uofg-header/uofg-header.js +43 -29
- package/dist/collection/components/uofg-modal/uofg-modal.js +5 -14
- package/dist/collection/utils/utils.js +16 -0
- package/dist/components/uofg-alert.js +6 -5
- package/dist/components/uofg-back-to-top.js +5 -6
- package/dist/components/uofg-card.js +6 -5
- package/dist/components/uofg-footer.js +5 -7
- package/dist/components/uofg-header.js +75 -55
- package/dist/components/uofg-modal.js +5 -8
- package/dist/components/utils.js +19 -1
- package/dist/esm/{index-0b0002d2.js → index-06ec28fa.js} +0 -102
- package/dist/esm/loader.js +2 -2
- package/dist/esm/uofg-alert.entry.js +7 -7
- package/dist/esm/uofg-back-to-top_5.entry.js +89 -76
- package/dist/esm/uofg-modal.entry.js +6 -10
- package/dist/esm/uofg-web-components.js +2 -2
- package/dist/esm/utils-acd1ee82.js +56 -0
- package/dist/types/components/uofg-alert/uofg-alert.d.ts +2 -0
- package/dist/types/components/uofg-back-to-top/uofg-back-to-top.d.ts +1 -0
- package/dist/types/components/uofg-card/uofg-card.d.ts +2 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/dist/uofg-web-components/p-4a896033.js +2 -0
- package/dist/uofg-web-components/p-4e0da5c7.entry.js +1 -0
- package/dist/uofg-web-components/p-663d722e.entry.js +1 -0
- package/dist/uofg-web-components/p-84b2d8d2.js +1 -0
- package/dist/uofg-web-components/p-b0718d71.entry.js +1 -0
- package/dist/uofg-web-components/uofg-web-components.css +1 -1
- package/dist/uofg-web-components/uofg-web-components.esm.js +1 -1
- package/package.json +1 -3
- package/dist/cjs/index-06b58d35.js +0 -32
- package/dist/cjs/utils-3d4b7e2e.js +0 -16
- package/dist/collection/components/uofg-alert/uofg-alert.css +0 -1
- package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.css +0 -1
- package/dist/collection/components/uofg-card/uofg-card.css +0 -1
- package/dist/collection/components/uofg-footer/uofg-footer.css +0 -1
- package/dist/collection/components/uofg-header/uofg-header.css +0 -1
- package/dist/collection/components/uofg-modal/uofg-modal.css +0 -1
- package/dist/esm/index-e685921a.js +0 -27
- package/dist/esm/utils-379bb71a.js +0 -12
- package/dist/uofg-web-components/p-6fa0f8f6.js +0 -1
- package/dist/uofg-web-components/p-7569d8f2.entry.js +0 -1
- package/dist/uofg-web-components/p-976982f6.entry.js +0 -1
- package/dist/uofg-web-components/p-ee27db22.js +0 -2
- package/dist/uofg-web-components/p-fde6370b.entry.js +0 -1
- package/dist/uofg-web-components/p-fec87f9d.js +0 -1
|
@@ -2,12 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const
|
|
7
|
-
const utils = require('./utils-3d4b7e2e.js');
|
|
8
|
-
|
|
9
|
-
const uofgModalCss = ":host{visibility:visible !important;position:relative !important;z-index:100000 !important}@defaults border-spacing{--tw-border-spacing-x:0;--tw-border-spacing-y:0}@defaults transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}@defaults touch-action{}@defaults scroll-snap-type{--tw-scroll-snap-strictness:proximity}@defaults gradient-color-stops{}@defaults font-variant-numeric{}@defaults box-shadow{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}@defaults ring-width{--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}@defaults filter{}@defaults backdrop-filter{}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.tw-visible{visibility:visible!important}.tw-invisible{visibility:hidden!important}.tw-fixed{position:fixed!important}.tw-absolute{position:absolute!important}.tw-left-0{left:0!important}.tw-left-1\\/2{left:50%!important}.tw-right-8{right:2rem!important}.tw-top-0{top:0!important}.tw-top-8{top:2rem!important}.tw-z-\\[1000\\]{z-index:1000!important}.tw-z-\\[2\\]{z-index:2!important}.tw-flex{display:flex!important}.tw-h-12{height:3rem!important}.tw-h-fit{height:fit-content!important}.tw-h-screen{height:100vh!important}.tw-max-h-full{max-height:100%!important}.tw-w-12{width:3rem!important}.tw-w-fit{width:fit-content!important}.tw-w-screen{width:100vw!important}.tw-max-w-full{max-width:100%!important}.-tw-translate-x-1\\/2{--tw-translate-x:-50%!important}.-tw-translate-x-1\\/2,.tw-translate-y-\\[-50px\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.tw-translate-y-\\[-50px\\]{--tw-translate-y:-50px!important}.tw-translate-y-\\[calc\\(-50\\%_-_50px\\)\\]{--tw-translate-y:calc(-50% - 50px)!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.tw-items-center{align-items:center!important}.tw-justify-center{justify-content:center!important}.tw-overflow-auto{overflow:auto!important}.tw-border-0{border-width:0!important}.tw-bg-black{--tw-bg-opacity:1!important;background-color:rgb(0 0 0/var(--tw-bg-opacity))!important}.tw-bg-transparent{background-color:transparent!important}.tw-bg-opacity-50{--tw-bg-opacity:0.5!important}.tw-p-2{padding:.5rem!important}.tw-p-8{padding:2rem!important}.tw-text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.tw-text-\\[var\\(--uofg-modal-dismiss-color\\,white\\)\\]{color:var(--uofg-modal-dismiss-color,#fff)!important}.tw-opacity-0{opacity:0!important}.tw-opacity-100{opacity:1!important}.tw-transition-\\[opacity\\,visibility\\]{transition-duration:.15s!important;transition-property:opacity,visibility!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.tw-transition-transform{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}@media (prefers-reduced-motion:reduce){.motion-reduce\\:tw-transition-none{transition-property:none!important}}.\\[\\&\\>svg\\]\\:tw-h-\\[1em\\]>svg{height:1em!important}.\\[\\&\\>svg\\]\\:tw-fill-current>svg{fill:currentColor!important}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}";
|
|
10
|
-
const UofgModalStyle0 = uofgModalCss;
|
|
5
|
+
const index = require('./index-eb919017.js');
|
|
6
|
+
const utils = require('./utils-93383c5b.js');
|
|
11
7
|
|
|
12
8
|
const UofgModal = class {
|
|
13
9
|
constructor(hostRef) {
|
|
@@ -23,6 +19,7 @@ const UofgModal = class {
|
|
|
23
19
|
this.isOpen = false;
|
|
24
20
|
}
|
|
25
21
|
connectedCallback() {
|
|
22
|
+
utils.attachTailwind(this.el.shadowRoot);
|
|
26
23
|
// Bind event handlers so that 'this' is always the component instance.
|
|
27
24
|
this.handleClick = this.handleClick.bind(this);
|
|
28
25
|
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
@@ -115,16 +112,16 @@ const UofgModal = class {
|
|
|
115
112
|
document.body.style.overflow = newValue ? 'hidden' : '';
|
|
116
113
|
}
|
|
117
114
|
render() {
|
|
118
|
-
return (index.h("div", { key: '
|
|
115
|
+
return (index.h("div", { key: 'd4cbcdbf263ad8ea2aceb3a1718629cfc50056b0', class: {
|
|
119
116
|
'tw-visible tw-opacity-100': this.isOpen,
|
|
120
117
|
'tw-invisible tw-opacity-0': !this.isOpen,
|
|
121
118
|
'tw-fixed tw-left-0 tw-top-0 tw-z-[1000] tw-flex tw-h-screen tw-w-screen tw-bg-black tw-bg-opacity-50 tw-transition-[opacity,visibility]': true,
|
|
122
|
-
}, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, index.h("div", { key: '
|
|
119
|
+
}, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, index.h("div", { key: '56ec3bc88ac19f00c813eb1a3f8ef41139217174', part: "content", class: {
|
|
123
120
|
'tw-visible tw-opacity-100': this.isOpen,
|
|
124
121
|
'tw-translate-y-[calc(-50%_-_50px)]': !this.isOpen && this.centered,
|
|
125
122
|
'tw-translate-y-[-50px]': (!this.isOpen && !this.centered) || (this.isOpen && this.centered),
|
|
126
123
|
'tw-z-1 tw-absolute tw-left-1/2 tw-h-fit tw-max-h-full tw-w-fit tw-max-w-full -tw-translate-x-1/2 tw-overflow-auto tw-p-8 tw-transition-transform motion-reduce:tw-transition-none': true,
|
|
127
|
-
} }, index.h("button", { key: '
|
|
124
|
+
} }, index.h("button", { key: 'ca5eff3c18c70d9e0d3a05901ecec519e81e298e', class: "[&>svg]:h-[1em] tw-absolute tw-right-8 tw-top-8 tw-z-[2] tw-flex tw-h-12 tw-w-12 tw-items-center tw-justify-center tw-border-0 tw-bg-transparent tw-text-3xl tw-p-2 tw-text-[var(--uofg-modal-dismiss-color,white)] [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, index.h(utils.FontAwesomeIcon, { key: 'a8d1e9d10fdfd83d6059651dfba660c2446293d8', icon: utils.faTimes })), index.h("slot", { key: '3931cf9245a94e7aa1eac9d769d823a6e184da0b' }))));
|
|
128
125
|
}
|
|
129
126
|
/**
|
|
130
127
|
* Get the current state of the modal.
|
|
@@ -167,6 +164,5 @@ const UofgModal = class {
|
|
|
167
164
|
"isOpen": ["handleIsOpenChange"]
|
|
168
165
|
}; }
|
|
169
166
|
};
|
|
170
|
-
UofgModal.style = UofgModalStyle0;
|
|
171
167
|
|
|
172
168
|
exports.uofg_modal = UofgModal;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-eb919017.js');
|
|
4
|
+
|
|
5
|
+
const FontAwesomeIcon = props => {
|
|
6
|
+
const width = props.icon.icon[0];
|
|
7
|
+
const height = props.icon.icon[1];
|
|
8
|
+
const iconPathData = props.icon.icon[4];
|
|
9
|
+
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 }))));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
var faCircleExclamation = {
|
|
13
|
+
prefix: 'fas',
|
|
14
|
+
iconName: 'circle-exclamation',
|
|
15
|
+
icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"]
|
|
16
|
+
};
|
|
17
|
+
var faChevronUp = {
|
|
18
|
+
prefix: 'fas',
|
|
19
|
+
iconName: 'chevron-up',
|
|
20
|
+
icon: [512, 512, [], "f077", "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"]
|
|
21
|
+
};
|
|
22
|
+
var faXmark = {
|
|
23
|
+
prefix: 'fas',
|
|
24
|
+
iconName: 'xmark',
|
|
25
|
+
icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"]
|
|
26
|
+
};
|
|
27
|
+
var faTimes = faXmark;
|
|
28
|
+
|
|
29
|
+
const twCss = "*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::before,::after{--tw-content:''}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;}body{margin:0;line-height:inherit;}hr{height:0;color:inherit;border-top-width:1px;}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse;}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0;}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af;}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af;}button,[role=\"button\"]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto}[hidden]{display:none}*{box-sizing:border-box}uofg-menu{--uofg-menu-animation-type:slide;--uofg-menu-animation-duration:0.2s;--uofg-menu-animation-easing:ease-in-out}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.tw-visible{visibility:visible}.tw-invisible{visibility:hidden}.tw-fixed{position:fixed}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-0{bottom:0px}.tw-left-0{left:0px}.tw-left-1\\/2{left:50%}.tw-right-0{right:0px}.tw-right-8{right:2rem}.tw-top-0{top:0px}.tw-top-8{top:2rem}.tw-top-full{top:100%}.tw-z-50{z-index:50}.tw-z-\\[1000\\]{z-index:1000}.tw-z-\\[2\\]{z-index:2}.tw-m-4{margin:1rem}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-auto{margin-right:auto}.tw-block{display:block}.tw-flex{display:flex}.tw-contents{display:contents}.tw-aspect-square{aspect-ratio:1 / 1}.tw-h-12{height:3rem}.tw-h-16{height:4rem}.tw-h-\\[10rem\\]{height:10rem}.tw-h-\\[3\\.5rem\\]{height:3.5rem}.tw-h-\\[5rem\\]{height:5rem}.tw-h-auto{height:auto}.tw-h-fit{height:-moz-fit-content;height:fit-content}.tw-h-full{height:100%}.tw-h-screen{height:100vh}.tw-max-h-\\[calc\\(100vh-5rem\\)\\]{max-height:calc(100vh - 5rem)}.tw-max-h-full{max-height:100%}.tw-w-12{width:3rem}.tw-w-\\[3\\.5rem\\]{width:3.5rem}.tw-w-\\[7\\.5rem\\]{width:7.5rem}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-w-screen{width:100vw}.tw-min-w-\\[20rem\\]{min-width:20rem}.tw-max-w-full{max-width:100%}.-tw-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-translate-y-\\[-50px\\]{--tw-translate-y:-50px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-translate-y-\\[calc\\(-50\\%_-_50px\\)\\]{--tw-translate-y:calc(-50% - 50px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-content-center{align-content:center}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-2{gap:0.5rem}.tw-gap-3{gap:0.75rem}.tw-gap-4{gap:1rem}.tw-gap-8{gap:2rem}.tw-overflow-auto{overflow:auto}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-whitespace-normal{white-space:normal}.tw-rounded{border-radius:0.25rem}.tw-rounded-\\[50\\%\\]{border-radius:50%}.tw-border{border-width:1px}.tw-border-0{border-width:0px}.tw-border-b{border-bottom-width:1px}.tw-border-b-2{border-bottom-width:2px}.tw-border-b-8{border-bottom-width:8px}.tw-border-l{border-left-width:1px}.tw-border-r-2{border-right-width:2px}.tw-border-solid{border-style:solid}.tw-border-dotted{border-style:dotted}.tw-border-transparent{border-color:transparent}.tw-border-uofg-blue-100{--tw-border-opacity:1;border-color:rgb(221 236 240 / var(--tw-border-opacity))}.tw-border-uofg-grey-300{--tw-border-opacity:1;border-color:rgb(209 209 209 / var(--tw-border-opacity))}.tw-border-uofg-grey-400{--tw-border-opacity:1;border-color:rgb(180 180 180 / var(--tw-border-opacity))}.tw-border-uofg-grey-500{--tw-border-opacity:1;border-color:rgb(154 154 154 / var(--tw-border-opacity))}.tw-border-uofg-grey-950{--tw-border-opacity:1;border-color:rgb(40 40 40 / var(--tw-border-opacity))}.tw-border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.tw-bg-transparent{background-color:transparent}.tw-bg-uofg-blue-200{--tw-bg-opacity:1;background-color:rgb(190 218 227 / var(--tw-bg-opacity))}.tw-bg-uofg-blue-50{--tw-bg-opacity:1;background-color:rgb(241 248 250 / var(--tw-bg-opacity))}.tw-bg-uofg-grey{--tw-bg-opacity:1;background-color:rgb(221 221 221 / var(--tw-bg-opacity))}.tw-bg-uofg-red{--tw-bg-opacity:1;background-color:rgb(194 4 48 / var(--tw-bg-opacity))}.tw-bg-uofg-yellow{--tw-bg-opacity:1;background-color:rgb(255 199 42 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-opacity-50{--tw-bg-opacity:0.5}.tw-fill-current{fill:currentColor}.tw-p-2{padding:0.5rem}.tw-p-4{padding:1rem}.tw-p-5{padding:1.25rem}.tw-p-6{padding:1.5rem}.tw-p-8{padding:2rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-6{padding-left:1.5rem;padding-right:1.5rem}.tw-px-8{padding-left:2rem;padding-right:2rem}.tw-px-\\[calc\\(\\(100\\%-1320px\\)\\/2\\)\\]{padding-left:calc((100% - 1320px) / 2);padding-right:calc((100% - 1320px) / 2)}.tw-px-\\[max\\(calc\\(\\(100\\%-1320px\\)\\/2\\)\\,2rem\\)\\]{padding-left:max(calc((100% - 1320px) / 2),2rem);padding-right:max(calc((100% - 1320px) / 2),2rem)}.tw-py-2{padding-top:0.5rem;padding-bottom:0.5rem}.tw-py-4{padding-top:1rem;padding-bottom:1rem}.tw-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.tw-py-8{padding-top:2rem;padding-bottom:2rem}.tw-pb-6{padding-bottom:1.5rem}.tw-pt-8{padding-top:2rem}.tw-font-condensed{font-family:Roboto Condensed, Arial, sans-serif}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-not-italic{font-style:normal}.tw-tracking-wide{letter-spacing:0.025em}.tw-text-\\[var\\(--uofg-modal-dismiss-color\\,white\\)\\]{color:var(--uofg-modal-dismiss-color,white)}.tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.tw-text-uofg-blue{--tw-text-opacity:1;color:rgb(105 163 185 / var(--tw-text-opacity))}.tw-text-uofg-blue-500{--tw-text-opacity:1;color:rgb(65 127 153 / var(--tw-text-opacity))}.tw-text-uofg-yellow{--tw-text-opacity:1;color:rgb(255 199 42 / var(--tw-text-opacity))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.tw-transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.tw-transition-\\[opacity\\,visibility\\]{transition-property:opacity,visibility;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.tw-transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.tw-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.first\\:tw-border-l-2:first-child{border-left-width:2px}.focus-within\\:tw-border-uofg-blue-400:focus-within{--tw-border-opacity:1;border-color:rgb(105 163 185 / var(--tw-border-opacity))}.hover\\:tw-border-uofg-yellow:hover{--tw-border-opacity:1;border-color:rgb(255 199 42 / var(--tw-border-opacity))}.hover\\:tw-bg-uofg-grey:hover{--tw-bg-opacity:1;background-color:rgb(221 221 221 / var(--tw-bg-opacity))}.hover\\:tw-bg-uofg-yellow:hover{--tw-bg-opacity:1;background-color:rgb(255 199 42 / var(--tw-bg-opacity))}.hover\\:tw-text-uofg-yellow:hover{--tw-text-opacity:1;color:rgb(255 199 42 / var(--tw-text-opacity))}.hover\\:tw-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.aria-expanded\\:tw-rotate-180[aria-expanded=\"true\"]{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.aria-expanded\\:tw-bg-uofg-grey[aria-expanded=\"true\"]{--tw-bg-opacity:1;background-color:rgb(221 221 221 / var(--tw-bg-opacity))}.aria-expanded\\:tw-bg-uofg-yellow[aria-expanded=\"true\"]{--tw-bg-opacity:1;background-color:rgb(255 199 42 / var(--tw-bg-opacity))}.aria-expanded\\:tw-bg-white[aria-expanded=\"true\"]{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.aria-expanded\\:tw-text-black[aria-expanded=\"true\"]{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.hocus\\:tw-border-current:hover{border-color:currentColor}.hocus\\:tw-border-uofg-blue-400:hover{--tw-border-opacity:1;border-color:rgb(105 163 185 / var(--tw-border-opacity))}.hocus\\:tw-border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.hocus\\:tw-bg-uofg-red:hover{--tw-bg-opacity:1;background-color:rgb(194 4 48 / var(--tw-bg-opacity))}.hocus\\:tw-text-\\[\\#0077b5\\]:hover{--tw-text-opacity:1;color:rgb(0 119 181 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#1da1f2\\]:hover{--tw-text-opacity:1;color:rgb(29 161 242 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#4267b2\\]:hover{--tw-text-opacity:1;color:rgb(66 103 178 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#e1306c\\]:hover{--tw-text-opacity:1;color:rgb(225 48 108 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#f00\\]:hover{--tw-text-opacity:1;color:rgb(255 0 0 / var(--tw-text-opacity))}.hocus\\:tw-text-uofg-blue-950:hover{--tw-text-opacity:1;color:rgb(25 40 51 / var(--tw-text-opacity))}.hocus\\:tw-opacity-75:hover{opacity:0.75}.hocus\\:tw-border-current:focus{border-color:currentColor}.hocus\\:tw-border-uofg-blue-400:focus{--tw-border-opacity:1;border-color:rgb(105 163 185 / var(--tw-border-opacity))}.hocus\\:tw-border-white:focus{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.hocus\\:tw-bg-uofg-red:focus{--tw-bg-opacity:1;background-color:rgb(194 4 48 / var(--tw-bg-opacity))}.hocus\\:tw-text-\\[\\#0077b5\\]:focus{--tw-text-opacity:1;color:rgb(0 119 181 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#1da1f2\\]:focus{--tw-text-opacity:1;color:rgb(29 161 242 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#4267b2\\]:focus{--tw-text-opacity:1;color:rgb(66 103 178 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#e1306c\\]:focus{--tw-text-opacity:1;color:rgb(225 48 108 / var(--tw-text-opacity))}.hocus\\:tw-text-\\[\\#f00\\]:focus{--tw-text-opacity:1;color:rgb(255 0 0 / var(--tw-text-opacity))}.hocus\\:tw-text-uofg-blue-950:focus{--tw-text-opacity:1;color:rgb(25 40 51 / var(--tw-text-opacity))}.hocus\\:tw-opacity-75:focus{opacity:0.75}@media (prefers-reduced-motion: reduce){.motion-reduce\\:tw-transition-none{transition-property:none}}@media (min-width: 768px){.md\\:tw-col-span-2{grid-column:span 2 / span 2}.md\\:tw-row-start-2{grid-row-start:2}.md\\:tw-grid{display:grid}.md\\:tw-grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:tw-relative{position:relative}.lg\\:tw-row-auto{grid-row:auto}.lg\\:tw-h-16{height:4rem}.lg\\:tw-w-\\[30rem\\]{width:30rem}.lg\\:tw-grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:tw-whitespace-nowrap{white-space:nowrap}.lg\\:tw-border-l-0{border-left-width:0px}}@media (min-width: 1320px){.min-\\[1320px\\]\\:tw-absolute{position:absolute}.min-\\[1320px\\]\\:tw-left-\\[max\\(calc\\(\\(100\\%-1320px\\)\\/2\\)\\2c 7\\.5rem\\)\\]{left:max(calc((100% - 1320px) / 2),7.5rem)}}.\\[\\&\\>a\\]\\:last\\:tw-pb-4:last-child>a{padding-bottom:1rem}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-scale-110:hover>div>slot::slotted(img){--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-transform:hover>div>slot::slotted(img){transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-transition-transform:hover>div>slot::slotted(img){transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-scale-110:focus>div>slot::slotted(img){--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-transform:focus>div>slot::slotted(img){transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\\[\\&\\>div\\>slot\\:\\:slotted\\(img\\)\\]\\:hocus\\:tw-transition-transform:focus>div>slot::slotted(img){transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\[\\&\\>li\\]\\:tw-contents>li{display:contents}.\\[\\&\\>slot\\:\\:slotted\\(img\\)\\]\\:tw-w-full>slot::slotted(img){width:100%}.\\[\\&\\>slot\\:\\:slotted\\(img\\)\\]\\:tw-object-cover>slot::slotted(img){-o-object-fit:cover;object-fit:cover}.\\[\\&\\>slot\\:\\:slotted\\(img\\)\\]\\:tw-transition-transform>slot::slotted(img){transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\[\\&\\>slot\\[name\\=\\\"body\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-m-0>slot[name=\"body\"]::slotted(*){margin:0px}.\\[\\&\\>slot\\[name\\=\\\"body\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-text-xl>slot[name=\"body\"]::slotted(*){font-size:1.25rem;line-height:1.75rem}.\\[\\&\\>slot\\[name\\=\\\"body\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-font-normal>slot[name=\"body\"]::slotted(*){font-weight:400}.\\[\\&\\>slot\\[name\\=\\\"message\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-text-2xl>slot[name=\"message\"]::slotted(*){font-size:1.5rem;line-height:2rem}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-m-0>slot[name=\"subtitle\"]::slotted(*){margin:0px}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-mb-8>slot[name=\"subtitle\"]::slotted(*){margin-bottom:2rem}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-py-4>slot[name=\"subtitle\"]::slotted(*){padding-top:1rem;padding-bottom:1rem}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-text-2xl>slot[name=\"subtitle\"]::slotted(*){font-size:1.5rem;line-height:2rem}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-text-4xl>slot[name=\"subtitle\"]::slotted(*){font-size:2.25rem;line-height:2.5rem}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-font-bold>slot[name=\"subtitle\"]::slotted(*){font-weight:700}.\\[\\&\\>slot\\[name\\=\\\"subtitle\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-font-normal>slot[name=\"subtitle\"]::slotted(*){font-weight:400}.\\[\\&\\>slot\\[name\\=\\\"title\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-m-0>slot[name=\"title\"]::slotted(*){margin:0px}.\\[\\&\\>slot\\[name\\=\\\"title\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-py-4>slot[name=\"title\"]::slotted(*){padding-top:1rem;padding-bottom:1rem}.\\[\\&\\>slot\\[name\\=\\\"title\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-text-4xl>slot[name=\"title\"]::slotted(*){font-size:2.25rem;line-height:2.5rem}.\\[\\&\\>slot\\[name\\=\\\"title\\\"\\]\\:\\:slotted\\(\\*\\)\\]\\:tw-font-normal>slot[name=\"title\"]::slotted(*){font-weight:400}.\\[\\&\\>svg\\]\\:tw-mr-4>svg{margin-right:1rem}.\\[\\&\\>svg\\]\\:tw-block>svg{display:block}.\\[\\&\\>svg\\]\\:tw-h-\\[1\\.5em\\]>svg{height:1.5em}.\\[\\&\\>svg\\]\\:tw-h-\\[1\\.6em\\]>svg{height:1.6em}.\\[\\&\\>svg\\]\\:tw-h-\\[1em\\]>svg{height:1em}.\\[\\&\\>svg\\]\\:tw-h-full>svg{height:100%}.\\[\\&\\>svg\\]\\:tw-w-auto>svg{width:auto}.\\[\\&\\>svg\\]\\:tw-fill-current>svg{fill:currentColor}.\\[\\&\\>svg\\]\\:tw-fill-uofg-yellow>svg{fill:#ffc72a}.\\[\\&\\>svg\\]\\:tw-transition-transform>svg{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\[\\&\\>svg\\]\\:aria-expanded\\:tw-rotate-180[aria-expanded=\"true\"]>svg{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\\[\\&\\>uofg-menu\\]\\:last\\:tw-pb-6:last-child>uofg-menu{padding-bottom:1.5rem}";
|
|
30
|
+
const tw = twCss;
|
|
31
|
+
|
|
32
|
+
const WEB_ANIMATIONS_SUPPORTED = () => {
|
|
33
|
+
return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
|
|
34
|
+
};
|
|
35
|
+
const PREFERS_REDUCED_MOTION = () => {
|
|
36
|
+
return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
37
|
+
};
|
|
38
|
+
const getAllFocusableElements = (container) => {
|
|
39
|
+
const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
|
|
40
|
+
return Array.from(container.querySelectorAll(query));
|
|
41
|
+
};
|
|
42
|
+
let stylesheet = null;
|
|
43
|
+
if (typeof CSSStyleSheet === 'function') {
|
|
44
|
+
stylesheet = new CSSStyleSheet();
|
|
45
|
+
stylesheet.replaceSync(tw);
|
|
46
|
+
}
|
|
47
|
+
const attachTailwind = (root) => {
|
|
48
|
+
if (stylesheet) {
|
|
49
|
+
root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet];
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
const style = document.createElement('style');
|
|
53
|
+
style.innerHTML = tw;
|
|
54
|
+
root.prepend(style);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
exports.FontAwesomeIcon = FontAwesomeIcon;
|
|
59
|
+
exports.PREFERS_REDUCED_MOTION = PREFERS_REDUCED_MOTION;
|
|
60
|
+
exports.WEB_ANIMATIONS_SUPPORTED = WEB_ANIMATIONS_SUPPORTED;
|
|
61
|
+
exports.attachTailwind = attachTailwind;
|
|
62
|
+
exports.faChevronUp = faChevronUp;
|
|
63
|
+
exports.faCircleExclamation = faCircleExclamation;
|
|
64
|
+
exports.faTimes = faTimes;
|
|
65
|
+
exports.getAllFocusableElements = getAllFocusableElements;
|
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
3
|
import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
+
import { attachTailwind } from "../../utils/utils";
|
|
4
5
|
export class UofgAlert {
|
|
6
|
+
connectedCallback() {
|
|
7
|
+
attachTailwind(this.el.shadowRoot);
|
|
8
|
+
}
|
|
5
9
|
render() {
|
|
6
|
-
return (h("div", { key: '
|
|
10
|
+
return (h("div", { key: 'eb903744c9729170ab2d76c26e19934e35e5f01f', class: "tw-flex tw-flex-col tw-text-3xl" }, h("div", { key: '16d4e504a789b755c36e51708c1b496eb9dbc875', class: "tw-flex tw-items-center tw-bg-uofg-red tw-p-8 tw-text-4xl tw-text-white [&>svg]:tw-mr-4 [&>svg]:tw-h-[1.5em] [&>svg]:tw-fill-current" }, h(FontAwesomeIcon, { key: '7447fb68a467e928b33db5b6a0699a19cddd6723', icon: faCircleExclamation }), h("slot", { key: '22900561c881994916379bf708d0c0be5f9c55c0', name: "title" })), h("div", { key: '1201aa1065fc23e6d3d2e0a2e284d8db50431ad4', class: 'tw-flex tw-flex-col tw-bg-white tw-px-8 tw-py-6 [&>slot[name="message"]::slotted(*)]:tw-text-2xl [&>slot[name="subtitle"]::slotted(*)]:tw-mb-8 [&>slot[name="subtitle"]::slotted(*)]:tw-text-4xl [&>slot[name="subtitle"]::slotted(*)]:tw-font-bold' }, h("slot", { key: 'ffcf1bad53e6f63ebc81550195030b98f7e22f53', name: "subtitle" }), h("slot", { key: 'd753d9c6ad31fb2b3ca24a0390d49937aa34a573', name: "message" })), h("div", { key: '51aba97b218c574c621a0fb5714531f242e27d03', class: "tw-flex tw-bg-uofg-grey tw-px-8 tw-py-4 tw-text-2xl" }, h("slot", { key: 'f56f00f341f418267d00c1208380bd5ecc28c260', name: "footer" }))));
|
|
7
11
|
}
|
|
8
12
|
static get is() { return "uofg-alert"; }
|
|
9
13
|
static get encapsulation() { return "shadow"; }
|
|
10
|
-
static get
|
|
11
|
-
return {
|
|
12
|
-
"$": ["uofg-alert.css"]
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
static get styleUrls() {
|
|
16
|
-
return {
|
|
17
|
-
"$": ["uofg-alert.css"]
|
|
18
|
-
};
|
|
19
|
-
}
|
|
14
|
+
static get elementRef() { return "el"; }
|
|
20
15
|
}
|
|
@@ -1,37 +1,29 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
3
|
import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
+
import { attachTailwind } from "../../utils/utils";
|
|
4
5
|
export class UofgBackToTop {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.threshold = 50;
|
|
7
8
|
this.isVisible = false;
|
|
8
9
|
}
|
|
9
10
|
connectedCallback() {
|
|
11
|
+
attachTailwind(this.el.shadowRoot);
|
|
10
12
|
this.onScroll();
|
|
11
13
|
}
|
|
12
14
|
onScroll() {
|
|
13
15
|
this.isVisible = window.scrollY >= this.threshold;
|
|
14
16
|
}
|
|
15
17
|
render() {
|
|
16
|
-
return (h("button", { key: '
|
|
18
|
+
return (h("button", { key: '847d2b365d97efd1e642a87f2b7a7efa4fc6d43d', "aria-label": "Go back to the top", class: {
|
|
17
19
|
'tw-opacity-100': this.isVisible,
|
|
18
20
|
'tw-fixed tw-bottom-0 tw-right-0 tw-z-[1000] tw-m-4 tw-flex tw-h-[3.5rem] tw-w-[3.5rem] tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-[50%] tw-border tw-border-solid tw-border-white tw-bg-black tw-text-white tw-opacity-0 tw-transition hocus:tw-bg-uofg-red [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current': true,
|
|
19
21
|
}, onClick: () => {
|
|
20
22
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
21
|
-
} }, h(FontAwesomeIcon, { key: '
|
|
23
|
+
} }, h(FontAwesomeIcon, { key: '677b62f87847d592da099b729fc858a9bd525c70', icon: faChevronUp })));
|
|
22
24
|
}
|
|
23
25
|
static get is() { return "uofg-back-to-top"; }
|
|
24
26
|
static get encapsulation() { return "shadow"; }
|
|
25
|
-
static get originalStyleUrls() {
|
|
26
|
-
return {
|
|
27
|
-
"$": ["uofg-back-to-top.css"]
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
static get styleUrls() {
|
|
31
|
-
return {
|
|
32
|
-
"$": ["uofg-back-to-top.css"]
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
27
|
static get properties() {
|
|
36
28
|
return {
|
|
37
29
|
"threshold": {
|
|
@@ -59,6 +51,7 @@ export class UofgBackToTop {
|
|
|
59
51
|
"isVisible": {}
|
|
60
52
|
};
|
|
61
53
|
}
|
|
54
|
+
static get elementRef() { return "el"; }
|
|
62
55
|
static get listeners() {
|
|
63
56
|
return [{
|
|
64
57
|
"name": "scroll",
|
|
@@ -1,26 +1,20 @@
|
|
|
1
1
|
import { Fragment, h } from "@stencil/core";
|
|
2
|
+
import { attachTailwind } from "../../utils/utils";
|
|
2
3
|
export class UofgCard {
|
|
3
4
|
constructor() {
|
|
4
5
|
this.href = undefined;
|
|
5
6
|
}
|
|
7
|
+
connectedCallback() {
|
|
8
|
+
attachTailwind(this.el.shadowRoot);
|
|
9
|
+
}
|
|
6
10
|
render() {
|
|
7
11
|
var _a;
|
|
8
|
-
const Body = () => (h(Fragment, { key: '
|
|
12
|
+
const Body = () => (h(Fragment, { key: '26ca92b107e66a75f4c9236e32b29fe1749cd69d' }, h("div", { key: '58bf291cdeb1cd51bda3f194c7df1cfea664d635', class: "tw-flex tw-items-center tw-justify-center tw-overflow-hidden [&>slot::slotted(img)]:tw-w-full [&>slot::slotted(img)]:tw-object-cover [&>slot::slotted(img)]:tw-transition-transform" }, h("slot", { key: '715c920fcbeeb7453d473e2483b363882adece46', name: "img" })), h("div", { key: '0f758e0f6e8af2ea15cc100c632d4ca3bc4d7c9c', class: 'tw-flex tw-p-4 tw-flex-col [&>slot[name="body"]::slotted(*)]:tw-m-0 [&>slot[name="body"]::slotted(*)]:tw-text-xl [&>slot[name="body"]::slotted(*)]:tw-font-normal [&>slot[name="subtitle"]::slotted(*)]:tw-m-0 [&>slot[name="subtitle"]::slotted(*)]:tw-py-4 [&>slot[name="subtitle"]::slotted(*)]:tw-text-2xl [&>slot[name="subtitle"]::slotted(*)]:tw-font-normal [&>slot[name="title"]::slotted(*)]:tw-m-0 [&>slot[name="title"]::slotted(*)]:tw-py-4 [&>slot[name="title"]::slotted(*)]:tw-text-4xl [&>slot[name="title"]::slotted(*)]:tw-font-normal' }, h("slot", { key: '37f41a48475dd04378c49851719a0fb96b9fa1a4', name: "title" }), h("slot", { key: '89b9560b7df9b3014628d7c88993cc301e41ff16', name: "subtitle" }), h("slot", { key: '6fcd3a1d466a086c8a3ebbd4fc8dcb9ae74f759a', name: "body" })), h("div", { key: 'a9879cd32b2eb3f3eae766b93866508c1089f8e8', class: "tw-bg-uofg-blue-200 tw-px-4 tw-py-2" }, h("slot", { key: 'd557982d2c393581515b93eed69d8e488f979af3', name: "footer" }))));
|
|
9
13
|
const classes = 'tw-flex tw-flex-col tw-bg-uofg-blue-50 tw-text-2xl tw-rounded tw-overflow-hidden';
|
|
10
14
|
return ((_a = this === null || this === void 0 ? void 0 : this.href) !== null && _a !== void 0 ? _a : '') != '' ? (h("a", { href: this.href, class: `${classes} tw-border tw-border-solid tw-border-transparent tw-transition-colors focus-within:tw-border-uofg-blue-400 hocus:tw-border-uofg-blue-400 [&>div>slot::slotted(img)]:hocus:tw-scale-110 [&>div>slot::slotted(img)]:hocus:tw-transform [&>div>slot::slotted(img)]:hocus:tw-transition-transform` }, h(Body, null))) : (h("div", { class: classes }, h(Body, null)));
|
|
11
15
|
}
|
|
12
16
|
static get is() { return "uofg-card"; }
|
|
13
17
|
static get encapsulation() { return "shadow"; }
|
|
14
|
-
static get originalStyleUrls() {
|
|
15
|
-
return {
|
|
16
|
-
"$": ["uofg-card.css"]
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
static get styleUrls() {
|
|
20
|
-
return {
|
|
21
|
-
"$": ["uofg-card.css"]
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
18
|
static get properties() {
|
|
25
19
|
return {
|
|
26
20
|
"href": {
|
|
@@ -42,4 +36,5 @@ export class UofgCard {
|
|
|
42
36
|
}
|
|
43
37
|
};
|
|
44
38
|
}
|
|
39
|
+
static get elementRef() { return "el"; }
|
|
45
40
|
}
|
|
@@ -17,6 +17,7 @@ import { faLinkedin } from "@fortawesome/free-brands-svg-icons/faLinkedin";
|
|
|
17
17
|
import { faTiktok } from "@fortawesome/free-brands-svg-icons/faTiktok";
|
|
18
18
|
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons/faTwitterSquare";
|
|
19
19
|
import { faYoutube } from "@fortawesome/free-brands-svg-icons/faYoutube";
|
|
20
|
+
import { attachTailwind } from "../../utils/utils";
|
|
20
21
|
const socials = [
|
|
21
22
|
{
|
|
22
23
|
text: 'Twitter',
|
|
@@ -114,6 +115,7 @@ export class UofgFooter {
|
|
|
114
115
|
}
|
|
115
116
|
connectedCallback() {
|
|
116
117
|
var _a;
|
|
118
|
+
attachTailwind(this.el.shadowRoot);
|
|
117
119
|
this.updateExtraLinks();
|
|
118
120
|
(_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
|
|
119
121
|
this.updateExtraLinks();
|
|
@@ -127,23 +129,13 @@ export class UofgFooter {
|
|
|
127
129
|
.map(child => ({ text: child.textContent, href: child.getAttribute('href') }));
|
|
128
130
|
}
|
|
129
131
|
render() {
|
|
130
|
-
return (h("footer", { key: '
|
|
132
|
+
return (h("footer", { key: '35d147bc6c3c9f614104b191b7476723a842b17f' }, this.extraLinks.length > 0 && (h("ul", { class: "tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-bg-uofg-blue-50 tw-p-6 tw-px-[max(calc((100%-1320px)/2),2rem)]" }, this.extraLinks.map(link => (h("li", { class: "tw-border-0 tw-border-r-2 tw-border-solid tw-border-uofg-blue-100 tw-p-2 first:tw-border-l-2" }, h("a", { class: "tw-text-uofg-blue-500 tw-transition-colors hocus:tw-text-uofg-blue-950", href: link.href }, link.text)))))), h("div", { key: 'bde0f631f44fde01c389e1e4904cf7b1d6e7a754', class: "tw-flex tw-flex-col tw-content-center tw-gap-8 tw-bg-black tw-px-[max(calc((100%-1320px)/2),2rem)] tw-py-8 tw-text-white md:tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-4" }, h("div", { key: 'fa6435a938414cacce1011833fb52bc444fc7ae1', class: "tw-flex tw-flex-col tw-justify-between tw-gap-2" }, h("a", { key: '4dc21d37ccf73f564ecb94f7be406cfa21d6bc05', href: "https://www.uoguelph.ca/improve-life", "aria-label": "Improve Life", class: "tw-flex tw-transition-opacity hocus:tw-opacity-75 [&>svg]:tw-h-[1.6em]", innerHTML: improveLifeLogo }), h("ul", { key: '454bb903be7ea860ead363ec5d38707a13ada1f1', class: "tw-flex tw-gap-3 tw-text-4xl [&>li]:tw-contents" }, socials.map(item => (h("li", null, h("a", { href: item.href, "aria-label": item.text, class: `tw-transition-colors [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current ${item.class}` }, h(FontAwesomeIcon, { icon: item.icon })))))), h("a", { key: 'fc97473b3f7f9d9b055b3212d1f72bf0b746dfab', class: "tw-w-fit tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white", href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { key: 'af71e4fa9d85ecbc2f92e920081cf4b7a6a122ca', class: "tw-w-fit tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white", href: "https://www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h("div", { key: '3eea01c2ba5f9085fc658b1b0dcbdd595a87cd21', class: "md:tw-col-span-2 md:tw-row-start-2 lg:tw-row-auto" }, h("ul", { key: '9f45c6777c248140ff741cdbdc0c8ffaaf38a0b4', class: "tw-flex tw-flex-col tw-gap-2 md:tw-grid md:tw-grid-cols-2 [&>li]:tw-contents" }, links.map(item => {
|
|
131
133
|
var _a;
|
|
132
|
-
return (h("li", null, h("a", { href: item.href, title: (_a = item === null || item === void 0 ? void 0 : item.title) !== null && _a !== void 0 ? _a : '', class: "tw-flex tw-w-fit tw-gap-3 tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white [&>svg]:tw-h-[1em] [&>svg]:tw-fill-uofg-yellow" }, h(FontAwesomeIcon, { icon: item.icon }), h("span", null, item.text))));
|
|
133
|
-
}))), h("address", { key: '
|
|
134
|
+
return (h("li", null, h("a", { href: item.href, title: (_a = item === null || item === void 0 ? void 0 : item.title) !== null && _a !== void 0 ? _a : '', class: "tw-flex tw-justify-center tw-items-center tw-w-fit tw-gap-3 tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white [&>svg]:tw-h-[1em] [&>svg]:tw-fill-uofg-yellow" }, h(FontAwesomeIcon, { icon: item.icon }), h("span", null, item.text))));
|
|
135
|
+
}))), h("address", { key: 'ea2e7206a264920238af7b899e979d0099013009', class: "tw-flex tw-flex-col tw-justify-between tw-gap-4 tw-not-italic" }, h("strong", { key: '9290d97ccc9b1c1de3f7c6eb498c39934d84a9b4' }, "University of Guelph"), h("span", { key: '0b1a22a47e2f8bc6e3695f5a25858ab4451b7b50' }, "50 Stone Road East,"), h("span", { key: 'f07582b60536191e4ad17179dca8f495c7190b57' }, "Guelph, Ontario, Canada"), h("span", { key: 'c0ee62b9f339b8b36b1ef340a0c1dc8249ae99af' }, "N1G 2W1"), h("a", { key: 'd14bcbc1f6a20cee635a149291052a26750a63af', href: "tel:1-519-824-4120", class: "tw-flex tw-justify-center tw-items-center tw-w-fit tw-gap-2 tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-text-uofg-blue tw-transition-colors hocus:tw-border-current [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current" }, h(FontAwesomeIcon, { key: 'fc55b72b292ba4a856bec2978bc20630d50f9b92', icon: faPhoneFlip }), h("span", { key: '67134aae755352d841b834377593e9a34bf77fca' }, "519-824-4120"))))));
|
|
134
136
|
}
|
|
135
137
|
static get is() { return "uofg-footer"; }
|
|
136
138
|
static get encapsulation() { return "shadow"; }
|
|
137
|
-
static get originalStyleUrls() {
|
|
138
|
-
return {
|
|
139
|
-
"$": ["uofg-footer.css"]
|
|
140
|
-
};
|
|
141
|
-
}
|
|
142
|
-
static get styleUrls() {
|
|
143
|
-
return {
|
|
144
|
-
"$": ["uofg-footer.css"]
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
139
|
static get states() {
|
|
148
140
|
return {
|
|
149
141
|
"extraLinks": {}
|
|
@@ -4,9 +4,10 @@ import FullSizeLogo from "./logo-full.svg";
|
|
|
4
4
|
import ReducedSizeLogo from "./logo-reduced.svg";
|
|
5
5
|
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
6
6
|
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
|
|
7
|
-
import { faRightToBracket } from "@fortawesome/free-solid-svg-icons/faRightToBracket";
|
|
8
7
|
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
|
|
9
8
|
import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
|
|
9
|
+
import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
|
|
10
|
+
import { attachTailwind } from "../../utils/utils";
|
|
10
11
|
const TRANSITION_BREAKPOINT = 1024;
|
|
11
12
|
const MAX_CONTENT_WIDTH = 1320;
|
|
12
13
|
const MENU_CHAR_LIMIT = 35;
|
|
@@ -20,7 +21,7 @@ const topLinks = [
|
|
|
20
21
|
href: 'https://news.uoguelph.ca/',
|
|
21
22
|
},
|
|
22
23
|
{
|
|
23
|
-
text: '
|
|
24
|
+
text: 'Quick Links',
|
|
24
25
|
links: [
|
|
25
26
|
{
|
|
26
27
|
text: 'Future Students',
|
|
@@ -45,7 +46,7 @@ const topLinks = [
|
|
|
45
46
|
],
|
|
46
47
|
},
|
|
47
48
|
{
|
|
48
|
-
text: 'APPLY',
|
|
49
|
+
text: 'APPLY NOW',
|
|
49
50
|
href: 'https://uoguelph.ca/apply/',
|
|
50
51
|
highlight: true,
|
|
51
52
|
},
|
|
@@ -72,18 +73,37 @@ const mainLinks = [
|
|
|
72
73
|
href: 'https://www.uoguelph.ca/studentexperience/',
|
|
73
74
|
},
|
|
74
75
|
];
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
76
|
+
const search = {
|
|
77
|
+
text: 'Search the University of Guelph',
|
|
78
|
+
href: 'https://uoguelph.ca/search',
|
|
79
|
+
icon: faSearch,
|
|
80
|
+
};
|
|
81
|
+
const account = {
|
|
82
|
+
text: 'Account Menu',
|
|
83
|
+
links: [
|
|
84
|
+
{
|
|
85
|
+
text: 'Intranet',
|
|
86
|
+
href: 'https://intranet.uoguelph.ca/',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
text: 'WebAdvisor',
|
|
90
|
+
href: 'https://www.uoguelph.ca/webadvisor/',
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
text: 'GryphMail',
|
|
94
|
+
href: 'https://mail.uoguelph.ca/',
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
text: 'CourseLink',
|
|
98
|
+
href: 'https://courselink.uoguelph.ca/',
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
text: 'GryphLife',
|
|
102
|
+
href: 'https://gryphlife.uoguelph.ca/',
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
icon: faUser,
|
|
106
|
+
};
|
|
87
107
|
export class UofgHeader {
|
|
88
108
|
constructor() {
|
|
89
109
|
this.subContainerOverflowWidth = NaN;
|
|
@@ -96,6 +116,7 @@ export class UofgHeader {
|
|
|
96
116
|
}
|
|
97
117
|
connectedCallback() {
|
|
98
118
|
var _a;
|
|
119
|
+
attachTailwind(this.el.shadowRoot);
|
|
99
120
|
this.updateFullSize();
|
|
100
121
|
this.updatePageSpecificContent();
|
|
101
122
|
(_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
|
|
@@ -164,16 +185,19 @@ export class UofgHeader {
|
|
|
164
185
|
}
|
|
165
186
|
render() {
|
|
166
187
|
var _a, _b;
|
|
167
|
-
return (h("header", { key: '
|
|
188
|
+
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 => {
|
|
168
189
|
if ('links' in item) {
|
|
169
|
-
return (h("li", null, h("uofg-menu", { class: "tw-relative tw-block tw-h-full", "auto-collapse": true }, h("button", { class:
|
|
190
|
+
return (h("li", null, h("uofg-menu", { class: "tw-relative tw-block tw-h-full", "auto-collapse": true }, h("button", { class: {
|
|
191
|
+
'${} 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,
|
|
192
|
+
'[&>svg]:aria-expanded:tw-rotate-180': !item.icon,
|
|
193
|
+
}, 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))))))));
|
|
170
194
|
}
|
|
171
195
|
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())));
|
|
172
|
-
})))), h("nav", { key: '
|
|
196
|
+
})))), h("nav", { key: '8512ab7abce3d2e54d60f2bb0c594c1ebfa3de6f', class: {
|
|
173
197
|
'tw-h-[10rem]': this.isFullSize,
|
|
174
198
|
'tw-h-[5rem]': !this.isFullSize,
|
|
175
199
|
'tw-relative tw-flex tw-justify-between tw-bg-black tw-px-[calc((100%-1320px)/2)] tw-text-3xl tw-text-white': true,
|
|
176
|
-
}, "aria-label": "Main" }, h("div", { key: '
|
|
200
|
+
}, "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 => {
|
|
177
201
|
if ('links' in item) {
|
|
178
202
|
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))))))));
|
|
179
203
|
}
|
|
@@ -196,16 +220,6 @@ export class UofgHeader {
|
|
|
196
220
|
}
|
|
197
221
|
static get is() { return "uofg-header"; }
|
|
198
222
|
static get encapsulation() { return "shadow"; }
|
|
199
|
-
static get originalStyleUrls() {
|
|
200
|
-
return {
|
|
201
|
-
"$": ["uofg-header.css"]
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
static get styleUrls() {
|
|
205
|
-
return {
|
|
206
|
-
"$": ["uofg-header.css"]
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
223
|
static get properties() {
|
|
210
224
|
return {
|
|
211
225
|
"pageTitle": {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
|
|
3
3
|
import { faTimes } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
-
import { getAllFocusableElements } from "../../utils/utils";
|
|
4
|
+
import { attachTailwind, getAllFocusableElements } from "../../utils/utils";
|
|
5
5
|
/**
|
|
6
6
|
* @part content - The modal content container.
|
|
7
7
|
* @part dismiss-button - The button that closes the modal.
|
|
@@ -17,6 +17,7 @@ export class UofgModal {
|
|
|
17
17
|
this.isOpen = false;
|
|
18
18
|
}
|
|
19
19
|
connectedCallback() {
|
|
20
|
+
attachTailwind(this.el.shadowRoot);
|
|
20
21
|
// Bind event handlers so that 'this' is always the component instance.
|
|
21
22
|
this.handleClick = this.handleClick.bind(this);
|
|
22
23
|
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
@@ -109,16 +110,16 @@ export class UofgModal {
|
|
|
109
110
|
document.body.style.overflow = newValue ? 'hidden' : '';
|
|
110
111
|
}
|
|
111
112
|
render() {
|
|
112
|
-
return (h("div", { key: '
|
|
113
|
+
return (h("div", { key: 'd4cbcdbf263ad8ea2aceb3a1718629cfc50056b0', class: {
|
|
113
114
|
'tw-visible tw-opacity-100': this.isOpen,
|
|
114
115
|
'tw-invisible tw-opacity-0': !this.isOpen,
|
|
115
116
|
'tw-fixed tw-left-0 tw-top-0 tw-z-[1000] tw-flex tw-h-screen tw-w-screen tw-bg-black tw-bg-opacity-50 tw-transition-[opacity,visibility]': true,
|
|
116
|
-
}, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, h("div", { key: '
|
|
117
|
+
}, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, h("div", { key: '56ec3bc88ac19f00c813eb1a3f8ef41139217174', part: "content", class: {
|
|
117
118
|
'tw-visible tw-opacity-100': this.isOpen,
|
|
118
119
|
'tw-translate-y-[calc(-50%_-_50px)]': !this.isOpen && this.centered,
|
|
119
120
|
'tw-translate-y-[-50px]': (!this.isOpen && !this.centered) || (this.isOpen && this.centered),
|
|
120
121
|
'tw-z-1 tw-absolute tw-left-1/2 tw-h-fit tw-max-h-full tw-w-fit tw-max-w-full -tw-translate-x-1/2 tw-overflow-auto tw-p-8 tw-transition-transform motion-reduce:tw-transition-none': true,
|
|
121
|
-
} }, h("button", { key: '
|
|
122
|
+
} }, h("button", { key: 'ca5eff3c18c70d9e0d3a05901ecec519e81e298e', class: "[&>svg]:h-[1em] tw-absolute tw-right-8 tw-top-8 tw-z-[2] tw-flex tw-h-12 tw-w-12 tw-items-center tw-justify-center tw-border-0 tw-bg-transparent tw-text-3xl tw-p-2 tw-text-[var(--uofg-modal-dismiss-color,white)] [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { key: 'a8d1e9d10fdfd83d6059651dfba660c2446293d8', icon: faTimes })), h("slot", { key: '3931cf9245a94e7aa1eac9d769d823a6e184da0b' }))));
|
|
122
123
|
}
|
|
123
124
|
/**
|
|
124
125
|
* Get the current state of the modal.
|
|
@@ -158,16 +159,6 @@ export class UofgModal {
|
|
|
158
159
|
}
|
|
159
160
|
static get is() { return "uofg-modal"; }
|
|
160
161
|
static get encapsulation() { return "shadow"; }
|
|
161
|
-
static get originalStyleUrls() {
|
|
162
|
-
return {
|
|
163
|
-
"$": ["uofg-modal.css"]
|
|
164
|
-
};
|
|
165
|
-
}
|
|
166
|
-
static get styleUrls() {
|
|
167
|
-
return {
|
|
168
|
-
"$": ["uofg-modal.css"]
|
|
169
|
-
};
|
|
170
|
-
}
|
|
171
162
|
static get properties() {
|
|
172
163
|
return {
|
|
173
164
|
"label": {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import tw from "../styles/tw.css";
|
|
1
2
|
export const WEB_ANIMATIONS_SUPPORTED = () => {
|
|
2
3
|
return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
|
|
3
4
|
};
|
|
@@ -11,3 +12,18 @@ export const getAllFocusableElements = (container) => {
|
|
|
11
12
|
const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
|
|
12
13
|
return Array.from(container.querySelectorAll(query));
|
|
13
14
|
};
|
|
15
|
+
let stylesheet = null;
|
|
16
|
+
if (typeof CSSStyleSheet === 'function') {
|
|
17
|
+
stylesheet = new CSSStyleSheet();
|
|
18
|
+
stylesheet.replaceSync(tw);
|
|
19
|
+
}
|
|
20
|
+
export const attachTailwind = (root) => {
|
|
21
|
+
if (stylesheet) {
|
|
22
|
+
root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet];
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
const style = document.createElement('style');
|
|
26
|
+
style.innerHTML = tw;
|
|
27
|
+
root.prepend(style);
|
|
28
|
+
}
|
|
29
|
+
};
|