@uoguelph/web-components 1.2.0-rc.7 → 1.2.0-rc.9
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/README.md +0 -63
- package/dist/uofg-web-components/index-CSn7dBx6.js +981 -0
- package/dist/uofg-web-components/uofg-alert.esm.js +154 -0
- package/dist/uofg-web-components/uofg-footer.esm.js +403 -0
- package/dist/uofg-web-components/uofg-header.esm.js +2306 -0
- package/dist/uofg-web-components/uofg-modal.esm.js +329 -0
- package/dist/uofg-web-components/uofg-web-components.css +1 -1
- package/dist/uofg-web-components/uofg-web-components.esm.js +8 -1
- package/package.json +21 -33
- package/dist/cjs/app-globals-3a1e7e63.js +0 -5
- package/dist/cjs/index-eb919017.js +0 -1990
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -15
- package/dist/cjs/uofg-alert.cjs.entry.js +0 -21
- package/dist/cjs/uofg-back-to-top_5.cjs.entry.js +0 -1400
- package/dist/cjs/uofg-modal.cjs.entry.js +0 -168
- package/dist/cjs/uofg-web-components.cjs.js +0 -25
- package/dist/cjs/utils-93383c5b.js +0 -65
- package/dist/collection/collection-manifest.json +0 -18
- package/dist/collection/components/uofg-alert/uofg-alert.js +0 -15
- package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.js +0 -64
- package/dist/collection/components/uofg-card/uofg-card.js +0 -40
- package/dist/collection/components/uofg-footer/uofg-footer.js +0 -145
- package/dist/collection/components/uofg-header/uofg-header.js +0 -280
- package/dist/collection/components/uofg-menu/uofg-menu.js +0 -438
- package/dist/collection/components/uofg-modal/uofg-modal.js +0 -408
- package/dist/collection/index.js +0 -1
- package/dist/collection/utils/font-awesome-icon.js +0 -7
- package/dist/collection/utils/utils.js +0 -29
- package/dist/components/font-awesome-icon.js +0 -10
- package/dist/components/index.d.ts +0 -50
- package/dist/components/index.js +0 -8
- package/dist/components/index2.js +0 -18
- package/dist/components/uofg-alert.d.ts +0 -11
- package/dist/components/uofg-alert.js +0 -37
- package/dist/components/uofg-back-to-top.d.ts +0 -11
- package/dist/components/uofg-back-to-top.js +0 -51
- package/dist/components/uofg-card.d.ts +0 -11
- package/dist/components/uofg-card.js +0 -41
- package/dist/components/uofg-footer.d.ts +0 -11
- package/dist/components/uofg-footer.js +0 -749
- package/dist/components/uofg-header.d.ts +0 -11
- package/dist/components/uofg-header.js +0 -418
- package/dist/components/uofg-menu.d.ts +0 -11
- package/dist/components/uofg-menu.js +0 -6
- package/dist/components/uofg-menu2.js +0 -268
- package/dist/components/uofg-modal.d.ts +0 -11
- package/dist/components/uofg-modal.js +0 -198
- package/dist/components/utils.js +0 -30
- package/dist/esm/app-globals-0f993ce5.js +0 -3
- package/dist/esm/index-06ec28fa.js +0 -1960
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -11
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/uofg-alert.entry.js +0 -17
- package/dist/esm/uofg-back-to-top_5.entry.js +0 -1392
- package/dist/esm/uofg-modal.entry.js +0 -164
- package/dist/esm/uofg-web-components.js +0 -20
- package/dist/esm/utils-acd1ee82.js +0 -56
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/types/components/uofg-alert/uofg-alert.d.ts +0 -5
- package/dist/types/components/uofg-back-to-top/uofg-back-to-top.d.ts +0 -11
- package/dist/types/components/uofg-card/uofg-card.d.ts +0 -9
- package/dist/types/components/uofg-footer/uofg-footer.d.ts +0 -8
- package/dist/types/components/uofg-header/uofg-header.d.ts +0 -37
- package/dist/types/components/uofg-menu/uofg-menu.d.ts +0 -68
- package/dist/types/components/uofg-modal/uofg-modal.d.ts +0 -77
- package/dist/types/components.d.ts +0 -303
- package/dist/types/index.d.ts +0 -1
- package/dist/types/stencil-public-runtime.d.ts +0 -1681
- package/dist/types/utils/font-awesome-icon.d.ts +0 -5
- package/dist/types/utils/utils.d.ts +0 -5
- package/dist/uofg-web-components/index.esm.js +0 -0
- package/dist/uofg-web-components/p-4a896033.js +0 -2
- package/dist/uofg-web-components/p-4e0da5c7.entry.js +0 -1
- package/dist/uofg-web-components/p-663d722e.entry.js +0 -1
- package/dist/uofg-web-components/p-84b2d8d2.js +0 -1
- package/dist/uofg-web-components/p-b0718d71.entry.js +0 -1
- package/dist/uofg-web-components/p-e1255160.js +0 -1
- package/loader/cdn.js +0 -3
- package/loader/index.cjs.js +0 -3
- package/loader/index.d.ts +0 -21
- package/loader/index.es2017.js +0 -3
- package/loader/index.js +0 -4
- package/loader/package.json +0 -11
- /package/dist/{collection/components/uofg-header/decoration.svg → uofg-web-components/decorative.svg} +0 -0
- /package/dist/{collection/components/uofg-footer → uofg-web-components}/improve-life.svg +0 -0
- /package/dist/{collection/components/uofg-header/logo-reduced.svg → uofg-web-components/logo-small.svg} +0 -0
- /package/dist/{collection/components/uofg-header/logo-full.svg → uofg-web-components/logo.svg} +0 -0
|
@@ -1,268 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { W as WEB_ANIMATIONS_SUPPORTED, P as PREFERS_REDUCED_MOTION } from './utils.js';
|
|
3
|
-
|
|
4
|
-
const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
|
|
5
|
-
const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
|
|
6
|
-
const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
this.expanded = createEvent(this, "expanded", 2);
|
|
11
|
-
this.collapsed = createEvent(this, "collapsed", 2);
|
|
12
|
-
this.animationStarted = createEvent(this, "animationStarted", 2);
|
|
13
|
-
this.animationEnded = createEvent(this, "animationEnded", 2);
|
|
14
|
-
this.computedStyle = null;
|
|
15
|
-
this.button = null;
|
|
16
|
-
this.content = null;
|
|
17
|
-
this.contentComputedStyle = null;
|
|
18
|
-
this.observer = new MutationObserver(this.handleMutation);
|
|
19
|
-
this.isExpanded = false;
|
|
20
|
-
this.autoCollapse = false;
|
|
21
|
-
}
|
|
22
|
-
connectedCallback() {
|
|
23
|
-
// Bind functions so that "this" correctly refers to the component's instance.
|
|
24
|
-
this.handleMutation = this.handleMutation.bind(this);
|
|
25
|
-
this.handleClick = this.handleClick.bind(this);
|
|
26
|
-
this.handleFocusout = this.handleFocusout.bind(this);
|
|
27
|
-
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
28
|
-
this.computedStyle = window.getComputedStyle(this.el);
|
|
29
|
-
this.handleMutation();
|
|
30
|
-
this.observer.observe(this.el, { childList: true });
|
|
31
|
-
}
|
|
32
|
-
disconnectedCallback() {
|
|
33
|
-
this.observer.disconnect();
|
|
34
|
-
}
|
|
35
|
-
handleMutation() {
|
|
36
|
-
// Update the button element
|
|
37
|
-
const button = this.el.querySelector('[slot="button"]');
|
|
38
|
-
// Set up the new button
|
|
39
|
-
button === null || button === void 0 ? void 0 : button.setAttribute('aria-expanded', this.isExpanded ? 'true' : 'false');
|
|
40
|
-
button === null || button === void 0 ? void 0 : button.setAttribute('aria-haspopup', 'true');
|
|
41
|
-
this.button = button;
|
|
42
|
-
// Update the content element
|
|
43
|
-
const content = this.el.querySelector('[slot="content"]');
|
|
44
|
-
if (content == null) {
|
|
45
|
-
this.content = null;
|
|
46
|
-
this.contentComputedStyle = null;
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
this.content = content;
|
|
50
|
-
this.isExpanded
|
|
51
|
-
? this.content.style.removeProperty('display')
|
|
52
|
-
: this.content.style.setProperty('display', 'none', 'important');
|
|
53
|
-
this.contentComputedStyle = window.getComputedStyle(this.content);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
handleKeyUp(e) {
|
|
57
|
-
if (e.key === 'Escape') {
|
|
58
|
-
this.isExpanded = false;
|
|
59
|
-
if (e.target !== this.button) {
|
|
60
|
-
e.stopPropagation();
|
|
61
|
-
this.isExpanded = false;
|
|
62
|
-
this.button && this.button.focus();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
handleClick(e) {
|
|
67
|
-
//Check if the click was on the button or a descendant of the button
|
|
68
|
-
if (this.button && this.button.contains(e.target)) {
|
|
69
|
-
this.isExpanded = !this.isExpanded;
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
handleFocusout(e) {
|
|
74
|
-
if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
|
|
75
|
-
this.isExpanded = false;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
handleIsExpandedChange(newValue) {
|
|
79
|
-
var _a, _b, _c;
|
|
80
|
-
(_a = this.button) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', newValue ? 'true' : 'false');
|
|
81
|
-
newValue ? this.expanded.emit() : this.collapsed.emit();
|
|
82
|
-
// No content is slotted, so we don't need to do anything else.
|
|
83
|
-
if (this.content == null) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
// Determine what animation type the user wants.
|
|
87
|
-
const type = this.getAnimationType();
|
|
88
|
-
// If Web Animations API isn't supported, or the user requested no animation, we can simply set display style
|
|
89
|
-
if (!WEB_ANIMATIONS_SUPPORTED() || PREFERS_REDUCED_MOTION() || type === 'none') {
|
|
90
|
-
newValue
|
|
91
|
-
? this.content.style.removeProperty('display')
|
|
92
|
-
: this.content.style.setProperty('display', 'none', 'important');
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
// Check if we are in the middle of an animation.
|
|
96
|
-
const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter(animation => animation.id === 'uofg-menu-animation');
|
|
97
|
-
// If we are, then we want to reverse the existing one rather than starting a new animation.
|
|
98
|
-
if (animations.length > 0) {
|
|
99
|
-
animations === null || animations === void 0 ? void 0 : animations.forEach(animation => animation.reverse());
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
let animationDef;
|
|
103
|
-
const options = {
|
|
104
|
-
id: 'uofg-menu-animation',
|
|
105
|
-
duration: this.getAnimationDuration(),
|
|
106
|
-
fill: 'none',
|
|
107
|
-
easing: this.getAnimationEasing(),
|
|
108
|
-
direction: newValue ? 'normal' : 'reverse',
|
|
109
|
-
};
|
|
110
|
-
// Need to remove display none, otherwise keyframe values won't be calculated correctly.
|
|
111
|
-
this.content.style.removeProperty('display');
|
|
112
|
-
switch (type) {
|
|
113
|
-
case 'fade':
|
|
114
|
-
animationDef = this.fadeAnimation();
|
|
115
|
-
break;
|
|
116
|
-
case 'slide':
|
|
117
|
-
animationDef = this.slideAnimation();
|
|
118
|
-
break;
|
|
119
|
-
default:
|
|
120
|
-
animationDef = this.fadeAnimation();
|
|
121
|
-
}
|
|
122
|
-
// We can start the animation.
|
|
123
|
-
this.animationStarted.emit(newValue);
|
|
124
|
-
(_c = this.content) === null || _c === void 0 ? void 0 : _c.animate(animationDef.keyframes, options).finished.finally(() => {
|
|
125
|
-
var _a;
|
|
126
|
-
// Once the animation is done (or something went wrong during it), we update the content's display style.
|
|
127
|
-
if (this.content) {
|
|
128
|
-
this.isExpanded
|
|
129
|
-
? this.content.style.removeProperty('display')
|
|
130
|
-
: this.content.style.setProperty('display', 'none', 'important');
|
|
131
|
-
(_a = animationDef.callback) === null || _a === void 0 ? void 0 : _a.call(animationDef);
|
|
132
|
-
this.animationEnded.emit(this.isExpanded);
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
getAnimationType() {
|
|
137
|
-
var _a;
|
|
138
|
-
const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-type')) || '';
|
|
139
|
-
switch (str) {
|
|
140
|
-
case 'slide':
|
|
141
|
-
case 'fade':
|
|
142
|
-
return str;
|
|
143
|
-
default:
|
|
144
|
-
return 'none';
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
getAnimationDuration() {
|
|
148
|
-
var _a;
|
|
149
|
-
const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-duration')) || '';
|
|
150
|
-
const matches = DURATION_REGEX.exec(str);
|
|
151
|
-
if (matches == null) {
|
|
152
|
-
return 200;
|
|
153
|
-
}
|
|
154
|
-
return Number.parseFloat(matches[1]) * (matches[2] == 's' ? 1000 : 1);
|
|
155
|
-
}
|
|
156
|
-
getAnimationEasing() {
|
|
157
|
-
var _a;
|
|
158
|
-
const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-easing')) || '';
|
|
159
|
-
switch (str) {
|
|
160
|
-
case 'linear':
|
|
161
|
-
case 'ease':
|
|
162
|
-
case 'ease-in':
|
|
163
|
-
case 'ease-out':
|
|
164
|
-
case 'ease-in-out':
|
|
165
|
-
case 'step-start':
|
|
166
|
-
case 'step-end':
|
|
167
|
-
return str;
|
|
168
|
-
default:
|
|
169
|
-
return EASING_FUNCTION_REGEX.test(str) ? str : 'ease-in-out';
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
fadeAnimation() {
|
|
173
|
-
return { keyframes: [{ opacity: 0 }, { opacity: 1 }] };
|
|
174
|
-
}
|
|
175
|
-
slideAnimation() {
|
|
176
|
-
var _a, _b, _c, _d, _e;
|
|
177
|
-
this.content && this.content.style.setProperty('overflow-y', 'hidden', 'important');
|
|
178
|
-
return {
|
|
179
|
-
keyframes: [
|
|
180
|
-
{
|
|
181
|
-
height: 0,
|
|
182
|
-
paddingTop: 0,
|
|
183
|
-
paddingBottom: 0,
|
|
184
|
-
marginTop: 0,
|
|
185
|
-
marginBottom: 0,
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
height: ((_a = this.contentComputedStyle) === null || _a === void 0 ? void 0 : _a.height) || 0,
|
|
189
|
-
paddingTop: ((_b = this.contentComputedStyle) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0,
|
|
190
|
-
paddingBottom: ((_c = this.contentComputedStyle) === null || _c === void 0 ? void 0 : _c.paddingBottom) || 0,
|
|
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
|
-
},
|
|
194
|
-
],
|
|
195
|
-
callback: () => {
|
|
196
|
-
this.content && this.content.style.removeProperty('overflow-y');
|
|
197
|
-
},
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
render() {
|
|
201
|
-
return (h(Host, { key: '40c0e7a6dd7f457145ed744aaf86595f72566f8c', "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
|
|
202
|
-
}
|
|
203
|
-
/**
|
|
204
|
-
* Get the current expanded state of the menu.
|
|
205
|
-
* @returns A promise which will resolve to the current expanded state.
|
|
206
|
-
*/
|
|
207
|
-
async getExpanded() {
|
|
208
|
-
return this.isExpanded;
|
|
209
|
-
}
|
|
210
|
-
/**
|
|
211
|
-
* Set the expanded state of the menu.
|
|
212
|
-
* @param value The new expanded state.
|
|
213
|
-
*/
|
|
214
|
-
async setExpanded(value) {
|
|
215
|
-
this.isExpanded = value;
|
|
216
|
-
}
|
|
217
|
-
/**
|
|
218
|
-
* Toggle the expanded state of the menu.
|
|
219
|
-
* @returns A promise which will resolve to the new expanded state.
|
|
220
|
-
*/
|
|
221
|
-
async toggle() {
|
|
222
|
-
this.isExpanded = !this.isExpanded;
|
|
223
|
-
return this.isExpanded;
|
|
224
|
-
}
|
|
225
|
-
/**
|
|
226
|
-
* Collapse the menu. This is the same as setting the expanded state to false.
|
|
227
|
-
* @returns empty Promise.
|
|
228
|
-
*/
|
|
229
|
-
async collapse() {
|
|
230
|
-
this.isExpanded = false;
|
|
231
|
-
}
|
|
232
|
-
/**
|
|
233
|
-
* Expand the menu. This is the same as setting the expanded state to true.
|
|
234
|
-
* @returns empty Promise.
|
|
235
|
-
*/
|
|
236
|
-
async expand() {
|
|
237
|
-
this.isExpanded = true;
|
|
238
|
-
}
|
|
239
|
-
get el() { return this; }
|
|
240
|
-
static get watchers() { return {
|
|
241
|
-
"isExpanded": ["handleIsExpandedChange"]
|
|
242
|
-
}; }
|
|
243
|
-
}, [0, "uofg-menu", {
|
|
244
|
-
"autoCollapse": [4, "auto-collapse"],
|
|
245
|
-
"isExpanded": [32],
|
|
246
|
-
"getExpanded": [64],
|
|
247
|
-
"setExpanded": [64],
|
|
248
|
-
"toggle": [64],
|
|
249
|
-
"collapse": [64],
|
|
250
|
-
"expand": [64]
|
|
251
|
-
}, undefined, {
|
|
252
|
-
"isExpanded": ["handleIsExpandedChange"]
|
|
253
|
-
}]);
|
|
254
|
-
function defineCustomElement() {
|
|
255
|
-
if (typeof customElements === "undefined") {
|
|
256
|
-
return;
|
|
257
|
-
}
|
|
258
|
-
const components = ["uofg-menu"];
|
|
259
|
-
components.forEach(tagName => { switch (tagName) {
|
|
260
|
-
case "uofg-menu":
|
|
261
|
-
if (!customElements.get(tagName)) {
|
|
262
|
-
customElements.define(tagName, UofgMenu);
|
|
263
|
-
}
|
|
264
|
-
break;
|
|
265
|
-
} });
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
export { UofgMenu as U, defineCustomElement as d };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface UofgModal extends Components.UofgModal, HTMLElement {}
|
|
4
|
-
export const UofgModal: {
|
|
5
|
-
prototype: UofgModal;
|
|
6
|
-
new (): UofgModal;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
import { F as FontAwesomeIcon } from './font-awesome-icon.js';
|
|
3
|
-
import { b as faTimes } from './index2.js';
|
|
4
|
-
import { a as attachTailwind, g as getAllFocusableElements } from './utils.js';
|
|
5
|
-
|
|
6
|
-
const UofgModal$1 = /*@__PURE__*/ proxyCustomElement(class UofgModal extends HTMLElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
this.__attachShadow();
|
|
11
|
-
this.opened = createEvent(this, "opened", 2);
|
|
12
|
-
this.closed = createEvent(this, "closed", 2);
|
|
13
|
-
this.inertElements = [];
|
|
14
|
-
this.label = undefined;
|
|
15
|
-
this.alertDialog = false;
|
|
16
|
-
this.centered = false;
|
|
17
|
-
this.staticBackdrop = false;
|
|
18
|
-
this.autoOpen = false;
|
|
19
|
-
this.isOpen = false;
|
|
20
|
-
}
|
|
21
|
-
connectedCallback() {
|
|
22
|
-
attachTailwind(this.el.shadowRoot);
|
|
23
|
-
// Bind event handlers so that 'this' is always the component instance.
|
|
24
|
-
this.handleClick = this.handleClick.bind(this);
|
|
25
|
-
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
26
|
-
this.handleFocusOut = this.handleFocusOut.bind(this);
|
|
27
|
-
if (this.autoOpen) {
|
|
28
|
-
this.isOpen = true;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
disconnectedCallback() {
|
|
32
|
-
// Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
|
|
33
|
-
for (const element of this.inertElements) {
|
|
34
|
-
element.removeAttribute('inert');
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
handleClick(e) {
|
|
38
|
-
if (!this.staticBackdrop && e.target === e.currentTarget) {
|
|
39
|
-
this.isOpen = false;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
handleKeyUp(e) {
|
|
43
|
-
if (e.key === 'Escape') {
|
|
44
|
-
this.isOpen = false;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
handleFocusOut(e) {
|
|
48
|
-
var _a;
|
|
49
|
-
if (!this.isOpen)
|
|
50
|
-
return; // Don't do anything if the modal is closed.
|
|
51
|
-
const relatedTarget = e.relatedTarget;
|
|
52
|
-
// If the focus is moving outside the modal
|
|
53
|
-
if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
|
|
54
|
-
e.preventDefault();
|
|
55
|
-
// If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
|
|
56
|
-
if (e.target === this.dismissButton) {
|
|
57
|
-
const focusableElements = getAllFocusableElements(this.el);
|
|
58
|
-
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
// Otherwise, focus the dismiss button.
|
|
62
|
-
this.dismissButton.focus();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
handleIsOpenChange(newValue) {
|
|
67
|
-
if (newValue) {
|
|
68
|
-
window.requestAnimationFrame(() => {
|
|
69
|
-
window.requestAnimationFrame(() => {
|
|
70
|
-
window.requestAnimationFrame(() => {
|
|
71
|
-
// Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
|
|
72
|
-
this.container.focus();
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
// Mark outer elements as inert when the modal is open.
|
|
77
|
-
let current = this.el;
|
|
78
|
-
// We want to mark all elements outside the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
|
|
79
|
-
while (current !== null && current !== document.body) {
|
|
80
|
-
const parent = current.parentElement;
|
|
81
|
-
// If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
|
|
82
|
-
if (parent === null) {
|
|
83
|
-
const root = current.getRootNode();
|
|
84
|
-
if (root instanceof ShadowRoot) {
|
|
85
|
-
current = root.host;
|
|
86
|
-
continue;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
if (parent !== null) {
|
|
90
|
-
for (const child of parent.children) {
|
|
91
|
-
if (child !== current && !child.inert) {
|
|
92
|
-
// Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
|
|
93
|
-
child.inert = true;
|
|
94
|
-
this.inertElements.push(child);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
current = parent;
|
|
99
|
-
this.opened.emit();
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
// Remove the inert attribute from all elements that we marked as inert when the modal was opened.
|
|
104
|
-
for (const element of this.inertElements) {
|
|
105
|
-
element.removeAttribute('inert');
|
|
106
|
-
}
|
|
107
|
-
// Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
|
|
108
|
-
this.inertElements = [];
|
|
109
|
-
this.closed.emit();
|
|
110
|
-
}
|
|
111
|
-
// Prevent scrolling of the body when the modal is open.
|
|
112
|
-
document.body.style.overflow = newValue ? 'hidden' : '';
|
|
113
|
-
}
|
|
114
|
-
render() {
|
|
115
|
-
return (h("div", { key: 'd4cbcdbf263ad8ea2aceb3a1718629cfc50056b0', class: {
|
|
116
|
-
'tw-visible tw-opacity-100': this.isOpen,
|
|
117
|
-
'tw-invisible tw-opacity-0': !this.isOpen,
|
|
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,
|
|
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) }, h("div", { key: '56ec3bc88ac19f00c813eb1a3f8ef41139217174', part: "content", class: {
|
|
120
|
-
'tw-visible tw-opacity-100': this.isOpen,
|
|
121
|
-
'tw-translate-y-[calc(-50%_-_50px)]': !this.isOpen && this.centered,
|
|
122
|
-
'tw-translate-y-[-50px]': (!this.isOpen && !this.centered) || (this.isOpen && this.centered),
|
|
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,
|
|
124
|
-
} }, 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' }))));
|
|
125
|
-
}
|
|
126
|
-
/**
|
|
127
|
-
* Get the current state of the modal.
|
|
128
|
-
* @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
|
|
129
|
-
*/
|
|
130
|
-
async getState() {
|
|
131
|
-
return this.isOpen;
|
|
132
|
-
}
|
|
133
|
-
/**
|
|
134
|
-
* Set the state of the modal.
|
|
135
|
-
* @param value The new state, set it to true to open the modal, or false to close the modal.
|
|
136
|
-
*/
|
|
137
|
-
async setState(value) {
|
|
138
|
-
this.isOpen = value;
|
|
139
|
-
}
|
|
140
|
-
/**
|
|
141
|
-
* Toggle the state of the modal.
|
|
142
|
-
* @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
|
|
143
|
-
*/
|
|
144
|
-
async toggle() {
|
|
145
|
-
this.isOpen = !this.isOpen;
|
|
146
|
-
return this.isOpen;
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Closes the modal.
|
|
150
|
-
* @returns empty Promise.
|
|
151
|
-
*/
|
|
152
|
-
async close() {
|
|
153
|
-
this.isOpen = false;
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* Opens the modal.
|
|
157
|
-
* @returns empty Promise.
|
|
158
|
-
*/
|
|
159
|
-
async open() {
|
|
160
|
-
this.isOpen = true;
|
|
161
|
-
}
|
|
162
|
-
get el() { return this; }
|
|
163
|
-
static get watchers() { return {
|
|
164
|
-
"isOpen": ["handleIsOpenChange"]
|
|
165
|
-
}; }
|
|
166
|
-
}, [1, "uofg-modal", {
|
|
167
|
-
"label": [1],
|
|
168
|
-
"alertDialog": [4, "alert-dialog"],
|
|
169
|
-
"centered": [4],
|
|
170
|
-
"staticBackdrop": [4, "static-backdrop"],
|
|
171
|
-
"autoOpen": [4, "auto-open"],
|
|
172
|
-
"isOpen": [32],
|
|
173
|
-
"getState": [64],
|
|
174
|
-
"setState": [64],
|
|
175
|
-
"toggle": [64],
|
|
176
|
-
"close": [64],
|
|
177
|
-
"open": [64]
|
|
178
|
-
}, undefined, {
|
|
179
|
-
"isOpen": ["handleIsOpenChange"]
|
|
180
|
-
}]);
|
|
181
|
-
function defineCustomElement$1() {
|
|
182
|
-
if (typeof customElements === "undefined") {
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
const components = ["uofg-modal"];
|
|
186
|
-
components.forEach(tagName => { switch (tagName) {
|
|
187
|
-
case "uofg-modal":
|
|
188
|
-
if (!customElements.get(tagName)) {
|
|
189
|
-
customElements.define(tagName, UofgModal$1);
|
|
190
|
-
}
|
|
191
|
-
break;
|
|
192
|
-
} });
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
const UofgModal = UofgModal$1;
|
|
196
|
-
const defineCustomElement = defineCustomElement$1;
|
|
197
|
-
|
|
198
|
-
export { UofgModal, defineCustomElement };
|
package/dist/components/utils.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
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}";
|
|
2
|
-
const tw = twCss;
|
|
3
|
-
|
|
4
|
-
const WEB_ANIMATIONS_SUPPORTED = () => {
|
|
5
|
-
return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
|
|
6
|
-
};
|
|
7
|
-
const PREFERS_REDUCED_MOTION = () => {
|
|
8
|
-
return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
9
|
-
};
|
|
10
|
-
const getAllFocusableElements = (container) => {
|
|
11
|
-
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
|
-
return Array.from(container.querySelectorAll(query));
|
|
13
|
-
};
|
|
14
|
-
let stylesheet = null;
|
|
15
|
-
if (typeof CSSStyleSheet === 'function') {
|
|
16
|
-
stylesheet = new CSSStyleSheet();
|
|
17
|
-
stylesheet.replaceSync(tw);
|
|
18
|
-
}
|
|
19
|
-
const attachTailwind = (root) => {
|
|
20
|
-
if (stylesheet) {
|
|
21
|
-
root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet];
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
const style = document.createElement('style');
|
|
25
|
-
style.innerHTML = tw;
|
|
26
|
-
root.prepend(style);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export { PREFERS_REDUCED_MOTION as P, WEB_ANIMATIONS_SUPPORTED as W, attachTailwind as a, getAllFocusableElements as g };
|