@muibook/components 14.0.2 → 15.0.1

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.
Files changed (6) hide show
  1. package/dist/esm/components/mui-slide-frame/index.js +301 -152
  2. package/dist/esm/css/mui-brand.css +1 -1
  3. package/dist/esm/css/mui-tokens.css +1 -1
  4. package/dist/esm/custom-elements.json +3340 -3323
  5. package/dist/types/components/mui-slide-frame/index.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/esm/components/mui-slide-frame/index.js CHANGED
@@ -4,10 +4,15 @@ 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
- class x extends HTMLElement {
7
+ import "../mui-select/index.js";
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.imageSlot = null, this.surfaceEl = null, this.pointerStartX = null, this.pointerStartY = null, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onSurfaceClick = (e) => this.handleSurfaceClick(e), this.onPointerDown = (e) => this.handlePointerDown(e), this.onPointerUp = (e) => this.handlePointerUp(e), this.onKeyDown = (e) => this.handleArrowNavigation(e), 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.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
+ const t = document.fullscreenElement === this;
12
+ if (e.key === "Escape" && this.hasAttribute("present") && !t) {
13
+ e.preventDefault(), this.resetPresentationState();
14
+ return;
15
+ }
11
16
  this.shouldHandleGlobalKeys(e) && (this.isEditableTarget(e.target) || this.handleArrowNavigation(e));
12
17
  }, this.attachShadow({ mode: "open" });
13
18
  }
@@ -24,22 +29,48 @@ class x extends HTMLElement {
24
29
  "radius",
25
30
  "title",
26
31
  "footer-text",
32
+ "hide-header",
33
+ "hide-footer",
27
34
  "hide-counter",
28
- "preview",
29
- "lightbox",
30
- "scroll"
35
+ "scroll",
36
+ "fullscreen"
31
37
  ];
32
38
  }
33
39
  connectedCallback() {
34
- 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);
40
+ 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);
35
41
  }
36
42
  disconnectedCallback() {
37
- var e, t, i, o, s, r, a, l, h, d, n, c;
38
- (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), (o = this.headerDescriptionSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.footerSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (r = this.footerAfterSlot) == null || r.removeEventListener("slotchange", this.onChromeSlotChange), (a = this.footerDescriptionSlot) == null || a.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.notesSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.imageSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.surfaceEl) == null || d.removeEventListener("click", this.onSurfaceClick), (n = this.surfaceEl) == null || n.removeEventListener("pointerdown", this.onPointerDown), (c = this.surfaceEl) == null || c.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown);
43
+ var e, t, i, s, a, r, l, h, p, m;
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), (a = this.footerSlot) == null || a.removeEventListener("slotchange", this.onChromeSlotChange), (r = this.footerAfterSlot) == null || r.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.footerDescriptionSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.notesSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), (p = this.surfaceEl) == null || p.removeEventListener("pointerdown", this.onPointerDown), (m = this.surfaceEl) == null || m.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);
39
45
  }
40
46
  attributeChangedCallback(e, t, i) {
41
47
  t !== i && (this.render(), this.syncSections(), this.syncChromeState());
42
48
  }
49
+ async enterFullscreen() {
50
+ if (document.fullscreenElement === this) return !0;
51
+ const e = this;
52
+ if (typeof e.requestFullscreen != "function") return !0;
53
+ try {
54
+ return await e.requestFullscreen(), !0;
55
+ } catch {
56
+ return this.dispatchEvent(new CustomEvent("fullscreen-error", { bubbles: !0, composed: !0 })), !0;
57
+ }
58
+ }
59
+ async exitFullscreen() {
60
+ if (document.fullscreenElement === this && typeof document.exitFullscreen == "function")
61
+ try {
62
+ await document.exitFullscreen();
63
+ } catch {
64
+ this.dispatchEvent(new CustomEvent("fullscreen-error", { bubbles: !0, composed: !0 }));
65
+ }
66
+ return !0;
67
+ }
68
+ async toggleFullscreen(e) {
69
+ return (typeof e == "boolean" ? e : !this.hasAttribute("fullscreen")) ? this.enterFullscreen() : this.exitFullscreen();
70
+ }
71
+ resetPresentationState() {
72
+ this.nativeFullscreenActive = !1, this.removeAttribute("present"), this.removeAttribute("fullscreen"), this.syncChromeState();
73
+ }
43
74
  getSections() {
44
75
  var t;
45
76
  return (((t = this.defaultSlot) == null ? void 0 : t.assignedElements({ flatten: !0 })) || []).filter((i) => !["header", "footer"].includes(i.getAttribute("slot") || ""));
@@ -78,10 +109,10 @@ class x extends HTMLElement {
78
109
  addSection(e) {
79
110
  const t = document.createElement("div");
80
111
  t.setAttribute("data-slide-section", ""), typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && t.appendChild(e), this.appendChild(t);
81
- const i = this.getSections(), o = Math.max(0, i.length - 1);
82
- this.setActiveSectionIndex(o), this.syncSections(), this.dispatchEvent(
112
+ const i = this.getSections(), s = Math.max(0, i.length - 1);
113
+ this.setActiveSectionIndex(s), this.syncSections(), this.dispatchEvent(
83
114
  new CustomEvent("section-add", {
84
- detail: { index: o, total: i.length },
115
+ detail: { index: s, total: i.length },
85
116
  bubbles: !0,
86
117
  composed: !0
87
118
  })
@@ -100,24 +131,42 @@ class x extends HTMLElement {
100
131
  resolveRatio() {
101
132
  const e = (this.getAttribute("ratio") || "16:9").trim();
102
133
  if (e === "custom") {
103
- const i = parseFloat(this.getAttribute("ratio-width") || "16"), o = parseFloat(this.getAttribute("ratio-height") || "9");
104
- return i > 0 && o > 0 ? `${i} / ${o}` : "16 / 9";
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";
105
136
  }
106
137
  const t = e.split(":");
107
138
  if (t.length === 2) {
108
- const i = parseFloat(t[0]), o = parseFloat(t[1]);
109
- if (i > 0 && o > 0) return `${i} / ${o}`;
139
+ const i = parseFloat(t[0]), s = parseFloat(t[1]);
140
+ if (i > 0 && s > 0) return `${i} / ${s}`;
110
141
  }
111
142
  return "16 / 9";
112
143
  }
144
+ resolveRatioParts() {
145
+ const e = (this.getAttribute("ratio") || "16:9").trim();
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(":");
151
+ if (t.length === 2) {
152
+ const i = parseFloat(t[0]), s = parseFloat(t[1]);
153
+ if (i > 0 && s > 0) return { width: i, height: s };
154
+ }
155
+ return { width: 16, height: 9 };
156
+ }
113
157
  syncSections() {
114
158
  if (!this.shadowRoot) return;
115
159
  const e = this.getSections(), t = this.getActiveSectionIndex(), i = this.hasAttribute("present") || e.length > 1;
116
- e.forEach((o, s) => {
117
- o.setAttribute("data-slide-section", ""), s === t ? (o.removeAttribute("slide-hidden"), o.setAttribute("slide-active", "")) : (o.removeAttribute("slide-active"), i ? o.setAttribute("slide-hidden", "") : o.removeAttribute("slide-hidden"));
118
- }), this.style.setProperty("--slide-frame-ratio", this.resolveRatio());
160
+ e.forEach((s, a) => {
161
+ s.setAttribute("data-slide-section", ""), a === t ? (s.removeAttribute("slide-hidden"), s.setAttribute("slide-active", "")) : (s.removeAttribute("slide-active"), i ? s.setAttribute("slide-hidden", "") : s.removeAttribute("slide-hidden"));
162
+ }), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
119
163
  }
120
164
  handleArrowNavigation(e) {
165
+ const t = document.fullscreenElement === this;
166
+ if (e.key === "Escape" && this.hasAttribute("present") && !t) {
167
+ e.preventDefault(), this.resetPresentationState();
168
+ return;
169
+ }
121
170
  if (!(this.getSections().length < 2) && !e.defaultPrevented) {
122
171
  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
123
172
  e.preventDefault(), this.nextSection();
@@ -136,9 +185,9 @@ class x extends HTMLElement {
136
185
  return !!(i && this.contains(i));
137
186
  }
138
187
  render() {
139
- var s, r, a, l, h, d, n, c, g, u, m, f, v, p, b, S, w, y;
188
+ var a, r, l, h, p, m, b, v, d, S, w, y, c, u, o, n, g, E;
140
189
  if (!this.shadowRoot) return;
141
- const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), o = this.escapeHtml(t);
190
+ const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), s = this.escapeHtml(t);
142
191
  this.shadowRoot.innerHTML = /*html*/
143
192
  `
144
193
  <style>
@@ -146,69 +195,138 @@ class x extends HTMLElement {
146
195
  display: block;
147
196
  width: 100%;
148
197
  --slide-frame-ratio: 16 / 9;
149
- --slide-frame-padding-active: var(--slide-frame-padding-medium);
150
198
  --slide-frame-leading-offset: var(--space-025);
151
- --slide-frame-border-active: var(--border-thin);
152
- --slide-frame-border-color-active: var(--slide-frame-border-color);
153
- --slide-frame-background-active: var(--slide-frame-background);
154
- --slide-frame-shadow-active: var(--slide-frame-shadow);
155
- --slide-frame-radius-active: var(--slide-frame-radius);
156
- }
157
- :host([variant="plain"]) {
158
- --slide-frame-border-active: none;
159
- --slide-frame-border-color-active: transparent;
160
- --slide-frame-background-active: transparent;
161
- --slide-frame-shadow-active: none;
162
- }
163
- :host([variant="ghost"]) {
164
- --slide-frame-border-active: none;
165
- --slide-frame-border-color-active: transparent;
166
- --slide-frame-background-active: var(--slide-frame-background-ghost);
167
- --slide-frame-shadow-active: none;
168
- }
169
- :host([radius="none"]) { --slide-frame-radius-active: 0; }
170
- :host([radius="small"]) { --slide-frame-radius-active: var(--slide-frame-radius-small); }
171
- :host([radius="medium"]) { --slide-frame-radius-active: var(--slide-frame-radius-medium); }
172
- :host([radius="large"]) { --slide-frame-radius-active: var(--slide-frame-radius-large); }
199
+ --slide-frame-surface-padding-active: var(--slide-frame-padding-medium);
200
+ --slide-frame-header-padding-inline: var(--slide-frame-surface-padding-active);
201
+ --slide-frame-header-padding-block: var(--slide-frame-surface-padding-active);
202
+ --slide-frame-header-padding-top: var(--slide-frame-header-padding-block);
203
+ --slide-frame-header-padding-bottom: 0;
204
+ --slide-frame-footer-padding-inline: var(--slide-frame-surface-padding-active);
205
+ --slide-frame-footer-padding-block: var(--slide-frame-surface-padding-active);
206
+ --slide-frame-footer-padding-top: 0;
207
+ --slide-frame-footer-padding-bottom: var(--space-200);
208
+ }
209
+ :host([padding="none"]) { --slide-frame-surface-padding-active: 0; }
210
+ :host([padding="small"]) { --slide-frame-surface-padding-active: var(--slide-frame-padding-small); }
211
+ :host([padding="medium"]),
212
+ :host(:not([padding])) { --slide-frame-surface-padding-active: var(--slide-frame-padding-medium); }
213
+ :host([padding="large"]) { --slide-frame-surface-padding-active: var(--slide-frame-padding-large); }
214
+ :host([fullscreen]) {
215
+ position: fixed;
216
+ inset: 0;
217
+ width: 100vw;
218
+ height: 100dvh;
219
+ z-index: var(--slide-frame-fullscreen-z-index, 1000);
220
+ }
221
+ :host([padding="none"]) .surface { padding: 0; }
222
+ :host([padding="small"]) .surface { padding: var(--slide-frame-padding-small); }
223
+ :host([padding="large"]) .surface { padding: var(--slide-frame-padding-large); }
224
+ :host([padding="medium"]) .surface,
225
+ :host(:not([padding])) .surface { padding: var(--slide-frame-padding-medium); }
226
+
227
+ :host([variant="plain"]) .stage {
228
+ border: none;
229
+ border-color: transparent;
230
+ background: transparent;
231
+ box-shadow: none;
232
+ }
233
+ :host([variant="ghost"]) .stage {
234
+ border: none;
235
+ border-color: transparent;
236
+ background: var(--slide-frame-background-ghost);
237
+ box-shadow: none;
238
+ }
239
+ :host([radius="none"]) .stage { border-radius: 0; }
240
+ :host([radius="small"]) .stage { border-radius: var(--slide-frame-radius-small); }
241
+ :host([radius="medium"]) .stage { border-radius: var(--slide-frame-radius-medium); }
242
+ :host([radius="large"]) .stage { border-radius: var(--slide-frame-radius-large); }
173
243
 
174
244
  .frame {
175
245
  display: grid;
176
246
  width: 100%;
247
+ height: 100%;
177
248
  gap: 0;
178
249
  padding: var(--space-400);
179
- background: var(--surface-recessed-200);
250
+ background: var(--surface-recessed-100);
180
251
  box-sizing: border-box;
181
252
  }
253
+ :host([fullscreen]) .frame {
254
+ width: 100%;
255
+ min-height: 100%;
256
+ grid-template-rows: auto minmax(0, 1fr) auto;
257
+ overflow-y: auto;
258
+ overflow-x: hidden;
259
+ padding: 0;
260
+ }
261
+ :host(:fullscreen) .frame {
262
+ padding: 0;
263
+ }
182
264
  :host([has-chrome]) .frame {
183
265
  gap: var(--slide-frame-gap, var(--space-300));
184
266
  }
185
267
 
186
- .surface {
268
+ .stage {
187
269
  position: relative;
188
270
  width: 100%;
271
+ height: 100%;
189
272
  aspect-ratio: var(--slide-frame-ratio);
190
- border: var(--slide-frame-border-active);
191
- border-color: var(--slide-frame-border-color-active);
192
- border-radius: var(--slide-frame-radius-active);
193
- background: var(--slide-frame-background-active);
194
- box-shadow: var(--slide-frame-shadow-active);
273
+ border: var(--border-thin);
274
+ border-color: var(--slide-frame-border-color);
275
+ border-radius: var(--slide-frame-radius);
276
+ background: var(--slide-frame-background);
277
+ box-shadow: var(--slide-frame-shadow);
278
+ box-sizing: border-box;
279
+ overflow: hidden;
280
+ display: grid;
281
+ grid-template-rows: auto minmax(0, 1fr) auto;
282
+ }
283
+ :host([fullscreen]) .stage,
284
+ :host([present]) .stage {
285
+ justify-self: center;
286
+ align-self: center;
287
+ height: 100%;
288
+ max-height: 100%;
289
+ width: auto;
290
+ max-width: 100%;
291
+ }
292
+ :host([fullscreen]) .stage,
293
+ :host(:fullscreen) .stage {
294
+ border: none;
295
+ border-radius: 0;
296
+ }
297
+ .surface {
298
+ position: relative;
299
+ width: 100%;
300
+ min-width: 0;
301
+ min-height: 0;
195
302
  box-sizing: border-box;
196
- padding: var(--slide-frame-padding-active);
197
303
  overflow: hidden;
198
304
  display: block;
199
305
  }
200
306
  :host([scroll]) .surface {
201
307
  overflow: auto;
202
308
  }
203
- :host([preview]) .surface {
204
- border-color: var(--slide-frame-preview-border-color, var(--text-color-warning));
205
- box-shadow:
206
- var(--slide-frame-shadow-active),
207
- 0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
309
+ :host([fullscreen]) .surface,
310
+ :host([present]) .surface {
311
+ overflow: auto !important;
208
312
  }
209
313
  .header,
210
314
  .footer {
211
315
  display: block;
316
+ width: 100%;
317
+ box-sizing: border-box;
318
+ }
319
+ .header {
320
+ padding:
321
+ var(--slide-frame-header-padding-top)
322
+ var(--slide-frame-header-padding-inline)
323
+ var(--slide-frame-header-padding-bottom);
324
+ }
325
+ .footer {
326
+ padding:
327
+ var(--slide-frame-footer-padding-top)
328
+ var(--slide-frame-footer-padding-inline)
329
+ var(--slide-frame-footer-padding-bottom);
212
330
  }
213
331
  .leading {
214
332
  margin-inline: var(--slide-frame-leading-offset);
@@ -249,6 +367,15 @@ class x extends HTMLElement {
249
367
  .footer-counter {
250
368
  white-space: nowrap;
251
369
  }
370
+ .footer-counter .counter-value {
371
+ display: inline-block;
372
+ min-width: calc(var(--slide-frame-counter-digits, 1) * 1ch);
373
+ text-align: right;
374
+ }
375
+ .footer-counter::part(text) {
376
+ font-variant-numeric: tabular-nums;
377
+ font-feature-settings: "tnum" 1;
378
+ }
252
379
  .notes {
253
380
  display: none;
254
381
  }
@@ -259,27 +386,18 @@ class x extends HTMLElement {
259
386
  border-radius: var(--radius-200);
260
387
 
261
388
  }
262
- :host([present]) .surface {
263
- background: var(--slide-frame-background-present, var(--slide-frame-background-active));
389
+ :host([present]) .stage {
390
+ background: var(--slide-frame-background-present, var(--slide-frame-background));
264
391
  }
265
- .lightbox-image {
266
- display: block;
267
- width: 100%;
268
- max-height: 75vh;
269
- height: auto;
270
- object-fit: contain;
271
- }
272
-
273
392
  .present-controls {
274
393
  display: grid;
275
- padding-bottom: var(--space-100);
276
- border-bottom: var(--border-thin);
277
394
  }
278
- :host([present]) .present-controls {
279
- display: none;
395
+ :host([fullscreen]) .present-controls,
396
+ :host(:fullscreen) .present-controls {
397
+ display: none !important;
280
398
  }
281
- :host(:not([present])) #slideFrameTogglePresentBtn {
282
- /* optional: style to indicate inactive state */
399
+ :host(:not([fullscreen])) #slideFrameExitPresentBtn {
400
+ display: none !important;
283
401
  }
284
402
 
285
403
  ::slotted([data-slide-section][slide-hidden]) {
@@ -291,9 +409,10 @@ class x extends HTMLElement {
291
409
  <mui-h-stack space="var(--space-050)" aligny="center">
292
410
  <mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
293
411
  <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
294
- <mui-button id="slideFrameTogglePresentBtn" variant="tertiary" size="x-small">Present Mode</mui-button>
412
+ <mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
295
413
  <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
296
414
  <mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
415
+ <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
297
416
  </mui-h-stack>
298
417
  <mui-h-stack space="var(--space-050)" aligny="center">
299
418
  <mui-button id="slideFramePrevSectionBtn" variant="tertiary" size="x-small"><mui-icon-left-chevron slot="before"></mui-icon-left-chevron>Previous</mui-button>
@@ -301,77 +420,94 @@ class x extends HTMLElement {
301
420
  <mui-button id="slideFrameNextSectionBtn" variant="tertiary" size="x-small">Next<mui-icon-right-chevron slot="after"></mui-icon-right-chevron></mui-button>
302
421
  </mui-h-stack>
303
422
  </mui-grid>
304
- <div class="header" id="headerRegion">
305
- <mui-v-stack class="leading leading_top" space="var(--space-100)" alignx="stretch" aligny="center">
306
- <mui-h-stack class="header-main" alignx="space-between" aligny="center" space="var(--space-300)">
307
- <div class="header-leading">
308
- <mui-heading class="header-title" size="4" level="4" id="headerTitle"${i ? "" : " hidden"}>${i}</mui-heading>
309
- <slot name="header"></slot>
310
- </div>
311
- <mui-h-stack class="header-after" alignx="end" aligny="center" space="var(--space-200)">
312
- <slot name="header-after"></slot>
423
+ <div class="stage">
424
+ <div class="header" id="headerRegion">
425
+ <mui-v-stack class="leading leading_top" space="var(--space-100)" alignx="stretch" aligny="center">
426
+ <mui-h-stack class="header-main" alignx="space-between" aligny="center" space="var(--space-300)">
427
+ <div class="header-leading">
428
+ <mui-heading class="header-title" size="4" level="4" id="headerTitle"${i ? "" : " hidden"}>${i}</mui-heading>
429
+ <slot name="header"></slot>
430
+ </div>
431
+ <mui-h-stack class="header-after" alignx="end" aligny="center" space="var(--space-200)">
432
+ <slot name="header-after"></slot>
433
+ </mui-h-stack>
313
434
  </mui-h-stack>
314
- </mui-h-stack>
315
- <mui-h-stack class="header-description" alignx="start" aligny="start" space="var(--space-200)">
316
- <slot name="header-description"></slot>
317
- </mui-h-stack>
318
- </mui-v-stack>
319
- </div>
320
- <div class="surface" tabindex="0" role="region" aria-label="Slide frame">
321
- <slot name="image"></slot>
322
- <slot></slot>
323
- </div>
324
- <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
325
- <div class="footer" id="footerRegion">
326
- <mui-v-stack class="leading leading_bottom" space="var(--space-400)">
327
- <mui-h-stack class="footer-main" alignx="space-between" aligny="center" space="var(--space-300)">
328
- <div class="footer-leading">
329
- <mui-body class="footer-copy" size="small" id="footerText"${o ? "" : " hidden"}>${o}</mui-body>
330
- <slot name="footer"></slot>
331
- </div>
332
- <mui-h-stack class="footer-after" alignx="end" aligny="center" space="var(--space-200)">
333
- <mui-body class="footer-counter" id="footerCounter" size="x-small" variant="optional" hidden>Section 1/1</mui-body>
334
- <slot name="footer-after"></slot>
435
+ <mui-h-stack class="header-description" alignx="start" aligny="start" space="var(--space-200)">
436
+ <slot name="header-description"></slot>
335
437
  </mui-h-stack>
336
- </mui-h-stack>
337
- </mui-v-stack>
438
+ </mui-v-stack>
439
+ </div>
440
+ <div class="surface" tabindex="0" role="region" aria-label="Slide frame">
441
+ <slot name="image"></slot>
442
+ <slot></slot>
443
+ </div>
444
+ <div class="footer" id="footerRegion">
445
+ <mui-v-stack class="leading leading_bottom" space="var(--space-400)">
446
+ <mui-h-stack class="footer-main" alignx="space-between" aligny="center" space="var(--space-300)">
447
+ <div class="footer-leading">
448
+ <mui-body class="footer-copy" size="small" id="footerText"${s ? "" : " hidden"}>${s}</mui-body>
449
+ <slot name="footer"></slot>
450
+ </div>
451
+ <mui-h-stack class="footer-after" alignx="end" aligny="center" space="var(--space-200)">
452
+ <mui-select
453
+ id="slideFrameRatioSelect"
454
+ size="x-small"
455
+ style="width: 7rem; margin-right: var(--space-025)"
456
+ options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"1:1","value":"1:1"}]'
457
+ value="${this.getAttribute("ratio") || "16:9"}"
458
+ aria-label="Slide ratio">
459
+ </mui-select>
460
+ <mui-button id="slideFrameExitPresentBtn" size="x-small" variant="tertiary" hidden style="margin-right: var(--space-025)">Exit Fullscreen</mui-button>
461
+ <mui-body class="footer-counter" id="footerCounter" size="x-small" variant="optional" hidden>Section 1/1</mui-body>
462
+ <slot name="footer-after"></slot>
463
+ </mui-h-stack>
464
+ </mui-h-stack>
465
+ </mui-v-stack>
466
+ </div>
338
467
  </div>
468
+ <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
339
469
  </div>
340
- <mui-dialog id="lightboxDialog" width="min(94vw, 1200px)" content-padding="none">
341
- <mui-heading slot="title" size="5" level="3">Image Preview</mui-heading>
342
- <img id="lightboxImage" class="lightbox-image" alt="Slide image preview" />
343
- </mui-dialog>
344
- `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (s = this.defaultSlot) == null || s.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.surfaceEl = this.shadowRoot.querySelector(".surface"), (r = this.headerSlot) == null || r.addEventListener("slotchange", this.onChromeSlotChange), (a = this.headerAfterSlot) == null || a.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerDescriptionSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (h = this.footerSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (d = this.footerAfterSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (n = this.footerDescriptionSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (c = this.notesSlot) == null || c.addEventListener("slotchange", this.onChromeSlotChange), (g = this.surfaceEl) == null || g.addEventListener("click", this.onSurfaceClick), (u = this.surfaceEl) == null || u.addEventListener("pointerdown", this.onPointerDown), (m = this.surfaceEl) == null || m.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (f = this.shadowRoot.querySelector("#lightboxDialog")) == null || f.addEventListener("mui-dialog-close", () => {
345
- this.dispatchEvent(new CustomEvent("lightbox-close", { bubbles: !0, composed: !0 }));
346
- }), (v = this.shadowRoot.querySelector("#notesActionBtn")) == null || v.addEventListener("click", () => {
470
+ `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (a = this.defaultSlot) == null || a.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"), (r = this.headerSlot) == null || r.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerAfterSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (m = this.footerAfterSlot) == null || m.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerDescriptionSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (v = this.notesSlot) == null || v.addEventListener("slotchange", this.onChromeSlotChange), (d = this.surfaceEl) == null || d.addEventListener("pointerdown", this.onPointerDown), (S = this.surfaceEl) == null || S.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (w = this.shadowRoot.querySelector("#notesActionBtn")) == null || w.addEventListener("click", () => {
347
471
  this.toggleNotes();
348
- }), (p = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || p.addEventListener("click", () => {
472
+ }), (y = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || y.addEventListener("click", () => {
349
473
  this.addSection(`Section ${(this.getSections().length + 1).toString()}: New`);
350
- }), (b = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || b.addEventListener("click", () => {
474
+ }), (c = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || c.addEventListener("click", () => {
351
475
  this.prevSection();
352
- }), (S = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || S.addEventListener("click", () => {
476
+ }), (u = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || u.addEventListener("click", () => {
353
477
  this.nextSection();
354
- }), (w = this.shadowRoot.querySelector("#slideFrameTogglePresentBtn")) == null || w.addEventListener("click", () => {
355
- this.toggleAttribute("present"), this.syncChromeState();
356
- }), (y = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || y.addEventListener("click", () => {
478
+ }), (o = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || o.addEventListener("click", () => {
479
+ if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
480
+ this.resetPresentationState(), this.exitFullscreen();
481
+ return;
482
+ }
483
+ this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((f) => {
484
+ f && this.syncChromeState();
485
+ });
486
+ }), (n = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || n.addEventListener("click", () => {
487
+ this.resetPresentationState(), this.exitFullscreen();
488
+ }), (g = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || g.addEventListener("click", () => {
357
489
  this.toggleNotes();
358
- });
490
+ }), (E = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || E.addEventListener("change", (A) => {
491
+ var x;
492
+ const f = A.currentTarget, F = (f == null ? void 0 : f.value) || ((x = f == null ? void 0 : f.getAttribute) == null ? void 0 : x.call(f, "value")) || "16:9";
493
+ this.setAttribute("ratio", F);
494
+ }), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
359
495
  }
360
496
  syncChromeState() {
361
497
  if (!this.shadowRoot) return;
362
- const e = (u) => ((u == null ? void 0 : u.assignedNodes({ flatten: !0 })) || []).some(
363
- (m) => m.nodeType === Node.ELEMENT_NODE || (m.textContent || "").trim().length > 0
364
- ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), o = !this.hasAttribute("hide-counter") && this.getSections().length > 0, s = t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot), r = i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || o, a = e(this.notesSlot), l = this.hasAttribute("notes-open"), h = this.shadowRoot.querySelector("#headerRegion"), d = this.shadowRoot.querySelector("#footerRegion"), n = this.shadowRoot.querySelector("#footerCounter"), c = Math.max(this.getSections().length, 1), g = this.getActiveSectionIndex() + 1;
365
- n && (n.hidden = !o, n.textContent = `Section ${Math.min(g, c)}/${c}`), h && (h.hidden = !s), d && (d.hidden = !r), this.toggleAttribute("has-header", s), this.toggleAttribute("has-footer", r), this.toggleAttribute("has-notes", a), this.toggleAttribute("notes-visible", l), this.toggleAttribute("has-chrome", s || r || l);
366
- }
367
- handleSurfaceClick(e) {
368
- if (!this.hasAttribute("lightbox") || !this.imageSlot) return;
369
- const t = this.imageSlot.assignedElements({ flatten: !0 });
370
- if (t.length === 0) return;
371
- const i = e.composedPath();
372
- if (!t.some((r) => i.includes(r))) return;
373
- const s = this.resolveLightboxImage(i, t);
374
- !s || !s.src || this.openLightbox(s.src, s.alt || "Slide image preview");
498
+ const e = (o) => ((o == null ? void 0 : o.assignedNodes({ flatten: !0 })) || []).some(
499
+ (n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent || "").trim().length > 0
500
+ ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"), a = this.hasAttribute("hide-footer"), r = !this.hasAttribute("hide-counter") && this.getSections().length > 0, l = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !a && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || r || this.hasAttribute("present") || this.hasAttribute("fullscreen")), p = e(this.notesSlot), m = this.hasAttribute("notes-open"), b = this.shadowRoot.querySelector("#headerRegion"), v = this.shadowRoot.querySelector("#footerRegion"), d = this.shadowRoot.querySelector("#footerCounter"), S = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), w = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), y = this.shadowRoot.querySelector(".present-controls"), c = Math.max(this.getSections().length, 1), u = this.getActiveSectionIndex() + 1;
501
+ if (y) {
502
+ const o = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
503
+ y.hidden = o;
504
+ }
505
+ if (d) {
506
+ d.hidden = !r;
507
+ const o = Math.min(u, c), n = String(c).length;
508
+ d.style.setProperty("--slide-frame-counter-digits", String(n)), d.setAttribute("aria-label", `Section ${o} of ${c}`), d.innerHTML = `Section <span class="counter-value">${o}</span>/<span class="counter-value">${c}</span>`;
509
+ }
510
+ S && (S.hidden = !this.hasAttribute("fullscreen")), w && (w.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), b && (b.hidden = !l), v && (v.hidden = !h), this.toggleAttribute("has-header", l), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", p), this.toggleAttribute("notes-visible", m), this.toggleAttribute("has-chrome", l || h || m), this.updateFullscreenSurfaceFit();
375
511
  }
376
512
  handlePointerDown(e) {
377
513
  this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
@@ -381,30 +517,43 @@ class x extends HTMLElement {
381
517
  const t = e.clientX - this.pointerStartX, i = e.clientY - this.pointerStartY;
382
518
  this.pointerStartX = null, this.pointerStartY = null, !(Math.abs(t) < 40 || Math.abs(t) <= Math.abs(i)) && (t < 0 ? this.nextSection() : this.prevSection());
383
519
  }
384
- resolveLightboxImage(e, t) {
385
- var o;
386
- const i = e.find((s) => s instanceof HTMLImageElement);
387
- if (i instanceof HTMLImageElement) return i;
388
- for (const s of t) {
389
- if (s instanceof HTMLImageElement) return s;
390
- const r = (o = s.querySelector) == null ? void 0 : o.call(s, "img");
391
- if (r instanceof HTMLImageElement) return r;
392
- }
393
- return null;
394
- }
395
- openLightbox(e, t) {
396
- var s, r, a;
397
- const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("#lightboxDialog"), o = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#lightboxImage");
398
- !i || !o || (o.src = e, o.alt = t, (a = i.open) == null || a.call(i), this.dispatchEvent(
399
- new CustomEvent("lightbox-open", {
400
- detail: { src: e, alt: t },
520
+ handleFullscreenChange() {
521
+ const e = document.fullscreenElement === this, t = this.hasAttribute("fullscreen");
522
+ if (e)
523
+ this.nativeFullscreenActive = !0, this.toggleAttribute("fullscreen", !0), this.toggleAttribute("present", !0);
524
+ else if (this.nativeFullscreenActive || t)
525
+ this.resetPresentationState();
526
+ else
527
+ return;
528
+ this.syncChromeState(), this.updateFullscreenSurfaceFit(), this.dispatchEvent(
529
+ new CustomEvent("fullscreen-change", {
530
+ detail: { active: e },
401
531
  bubbles: !0,
402
532
  composed: !0
403
533
  })
404
- ));
534
+ );
535
+ }
536
+ handleFullscreenError() {
537
+ if (this.nativeFullscreenActive = !1, this.hasAttribute("fullscreen")) {
538
+ this.resetPresentationState(), this.dispatchEvent(new CustomEvent("fullscreen-error", { bubbles: !0, composed: !0 }));
539
+ return;
540
+ }
541
+ this.syncChromeState(), this.dispatchEvent(new CustomEvent("fullscreen-error", { bubbles: !0, composed: !0 }));
542
+ }
543
+ updateFullscreenSurfaceFit() {
544
+ if (!this.shadowRoot || !this.stageEl) return;
545
+ if (!(this.hasAttribute("fullscreen") || this.hasAttribute("present"))) {
546
+ this.stageEl.style.width = "", this.stageEl.style.height = "";
547
+ return;
548
+ }
549
+ const t = this.shadowRoot.querySelector(".frame"), i = this.shadowRoot.querySelector(".present-controls"), s = this.shadowRoot.querySelector(".notes");
550
+ if (!t) return;
551
+ const a = t.getBoundingClientRect(), r = getComputedStyle(t), l = parseFloat(r.paddingTop || "0") || 0, h = parseFloat(r.paddingBottom || "0") || 0, p = parseFloat(r.paddingLeft || "0") || 0, m = parseFloat(r.paddingRight || "0") || 0, b = parseFloat(r.rowGap || r.gap || "0") || 0, v = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, d = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, S = [v > 0, !0, d > 0].filter(Boolean).length, w = Math.max(0, S - 1), y = Math.max(0, a.width - p - m), c = Math.max(0, a.height - l - h - v - d - b * w), u = this.resolveRatioParts(), o = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
552
+ let n, g;
553
+ o ? (g = c, n = g * (u.width / u.height)) : (n = y, g = n * (u.height / u.width), g > c && (g = c, n = g * (u.width / u.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(n))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(g))}px`;
405
554
  }
406
555
  escapeHtml(e) {
407
556
  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
408
557
  }
409
558
  }
410
- customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", x);
559
+ customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", C);