@muibook/components 15.0.0 → 16.0.0
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/esm/components/mui-prompt/index.js +145 -158
- package/dist/esm/components/mui-prompt-message/index.js +26 -43
- package/dist/esm/components/mui-slide-frame/index.js +57 -119
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +2778 -2869
- package/dist/types/components/mui-slide-frame/index.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1,29 +1,28 @@
|
|
|
1
1
|
import "../mui-body/index.js";
|
|
2
|
-
class
|
|
2
|
+
class d extends HTMLElement {
|
|
3
3
|
constructor() {
|
|
4
|
-
super(), this.
|
|
4
|
+
super(), this.avatarSlotEl = null, this.contentSlotEl = null, this.attachShadow({ mode: "open" });
|
|
5
5
|
}
|
|
6
6
|
static get observedAttributes() {
|
|
7
7
|
return ["size", "variant", "density"];
|
|
8
8
|
}
|
|
9
9
|
connectedCallback() {
|
|
10
|
-
this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("density") || this.setAttribute("density", "default"), this.render(), this.
|
|
10
|
+
this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("density") || this.setAttribute("density", "default"), this.render(), this.bindSlotSync();
|
|
11
11
|
}
|
|
12
|
-
attributeChangedCallback(t, e
|
|
13
|
-
|
|
12
|
+
attributeChangedCallback(a, t, e) {
|
|
13
|
+
t !== e && (this.render(), this.bindSlotSync());
|
|
14
14
|
}
|
|
15
15
|
disconnectedCallback() {
|
|
16
|
-
|
|
17
|
-
(t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null, this.avatarSlotEl = null, this.contentSlotEl = null;
|
|
16
|
+
this.avatarSlotEl = null, this.contentSlotEl = null;
|
|
18
17
|
}
|
|
19
18
|
render() {
|
|
20
19
|
if (!this.shadowRoot) return;
|
|
21
|
-
const
|
|
20
|
+
const a = this.getAttribute("size") || "medium", t = {
|
|
22
21
|
"x-small": { gap: "var(--space-100)", padding: "var(--space-200)" },
|
|
23
22
|
small: { gap: "var(--space-200)", padding: "var(--space-300)" },
|
|
24
23
|
medium: { gap: "var(--space-300)", padding: "var(--space-400)" },
|
|
25
24
|
large: { gap: "var(--space-400)", padding: "var(--space-500)" }
|
|
26
|
-
},
|
|
25
|
+
}, e = t[a] || t.medium;
|
|
27
26
|
this.shadowRoot.innerHTML = /*html*/
|
|
28
27
|
`
|
|
29
28
|
<style>
|
|
@@ -33,11 +32,11 @@ class u extends HTMLElement {
|
|
|
33
32
|
.bubble {
|
|
34
33
|
display: grid;
|
|
35
34
|
grid-template-columns: auto 1fr;
|
|
36
|
-
align-items:
|
|
37
|
-
gap: ${
|
|
35
|
+
align-items: start;
|
|
36
|
+
gap: ${e.gap};
|
|
38
37
|
width: 100%;
|
|
39
38
|
box-sizing: border-box;
|
|
40
|
-
padding: ${
|
|
39
|
+
padding: ${e.padding};
|
|
41
40
|
border: var(--border-thin);
|
|
42
41
|
border-color: var(--form-default-border-color);
|
|
43
42
|
border-radius: var(--radius-300);
|
|
@@ -55,12 +54,10 @@ class u extends HTMLElement {
|
|
|
55
54
|
.content {
|
|
56
55
|
min-width: 0;
|
|
57
56
|
}
|
|
58
|
-
:host([
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
:host([
|
|
62
|
-
margin-top: var(--space-050);
|
|
63
|
-
}
|
|
57
|
+
:host([size="x-small"]) .content { margin-top: calc(var(--space-025) + var(--stroke-size-100)); }
|
|
58
|
+
:host([size="small"]) .content { margin-top: var(--space-200); }
|
|
59
|
+
:host([size="medium"]) .content { margin-top: var(--space-200); }
|
|
60
|
+
:host([size="large"]) .content { margin-top: var(--space-300); }
|
|
64
61
|
</style>
|
|
65
62
|
|
|
66
63
|
<div class="bubble">
|
|
@@ -75,40 +72,26 @@ class u extends HTMLElement {
|
|
|
75
72
|
}
|
|
76
73
|
bindSlotSync() {
|
|
77
74
|
if (!this.shadowRoot || (this.avatarSlotEl = this.shadowRoot.querySelector("#avatarSlot"), this.contentSlotEl = this.shadowRoot.querySelector("#contentSlot"), !this.avatarSlotEl || !this.contentSlotEl)) return;
|
|
78
|
-
const
|
|
79
|
-
var
|
|
80
|
-
const
|
|
75
|
+
const a = () => {
|
|
76
|
+
var i, o;
|
|
77
|
+
const t = this.getAttribute("size") || "medium", e = {
|
|
81
78
|
"x-small": "x-small",
|
|
82
79
|
small: "small",
|
|
83
80
|
medium: "small",
|
|
84
81
|
large: "medium"
|
|
85
|
-
},
|
|
82
|
+
}, r = {
|
|
86
83
|
"x-small": "x-small",
|
|
87
84
|
small: "small",
|
|
88
85
|
medium: "small",
|
|
89
86
|
large: "medium"
|
|
90
|
-
},
|
|
91
|
-
(((
|
|
92
|
-
|
|
93
|
-
}), (((o = this.contentSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((
|
|
94
|
-
|
|
95
|
-
});
|
|
96
|
-
};
|
|
97
|
-
this.avatarSlotEl.addEventListener("slotchange", t), this.contentSlotEl.addEventListener("slotchange", t), t();
|
|
98
|
-
}
|
|
99
|
-
bindLayoutSync() {
|
|
100
|
-
var i;
|
|
101
|
-
if (!this.shadowRoot) return;
|
|
102
|
-
(i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null;
|
|
103
|
-
const t = this.shadowRoot.querySelector(".content"), e = this.shadowRoot.querySelector("#contentSlot");
|
|
104
|
-
if (!t || !e) return;
|
|
105
|
-
const s = () => {
|
|
106
|
-
requestAnimationFrame(() => {
|
|
107
|
-
const l = e.assignedElements({ flatten: !0 })[0] || t, c = getComputedStyle(l).lineHeight || "0", n = Number.parseFloat(c), r = Number.isFinite(n) && n > 0 ? n : 20, o = Math.round(t.getBoundingClientRect().height / r);
|
|
108
|
-
this.toggleAttribute("multi-line", o > 1);
|
|
87
|
+
}, l = e[t] || "small", n = r[t] || "small";
|
|
88
|
+
(((i = this.avatarSlotEl) == null ? void 0 : i.assignedElements({ flatten: !0 })) || []).forEach((s) => {
|
|
89
|
+
s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", l);
|
|
90
|
+
}), (((o = this.contentSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((s) => {
|
|
91
|
+
s.tagName.toLowerCase() === "mui-body" && s.setAttribute("size", n);
|
|
109
92
|
});
|
|
110
93
|
};
|
|
111
|
-
|
|
94
|
+
this.avatarSlotEl.addEventListener("slotchange", a), this.contentSlotEl.addEventListener("slotchange", a), a();
|
|
112
95
|
}
|
|
113
96
|
}
|
|
114
|
-
customElements.get("mui-prompt-message") || customElements.define("mui-prompt-message",
|
|
97
|
+
customElements.get("mui-prompt-message") || customElements.define("mui-prompt-message", d);
|
|
@@ -4,11 +4,10 @@ import "../mui-stack/vstack/index.js";
|
|
|
4
4
|
import "../mui-stack/hstack/index.js";
|
|
5
5
|
import "../mui-button/index.js";
|
|
6
6
|
import "../mui-icons/warning/index.js";
|
|
7
|
-
import "../mui-dialog/index.js";
|
|
8
7
|
import "../mui-select/index.js";
|
|
9
|
-
class
|
|
8
|
+
class C extends HTMLElement {
|
|
10
9
|
constructor() {
|
|
11
|
-
super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.
|
|
10
|
+
super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.stageEl = null, this.surfaceEl = null, this.activeSectionEl = null, this.nativeFullscreenActive = !1, this.pointerStartX = null, this.pointerStartY = null, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onPointerDown = (e) => this.handlePointerDown(e), this.onPointerUp = (e) => this.handlePointerUp(e), this.onKeyDown = (e) => this.handleArrowNavigation(e), this.onFullscreenChange = () => this.handleFullscreenChange(), this.onFullscreenError = () => this.handleFullscreenError(), this.onWindowResize = () => this.updateFullscreenSurfaceFit(), this.onDocumentKeyDown = (e) => {
|
|
12
11
|
const t = document.fullscreenElement === this;
|
|
13
12
|
if (e.key === "Escape" && this.hasAttribute("present") && !t) {
|
|
14
13
|
e.preventDefault(), this.resetPresentationState();
|
|
@@ -20,8 +19,6 @@ class R extends HTMLElement {
|
|
|
20
19
|
static get observedAttributes() {
|
|
21
20
|
return [
|
|
22
21
|
"ratio",
|
|
23
|
-
"ratio-width",
|
|
24
|
-
"ratio-height",
|
|
25
22
|
"present",
|
|
26
23
|
"active-section",
|
|
27
24
|
"padding",
|
|
@@ -33,8 +30,7 @@ class R extends HTMLElement {
|
|
|
33
30
|
"hide-header",
|
|
34
31
|
"hide-footer",
|
|
35
32
|
"hide-counter",
|
|
36
|
-
"
|
|
37
|
-
"lightbox",
|
|
33
|
+
"allow-add-section",
|
|
38
34
|
"scroll",
|
|
39
35
|
"fullscreen"
|
|
40
36
|
];
|
|
@@ -43,8 +39,8 @@ class R extends HTMLElement {
|
|
|
43
39
|
this.hasAttribute("ratio") || this.setAttribute("ratio", "16:9"), this.hasAttribute("padding") || this.setAttribute("padding", "medium"), this.hasAttribute("active-section") || this.setAttribute("active-section", "0"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("radius") || this.setAttribute("radius", "default"), this.render(), this.syncSections(), this.syncChromeState(), this.addEventListener("keydown", this.onKeyDown), document.addEventListener("keydown", this.onDocumentKeyDown), document.addEventListener("fullscreenchange", this.onFullscreenChange), document.addEventListener("fullscreenerror", this.onFullscreenError), window.addEventListener("resize", this.onWindowResize);
|
|
44
40
|
}
|
|
45
41
|
disconnectedCallback() {
|
|
46
|
-
var e, t, i, s,
|
|
47
|
-
(e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerAfterSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.headerDescriptionSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (
|
|
42
|
+
var e, t, i, s, n, o, l, d, f, c;
|
|
43
|
+
(e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerAfterSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.headerDescriptionSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (n = this.footerSlot) == null || n.removeEventListener("slotchange", this.onChromeSlotChange), (o = this.footerAfterSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.footerDescriptionSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.notesSlot) == null || d.removeEventListener("slotchange", this.onChromeSlotChange), (f = this.surfaceEl) == null || f.removeEventListener("pointerdown", this.onPointerDown), (c = this.surfaceEl) == null || c.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown), document.removeEventListener("fullscreenchange", this.onFullscreenChange), document.removeEventListener("fullscreenerror", this.onFullscreenError), window.removeEventListener("resize", this.onWindowResize);
|
|
48
44
|
}
|
|
49
45
|
attributeChangedCallback(e, t, i) {
|
|
50
46
|
t !== i && (this.render(), this.syncSections(), this.syncChromeState());
|
|
@@ -83,7 +79,7 @@ class R extends HTMLElement {
|
|
|
83
79
|
return !Number.isFinite(t) || e.length === 0 ? 0 : Math.max(0, Math.min(t, e.length - 1));
|
|
84
80
|
}
|
|
85
81
|
setActiveSectionIndex(e) {
|
|
86
|
-
this.setAttribute("active-section", String(e));
|
|
82
|
+
this.activeSectionEl = null, this.setAttribute("active-section", String(e));
|
|
87
83
|
}
|
|
88
84
|
nextSection() {
|
|
89
85
|
const e = this.getSections();
|
|
@@ -110,8 +106,12 @@ class R extends HTMLElement {
|
|
|
110
106
|
);
|
|
111
107
|
}
|
|
112
108
|
addSection(e) {
|
|
113
|
-
const t = document.createElement("
|
|
114
|
-
t.setAttribute("data-slide-section", ""), typeof e == "string"
|
|
109
|
+
const t = document.createElement("mui-v-stack");
|
|
110
|
+
if (t.setAttribute("space", "var(--space-400)"), t.setAttribute("alignx", "center"), t.setAttribute("aligny", "center"), t.setAttribute("data-slide-section", ""), typeof e == "string") {
|
|
111
|
+
const n = document.createElement("mui-body");
|
|
112
|
+
n.setAttribute("size", "large"), n.textContent = e, t.appendChild(n);
|
|
113
|
+
} else e instanceof HTMLElement && t.appendChild(e);
|
|
114
|
+
this.appendChild(t);
|
|
115
115
|
const i = this.getSections(), s = Math.max(0, i.length - 1);
|
|
116
116
|
this.setActiveSectionIndex(s), this.syncSections(), this.dispatchEvent(
|
|
117
117
|
new CustomEvent("section-add", {
|
|
@@ -132,12 +132,7 @@ class R extends HTMLElement {
|
|
|
132
132
|
);
|
|
133
133
|
}
|
|
134
134
|
resolveRatio() {
|
|
135
|
-
const
|
|
136
|
-
if (e === "custom") {
|
|
137
|
-
const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
|
|
138
|
-
return i > 0 && s > 0 ? `${i} / ${s}` : "16 / 9";
|
|
139
|
-
}
|
|
140
|
-
const t = e.split(":");
|
|
135
|
+
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
141
136
|
if (t.length === 2) {
|
|
142
137
|
const i = parseFloat(t[0]), s = parseFloat(t[1]);
|
|
143
138
|
if (i > 0 && s > 0) return `${i} / ${s}`;
|
|
@@ -145,12 +140,7 @@ class R extends HTMLElement {
|
|
|
145
140
|
return "16 / 9";
|
|
146
141
|
}
|
|
147
142
|
resolveRatioParts() {
|
|
148
|
-
const
|
|
149
|
-
if (e === "custom") {
|
|
150
|
-
const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
|
|
151
|
-
return i > 0 && s > 0 ? { width: i, height: s } : { width: 16, height: 9 };
|
|
152
|
-
}
|
|
153
|
-
const t = e.split(":");
|
|
143
|
+
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
154
144
|
if (t.length === 2) {
|
|
155
145
|
const i = parseFloat(t[0]), s = parseFloat(t[1]);
|
|
156
146
|
if (i > 0 && s > 0) return { width: i, height: s };
|
|
@@ -159,10 +149,13 @@ class R extends HTMLElement {
|
|
|
159
149
|
}
|
|
160
150
|
syncSections() {
|
|
161
151
|
if (!this.shadowRoot) return;
|
|
162
|
-
const e = this.getSections()
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
152
|
+
const e = this.getSections();
|
|
153
|
+
let t = this.getActiveSectionIndex();
|
|
154
|
+
this.activeSectionEl && e.includes(this.activeSectionEl) && (t = e.indexOf(this.activeSectionEl)), t = Math.max(0, Math.min(t, Math.max(0, e.length - 1))), (this.getAttribute("active-section") || "0") !== String(t) && this.setAttribute("active-section", String(t));
|
|
155
|
+
const i = this.hasAttribute("present") || e.length > 1;
|
|
156
|
+
e.forEach((s, n) => {
|
|
157
|
+
s.setAttribute("data-slide-section", ""), n === t ? (s.removeAttribute("slide-hidden"), s.setAttribute("slide-active", "")) : (s.removeAttribute("slide-active"), i ? s.setAttribute("slide-hidden", "") : s.removeAttribute("slide-hidden"));
|
|
158
|
+
}), this.activeSectionEl = e[t] ?? null, this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
|
|
166
159
|
}
|
|
167
160
|
handleArrowNavigation(e) {
|
|
168
161
|
const t = document.fullscreenElement === this;
|
|
@@ -188,7 +181,7 @@ class R extends HTMLElement {
|
|
|
188
181
|
return !!(i && this.contains(i));
|
|
189
182
|
}
|
|
190
183
|
render() {
|
|
191
|
-
var
|
|
184
|
+
var n, o, l, d, f, c, b, v, h, S, y, w, u, a, p, m, r, E;
|
|
192
185
|
if (!this.shadowRoot) return;
|
|
193
186
|
const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), s = this.escapeHtml(t);
|
|
194
187
|
this.shadowRoot.innerHTML = /*html*/
|
|
@@ -207,7 +200,7 @@ class R extends HTMLElement {
|
|
|
207
200
|
--slide-frame-footer-padding-inline: var(--slide-frame-surface-padding-active);
|
|
208
201
|
--slide-frame-footer-padding-block: var(--slide-frame-surface-padding-active);
|
|
209
202
|
--slide-frame-footer-padding-top: 0;
|
|
210
|
-
--slide-frame-footer-padding-bottom: var(--space-
|
|
203
|
+
--slide-frame-footer-padding-bottom: var(--space-400);
|
|
211
204
|
}
|
|
212
205
|
:host([padding="none"]) { --slide-frame-surface-padding-active: 0; }
|
|
213
206
|
:host([padding="small"]) { --slide-frame-surface-padding-active: var(--slide-frame-padding-small); }
|
|
@@ -313,21 +306,11 @@ class R extends HTMLElement {
|
|
|
313
306
|
:host([present]) .surface {
|
|
314
307
|
overflow: auto !important;
|
|
315
308
|
}
|
|
316
|
-
:host([preview]) .stage {
|
|
317
|
-
border-color: var(--slide-frame-preview-border-color, var(--text-color-warning));
|
|
318
|
-
}
|
|
319
|
-
:host([preview]:not([variant="plain"]):not([variant="ghost"])) .stage {
|
|
320
|
-
box-shadow:
|
|
321
|
-
var(--slide-frame-shadow),
|
|
322
|
-
0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
|
|
323
|
-
}
|
|
324
|
-
:host([preview][variant="plain"]) .stage,
|
|
325
|
-
:host([preview][variant="ghost"]) .stage {
|
|
326
|
-
box-shadow: 0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
|
|
327
|
-
}
|
|
328
309
|
.header,
|
|
329
310
|
.footer {
|
|
330
311
|
display: block;
|
|
312
|
+
width: 100%;
|
|
313
|
+
box-sizing: border-box;
|
|
331
314
|
}
|
|
332
315
|
.header {
|
|
333
316
|
padding:
|
|
@@ -402,14 +385,6 @@ class R extends HTMLElement {
|
|
|
402
385
|
:host([present]) .stage {
|
|
403
386
|
background: var(--slide-frame-background-present, var(--slide-frame-background));
|
|
404
387
|
}
|
|
405
|
-
.lightbox-image {
|
|
406
|
-
display: block;
|
|
407
|
-
width: 100%;
|
|
408
|
-
max-height: 75vh;
|
|
409
|
-
height: auto;
|
|
410
|
-
object-fit: contain;
|
|
411
|
-
}
|
|
412
|
-
|
|
413
388
|
.present-controls {
|
|
414
389
|
display: grid;
|
|
415
390
|
}
|
|
@@ -429,15 +404,11 @@ class R extends HTMLElement {
|
|
|
429
404
|
<mui-grid col="1fr auto" class="present-controls" aligny="center">
|
|
430
405
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
431
406
|
<mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
|
|
432
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
433
407
|
<mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
|
|
434
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
435
408
|
<mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
|
|
436
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
437
409
|
</mui-h-stack>
|
|
438
410
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
439
411
|
<mui-button id="slideFramePrevSectionBtn" variant="tertiary" size="x-small"><mui-icon-left-chevron slot="before"></mui-icon-left-chevron>Previous</mui-button>
|
|
440
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
441
412
|
<mui-button id="slideFrameNextSectionBtn" variant="tertiary" size="x-small">Next<mui-icon-right-chevron slot="after"></mui-icon-right-chevron></mui-button>
|
|
442
413
|
</mui-h-stack>
|
|
443
414
|
</mui-grid>
|
|
@@ -488,62 +459,51 @@ class R extends HTMLElement {
|
|
|
488
459
|
</div>
|
|
489
460
|
<div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
|
|
490
461
|
</div>
|
|
491
|
-
|
|
492
|
-
<mui-heading slot="title" size="5" level="3">Image Preview</mui-heading>
|
|
493
|
-
<img id="lightboxImage" class="lightbox-image" alt="Slide image preview" />
|
|
494
|
-
</mui-dialog>
|
|
495
|
-
`, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (r = this.defaultSlot) == null || r.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.imageSlot = this.shadowRoot.querySelector('slot[name="image"]'), this.stageEl = this.shadowRoot.querySelector(".stage"), this.surfaceEl = this.shadowRoot.querySelector(".surface"), (o = this.headerSlot) == null || o.addEventListener("slotchange", this.onChromeSlotChange), (n = this.headerAfterSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (m = this.footerAfterSlot) == null || m.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerDescriptionSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (d = this.notesSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (c = this.surfaceEl) == null || c.addEventListener("click", this.onSurfaceClick), (S = this.surfaceEl) == null || S.addEventListener("pointerdown", this.onPointerDown), (w = this.surfaceEl) == null || w.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (y = this.shadowRoot.querySelector("#lightboxDialog")) == null || y.addEventListener("mui-dialog-close", () => {
|
|
496
|
-
this.dispatchEvent(new CustomEvent("lightbox-close", { bubbles: !0, composed: !0 }));
|
|
497
|
-
}), (u = this.shadowRoot.querySelector("#notesActionBtn")) == null || u.addEventListener("click", () => {
|
|
462
|
+
`, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (n = this.defaultSlot) == null || n.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.stageEl = this.shadowRoot.querySelector(".stage"), this.surfaceEl = this.shadowRoot.querySelector(".surface"), (o = this.headerSlot) == null || o.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerAfterSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (d = this.headerDescriptionSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (c = this.footerAfterSlot) == null || c.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerDescriptionSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (v = this.notesSlot) == null || v.addEventListener("slotchange", this.onChromeSlotChange), (h = this.surfaceEl) == null || h.addEventListener("pointerdown", this.onPointerDown), (S = this.surfaceEl) == null || S.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (y = this.shadowRoot.querySelector("#notesActionBtn")) == null || y.addEventListener("click", () => {
|
|
498
463
|
this.toggleNotes();
|
|
499
|
-
}), (
|
|
500
|
-
this.addSection(`Section ${(this.getSections().length + 1).toString()}
|
|
501
|
-
}), (
|
|
464
|
+
}), (w = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || w.addEventListener("click", () => {
|
|
465
|
+
this.addSection(`Section ${(this.getSections().length + 1).toString()}`);
|
|
466
|
+
}), (u = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || u.addEventListener("click", () => {
|
|
502
467
|
this.prevSection();
|
|
503
|
-
}), (
|
|
468
|
+
}), (a = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || a.addEventListener("click", () => {
|
|
504
469
|
this.nextSection();
|
|
505
470
|
}), (p = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || p.addEventListener("click", () => {
|
|
506
471
|
if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
|
|
507
472
|
this.resetPresentationState(), this.exitFullscreen();
|
|
508
473
|
return;
|
|
509
474
|
}
|
|
510
|
-
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((
|
|
511
|
-
|
|
475
|
+
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((g) => {
|
|
476
|
+
g && this.syncChromeState();
|
|
512
477
|
});
|
|
513
|
-
}), (
|
|
478
|
+
}), (m = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || m.addEventListener("click", () => {
|
|
514
479
|
this.resetPresentationState(), this.exitFullscreen();
|
|
515
|
-
}), (
|
|
480
|
+
}), (r = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || r.addEventListener("click", () => {
|
|
516
481
|
this.toggleNotes();
|
|
517
|
-
}), (
|
|
518
|
-
var
|
|
519
|
-
const
|
|
520
|
-
this.setAttribute("ratio",
|
|
482
|
+
}), (E = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || E.addEventListener("change", (A) => {
|
|
483
|
+
var x;
|
|
484
|
+
const g = A.currentTarget, F = (g == null ? void 0 : g.value) || ((x = g == null ? void 0 : g.getAttribute) == null ? void 0 : x.call(g, "value")) || "16:9";
|
|
485
|
+
this.setAttribute("ratio", F);
|
|
521
486
|
}), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
|
|
522
487
|
}
|
|
523
488
|
syncChromeState() {
|
|
524
489
|
if (!this.shadowRoot) return;
|
|
525
|
-
const e = (
|
|
526
|
-
(
|
|
527
|
-
), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"),
|
|
528
|
-
if (
|
|
529
|
-
const
|
|
530
|
-
|
|
490
|
+
const e = (r) => ((r == null ? void 0 : r.assignedNodes({ flatten: !0 })) || []).some(
|
|
491
|
+
(E) => E.nodeType === Node.ELEMENT_NODE || (E.textContent || "").trim().length > 0
|
|
492
|
+
), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"), n = this.hasAttribute("hide-footer"), o = !this.hasAttribute("hide-counter") && this.getSections().length > 0, l = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), d = !n && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || o || this.hasAttribute("present") || this.hasAttribute("fullscreen")), f = e(this.notesSlot), c = this.hasAttribute("notes-open"), b = this.shadowRoot.querySelector("#headerRegion"), v = this.shadowRoot.querySelector("#footerRegion"), h = this.shadowRoot.querySelector("#footerCounter"), S = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), y = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), w = this.shadowRoot.querySelector(".present-controls"), u = this.shadowRoot.querySelector("#slideFrameAddSectionBtn"), a = this.shadowRoot.querySelector("#slideFrameAddSectionRule"), p = Math.max(this.getSections().length, 1), m = this.getActiveSectionIndex() + 1;
|
|
493
|
+
if (w) {
|
|
494
|
+
const r = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
|
|
495
|
+
w.hidden = r;
|
|
531
496
|
}
|
|
532
|
-
if (
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
c.style.setProperty("--slide-frame-counter-digits", String(l)), c.setAttribute("aria-label", `Section ${a} of ${u}`), c.innerHTML = `Section <span class="counter-value">${a}</span>/<span class="counter-value">${u}</span>`;
|
|
497
|
+
if (u) {
|
|
498
|
+
const r = this.hasAttribute("allow-add-section");
|
|
499
|
+
u.hidden = !r, u.style.display = r ? "" : "none", a && (a.hidden = !r), a && (a.style.display = r ? "" : "none");
|
|
536
500
|
}
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
const i = e.composedPath();
|
|
544
|
-
if (!t.some((o) => i.includes(o))) return;
|
|
545
|
-
const r = this.resolveLightboxImage(i, t);
|
|
546
|
-
!r || !r.src || this.openLightbox(r.src, r.alt || "Slide image preview");
|
|
501
|
+
if (h) {
|
|
502
|
+
h.hidden = !o;
|
|
503
|
+
const r = Math.min(m, p), E = String(p).length;
|
|
504
|
+
h.style.setProperty("--slide-frame-counter-digits", String(E)), h.setAttribute("aria-label", `Section ${r} of ${p}`), h.innerHTML = `Section <span class="counter-value">${r}</span>/<span class="counter-value">${p}</span>`;
|
|
505
|
+
}
|
|
506
|
+
S && (S.hidden = !this.hasAttribute("fullscreen")), y && (y.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), b && (b.hidden = !l), v && (v.hidden = !d), this.toggleAttribute("has-header", l), this.toggleAttribute("has-footer", d), this.toggleAttribute("has-notes", f), this.toggleAttribute("notes-visible", c), this.toggleAttribute("has-chrome", l || d || c), this.updateFullscreenSurfaceFit();
|
|
547
507
|
}
|
|
548
508
|
handlePointerDown(e) {
|
|
549
509
|
this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
|
|
@@ -584,34 +544,12 @@ class R extends HTMLElement {
|
|
|
584
544
|
}
|
|
585
545
|
const t = this.shadowRoot.querySelector(".frame"), i = this.shadowRoot.querySelector(".present-controls"), s = this.shadowRoot.querySelector(".notes");
|
|
586
546
|
if (!t) return;
|
|
587
|
-
const
|
|
588
|
-
let
|
|
589
|
-
|
|
590
|
-
}
|
|
591
|
-
resolveLightboxImage(e, t) {
|
|
592
|
-
var s;
|
|
593
|
-
const i = e.find((r) => r instanceof HTMLImageElement);
|
|
594
|
-
if (i instanceof HTMLImageElement) return i;
|
|
595
|
-
for (const r of t) {
|
|
596
|
-
if (r instanceof HTMLImageElement) return r;
|
|
597
|
-
const o = (s = r.querySelector) == null ? void 0 : s.call(r, "img");
|
|
598
|
-
if (o instanceof HTMLImageElement) return o;
|
|
599
|
-
}
|
|
600
|
-
return null;
|
|
601
|
-
}
|
|
602
|
-
openLightbox(e, t) {
|
|
603
|
-
var r, o, n;
|
|
604
|
-
const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#lightboxDialog"), s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("#lightboxImage");
|
|
605
|
-
!i || !s || (s.src = e, s.alt = t, (n = i.open) == null || n.call(i), this.dispatchEvent(
|
|
606
|
-
new CustomEvent("lightbox-open", {
|
|
607
|
-
detail: { src: e, alt: t },
|
|
608
|
-
bubbles: !0,
|
|
609
|
-
composed: !0
|
|
610
|
-
})
|
|
611
|
-
));
|
|
547
|
+
const n = t.getBoundingClientRect(), o = getComputedStyle(t), l = parseFloat(o.paddingTop || "0") || 0, d = parseFloat(o.paddingBottom || "0") || 0, f = parseFloat(o.paddingLeft || "0") || 0, c = parseFloat(o.paddingRight || "0") || 0, b = parseFloat(o.rowGap || o.gap || "0") || 0, v = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, h = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, S = [v > 0, !0, h > 0].filter(Boolean).length, y = Math.max(0, S - 1), w = Math.max(0, n.width - f - c), u = Math.max(0, n.height - l - d - v - h - b * y), a = this.resolveRatioParts(), p = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
|
|
548
|
+
let m, r;
|
|
549
|
+
p ? (r = u, m = r * (a.width / a.height)) : (m = w, r = m * (a.height / a.width), r > u && (r = u, m = r * (a.width / a.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(m))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(r))}px`;
|
|
612
550
|
}
|
|
613
551
|
escapeHtml(e) {
|
|
614
552
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
615
553
|
}
|
|
616
554
|
}
|
|
617
|
-
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame",
|
|
555
|
+
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", C);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/* ================================================================================================== */
|
|
3
|
-
/* Don't edit directly • Generated on
|
|
3
|
+
/* Don't edit directly • Generated on Sat, 28 Feb 2026 04:44:42 GMT • muibook.com */
|
|
4
4
|
/* ================================================================================================== */
|
|
5
5
|
|
|
6
6
|
/* ================================================================================================== */
|