@orangelogic/design-system 2.104.0 → 2.105.0

package/library/components/video.js

@@ -1,11 +1,12 @@
 import { c as ps, a as Fn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as wb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { r as Sb, C as Cb, R as Mb } from "../chunks/image.DB68R-yp.js";
-import Db from "./resize-observer.js";
+import { C as Sb } from "../chunks/image.CR_LHEaY.js";
+import Cb from "./resize-observer.js";
+import { r as Mb, R as Db } from "../chunks/resizable-component.styles.sAhMVN1H.js";
 import { c as Pb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Lb } from "../chunks/debounce.CIEhztrj.js";
 import { c as Rb } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as Ib } from "../chunks/i18n.BABe9hN4.js";
+import { L as Ib } from "../chunks/i18n.DmmFsjwP.js";
 import { w as gn } from "../chunks/watch.BCJD77bD.js";
 import { i as Ob, x as Zc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as ki } from "../chunks/lib-cortex-element.CVMmyPMC.js";
@@ -46928,7 +46929,7 @@ var q3 = Object.defineProperty, X3 = Object.getOwnPropertyDescriptor, It = (e, t
     (s = e[a]) && (r = (n ? s(t, i, r) : s(r)) || r);
   return n && r && q3(t, i, r), r;
 };
-let wt = class extends Mb {
+let wt = class extends Db {
   constructor() {
     super(), this.localize = new Ib(this), this.src = "", this.name = "", this.nameSourceField = "", this.type = "", this.poster = "", this.autoplay = !1, this.loop = !1, this.muted = !1, this.showControls = !1, this.disablePictureInPicture = !1, this.disableRemotePlayback = !1, this.disableVolumePanel = !1, this.isLoaded = !1, this.isPlaying = !1, this.isError = !1, this.isFullscreen = !1, this.player = null, this.videoWidth = 0, this.videoHeight = 0, this.autoPlayTimeout = null, this.parsedName = "", this.formattedPoster = "", this.onPause = this.onPause.bind(this), this.onPlay = this.onPlay.bind(this), this.onTimeUpdate = this.onTimeUpdate.bind(this), this.onEnded = this.onEnded.bind(this), this.onSeeked = this.onSeeked.bind(this), this.onFullscreenChange = this.onFullscreenChange.bind(this), this.onLoadedMetadata = this.onLoadedMetadata.bind(this), this.onError = this.onError.bind(this);
   }
@@ -47127,10 +47128,10 @@ let wt = class extends Mb {
     )}</div></cx-resize-observer>`;
   }
 };
-wt.styles = [Pb, Sb, W3];
+wt.styles = [Pb, Mb, W3];
 wt.dependencies = {
-  "cx-image": Cb,
-  "cx-resize-observer": Db
+  "cx-image": Sb,
+  "cx-resize-observer": Cb
 };
 It([
   ao("#video-js-container")

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.104.0",
+  "version": "2.105.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/audio/audio.d.ts

@@ -0,0 +1,114 @@
+import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { CSSResultGroup } from 'lit';
+import { default as CxIconButton } from '../icon-button/icon-button';
+import { default as CxTypography } from '../typography/typography';
+
+/** A [lightColor, darkColor] tuple used for theme-aware waveform coloring. */
+type WaveColorPair = [string, string];
+/**
+ * @summary Audio player with waveform visualization.
+ *
+ * @event cx-play - Emitted when playback starts.
+ * @event cx-pause - Emitted when playback pauses.
+ * @event {{ currentTime: number }} cx-time-update - Emitted while the playback position changes.
+ * @event cx-ended - Emitted when playback reaches the end.
+ * @event {{ error: Error }} cx-error - Emitted when the audio fails to load.
+ *
+ * @csspart base - The main container.
+ * @csspart player - Row containing play button and waveform.
+ * @csspart waveform - WaveSurfer waveform container.
+ * @csspart footer - Time and filename row.
+ * @csspart time - Current time / duration display.
+ * @csspart filename - Audio filename label.
+ * @csspart play-button - The play/pause icon button.
+ *
+ * @cssproperty [--width=100%] - Component width.
+ * @cssproperty [--height=auto] - Component height.
+ * @cssproperty [--border=0px] - Border.
+ * @cssproperty [--border-radius=0px] - Border radius.
+ * @cssproperty [--background-color=white] - Background color.
+ * @cssproperty --waves-color - Waveform bar color. Default: blue.
+ * @cssproperty --text-color - Time/icon color. Default: dark.
+ * @cssproperty --margin-top - Top margin.
+ * @cssproperty --margin-right - Right margin.
+ * @cssproperty --margin-bottom - Bottom margin.
+ * @cssproperty --margin-left - Left margin.
+ */
+export default class CxAudio extends ResizableElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-icon-button': typeof CxIconButton;
+        'cx-typography': typeof CxTypography;
+    };
+    readonly localize: LocalizeController;
+    private readonly waveformContainerAsync;
+    private waveSurfer;
+    private srcLoadVersion;
+    /**
+     * The URL of the audio file to load.
+     */
+    src: string;
+    /**
+     * The filename shown below the time display.
+     */
+    name: string;
+    /**
+     * When true, playback starts automatically when the audio is loaded.
+     */
+    autoplay: boolean;
+    /**
+     * When true, playback loops back to the beginning when it ends.
+     */
+    loop: boolean;
+    /**
+     * CSS color for the waveform bars. Accepts a plain CSS color or `light-dark(lightColor, darkColor)`
+     * for theme-aware coloring. Defaults to `--cx-color-primary` if not set or if the value is invalid.
+     */
+    waveColor: WaveColorPair;
+    /** Whether the audio is currently playing. */
+    private isPlaying;
+    /** Whether the audio has finished loading and is ready for playback. */
+    private isLoaded;
+    /** Whether an error occurred while loading the audio. */
+    private isError;
+    /** Current playback position in seconds. */
+    private currentTimeSeconds;
+    /** Total duration in seconds. */
+    private durationSeconds;
+    constructor();
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    handleSrcChange(): Promise<void>;
+    protected applySrc(src: string): Promise<void>;
+    handleWaveColorThemeChange(): Promise<void>;
+    updated(changedProps: Map<string, unknown>): void;
+    private onWaveSurferReady;
+    private onWaveSurferPlay;
+    private onWaveSurferPause;
+    private onWaveSurferTimeUpdate;
+    private onWaveSurferFinish;
+    private onWaveSurferError;
+    private resolveColorValue;
+    private computeCursorColor;
+    private setupColors;
+    private setupWaveSurfer;
+    private attachWaveSurferEvents;
+    private cleanUp;
+    private handleSizeChange;
+    /** Starts audio playback. */
+    play(): void;
+    /** Pauses audio playback. */
+    pause(): void;
+    /** Toggles between play and pause. */
+    togglePlay(): void;
+    private formatTime;
+    private handlePlayButtonKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-audio': CxAudio;
+    }
+}
+export {};

package/library/packages/atoms/src/components/audio/audio.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/index.d.ts

@@ -3,6 +3,7 @@ export { default as CxAmChart } from './components/am-chart/am-chart';
 export { default as CxAnimatedImage } from './components/animated-image/animated-image';
 export { default as CxAnimation } from './components/animation/animation';
 export { default as CxArrayLineClamp } from './components/array-line-clamp/array-line-clamp';
+export { default as CxAudio } from './components/audio/audio';
 export { default as CxAvatar } from './components/avatar/avatar';
 export { default as CxBadge } from './components/badge/badge';
 export { default as CxBreadcrumb } from './components/breadcrumb/breadcrumb';

package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts

@@ -1,5 +1,7 @@
 import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
 import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
 import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
@@ -27,6 +29,8 @@ export default class CxAssetTransformationDialog extends CortexElement {
         'cx-button': typeof CxButton;
         'cx-cropper': typeof CxCropper;
         'cx-dialog': typeof CxDialog;
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
         'cx-icon-button': typeof CxIconButton;
         'cx-space': typeof CxSpace;
         'cx-spinner': typeof CxSpinner;

package/library/packages/organisms/src/content-builder/configs/audio.d.ts

@@ -0,0 +1,26 @@
+import { AssetVersion } from '../../../../types/src/asset-format-picker';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { default as CxSbAudio } from '../blocks/audio/audio';
+
+type Attribute = {
+    'asset-version'?: AssetVersion;
+    'data-width-percent': string;
+    'data-width-pixel': string;
+    'format'?: string;
+    'format-label'?: string;
+    'format-src'?: string;
+    name: CxSbAudio['name'];
+    'record-id'?: string;
+    'resize-direction': CxSbAudio['resizeDirection'];
+    src: CxSbAudio['src'];
+    'version-label'?: string;
+    'wave-color': string;
+    width: string;
+};
+declare const _default: {
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
+    defaultValue: Partial<Attribute>;
+    stylable: string[];
+};
+export default _default;

package/library/packages/organisms/src/content-builder/configs/index.d.ts

@@ -1,4 +1,5 @@
 export { default as accordion } from './accordion';
+export { default as audio } from './audio';
 export { default as button } from './button';
 export { default as carousel } from './carousel';
 export { default as colorSwatches } from './color-swatches';

package/library/packages/organisms/src/content-builder/configs-controller.d.ts

@@ -9,6 +9,20 @@ export default class ConfigsController {
         'data-constraints': boolean;
         'default-open-indexes': string;
         'multi-language': boolean;
+    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
+        'asset-version'?: import('../../../types/src/asset-format-picker').AssetVersion;
+        'data-width-percent': string;
+        'data-width-pixel': string;
+        format?: string;
+        'format-label'?: string;
+        'format-src'?: string;
+        name: import('./blocks/audio/audio').default["name"];
+        'record-id'?: string;
+        'resize-direction': import('./blocks/audio/audio').default["resizeDirection"];
+        src: import('./blocks/audio/audio').default["src"];
+        'version-label'?: string;
+        'wave-color': string;
+        width: string;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'asset-button-type': import('./blocks/button/button').default["assetType"];
         'asset-src': import('./blocks/button/button').default["assetSrc"];
@@ -273,6 +287,20 @@ export default class ConfigsController {
     }>[];
     getName(type: BlockType): string;
     getDefaultValue(type: BlockType): Partial<{
+        'asset-version'?: import('../../../types/src/asset-format-picker').AssetVersion;
+        'data-width-percent': string;
+        'data-width-pixel': string;
+        format?: string;
+        'format-label'?: string;
+        'format-src'?: string;
+        name: import('./blocks/audio/audio').default["name"];
+        'record-id'?: string;
+        'resize-direction': import('./blocks/audio/audio').default["resizeDirection"];
+        src: import('./blocks/audio/audio').default["src"];
+        'version-label'?: string;
+        'wave-color': string;
+        width: string;
+    }> | Partial<{
         'asset-button-type': import('./blocks/button/button').default["assetType"];
         'asset-src': import('./blocks/button/button').default["assetSrc"];
         'asset-type': import('./blocks/button/button').default["assetType"];

package/library/packages/organisms/src/content-builder/content-builder-config.d.ts

@@ -8,6 +8,9 @@ export declare const defaultBlockValue: {
         };
         components: undefined;
     };
+    BlockAudio: {
+        components: undefined;
+    };
     BlockButton: {
         components: {
             content: string;

package/library/packages/organisms/src/content-builder/plugins/audio.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
+
+declare const AudioPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
+export default AudioPlugin;

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export { default as AccordionPlugin } from './accordion';
+export { default as AudioPlugin } from './audio';
 export { default as ButtonPlugin } from './button';
 export { default as CarouselPlugin } from './carousel';
 export { default as ColorSwatchesPlugin } from './color-swatches';

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -72,7 +72,7 @@ export default class StyleController {
         checkedValue?: string | boolean;
         children?: import('../../../types/src/content-builder').PropertyConfig[];
         clearable?: boolean;
-        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "asset-format-picker" | "video-picker";
+        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "audio-picker" | "asset-format-picker" | "video-picker";
         cornerStyleKey?: {
             offsetX: string;
             offsetY: string;

package/library/packages/types/src/content-builder.d.ts

@@ -75,7 +75,7 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     checkedValue?: string | boolean;
     children?: PropertyConfig[];
     clearable?: boolean;
-    controlType: 'asset-transformation' | 'bicolor-picker' | 'border-input-group' | 'button-group' | 'checkbox' | 'checkbox-group' | 'color-swatch-picker' | 'corner-position-input-group' | 'download-format-picker' | 'file' | 'folder-picker' | 'gallery-picker' | 'group' | 'group-heading' | 'icon-picker' | 'image-picker' | 'input' | 'list-editor' | 'all-picker' | 'other-picker' | 'padding-input-group' | 'page-picker' | 'placeholder' | 'position-picker' | 'radio-card-group' | 'radio-group' | 'select' | 'shadow-input-group' | 'size-input-group' | 'switch' | 'table' | 'text' | 'asset-format-picker' | 'video-picker';
+    controlType: 'asset-transformation' | 'bicolor-picker' | 'border-input-group' | 'button-group' | 'checkbox' | 'checkbox-group' | 'color-swatch-picker' | 'corner-position-input-group' | 'download-format-picker' | 'file' | 'folder-picker' | 'gallery-picker' | 'group' | 'group-heading' | 'icon-picker' | 'image-picker' | 'input' | 'list-editor' | 'all-picker' | 'other-picker' | 'padding-input-group' | 'page-picker' | 'placeholder' | 'position-picker' | 'radio-card-group' | 'radio-group' | 'select' | 'shadow-input-group' | 'size-input-group' | 'switch' | 'table' | 'text' | 'audio-picker' | 'asset-format-picker' | 'video-picker';
     cornerStyleKey?: {
         offsetX: string;
         offsetY: string;
@@ -268,6 +268,7 @@ export type RTE_IMAGE = {
 export declare enum BlockType {
     Accordion = "BlockAccordion",
     Analytics = "BlockAnalytics",
+    Audio = "BlockAudio",
     Button = "BlockButton",
     Carousel = "BlockCarousel",
     ColorSwatches = "BlockColorSwatches",
@@ -285,7 +286,7 @@ export declare enum BlockType {
     Timeline = "BlockTimeline",
     Video = "BlockVideo"
 }
-export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.Divider | BlockType.FontKit | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
+export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Audio | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.Divider | BlockType.FontKit | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
 export declare enum DialogType {
     Carousel = "carousel",
     Gallery = "gallery"

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -88,7 +88,11 @@ export interface Translation extends DefaultTranslation {
     assetPreview: string;
     assets: string;
     audio: string;
+    audioFile: string;
+    audioFormat: string;
     audioGeneratingHelpText: string;
+    audioPlayer: string;
+    audioWavesColor: string;
     auto: string;
     autoCropping: string;
     autoOpenFirstSection: string;
@@ -306,6 +310,7 @@ export interface Translation extends DefaultTranslation {
     effects: string;
     emphasis: string;
     emptyAccordion: string;
+    emptyAudio: string;
     emptyBento: string;
     emptyCarousel: string;
     emptyGrid: string;
@@ -762,6 +767,7 @@ export interface Translation extends DefaultTranslation {
     text: string;
     textAlign: string;
     textAlignment: string;
+    textAndIconsColor: string;
     textColor: string;
     textEditor: string;
     textInput: string;