@uoguelph/web-components 1.2.0-rc.0 → 1.2.0-rc.10
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-ClyJk2_i.js +977 -0
- package/dist/uofg-web-components/uofg-alert.esm.js +154 -0
- package/dist/uofg-web-components/uofg-footer.esm.js +429 -0
- package/dist/uofg-web-components/uofg-header.esm.js +2404 -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 -35
- package/dist/cjs/app-globals-3a1e7e63.js +0 -5
- package/dist/cjs/index-06b58d35.js +0 -32
- package/dist/cjs/index-cdb046b4.js +0 -2092
- 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 -1374
- package/dist/cjs/uofg-modal.cjs.entry.js +0 -172
- package/dist/cjs/uofg-web-components.cjs.js +0 -25
- package/dist/cjs/utils-3d4b7e2e.js +0 -16
- package/dist/collection/collection-manifest.json +0 -18
- package/dist/collection/components/uofg-alert/uofg-alert.css +0 -1
- package/dist/collection/components/uofg-alert/uofg-alert.js +0 -20
- package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.css +0 -1
- package/dist/collection/components/uofg-back-to-top/uofg-back-to-top.js +0 -71
- package/dist/collection/components/uofg-card/uofg-card.css +0 -1
- package/dist/collection/components/uofg-card/uofg-card.js +0 -45
- package/dist/collection/components/uofg-footer/improve-life.svg +0 -4
- package/dist/collection/components/uofg-footer/uofg-footer.css +0 -1
- package/dist/collection/components/uofg-footer/uofg-footer.js +0 -153
- package/dist/collection/components/uofg-header/decoration.svg +0 -1
- package/dist/collection/components/uofg-header/logo-full.svg +0 -1
- package/dist/collection/components/uofg-header/logo-reduced.svg +0 -1
- package/dist/collection/components/uofg-header/uofg-header.css +0 -1
- package/dist/collection/components/uofg-header/uofg-header.js +0 -253
- package/dist/collection/components/uofg-menu/uofg-menu.js +0 -438
- package/dist/collection/components/uofg-modal/uofg-modal.css +0 -1
- package/dist/collection/components/uofg-modal/uofg-modal.js +0 -417
- package/dist/collection/index.js +0 -1
- package/dist/collection/utils/font-awesome-icon.js +0 -7
- package/dist/collection/utils/utils.js +0 -13
- 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 -36
- package/dist/components/uofg-back-to-top.d.ts +0 -11
- package/dist/components/uofg-back-to-top.js +0 -52
- package/dist/components/uofg-card.d.ts +0 -11
- package/dist/components/uofg-card.js +0 -40
- package/dist/components/uofg-footer.d.ts +0 -11
- package/dist/components/uofg-footer.js +0 -751
- package/dist/components/uofg-header.d.ts +0 -11
- package/dist/components/uofg-header.js +0 -385
- 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 -201
- package/dist/components/utils.js +0 -12
- package/dist/esm/app-globals-0f993ce5.js +0 -3
- package/dist/esm/index-0b0002d2.js +0 -2062
- package/dist/esm/index-e685921a.js +0 -27
- 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 -1366
- package/dist/esm/uofg-modal.entry.js +0 -168
- package/dist/esm/uofg-web-components.js +0 -20
- package/dist/esm/utils-379bb71a.js +0 -12
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/types/components/uofg-alert/uofg-alert.d.ts +0 -3
- package/dist/types/components/uofg-back-to-top/uofg-back-to-top.d.ts +0 -10
- package/dist/types/components/uofg-card/uofg-card.d.ts +0 -7
- 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 -4
- package/dist/uofg-web-components/index.esm.js +0 -0
- 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-bce5df9d.entry.js +0 -1
- package/dist/uofg-web-components/p-e1255160.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
- 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
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0b0002d2.js';
|
|
2
|
-
import { F as FontAwesomeIcon, b as faTimes } from './index-e685921a.js';
|
|
3
|
-
import { g as getAllFocusableElements } from './utils-379bb71a.js';
|
|
4
|
-
|
|
5
|
-
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;}";
|
|
6
|
-
const UofgModalStyle0 = uofgModalCss;
|
|
7
|
-
|
|
8
|
-
const UofgModal = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
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
|
-
// Bind event handlers so that 'this' is always the component instance.
|
|
23
|
-
this.handleClick = this.handleClick.bind(this);
|
|
24
|
-
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
25
|
-
this.handleFocusOut = this.handleFocusOut.bind(this);
|
|
26
|
-
if (this.autoOpen) {
|
|
27
|
-
this.isOpen = true;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
disconnectedCallback() {
|
|
31
|
-
// 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.
|
|
32
|
-
for (const element of this.inertElements) {
|
|
33
|
-
element.removeAttribute('inert');
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
handleClick(e) {
|
|
37
|
-
if (!this.staticBackdrop && e.target === e.currentTarget) {
|
|
38
|
-
this.isOpen = false;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
handleKeyUp(e) {
|
|
42
|
-
if (e.key === 'Escape') {
|
|
43
|
-
this.isOpen = false;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
handleFocusOut(e) {
|
|
47
|
-
var _a;
|
|
48
|
-
if (!this.isOpen)
|
|
49
|
-
return; // Don't do anything if the modal is closed.
|
|
50
|
-
const relatedTarget = e.relatedTarget;
|
|
51
|
-
// If the focus is moving outside the modal
|
|
52
|
-
if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
|
|
53
|
-
e.preventDefault();
|
|
54
|
-
// If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
|
|
55
|
-
if (e.target === this.dismissButton) {
|
|
56
|
-
const focusableElements = getAllFocusableElements(this.el);
|
|
57
|
-
(_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
// Otherwise, focus the dismiss button.
|
|
61
|
-
this.dismissButton.focus();
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
handleIsOpenChange(newValue) {
|
|
66
|
-
if (newValue) {
|
|
67
|
-
window.requestAnimationFrame(() => {
|
|
68
|
-
window.requestAnimationFrame(() => {
|
|
69
|
-
window.requestAnimationFrame(() => {
|
|
70
|
-
// Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
|
|
71
|
-
this.container.focus();
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
// Mark outer elements as inert when the modal is open.
|
|
76
|
-
let current = this.el;
|
|
77
|
-
// 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.
|
|
78
|
-
while (current !== null && current !== document.body) {
|
|
79
|
-
const parent = current.parentElement;
|
|
80
|
-
// 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.
|
|
81
|
-
if (parent === null) {
|
|
82
|
-
const root = current.getRootNode();
|
|
83
|
-
if (root instanceof ShadowRoot) {
|
|
84
|
-
current = root.host;
|
|
85
|
-
continue;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
if (parent !== null) {
|
|
89
|
-
for (const child of parent.children) {
|
|
90
|
-
if (child !== current && !child.inert) {
|
|
91
|
-
// Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
|
|
92
|
-
child.inert = true;
|
|
93
|
-
this.inertElements.push(child);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
current = parent;
|
|
98
|
-
this.opened.emit();
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
// Remove the inert attribute from all elements that we marked as inert when the modal was opened.
|
|
103
|
-
for (const element of this.inertElements) {
|
|
104
|
-
element.removeAttribute('inert');
|
|
105
|
-
}
|
|
106
|
-
// 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.
|
|
107
|
-
this.inertElements = [];
|
|
108
|
-
this.closed.emit();
|
|
109
|
-
}
|
|
110
|
-
// Prevent scrolling of the body when the modal is open.
|
|
111
|
-
document.body.style.overflow = newValue ? 'hidden' : '';
|
|
112
|
-
}
|
|
113
|
-
render() {
|
|
114
|
-
return (h("div", { key: 'c66f0986068658cc29b9c12715381a0fd40678c9', class: {
|
|
115
|
-
'tw-visible tw-opacity-100': this.isOpen,
|
|
116
|
-
'tw-invisible tw-opacity-0': !this.isOpen,
|
|
117
|
-
'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,
|
|
118
|
-
}, 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: 'f6d05f9834e3d5398aa5cd0897605d5b16014c2e', part: "content", class: {
|
|
119
|
-
'tw-visible tw-opacity-100': this.isOpen,
|
|
120
|
-
'tw-translate-y-[calc(-50%_-_50px)]': !this.isOpen && this.centered,
|
|
121
|
-
'tw-translate-y-[-50px]': (!this.isOpen && !this.centered) || (this.isOpen && this.centered),
|
|
122
|
-
'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,
|
|
123
|
-
} }, h("button", { key: 'eecbcc13c724410cb085bec5e26f6a2a4c55c32a', 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: '735ceec0b5bbace91a40db729d7b530767b8593a', icon: faTimes })), h("slot", { key: 'b3b156aa4d3859a1d827a9d826a8d91b8f379f18' }))));
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Get the current state of the modal.
|
|
127
|
-
* @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
|
|
128
|
-
*/
|
|
129
|
-
async getState() {
|
|
130
|
-
return this.isOpen;
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Set the state of the modal.
|
|
134
|
-
* @param value The new state, set it to true to open the modal, or false to close the modal.
|
|
135
|
-
*/
|
|
136
|
-
async setState(value) {
|
|
137
|
-
this.isOpen = value;
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* Toggle the state of the modal.
|
|
141
|
-
* @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
|
|
142
|
-
*/
|
|
143
|
-
async toggle() {
|
|
144
|
-
this.isOpen = !this.isOpen;
|
|
145
|
-
return this.isOpen;
|
|
146
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* Closes the modal.
|
|
149
|
-
* @returns empty Promise.
|
|
150
|
-
*/
|
|
151
|
-
async close() {
|
|
152
|
-
this.isOpen = false;
|
|
153
|
-
}
|
|
154
|
-
/**
|
|
155
|
-
* Opens the modal.
|
|
156
|
-
* @returns empty Promise.
|
|
157
|
-
*/
|
|
158
|
-
async open() {
|
|
159
|
-
this.isOpen = true;
|
|
160
|
-
}
|
|
161
|
-
get el() { return getElement(this); }
|
|
162
|
-
static get watchers() { return {
|
|
163
|
-
"isOpen": ["handleIsOpenChange"]
|
|
164
|
-
}; }
|
|
165
|
-
};
|
|
166
|
-
UofgModal.style = UofgModalStyle0;
|
|
167
|
-
|
|
168
|
-
export { UofgModal as uofg_modal };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-0b0002d2.js';
|
|
2
|
-
export { s as setNonce } from './index-0b0002d2.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Stencil Client Patch Browser v4.12.4 | MIT Licensed | https://stenciljs.com
|
|
7
|
-
*/
|
|
8
|
-
const patchBrowser = () => {
|
|
9
|
-
const importMeta = import.meta.url;
|
|
10
|
-
const opts = {};
|
|
11
|
-
if (importMeta !== '') {
|
|
12
|
-
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
13
|
-
}
|
|
14
|
-
return promiseResolve(opts);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
patchBrowser().then(async (options) => {
|
|
18
|
-
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["uofg-alert",[[1,"uofg-alert"]]],["uofg-modal",[[1,"uofg-modal",{"label":[1],"alertDialog":[4,"alert-dialog"],"centered":[4],"staticBackdrop":[4,"static-backdrop"],"autoOpen":[4,"auto-open"],"isOpen":[32],"getState":[64],"setState":[64],"toggle":[64],"close":[64],"open":[64]},null,{"isOpen":["handleIsOpenChange"]}]]],["uofg-back-to-top_5",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32],"isSubContainerOverflowing":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-card",{"href":[1]}],[1,"uofg-footer",{"extraLinks":[32]}],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]},null,{"isExpanded":["handleIsExpandedChange"]}]]]], options);
|
|
20
|
-
});
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
const WEB_ANIMATIONS_SUPPORTED = () => {
|
|
2
|
-
return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
|
|
3
|
-
};
|
|
4
|
-
const PREFERS_REDUCED_MOTION = () => {
|
|
5
|
-
return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
6
|
-
};
|
|
7
|
-
const getAllFocusableElements = (container) => {
|
|
8
|
-
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"])';
|
|
9
|
-
return Array.from(container.querySelectorAll(query));
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { PREFERS_REDUCED_MOTION as P, WEB_ANIMATIONS_SUPPORTED as W, getAllFocusableElements as g };
|
package/dist/index.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = require('./cjs/index.cjs.js');
|
package/dist/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './esm/index.js';
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
interface PageSpecificLink {
|
|
2
|
-
text: string;
|
|
3
|
-
href: string;
|
|
4
|
-
attributes?: Record<string, string>;
|
|
5
|
-
}
|
|
6
|
-
interface PageSpecificSubMenu {
|
|
7
|
-
title: string;
|
|
8
|
-
links: PageSpecificLink[];
|
|
9
|
-
wrapContent?: boolean;
|
|
10
|
-
}
|
|
11
|
-
type PageSpecificContent = Array<PageSpecificLink | PageSpecificSubMenu>;
|
|
12
|
-
export declare class UofgHeader {
|
|
13
|
-
/**
|
|
14
|
-
* The title of the department/topic that the header is being used for. For example, for the Convocation pages, this would be set to "Convocation".
|
|
15
|
-
*/
|
|
16
|
-
pageTitle: string;
|
|
17
|
-
/**
|
|
18
|
-
* The URL to the home/landing page of the department/topic the header is being used for. For example, for the Convocation pages, this would be set to "https://www.uoguelph.ca/convocation/".
|
|
19
|
-
*/
|
|
20
|
-
pageUrl: string;
|
|
21
|
-
el: HTMLUofgHeaderElement;
|
|
22
|
-
isFullSize: boolean;
|
|
23
|
-
pageSpecificContent: PageSpecificContent;
|
|
24
|
-
private observer;
|
|
25
|
-
private subContainer?;
|
|
26
|
-
private subContainerOverflowWidth;
|
|
27
|
-
isSubContainerOverflowing: boolean;
|
|
28
|
-
private needsOverflowWidthUpdate;
|
|
29
|
-
connectedCallback(): void;
|
|
30
|
-
componentDidLoad(): void;
|
|
31
|
-
updateFullSize(): void;
|
|
32
|
-
private updateSubContainerOverflow;
|
|
33
|
-
componentDidRender(): void;
|
|
34
|
-
private updatePageSpecificContent;
|
|
35
|
-
render(): any;
|
|
36
|
-
}
|
|
37
|
-
export {};
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
-
export declare class UofgMenu {
|
|
3
|
-
el: HTMLUofgMenuElement;
|
|
4
|
-
isExpanded: boolean;
|
|
5
|
-
/**
|
|
6
|
-
* Controls whether the menu should automatically collapse when the focused element in the page is not contained within the menu (e.g. it's button or content). This is useful for when you want the menu to collapse whenever a user interacts with any other part of the page.
|
|
7
|
-
*/
|
|
8
|
-
autoCollapse: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Dispatched whenever the menu is expanded whether by user interaction or or programmatically (e.g. expand()).
|
|
11
|
-
*/
|
|
12
|
-
expanded: EventEmitter<void>;
|
|
13
|
-
/**
|
|
14
|
-
* Dispatched whenever the menu is collapsed whether by user interaction or programmatically (e.g. collapse()).
|
|
15
|
-
*/
|
|
16
|
-
collapsed: EventEmitter<void>;
|
|
17
|
-
/**
|
|
18
|
-
* Dispatched whenever the menu is expanding or collapsing and the animation has started. This event is not dispatched if the animation is disabled (e.g. due to reduced motion, css variable set to none, or lack of Web Animations API support).
|
|
19
|
-
*/
|
|
20
|
-
animationStarted: EventEmitter<boolean>;
|
|
21
|
-
/**
|
|
22
|
-
* Dispatched whenever the menu is expanding or collapsing and the animation has ended. This event is not dispatched if the animation is disabled (e.g. due to reduced motion, css variable set to none, or lack of Web Animations API support).
|
|
23
|
-
*/
|
|
24
|
-
animationEnded: EventEmitter<boolean>;
|
|
25
|
-
private computedStyle;
|
|
26
|
-
private button;
|
|
27
|
-
private content;
|
|
28
|
-
private contentComputedStyle;
|
|
29
|
-
private observer;
|
|
30
|
-
connectedCallback(): void;
|
|
31
|
-
disconnectedCallback(): void;
|
|
32
|
-
private handleMutation;
|
|
33
|
-
private handleKeyUp;
|
|
34
|
-
private handleClick;
|
|
35
|
-
private handleFocusout;
|
|
36
|
-
handleIsExpandedChange(newValue: boolean): void;
|
|
37
|
-
private getAnimationType;
|
|
38
|
-
private getAnimationDuration;
|
|
39
|
-
private getAnimationEasing;
|
|
40
|
-
private fadeAnimation;
|
|
41
|
-
private slideAnimation;
|
|
42
|
-
render(): any;
|
|
43
|
-
/**
|
|
44
|
-
* Get the current expanded state of the menu.
|
|
45
|
-
* @returns A promise which will resolve to the current expanded state.
|
|
46
|
-
*/
|
|
47
|
-
getExpanded(): Promise<boolean>;
|
|
48
|
-
/**
|
|
49
|
-
* Set the expanded state of the menu.
|
|
50
|
-
* @param value The new expanded state.
|
|
51
|
-
*/
|
|
52
|
-
setExpanded(value: boolean): Promise<void>;
|
|
53
|
-
/**
|
|
54
|
-
* Toggle the expanded state of the menu.
|
|
55
|
-
* @returns A promise which will resolve to the new expanded state.
|
|
56
|
-
*/
|
|
57
|
-
toggle(): Promise<boolean>;
|
|
58
|
-
/**
|
|
59
|
-
* Collapse the menu. This is the same as setting the expanded state to false.
|
|
60
|
-
* @returns empty Promise.
|
|
61
|
-
*/
|
|
62
|
-
collapse(): Promise<void>;
|
|
63
|
-
/**
|
|
64
|
-
* Expand the menu. This is the same as setting the expanded state to true.
|
|
65
|
-
* @returns empty Promise.
|
|
66
|
-
*/
|
|
67
|
-
expand(): Promise<void>;
|
|
68
|
-
}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
-
/**
|
|
3
|
-
* @part content - The modal content container.
|
|
4
|
-
* @part dismiss-button - The button that closes the modal.
|
|
5
|
-
*/
|
|
6
|
-
export declare class UofgModal {
|
|
7
|
-
/**
|
|
8
|
-
* The label for the modal. It is recommended that you set this to describe the modal's content.
|
|
9
|
-
* This is required for accessibility.
|
|
10
|
-
*/
|
|
11
|
-
label: string;
|
|
12
|
-
/**
|
|
13
|
-
* Used to determine whether the modal should be rendered as an alert dialog.
|
|
14
|
-
* This is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.
|
|
15
|
-
* If this is set to true, the modal will be rendered with a role of "alertdialog" instead of "dialog".
|
|
16
|
-
*/
|
|
17
|
-
alertDialog: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Used to determine whether the modal content is centered vertically.
|
|
20
|
-
*/
|
|
21
|
-
centered: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Used to determine whether clicking on the backdrop of the modal will close the modal.
|
|
24
|
-
* If this is set to true, clicking on the backdrop will NOT close the modal.
|
|
25
|
-
*/
|
|
26
|
-
staticBackdrop: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Used to determine whether the modal should open automatically when the component is first rendered.
|
|
29
|
-
* It is important to ensure this is only set to true for ONE modal on the page.
|
|
30
|
-
*/
|
|
31
|
-
autoOpen: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Dispatched whenever the modal is opened whether by user interaction or programmatically (e.g. open()).
|
|
34
|
-
*/
|
|
35
|
-
opened: EventEmitter<void>;
|
|
36
|
-
/**
|
|
37
|
-
* Dispatched whenever the modal is closed whether by user interaction or programmatically (e.g. close()).
|
|
38
|
-
*/
|
|
39
|
-
closed: EventEmitter<void>;
|
|
40
|
-
isOpen: boolean;
|
|
41
|
-
el: HTMLUofgModalElement;
|
|
42
|
-
private container;
|
|
43
|
-
private dismissButton;
|
|
44
|
-
private inertElements;
|
|
45
|
-
connectedCallback(): void;
|
|
46
|
-
disconnectedCallback(): void;
|
|
47
|
-
private handleClick;
|
|
48
|
-
private handleKeyUp;
|
|
49
|
-
private handleFocusOut;
|
|
50
|
-
handleIsOpenChange(newValue: boolean): void;
|
|
51
|
-
render(): any;
|
|
52
|
-
/**
|
|
53
|
-
* Get the current state of the modal.
|
|
54
|
-
* @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
|
|
55
|
-
*/
|
|
56
|
-
getState(): Promise<boolean>;
|
|
57
|
-
/**
|
|
58
|
-
* Set the state of the modal.
|
|
59
|
-
* @param value The new state, set it to true to open the modal, or false to close the modal.
|
|
60
|
-
*/
|
|
61
|
-
setState(value: boolean): Promise<void>;
|
|
62
|
-
/**
|
|
63
|
-
* Toggle the state of the modal.
|
|
64
|
-
* @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
|
|
65
|
-
*/
|
|
66
|
-
toggle(): Promise<boolean>;
|
|
67
|
-
/**
|
|
68
|
-
* Closes the modal.
|
|
69
|
-
* @returns empty Promise.
|
|
70
|
-
*/
|
|
71
|
-
close(): Promise<void>;
|
|
72
|
-
/**
|
|
73
|
-
* Opens the modal.
|
|
74
|
-
* @returns empty Promise.
|
|
75
|
-
*/
|
|
76
|
-
open(): Promise<void>;
|
|
77
|
-
}
|