@orangelogic/design-system 2.35.0 → 2.36.0

package/library/package.json

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

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

@@ -43,6 +43,8 @@ export default class CxTab extends CortexElement {
     first: boolean;
     /** Whether the timeline item is the last item in the timeline. */
     last: boolean;
+    /** Whether the timeline item is the only item in the pagination page. */
+    single: boolean;
     runFirstUpdated(): void;
     private handleCloseClick;
     handleActiveChange(): void;

package/library/packages/atoms/src/components/tab-group/tab-group.d.ts

@@ -171,12 +171,13 @@ export default class CxTabGroup extends CortexElement {
     private scrollFromStart;
     updateScrollControls(): void;
     syncIndicator(): void;
-    handleVariantChange(): void;
+    handleVariantChange(): Promise<void>;
     handleOverflowVariantChange(): void;
     handleDropdownLabelChange(): void;
     handleAbsoluteHeightChange(): void;
     handleTabAlignmentChange(): void;
     handleTabsPerPageChange(): Promise<void>;
+    handleActivePaginationIndexChange(): void;
     /**
      * Setup ResizeObserver for all panels when keepHiddenHeight is enabled
      */

package/library/packages/events/src/cx-tab-group-pagination-change.d.ts

@@ -0,0 +1,8 @@
+export type CxTabGroupPaginationChangeEvent = CustomEvent<{
+    index: number;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-tab-group-pagination-change': CxTabGroupPaginationChangeEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -113,6 +113,7 @@ export * from './cx-show';
 export * from './cx-slide-change';
 export * from './cx-start';
 export * from './cx-swatch-add';
+export * from './cx-tab-group-pagination-change';
 export * from './cx-tab-hide';
 export * from './cx-tab-show';
 export * from './cx-table-advanced-search-click';

package/library/packages/molecules/src/timeline/timeline.d.ts

@@ -34,8 +34,10 @@ export default class CxTimeline extends CortexElement {
      * The number of tabs per page. This applies when overflow variant is pagination.
      */
     tabsPerPage: number;
+    private activePaginationIndex;
     private handlePreviousClick;
     private handleNextClick;
+    private handlePaginationChange;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -9,5 +9,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Attributes;
+    stylable: string[];
 };
 export default _default;

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

@@ -9,5 +9,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -31,5 +31,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
+    stylable: string[];
 };
 export default _default;

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

@@ -41,5 +41,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
+    stylable: string[];
 };
 export default _default;

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

@@ -12,5 +12,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -9,5 +9,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Attributes;
+    stylable: string[];
 };
 export default _default;

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

@@ -11,5 +11,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
+    stylable: string[];
 };
 export default _default;

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

@@ -7,5 +7,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -21,5 +21,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
+    stylable: string[];
 };
 export default _default;

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

@@ -44,5 +44,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Partial<Attribute>;
+    stylable: string[];
 };
 export default _default;

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

@@ -14,5 +14,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -48,5 +48,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -1,5 +1,8 @@
 import { PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 
-declare const configs: (localize: LocalizeController) => PropertyConfig[];
-export default configs;
+declare const _default: {
+    configs: (localize: LocalizeController) => PropertyConfig[];
+    stylable: string[];
+};
+export default _default;

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

@@ -12,5 +12,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -13,5 +13,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -7,5 +7,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
+    stylable: string[];
 };
 export default _default;

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

@@ -10,5 +10,6 @@ type Attributes = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
     defaultValue: Attributes;
+    stylable: string[];
 };
 export default _default;

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

@@ -43,5 +43,6 @@ type Attribute = {
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
     defaultValue: Partial<Attribute>;
+    stylable: string[];
 };
 export default _default;

package/library/packages/organisms/src/content-builder/{configsController.d.ts → configs-controller.d.ts}

@@ -417,4 +417,5 @@ export default class ConfigsController {
         src: import('./blocks/video/video').default["src"];
         width: import('./blocks/video/video').default["width"];
     }>;
+    getStylable(type: BlockType): string[];
 }

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

@@ -1,14 +1,5 @@
-import { default as CxDetailsGroup } from '../../../../molecules/src/details-group/details-group.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxDetailsGroup['tagName'];
-};
-declare const AccordionPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const AccordionPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default AccordionPlugin;

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

@@ -1,15 +1,7 @@
-import { default as CxDashboardIframe } from '../../../../molecules/src/dashboard-iframe/dashboard-iframe.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxDashboardIframe['tagName'];
-};
-declare const AnalyticsPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
+declare const AnalyticsPlugin: (editor: Editor, editorOptions: EditorPluginOptions & {
     pageId: string;
-    toolbarConfigs?: ToolbarConfiguration;
 }) => void;
 export default AnalyticsPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxSbButton } from '../blocks/button/button';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxSbButton['tagName'];
-};
-declare const ButtonPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const ButtonPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default ButtonPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxGallery } from '../blocks/gallery/gallery';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxGallery['tagName'];
-};
-declare const CarouselPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const CarouselPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default CarouselPlugin;

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

@@ -1,15 +1,5 @@
-import { default as CxColorSwatchGroup } from '../../color-swatch-group/color-swatch-group.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-export interface Options {
-    id: string;
-    tagName: CxColorSwatchGroup['tagName'];
-    variant?: CxColorSwatchGroup['variant'];
-}
-declare const ColorSwatchesPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const ColorSwatchesPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default ColorSwatchesPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxColumnGroup } from '../blocks/column-group/column-group';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxColumnGroup['tagName'];
-};
-declare const ColumnGroupPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const ColumnGroupPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default ColumnGroupPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxColumn } from '../blocks/column/column';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxColumn['tagName'];
-};
-declare const BlockPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
-export default BlockPlugin;
+declare const ColumnPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
+export default ColumnPlugin;

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

@@ -1,14 +1,5 @@
-import { default as CxDivider } from '../../../../atoms/src/components/divider/divider.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxDivider['tagName'];
-};
-declare const DividerPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const DividerPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default DividerPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxFontKit } from '../blocks/font-kit/font-kit';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxFontKit['tagName'];
-};
-declare const FontKitPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const FontKitPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default FontKitPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxGallery } from '../blocks/gallery/gallery';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxGallery['tagName'];
-};
-declare const GalleryPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const GalleryPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default GalleryPlugin;

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

@@ -1,14 +1,5 @@
-import { default as CxHeader } from '../../../../atoms/src/components/header/header.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxHeader['tagName'];
-};
-declare const HeaderPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const HeaderPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default HeaderPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxImage } from '../blocks/image/image';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxImage['tagName'];
-};
-declare const ImagePlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const ImagePlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default ImagePlugin;

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

@@ -0,0 +1,20 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { BlockType, ToolbarConfiguration } from '../../../../types/src/content-builder';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
+import { Component, ComponentDefinition, ComponentView, ComponentViewDefinition, Editor } from 'grapesjs';
+
+export type EditorPluginOptions = {
+    localize: LocalizeController;
+    toolbarConfigs?: ToolbarConfiguration;
+};
+type BlockPluginOptions = {
+    extend?: string;
+    id: BlockType;
+    init?: (model: Component) => void;
+    isComponent?: (el: Element) => boolean;
+    removed?: (model: Component) => void;
+    tagName: string;
+    view?: (Partial<ComponentViewDefinition> & ThisType<ComponentViewDefinition & ComponentView<Component>>);
+};
+declare const createPlugin: <T extends CortexElement>(editor: Editor, editorOptions: EditorPluginOptions, blockOptions: BlockPluginOptions, extraAttributes?: Record<string, unknown>, overriddenDefaults?: Partial<ComponentDefinition>) => void;
+export default createPlugin;

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

@@ -1,14 +1,5 @@
-import { default as CxSearchBox } from '../../../../molecules/src/search-box/search-box.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-type Options = {
-    id: string;
-    tagName: CxSearchBox['tagName'];
-};
-declare const SearchBoxPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const SearchBoxPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default SearchBoxPlugin;

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

@@ -1,14 +1,5 @@
-import { default as CxDataTabGroup } from '../../../../molecules/src/data-tab-group/data-tab-group.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-export type Options = {
-    id: string;
-    tagName: CxDataTabGroup['tagName'];
-};
-declare const TabsPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const TabsPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default TabsPlugin;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxText } from '../blocks/text/text';
+import { EditorPluginOptions } from './plugin-factory';
 
-export type Options = {
-    id: string;
-    tagName: CxText['tagName'];
-};
-declare const TextPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const TextPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default TextPlugin;

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

@@ -1,14 +1,5 @@
-import { default as CxTimeline } from '../../../../molecules/src/timeline/timeline.ts';
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
 
-export type Options = {
-    id: string;
-    tagName: CxTimeline['tagName'];
-};
-declare const TimelinePlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const TimelinePlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default TimelinePlugin;

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

@@ -0,0 +1,7 @@
+import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { Component, StyleProps } from 'grapesjs';
+import { default as _delay } from 'lodash-es/delay';
+
+export default function parseDetails<T extends CortexElement>(model: Component, timerId: WeakMap<Component, ReturnType<typeof _delay>>, columnOptions?: {
+    style?: StyleProps;
+}): void;

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

@@ -1,14 +1,5 @@
-import { ToolbarConfiguration } from '../../../../types/src/content-builder';
-import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
 import { Editor } from 'grapesjs';
-import { default as CxVideo } from '../blocks/video/video';
+import { EditorPluginOptions } from './plugin-factory';
 
-export type Options = {
-    id: string;
-    tagName: CxVideo['tagName'];
-};
-declare const VideoPlugin: (editor: Editor, opts: Partial<Options> & {
-    localize: LocalizeController;
-    toolbarConfigs?: ToolbarConfiguration;
-}) => void;
+declare const VideoPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default VideoPlugin;

package/library/packages/organisms/src/video-editor/components/video-editor-tracks/video-editor-tracks.d.ts

@@ -8,10 +8,10 @@ import { default as Sortable } from 'sortablejs';
 import { default as CxVideoEditorTrack } from '../video-editor-track/video-editor-track';
 
 export type CxVideoEditorTracksSelectEvent = CustomEvent<{
-    recordIDs: string[];
+    ids: string[];
 }>;
 export type CxVideoEditorTracksTransitionSelectEvent = CustomEvent<{
-    recordIDs: string[];
+    ids: string[];
 }>;
 export type CxVideoEditorTracksReorderEvent = CustomEvent<{
     subClips: Array<Partial<SubClip>>;

package/library/packages/organisms/src/video-editor/video-editor.d.ts

@@ -20,7 +20,7 @@ export type CxVideoEditorAction = CustomEvent<{
     value?: any;
 }>;
 export type CxVideoEditorTrackChange = CustomEvent<{
-    track: Pick<SubClip, 'crop' | 'recordID' | 'rotation' | 'startPosition' | 'stopPosition'>;
+    track: Pick<SubClip, 'crop' | 'id' | 'rotation' | 'startPosition' | 'stopPosition'>;
 }>;
 declare global {
     interface GlobalEventHandlersEventMap {
@@ -33,8 +33,8 @@ declare global {
  *
  * @event {{ time: number }} cx-time-update - Fired when the user seeks to a new time in the video.
  * @event {{ action: VideoEditorToolbarActions }} cx-video-editor-action - Fired when a toolbar action is triggered.
- * @event {{ recordIDs: string[] }} cx-video-editor-tracks-select - Fired when tracks are selected.
- * @event {{ recordID: string }} cx-video-editor-tracks-transitions-select - Fired when a transition is selected.
+ * @event {{ ids: string[] }} cx-video-editor-tracks-select - Fired when tracks are selected.
+ * @event {{ ids: string[] }} cx-video-editor-tracks-transitions-select - Fired when a transition is selected.
  *
  * @typedef VideoEditorToolbarActions - {'crop' | 'delete' | 'export' | 'redo' | 'rotate' | 'save' | 'transition' | 'trim' | 'undo'}
  */

package/library/packages/types/src/tab-group.d.ts

@@ -15,7 +15,8 @@ export declare enum TabGroupActivation {
 }
 export declare enum TabGroupVariant {
     Button = "button",
-    Default = "default"
+    Default = "default",
+    Timeline = "timeline"
 }
 export declare enum TabGroupOverflowVariant {
     Dropdown = "dropdown",

package/library/packages/types/src/video-editor.d.ts

@@ -12,6 +12,7 @@ export type SubClip = {
         y: number;
     };
     frameRate: number;
+    id: string;
     label: string;
     muted: boolean;
     playbackSpeed: number;