@ulu/frontend 0.2.0-beta.1 → 0.2.0-beta.11
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/README.md +12 -0
- package/dist/{types/js → es}/core/component.d.ts +3 -9
- package/dist/es/core/component.d.ts.map +1 -0
- package/dist/es/core/component.js +134 -0
- package/dist/{types/js → es}/core/events.d.ts +1 -1
- package/dist/es/core/events.d.ts.map +1 -0
- package/dist/es/core/events.js +45 -0
- package/dist/es/core/index.d.ts +4 -0
- package/dist/{types/js/ui → es/core}/index.d.ts.map +1 -1
- package/dist/{types/js → es}/core/settings.d.ts +1 -1
- package/dist/es/core/settings.d.ts.map +1 -0
- package/dist/es/core/settings.js +44 -0
- package/dist/es/index.d.ts +4 -0
- package/dist/{types/js → es}/index.d.ts.map +1 -1
- package/dist/es/index.js +125 -0
- package/dist/{types/js → es}/ui/breakpoints.d.ts +5 -3
- package/dist/es/ui/breakpoints.d.ts.map +1 -0
- package/dist/es/ui/breakpoints.js +194 -0
- package/dist/{types/js → es}/ui/collapsible.d.ts +28 -7
- package/dist/es/ui/collapsible.d.ts.map +1 -0
- package/dist/es/ui/collapsible.js +140 -0
- package/dist/{types/js → es}/ui/details-group.d.ts +1 -1
- package/dist/es/ui/details-group.d.ts.map +1 -0
- package/dist/es/ui/details-group.js +49 -0
- package/dist/{types/js → es}/ui/dialog.d.ts +3 -3
- package/dist/es/ui/dialog.d.ts.map +1 -0
- package/dist/es/ui/dialog.js +112 -0
- package/dist/{types/js → es}/ui/flipcard.d.ts +1 -1
- package/dist/es/ui/flipcard.d.ts.map +1 -0
- package/dist/es/ui/flipcard.js +97 -0
- package/dist/{types/js → es}/ui/grid.d.ts +2 -2
- package/dist/es/ui/grid.d.ts.map +1 -0
- package/dist/es/ui/grid.js +18 -0
- package/dist/{types/js → es}/ui/index.d.ts +22 -21
- package/dist/{types/js/core → es/ui}/index.d.ts.map +1 -1
- package/dist/{types/js → es}/ui/modal-builder.d.ts +21 -16
- package/dist/es/ui/modal-builder.d.ts.map +1 -0
- package/dist/es/ui/modal-builder.js +136 -0
- package/dist/es/ui/overflow-scroller-pager.d.ts.map +1 -0
- package/dist/es/ui/overflow-scroller-pager.js +28 -0
- package/dist/{types/js → es}/ui/overflow-scroller.d.ts +3 -3
- package/dist/es/ui/overflow-scroller.d.ts.map +1 -0
- package/dist/es/ui/overflow-scroller.js +90 -0
- package/dist/es/ui/page.d.ts.map +1 -0
- package/dist/es/ui/page.js +7 -0
- package/dist/{types/js → es}/ui/popover.d.ts +3 -3
- package/dist/es/ui/popover.d.ts.map +1 -0
- package/dist/es/ui/popover.js +77 -0
- package/dist/es/ui/print-details.d.ts.map +1 -0
- package/dist/es/ui/print-details.js +22 -0
- package/dist/es/ui/print.d.ts.map +1 -0
- package/dist/es/ui/print.js +34 -0
- package/dist/{types/js → es}/ui/programmatic-modal.d.ts +1 -1
- package/dist/es/ui/programmatic-modal.d.ts.map +1 -0
- package/dist/es/ui/programmatic-modal.js +55 -0
- package/dist/{types/js → es}/ui/proxy-click.d.ts +4 -4
- package/dist/es/ui/proxy-click.d.ts.map +1 -0
- package/dist/es/ui/proxy-click.js +44 -0
- package/dist/{types/js → es}/ui/resizer.d.ts +16 -16
- package/dist/es/ui/resizer.d.ts.map +1 -0
- package/dist/es/ui/resizer.js +242 -0
- package/dist/{types/js → es}/ui/scroll-slider.d.ts +1 -1
- package/dist/es/ui/scroll-slider.d.ts.map +1 -0
- package/dist/es/ui/scroll-slider.js +29 -0
- package/dist/{types/js → es}/ui/scrollpoint.d.ts +79 -11
- package/dist/es/ui/scrollpoint.d.ts.map +1 -0
- package/dist/es/ui/scrollpoint.js +178 -0
- package/dist/{types/js → es}/ui/slider.d.ts +11 -8
- package/dist/es/ui/slider.d.ts.map +1 -0
- package/dist/es/ui/slider.js +290 -0
- package/dist/{types/js → es}/ui/tabs.d.ts +2 -2
- package/dist/es/ui/tabs.d.ts.map +1 -0
- package/dist/es/ui/tabs.js +64 -0
- package/dist/{types/js → es}/ui/theme-toggle.d.ts +4 -4
- package/dist/es/ui/theme-toggle.d.ts.map +1 -0
- package/dist/es/ui/theme-toggle.js +190 -0
- package/dist/{types/js → es}/ui/tooltip.d.ts +5 -5
- package/dist/es/ui/tooltip.d.ts.map +1 -0
- package/dist/es/ui/tooltip.js +184 -0
- package/dist/{types/js → es}/utils/class-logger.d.ts +4 -4
- package/dist/es/utils/class-logger.d.ts.map +1 -0
- package/dist/es/utils/class-logger.js +37 -0
- package/dist/es/utils/css.d.ts.map +1 -0
- package/dist/es/utils/css.js +6 -0
- package/dist/{types/js → es}/utils/dom.d.ts +1 -1
- package/dist/es/utils/dom.d.ts.map +1 -0
- package/dist/es/utils/dom.js +29 -0
- package/dist/es/utils/file-save.d.ts.map +1 -0
- package/dist/es/utils/file-save.js +46 -0
- package/dist/{types/js → es}/utils/floating-ui.d.ts +1 -1
- package/dist/es/utils/floating-ui.d.ts.map +1 -0
- package/dist/es/utils/floating-ui.js +46 -0
- package/dist/es/utils/font-awesome.d.ts.map +1 -0
- package/dist/es/utils/font-awesome.js +13 -0
- package/dist/es/utils/id.d.ts.map +1 -0
- package/dist/es/utils/id.js +11 -0
- package/dist/{types/js → es}/utils/index.d.ts +7 -7
- package/dist/{types/js → es}/utils/index.d.ts.map +1 -1
- package/dist/es/utils/pause-youtube-video.d.ts.map +1 -0
- package/dist/es/utils/pause-youtube-video.js +27 -0
- package/dist/umd/style.css +1 -0
- package/dist/umd/ulu-frontend.umd.js +70 -0
- package/lib/js/ui/breakpoints.js +13 -5
- package/lib/js/ui/index.js +4 -0
- package/lib/js/ui/modal-builder.js +5 -3
- package/lib/js/ui/slider.js +22 -13
- package/lib/scss/_element.scss +10 -4
- package/lib/scss/components/_accordion.scss +1 -7
- package/lib/scss/components/_button.scss +11 -2
- package/lib/scss/components/_card.scss +5 -6
- package/lib/scss/components/_form-theme.scss +3 -3
- package/lib/scss/components/_menu-stack.scss +1 -0
- package/lib/scss/components/_modal.scss +13 -13
- package/lib/scss/helpers/_utilities.scss +0 -3
- package/package.json +54 -45
- package/dist/style.css +0 -1
- package/dist/types/js/core/component.d.ts.map +0 -1
- package/dist/types/js/core/events.d.ts.map +0 -1
- package/dist/types/js/core/index.d.ts +0 -4
- package/dist/types/js/core/settings.d.ts.map +0 -1
- package/dist/types/js/index.d.ts +0 -4
- package/dist/types/js/ui/breakpoints.d.ts.map +0 -1
- package/dist/types/js/ui/collapsible.d.ts.map +0 -1
- package/dist/types/js/ui/details-group.d.ts.map +0 -1
- package/dist/types/js/ui/dialog.d.ts.map +0 -1
- package/dist/types/js/ui/flipcard.d.ts.map +0 -1
- package/dist/types/js/ui/grid.d.ts.map +0 -1
- package/dist/types/js/ui/modal-builder.d.ts.map +0 -1
- package/dist/types/js/ui/overflow-scroller-pager.d.ts.map +0 -1
- package/dist/types/js/ui/overflow-scroller.d.ts.map +0 -1
- package/dist/types/js/ui/page.d.ts.map +0 -1
- package/dist/types/js/ui/popover.d.ts.map +0 -1
- package/dist/types/js/ui/print-details.d.ts.map +0 -1
- package/dist/types/js/ui/print.d.ts.map +0 -1
- package/dist/types/js/ui/programmatic-modal.d.ts.map +0 -1
- package/dist/types/js/ui/proxy-click.d.ts.map +0 -1
- package/dist/types/js/ui/resizer.d.ts.map +0 -1
- package/dist/types/js/ui/scroll-slider.d.ts.map +0 -1
- package/dist/types/js/ui/scrollpoint.d.ts.map +0 -1
- package/dist/types/js/ui/slider.d.ts.map +0 -1
- package/dist/types/js/ui/tabs.d.ts.map +0 -1
- package/dist/types/js/ui/theme-toggle.d.ts.map +0 -1
- package/dist/types/js/ui/tooltip.d.ts.map +0 -1
- package/dist/types/js/utils/class-logger.d.ts.map +0 -1
- package/dist/types/js/utils/css.d.ts.map +0 -1
- package/dist/types/js/utils/dom.d.ts.map +0 -1
- package/dist/types/js/utils/file-save.d.ts.map +0 -1
- package/dist/types/js/utils/floating-ui.d.ts.map +0 -1
- package/dist/types/js/utils/font-awesome.d.ts.map +0 -1
- package/dist/types/js/utils/id.d.ts.map +0 -1
- package/dist/types/js/utils/pause-youtube-video.d.ts.map +0 -1
- package/dist/ulu-frontend.es.js +0 -5737
- package/dist/ulu-frontend.umd.js +0 -77
- package/lib/scss/components/_card-before-no-position-relative.TRASH.scss +0 -576
- /package/dist/{types/js → es}/ui/overflow-scroller-pager.d.ts +0 -0
- /package/dist/{types/js → es}/ui/page.d.ts +0 -0
- /package/dist/{types/js → es}/ui/print-details.d.ts +0 -0
- /package/dist/{types/js → es}/ui/print.d.ts +0 -0
- /package/dist/{types/js → es}/utils/css.d.ts +0 -0
- /package/dist/{types/js → es}/utils/file-save.d.ts +0 -0
- /package/dist/{types/js → es}/utils/font-awesome.d.ts +0 -0
- /package/dist/{types/js → es}/utils/id.d.ts +0 -0
- /package/dist/{types/js → es}/utils/pause-youtube-video.d.ts +0 -0
|
@@ -34,17 +34,38 @@ export class Collapsible {
|
|
|
34
34
|
constructor(elements: {
|
|
35
35
|
trigger: Node;
|
|
36
36
|
content: Node;
|
|
37
|
-
}, config:
|
|
37
|
+
}, config: Object);
|
|
38
38
|
elements: {
|
|
39
39
|
trigger: Node;
|
|
40
40
|
content: Node;
|
|
41
|
-
};
|
|
42
|
-
options:
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
} | undefined;
|
|
42
|
+
options: ({
|
|
43
|
+
clickOutsideCloses: boolean;
|
|
44
|
+
focusoutCloses: boolean;
|
|
45
|
+
escapeCloses: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* The module won't attach the handlers (you need to do it yourself)
|
|
48
|
+
*/
|
|
49
|
+
selfManaged: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* This collapsible starts in open state
|
|
52
|
+
*/
|
|
53
|
+
startOpen: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Open/active state class
|
|
56
|
+
*/
|
|
57
|
+
openClass: string;
|
|
58
|
+
/**
|
|
59
|
+
* Output debug info
|
|
60
|
+
*/
|
|
61
|
+
debug: boolean;
|
|
62
|
+
onChange(_ctx: any): void;
|
|
63
|
+
} & Object) | undefined;
|
|
64
|
+
isOpen: boolean | undefined;
|
|
65
|
+
handlers: {} | undefined;
|
|
45
66
|
attachHandlers(): void;
|
|
46
|
-
clickHandler: (event: any) => void;
|
|
47
|
-
focusoutHandler: (event: any) => void;
|
|
67
|
+
clickHandler: ((event: any) => void) | undefined;
|
|
68
|
+
focusoutHandler: ((event: any) => void) | undefined;
|
|
48
69
|
removeHandlers(): void;
|
|
49
70
|
onClick(event: any): void;
|
|
50
71
|
destroy(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/collapsible.js"],"names":[],"mappings":"AAQA;;GAEG;AACH;IACE;;;;QAME;;WAEG;;QAGH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;MAKH;IACF;;;;;;OAMG;IACH,sBALG;QAAuB,OAAO,EAAtB,IAAI;QACW,OAAO,EAAtB,IAAI;KACZ,UAAQ,MAAM,EAqBhB;IAXC;iBAZS,IAAI;iBACJ,IAAI;kBAWW;IACxB;;;;QApCA;;WAEG;;QAGH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;4BAqBmB;IACtB,4BAAmB;IACnB,yBAAkB;IASpB,uBAoBC;IAjBC,iDAEC;IACD,oDAWC;IAIH,uBAIC;IACD,0BAEC;IACD,gBAGC;IACD,+BAIC;IACD,cAOC;IACD,sDAEC;IACD,wCAqBC;IACD;;OAEG;IACH,+BAoBC;IACD;;OAEG;IACH,iCAQC;IACD,uBAEC;IACD,wBAEC;IACD,yBAEC;CAqBF"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var f = Object.defineProperty;
|
|
2
|
+
var p = (r, t, e) => t in r ? f(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
|
+
var d = (r, t, e) => p(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { getUluEventName as v } from "../core/events.js";
|
|
5
|
+
import { logError as k, log as E } from "../utils/class-logger.js";
|
|
6
|
+
import { ensureId as h } from "../utils/id.js";
|
|
7
|
+
const l = class l {
|
|
8
|
+
/**
|
|
9
|
+
* @param {Object} elements Elements object
|
|
10
|
+
* @param {Node} elements.trigger Trigger button/element that opens/closes collapsible
|
|
11
|
+
* @param {Node} elements.content The content element that the trigger reveals
|
|
12
|
+
* @param {Object} config Configuration options (see defaults)
|
|
13
|
+
* @returns {Object} Collapsible instance
|
|
14
|
+
*/
|
|
15
|
+
constructor(t, e) {
|
|
16
|
+
const { trigger: s, content: n } = t;
|
|
17
|
+
if (!s || !n) {
|
|
18
|
+
k(this, "missing required elements (trigger or content)");
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const i = Object.assign({}, l.defaults, e);
|
|
22
|
+
this.elements = t, this.options = i, this.isOpen = !1, this.handlers = {}, h(s), h(n), this.debugLog(this, this), i.selfManaged || this.attachHandlers(), this.setup();
|
|
23
|
+
}
|
|
24
|
+
attachHandlers() {
|
|
25
|
+
const { trigger: t, content: e } = this.elements, { focusoutCloses: s } = this.options;
|
|
26
|
+
this.clickHandler = (n) => {
|
|
27
|
+
this.onClick(n);
|
|
28
|
+
}, this.focusoutHandler = (n) => {
|
|
29
|
+
s && document.addEventListener("focusin", () => {
|
|
30
|
+
e.contains(document.activeElement) || this.close(n);
|
|
31
|
+
}, { once: !0 });
|
|
32
|
+
}, t.addEventListener("click", this.clickHandler), e.addEventListener("focusout", this.focusoutHandler);
|
|
33
|
+
}
|
|
34
|
+
removeHandlers() {
|
|
35
|
+
const { trigger: t, content: e } = this.elements;
|
|
36
|
+
t.removeEventListener("click", this.clickHandler), e.removeEventListener("focusout", this.focusoutHandler);
|
|
37
|
+
}
|
|
38
|
+
onClick(t) {
|
|
39
|
+
this.toggle(t);
|
|
40
|
+
}
|
|
41
|
+
destroy() {
|
|
42
|
+
this.removeHandlers(), this.destroyTemporaryHandlers();
|
|
43
|
+
}
|
|
44
|
+
debugLog(...t) {
|
|
45
|
+
this.options.debug && E(this, ...t);
|
|
46
|
+
}
|
|
47
|
+
setup() {
|
|
48
|
+
const { trigger: t, content: e } = this.elements, { startOpen: s } = this.options;
|
|
49
|
+
t.setAttribute("role", "button"), t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id), this.setState(s);
|
|
50
|
+
}
|
|
51
|
+
createEvent(t, e) {
|
|
52
|
+
return new CustomEvent(v("collapsible:" + t), { detail: e });
|
|
53
|
+
}
|
|
54
|
+
setState(t, e) {
|
|
55
|
+
const s = {
|
|
56
|
+
collapsible: this,
|
|
57
|
+
isOpen: t,
|
|
58
|
+
event: e
|
|
59
|
+
};
|
|
60
|
+
this.debugLog(this, "Set state", s);
|
|
61
|
+
const { trigger: n, content: i } = this.elements, { openClass: c } = this.options, o = (a) => a.classList[t ? "add" : "remove"](c);
|
|
62
|
+
n.setAttribute("aria-expanded", t ? "true" : "false"), o(n), o(i), this.isOpen = t, this.options.onChange(s), n.dispatchEvent(this.createEvent("change", s)), t ? this.setupTemporaryHandlers() : this.destroyTemporaryHandlers();
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Setup handlers needed for closing once open
|
|
66
|
+
*/
|
|
67
|
+
setupTemporaryHandlers() {
|
|
68
|
+
const { content: t, trigger: e } = this.elements, { clickOutsideCloses: s, escapeCloses: n } = this.options, i = (o) => {
|
|
69
|
+
const { target: a } = o, m = e.contains(a), g = t.contains(a);
|
|
70
|
+
s && !m && !g && this.close(o);
|
|
71
|
+
}, c = (o) => {
|
|
72
|
+
n && o.key === "Escape" && this.close(o);
|
|
73
|
+
};
|
|
74
|
+
document.addEventListener("click", i), document.addEventListener("keydown", c), this.handlers.onDocumentClick = i, this.handlers.onDocumentKeydown = c;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Destroy handlers attached for closing once open
|
|
78
|
+
*/
|
|
79
|
+
destroyTemporaryHandlers() {
|
|
80
|
+
const { onDocumentClick: t, onDocumentKeydown: e } = this.handlers;
|
|
81
|
+
t && document.removeEventListener("click", t), t && document.removeEventListener("keydown", e);
|
|
82
|
+
}
|
|
83
|
+
open(t) {
|
|
84
|
+
this.setState(!0, t);
|
|
85
|
+
}
|
|
86
|
+
close(t) {
|
|
87
|
+
this.setState(!1, t);
|
|
88
|
+
}
|
|
89
|
+
toggle(t) {
|
|
90
|
+
this.setState(!this.isOpen, t);
|
|
91
|
+
}
|
|
92
|
+
// This is removed because I think it's not useful, users should keep references
|
|
93
|
+
// Static Methods for managing instances of this class
|
|
94
|
+
// static instances = [];
|
|
95
|
+
// /**
|
|
96
|
+
// * Get collapsible instance by trigger element
|
|
97
|
+
// * @param {Node|String} trigger Trigger node or trigger ID
|
|
98
|
+
// */
|
|
99
|
+
// static getInstance(trigger) {
|
|
100
|
+
// return Collapsible.instances.find(c => typeof trigger === "string" ?
|
|
101
|
+
// c.elements.trigger.id === trigger :
|
|
102
|
+
// c.elements.trigger === trigger
|
|
103
|
+
// );
|
|
104
|
+
// }
|
|
105
|
+
// static removeInstance(instance) {
|
|
106
|
+
// const index = Collapsible.instances.findIndex(c => c === instance);
|
|
107
|
+
// if (index > -1) {
|
|
108
|
+
// Collapsible.instances.splice(index, 1);
|
|
109
|
+
// }
|
|
110
|
+
// }
|
|
111
|
+
};
|
|
112
|
+
d(l, "defaults", {
|
|
113
|
+
clickOutsideCloses: !1,
|
|
114
|
+
// oneOpenPerContext: false, // This should be another module that manages instances within a context (accordions)
|
|
115
|
+
// clickWithinCloses: false, // Not sure how this was used but seems like it should be separate
|
|
116
|
+
focusoutCloses: !1,
|
|
117
|
+
escapeCloses: !1,
|
|
118
|
+
/**
|
|
119
|
+
* The module won't attach the handlers (you need to do it yourself)
|
|
120
|
+
*/
|
|
121
|
+
selfManaged: !1,
|
|
122
|
+
/**
|
|
123
|
+
* This collapsible starts in open state
|
|
124
|
+
*/
|
|
125
|
+
startOpen: !1,
|
|
126
|
+
/**
|
|
127
|
+
* Open/active state class
|
|
128
|
+
*/
|
|
129
|
+
openClass: "is-active",
|
|
130
|
+
/**
|
|
131
|
+
* Output debug info
|
|
132
|
+
*/
|
|
133
|
+
debug: !0,
|
|
134
|
+
onChange(t) {
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
let u = l;
|
|
138
|
+
export {
|
|
139
|
+
u as Collapsible
|
|
140
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* Initialize everything in document
|
|
3
4
|
* - This will only initialize elements once, it is safe to call on page changes
|
|
@@ -34,5 +35,4 @@ export type DetailsGroupInstance = {
|
|
|
34
35
|
*/
|
|
35
36
|
setupChildren: Function;
|
|
36
37
|
};
|
|
37
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
38
38
|
//# sourceMappingURL=details-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"details-group.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/details-group.js"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,6BASC;AAED;;;;;GAKG;AAEH;;;;;GAKG;AACH,oCAJW,WAAW,qBAET,oBAAoB,CAgEhC;AAxGD;;GAEG;AACH,+CAGG;;;;;;;;;aA0BW,WAAW;;;;;;qCAlCY,sBAAsB"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { ComponentInitializer as p } from "../core/component.js";
|
|
2
|
+
const s = new p({
|
|
3
|
+
type: "details-group",
|
|
4
|
+
baseAttribute: "data-ulu-details-group"
|
|
5
|
+
}), u = s.getAttribute("child-init"), f = {
|
|
6
|
+
onlyOneOpen: !0,
|
|
7
|
+
childSelector: ":scope > details"
|
|
8
|
+
};
|
|
9
|
+
function b() {
|
|
10
|
+
s.init({
|
|
11
|
+
withData: !0,
|
|
12
|
+
coreEvents: ["pageModified"],
|
|
13
|
+
setup({ element: e, data: n, initialize: r }) {
|
|
14
|
+
d(e, n), r();
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function d(e, n) {
|
|
19
|
+
const r = Object.assign({}, f, n);
|
|
20
|
+
try {
|
|
21
|
+
c();
|
|
22
|
+
} catch (t) {
|
|
23
|
+
console.error(t);
|
|
24
|
+
}
|
|
25
|
+
function i() {
|
|
26
|
+
return e.querySelectorAll(r.childSelector);
|
|
27
|
+
}
|
|
28
|
+
function c() {
|
|
29
|
+
i().forEach((t) => {
|
|
30
|
+
t.hasAttribute(u) || (t.setAttribute(u, ""), t.addEventListener("toggle", a));
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function a({ target: t }) {
|
|
34
|
+
r.onlyOneOpen && t.open && i().forEach((o) => {
|
|
35
|
+
o !== t && o.open && (o.open = !1);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function l() {
|
|
39
|
+
i().forEach((t) => {
|
|
40
|
+
t.removeEventListener("toggle", a), t.removeAttribute(u);
|
|
41
|
+
}), e.removeAttribute(s.getAttribute("init"));
|
|
42
|
+
}
|
|
43
|
+
return { destroy: l, element: e, setupChildren: c };
|
|
44
|
+
}
|
|
45
|
+
export {
|
|
46
|
+
b as init,
|
|
47
|
+
s as initializer,
|
|
48
|
+
d as setupGroup
|
|
49
|
+
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
|
|
3
4
|
*/
|
|
4
|
-
export function setDefaults(options:
|
|
5
|
+
export function setDefaults(options: Object): void;
|
|
5
6
|
/**
|
|
6
7
|
* Initialize everything in document
|
|
7
8
|
* - This will only initialize elements once, it is safe to call on page changes
|
|
@@ -23,7 +24,7 @@ export function setupDialog(dialog: Node, userOptions: any): void;
|
|
|
23
24
|
* @param {Node} dialog
|
|
24
25
|
* @returns {Object}
|
|
25
26
|
*/
|
|
26
|
-
export function getDialogOptions(dialog: Node):
|
|
27
|
+
export function getDialogOptions(dialog: Node): Object;
|
|
27
28
|
/**
|
|
28
29
|
* Base attribute for a dialog
|
|
29
30
|
*/
|
|
@@ -44,5 +45,4 @@ export namespace defaults {
|
|
|
44
45
|
let preventScroll: boolean;
|
|
45
46
|
let preventScrollShift: boolean;
|
|
46
47
|
}
|
|
47
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
48
48
|
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/dialog.js"],"names":[],"mappings":"AA6DA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BA6Dd;AAED;;;;GAIG;AACH,yCAHW,IAAI,GACF,MAAM,CAIlB;AA7LD;;GAEG;AACH,4BAA6B,iBAAiB,CAAC;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,sBAAsB"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { getUluEventName as f } from "../core/events.js";
|
|
2
|
+
import { ComponentInitializer as v } from "../core/component.js";
|
|
3
|
+
import { preventScroll as h, wasClickOutside as E } from "@ulu/utils/browser/dom.js";
|
|
4
|
+
import { prepVideos as O, pauseVideos as S } from "../utils/pause-youtube-video.js";
|
|
5
|
+
const b = "data-ulu-dialog", i = new v({ type: "dialog", baseAttribute: b }), F = i.getAttribute("close"), V = {
|
|
6
|
+
/**
|
|
7
|
+
* Use non-modal interface for dialog
|
|
8
|
+
*/
|
|
9
|
+
nonModal: !1,
|
|
10
|
+
/**
|
|
11
|
+
* Move the dialog to the document end (hoist out of content)
|
|
12
|
+
* - helpful if dialogs are within editor body, etc
|
|
13
|
+
*/
|
|
14
|
+
documentEnd: !1,
|
|
15
|
+
/**
|
|
16
|
+
* Requires styling that reduces any padding/border on dialog
|
|
17
|
+
*/
|
|
18
|
+
clickOutsideCloses: !0,
|
|
19
|
+
/**
|
|
20
|
+
* Whether or not to pause videos when dialog closes (currently just youtube and native)
|
|
21
|
+
*/
|
|
22
|
+
pauseVideos: !0,
|
|
23
|
+
/**
|
|
24
|
+
* When open and not non-modal, the body is prevented from scrolling (defaults to true).
|
|
25
|
+
*/
|
|
26
|
+
preventScroll: !0,
|
|
27
|
+
/**
|
|
28
|
+
* Compensate for layout shift when preventing scroll. Which adds padding equal to scrollbars
|
|
29
|
+
* width while dialog is open
|
|
30
|
+
*/
|
|
31
|
+
preventScrollShift: !0
|
|
32
|
+
};
|
|
33
|
+
let a = { ...V };
|
|
34
|
+
function R(e) {
|
|
35
|
+
a = Object.assign({}, a, e);
|
|
36
|
+
}
|
|
37
|
+
function T() {
|
|
38
|
+
i.init({
|
|
39
|
+
coreEvents: ["pageModified"],
|
|
40
|
+
withData: !0,
|
|
41
|
+
setup({ element: e, initialize: s, data: t }) {
|
|
42
|
+
C(e, t), s();
|
|
43
|
+
}
|
|
44
|
+
}), i.init({
|
|
45
|
+
key: "trigger",
|
|
46
|
+
coreEvents: ["pageModified"],
|
|
47
|
+
withData: !0,
|
|
48
|
+
setup({ element: e, initialize: s, data: t }) {
|
|
49
|
+
w(e, t), s();
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function w(e, s) {
|
|
54
|
+
e.addEventListener("click", t);
|
|
55
|
+
function t(r) {
|
|
56
|
+
var c;
|
|
57
|
+
r.target.closest("a") && r.preventDefault();
|
|
58
|
+
const o = document.getElementById(s);
|
|
59
|
+
if (!o) {
|
|
60
|
+
console.error("Could not locate dialog (id)", s);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (((c = o == null ? void 0 : o.tagName) == null ? void 0 : c.toLowerCase()) !== "dialog") {
|
|
64
|
+
console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
const u = D(o);
|
|
68
|
+
o[u.nonModal ? "show" : "showModal"]();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
function C(e, s) {
|
|
72
|
+
const t = Object.assign({}, a, s), r = document.body, { preventScrollShift: d } = t;
|
|
73
|
+
let o;
|
|
74
|
+
if (e.addEventListener(f("resizer:start"), c), e.addEventListener(f("resizer:end"), m), e.addEventListener("click", u), t.documentEnd && r.appendChild(e), t.pauseVideos && k(e), !t.nonModal && t.preventScroll) {
|
|
75
|
+
let n;
|
|
76
|
+
e.addEventListener("toggle", (l) => {
|
|
77
|
+
l.newState === "open" ? n = h({ preventShift: d }) : n && n();
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function u(n) {
|
|
81
|
+
const { target: l } = n, p = l === e, g = l.closest(i.attributeSelector("close"));
|
|
82
|
+
(!o && t.clickOutsideCloses && p && E(e, n) || g) && (t.pauseVideos && L(e), e.close());
|
|
83
|
+
}
|
|
84
|
+
function c(n) {
|
|
85
|
+
o = n.pointerId;
|
|
86
|
+
}
|
|
87
|
+
function m(n) {
|
|
88
|
+
o === n.pointerId && setTimeout(() => {
|
|
89
|
+
o = null;
|
|
90
|
+
}, 0);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function D(e) {
|
|
94
|
+
return Object.assign({}, a, i.getData(e));
|
|
95
|
+
}
|
|
96
|
+
function k(e) {
|
|
97
|
+
O(e);
|
|
98
|
+
}
|
|
99
|
+
function L(e) {
|
|
100
|
+
S(e), e.querySelectorAll("video").forEach((t) => t.pause());
|
|
101
|
+
}
|
|
102
|
+
export {
|
|
103
|
+
b as baseAttribute,
|
|
104
|
+
F as closeAttribute,
|
|
105
|
+
V as defaults,
|
|
106
|
+
D as getDialogOptions,
|
|
107
|
+
T as init,
|
|
108
|
+
i as initializer,
|
|
109
|
+
R as setDefaults,
|
|
110
|
+
C as setupDialog,
|
|
111
|
+
w as setupTrigger
|
|
112
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* Initialize flipcards using data-ulu-flipcard attribute
|
|
3
4
|
*/
|
|
@@ -47,5 +48,4 @@ export class Flipcard {
|
|
|
47
48
|
containerCss(): string;
|
|
48
49
|
panelCss(zIndex?: number): string;
|
|
49
50
|
}
|
|
50
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
51
51
|
//# sourceMappingURL=flipcard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flipcard.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/flipcard.js"],"names":[],"mappings":"AAgBA;;GAEG;AACH,6BAYC;AAvBD;;GAEG;AACH,+CAGG;AAmBH;;GAEG;AACH;IACE,wBAAsB;IACtB;;OAEG;IACH;;;;;;;MAOE;IACF,gEAgBC;IAZC,aAA2D;IAK3D;;;;MAA0C;IAC1C,gBAAmB;IACnB,YAA6D;IAC7D,kBAA0D;IAK5D,eAEC;IACD,cAqCC;IACD;;;OAGG;IACH;;aAQC;IACD,0BAGC;IACD,+BAIC;IACD,kCASC;IACD,uBAWC;IACD,kCAKC;CACF;qCAzJoC,sBAAsB"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
var p = Object.defineProperty;
|
|
2
|
+
var h = (r, t, e) => t in r ? p(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
|
+
var l = (r, t, e) => h(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { ComponentInitializer as f } from "../core/component.js";
|
|
5
|
+
import { trimWhitespace as m } from "@ulu/utils/string.js";
|
|
6
|
+
import { logError as b, log as g } from "../utils/class-logger.js";
|
|
7
|
+
const d = new f({
|
|
8
|
+
type: "flipcard",
|
|
9
|
+
baseAttribute: "data-ulu-flipcard"
|
|
10
|
+
});
|
|
11
|
+
function k() {
|
|
12
|
+
d.init({
|
|
13
|
+
withData: !0,
|
|
14
|
+
coreEvents: ["pageModified"],
|
|
15
|
+
setup({ element: r, data: t, initialize: e }) {
|
|
16
|
+
const n = Object.assign({}, t), i = r.querySelector(d.attributeSelector("front")), o = r.querySelector(d.attributeSelector("back"));
|
|
17
|
+
new u(r, i, o, n), e();
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
const c = class c {
|
|
22
|
+
constructor(t, e, n, i) {
|
|
23
|
+
n || b(this, "Missing an element (container, front, back)"), this.options = Object.assign({}, c.defaults, i);
|
|
24
|
+
const { namespace: o } = this.options;
|
|
25
|
+
c.instances.push(this), this.elements = { container: t, front: e, back: n }, this.isOpen = !1, this.uid = `${o}-id-${c.instances.length}`, this.stateAttr = `data-${o}-state`.toLowerCase(), this.setup(), this.setVisibility(!1), g(this, this);
|
|
26
|
+
}
|
|
27
|
+
toggle() {
|
|
28
|
+
this.setVisibility(!this.isOpen);
|
|
29
|
+
}
|
|
30
|
+
setup() {
|
|
31
|
+
const { uid: t } = this, { namespace: e, proxyClick: n } = this.options, { container: i, front: o, back: a } = this.elements, s = this.elements.control = document.createElement("button");
|
|
32
|
+
s.classList.add(this.getClass("control-button")), s.setAttribute("type", "button"), s.innerHTML = this.createControlContent(), s.style.gridArea = e, s.style.zIndex = "-1", s.addEventListener("focusin", () => {
|
|
33
|
+
s.style.zIndex = "20";
|
|
34
|
+
}), s.addEventListener("focusout", () => {
|
|
35
|
+
s.style.zIndex = "-1";
|
|
36
|
+
}), s.addEventListener("click", this.toggle.bind(this)), a.parentNode.insertBefore(s, a), i.classList.add(this.options.namespace), i.setAttribute("style", m(this.containerCss())), n && i.addEventListener("click", this.onProxyClick.bind(this)), o.style.gridArea = e, a.style.gridArea = e, s.id = `${t}-control`, s.setAttribute("aria-controls", a.id), s.setAttribute("aria-expanded", "false"), a.id = `${t}-back`, a.setAttribute("aria-labelledby", s.id), a.setAttribute("aria-hidden", "true");
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Click handler on everything on container
|
|
40
|
+
* - Determines if click was something that should be ignored (link, etc)
|
|
41
|
+
*/
|
|
42
|
+
onProxyClick({ target: t }) {
|
|
43
|
+
const { exclude: e, allowSelection: n, selectionMin: i } = this.options.proxyClick, o = window.getSelection();
|
|
44
|
+
e && !t.matches(e) && (!n || o.toString().length < i) && this.toggle();
|
|
45
|
+
}
|
|
46
|
+
getClass(t) {
|
|
47
|
+
const { namespace: e } = this.options;
|
|
48
|
+
return t ? `${e}__${t}` : e;
|
|
49
|
+
}
|
|
50
|
+
createControlContent() {
|
|
51
|
+
return `
|
|
52
|
+
<span class="hidden-visually">Show More Information</span>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
setVisibility(t) {
|
|
56
|
+
const { back: e, container: n, control: i } = this.elements, o = t ? "open" : "closed";
|
|
57
|
+
e.style.zIndex = t ? "10" : "1", e.style.visibility = t ? "visible" : "hidden", n.setAttribute(this.stateAttr, o), e.setAttribute("aria-hidden", t ? "false" : "true"), i.setAttribute("aria-expanded", t ? "true" : "false"), this.isOpen = t;
|
|
58
|
+
}
|
|
59
|
+
containerCss() {
|
|
60
|
+
return `
|
|
61
|
+
display: -ms-grid;
|
|
62
|
+
display: grid;
|
|
63
|
+
position: relative;
|
|
64
|
+
-ms-grid-columns: 1fr;
|
|
65
|
+
grid-template-columns: 1fr;
|
|
66
|
+
justify-items: stretch;
|
|
67
|
+
grid-template-areas: "${this.options.namespace}";
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
`;
|
|
70
|
+
}
|
|
71
|
+
panelCss(t = 1) {
|
|
72
|
+
return `
|
|
73
|
+
grid-area: ${this.options.namespace};
|
|
74
|
+
z-index: ${t}
|
|
75
|
+
`;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
l(c, "instances", []), /**
|
|
79
|
+
* Default options for Flipcard
|
|
80
|
+
*/
|
|
81
|
+
l(c, "defaults", {
|
|
82
|
+
namespace: "Flipcard",
|
|
83
|
+
proxyClick: {
|
|
84
|
+
allowSelection: !0,
|
|
85
|
+
// Don't proxy click if the user has more than the minmimum selected
|
|
86
|
+
selectionMin: 10,
|
|
87
|
+
// Minimum length that qualifies as a selection
|
|
88
|
+
exclude: "a, input, textarea, button"
|
|
89
|
+
// Selectors to avoid closing a flipcard onProxyclick
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
let u = c;
|
|
93
|
+
export {
|
|
94
|
+
u as Flipcard,
|
|
95
|
+
k as init,
|
|
96
|
+
d as initializer
|
|
97
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* Sets up document for grid position classes
|
|
3
4
|
* @param {Object} classes Classes (optional) @see setPositionClasses
|
|
4
5
|
*/
|
|
5
|
-
export function init(classes:
|
|
6
|
+
export function init(classes: Object): void;
|
|
6
7
|
/**
|
|
7
8
|
* Dialog Component Initializer
|
|
8
9
|
*/
|
|
9
10
|
export const initializer: ComponentInitializer;
|
|
10
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
11
11
|
//# sourceMappingURL=grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,8BAFW,MAAM,QAUhB;AApBD;;GAEG;AACH,+CAGG;qCATkC,sBAAsB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ComponentInitializer as o } from "../core/component.js";
|
|
2
|
+
import { setPositionClasses as n } from "../utils/dom.js";
|
|
3
|
+
const r = new o({
|
|
4
|
+
type: "grid",
|
|
5
|
+
baseAttribute: "data-grid"
|
|
6
|
+
});
|
|
7
|
+
function p(i) {
|
|
8
|
+
r.init({
|
|
9
|
+
coreEvents: ["pageModified", "pageResized"],
|
|
10
|
+
setup({ element: t, initialize: e }) {
|
|
11
|
+
n(t, i), e();
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
p as init,
|
|
17
|
+
r as initializer
|
|
18
|
+
};
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
export { BreakpointManager } from
|
|
2
|
-
export { Collapsible } from
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export { init as
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
export {
|
|
11
|
-
export { init as
|
|
12
|
-
export {
|
|
13
|
-
export {
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export { init as
|
|
17
|
-
export { init as
|
|
18
|
-
export { init as
|
|
19
|
-
export { init as
|
|
20
|
-
export {
|
|
21
|
-
export { init as
|
|
1
|
+
export { BreakpointManager } from './breakpoints.js';
|
|
2
|
+
export { Collapsible } from './collapsible.js';
|
|
3
|
+
export { ProgrammaticModalManager } from './programmatic-modal.js';
|
|
4
|
+
export { OverflowScroller } from './overflow-scroller.js';
|
|
5
|
+
export { createPager as overflowScrollerCreatePager } from './overflow-scroller-pager.js';
|
|
6
|
+
export { init as pageInit } from './page.js';
|
|
7
|
+
export { init as printInit } from './print.js';
|
|
8
|
+
export { Resizer } from './resizer.js';
|
|
9
|
+
export { init as detailsGroupInit, initializer as detailsGroupInitializer, setupGroup as detailsGroupSetupGroup } from './details-group.js';
|
|
10
|
+
export { baseAttribute as dialogBaseAttribute, closeAttribute as dialogCloseAttribute, defaults as dialogDefaults, getDialogOptions as dialogGetDialogOptions, init as dialogInit, initializer as dialogInitializer, setDefaults as dialogSetDefaults, setupDialog as dialogSetupDialog, setupTrigger as dialogSetupTrigger } from './dialog.js';
|
|
11
|
+
export { Flipcard, init as flipcardInit, initializer as flipcardInitializer } from './flipcard.js';
|
|
12
|
+
export { init as gridInit, initializer as gridInitializer } from './grid.js';
|
|
13
|
+
export { buildModal as modalBuilderBuildModal, defaults as modalBuilderDefaults, init as modalBuilderInit, initializer as modalBuilderInitializer, setDefaults as modalBuilderSetDefaults } from './modal-builder.js';
|
|
14
|
+
export { getContentByTrigger as popoverGetContentByTrigger, init as popoverInit, initializer as popoverInitializer, instances as popoverInstances, Popover, resolve as popoverResolve } from './popover.js';
|
|
15
|
+
export { attrs as printDetailsAttrs, init as printDetailsInit } from './print-details.js';
|
|
16
|
+
export { attachHandlers as proxyClickAttachHandlers, defaults as proxyClickDefaults, init as proxyClickInit, initializer as proxyClickInitializer, setDefaults as proxyClickSetDefaults, setupProxy as proxyClickSetupProxy } from './proxy-click.js';
|
|
17
|
+
export { init as scrollSliderInit, initializer as scrollSliderInitializer } from './scroll-slider.js';
|
|
18
|
+
export { init as scrollpointInit, initializer as scrollpointInitializer, Scrollpoint } from './scrollpoint.js';
|
|
19
|
+
export { init as sliderInit, initializer as sliderInitializer, setupSlider as sliderSetupSlider, Slider } from './slider.js';
|
|
20
|
+
export { init as tabsInit, initializer as tabsInitializer, instances as tabsInstances, setup as tabsSetup } from './tabs.js';
|
|
21
|
+
export { defaults as themeToggleDefaults, init as themeToggleInit, initializer as themeToggleInitializer, setDefaults as themeToggleSetDefaults, setupToggle as themeToggleSetupToggle } from './theme-toggle.js';
|
|
22
|
+
export { init as tooltipInit, initializer as tooltipInitializer, Tooltip } from './tooltip.js';
|
|
22
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/index.js"],"names":[],"mappings":""}
|