@orangelogic/design-system 2.104.0 → 2.105.0

package/library/components/alert.js

@@ -2,7 +2,7 @@ import { n as s, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as b } from "../chunks/component.styles.CRO4Odto.js";
 import { s as u, a as p, w as m } from "../chunks/event.BeKOsirN.js";
 import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as C } from "../chunks/i18n.BABe9hN4.js";
+import { L as C } from "../chunks/i18n.DmmFsjwP.js";
 import { H as T } from "../chunks/slot.j5oheLJC.js";
 import { w } from "../chunks/watch.BCJD77bD.js";
 import { i as I, x as h } from "../chunks/lit-element.jLBm65_O.js";
@@ -10,7 +10,7 @@ import { r as A } from "../chunks/state.CSDxrqLd.js";
 import { e as g } from "../chunks/query.BBf1UFkC.js";
 import { e as v } from "../chunks/class-map.BiVq-cVR.js";
 import { s as _, g as f } from "../chunks/animation-registry.HmpwNuGH.js";
-import { C as H } from "../chunks/icon-button.C2s3pHG4.js";
+import { C as H } from "../chunks/icon-button.CHh2iNJJ.js";
 const k = I`:host{margin:0;display:contents}.alert{background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-top-width:calc(var(--cx-panel-border-width) * 3);border-radius:var(--cx-border-radius-small);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-700);margin:inherit;align-items:stretch;line-height:1.6;display:flex;position:relative;overflow:hidden}.alert:not(.alert--has-icon) .alert__icon,.alert:not(.alert--closable) .alert__close-button{display:none}.alert__icon{font-size:var(--cx-font-size-large);flex:none;align-items:center;padding-inline-start:var(--cx-spacing-large);display:flex}.alert--has-countdown{border-bottom:none}.alert--primary{border-top-color:var(--cx-color-primary)}.alert--primary .alert__icon{color:var(--cx-color-primary)}.alert--success{border-top-color:var(--cx-color-success)}.alert--success .alert__icon{color:var(--cx-color-success)}.alert--neutral{border-top-color:var(--cx-color-neutral)}.alert--neutral .alert__icon{color:var(--cx-color-neutral)}.alert--warning{border-top-color:var(--cx-color-warning)}.alert--warning .alert__icon{color:var(--cx-color-warning)}.alert--danger{border-top-color:var(--cx-color-danger)}.alert--danger .alert__icon{color:var(--cx-color-danger)}.alert__message{padding:var(--cx-spacing-large);flex:auto;display:block;overflow:hidden}.alert__close-button{font-size:var(--cx-font-size-medium);flex:none;align-items:center;padding-inline-end:var(--cx-spacing-medium);display:flex}.alert__countdown{width:100%;height:calc(var(--cx-panel-border-width) * 3);background-color:var(--cx-panel-border-color);display:flex;position:absolute;bottom:0;left:0}.alert__countdown--ltr{justify-content:flex-end}.alert__countdown .alert__countdown-elapsed{width:0;height:100%}.alert--primary .alert__countdown-elapsed{background-color:var(--cx-color-primary)}.alert--success .alert__countdown-elapsed{background-color:var(--cx-color-success)}.alert--neutral .alert__countdown-elapsed{background-color:var(--cx-color-neutral-600)}.alert--warning .alert__countdown-elapsed{background-color:var(--cx-color-warning)}.alert--danger .alert__countdown-elapsed{background-color:var(--cx-color-danger)}.alert__timer{display:none}`;
 var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, o, n, l) => {
   for (var a = l > 1 ? void 0 : l ? $(o, n) : o, c = r.length - 1, d; c >= 0; c--)

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

@@ -1,13 +1,13 @@
 import "../chunks/cropper.Bib8Abm3.js";
-import { C as B } from "../chunks/button.CAa1kvwe.js";
+import { C as B } from "../chunks/button.B8q9TnbJ.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.DmOI7fQJ.js";
+import { b as rt, c as ht } from "../chunks/asset.CCjWpDnd.js";
 import { c as E } from "../chunks/component.styles.CRO4Odto.js";
 import { U as a, T as l } from "../chunks/asset-link-format.BSRDqHg7.js";
 import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as U } from "../chunks/i18n.BABe9hN4.js";
+import { L as U } from "../chunks/i18n.DmmFsjwP.js";
 import { w } from "../chunks/watch.BCJD77bD.js";
 import { s as et, c as it } from "../chunks/number.B4PQLJIg.js";
 import { b as G } from "../chunks/transformation.Dir8s_wm.js";
@@ -17,9 +17,9 @@ import { n as k } from "../chunks/when.Dr1es41R.js";
 import I from "./details.js";
 import lt from "./divider.js";
 import L from "./icon.js";
-import { C as K } from "../chunks/icon-button.C2s3pHG4.js";
+import { C as K } from "../chunks/icon-button.CHh2iNJJ.js";
 import J from "./input.js";
-import { C as X } from "../chunks/option.DGXQzdtb.js";
+import { C as X } from "../chunks/option.CdZHtENS.js";
 import Y from "./select.js";
 import { c as ct } from "../chunks/image.9qwbjGNb.js";
 import { e as V } from "../chunks/query.BBf1UFkC.js";

package/library/components/atoms.js

@@ -1,87 +1,88 @@
 import { default as s } from "./alert.js";
 import { bw as C } from "../chunks/am-chart.H2jnOzFc.js";
-import { default as l } from "./animated-image.js";
+import { default as d } from "./animated-image.js";
 import { a, e as o } from "../chunks/animation.7ifl4x2S.js";
 import { C as n } from "../chunks/animation.7ifl4x2S.js";
 import { default as g } from "./array-line-clamp.js";
-import { default as b } from "./avatar.js";
-import { default as T } from "./badge.js";
-import { default as A } from "./breadcrumb.js";
-import { default as D } from "./breadcrumb-item.js";
-import { C as P } from "../chunks/button.CAa1kvwe.js";
-import { default as G } from "./button-group.js";
-import { default as h } from "./card.js";
-import { default as w } from "./checkbox.js";
-import { default as k } from "./color-picker.js";
-import { default as E } from "./copy-button.js";
-import { default as L } from "./details.js";
-import { C as j } from "../chunks/dialog.08JIK4Kd.js";
-import { default as z } from "./divider.js";
-import { C as q } from "../chunks/dot-pagination.-nDdQxJN.js";
-import { default as K } from "./dot-status.js";
-import { default as W } from "./drawer.js";
-import { default as Y } from "./dropdown.js";
-import { default as _ } from "./e-chart.js";
-import { default as ee } from "./element-clamp.js";
-import { default as oe } from "./format-bytes.js";
-import { default as te } from "./format-date.js";
-import { default as fe } from "./format-number.js";
-import { default as se } from "./format-time.js";
-import { default as Ce } from "./grid.js";
-import { default as le } from "./grid-item.js";
-import { C as ne } from "../chunks/header.BZxyeLPK.js";
-import { C as ge } from "../chunks/hub-connection.Ot2odiCz.js";
-import { default as be } from "./icon.js";
-import { C as Te } from "../chunks/icon-button.C2s3pHG4.js";
-import { C as Ae } from "../chunks/iframe.DPccxsnE.js";
-import { C as De } from "../chunks/image.DB68R-yp.js";
-import { default as Pe } from "./image-comparer.js";
-import { default as Ge } from "./include.js";
-import { default as he } from "./input.js";
-import { default as we } from "./input-group.js";
-import { default as ke } from "./line-clamp.js";
-import { default as Ee } from "./markdown.js";
-import { default as Le } from "./menu.js";
-import { default as je } from "./menu-item.js";
-import { default as ze } from "./menu-label.js";
-import { default as qe } from "./menu-section.js";
-import { default as Ke } from "./mutation-observer.js";
-import { C as We } from "../chunks/option.DGXQzdtb.js";
-import { C as Ye } from "../chunks/pagination.DhtwOCF6.js";
-import { default as _e } from "./popup.js";
-import { default as ea } from "./progress-bar.js";
-import { default as oa } from "./progress-ring.js";
-import { default as ta } from "./qr-code.js";
-import { default as fa } from "./radio.js";
-import { default as sa } from "./radio-button.js";
-import { default as Ca } from "./radio-card.js";
-import { default as la } from "./radio-group.js";
-import { default as na } from "./range.js";
-import { default as ga } from "./rating.js";
-import { default as ba } from "./relative-time.js";
-import { default as Ta } from "./resize-observer.js";
-import { default as Aa } from "./select.js";
-import { default as Da } from "./skeleton.js";
-import { default as Pa } from "./space.js";
-import { default as Ga } from "./spinner.js";
-import { default as ha } from "./split-panel.js";
-import { default as wa } from "./step.js";
-import { default as ka } from "./stepper.js";
-import { default as Ea } from "./switch.js";
-import { default as La } from "./tab.js";
-import { C as ja } from "../chunks/tab-group.BhCf9Smq.js";
-import { C as za } from "../chunks/table.CRDY_C9O.js";
-import { default as qa } from "./tab-panel.js";
-import { default as Ka } from "./tag.js";
-import { default as Wa } from "./textarea.js";
-import { default as Ya } from "./timecode.js";
-import { default as _a } from "./tooltip.js";
-import { a as eo, C as ao } from "../chunks/tree.CJculPt6.js";
-import { C as ro } from "../chunks/typography.DJC_UXgs.js";
-import { default as xo } from "./video.js";
-import { default as mo } from "./visually-hidden.js";
-import { c as po } from "../chunks/component.styles.CRO4Odto.js";
-import { g as uo, a as lo, s as no } from "../chunks/animation-registry.HmpwNuGH.js";
+import { default as b } from "./audio.js";
+import { default as T } from "./avatar.js";
+import { default as S } from "./badge.js";
+import { default as D } from "./breadcrumb.js";
+import { default as P } from "./breadcrumb-item.js";
+import { C as G } from "../chunks/button.B8q9TnbJ.js";
+import { default as h } from "./button-group.js";
+import { default as w } from "./card.js";
+import { default as k } from "./checkbox.js";
+import { default as E } from "./color-picker.js";
+import { default as L } from "./copy-button.js";
+import { default as j } from "./details.js";
+import { C as z } from "../chunks/dialog.BlHQ-Sh1.js";
+import { default as q } from "./divider.js";
+import { C as K } from "../chunks/dot-pagination.BMlLpcfR.js";
+import { default as W } from "./dot-status.js";
+import { default as Y } from "./drawer.js";
+import { default as _ } from "./dropdown.js";
+import { default as ee } from "./e-chart.js";
+import { default as oe } from "./element-clamp.js";
+import { default as te } from "./format-bytes.js";
+import { default as fe } from "./format-date.js";
+import { default as se } from "./format-number.js";
+import { default as Ce } from "./format-time.js";
+import { default as de } from "./grid.js";
+import { default as ne } from "./grid-item.js";
+import { C as ge } from "../chunks/header.yC7IkgNn.js";
+import { C as be } from "../chunks/hub-connection.Ot2odiCz.js";
+import { default as Te } from "./icon.js";
+import { C as Se } from "../chunks/icon-button.CHh2iNJJ.js";
+import { C as De } from "../chunks/iframe.Dd2ON7ug.js";
+import { C as Pe } from "../chunks/image.CR_LHEaY.js";
+import { default as Ge } from "./image-comparer.js";
+import { default as he } from "./include.js";
+import { default as we } from "./input.js";
+import { default as ke } from "./input-group.js";
+import { default as Ee } from "./line-clamp.js";
+import { default as Le } from "./markdown.js";
+import { default as je } from "./menu.js";
+import { default as ze } from "./menu-item.js";
+import { default as qe } from "./menu-label.js";
+import { default as Ke } from "./menu-section.js";
+import { default as We } from "./mutation-observer.js";
+import { C as Ye } from "../chunks/option.CdZHtENS.js";
+import { C as _e } from "../chunks/pagination.CDCYbCV4.js";
+import { default as ea } from "./popup.js";
+import { default as oa } from "./progress-bar.js";
+import { default as ta } from "./progress-ring.js";
+import { default as fa } from "./qr-code.js";
+import { default as sa } from "./radio.js";
+import { default as Ca } from "./radio-button.js";
+import { default as da } from "./radio-card.js";
+import { default as na } from "./radio-group.js";
+import { default as ga } from "./range.js";
+import { default as ba } from "./rating.js";
+import { default as Ta } from "./relative-time.js";
+import { default as Sa } from "./resize-observer.js";
+import { default as Da } from "./select.js";
+import { default as Pa } from "./skeleton.js";
+import { default as Ga } from "./space.js";
+import { default as ha } from "./spinner.js";
+import { default as wa } from "./split-panel.js";
+import { default as ka } from "./step.js";
+import { default as Ea } from "./stepper.js";
+import { default as La } from "./switch.js";
+import { default as ja } from "./tab.js";
+import { C as za } from "../chunks/tab-group.DtGFedcf.js";
+import { C as qa } from "../chunks/table.kjsxIRt-.js";
+import { default as Ka } from "./tab-panel.js";
+import { default as Wa } from "./tag.js";
+import { default as Ya } from "./textarea.js";
+import { default as _a } from "./timecode.js";
+import { default as eo } from "./tooltip.js";
+import { a as oo, C as ro } from "../chunks/tree.D__u64uY.js";
+import { C as xo } from "../chunks/typography.DJC_UXgs.js";
+import { default as mo } from "./video.js";
+import { default as po } from "./visually-hidden.js";
+import { c as uo } from "../chunks/component.styles.CRO4Odto.js";
+import { g as no, a as io, s as go } from "../chunks/animation-registry.HmpwNuGH.js";
 function t() {
   return Object.entries(a).filter(([e]) => e !== "easings").map(([e]) => e);
 }
@@ -91,90 +92,91 @@ function x() {
 export {
   s as CxAlert,
   C as CxAmChart,
-  l as CxAnimatedImage,
+  d as CxAnimatedImage,
   n as CxAnimation,
   g as CxArrayLineClamp,
-  b as CxAvatar,
-  T as CxBadge,
-  A as CxBreadcrumb,
-  D as CxBreadcrumbItem,
-  P as CxButton,
-  G as CxButtonGroup,
-  h as CxCard,
-  w as CxCheckbox,
-  k as CxColorPicker,
-  E as CxCopyButton,
-  L as CxDetails,
-  j as CxDialog,
-  z as CxDivider,
-  q as CxDotPagination,
-  K as CxDotStatus,
-  W as CxDrawer,
-  Y as CxDropdown,
-  _ as CxEChart,
-  ee as CxElementClamp,
-  oe as CxFormatBytes,
-  te as CxFormatDate,
-  fe as CxFormatNumber,
-  se as CxFormatTime,
-  Ce as CxGrid,
-  le as CxGridItem,
-  ne as CxHeader,
-  ge as CxHubConnection,
-  be as CxIcon,
-  Te as CxIconButton,
-  Ae as CxIframe,
-  De as CxImage,
-  Pe as CxImageComparer,
-  Ge as CxInclude,
-  he as CxInput,
-  we as CxInputGroup,
-  ke as CxLineClamp,
-  Ee as CxMarkdown,
-  Le as CxMenu,
-  je as CxMenuItem,
-  ze as CxMenuLabel,
-  qe as CxMenuSection,
-  Ke as CxMutationObserver,
-  We as CxOption,
-  Ye as CxPagination,
-  _e as CxPopup,
-  ea as CxProgressBar,
-  oa as CxProgressRing,
-  ta as CxQrCode,
-  fa as CxRadio,
-  sa as CxRadioButton,
-  Ca as CxRadioCard,
-  la as CxRadioGroup,
-  na as CxRange,
-  ga as CxRating,
-  ba as CxRelativeTime,
-  Ta as CxResizeObserver,
-  Aa as CxSelect,
-  Da as CxSkeleton,
-  Pa as CxSpace,
-  Ga as CxSpinner,
-  ha as CxSplitPanel,
-  wa as CxStep,
-  ka as CxStepper,
-  Ea as CxSwitch,
-  La as CxTab,
-  ja as CxTabGroup,
-  qa as CxTabPanel,
-  za as CxTable,
-  Ka as CxTag,
-  Wa as CxTextarea,
-  Ya as CxTimecode,
-  _a as CxTooltip,
-  eo as CxTree,
-  ao as CxTreeItem,
-  ro as CxTypography,
-  xo as CxVideo,
-  mo as CxVisuallyHidden,
-  po as componentStyles,
-  uo as getAnimation,
+  b as CxAudio,
+  T as CxAvatar,
+  S as CxBadge,
+  D as CxBreadcrumb,
+  P as CxBreadcrumbItem,
+  G as CxButton,
+  h as CxButtonGroup,
+  w as CxCard,
+  k as CxCheckbox,
+  E as CxColorPicker,
+  L as CxCopyButton,
+  j as CxDetails,
+  z as CxDialog,
+  q as CxDivider,
+  K as CxDotPagination,
+  W as CxDotStatus,
+  Y as CxDrawer,
+  _ as CxDropdown,
+  ee as CxEChart,
+  oe as CxElementClamp,
+  te as CxFormatBytes,
+  fe as CxFormatDate,
+  se as CxFormatNumber,
+  Ce as CxFormatTime,
+  de as CxGrid,
+  ne as CxGridItem,
+  ge as CxHeader,
+  be as CxHubConnection,
+  Te as CxIcon,
+  Se as CxIconButton,
+  De as CxIframe,
+  Pe as CxImage,
+  Ge as CxImageComparer,
+  he as CxInclude,
+  we as CxInput,
+  ke as CxInputGroup,
+  Ee as CxLineClamp,
+  Le as CxMarkdown,
+  je as CxMenu,
+  ze as CxMenuItem,
+  qe as CxMenuLabel,
+  Ke as CxMenuSection,
+  We as CxMutationObserver,
+  Ye as CxOption,
+  _e as CxPagination,
+  ea as CxPopup,
+  oa as CxProgressBar,
+  ta as CxProgressRing,
+  fa as CxQrCode,
+  sa as CxRadio,
+  Ca as CxRadioButton,
+  da as CxRadioCard,
+  na as CxRadioGroup,
+  ga as CxRange,
+  ba as CxRating,
+  Ta as CxRelativeTime,
+  Sa as CxResizeObserver,
+  Da as CxSelect,
+  Pa as CxSkeleton,
+  Ga as CxSpace,
+  ha as CxSpinner,
+  wa as CxSplitPanel,
+  ka as CxStep,
+  Ea as CxStepper,
+  La as CxSwitch,
+  ja as CxTab,
+  za as CxTabGroup,
+  Ka as CxTabPanel,
+  qa as CxTable,
+  Wa as CxTag,
+  Ya as CxTextarea,
+  _a as CxTimecode,
+  eo as CxTooltip,
+  oo as CxTree,
+  ro as CxTreeItem,
+  xo as CxTypography,
+  mo as CxVideo,
+  po as CxVisuallyHidden,
+  uo as componentStyles,
+  no as getAnimation,
   t as getAnimationNames,
   x as getEasingNames,
-  lo as setAnimation,
-  no as setDefaultAnimation
+  io as setAnimation,
+  go as setDefaultAnimation
 };

package/library/components/audio.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/audio/audio'
+import _default from '../packages/atoms/src/components/audio/audio'
+export default _default

package/library/components/audio.js

@@ -0,0 +1,237 @@
+import { r as m, R as y } from "../chunks/resizable-component.styles.sAhMVN1H.js";
+import { c as v } from "../chunks/component.styles.CRO4Odto.js";
+import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as S } from "../chunks/i18n.DmmFsjwP.js";
+import { w as f } from "../chunks/watch.BCJD77bD.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 { 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.CHh2iNJJ.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;
+};
+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 {
+  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);
+  }
+  runConnectedCallback() {
+    this.hasUpdated && this.requestUpdate("src");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.srcLoadVersion++, this.cleanUp();
+  }
+  async handleSrcChange() {
+    await this.applySrc(this.src);
+  }
+  async applySrc(e) {
+    const t = ++this.srcLoadVersion;
+    if (this.isLoaded = !1, this.isPlaying = !1, !e) {
+      this.cleanUp();
+      return;
+    }
+    await this.waveformContainerAsync, !(t !== this.srcLoadVersion || !this.isConnected) && await this.setupWaveSurfer(e, t);
+  }
+  async handleWaveColorThemeChange() {
+    this.src && this.waveSurfer && (await this.updateComplete, this.waveSurfer.setOptions(this.setupColors()));
+  }
+  updated(e) {
+    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  }
+  onWaveSurferReady() {
+    this.isLoaded = !0, this.durationSeconds = this.waveSurfer.getDuration();
+  }
+  onWaveSurferPlay() {
+    this.isPlaying = !0, this.emit("cx-play");
+  }
+  onWaveSurferPause() {
+    this.isPlaying = !1, this.emit("cx-pause");
+  }
+  onWaveSurferTimeUpdate(e) {
+    this.currentTimeSeconds = e, this.emit("cx-time-update", {
+      detail: {
+        time: e
+      }
+    });
+  }
+  onWaveSurferFinish() {
+    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;
+  }
+  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");
+  }
+  /** Starts audio playback. */
+  play() {
+    this.waveSurfer?.play();
+  }
+  /** Pauses audio playback. */
+  pause() {
+    this.waveSurfer?.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")}`;
+  }
+  handlePlayButtonKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.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(
+        this.name,
+        () => p`<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
+};
+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);
+export {
+  a as default
+};

package/library/components/border-input-group.js

@@ -3,7 +3,7 @@ import p from "./space.js";
 import { n as u, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as h } from "../chunks/component.styles.CRO4Odto.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as x } from "../chunks/i18n.BABe9hN4.js";
+import { L as x } from "../chunks/i18n.DmmFsjwP.js";
 import { i as v, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import f from "./bicolor-picker.js";
 const g = v`.border-width{width:72px}`;