@orangelogic/design-system 2.19.0-pr77202.21

package/library/packages/atoms/src/components/tree-item/tree-item.utils.d.ts

@@ -0,0 +1,29 @@
+import { default as Sortable } from 'sortablejs';
+
+declare const pluginName = "tree-sortable";
+type TreeSortableOptions = Sortable.Options & {
+    /**
+     * Function to get the drop zone element for the sortable item.
+     * Receives the target element and returns the drop zone element or null/undefined if not applicable.
+     */
+    getDropZone?: (el: HTMLElement) => HTMLElement | null | undefined;
+    /**
+     * Percentage (0-1) indicating the threshold for inserting after a zone.
+     */
+    insertAfterZonePercentage?: number;
+    /**
+     * Percentage (0-1) indicating the threshold for inserting before a zone.
+     */
+    insertBeforeZonePercentage?: number;
+    /**
+     * If true, enables tree sorting functionality.
+     */
+    [pluginName]?: boolean;
+};
+declare class TreeSortable extends Sortable {
+    constructor(element: HTMLElement, options: TreeSortableOptions);
+    static create(element: HTMLElement, options?: TreeSortableOptions): Sortable;
+}
+export declare const getTreeSortableOptions: (options: TreeSortableOptions) => TreeSortableOptions;
+export { TreeSortable };
+export type { TreeSortableOptions };

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

@@ -0,0 +1,23 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { TypographyVariant } from '../../../../types/src/typography';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * @summary Use headings for page titles or subheadings to introduce content.
+ * Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.
+ *
+ * @csspart base - The component’s base wrapper.
+ *
+ * @cssproperty [--color=inherit] - The color of the text.
+ * @cssproperty [--font-family=var(--cx-font-sans)] - The font family of the text.
+ */
+export default class CxTypography extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    variant: TypographyVariant;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-typography': CxTypography;
+    }
+}

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

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

package/library/packages/atoms/src/components/video/video.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const INACTIVITY_TIMEOUT = 5000;
+export declare const AUTOPLAY_TIMEOUT = 500;

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

@@ -0,0 +1,139 @@
+import { default as CxImage } from '../image/image.ts';
+import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
+import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
+import { TemplateResult } from 'lit';
+import { VideoJsPlayer } from './videojs/index.js';
+
+/**
+ * @summary Video are wrappers for video elements with videoJS support. This component is used to display videos in your application.
+ *
+ * @csspart video-js-container - The video-js-container element, the main container of the video.
+ * @csspart placeholder - The placeholder element.
+ *
+ * @cssproperty [--padding=0] - The padding of the image.
+ * @cssproperty --border-radius - The border-radius of the video container.
+ * @cssproperty --border - The border of the video container.
+ *
+ * @event cx-play - Emitted when playback starts.
+ * @event cx-pause - Emitted when playback pauses.
+ * @event cx-time-update - Emitted while the playback position changes.
+ * @event cx-ended - Emitted when playback reaches the end.
+ * @event cx-seeked - Emitted after a seek operation.
+ * @event cx-loaded-metadata - Emitted when metadata is loaded.
+ * @event cx-error - Emitted when the video fails to load.
+ *
+ * @slot placeholder - The placeholder element, shown while the `src` is not set.
+ */
+export default class CxVideo extends ResizableElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-image': typeof CxImage;
+        'cx-resize-observer': typeof CxResizeObserver;
+    };
+    readonly localize: LocalizeController;
+    videoJsContainer: HTMLDivElement;
+    seekbar: HTMLDivElement;
+    resizeContainer: HTMLDivElement;
+    videoJsContainerAsync: Promise<HTMLDivElement>;
+    videoElement: HTMLVideoElement;
+    progressBarContainer: HTMLDivElement;
+    videoJsContainerElement: HTMLDivElement;
+    /**
+     * The path to the video to load.
+     */
+    src: string;
+    /**
+     * The name of the video.
+     */
+    name: string;
+    /**
+     * The source field for the name of the video.
+     */
+    nameSourceField: string;
+    /**
+     * The mime type of the video.
+     */
+    type: string;
+    /**
+     * The poster image to show before the video loads.
+     */
+    poster: string;
+    /**
+     * Determines if the video should autoplay.
+     */
+    autoplay: boolean;
+    /**
+     * Determines if the video should loop.
+     */
+    loop: boolean;
+    /**
+     * Determines if the video should be muted.
+     */
+    muted: boolean;
+    /**
+     * Determines if the controls should be shown.
+     */
+    showControls: boolean;
+    isLoaded: boolean;
+    isPlaying: boolean;
+    isError: boolean;
+    isFullscreen: boolean;
+    player: VideoJsPlayer | null;
+    videoWidth: number;
+    videoHeight: number;
+    protected autoPlayTimeout: number | null;
+    parsedName: string;
+    /**
+     * The current time of the video.
+     */
+    get currentTime(): any;
+    /**
+     * The duration of the video.
+     */
+    get duration(): any;
+    /**
+     * Support CMS5 edit mode for the video.
+     */
+    get isInEditMode(): boolean;
+    get containerClassMap(): {
+        container: boolean;
+        'container--empty': boolean;
+        'container--error': boolean;
+        'container--resizing': boolean;
+    };
+    constructor();
+    disconnectedCallback(): void;
+    private onPause;
+    private onPlay;
+    private onTimeUpdate;
+    private onEnded;
+    private onSeeked;
+    protected onFullscreenChange(): void;
+    private onLoadedMetadata;
+    private onError;
+    private handleKeyDown;
+    cleanUp(): void;
+    protected addVideoEventListeners(): void;
+    protected removeVideoEventListeners(): void;
+    attachSeekbar(): void;
+    protected setupVideoJsPlayer(): void;
+    handleLoopChange(): Promise<void>;
+    handleMutedChange(): Promise<void>;
+    handleControlsChange(): Promise<void>;
+    handlePosterChange(): Promise<void>;
+    handleSrcChange(): Promise<void>;
+    handleParsedNameChange(): Promise<void>;
+    private handleSizeChange;
+    updated(changedProps: Map<string, unknown>): void;
+    play(): void;
+    pause(): void;
+    seek(time: number): void;
+    protected renderContent(): TemplateResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-video': CxVideo;
+    }
+}

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

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

package/library/packages/atoms/src/components/video/videojs/videojs-vr-172.d.ts

@@ -0,0 +1,11 @@
+export default VR;
+declare function VR(player: any, options: any): any;
+declare class VR {
+    private constructor();
+    setTimeout: any;
+    clearTimeout: any;
+}
+declare namespace VR {
+    export { version as VERSION };
+}
+declare var version: string;

package/library/packages/atoms/src/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,24 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+ *
+ * @description According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/),
+ * "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers.
+ * For instance, hiding a search field's label as a common magnifying glass icon is used in its stead." </br> </br>
+ *
+ * Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus.
+ * This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
+ *
+ * @slot (default) - The content to be visually hidden.
+ */
+export default class CxVisuallyHidden extends CortexElement {
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-visually-hidden': CxVisuallyHidden;
+    }
+}

package/library/packages/atoms/src/components/visually-hidden/visually-hidden.styles.d.ts

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

package/library/packages/atoms/src/index.d.ts

@@ -0,0 +1,80 @@
+export { default as CxAlert } from './components/alert/alert';
+export { default as CxAnimatedImage } from './components/animated-image/animated-image';
+export { default as CxAnimation } from './components/animation/animation';
+export { default as CxAvatar } from './components/avatar/avatar';
+export { default as CxBadge } from './components/badge/badge';
+export { default as CxBreadcrumb } from './components/breadcrumb/breadcrumb';
+export { default as CxBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
+export { default as CxButton } from './components/button/button';
+export { default as CxButtonGroup } from './components/button-group/button-group';
+export { default as CxCard } from './components/card/card';
+export { default as CxCheckbox } from './components/checkbox/checkbox';
+export { default as CxColorPicker } from './components/color-picker/color-picker';
+export { default as CxCopyButton } from './components/copy-button/copy-button';
+export { default as CxDetails } from './components/details/details';
+export { default as CxDialog } from './components/dialog/dialog';
+export { default as CxDivider } from './components/divider/divider';
+export { default as CxDotPagination } from './components/dot-pagination/dot-pagination';
+export { default as CxDrawer } from './components/drawer/drawer';
+export { default as CxDropdown } from './components/dropdown/dropdown';
+export { default as CxElementClamp } from './components/element-clamp/element-clamp';
+export { default as CxFormatBytes } from './components/format-bytes/format-bytes';
+export { default as CxFormatDate } from './components/format-date/format-date';
+export { default as CxFormatNumber } from './components/format-number/format-number';
+export { default as CxGrid } from './components/grid/grid';
+export { default as CxGridItem } from './components/grid-item/grid-item';
+export { default as CxHeader } from './components/header/header';
+export { default as CxHubConnection } from './components/hub-connection/hub-connection';
+export { default as CxIcon } from './components/icon/icon';
+export { default as CxIconButton } from './components/icon-button/icon-button';
+export { default as CxIframe } from './components/iframe/iframe';
+export { default as CxImage } from './components/image/image';
+export { default as CxImageComparer } from './components/image-comparer/image-comparer';
+export { default as CxInclude } from './components/include/include';
+export { default as CxInput } from './components/input/input';
+export { default as CxInputGroup } from './components/input-group/input-group';
+export { default as CxLineClamp } from './components/line-clamp/line-clamp';
+export { default as CxMarkdown } from './components/markdown/markdown';
+export { default as CxMenu } from './components/menu/menu';
+export { default as CxMenuItem } from './components/menu-item/menu-item';
+export { default as CxMenuLabel } from './components/menu-label/menu-label';
+export { default as CxMenuSection } from './components/menu-section/menu-section';
+export { default as CxMutationObserver } from './components/mutation-observer/mutation-observer';
+export { default as CxOption } from './components/option/option';
+export { default as CxPagination } from './components/pagination/pagination';
+export { default as CxPopup } from './components/popup/popup';
+export { default as CxProgressBar } from './components/progress-bar/progress-bar';
+export { default as CxProgressRing } from './components/progress-ring/progress-ring';
+export { default as CxQrCode } from './components/qr-code/qr-code';
+export { default as CxRadio } from './components/radio/radio';
+export { default as CxRadioButton } from './components/radio-button/radio-button';
+export { default as CxRadioCard } from './components/radio-card/radio-card';
+export { default as CxRadioGroup } from './components/radio-group/radio-group';
+export { default as CxRange } from './components/range/range';
+export { default as CxRating } from './components/rating/rating';
+export { default as CxRelativeTime } from './components/relative-time/relative-time';
+export { default as CxResizeObserver } from './components/resize-observer/resize-observer';
+export { default as CxSelect } from './components/select/select';
+export { default as CxSkeleton } from './components/skeleton/skeleton';
+export { default as CxSpace } from './components/space/space';
+export { default as CxSpinner } from './components/spinner/spinner';
+export { default as CxSplitPanel } from './components/split-panel/split-panel';
+export { default as CxStep } from './components/step/step';
+export { default as CxStepper } from './components/stepper/stepper';
+export { default as CxSwitch } from './components/switch/switch';
+export { default as CxTab } from './components/tab/tab';
+export { default as CxTabGroup } from './components/tab-group/tab-group';
+export { default as CxTable } from './components/table/table';
+export { default as CxTabPanel } from './components/tab-panel/tab-panel';
+export { default as CxTag } from './components/tag/tag';
+export { default as CxTextarea } from './components/textarea/textarea';
+export { default as CxTimecode } from './components/timecode/timecode';
+export { default as CxTooltip } from './components/tooltip/tooltip';
+export { default as CxTree } from './components/tree/tree';
+export { default as CxTreeItem } from './components/tree-item/tree-item';
+export { default as CxTypography } from './components/typography/typography';
+export { default as CxVideo } from './components/video/video';
+export { default as CxVisuallyHidden } from './components/visually-hidden/visually-hidden';
+export { getAnimationNames, getEasingNames } from './utilities/animation';
+export { default as componentStyles } from '../../styles/src/component.styles';
+export { getAnimation, setAnimation, setDefaultAnimation, } from './utilities/animation-registry';

package/library/packages/atoms/src/utilities/animation-registry.d.ts

@@ -0,0 +1,24 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    options?: KeyframeAnimationOptions;
+    rtlKeyframes?: Keyframe[];
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    /**
+     * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+     * available using getAnimation().
+     */
+    dir: string;
+}
+/**
+ * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+ * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+ */
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+/** Sets a custom animation for the specified element. */
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+/** Gets an element's animation. Falls back to the default if no animation is found. */
+export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/library/packages/atoms/src/utilities/animation.d.ts

@@ -0,0 +1 @@
+export { getAnimationNames, getEasingNames, } from '../components/animation/animations';

package/library/packages/atoms/src/utilities/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styleStringToObject: (styles: string, camelCase?: boolean) => any;
+export declare const styleObjectToString: (style: any, sort?: boolean) => string;

package/library/packages/atoms/src/utilities/type-check.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if an element is an in-built HTMLElement (as opposed to a custom element).
+ * @param element
+ * @returns
+ */
+export declare const isNativeElement: (element: HTMLElement) => boolean;

package/library/packages/base/src/cortex-element.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, PropertyDeclaration, PropertyValues } from 'lit';
+
+type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
+type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
+type EventTypesWithRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
+};
+type EventTypesWithoutRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
+};
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type CxEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'> : CustomEventInit : CustomEventInit;
+type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
+export default class CortexElement extends LitElement {
+    dir: string;
+    lang: string;
+    theme: 'light' | 'dark';
+    preRender: boolean;
+    /** Emits a custom event with more convenient defaults. */
+    emit<T extends string & keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: CxEventInit<T> | undefined): GetCustomEventType<T>;
+    emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: CxEventInit<T>): GetCustomEventType<T>;
+    static version: string;
+    static define(name: string, elementConstructor?: typeof CortexElement, options?: ElementDefinitionOptions): void;
+    static dependencies: Record<string, typeof CortexElement>;
+    static createProperty(name: PropertyKey, options?: PropertyDeclaration): void;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected runFirstUpdated(_changedProperties: PropertyValues): void;
+    adoptedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleThemeChange;
+    getTheme(): "light" | "dark";
+    getState<K extends keyof this>(key: string): this[K];
+}
+export interface CortexFormControl extends CortexElement {
+    checkValidity: () => boolean;
+    defaultChecked?: boolean;
+    defaultValue?: unknown;
+    disabled?: boolean;
+    form?: string | HTMLElement;
+    getForm: () => HTMLFormElement | null;
+    max?: number | string | Date;
+    maxlength?: number;
+    min?: number | string | Date;
+    minlength?: number;
+    name: string;
+    pattern?: string;
+    reportValidity: () => boolean;
+    required?: boolean;
+    setCustomValidity: (message: string) => void;
+    step?: number | 'any';
+    readonly validationMessage: string;
+    readonly validity: ValidityState;
+    value: unknown;
+}
+export {};

package/library/packages/base/src/cortex-light-element.d.ts

@@ -0,0 +1,12 @@
+import { default as CortexElement } from './cortex-element';
+
+export default class CortexLightElement extends CortexElement {
+    #private;
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+}
+export declare function hasStyles(element: any): element is WithStyles;
+type WithStyles = {
+    styles: string;
+};
+export {};

package/library/packages/base/src/highlightable-element.d.ts

@@ -0,0 +1,76 @@
+import { Easing } from '../../types/src/index.ts';
+import { HighlightableElementEffect, HighlightableElementTextRevealStyle, HighlightableElementZoomStyle } from '../../types/src/highlightable-element';
+import { default as CortexElement } from './cortex-element';
+
+export default class HighlightableElement extends CortexElement {
+    /**
+     * The slot element.
+     */
+    readonly slotEl?: HTMLSlotElement;
+    /**
+     * Whether the gallery item has an event (excluding zoom).
+     */
+    hasEvent: boolean;
+    /**
+     * Specifies the easing function to use when highlighting the element.
+     */
+    easing: Easing;
+    /**
+     * Whether the gallery item highlights its border on hover.
+     */
+    highlightBorder: boolean;
+    /**
+     * Whether the gallery item highlights its color overlay on hover.
+     */
+    highlightColorOverlay: boolean;
+    /**
+     * Whether the gallery item highlights its drop shadow on hover.
+     */
+    highlightDropShadow: boolean;
+    /**
+     * Whether the gallery item highlights its background on hover.
+     */
+    highlightBackground: boolean;
+    /**
+     * Whether the gallery item highlights its opacity on hover.
+     */
+    highlightOpacity: boolean;
+    /**
+     * The effect of the gallery item.
+     */
+    effect: HighlightableElementEffect;
+    /**
+     * The style of the text reveal effect.
+     */
+    textRevealStyle: HighlightableElementTextRevealStyle;
+    /**
+     * The style of the zoom effect.
+     */
+    zoomStyle: HighlightableElementZoomStyle;
+    /**
+     * Whether the slot has content.
+     */
+    hasSlotContent: boolean;
+    /**
+     * Whether the slot content has data-item-id attribute.
+     */
+    isCustomSlot: boolean;
+    /**
+     * Is item being hover?
+     */
+    isHovering: boolean;
+    get easeCSSVariable(): string;
+    getHighlighterClass(): {
+        [x: string]: boolean;
+        highlighter: boolean;
+        'highlighter--background': boolean;
+        'highlighter--border': boolean;
+        'highlighter--color-overlay': boolean;
+        'highlighter--drop-shadow': boolean;
+        'highlighter--opacity': boolean;
+    };
+    /**
+     * Check if the slot has actual content (not just whitespace).
+     */
+    handleSlotChange(): void;
+}

package/library/packages/base/src/resizable-element.d.ts

@@ -0,0 +1,38 @@
+import { HeightMode } from '../../types/src/resizable-element';
+import { default as HighlightableElement } from './highlightable-element';
+
+export default class ResizableElement extends HighlightableElement {
+    containingElement: HTMLElement;
+    /** The width of the image. */
+    width: string;
+    /** The height of the image. */
+    height: string;
+    /** Make the image resizable */
+    resizable: boolean;
+    /** The height mode of the image. */
+    heightMode: HeightMode;
+    /** Whether the image should be resized without a limit */
+    noLimit: boolean;
+    protected isResizeActive: boolean;
+    protected isResizing: boolean;
+    protected resizeSize: {
+        height: number;
+        width: number;
+    };
+    private maxWidth;
+    private maxHeight;
+    private minWidth;
+    private minHeight;
+    get ratio(): number;
+    get keepRatio(): boolean;
+    constructor();
+    handleDocumentMouseDown(event: MouseEvent): void;
+    startResizing(): void;
+    stopResizing(): void;
+    handleResizeDragging(event: MouseEvent, revertHorizontal?: boolean, revertVertical?: boolean): void;
+    private handleResizeDraggingTopLeft;
+    private handleResizeDraggingTopRight;
+    private handleResizeDraggingBottomLeft;
+    private handleResizeDraggingBottomRight;
+    renderResizer(): import('lit').TemplateResult<1>;
+}