@orangelogic/design-system 2.116.0 → 2.118.0

package/library/components/audio.js

@@ -1,27 +1,30 @@
 import { r as f, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
 import { c as v } from "../chunks/component.styles.CRO4Odto.js";
-import { U as u, g, f as x, D as w } from "../chunks/time.BSmpFe2G.js";
-import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as b } from "../chunks/i18n.CH-wak_P.js";
-import { w as m } from "../chunks/watch.CThbualB.js";
-import { e as S, b as P } from "../chunks/waveform.1U9U_0rd.js";
-import { i as $, b as z, x as h } from "../chunks/lit-element.jLBm65_O.js";
-import { n } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { r as s } from "../chunks/state.CSDxrqLd.js";
-import { e as E } from "../chunks/query.BBf1UFkC.js";
-import { e as C } from "../chunks/class-map.BiVq-cVR.js";
+import { U as m, g as w, f as g, D as x } from "../chunks/time.BSmpFe2G.js";
+import { c as P } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as S } from "../chunks/i18n.CH-wak_P.js";
+import { w as u } from "../chunks/watch.CThbualB.js";
+import { e as _, b } from "../chunks/waveform.1U9U_0rd.js";
+import { i as E, b as $, x as l } from "../chunks/lit-element.jLBm65_O.js";
+import { n as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { r } from "../chunks/state.CSDxrqLd.js";
+import { e as k } from "../chunks/query.BBf1UFkC.js";
+import { e as W } from "../chunks/class-map.BiVq-cVR.js";
 import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as k } from "../chunks/icon-button.CQiBjznj.js";
+import { C as z } from "../chunks/icon-button.CQiBjznj.js";
 import { C as T } from "../chunks/typography.DJC_UXgs.js";
-const A = $`audio{display:none}:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);height:148px;display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__waveform-svg{cursor:pointer;flex:1;width:100%;min-width:0;height:100%;display:block;overflow:hidden}.audio__waveform-wave{fill:var(--waves-color,var(--cx-color-primary))}.audio__waveform-played{fill:var(--played-color,color-mix(in srgb, var(--waves-color,var(--cx-color-primary)) 50%, white))}.audio__waveform-playhead{fill:var(--playhead-color,var(--cx-color-neutral-0));opacity:.9}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
-var B = Object.defineProperty, W = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
-  for (var l = r > 1 ? void 0 : r ? W(a, o) : a, c = t.length - 1, p; c >= 0; c--)
-    (p = t[c]) && (l = (r ? p(a, o, l) : p(l)) || l);
-  return r && l && B(a, o, l), l;
+const C = E`audio{display:none}:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);height:148px;display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__waveform-svg{cursor:pointer;flex:1;width:100%;min-width:0;height:100%;display:block;overflow:hidden}.audio__waveform-wave{fill:var(--waves-color,var(--cx-color-primary))}.audio__waveform-played{fill:var(--played-color,color-mix(in srgb, var(--waves-color,var(--cx-color-primary)) 50%, white))}.audio__waveform-playhead{fill:var(--playhead-color,var(--cx-color-neutral-0));opacity:.9}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
+var I = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (t, o, a, s) => {
+  for (var n = s > 1 ? void 0 : s ? D(o, a) : o, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (n = (s ? p(o, a, n) : p(n)) || n);
+  return s && n && I(o, a, n), n;
 };
-let e = class extends y {
+let i = class extends y {
   constructor() {
-    super(...arguments), this.localize = new b(this), this.srcLoadVersion = 0, this.extractWaveformPeaks = S, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveformSrc = "", this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.audioSrc = "";
+    super(...arguments), this.localize = new S(this), this.srcLoadVersion = 0, this.allWaveformPeaks = [], this.extractWaveformPeaks = _, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveformSrc = "", this.inPoint = 0, this.outPoint = 0, this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.effectiveOutPoint = 0, this.windowDuration = 0, this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.audioSrc = "", this.pendingAutoplay = !1;
+  }
+  get clampedInPoint() {
+    return this.durationSeconds ? Math.max(0, Math.min(this.inPoint, this.durationSeconds)) : Math.max(0, this.inPoint);
   }
   runConnectedCallback() {
     this.hasUpdated && this.requestUpdate("src");
@@ -29,34 +32,54 @@ let e = class extends y {
   disconnectedCallback() {
     super.disconnectedCallback(), this.srcLoadVersion++, this.cleanUp();
   }
+  willUpdate(t) {
+    super.willUpdate(t), (t.has("inPoint") || t.has("outPoint") || t.has("durationSeconds")) && this.recomputeWindow();
+  }
   async handleSrcChange() {
     await this.applySrc(this.src);
   }
+  handleInPointChange() {
+    !this.audioEl || !this.durationSeconds || this.audioEl.currentTime < this.clampedInPoint && this.seekToInPoint();
+  }
   async applySrc(t) {
-    const a = ++this.srcLoadVersion;
+    const o = ++this.srcLoadVersion;
     if (this.isLoaded = !1, this.isPlaying = !1, !this.waveformSrc) {
       this.cleanUp();
       return;
     }
-    await this.setupPngWaveform(t, a);
+    await this.setupPngWaveform(t, o);
   }
   updated(t) {
     super.updated(t), (t.has("width") || t.has("height") || t.has("resizeSize")) && this.handleSizeChange();
   }
+  recomputeWindow() {
+    const t = this.clampedInPoint;
+    this.effectiveOutPoint = this.outPoint > 0 ? Math.min(this.outPoint, this.durationSeconds || this.outPoint) : this.durationSeconds, this.windowDuration = Math.max(0, this.effectiveOutPoint - t), this.recomputeWaveform();
+  }
+  recomputeWaveform() {
+    if (!this.allWaveformPeaks.length)
+      return;
+    let t = this.allWaveformPeaks;
+    if (this.durationSeconds > 0) {
+      const a = this.allWaveformPeaks.length, s = Math.floor(this.clampedInPoint / this.durationSeconds * a), n = Math.ceil(this.effectiveOutPoint / this.durationSeconds * a);
+      t = this.allWaveformPeaks.slice(s, n);
+    }
+    const o = t.length || 1;
+    this.waveformViewBoxWidth = o, this.waveformPath = b(t, o, 200);
+  }
   cleanUp() {
-    this.audioEl?.pause(), this.audioSrc = "", this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
+    this.audioEl?.pause(), this.audioSrc = "", this.allWaveformPeaks = [], this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.style.setProperty("--played-fraction", "0"), this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.effectiveOutPoint = 0, this.windowDuration = 0, this.pendingAutoplay = !1;
   }
-  async setupPngWaveform(t, a) {
+  async setupPngWaveform(t, o) {
     this.cleanUp();
-    const o = await this.extractWaveformPeaks(this.waveformSrc);
-    if (a !== this.srcLoadVersion || !this.isConnected)
-      return;
-    if (!o) {
-      this.isError = !0, this.emit("cx-error");
-      return;
+    const a = await this.extractWaveformPeaks(this.waveformSrc);
+    if (!(o !== this.srcLoadVersion || !this.isConnected)) {
+      if (!a) {
+        this.isError = !0, this.emit("cx-error");
+        return;
+      }
+      this.allWaveformPeaks = a.peaks, this.recomputeWaveform(), t && (this.audioSrc = t), this.isLoaded = !0, this.autoplay && t && (this.inPoint > 0 ? this.pendingAutoplay = !0 : (await this.updateComplete, this.audioEl?.play()));
     }
-    const r = o.peaks.length;
-    this.waveformViewBoxWidth = r, this.waveformPath = P(o.peaks, r, 200), t && (this.audioSrc = t), this.isLoaded = !0, this.autoplay && t && (await this.updateComplete, this.audioEl?.play());
   }
   handleAudioPlay() {
     this.isPlaying = !0, this.emit("cx-play");
@@ -67,21 +90,42 @@ let e = class extends y {
   handleAudioTimeUpdate() {
     if (!this.audioEl)
       return;
-    const t = this.audioEl.duration ? this.audioEl.currentTime / this.audioEl.duration : 0;
-    this.playedFraction = t, this.style.setProperty("--played-fraction", String(t)), this.currentTimeSeconds = this.audioEl.currentTime, this.emit("cx-time-update", { detail: { time: this.audioEl.currentTime } });
+    const t = this.audioEl.currentTime;
+    if (this.outPoint > 0 && t >= this.effectiveOutPoint) {
+      this.audioEl.pause(), this.audioEl.currentTime = this.effectiveOutPoint, this.handleOutPointReached();
+      return;
+    }
+    const o = this.clampedInPoint, a = this.windowDuration ? Math.max(0, Math.min(1, (t - o) / this.windowDuration)) : 0;
+    this.playedFraction = a, this.style.setProperty("--played-fraction", String(a)), this.currentTimeSeconds = Math.max(0, t - o), this.emit("cx-time-update", { detail: { time: this.currentTimeSeconds } });
   }
   handleAudioDurationChange() {
-    this.durationSeconds = this.audioEl?.duration || 0;
+    this.durationSeconds = this.audioEl?.duration || 0, this.recomputeWindow();
+    const t = this.clampedInPoint;
+    t > 0 && this.audioEl && this.audioEl.currentTime < t && this.seekToInPoint(), this.pendingAutoplay && (this.pendingAutoplay = !1, this.audioEl?.play());
   }
   handleAudioEnded() {
+    if (this.loop && this.clampedInPoint > 0) {
+      this.seekToInPoint(), this.audioEl?.play();
+      return;
+    }
     this.isPlaying = !1, this.emit("cx-ended");
   }
   handleAudioError() {
     this.audioSrc && (this.isError = !0, this.emit("cx-error"));
   }
+  handleOutPointReached() {
+    if (this.isPlaying = !1, this.playedFraction = 1, this.style.setProperty("--played-fraction", "1"), this.currentTimeSeconds = this.windowDuration, this.loop) {
+      this.seekToInPoint(), this.audioEl?.play();
+      return;
+    }
+    this.seekToInPoint(), this.emit("cx-ended");
+  }
+  seekToInPoint() {
+    this.audioEl && (this.audioEl.currentTime = this.clampedInPoint);
+  }
   handleSizeChange() {
-    const t = this.isResizing ? `${this.resizeSize.width}px` : this.width, a = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    this.width || this.isResizing ? this.style.setProperty("--width", t) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", a) : this.style.removeProperty("--height");
+    const t = this.isResizing ? `${this.resizeSize.width}px` : this.width, o = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    this.width || this.isResizing ? this.style.setProperty("--width", t) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", o) : this.style.removeProperty("--height");
   }
   /** Starts audio playback. */
   play() {
@@ -96,91 +140,109 @@ let e = class extends y {
     this.isPlaying ? this.pause() : this.play();
   }
   formatTime(t) {
-    const o = this.durationSeconds >= 3600 ? u.HourMinuteSecond : u.MinuteSecond, r = g(t * 1e3, o);
-    return x(r, w.Digital);
+    const a = this.windowDuration >= 3600 ? m.HourMinuteSecond : m.MinuteSecond, s = w(t * 1e3, a);
+    return g(s, x.Digital);
   }
   handleWaveformClick(t) {
-    if (t.stopPropagation(), !this.audioEl || !this.durationSeconds)
+    if (t.stopPropagation(), !this.audioEl || !this.windowDuration)
       return;
-    const o = t.currentTarget.getBoundingClientRect(), r = Math.max(0, Math.min(1, (t.clientX - o.left) / o.width));
-    this.audioEl.currentTime = r * this.durationSeconds;
+    const a = t.currentTarget.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - a.left) / a.width));
+    this.audioEl.currentTime = this.clampedInPoint + s * this.windowDuration;
   }
   handlePlayButtonKeyDown(t) {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.togglePlay());
   }
   render() {
-    const t = !this.src && !this.waveformSrc, a = this.formatTime(this.currentTimeSeconds), o = this.formatTime(this.durationSeconds);
-    return h`<audio src=${this.audioSrc} ?loop=${this.loop} @play=${this.handleAudioPlay} @pause=${this.handleAudioPause} @timeupdate=${this.handleAudioTimeUpdate} @durationchange=${this.handleAudioDurationChange} @ended=${this.handleAudioEnded} @error=${this.handleAudioError}></audio><div part="base" class=${C({ audio: !0, "audio--empty": t })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
+    const t = !this.src && !this.waveformSrc, o = this.formatTime(this.currentTimeSeconds), a = this.formatTime(this.windowDuration);
+    return l`<audio src=${this.audioSrc} ?loop=${this.loop && this.clampedInPoint === 0 && this.outPoint <= 0} @play=${this.handleAudioPlay} @pause=${this.handleAudioPause} @timeupdate=${this.handleAudioTimeUpdate} @durationchange=${this.handleAudioDurationChange} @ended=${this.handleAudioEnded} @error=${this.handleAudioError}></audio><div part="base" class=${W({ audio: !0, "audio--empty": t })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
       !t,
-      () => h`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button>${d(
+      () => l`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button>${d(
         this.waveformPath,
-        () => z`<svg class="audio__waveform-svg" part="waveform-svg" viewBox="0 0 ${this.waveformViewBoxWidth} 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" @click=${this.handleWaveformClick}><path class="audio__waveform-wave" d=${this.waveformPath} /><svg x="0" y="0" width=${String(Math.round(this.playedFraction * this.waveformViewBoxWidth))} height="200" overflow="hidden"><path class="audio__waveform-played" d=${this.waveformPath} /></svg><rect class="audio__waveform-playhead" x=${String(Math.max(0, Math.round(this.playedFraction * this.waveformViewBoxWidth) - 1))} y="0" width="2" height="200"/></svg>`,
-        () => h`<div part="waveform" class="audio__waveform"></div>`
-      )}</div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${a} / ${o}</cx-typography>${d(
+        () => $`<svg class="audio__waveform-svg" part="waveform-svg" viewBox="0 0 ${this.waveformViewBoxWidth} 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" @click=${this.handleWaveformClick}><path class="audio__waveform-wave" d=${this.waveformPath} /><svg x="0" y="0" width=${String(Math.round(this.playedFraction * this.waveformViewBoxWidth))} height="200" overflow="hidden"><path class="audio__waveform-played" d=${this.waveformPath} /></svg><rect class="audio__waveform-playhead" x=${String(Math.max(0, Math.round(this.playedFraction * this.waveformViewBoxWidth) - 1))} y="0" width="2" height="200"/></svg>`,
+        () => l`<div part="waveform" class="audio__waveform"></div>`
+      )}</div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${o} / ${a}</cx-typography>${d(
         this.name,
-        () => h`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
+        () => l`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
       )}</div>`
     )}</div>${d(this.resizable && this.isResizeActive, () => this.renderResizer())}
     `;
   }
 };
-e.styles = [v, f, A];
-e.dependencies = {
-  "cx-icon-button": k,
+i.styles = [v, f, C];
+i.dependencies = {
+  "cx-icon-button": z,
   "cx-typography": T
 };
-i([
-  E("audio")
-], e.prototype, "audioEl", 2);
-i([
-  n({ reflect: !0, type: String })
-], e.prototype, "src", 2);
-i([
-  n({ reflect: !0, type: String })
-], e.prototype, "name", 2);
-i([
-  n({ reflect: !0, type: Boolean })
-], e.prototype, "autoplay", 2);
-i([
-  n({ reflect: !0, type: Boolean })
-], e.prototype, "loop", 2);
-i([
-  n({ attribute: "waveform-src", reflect: !0, type: String })
-], e.prototype, "waveformSrc", 2);
-i([
-  s()
-], e.prototype, "isPlaying", 2);
-i([
-  s()
-], e.prototype, "isLoaded", 2);
-i([
-  s()
-], e.prototype, "isError", 2);
-i([
-  s()
-], e.prototype, "currentTimeSeconds", 2);
-i([
-  s()
-], e.prototype, "durationSeconds", 2);
-i([
-  s()
-], e.prototype, "waveformPath", 2);
-i([
-  s()
-], e.prototype, "waveformViewBoxWidth", 2);
-i([
-  s()
-], e.prototype, "playedFraction", 2);
-i([
-  s()
-], e.prototype, "audioSrc", 2);
-i([
-  m("waveformSrc", { waitUntilFirstUpdate: !0 }),
-  m("src")
-], e.prototype, "handleSrcChange", 1);
-e = i([
-  _("cx-audio")
-], e);
+e([
+  k("audio")
+], i.prototype, "audioEl", 2);
+e([
+  h({ reflect: !0, type: String })
+], i.prototype, "src", 2);
+e([
+  h({ reflect: !0, type: String })
+], i.prototype, "name", 2);
+e([
+  h({ reflect: !0, type: Boolean })
+], i.prototype, "autoplay", 2);
+e([
+  h({ reflect: !0, type: Boolean })
+], i.prototype, "loop", 2);
+e([
+  h({ attribute: "waveform-src", reflect: !0, type: String })
+], i.prototype, "waveformSrc", 2);
+e([
+  h({ attribute: "in-point", reflect: !0, type: Number })
+], i.prototype, "inPoint", 2);
+e([
+  h({ attribute: "out-point", reflect: !0, type: Number })
+], i.prototype, "outPoint", 2);
+e([
+  r()
+], i.prototype, "isPlaying", 2);
+e([
+  r()
+], i.prototype, "isLoaded", 2);
+e([
+  r()
+], i.prototype, "isError", 2);
+e([
+  r()
+], i.prototype, "currentTimeSeconds", 2);
+e([
+  r()
+], i.prototype, "durationSeconds", 2);
+e([
+  r()
+], i.prototype, "effectiveOutPoint", 2);
+e([
+  r()
+], i.prototype, "windowDuration", 2);
+e([
+  r()
+], i.prototype, "waveformPath", 2);
+e([
+  r()
+], i.prototype, "waveformViewBoxWidth", 2);
+e([
+  r()
+], i.prototype, "playedFraction", 2);
+e([
+  r()
+], i.prototype, "audioSrc", 2);
+e([
+  r()
+], i.prototype, "pendingAutoplay", 2);
+e([
+  u("waveformSrc", { waitUntilFirstUpdate: !0 }),
+  u("src")
+], i.prototype, "handleSrcChange", 1);
+e([
+  u("inPoint", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleInPointChange", 1);
+i = e([
+  P("cx-audio")
+], i);
 export {
-  e as default
+  i as default
 };

package/library/components/cropper.js

@@ -1,6 +1,6 @@
 import { n as S, C as be } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as ye } from "../chunks/component.styles.CRO4Odto.js";
-import { U as N } from "../chunks/asset-link-format.B0c92pSs.js";
+import { U as N } from "../chunks/asset-link-format.QzzboHHE.js";
 import { c as Re } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as _e, x as te } from "../chunks/lit-element.jLBm65_O.js";
 import { r as ve } from "../chunks/state.CSDxrqLd.js";

package/library/components/folder-select.js

@@ -5,12 +5,12 @@ import "./select.js";
 import "./tag.js";
 import "../chunks/tree.Btf2Q4YZ.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as h } from "../chunks/folder-select.Bc9x2hMO.js";
+import { C as h } from "../chunks/folder-select.CrWjwQcw.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/watch.CThbualB.js";
-import "../chunks/endpoints.DBlquU2-.js";
+import "../chunks/endpoints.D4h8hp1m.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/list-editor.js

@@ -18,7 +18,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.CIEhztrj.js";
 import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/watch.CThbualB.js";
-import { c as E, C as F } from "../chunks/list-editor.on8VVRn-.js";
+import { c as E, C as F } from "../chunks/list-editor.BfpDIsU5.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/molecules.js

@@ -5,8 +5,8 @@ import { C } from "../chunks/confirm-popover.BifwpSuf.js";
 import { default as s } from "./corner-position-input-group.js";
 import { default as m } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.Bc9x2hMO.js";
-import { C as P } from "../chunks/list-editor.on8VVRn-.js";
+import { C as c } from "../chunks/folder-select.CrWjwQcw.js";
+import { C as P } from "../chunks/list-editor.BfpDIsU5.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";
 import { default as w } from "./position-picker.js";