@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/packages/organisms/src/cluster-management/cluster-management.d.ts

@@ -0,0 +1,105 @@
+import { default as CxAlert } from '../../../atoms/src/components/alert/alert.ts';
+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 CxFormatDate } from '../../../atoms/src/components/format-date/format-date.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { GetClusterDataFunction, Service, UpdateServiceFunction } from '../../../types/src/cluster-management';
+import { CSSResultGroup } from 'lit';
+import { default as CxClusterManagementService } from './components/cluster-management-service';
+
+/**
+ * @summary Widget for managing cluster. Pure web component version of orangelogic.react.clustermanagement.
+ * Displays two overlapping range sliders for each service in the cluster data:
+ * - A disabled slider with a gray tooltip, to display the number of currently running nodes (running count).
+ * - An adjustable slider to change the service's node count (desired count).
+ * If the running count is outside the min-max range, it is shown as a text label instead of a disabled slider (see second service in the example below).
+ * Data refreshes every 60 seconds by default, with the last refresh time displayed at the bottom. This time interval is modifiable using `refresh-interval` property.
+ * To use, provide `getClusterData()` and `updateService()` callback functions.
+ *
+ * @event cx-refresh - Emitted when a data refresh has been made.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart spinner - The spinner that gets displayed when no data is available yet.
+ * @csspart alert - The alert that gets displayed when an error occurs.
+ * @csspart service - The container that wraps around each service.
+ * @csspart service__label - The label for each service.
+ * @csspart service__range - The wrapper around each service's range sliders.
+ * @csspart service__running-range - Each service's range slider for the currently running count.
+ * @csspart service__desired-range - Each service's range slider for the desired count.
+ * @csspart status - The container that wraps the status date and refresh button.
+ * @csspart status__refresh-button - The button to refresh the data.
+ * @csspart status__refresh-spinner - The spinner that gets displayed when data is being refreshed.
+ * @csspart dialog - The dialog that gets displayed when confirming a change.
+ * @csspart dialog__confirm-button - The confirm button inside the confirmation dialog.
+ * @csspart dialog__cancel-button - The cancel button inside the confirmation dialog.
+ *
+ * @typedef Service - {
+ *   desiredCount: number;
+ *   maxNodeCount: number;
+ *   minNodeCount: number;
+ *   runningCount: number;
+ *   serviceId: string;
+ * }
+ *
+ * @typedef ClusterData - {
+ *   services: Service[];
+ * }
+ */
+export default class CxClusterManagement extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-alert': typeof CxAlert;
+        'cx-button': typeof CxButton;
+        'cx-cluster-management-service': typeof CxClusterManagementService;
+        'cx-dialog': typeof CxDialog;
+        'cx-format-date': typeof CxFormatDate;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-spinner': typeof CxSpinner;
+    };
+    private intervalIdRefresh;
+    private readonly localize;
+    dialog: CxDialog;
+    refreshDate: CxFormatDate;
+    private _status;
+    get status(): "error" | "loading" | "ready";
+    _isRefreshing: boolean;
+    get isRefreshing(): boolean;
+    private errorObject;
+    private clusterData;
+    private sliderDesiredCount;
+    private confirmCount;
+    /** How many seconds between each automatic data refresh */
+    refreshInterval: number;
+    /** A function used to get cluster data. We call this function every data refresh. */
+    getClusterData: GetClusterDataFunction;
+    /** A function used to update a service's count. Returns the updated service data. */
+    updateService: UpdateServiceFunction;
+    /** A function to clean up resources. Gets called when this component disconnects/unmounts. */
+    cleanUp: () => void;
+    /** If true, the component is in readonly mode. No changes can be made to the service counts. */
+    readonly: boolean;
+    runFirstUpdated(): void;
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    refreshStatus(): Promise<void>;
+    private setStateForService;
+    private confirmCallback;
+    private handleChangeCommitted;
+    private handleChange;
+    private handleDialogConfirm;
+    private handleDialogCancel;
+    renderConfirm(): import('lit').TemplateResult<1>;
+    renderLoading(): import('lit').TemplateResult<1>;
+    renderError(): import('lit').TemplateResult<1>;
+    renderService(currentService: Service): import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-cluster-management': CxClusterManagement;
+    }
+}

package/library/packages/organisms/src/cluster-management/cluster-management.style.d.ts

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

package/library/packages/organisms/src/cluster-management/components/cluster-management-service.d.ts

@@ -0,0 +1,44 @@
+import { default as CxRange } from '../../../../atoms/src/components/range/range.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * @summary A component to manage a single service in the cluster.
+ *
+ * @dependency cx-range
+ *
+ */
+export default class CxClusterManagementService extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    private readonly localize;
+    static readonly dependencies: {
+        'cx-range': typeof CxRange;
+    };
+    serviceId: string;
+    minNodeCount: number;
+    maxNodeCount: number;
+    runningCount: number;
+    desiredCount: number;
+    visualDesiredCount: number;
+    readonly: boolean;
+    private handleChange;
+    private handleChangeCommitted;
+    render(): TemplateResult;
+}
+export type CxClusterManagementServiceChange = CustomEvent<{
+    count: number;
+    serviceId: string;
+}>;
+export type CxClusterManagementServiceChangeCommitted = CustomEvent<{
+    count: number;
+    serviceId: string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-cluster-management-service': CxClusterManagementService;
+    }
+    interface GlobalEventHandlersEventMap {
+        'cx-cluster-management-service-change': CxClusterManagementServiceChange;
+        'cx-cluster-management-service-change-committed': CxClusterManagementServiceChangeCommitted;
+    }
+}

package/library/packages/organisms/src/cluster-management/components/cluster-management-service.style.d.ts

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

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

@@ -0,0 +1,116 @@
+import { CellComponent } from '../../../atoms/src/components/table/table.ts';
+import { LocalizeController } from '../../../utils/src/custom-element/i18n';
+
+export declare const MIN_WIDTH_GRID_ITEM = 165;
+export declare const validCodes: string[];
+export declare const columnDefaults: {
+    resizable: boolean;
+};
+export declare const columns: ({
+    field: string;
+    formatter: (cell: CellComponent) => HTMLDivElement;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    title: string;
+    width: number;
+    widthGrow?: undefined;
+    minWidth?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    widthGrow: number;
+    formatter?: undefined;
+    title?: undefined;
+    width?: undefined;
+    minWidth?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    minWidth: number;
+    title: string;
+    formatter?: undefined;
+    width?: undefined;
+    widthGrow?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    responsive: number;
+    title: string;
+    widthGrow: number;
+    formatter?: undefined;
+    width?: undefined;
+    minWidth?: undefined;
+})[];
+export declare const copyableColumns: (localize: LocalizeController, palette: string) => ({
+    field: string;
+    formatter: (cell: CellComponent) => HTMLDivElement;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    title: string;
+    width: number;
+    widthGrow?: undefined;
+    minWidth?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    widthGrow: number;
+    formatter?: undefined;
+    title?: undefined;
+    width?: undefined;
+    minWidth?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    minWidth: number;
+    title: string;
+    formatter?: undefined;
+    width?: undefined;
+    widthGrow?: undefined;
+    responsive?: undefined;
+} | {
+    field: string;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    responsive: number;
+    title: string;
+    widthGrow: number;
+    formatter?: undefined;
+    width?: undefined;
+    minWidth?: undefined;
+} | {
+    field: string;
+    formatter: (cell: any) => HTMLElement | null;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    minWidth: number;
+    title: string;
+    widthGrow?: undefined;
+} | {
+    field: string;
+    formatter: (cell: any) => HTMLElement | null;
+    headerHozAlign: string;
+    headerSort: boolean;
+    hozAlign: string;
+    title: string;
+    widthGrow: number;
+    minWidth?: undefined;
+})[];

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

@@ -0,0 +1,116 @@
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTable } from '../../../atoms/src/components/table/table.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxColorSwatch } from '../../../molecules/src/color-swatch/color-swatch.ts';
+import { ColorSwatchData } from '../../../types/src/color-swatch';
+import { CxColorSwatchGroupVariant } from '../../../types/src/color-swatch-group';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Color Swatch Group is used to display a group of color swatches.
+ *
+ * @cssproperty [--padding=0] - Padding of the container
+ * @cssproperty [--grid-gap=var(--cx-spacing-medium)] - Gap size for Grid variant (horizontal & vertical)
+ * @cssproperty [--swatch-group-horizontal-gap=-50px] - Gap size for Circle variant (horizontal) (use negative value for overlapping)
+ * @cssproperty [--swatch-group-vertical-gap=-50px] - Gap size for Circle variant (vertical) (use negative value for overlapping)
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @typedef CxColorSwatchGroupVariant - 'table' | 'grid' | 'circles'
+ * @typedef ColorSwatchGroupData - {
+ *   name: string;
+ *   hex: string;
+ *   rgb: string;
+ *   cmyk: string;
+ *   pms: string;
+ *   palette?: string;
+ * }
+ */
+export default class CxColorSwatchGroup extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-color-swatch': typeof CxColorSwatch;
+        'cx-space': typeof CxSpace;
+        'cx-table': typeof CxTable;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    /**
+     * Container ref for width reading
+     */
+    containerEl: HTMLDivElement;
+    tableEls: NodeListOf<CxTable>;
+    /**
+     * Color swatch group variant
+     */
+    variant: CxColorSwatchGroupVariant;
+    /**
+     * A json string of an array of color swatch data
+     */
+    data: ColorSwatchData[];
+    /**
+     * Maximum number of columns to display, this applies to grid variant only
+     * In smaller screen sizes, the color swatch boxes automatically drop down if there is no available spaces
+     */
+    maxCol: number;
+    /**
+     * If all color swatches' color code can be copied
+     */
+    canCopy: boolean;
+    /**
+     * Color codes to show in the swatches
+     */
+    showCodes: string[];
+    multiLanguage: boolean;
+    /**
+     * Breakpoints for responsive design
+     */
+    breakpoints: [number, number, number];
+    /**
+     * Device type
+     */
+    private deviceType;
+    /**
+     * Current total grid column
+     */
+    private currentCol;
+    private isFocused;
+    canFocusContainer: boolean;
+    isContainerFocused: boolean;
+    constructor();
+    runFirstUpdated(): void;
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleWindowResize;
+    /**
+     * Only grid variant: Handle resize to check if maximum column exceed so the grid wont expand more
+     */
+    handleResize(): void;
+    private handleKeyDown;
+    private handleFocusIn;
+    private handleFocusOut;
+    /**
+     * Filter out the columns that are not in the showCodes
+     */
+    private getTableColumns;
+    /**
+     * Categorize the color swatches by palette
+     */
+    private categorizeByPalette;
+    handleIsFocusedChange(): void;
+    /**
+     * Get current direction of the color swatch group
+     */
+    private get currentDirection();
+    /**
+     * Get the variant of the color swatch
+     */
+    private get swatchVariant();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-color-swatch-group': CxColorSwatchGroup;
+    }
+}

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

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

package/library/packages/organisms/src/comment/comment.d.ts

@@ -0,0 +1,134 @@
+import { Editor } from '@tiptap/core';
+import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTimecode } from '../../../atoms/src/components/timecode/timecode.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { AutocompleteItem } from '../../../types/src/comment';
+import { TimecodeMode } from '../../../types/src/video-editor';
+import { TemplateResult } from 'lit';
+import { default as CxCommentMention } from './components/comment-mention/comment-mention';
+import { default as CxCommentMenu } from './components/comment-menu/comment-menu';
+
+export type CxCommentChangeEvent = CustomEvent<{
+    content: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-comment-change': CxCommentChangeEvent;
+    }
+}
+/**
+ * @summary Widget for comment.
+ * @description Replaces Cortex's current SSR comment and allows rich text editing thanks to the migration of Tiptap.
+ *
+ * @event {{ content: string }} cx-comment-change - Emitted when the editor's content changes.
+ * @event cx-recording-started - Emitted when the screen recorder has started.
+ * @event cx-recording-stopped - Emitted when the screen recorder has stopped.
+ * @event {{ error: Error }} cx-recording-error - Emitted when the screen recorder has error.
+ */
+export default class CxComment extends CortexElement {
+    static readonly styles: import('lit').CSSResult[];
+    private readonly localize;
+    static readonly dependencies: {
+        'cx-comment-mention': typeof CxCommentMention;
+        'cx-comment-menu': typeof CxCommentMenu;
+        'cx-dialog': typeof CxDialog;
+        'cx-popup': typeof CxPopup;
+        'cx-space': typeof CxSpace;
+        'cx-timecode': typeof CxTimecode;
+    };
+    private readonly cortexPopupController;
+    private caretAnimationId?;
+    readonly editorContainer: HTMLDivElement;
+    readonly commentMenu: CxCommentMenu;
+    readonly commentMention: CxCommentMention;
+    readonly overlayContent: HTMLDivElement;
+    readonly container: HTMLDivElement;
+    readonly dialog: CxDialog;
+    content: string;
+    editable: boolean;
+    autoFocus: boolean;
+    canUpload: boolean;
+    canUseAIAssistant: boolean;
+    recording: boolean;
+    queryName: string;
+    filterName: string;
+    serviceName: string;
+    autocompletionViewstate: string;
+    maxCount: number;
+    queryDelay: number;
+    minQueryLength: number;
+    isEmpty: boolean;
+    originalContainer: Element | null;
+    editor: Editor;
+    fullscreen: boolean;
+    /**
+     * Whether the time based button should be shown in the comment menu.
+     */
+    canUseTimeBased: boolean;
+    /**
+     * Whether the time based feature is enabled.
+     */
+    timeBased: boolean;
+    /**
+     * When true, hides the time based icon button in the comment menu while
+     * still allowing the time based feature to function (e.g. `timeBased`
+     * state is still respected). Useful when the parent wants to enable the
+     * feature without exposing the toggle button to end users.
+     */
+    hideTimeBasedIcon: boolean;
+    /**
+     * When true, hides the fullscreen icon button and prevents entering
+     * fullscreen. `toggleFullscreen()` becomes a no-op when not already
+     * fullscreen, but still allows exiting fullscreen if currently open.
+     */
+    disableFullscreen: boolean;
+    /**
+     * The time values for the time based feature.
+     */
+    time: number[];
+    /**
+     * The timecode mode for the time based feature.
+     */
+    timecodeMode: TimecodeMode;
+    /**
+     * The frame rate for the time based feature.
+     */
+    frameRate: number;
+    /**
+     * The placeholder for the comment editor.
+     */
+    placeholder: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleOutsideClick;
+    private handleCopy;
+    private fetchAutocompleteItems;
+    getMentionItems(queryString: string): Promise<AutocompleteItem[]>;
+    resetMention(): void;
+    private handleMenuItemClick;
+    private handleFullscreenClick;
+    toggleFullscreen(): void;
+    private readonly debouncedFetch;
+    private fetchItems;
+    private handleMentionSelect;
+    private handleMentionStart;
+    private handleMentionUpdate;
+    private handleMentionKeyDown;
+    runFirstUpdated(): void;
+    private handleCommentMousedown;
+    handleEditableChange(): void;
+    handleTimeChange(): void;
+    handlePlaceholderChange(): void;
+    handleFullscreenChange(): void;
+    private handleRequestClose;
+    private handleTimeBasedChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-comment': CxComment;
+    }
+}

package/library/packages/organisms/src/comment/comment.extensions.d.ts

@@ -0,0 +1,9 @@
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+    }
+}
+type GetExtensionsOptions = {
+    placeholder?: string;
+};
+export declare function getExtensions({ placeholder, }: GetExtensionsOptions): (import('@tiptap/core').Mark<any, any> | import('@tiptap/core').Node<any, any> | import('@tiptap/core').Extension<import('@tiptap/extension-history').HistoryOptions, any> | import('@tiptap/core').Extension<import('@tiptap/extension-placeholder').PlaceholderOptions, any> | import('@tiptap/core').Extension<import('@tiptap/extension-typography').TypographyOptions, any>)[];
+export {};

package/library/packages/organisms/src/comment/comment.styles.d.ts

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

package/library/packages/organisms/src/comment/components/comment-mention/comment-mention.d.ts

@@ -0,0 +1,44 @@
+import { default as CxBadge } from '../../../../../atoms/src/components/badge/badge.ts';
+import { default as CxIcon } from '../../../../../atoms/src/components/icon/icon.ts';
+import { default as CxMenu } from '../../../../../atoms/src/components/menu/menu.ts';
+import { default as CxMenuItem } from '../../../../../atoms/src/components/menu-item/menu-item.ts';
+import { default as CxPopup } from '../../../../../atoms/src/components/popup/popup.ts';
+import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
+import { default as CxTooltip } from '../../../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { AutocompleteItem } from '../../../../../types/src/comment';
+import { TemplateResult } from 'lit';
+
+export default class CxCommentMention extends CortexElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly dependencies: {
+        'cx-badge': typeof CxBadge;
+        'cx-icon': typeof CxIcon;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-popup': typeof CxPopup;
+        'cx-space': typeof CxSpace;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    active: boolean;
+    anchor: CxPopup['anchor'] | undefined;
+    items: AutocompleteItem[];
+    onSelect: ((value: {
+        id: string;
+        label: string;
+        type?: string;
+    } | undefined, key?: 'Enter') => void) | undefined;
+    selectedIndex: number;
+    private handleSelect;
+    private handleUp;
+    private handleDown;
+    handleEnter(): void;
+    handleKeyDown(event: KeyboardEvent): boolean;
+    handleItemsChange(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-comment-mention': CxCommentMention;
+    }
+}

package/library/packages/organisms/src/comment/components/comment-mention/comment-mention.styles.d.ts

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