@orangelogic/design-system 2.19.0-ci.5

package/library/packages/tools/src/fetch-image/fetch-image.d.ts

@@ -0,0 +1,40 @@
+import { GalleryItem } from '../../../types/src/gallery-item';
+import { ReactiveController, ReactiveElement } from 'lit';
+
+export type ExtendedGalleryItem = GalleryItem & {
+    [key: string]: string | undefined;
+};
+export declare class FetchImageController implements ReactiveController {
+    private readonly host;
+    private data;
+    private folderId;
+    private totalCount;
+    constructor(host: ReactiveElement);
+    get totalDataCount(): number;
+    fetchImages({ end, extraFields, start, }: {
+        end: number;
+        extraFields: string[];
+        start: number;
+    }): Promise<ExtendedGalleryItem[] | undefined>;
+    fetchImagesInFolderBySlide({ activeSlide, extraFields, folderId, forceRefetch, noPlaceholders, }: {
+        activeSlide: number;
+        extraFields?: string[];
+        folderId: string;
+        forceRefetch?: boolean;
+        noPlaceholders?: boolean;
+    }): Promise<ExtendedGalleryItem[]>;
+    fetchImagesByIDs({ extraFields, recordIds, }: {
+        extraFields?: string[];
+        recordIds: string[];
+    }): Promise<ExtendedGalleryItem[]>;
+    fetchImagesInFolderByPage({ extraFields, folderId, forceRefetch, noPlaceholders, page, pageSize, }: {
+        extraFields?: string[];
+        folderId: string;
+        forceRefetch?: boolean;
+        noPlaceholders?: boolean;
+        page: number;
+        pageSize?: number;
+    }): Promise<ExtendedGalleryItem[]>;
+    hostConnected?(): void;
+    hostDisconnected?(): void;
+}

package/library/packages/types/src/3d-viewer.d.ts

@@ -0,0 +1,32 @@
+export declare enum SwitchType {
+    Grid = "grid",
+    Shadows = "shadows",
+    Textures = "textures",
+    Wireframe = "wireframe"
+}
+export declare enum SelectEvent {
+    Animation = "animation",
+    Environment = "environment",
+    Speed = "speed",
+    Variant = "variant"
+}
+declare global {
+    interface Window {
+        BABYLON: any;
+        INSPECTOR: any;
+    }
+}
+export type { Scene } from '@babylonjs/core/scene';
+export type { AnimationGroup } from '@babylonjs/core/Animations/animationGroup';
+export type { Inspector } from '@babylonjs/inspector';
+export type { FramingBehavior } from '@babylonjs/core/Behaviors/Cameras/framingBehavior';
+export type { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+export type { Camera } from '@babylonjs/core/Cameras/camera';
+export type { Mesh } from '@babylonjs/core/Meshes/mesh';
+export type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+export type { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine';
+export type { Engine } from '@babylonjs/core/Engines/engine';
+export type { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';
+export type { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
+export type { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+export type { WebXRDefaultExperience } from '@babylonjs/core/XR/webXRDefaultExperience';

package/library/packages/types/src/asset-click-action.d.ts

@@ -0,0 +1,23 @@
+export declare enum ClickAction {
+    DoNothing = "do-nothing",
+    DownloadAsset = "download-asset",
+    ExpandAssetInFullScreen = "expand-asset-in-full-screen",
+    OpenAssetOverview = "open-asset-overview",
+    OpenLink = "open-link",
+    OpenPage = "open-page",
+    OpenSpace = "open-space",
+    ShareAsset = "share-asset",
+    ShowAssetInLibrary = "show-asset-in-library"
+}
+export type AssetFormat = {
+    _3DFormats?: string[];
+    audioFormats?: string[];
+    customExtraImageFormats?: string[];
+    customGraphicFormats?: string[];
+    customImageFormats?: string[];
+    extraImageFormats?: string[];
+    graphicFormats?: string[];
+    imageFormats?: string[];
+    multimediaFormats?: string[];
+    videoFormats?: string[];
+};

package/library/packages/types/src/asset-data-display.d.ts

@@ -0,0 +1,5 @@
+export { GalleryItemContentPosition as AssetDataDisplayPosition } from './gallery-item';
+export declare enum AssetDataDisplayFetchMode {
+    Automatic = "automatic",
+    Manual = "manual"
+}

package/library/packages/types/src/asset-link-format.d.ts

@@ -0,0 +1,85 @@
+export declare enum Unit {
+    AspectRatio = "%",
+    Pixel = "px"
+}
+export declare const cropModes: {
+    label: string;
+    value: string;
+}[];
+export declare const INPUT_DEBOUNCE_DELAY = 1000;
+export type Proxy = {
+    cdnName: string | null;
+    extension: string | null;
+    formatHeight: number;
+    formatWidth: number;
+    height: number;
+    id: string;
+    permanentLink: string | null;
+    proxyLabel: string;
+    proxyName: string;
+    width: number;
+};
+export declare enum MediaType {
+    Album = "Album",
+    Audio = "Audio",
+    Image = "Image",
+    Multimedia = "Multimedia",
+    Story = "Story",
+    Video = "Video",
+    Widget = "Widget"
+}
+export type Asset = {
+    allowATSLink?: boolean;
+    docSubType: string;
+    docType: MediaType;
+    extension: string;
+    height?: string;
+    id: string;
+    identifier: string;
+    imageUrl: string;
+    name: string;
+    originalUrl: string;
+    scrubUrl: string;
+    size: string;
+    tags: string;
+    width?: string;
+};
+export declare enum TransformationAction {
+    Crop = "Crop",
+    Metadata = "Metadata",
+    Proxy = "Proxy",
+    Quality = "Quality",
+    Resize = "Resize",
+    Rotate = "Rotate"
+}
+export type Transformation = {
+    key: TransformationAction;
+    value: {
+        disabledSize?: boolean;
+        height?: number;
+        keepMetadata?: boolean;
+        mode?: string;
+        quality?: number;
+        rotation?: number;
+        unit?: Unit;
+        width?: number;
+        x?: number;
+        y?: number;
+    };
+};
+export type Parameter = {
+    key: string;
+    value: string;
+};
+export type CropMode = {
+    auto?: boolean;
+    disabledSize?: boolean;
+    label: string;
+    value: string;
+};
+export type FocusMode = {
+    auto?: boolean;
+    label: string;
+    value: string;
+};
+export type DefaultFocusMode = 'manual' | 'center';

package/library/packages/types/src/bento-grid.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Always: every cell will fill whole column no matter the content size
+ * None: normal behavior of bento grid
+ * Responsive: cell will fill when responsive breakpoint is reached
+ */
+export declare enum Filler {
+    Always = "always",
+    None = "none",
+    Responsive = "responsive"
+}
+/**
+ * Fit: filler will fit the available space -> allow to have multiple items in the same column
+ * Full: filler will fill the whole column -> only one item in the column, the rest of the column will be filler
+ */
+export declare enum FillerMode {
+    Fit = "fit",
+    Full = "full"
+}

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

@@ -0,0 +1,16 @@
+import { BaseVariant } from './index.ts';
+
+export type ButtonVariant = BaseVariant | 'default' | 'text' | 'tertiary' | 'custom';
+export type ButtonCaretDirection = 'up' | 'down' | 'left' | 'right';
+export declare enum ButtonWidthType {
+    Adaptive = "adaptive",
+    Fill = "fill",
+    Hug = "hug"
+}
+export declare enum ButtonSize {
+    Custom = "custom",
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XLarge = "x-large"
+}

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

@@ -0,0 +1,30 @@
+export type ChatbotEvent = {
+    callback: (messageContent: string) => void;
+    event: string;
+    excludedFromPurposes?: string[];
+    label: string;
+};
+export type Reference = {
+    href: string;
+    id: string;
+    source: string;
+    summary: string;
+    title: string;
+};
+export type Message = {
+    content: string;
+    events?: Array<{
+        callback: (messageContent: string) => void;
+        label: string;
+    }>;
+    finished?: boolean;
+    isEndOfRole?: boolean;
+    isStartOfRole?: boolean;
+    references?: Reference[];
+    role: MessageRole;
+};
+export declare enum MessageRole {
+    Assistant = "assistant",
+    System = "system",
+    User = "user"
+}

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

@@ -0,0 +1,49 @@
+export type ParseColorValue = {
+    hex: string;
+    hexa: string;
+    hsl: {
+        h: number;
+        l: number;
+        s: number;
+        string: string;
+    };
+    hsla: {
+        a: number;
+        h: number;
+        l: number;
+        s: number;
+        string: string;
+    };
+    hsv: {
+        h: number;
+        s: number;
+        string: string;
+        v: number;
+    };
+    hsva: {
+        a: number;
+        h: number;
+        s: number;
+        string: string;
+        v: number;
+    };
+    rgb: {
+        b: number;
+        g: number;
+        r: number;
+        string: string;
+    };
+    rgba: {
+        a: number;
+        b: number;
+        g: number;
+        r: number;
+        string: string;
+    };
+};
+export declare enum ColorFormat {
+    Hex = "hex",
+    Rgb = "rgb",
+    Hsl = "hsl",
+    Hsv = "hsv"
+}

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

@@ -0,0 +1,11 @@
+import { ColorSwatchData } from './color-swatch';
+
+export declare enum CxColorSwatchGroupVariant {
+    Circles = "circles",
+    Grid = "grid",
+    Table = "table"
+}
+export type PaletteGroup = {
+    colors: ColorSwatchData[];
+    palette: string;
+};

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

@@ -0,0 +1,15 @@
+export declare enum CxColorSwatchVariant {
+    Circle = "circle",
+    GridItem = "grid-item",
+    Oval = "oval"
+}
+export type ColorSwatchData = {
+    cmyk?: string;
+    color: string;
+    hex?: string;
+    id: string;
+    name?: string;
+    palette?: string;
+    pms?: string;
+    rgb?: string;
+};

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

@@ -0,0 +1,10 @@
+export declare enum ColumnTriggerMode {
+    Hover = "hover",
+    Manual = "manual"
+}
+export declare enum ColumnWidthType {
+    Fill = "fill",
+    Fit = "fit",
+    Fixed = "fixed",
+    Relative = "relative"
+}

package/library/packages/types/src/confirm-popover.d.ts

@@ -0,0 +1,11 @@
+export declare enum ConfirmPopoverButtonsDirection {
+    Horizontal = "horizontal",
+    HorizontalReverse = "horizontal-reverse",
+    Vertical = "vertical",
+    VerticalReverse = "vertical-reverse"
+}
+export declare enum ConfirmPopoverButtonsAlignment {
+    Center = "center",
+    End = "end",
+    Start = "start"
+}

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

@@ -0,0 +1,264 @@
+import { Component, Editor as GrapesjsEditor, TraitProperties } from 'grapesjs';
+import { TemplateResult } from 'lit';
+import { StyleInfo } from 'lit/directives/style-map';
+import { FolderSelectApi } from './folder-select';
+
+export declare enum DeviceType {
+    Desktop = "desktop",
+    Mobile = "mobile",
+    Tablet = "tablet"
+}
+export type Device = {
+    canvasWidth: string;
+    height: string;
+    id: string;
+    maxWidth: string;
+    name: string;
+};
+export declare const Desktop: Device;
+export declare const Tablet: Device;
+export declare const Mobile: Device;
+export declare const AllDevices: Device[];
+export type Option = {
+    children?: TemplateResult;
+    dataId?: string;
+    disabled?: boolean;
+    helpText?: string;
+    icon?: string;
+    id: string;
+    key?: string;
+    label?: string;
+    maskBlocks?: Record<string, unknown>;
+    name?: string;
+    style?: StyleInfo;
+    value: string;
+};
+export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'options' | 'type'> & {
+    accept?: string;
+    /**
+     * The callback is used to modify the record based on the value.
+     * It is called right before the record is saved.
+     */
+    api?: () => Promise<Option[]> | FolderSelectApi;
+    callback?: (params: {
+        extraValue?: Record<string, unknown>;
+        record: T;
+        value: unknown;
+    }) => T;
+    checkedValue?: string | boolean;
+    children?: PropertyConfig[];
+    clearable?: boolean;
+    controlType: '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' | 'video-picker';
+    cornerStyleKey?: {
+        offsetX: string;
+        offsetY: string;
+    };
+    direction?: 'horizontal' | 'vertical';
+    disabled?: boolean | ((record: Record<string, unknown>) => boolean);
+    disabledTooltip?: string;
+    downloadFormatPickerConfigs?: {
+        assetIdsKey?: string;
+    };
+    folderPickerConfigs?: {
+        useFullPath: boolean;
+    };
+    galleryPickerConfigs?: {
+        dialog: DialogType;
+    };
+    groupConfigs?: {
+        columnGap?: string;
+        direction?: 'horizontal' | 'vertical';
+        gap?: string;
+        rowGap?: string;
+        wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    };
+    helpText?: string | ((record: Record<string, unknown>) => string);
+    id: string;
+    inputConfigs?: {
+        label?: string;
+        suffix?: {
+            options: Option[];
+            type: 'unit';
+        };
+        /**
+         * Return validation message if invalid, otherwise return empty string.
+         */
+        validation?: (record: Record<string, unknown>) => string;
+    };
+    itemsPerRow?: number;
+    listEditorConfigs?: {
+        addDialogLabel: string;
+        addItemText?: string;
+        displayField: string;
+        editDialogLabel: string;
+        sampleItem: Record<string, string>;
+    };
+    mask?: string;
+    maskBlocks?: Record<string, unknown>;
+    multiple?: boolean;
+    options?: Option[];
+    pickerConfigs?: {
+        accepts?: string[];
+        multiple?: boolean;
+        name?: string;
+    };
+    placeholder?: string;
+    radioGroupConfigs?: {
+        gap?: string;
+        horizontal?: boolean;
+    };
+    required?: boolean;
+    selectConfigs?: {
+        fullWidthPopup?: boolean;
+        placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'center';
+    };
+    show?: boolean | ((record: Record<string, unknown>) => boolean);
+    sizeInputGroupConfigs?: {
+        useMask?: boolean;
+    };
+    /**
+     * Use for non-content tabs but still need to skip checking show condition
+     */
+    skipShowCheck?: boolean;
+    tab?: 'content' | 'styling' | 'effects';
+    type: 'attribute' | 'property' | 'style' | 'decorative';
+    uncheckedValue?: string | boolean;
+    useSearchTerm?: boolean;
+    width?: ((record: Record<string, unknown>) => string | number) | string | number;
+};
+export declare enum Permission {
+    All = "ALL",// Template
+    CanDelete = "CanDelete",
+    CanDownload = "CanDownload",
+    CanFind = "CanFind",
+    CanManageRights = "CanManageRights",
+    CanMove = "CanMove",
+    CanRead = "CanRead",
+    CanReadAll = "CanReadAll",
+    CanReadAndWrite = "CanReadAndWrite",// Template
+    CanReadLarge = "CanReadLarge",
+    CanReadMedium = "CanReadMedium",
+    CanReadOriginal = "CanReadOriginal",
+    CanShare = "CanShare",
+    CanUpload = "CanUpload",
+    CanWrite = "CanWrite",// Template
+    None = "NONE"
+}
+export declare enum AssetType {
+    All = "all",
+    Audio = "audio",
+    Image = "image",
+    Other = "other",
+    Video = "video"
+}
+export type Asset = {
+    id: string;
+    name: string;
+    src: string;
+    type: AssetType;
+    url?: string;
+};
+export declare enum EditorMode {
+    Content = "content",
+    Template = "template"
+}
+export type ToolbarItem = {
+    active?: boolean;
+    attributes?: Record<string, any>;
+    className?: string;
+    command: string | ((editor: GrapesjsEditor, component: Component, opts?: Record<string, any>) => void);
+    disabled?: boolean;
+    icon?: string;
+    iconClass?: string;
+    iconSize?: 'small' | 'medium' | 'large';
+    id: string;
+    label: string;
+};
+export type TeamSpace = {
+    absoluteURL: string;
+    description: string;
+    module: string;
+    name: string;
+};
+export declare enum TeamSpaceRole {
+    Administrator = "Administrator",
+    Designer = "Designer",
+    Editor = "Editor"
+}
+export type TeamSpaceFontFamily = {
+    fontFamily: string;
+    fontFilesURLs: string[];
+};
+export type RTE_CONFIG = {
+    basicFormat?: boolean;
+    blockFormatting?: boolean;
+    enableAll?: boolean;
+    fontColor?: boolean;
+    fontSize?: boolean;
+    getElement?: (el: HTMLElement) => HTMLElement | null | undefined | Promise<HTMLElement | null | undefined>;
+    highlight?: boolean;
+    lineHeight?: boolean;
+    link?: boolean;
+    styles?: {
+        singleRow?: boolean;
+    };
+    textAlignment?: boolean;
+    textBackground?: boolean;
+    textIndentation?: boolean;
+    textListing?: boolean;
+    textScript?: boolean;
+};
+export type RTE_IMAGE = {
+    alt: string;
+    borderColor: string;
+    borderStyle: string;
+    borderWidth: string;
+    borderWidthUnit: string;
+    height: string;
+    imgStyle: string;
+    keepRatio: boolean;
+    src: string;
+    title: string;
+    type: AssetType;
+    width: string;
+};
+export declare enum BlockType {
+    Accordion = "BlockAccordion",
+    Analytics = "BlockAnalytics",
+    Button = "BlockButton",
+    Carousel = "BlockCarousel",
+    ColorSwatches = "BlockColorSwatches",
+    Column = "BlockCell",
+    ColumnGroup = "BlockColumns",
+    Divider = "BlockDivider",
+    FontKit = "BlockFontKit",
+    Gallery = "BlockGallery",
+    Header = "BlockHeader",
+    Image = "BlockImage",
+    RichText = "BlockRichText",
+    SearchBox = "BlockSearchBox",
+    TabGroup = "BlockTabs",
+    Text = "BlockText",
+    Video = "BlockVideo"
+}
+export declare enum DialogType {
+    Carousel = "carousel",
+    Gallery = "gallery"
+}
+export type Page = {
+    hasChildren: boolean;
+    id: string;
+    title: string;
+    type: 'Page';
+    url: string | null;
+};
+export type Link = {
+    hasChildren: boolean;
+    id: string;
+    title: string;
+    type: 'Link';
+    url: string | null;
+};
+export type ToolbarConfiguration = {
+    allowDuplicateBlocks?: boolean;
+};

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

@@ -0,0 +1,6 @@
+export declare enum DialogDividerPosition {
+    Both = "both",
+    Footer = "footer",
+    Header = "header",
+    None = "none"
+}

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

@@ -0,0 +1,44 @@
+export declare enum STATUS {
+    Assembling = "assembling",
+    Cancelled = "cancelled",
+    Completed = "completed",
+    Downloading = "downloading",
+    Failed = "failed",
+    Paused = "paused",
+    WaitingServerProcessing = "waitingServerProcessing"
+}
+export declare const STATUS_LABELS_MAP: {
+    assembling: string;
+    cancelled: string;
+    completed: string;
+    downloading: string;
+    failed: string;
+    paused: string;
+    waitingServerProcessing: string;
+};
+export declare enum UNIT {
+    B = "B",
+    GB = "GB",
+    KB = "KB",
+    MB = "MB"
+}
+export interface DownloadItem {
+    createDate: number;
+    id: string;
+    name: string;
+    path: string;
+    progress: number;
+    size: number;
+    status: STATUS;
+    statusDetails: string;
+    unit: UNIT;
+}
+export declare enum DownloadFileStateDetails {
+    MissingFileErrorMessage = "MissingFileErrorMessage",
+    NetworkErrorMessage = "NetworkErrorMessage",
+    NotEnoughStorageErrorMessage = "NotEnoughStorageErrorMessage"
+}
+export type OpenDirectoryPickerFunction = (args: {
+    containerName: string;
+    transactionID: string;
+}) => void;