@orangelogic/design-system 2.56.0 → 2.57.0

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

@@ -1,7 +1,7 @@
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
-import { Component, StyleProps } from 'grapesjs';
+import { Component, DataRecord, StyleProps } from 'grapesjs';
 import { CxConfigForm } from '../config-form';
 
 export type CxContentBuilderConfigureEvent = CustomEvent<{
@@ -12,6 +12,7 @@ export type CxContentBuilderConfigureEvent = CustomEvent<{
         attributes: Record<string, string>;
         properties?: Record<string, unknown>;
         styleProps: StyleProps;
+        translations: Record<string, Record<string, string>>;
     };
     templateId: string;
 }>;
@@ -64,6 +65,19 @@ export default class CxConfigManager extends CortexElement {
      */
     templateName: string;
     templateId: string;
+    supportedLanguages: string[];
+    /**
+     * The default language of the translatable controls.
+     * This is used to store the default language of the translatable controls.
+     * @default 'en-us'
+     */
+    defaultLanguage: string;
+    /**
+     * The values of the translatable controls.
+     * This is used to store the values of the translatable controls.
+     * @default []
+     */
+    translatableControlValues: DataRecord[];
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -153,6 +167,17 @@ export default class CxConfigManager extends CortexElement {
      * @default false
      */
     isEditingTemplateSettings: boolean;
+    /**
+     * The values of the translatable controls.
+     * This is used to store the values of the translatable controls.
+     * @default {}
+     */
+    translatableControlValuesMap: Record<string, Record<string, string>>;
+    /**
+     * The list of input controls to render in the configuration form.
+     * These are the input controls that will support multiple languages.
+     */
+    translatableControls: PropertyConfig[];
     /**
      * Whether the template is editable.
      * This is used to determine if the user can save the settings as a template.
@@ -163,11 +188,13 @@ export default class CxConfigManager extends CortexElement {
     get isTemplateEditable(): boolean;
     constructor();
     private getFlattenTraits;
+    handleTraitsChange(): Promise<void>;
     handleComponentChange(): Promise<void>;
     private handleSave;
     private handleClose;
     show(): void;
     hide(): void;
+    private handleTranslatableValueChange;
     private handleChange;
     private handleFieldChange;
     render(): import('lit').TemplateResult<1>;

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

@@ -77,6 +77,7 @@ export default class CxGalleryConfig extends CortexElement {
     selectedPageLabel: string;
     private isThumbnailManuallySet;
     get showOpenInNewTab(): boolean;
+    get galleryPickerDialogTitle(): string;
     constructor();
     private apiGetTeamSpaceSpaceList;
     private apiGetPagesAndLinks;

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

@@ -5,6 +5,7 @@ type Attributes = {
     data: string;
     'data-constraints': boolean;
     'default-open-indexes': string;
+    'multi-language': boolean;
 };
 declare const _default: {
     configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;

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

@@ -6,6 +6,7 @@ type Attribute = {
     'can-copy': boolean;
     data: string;
     'max-col': string;
+    'multi-language': boolean;
     'show-codes': string;
     variant: CxColorSwatchGroupVariant;
 };

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

@@ -33,7 +33,9 @@ type Attribute = {
     'overflow-behavior': OverflowBehavior;
     records: string;
     'row-gap': string;
+    'show-all-label': string;
     'show-content-type': GalleryItemShowContentType;
+    'show-less-label': string;
     'slides-per-page': string;
     'source-variant': SourceVariant;
     src: string;

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

@@ -6,6 +6,7 @@ type Attribute = {
     data: string;
     'data-constraints': boolean;
     'hide-panel-variant': TabGroupHidePanelVariant;
+    'multi-language': boolean;
     'overflow-variant': TabGroupOverflowVariant;
     'tab-alignment': TabGroupAlignment;
     'use-max-panel-height': boolean;

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

@@ -4,6 +4,7 @@ import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 type Attributes = {
     data: string;
     'min-tab-width': string;
+    'multi-language': boolean;
     'navigation-arrows': boolean;
     'show-thumbnails': boolean;
     'tabs-per-page': number;

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

@@ -8,6 +8,7 @@ export default class ConfigsController {
         data: string;
         'data-constraints': boolean;
         'default-open-indexes': string;
+        'multi-language': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'asset-button-type': import('./blocks/button/button').default["assetType"];
         'asset-src': import('./blocks/button/button').default["assetSrc"];
@@ -69,6 +70,7 @@ export default class ConfigsController {
         'can-copy': boolean;
         data: string;
         'max-col': string;
+        'multi-language': boolean;
         'show-codes': string;
         variant: import('../../../types/src/color-swatch-group').CxColorSwatchGroupVariant;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
@@ -125,7 +127,9 @@ export default class ConfigsController {
         'overflow-behavior': import('../../../types/src/gallery').OverflowBehavior;
         records: string;
         'row-gap': string;
+        'show-all-label': string;
         'show-content-type': import('../../../types/src/gallery-item').GalleryItemShowContentType;
+        'show-less-label': string;
         'slides-per-page': string;
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
@@ -195,6 +199,7 @@ export default class ConfigsController {
         data: string;
         'data-constraints': boolean;
         'hide-panel-variant': import('../../../types/src/tab-group').TabGroupHidePanelVariant;
+        'multi-language': boolean;
         'overflow-variant': import('../../../types/src/tab-group').TabGroupOverflowVariant;
         'tab-alignment': import('../../../types/src/tab-group').TabGroupAlignment;
         'use-max-panel-height': boolean;
@@ -203,6 +208,7 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
         'min-tab-width': string;
+        'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
@@ -305,6 +311,7 @@ export default class ConfigsController {
         'can-copy': boolean;
         data: string;
         'max-col': string;
+        'multi-language': boolean;
         'show-codes': string;
         variant: import('../../../types/src/color-swatch-group').CxColorSwatchGroupVariant;
     } | Partial<{
@@ -358,7 +365,9 @@ export default class ConfigsController {
         'overflow-behavior': import('../../../types/src/gallery').OverflowBehavior;
         records: string;
         'row-gap': string;
+        'show-all-label': string;
         'show-content-type': import('../../../types/src/gallery-item').GalleryItemShowContentType;
+        'show-less-label': string;
         'slides-per-page': string;
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
@@ -379,6 +388,7 @@ export default class ConfigsController {
     } | {
         data: string;
         'min-tab-width': string;
+        'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;

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

@@ -24,9 +24,11 @@ export declare const pxMask: {
 };
 export declare const PROPERTY_CONTROL: Record<string, PropertyConfig>;
 export declare const STYLE_CONTROL: Record<string, PropertyConfig>;
+export declare const RTE_BLOCKS: BlockType[];
 export declare const AUTO_FOCUS_COMPONENTS: BlockType[];
 export declare const OMITTED_ATTRIBUTES: string[];
 export declare const OMITTED_PROPERTIES: never[];
 export declare const BLOCK_CAROUSEL_LIMITED_BLOCKS: BlockType[];
 export declare const NEWLY_ADDED_COMPONENT_DELAY = 500;
 export declare const OPEN_ON_NEWLY_ADDED_COMPONENT: BlockType[];
+export declare const MULTI_LANGUAGE_BLOCKS: BlockType[];

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

@@ -93,6 +93,16 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     allowDuplicateBlocks: boolean;
+    /**
+     * The default language of the content builder.
+     * This is the language that will be used to store the translatable texts.
+     */
+    defaultLanguage: string;
+    /**
+     * The list of languages available in the content builder.
+     * This is the list of languages that will be used to store the translatable texts.
+     */
+    supportedLanguages: string[];
     /**
      * Mode of the content builder
      * This determines the mode in which the content builder operates.
@@ -129,9 +139,11 @@ export default class CxContentBuilder extends CortexElement {
     private toolbar;
     private toolbarActive;
     private childSelected;
+    private mappedSupportedLanguages;
     private mousePosition;
     private _teamSpaceRoles;
     get teamSpaceRoles(): TeamSpaceRole[];
+    get mappedDefaultLanguage(): string;
     private canvasDocument;
     /**
      * Data source manager instance
@@ -147,8 +159,12 @@ export default class CxContentBuilder extends CortexElement {
     private nextMapHoveredBadgeState;
     get isDesigner(): boolean;
     get isTemplateEditable(): boolean;
+    get isMultiLanguage(): boolean;
     storeTemplate(id: string, data: Record<string, any>, update?: boolean): void;
+    storeTranslatableText(id: string, data: string): void;
+    storeTranslatableAttribute(id: string, data: Record<string, Record<string, string>>): void;
     private updateFrameSize;
+    handleSupportedLanguagesChange(): void;
     handleDeviceChange(): void;
     handleContainerDropdownsChange(): void;
     handleHoveredComponentChange(): Promise<void>;
@@ -205,7 +221,8 @@ export default class CxContentBuilder extends CortexElement {
     deselectAll(): void;
     tryToGetSelectedComponent(): Component | undefined;
     private fetchTeamSpaceRoles;
-    private updateDataSourceEntries;
+    private updateTranslatableTextsDataSourceEntries;
+    private updateTemplatesDataSourceEntries;
     private getHoveredComponentPlacement;
     private mapHoveredComponent;
     private handleCanvasMouseMove;
@@ -222,7 +239,7 @@ export default class CxContentBuilder extends CortexElement {
      * if their template ID matches the one from the data record.
      * @param record - The data record containing the new attributes and components.
      */
-    private handleDataSourceChange;
+    private handleTemplatesDataSourceChange;
     private handleAddBlockClick;
     initBuilder(): Promise<void>;
     constructor();

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

@@ -1,12 +1,5 @@
 import { BlockType, PropertyConfig } from '../../../types/src/content-builder';
-import { Component } from 'grapesjs';
 
 export declare function getTemplateClass(templateId: string): string;
-export declare function getTemplateChildClass(childId: string): string;
-export declare function getTemplateChildRule(templateId: string, childId: string): string;
-/**
- * This function generates a unique ID for a template child component.
- */
-export declare function getTemplateChildId(component: Component): string;
 export declare function getContentConfigs(traits: PropertyConfig[], adHocProperties: string[]): string[];
 export declare function getLimitedBlocks(blockType: BlockType): BlockType[];

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

@@ -5,6 +5,7 @@ import { Component, ComponentDefinition, ComponentView, ComponentViewDefinition,
 
 export type EditorPluginOptions = {
     localize: LocalizeController;
+    multiLanguage?: boolean;
     toolbarConfigs?: ToolbarConfiguration;
 };
 type BlockPluginOptions = {

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

@@ -16,9 +16,9 @@ export default class StyleController {
         id: string;
         unit?: string | undefined;
         attributes?: Record<string, any> | undefined;
-        default?: any;
         max?: number | undefined;
         min?: number | undefined;
+        default?: any;
         text?: string | undefined;
         placeholder?: string;
         setValue?: ((props: {
@@ -119,6 +119,8 @@ export default class StyleController {
         };
         skipShowCheck?: boolean;
         tab?: "content" | "styling" | "effects";
+        translatable?: boolean;
+        translateGroup?: string;
         type: "attribute" | "property" | "style" | "decorative";
         uncheckedValue?: string | boolean;
         useSearchTerm?: boolean;

package/library/packages/types/src/color-swatch.d.ts

@@ -4,6 +4,7 @@ export declare enum CxColorSwatchVariant {
     Oval = "oval"
 }
 export type ColorSwatchData = {
+    [key: `name-${string}`]: string;
     cmyk?: string;
     color: string;
     hex?: string;

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

@@ -123,6 +123,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
      */
     skipShowCheck?: boolean;
     tab?: 'content' | 'styling' | 'effects';
+    translatable?: boolean;
+    translateGroup?: string;
     type: 'attribute' | 'property' | 'style' | 'decorative';
     uncheckedValue?: string | boolean;
     useSearchTerm?: boolean;
@@ -266,3 +268,8 @@ export type Link = {
 export type ToolbarConfiguration = {
     allowDuplicateBlocks?: boolean;
 };
+export declare enum DataSourceId {
+    Templates = "TEMPLATES",
+    TranslatableAttributes = "TRANSLATABLE_ATTRIBUTES",
+    TranslatableTexts = "TRANSLATABLE_TEXTS"
+}

package/library/packages/types/src/table.d.ts

@@ -360,7 +360,7 @@ export interface IRow extends ICoreFeature {
     initialized: boolean;
     isDisplayed(): boolean;
     manualHeight: boolean;
-    modules: Record<string, any>;
+    modules: RowModules;
     moveToRow(to: IRow, before?: boolean): void;
     nextRow(): IRow | false;
     normalizeHeight(force?: boolean): void;
@@ -1027,6 +1027,10 @@ export type DataTreeConfig = {
     open: boolean;
     parent: any | false;
 };
+export type RowModules = {
+    dataTree?: DataTreeConfig;
+    [key: string]: any;
+};
 export interface OptionsDataTree {
     /** To enable data trees in your table, set the dataTree property to true in your table constructor: */
     dataTree?: boolean;
@@ -2924,4 +2928,12 @@ export interface HeaderFilterFunc {
 }
 export type LangObject = Record<string, any>;
 export type TableSelector = string | HTMLElement | ITabulator | TableSelector[];
+export type SavedSearchItem = {
+    recordID: string;
+    name: string;
+};
+export type SavedSearchAPIResponse = {
+    items: SavedSearchItem[];
+    totalCount: number;
+};
 export {};

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

@@ -18,6 +18,7 @@ export interface ExistsOptions {
  * lowercase.
  */
 export declare function dir(host: ReactiveControllerHost & HTMLElement): string;
+export declare function registerDefaultTranslation(...translation: Translation[]): void;
 /** Registers one or more translations */
 export declare function registerTranslation(...translation: Translation[]): void;
 /** Updates all localized elements that are currently connected */
@@ -61,6 +62,7 @@ export declare class LocalizeController<UserTranslation extends Translation = De
     exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
     /** Outputs a translated term. */
     term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
+    languageName(language: string): string;
     /** Outputs a localized date in the specified format. */
     date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
     /** Outputs a localized number in the specified format. */

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

@@ -21,14 +21,20 @@ export interface Translation extends DefaultTranslation {
     activeTextColor: string;
     adaptive: string;
     add: string;
+    addAssetCard: string;
     addBlock: string;
+    addCard: string;
     addChapter: string;
     addColor: string;
     addColumn: string;
     addCurrent: string;
+    addFolderCard: string;
     addLimitExceeded: (limit: number) => string;
+    addPageCard: string;
     addRemoveLink: string;
     addSection: string;
+    addSlide: string;
+    addSpaceCard: string;
     addTab: string;
     addText: string;
     addUrl: string;
@@ -75,7 +81,7 @@ export interface Translation extends DefaultTranslation {
     autoSlide: string;
     automatic: string;
     autoplay: string;
-    autoplayHelp: string;
+    autoplayHelpText: string;
     back: string;
     background: string;
     backgroundColor: string;
@@ -107,7 +113,11 @@ export interface Translation extends DefaultTranslation {
     card: string;
     cardContent: string;
     cardType: string;
-    cardTypeHelpText: (cardType: string) => string;
+    cardTypeHelpTextAsset: string;
+    cardTypeHelpTextFolder: string;
+    cardTypeHelpTextLink: string;
+    cardTypeHelpTextPage: string;
+    cardTypeHelpTextSpace: string;
     cards: string;
     cardsPerRow: string;
     cardsWillBeAddedAutomaticallyFromTheSelectedFolder: string;
@@ -137,6 +147,7 @@ export interface Translation extends DefaultTranslation {
     clickToCopy: string;
     close: string;
     code: string;
+    collapseButtonText: string;
     color: string;
     colorNameWillAppearInSwatch: string;
     colorOfTotal: (index: number, total: number) => string;
@@ -160,7 +171,7 @@ export interface Translation extends DefaultTranslation {
     connectionURLInput: string;
     constraints: string;
     content: string;
-    contentBuilderBlockSettingsHelp: string;
+    contentBuilderBlockSettingsHelpText: string;
     contentHelpText: string;
     copied: string;
     copy: string;
@@ -229,20 +240,27 @@ export interface Translation extends DefaultTranslation {
     easeOutQuad: string;
     easing: string;
     edit: string;
+    editAssetCard: string;
+    editCard: string;
     editCellProperties: string;
     editCellsProperties: string;
     editChapter: string;
     editChapters: string;
     editColor: string;
+    editFolderCard: string;
     editImage: string;
     editLink: string;
+    editPageCard: string;
     editSection: string;
+    editSlide: string;
+    editSpaceCard: string;
     editTableProperties: string;
     editTemplate: string;
     effect: string;
     effectJumpHelpText: string;
     effectTextRevealHelpText: string;
     effectZoomHelpText: string;
+    effects: string;
     emphasis: string;
     emptyAccordion: string;
     emptyBento: string;
@@ -262,6 +280,7 @@ export interface Translation extends DefaultTranslation {
     executeACommand: string;
     exitFullscreen: string;
     expandAssetInFullScreen: string;
+    expandButtonText: string;
     expo: string;
     export: string;
     exportAsCsv: string;
@@ -299,8 +318,6 @@ export interface Translation extends DefaultTranslation {
     gallery: string;
     galleryCardNthOfCards: (index: number, count: number) => string;
     galleryOfNSlides: (count: number) => string;
-    galleryPickerAddCardButton: (dialogVariant: string) => string;
-    galleryPickerDialogTitle: (itemVariant: GalleryItemCardType | string, isEdit: boolean) => string;
     galleryPickerMissingSourceValidationMessage: (item: GalleryItemCardType) => string;
     gap: string;
     general: string;
@@ -369,7 +386,7 @@ export interface Translation extends DefaultTranslation {
     lineHeight: string;
     linear: string;
     link: string;
-    linkHelp: string;
+    linkHelpText: string;
     listOfColors: string;
     listOfFonts: string;
     listOfSections: string;
@@ -380,11 +397,11 @@ export interface Translation extends DefaultTranslation {
     logs: string;
     loop: string;
     male: string;
-    margin: string;
     marginBottom: string;
     marginLeft: string;
     marginRight: string;
     marginTop: string;
+    margins: string;
     markerImages: string;
     markersPerScreen: string;
     max: string;
@@ -419,11 +436,13 @@ export interface Translation extends DefaultTranslation {
     newVersionAvailable: (version: string) => string;
     next: string;
     nextSlide: string;
+    noCardsAddedYet: string;
     noDataAvailable: string;
     noDownloads: string;
     noDownloadsMessage: string;
-    noItemsAddedYet: (dialog: string) => string;
+    noPalette: string;
     noResults: string;
+    noSlidesAddedYet: string;
     noSourceUrlProvided: string;
     noTemplatesAvailableForContentTeamHelpText: string;
     nonAcceptedExtension: (extensions: string[]) => string;
@@ -530,6 +549,8 @@ export interface Translation extends DefaultTranslation {
     save: string;
     saveAllPendingEffects: string;
     saveAsNewTemplate: string;
+    saveReport: string;
+    savedSearches: string;
     scale: string;
     scroll: string;
     scrollHint: string;
@@ -598,6 +619,7 @@ export interface Translation extends DefaultTranslation {
     stretchesToFillTheContainer: string;
     strikethrough: string;
     style: string;
+    styling: string;
     subscript: string;
     superscript: string;
     syncing: string;
@@ -625,7 +647,7 @@ export interface Translation extends DefaultTranslation {
     thickness: string;
     thousandsSeparator: string;
     thumbnail: string;
-    thumbnailHelp: string;
+    thumbnailHelpText: string;
     timeBased: string;
     timeFormat: string;
     timeline: string;
@@ -646,6 +668,7 @@ export interface Translation extends DefaultTranslation {
     transitionDuration: string;
     transitionToExisting: string;
     transitionType: string;
+    translation: string;
     trim: string;
     tuneDisabled: string;
     txtOnly: string;

package/library/packages/utils/src/string/string.d.ts

@@ -1,3 +1,4 @@
+import { GalleryItemCardType } from '../../../types/src/gallery-item';
 import { TimecodeMode } from '../../../types/src/video-editor';
 
 /**
@@ -115,3 +116,4 @@ export declare function padPath(path: string): string;
 export declare function formatTimeToSeconds(timeString: string, options?: TimeFormatOptions): number;
 export declare function extractExtension(filename: string): string | null;
 export declare function sanitizeHTML(html: string): string;
+export declare function isGalleryItemCardType(value: unknown): value is GalleryItemCardType;