@orangelogic/design-system 2.114.0 → 2.115.0

package/library/chunks/{folder-select.Bc9x2hMO.js → folder-select.8xNjeJfp.js}

@@ -5,7 +5,7 @@ import oe from "../components/select.js";
 import ce from "../components/tag.js";
 import { C as g, a as ne } from "./tree.Btf2Q4YZ.js";
 import { n as r, C as U } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as R, F as he, c as de } from "./endpoints.DBlquU2-.js";
+import { h as R, F as he, c as de } from "./endpoints.CDX5PgQz.js";
 import { M as k } from "./asset-link-format.B0c92pSs.js";
 import { c as j } from "./component.styles.CRO4Odto.js";
 import { c as M } from "./custom-element.L4WJXn1j.js";

package/library/chunks/{list-editor.BBgFSBlF.js → list-editor.7zNWfBuW.js}

@@ -1,15 +1,15 @@
-import { C as _ } from "./button.DwJEeW2t.js";
+import { C as k } from "./button.DwJEeW2t.js";
 import { C as O, D as q } from "./dialog.BYCWepBc.js";
 import G from "../components/grid.js";
 import R from "../components/grid-item.js";
-import { C as k } from "./input.CH4lKxPM.js";
+import { C as _ } from "./input.CH4lKxPM.js";
 import j from "../components/line-clamp.js";
 import { C as P } from "./option.Bvh35v8S.js";
 import F from "../components/radio.js";
 import B from "../components/radio-group.js";
 import K from "../components/select.js";
 import S from "../components/space.js";
-import { C as U, H } from "./table.DLrle5SR.js";
+import { C as U, H } from "./table.BvbReIZh.js";
 import { C as E } from "./typography.DJC_UXgs.js";
 import { n as o, C as T } from "./lib-cortex-element.CVMmyPMC.js";
 import V from "../components/dynamic-select.js";
@@ -30,7 +30,7 @@ import { n as N } from "./when.Dr1es41R.js";
 import { t as Q } from "./toString.CAY8lys2.js";
 import { C as ee } from "./icon-button.CQiBjznj.js";
 import { C as te } from "./image.cT-FziNS.js";
-import { a as ae } from "./asset.Drl4D1c7.js";
+import { a as ae } from "./asset.CtPQLZOf.js";
 import { a as ie } from "./index.Cpamj0jB.js";
 import { A as g } from "./content-builder.OsUmm8Wu.js";
 import { b as ne, t as w } from "./string.DUgD4c9f.js";
@@ -931,10 +931,10 @@ let c = class extends T {
 };
 c.styles = [L, pe];
 c.dependencies = {
-  "cx-button": _,
+  "cx-button": k,
   "cx-icon-button": ee,
   "cx-image": te,
-  "cx-input": k,
+  "cx-input": _,
   "cx-space": S,
   "cx-typography": E
 };
@@ -1241,12 +1241,12 @@ let n = class extends T {
 n.styles = [L, ve];
 n.dependencies = {
   "cx-asset-picker": c,
-  "cx-button": _,
+  "cx-button": k,
   "cx-dialog": O,
   "cx-dynamic-select": V,
   "cx-grid": G,
   "cx-grid-item": R,
-  "cx-input": k,
+  "cx-input": _,
   "cx-line-clamp": j,
   "cx-option": P,
   "cx-radio": F,

package/library/chunks/{table.DLrle5SR.js → table.BvbReIZh.js}

@@ -19179,9 +19179,9 @@ v = C([
   Rt("cx-table")
 ], v);
 export {
-  is as $,
+  ts as $,
   mi as A,
-  ji as B,
+  Wi as B,
   v as C,
   Ti as D,
   Di as E,
@@ -19189,52 +19189,53 @@ export {
   Lo as G,
   at as H,
   Ai as I,
-  Gi as J,
+  ji as J,
   Vi as K,
-  $i as L,
+  Gi as L,
   P as M,
-  Ui as N,
-  Ki as O,
+  $i as N,
+  Ui as O,
   dd as P,
-  qi as Q,
+  Ki as Q,
   bs as R,
-  Io as S,
+  yh as S,
   it as T,
-  Xi as U,
-  Ji as V,
-  Yi as W,
-  Qi as X,
-  Zi as Y,
-  es as Z,
-  ts as _,
+  qi as U,
+  Xi as V,
+  Ji as W,
+  Yi as X,
+  Qi as Y,
+  Zi as Z,
+  es as _,
   vh as a,
-  ss as a0,
-  os as a1,
-  st as a2,
-  ee as a3,
+  is as a0,
+  ss as a1,
+  os as a2,
+  st as a3,
+  ee as a4,
   ms as b,
   xi as c,
   Fr as d,
   Ml as e,
-  pe as f,
-  Nt as g,
-  ri as h,
-  bi as i,
-  wi as j,
-  vi as k,
-  Ei as l,
-  Ri as m,
-  Si as n,
-  Mi as o,
-  Li as p,
-  qt as q,
-  Fi as r,
-  Oi as s,
-  _i as t,
-  Pi as u,
-  Hi as v,
-  Ni as w,
-  Ii as x,
-  Bi as y,
-  Wi as z
+  Io as f,
+  pe as g,
+  Nt as h,
+  ri as i,
+  bi as j,
+  wi as k,
+  vi as l,
+  Ei as m,
+  Ri as n,
+  Si as o,
+  Mi as p,
+  Li as q,
+  qt as r,
+  Fi as s,
+  Oi as t,
+  _i as u,
+  Pi as v,
+  Hi as w,
+  Ni as x,
+  Ii as y,
+  Bi as z
 };

package/library/chunks/{time.BiQnh9wt.js → time.BSmpFe2G.js}

@@ -111,8 +111,8 @@ export {
   D as M,
   m as S,
   a as U,
-  N as a,
+  w as a,
   H as c,
-  w as f,
+  N as f,
   y as g
 };

package/library/chunks/waveform.1U9U_0rd.js

@@ -0,0 +1,60 @@
+function $(o, l, u, e, c, n) {
+  let r = -1, a = -1;
+  for (let t = e; t < c; t++)
+    for (let s = 0; s < u; s++) {
+      const i = (s * l + t) * 4;
+      (0.299 * o[i] + 0.587 * o[i + 1] + 0.114 * o[i + 2]) / 255 < n && o[i + 3] > 128 && (r === -1 && (r = s), a = s);
+    }
+  return r === -1 ? 0 : (a - r) / u;
+}
+async function p(o, l) {
+  const u = l?.threshold ?? 0.92;
+  try {
+    const e = new Image();
+    e.crossOrigin = "anonymous", e.src = o, await e.decode();
+    const { naturalHeight: c, naturalWidth: n } = e, r = l?.sampleCount ?? n, a = document.createElement("canvas");
+    a.width = n, a.height = c;
+    const t = a.getContext("2d");
+    if (!t)
+      return null;
+    let s;
+    try {
+      t.drawImage(e, 0, 0), s = t.getImageData(0, 0, n, c);
+    } catch {
+      return null;
+    }
+    const { data: i } = s, m = [];
+    for (let h = 0; h < r; h++) {
+      const f = Math.floor(h / r * n), x = Math.floor((h + 1) / r * n);
+      m.push($(i, n, c, f, x === f ? f + 1 : x, u));
+    }
+    const d = Math.max(...m), g = d > 0 ? m.map((h) => h / d) : m;
+    return { height: c, peaks: g, width: n };
+  } catch {
+    return null;
+  }
+}
+function F(o, l, u) {
+  if (o.length === 0)
+    return "";
+  const e = u / 2, c = u / 2, n = o.length, r = l / n, a = [`M0 ${(e - o[0] * c).toFixed(2)}`];
+  for (let t = 0; t < n - 1; t++)
+    a.push(
+      `H${((t + 1) * r).toFixed(2)}`,
+      `V${(e - o[t + 1] * c).toFixed(2)}`
+    );
+  a.push(
+    `H${l}`,
+    `V${(e + o[n - 1] * c).toFixed(2)}`
+  );
+  for (let t = n - 1; t > 0; t--)
+    a.push(
+      `H${(t * r).toFixed(2)}`,
+      `V${(e + o[t - 1] * c).toFixed(2)}`
+    );
+  return a.push("H0", "Z"), a.join(" ");
+}
+export {
+  F as b,
+  p as e
+};

package/library/components/asset-link-format.js

@@ -3,7 +3,7 @@ import { C as B } from "../chunks/button.DwJEeW2t.js";
 import _ from "./space.js";
 import { C as F } from "../chunks/typography.DJC_UXgs.js";
 import { n, C as W } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { b as rt, c as ht } from "../chunks/asset.Drl4D1c7.js";
+import { b as rt, c as ht } from "../chunks/asset.CtPQLZOf.js";
 import { c as E } from "../chunks/component.styles.CRO4Odto.js";
 import { U as a, T as l } from "../chunks/asset-link-format.B0c92pSs.js";
 import { c as N } from "../chunks/custom-element.L4WJXn1j.js";

package/library/components/atoms.js

@@ -19,7 +19,7 @@ import { default as K } from "./date-calendar.js";
 import { default as W } from "./details.js";
 import { C as Y } from "../chunks/dialog.BYCWepBc.js";
 import { default as _ } from "./divider.js";
-import { C as oe } from "../chunks/document-viewer.Cui5mV3v.js";
+import { C as oe } from "../chunks/document-viewer.BIC9iYpZ.js";
 import { C as ae } from "../chunks/dot-pagination.C4l5vKor.js";
 import { default as xe } from "./dot-status.js";
 import { default as me } from "./drawer.js";
@@ -74,7 +74,7 @@ import { default as Uo } from "./stepper.js";
 import { default as Xo } from "./switch.js";
 import { default as Zo } from "./tab.js";
 import { C as et } from "../chunks/tab-group.DvMX02hY.js";
-import { C as tt } from "../chunks/table.DLrle5SR.js";
+import { C as tt } from "../chunks/table.BvbReIZh.js";
 import { default as rt } from "./tab-panel.js";
 import { default as ft } from "./tag.js";
 import { default as st } from "./textarea.js";

package/library/components/audio.js

@@ -1,45 +1,27 @@
-import { r as m, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
+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 { c as g } from "../chunks/custom-element.L4WJXn1j.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 S } from "../chunks/i18n.CH-wak_P.js";
-import { w as f } from "../chunks/watch.CThbualB.js";
-import { i as w, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { n as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { r as u } from "../chunks/state.CSDxrqLd.js";
-import { r as x } from "../chunks/query-async.CTgXGyQ5.js";
+import { w as m } from "../chunks/watch.CThbualB.js";
+import { e as b, 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 { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as b } from "../chunks/icon-button.CQiBjznj.js";
-import { C as W } from "../chunks/typography.DJC_UXgs.js";
-const _ = w`: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);display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.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 P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, t, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? z(t, r) : t, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (i = (o ? l(t, r, i) : l(i)) || i);
-  return o && i && P(t, r, i), i;
+import { C as k } 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,var(--cx-color-primary-700,var(--cx-color-primary)))}.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;
 };
-function $(e) {
-  const t = "light-dark(";
-  if (!e.startsWith(t) || !e.endsWith(")"))
-    return null;
-  const r = e.slice(t.length, -1);
-  let o = 0, i = -1;
-  for (let h = 0; h < r.length; h++)
-    if (r[h] === "(")
-      o++;
-    else if (r[h] === ")")
-      o--;
-    else if (r[h] === "," && o === 0) {
-      i = h;
-      break;
-    }
-  if (i === -1)
-    return null;
-  const s = r.slice(0, i).trim(), l = r.slice(i + 1).trim();
-  return !CSS.supports("color", s) || !CSS.supports("color", l) ? null : [s, l];
-}
-let a = class extends y {
+let e = class extends y {
   constructor() {
-    super(), this.localize = new S(this), this.waveSurfer = null, this.srcLoadVersion = 0, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveColor = ["", ""], this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.onWaveSurferReady = this.onWaveSurferReady.bind(this), this.onWaveSurferPlay = this.onWaveSurferPlay.bind(this), this.onWaveSurferPause = this.onWaveSurferPause.bind(this), this.onWaveSurferTimeUpdate = this.onWaveSurferTimeUpdate.bind(this), this.onWaveSurferFinish = this.onWaveSurferFinish.bind(this), this.onWaveSurferError = this.onWaveSurferError.bind(this);
+    super(...arguments), this.localize = new S(this), this.srcLoadVersion = 0, this.extractWaveformPeaks = b, 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 = "";
   }
   runConnectedCallback() {
     this.hasUpdated && this.requestUpdate("src");
@@ -50,188 +32,155 @@ let a = class extends y {
   async handleSrcChange() {
     await this.applySrc(this.src);
   }
-  async applySrc(e) {
-    const t = ++this.srcLoadVersion;
-    if (this.isLoaded = !1, this.isPlaying = !1, !e) {
+  async applySrc(t) {
+    const a = ++this.srcLoadVersion;
+    if (this.isLoaded = !1, this.isPlaying = !1, !this.waveformSrc) {
       this.cleanUp();
       return;
     }
-    await this.waveformContainerAsync, !(t !== this.srcLoadVersion || !this.isConnected) && await this.setupWaveSurfer(e, t);
+    await this.setupPngWaveform(t, a);
   }
-  async handleWaveColorThemeChange() {
-    this.src && this.waveSurfer && (await this.updateComplete, this.waveSurfer.setOptions(this.setupColors()));
+  updated(t) {
+    super.updated(t), (t.has("width") || t.has("height") || t.has("resizeSize")) && this.handleSizeChange();
   }
-  updated(e) {
-    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  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;
   }
-  onWaveSurferReady() {
-    this.isLoaded = !0, this.durationSeconds = this.waveSurfer.getDuration();
+  async setupPngWaveform(t, a) {
+    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 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());
   }
-  onWaveSurferPlay() {
+  handleAudioPlay() {
     this.isPlaying = !0, this.emit("cx-play");
   }
-  onWaveSurferPause() {
+  handleAudioPause() {
     this.isPlaying = !1, this.emit("cx-pause");
   }
-  onWaveSurferTimeUpdate(e) {
-    this.currentTimeSeconds = e, this.emit("cx-time-update", {
-      detail: {
-        time: e
-      }
-    });
+  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 } });
+  }
+  handleAudioDurationChange() {
+    this.durationSeconds = this.audioEl?.duration || 0;
   }
-  onWaveSurferFinish() {
+  handleAudioEnded() {
     this.isPlaying = !1, this.emit("cx-ended");
   }
-  onWaveSurferError() {
-    this.isError = !0, this.emit("cx-error");
-  }
-  resolveColorValue(e) {
-    if (!e.startsWith("var("))
-      return e;
-    const t = e.match(/var\(\s*(--[\w-]+)/)?.[1];
-    return t && getComputedStyle(this).getPropertyValue(t).trim() || e;
-  }
-  computeCursorColor(e) {
-    const t = document.createElement("canvas");
-    t.width = 1, t.height = 1;
-    const r = t.getContext("2d");
-    if (!r)
-      return e;
-    r.fillStyle = e, r.fillRect(0, 0, 1, 1);
-    const [o, i, s] = r.getImageData(0, 0, 1, 1).data;
-    return (0.299 * o + 0.587 * i + 0.114 * s) / 255 > 0.5 ? `rgb(${Math.round(o * 0.5)}, ${Math.round(i * 0.5)}, ${Math.round(s * 0.5)})` : `rgb(${Math.round(o + (255 - o) * 0.5)}, ${Math.round(i + (255 - i) * 0.5)}, ${Math.round(s + (255 - s) * 0.5)})`;
-  }
-  setupColors() {
-    const t = getComputedStyle(this).getPropertyValue("--cx-color-primary").trim(), r = (this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]) || t, o = this.resolveColorValue(r), i = this.resolveColorValue(
-      this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]
-    ), s = this.computeCursorColor(o);
-    return {
-      cursorColor: s,
-      progressColor: s,
-      waveColor: i
-    };
-  }
-  async setupWaveSurfer(e, t = this.srcLoadVersion) {
-    this.cleanUp();
-    const r = await this.waveformContainerAsync;
-    if (t !== this.srcLoadVersion || !r || !e || !this.isConnected)
-      return;
-    const { default: o } = await import("../chunks/wavesurfer.esm.Cwi1pz64.js");
-    t !== this.srcLoadVersion || !this.isConnected || (this.waveSurfer = o.create({
-      barGap: 1,
-      barRadius: 2,
-      barWidth: 2,
-      container: r,
-      height: "auto",
-      normalize: !0,
-      url: e,
-      ...this.setupColors()
-    }), this.attachWaveSurferEvents(), this.autoplay && this.waveSurfer.play());
-  }
-  attachWaveSurferEvents() {
-    this.waveSurfer && (this.waveSurfer.on("ready", this.onWaveSurferReady), this.waveSurfer.on("play", this.onWaveSurferPlay), this.waveSurfer.on("pause", this.onWaveSurferPause), this.waveSurfer.on("timeupdate", this.onWaveSurferTimeUpdate), this.waveSurfer.on("finish", this.onWaveSurferFinish), this.waveSurfer.on("error", this.onWaveSurferError));
-  }
-  cleanUp() {
-    this.waveSurfer && (this.waveSurfer.destroy(), this.waveSurfer = null), this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
+  handleAudioError() {
+    this.audioSrc && (this.isError = !0, this.emit("cx-error"));
   }
   handleSizeChange() {
-    const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+    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");
   }
   /** Starts audio playback. */
   play() {
-    this.waveSurfer?.play();
+    this.audioEl?.play();
   }
   /** Pauses audio playback. */
   pause() {
-    this.waveSurfer?.pause();
+    this.audioEl?.pause();
   }
   /** Toggles between play and pause. */
   togglePlay() {
     this.isPlaying ? this.pause() : this.play();
   }
-  formatTime(e) {
-    const t = Math.floor(e / 60), r = Math.floor(e % 60);
-    return `${t}:${r.toString().padStart(2, "0")}`;
+  formatTime(t) {
+    const o = this.durationSeconds >= 3600 ? u.HourMinuteSecond : u.MinuteSecond, r = g(t * 1e3, o);
+    return x(r, w.Digital);
+  }
+  handleWaveformClick(t) {
+    if (t.stopPropagation(), !this.audioEl || !this.durationSeconds)
+      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;
   }
-  handlePlayButtonKeyDown(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.togglePlay());
+  handlePlayButtonKeyDown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.togglePlay());
   }
   render() {
-    const e = !this.src, t = this.formatTime(this.currentTimeSeconds), r = this.formatTime(this.durationSeconds);
-    return p`<div part="base" class=${C({ audio: !0, "audio--empty": e })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
-      !e,
-      () => p`<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><div part="waveform" class="audio__waveform"></div></div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${t} / ${r}</cx-typography>${d(
+    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(
+      !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(
+        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(
         this.name,
-        () => p`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
+        () => h`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
       )}</div>`
     )}</div>${d(this.resizable && this.isResizeActive, () => this.renderResizer())}
     `;
   }
 };
-a.styles = [v, m, _];
-a.dependencies = {
-  "cx-icon-button": b,
-  "cx-typography": W
+e.styles = [v, f, A];
+e.dependencies = {
+  "cx-icon-button": k,
+  "cx-typography": T
 };
-n([
-  x(".audio__waveform")
-], a.prototype, "waveformContainerAsync", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "src", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "name", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "autoplay", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "loop", 2);
-n([
-  c({
-    attribute: "wave-color",
-    converter: {
-      fromAttribute(e) {
-        if (!e)
-          return ["", ""];
-        const t = $(e);
-        return t || (CSS.supports("color", e) ? [e, e] : ["", ""]);
-      },
-      toAttribute([e, t]) {
-        return e === t ? e : `light-dark(${e}, ${t})`;
-      }
-    },
-    reflect: !0
-  })
-], a.prototype, "waveColor", 2);
-n([
-  u()
-], a.prototype, "isPlaying", 2);
-n([
-  u()
-], a.prototype, "isLoaded", 2);
-n([
-  u()
-], a.prototype, "isError", 2);
-n([
-  u()
-], a.prototype, "currentTimeSeconds", 2);
-n([
-  u()
-], a.prototype, "durationSeconds", 2);
-n([
-  f("src")
-], a.prototype, "handleSrcChange", 1);
-n([
-  f("theme", { waitUntilFirstUpdate: !0 }),
-  f("waveColor", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleWaveColorThemeChange", 1);
-a = n([
-  g("cx-audio")
-], a);
+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);
 export {
-  a as default
+  e as default
 };