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

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Validate/defaults/validators.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    alphanumeric: (_cell: any, value: any, _parameters: any) => boolean;
+    ends: (_cell: any, value: any, parameters: any) => boolean;
+    float: (_cell: any, value: any, _parameters: any) => boolean;
+    in: (_cell: any, value: any, parameters: any) => boolean;
+    integer: (_cell: any, value: any, _parameters: any) => boolean;
+    max: (_cell: any, value: any, parameters: any) => boolean;
+    maxLength: (_cell: any, value: any, parameters: any) => boolean;
+    min: (_cell: any, value: any, parameters: any) => boolean;
+    minLength: (_cell: any, value: any, parameters: any) => boolean;
+    numeric: (_cell: any, value: any, _parameters: any) => boolean;
+    regex: (_cell: any, value: any, parameters: any) => boolean;
+    required: (_cell: any, value: any, _parameters: any) => boolean;
+    starts: (_cell: any, value: any, parameters: any) => boolean;
+    string: (_cell: any, value: any, _parameters: any) => boolean;
+    unique: (this: any, cell: any, value: any, _parameters: any) => boolean;
+};
+export default _default;

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

@@ -0,0 +1,40 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIconButton } from '../icon-button/icon-button';
+import { default as CxLineClamp } from '../line-clamp/line-clamp';
+
+/**
+ * @summary Tags are used as labels to organize things or to indicate a selection.
+ *
+ * @slot (default) - The tag's content.
+ *
+ * @event cx-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The tag's content.
+ * @csspart remove-button - The tag's remove button, an `<cx-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */
+export default class CxTag extends CortexElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon-button': typeof CxIconButton;
+        'cx-line-clamp': typeof CxLineClamp;
+    };
+    private readonly localize;
+    /** The tag's theme variant. */
+    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+    /** The tag's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a pill-style tag with rounded edges. */
+    pill: boolean;
+    /** Makes the tag removable and shows a remove button. */
+    removable: boolean;
+    private handleRemoveClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tag': CxTag;
+    }
+}

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

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

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

@@ -0,0 +1,138 @@
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event cx-blur - Emitted when the control loses focus.
+ * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event cx-focus - Emitted when the control gains focus.
+ * @event cx-input - Emitted when the control receives input.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ * @csspart character-count - The container that wraps the character count.
+ */
+export default class CxTextarea extends CortexElement implements CortexFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private resizeObserver;
+    input: HTMLTextAreaElement;
+    private hasFocus;
+    title: string;
+    /** The name of the textarea, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the textarea, submitted as a name/value pair with form data. */
+    value: string;
+    /** The textarea's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a filled textarea. */
+    filled: boolean;
+    /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** Placeholder text to show as a hint when the input is empty. */
+    placeholder: string;
+    /** The number of rows to display by default. */
+    rows: number;
+    /** Controls how the textarea can be resized. */
+    resize: 'none' | 'vertical' | 'auto';
+    /** Disables the textarea. */
+    disabled: boolean;
+    /** Makes the textarea readonly. */
+    readonly: boolean;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string | HTMLElement | undefined;
+    /** Makes the textarea a required field. */
+    required: boolean;
+    /** The minimum length of input that will be considered valid. */
+    minlength: number;
+    /** The maximum length of input that will be considered valid. */
+    maxlength: number;
+    /** Show total characters in the input. */
+    showLength: boolean;
+    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+    autoCapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /** Indicates whether the browser's autocorrect feature is on or off. */
+    autoCorrect: 'off' | 'on';
+    /**
+     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+     */
+    autocomplete: string;
+    /** Indicates that the input should receive focus on page load. */
+    autoFocus: boolean;
+    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+    enterKeyHint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Enables spell checking on the textarea. */
+    spellCheck: boolean;
+    /**
+     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+     * keyboard on supportive devices.
+     */
+    inputMode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleBlur;
+    private handleChange;
+    private handleFocus;
+    private handleInput;
+    private handleInvalid;
+    private setTextareaHeight;
+    handleDisabledChange(): void;
+    handleRowsChange(): void;
+    handleValueChange(): Promise<void>;
+    /** Sets focus on the textarea. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the textarea. */
+    blur(): void;
+    /** Selects all the text in the textarea. */
+    select(): void;
+    /** Gets or sets the textarea's scroll position. */
+    scrollPosition(position?: {
+        left?: number;
+        top?: number;
+    }): {
+        left: number;
+        top: number;
+    } | undefined;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-textarea': CxTextarea;
+    }
+}

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

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

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

@@ -0,0 +1,43 @@
+import { default as CxTypography } from '../typography/typography.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TypographyVariant } from '../../../../types/src/typography';
+import { TimecodeMode } from '../../../../types/src/video-editor';
+import { CSSResultGroup, nothing } from 'lit';
+
+/**
+ * @summary CxTimecode is a component that displays a timecode.
+ */
+export default class CxTimecode extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-typography': typeof CxTypography;
+    };
+    /**
+     * 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;
+    /**
+     * When true, applies the preview background and padding styles.
+     */
+    isPreview: boolean;
+    /**
+     * The typography variant for the timecode.
+     */
+    typographyVariant: TypographyVariant;
+    timeString: string;
+    handleTimeChange(): void;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-timecode': CxTimecode;
+    }
+}

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

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

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

@@ -0,0 +1,112 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxPopup, VirtualElement } from '../popup/popup';
+
+/**
+ * @summary Tooltips display additional information based on a specific action.
+ *
+ * @description A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip.
+ * If you need the tooltip to show up for multiple elements, nest them inside a container first. </br> </br>
+ * Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
+ *
+ * @slot (default) - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event cx-show - Emitted when the tooltip begins to show.
+ * @event cx-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event cx-hide - Emitted when the tooltip begins to hide.
+ * @event cx-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<cx-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+export default class CxTooltip extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-popup': typeof CxPopup;
+    };
+    private hoverTimeout;
+    private readonly localize;
+    private closeWatcher;
+    defaultSlot: HTMLSlotElement;
+    body: HTMLElement;
+    popup: CxPopup;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
+     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
+     * `anchor` slot instead.
+     */
+    anchor: Element | string | VirtualElement;
+    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+    content: string;
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the tooltip so it won't show when triggered. */
+    disabled: boolean;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
+    distance: number;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: string;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
+    hoist: boolean;
+    /**
+     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+     * active.
+     */
+    disabledHoverBridge: boolean;
+    /** The flip boundary for the popup. */
+    flipBoundary: Element | Element[];
+    /** The shift boundary for the popup. */
+    shiftBoundary: Element | Element[];
+    constructor();
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    runFirstUpdated(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    private handleDocumentKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Hides the tooltip */
+    hide(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tooltip': CxTooltip;
+    }
+}

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

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

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

@@ -0,0 +1,146 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TreeSelection } from '../../../../types/src/tree';
+import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as Sortable } from 'sortablejs';
+import { default as CxTreeItem } from '../tree-item/tree-item';
+
+export declare function syncParentItem(treeItem: CxTreeItem): void;
+export declare function syncAncestors(treeItem: CxTreeItem, selection?: TreeSelection): void;
+export declare function syncCheckboxes(changedTreeItem: CxTreeItem, initialSync?: boolean, selection?: TreeSelection): void;
+/**
+ * @summary The <cx-tree> component is used to display a hierarchical list of selectable [tree items](?s=atoms&id=/tree-item). Items with children can be expanded and collapsed as desired by the user.
+ *
+ * @event {{ selection: CxTreeItem[] }} cx-selection-change - Emitted when a tree item is selected or deselected.
+ *
+ * @slot (default) - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<cx-icon>`.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<cx-icon>`.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty [--indent-size=var(--cx-spacing-medium)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-guide-color=var(--cx-color-neutral-200)] - The color of the indentation line.
+ * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
+ *  indentation line's starting position.
+ * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
+ * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
+ */
+export default class CxTree extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    expandedIconSlot: HTMLSlotElement;
+    collapsedIconSlot: HTMLSlotElement;
+    /** Whether to allow the tree to be sorted by dragging and dropping items. */
+    sortable: boolean;
+    /** Defines the group name for this tree, allowing multiple trees to be sortable together. */
+    sortableGroup: string | null;
+    /** Whether to disable the sortable group feature, allowing items to be sorted only within the tree. */
+    disabledSortableGroup: boolean;
+    /**
+     * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+     * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
+     */
+    selection: TreeSelection;
+    /**
+     * Whether to automatically expand after loading finishes.
+     */
+    disabledAutoExpand: boolean;
+    /**
+     * Whether to automatically expand to the selected items.
+     */
+    autoExpandToSelected: boolean;
+    /**
+     * Expand button placement
+     */
+    expandButtonPlacement: ExpandButtonPlacement;
+    /**
+     * Whether to not forward the expand button placement to the children.
+     */
+    noForwardExpandButtonPlacement: boolean;
+    /**
+     * When set to true, the `cx-selection-change` event will be emitted on every change of the value, even if the value is not changed.
+     */
+    forceOnChange: boolean;
+    /**
+     * When set to true, clicking the label of a tree item will deselect all other items and select the clicked item.
+     * This is useful when the selection mode is set to 'multiple' and you want to allow the user to select a single item
+     * by clicking its label, without having to use the checkbox. This is the behavior of the filter in DAM view.
+     */
+    labelSelectSingle: boolean;
+    /**
+     * Whether to disable dragging an item inside another item for this tree.
+     */
+    noDragInside: boolean;
+    /**
+     * Indicates whether the tree items are focusable.
+     * If set to 'false', the tree items will not be focusable and will not receive focus when the user clicks on it.
+     */
+    focusable: boolean;
+    /**
+     * A collection of all the items in the tree, in the order they appear.
+     * The collection is live, meaning it is automatically updated when the underlying document is changed.
+     */
+    private lastFocusedItem;
+    private mutationObserver;
+    private autoExpandObserver;
+    private clickTarget;
+    private readonly localize;
+    private sortableInstance;
+    constructor();
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Generates a clone of the expand icon element to use for each tree item
+     */
+    private getExpandButtonIcon;
+    /**
+     * Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+     */
+    private initTreeItem;
+    initTreeItems(): void;
+    private handleTreeChanged;
+    /**
+     * Handles the selection of a tree item based on the current selection mode.
+     *
+     * @param selectedItem - The tree item that is being selected or toggled.
+     * @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
+     */
+    private selectItem;
+    private getAllTreeItems;
+    private getAllDirectTreeItems;
+    private focusItem;
+    private handleKeyDown;
+    private handleClick;
+    handleMouseDown(event: MouseEvent): void;
+    private handleFocusOut;
+    private handleFocusIn;
+    private expandToItem;
+    private handleSlotChange;
+    handleSortableUpdate(evt: Sortable.SortableEvent): void;
+    private destroySortable;
+    getSortableGroup(): string | undefined;
+    handleSortableStart(): void;
+    handleSortableEnd(): void;
+    private initSortable;
+    handleSelectionChange(): Promise<void>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns the list of tree items that are selected in the tree.
+     *
+     * @internal
+     */
+    get selectedItems(): CxTreeItem[];
+    /**
+     * Gets focusable tree items in the tree.
+     *
+     * @internal
+     */
+    getFocusableItems(): CxTreeItem[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-tree': CxTree;
+    }
+}

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

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