@muibook/components 15.0.1 → 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 +51 -55
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +3063 -3071
- 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);
|
|
@@ -7,7 +7,7 @@ import "../mui-icons/warning/index.js";
|
|
|
7
7
|
import "../mui-select/index.js";
|
|
8
8
|
class C extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
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.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) => {
|
|
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) => {
|
|
11
11
|
const t = document.fullscreenElement === this;
|
|
12
12
|
if (e.key === "Escape" && this.hasAttribute("present") && !t) {
|
|
13
13
|
e.preventDefault(), this.resetPresentationState();
|
|
@@ -19,8 +19,6 @@ class C extends HTMLElement {
|
|
|
19
19
|
static get observedAttributes() {
|
|
20
20
|
return [
|
|
21
21
|
"ratio",
|
|
22
|
-
"ratio-width",
|
|
23
|
-
"ratio-height",
|
|
24
22
|
"present",
|
|
25
23
|
"active-section",
|
|
26
24
|
"padding",
|
|
@@ -32,6 +30,7 @@ class C extends HTMLElement {
|
|
|
32
30
|
"hide-header",
|
|
33
31
|
"hide-footer",
|
|
34
32
|
"hide-counter",
|
|
33
|
+
"allow-add-section",
|
|
35
34
|
"scroll",
|
|
36
35
|
"fullscreen"
|
|
37
36
|
];
|
|
@@ -40,8 +39,8 @@ class C extends HTMLElement {
|
|
|
40
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);
|
|
41
40
|
}
|
|
42
41
|
disconnectedCallback() {
|
|
43
|
-
var e, t, i, s,
|
|
44
|
-
(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);
|
|
45
44
|
}
|
|
46
45
|
attributeChangedCallback(e, t, i) {
|
|
47
46
|
t !== i && (this.render(), this.syncSections(), this.syncChromeState());
|
|
@@ -80,7 +79,7 @@ class C extends HTMLElement {
|
|
|
80
79
|
return !Number.isFinite(t) || e.length === 0 ? 0 : Math.max(0, Math.min(t, e.length - 1));
|
|
81
80
|
}
|
|
82
81
|
setActiveSectionIndex(e) {
|
|
83
|
-
this.setAttribute("active-section", String(e));
|
|
82
|
+
this.activeSectionEl = null, this.setAttribute("active-section", String(e));
|
|
84
83
|
}
|
|
85
84
|
nextSection() {
|
|
86
85
|
const e = this.getSections();
|
|
@@ -107,8 +106,12 @@ class C extends HTMLElement {
|
|
|
107
106
|
);
|
|
108
107
|
}
|
|
109
108
|
addSection(e) {
|
|
110
|
-
const t = document.createElement("
|
|
111
|
-
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);
|
|
112
115
|
const i = this.getSections(), s = Math.max(0, i.length - 1);
|
|
113
116
|
this.setActiveSectionIndex(s), this.syncSections(), this.dispatchEvent(
|
|
114
117
|
new CustomEvent("section-add", {
|
|
@@ -129,12 +132,7 @@ class C extends HTMLElement {
|
|
|
129
132
|
);
|
|
130
133
|
}
|
|
131
134
|
resolveRatio() {
|
|
132
|
-
const
|
|
133
|
-
if (e === "custom") {
|
|
134
|
-
const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
|
|
135
|
-
return i > 0 && s > 0 ? `${i} / ${s}` : "16 / 9";
|
|
136
|
-
}
|
|
137
|
-
const t = e.split(":");
|
|
135
|
+
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
138
136
|
if (t.length === 2) {
|
|
139
137
|
const i = parseFloat(t[0]), s = parseFloat(t[1]);
|
|
140
138
|
if (i > 0 && s > 0) return `${i} / ${s}`;
|
|
@@ -142,12 +140,7 @@ class C extends HTMLElement {
|
|
|
142
140
|
return "16 / 9";
|
|
143
141
|
}
|
|
144
142
|
resolveRatioParts() {
|
|
145
|
-
const
|
|
146
|
-
if (e === "custom") {
|
|
147
|
-
const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
|
|
148
|
-
return i > 0 && s > 0 ? { width: i, height: s } : { width: 16, height: 9 };
|
|
149
|
-
}
|
|
150
|
-
const t = e.split(":");
|
|
143
|
+
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
151
144
|
if (t.length === 2) {
|
|
152
145
|
const i = parseFloat(t[0]), s = parseFloat(t[1]);
|
|
153
146
|
if (i > 0 && s > 0) return { width: i, height: s };
|
|
@@ -156,10 +149,13 @@ class C extends HTMLElement {
|
|
|
156
149
|
}
|
|
157
150
|
syncSections() {
|
|
158
151
|
if (!this.shadowRoot) return;
|
|
159
|
-
const e = this.getSections()
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
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();
|
|
163
159
|
}
|
|
164
160
|
handleArrowNavigation(e) {
|
|
165
161
|
const t = document.fullscreenElement === this;
|
|
@@ -185,7 +181,7 @@ class C extends HTMLElement {
|
|
|
185
181
|
return !!(i && this.contains(i));
|
|
186
182
|
}
|
|
187
183
|
render() {
|
|
188
|
-
var
|
|
184
|
+
var n, o, l, d, f, c, b, v, h, S, y, w, u, a, p, m, r, E;
|
|
189
185
|
if (!this.shadowRoot) return;
|
|
190
186
|
const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), s = this.escapeHtml(t);
|
|
191
187
|
this.shadowRoot.innerHTML = /*html*/
|
|
@@ -204,7 +200,7 @@ class C extends HTMLElement {
|
|
|
204
200
|
--slide-frame-footer-padding-inline: var(--slide-frame-surface-padding-active);
|
|
205
201
|
--slide-frame-footer-padding-block: var(--slide-frame-surface-padding-active);
|
|
206
202
|
--slide-frame-footer-padding-top: 0;
|
|
207
|
-
--slide-frame-footer-padding-bottom: var(--space-
|
|
203
|
+
--slide-frame-footer-padding-bottom: var(--space-400);
|
|
208
204
|
}
|
|
209
205
|
:host([padding="none"]) { --slide-frame-surface-padding-active: 0; }
|
|
210
206
|
:host([padding="small"]) { --slide-frame-surface-padding-active: var(--slide-frame-padding-small); }
|
|
@@ -408,15 +404,11 @@ class C extends HTMLElement {
|
|
|
408
404
|
<mui-grid col="1fr auto" class="present-controls" aligny="center">
|
|
409
405
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
410
406
|
<mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
|
|
411
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
412
407
|
<mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
|
|
413
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
414
408
|
<mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
|
|
415
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
416
409
|
</mui-h-stack>
|
|
417
410
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
418
411
|
<mui-button id="slideFramePrevSectionBtn" variant="tertiary" size="x-small"><mui-icon-left-chevron slot="before"></mui-icon-left-chevron>Previous</mui-button>
|
|
419
|
-
<mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
|
|
420
412
|
<mui-button id="slideFrameNextSectionBtn" variant="tertiary" size="x-small">Next<mui-icon-right-chevron slot="after"></mui-icon-right-chevron></mui-button>
|
|
421
413
|
</mui-h-stack>
|
|
422
414
|
</mui-grid>
|
|
@@ -467,47 +459,51 @@ class C extends HTMLElement {
|
|
|
467
459
|
</div>
|
|
468
460
|
<div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
|
|
469
461
|
</div>
|
|
470
|
-
`, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (
|
|
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", () => {
|
|
471
463
|
this.toggleNotes();
|
|
472
|
-
}), (
|
|
473
|
-
this.addSection(`Section ${(this.getSections().length + 1).toString()}
|
|
474
|
-
}), (
|
|
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", () => {
|
|
475
467
|
this.prevSection();
|
|
476
|
-
}), (
|
|
468
|
+
}), (a = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || a.addEventListener("click", () => {
|
|
477
469
|
this.nextSection();
|
|
478
|
-
}), (
|
|
470
|
+
}), (p = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || p.addEventListener("click", () => {
|
|
479
471
|
if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
|
|
480
472
|
this.resetPresentationState(), this.exitFullscreen();
|
|
481
473
|
return;
|
|
482
474
|
}
|
|
483
|
-
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((
|
|
484
|
-
|
|
475
|
+
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((g) => {
|
|
476
|
+
g && this.syncChromeState();
|
|
485
477
|
});
|
|
486
|
-
}), (
|
|
478
|
+
}), (m = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || m.addEventListener("click", () => {
|
|
487
479
|
this.resetPresentationState(), this.exitFullscreen();
|
|
488
|
-
}), (
|
|
480
|
+
}), (r = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || r.addEventListener("click", () => {
|
|
489
481
|
this.toggleNotes();
|
|
490
482
|
}), (E = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || E.addEventListener("change", (A) => {
|
|
491
483
|
var x;
|
|
492
|
-
const
|
|
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";
|
|
493
485
|
this.setAttribute("ratio", F);
|
|
494
486
|
}), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
|
|
495
487
|
}
|
|
496
488
|
syncChromeState() {
|
|
497
489
|
if (!this.shadowRoot) return;
|
|
498
|
-
const e = (
|
|
499
|
-
(
|
|
500
|
-
), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"),
|
|
501
|
-
if (
|
|
502
|
-
const
|
|
503
|
-
|
|
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;
|
|
496
|
+
}
|
|
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");
|
|
504
500
|
}
|
|
505
|
-
if (
|
|
506
|
-
|
|
507
|
-
const
|
|
508
|
-
|
|
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>`;
|
|
509
505
|
}
|
|
510
|
-
S && (S.hidden = !this.hasAttribute("fullscreen")),
|
|
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();
|
|
511
507
|
}
|
|
512
508
|
handlePointerDown(e) {
|
|
513
509
|
this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
|
|
@@ -548,9 +544,9 @@ class C extends HTMLElement {
|
|
|
548
544
|
}
|
|
549
545
|
const t = this.shadowRoot.querySelector(".frame"), i = this.shadowRoot.querySelector(".present-controls"), s = this.shadowRoot.querySelector(".notes");
|
|
550
546
|
if (!t) return;
|
|
551
|
-
const
|
|
552
|
-
let
|
|
553
|
-
|
|
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`;
|
|
554
550
|
}
|
|
555
551
|
escapeHtml(e) {
|
|
556
552
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
@@ -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
|
/* ================================================================================================== */
|