@orangelogic/design-system 2.19.0-ci.5

package/library/packages/types/src/text-to-speech.d.ts

@@ -0,0 +1,42 @@
+import { TemplateResult } from 'lit';
+
+export type Gender = 'MALE' | 'FEMALE';
+export type Voice = {
+    isPremiumVoice?: boolean;
+    languageCodes: string[];
+    name: string;
+    ssmlGender: Gender;
+    unsupportedSsmlTags?: string[];
+};
+export declare const GenderMap: {
+    readonly 1: "MALE";
+    readonly 2: "FEMALE";
+};
+export type TuneOptions = {
+    ssmlTagName: string;
+};
+export type TextToSpeechData = {
+    HtmlData: string;
+    SsmlData: {
+        LanguageCode: string;
+        Name: string;
+        SsmlGender: 1 | 2;
+        SsmlText: string;
+    };
+};
+export type TextToSpeechControlData = {
+    attribute?: string;
+    defaultValue: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    icon: TemplateResult;
+    inputType: string;
+    label: string;
+    name: string;
+    onChangeCallback: (value: string) => void;
+    options: Array<{
+        name: string;
+        value: string | number;
+    }>;
+    value: string;
+};

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

@@ -0,0 +1,12 @@
+export declare enum TypographyVariant {
+    Body1 = "body1",
+    Body2 = "body2",
+    Body3 = "body3",
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+    H6 = "h6",
+    Small = "small"
+}

package/library/packages/types/src/video-editor.d.ts

@@ -0,0 +1,52 @@
+export type Caption = Record<string, {
+    is_default: boolean;
+    label: string;
+    uri: string;
+}>;
+export type SubClip = {
+    captionsURI: Caption;
+    crop: {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    };
+    frameRate: number;
+    label: string;
+    muted: boolean;
+    playbackSpeed: number;
+    recordID: string;
+    rotation: number;
+    scrubMIME: string;
+    scrubURL: string;
+    sourceMIME: string;
+    sourceURL: string;
+    startPosition: number;
+    stopPosition: number;
+    volume: number;
+    vrMode: string;
+};
+export type Transition = {
+    backgroundColor: string;
+    duration: string;
+    subClipId: string;
+};
+export type Ratio = {
+    description: string;
+    height: number;
+    label: string;
+    width: number;
+};
+export declare enum ModifiedType {
+    Track = "track",
+    Transition = "transition"
+}
+export type FrameData = {
+    data: string;
+    time: number;
+};
+export declare enum TimecodeMode {
+    Frames = "Frames",
+    SMPTE = "SMPTE",
+    Standard = "Standard"
+}

package/library/packages/utils/src/actions/asset-click.d.ts

@@ -0,0 +1,9 @@
+import { AssetFormat, ClickAction } from '../../../types/src/asset-click-action';
+import { ClickEvent } from '../../../types/src/gallery';
+
+export declare function openAssetOverview(this: HTMLElement, id: string | null | undefined): void;
+export declare function openFolderOverview(this: HTMLElement, assetId: string | null | undefined): void;
+export declare function openLink(this: HTMLElement, url: string | null | undefined, target?: '_blank' | '_parent' | '_self' | '_top' | undefined): void;
+export declare function shareAsset(this: HTMLElement, assetId: string | null | undefined): void;
+export declare function downloadAsset(this: HTMLElement, assetIds: string[] | null | undefined, formats: AssetFormat | null | undefined): void;
+export declare function toGalleryEventClick(clickAction: ClickAction): ClickEvent | ClickAction;

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

@@ -0,0 +1,92 @@
+/**
+ * Removes a value from an array at a specific index
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number} index
+ * @return {*}  {any[]}
+ */
+export declare function removeAtIndex(arr: any[], index: number): any[];
+/**
+ * Removes multiple values from an array at specific indexes
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number[]} indexes
+ * @return {*}  {any[]}
+ */
+export declare function removeMultipleAtIndex(arr: any[], indexes: number[]): any[];
+/**
+ * Inserts a value into an array at a specific index
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number} index
+ * @param {*} value
+ * @return {*}  {any[]}
+ */
+export declare function insertAtIndex(arr: any[], index: number, value: any): any[];
+/**
+ * Inserts multiple values into an array at a specific index
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number} index
+ * @param {any[]} values
+ * @return {*}  {any[]}
+ */
+export declare function insertMultipleAtIndex(arr: any[], index: number, values: any[]): any[];
+/**
+ * Finds an item in an array by a property and value
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {string} prop
+ * @param {*} value
+ * @return {*}  {*}
+ */
+export declare function findIndexByProp(arr: any[], prop: string, value: any): any;
+/**
+ * Moves a value from one index to another in an array
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number} fromIndex
+ * @param {number} toIndex
+ * @return {*}  {any[]}
+ */
+export declare function moveToIndex(arr: any[], fromIndex: number, toIndex: number): any[];
+/**
+ * Moves multiple values from indexes to another in an array
+ *
+ * @export
+ * @param {any[]} arr
+ * @param {number[]} fromIndexes
+ * @param {number} toIndex
+ * @return {*}  {any[]}
+ */
+export declare function moveMultipleToIndex(arr: any[], fromIndexes: number[], toIndex: number): any[];
+export declare function groupBy(array: Array<Record<string, any>>, key: string): Record<string, Array<Record<string, any>>>;
+/**
+ * Handles multi-selection logic for a list of items, allowing users to select
+ * a range of items between the last selected item and a newly selected item.
+ *
+ * @param selectedItemIds - An array of currently selected item IDs.
+ * @param newItemId - The ID of the newly selected item.
+ * @param items - An array of objects representing the available items, each containing an `id` property.
+ * @returns A new array of selected item IDs, including the range of items between the last selected item and the new item.
+ *
+ * @remarks
+ * - If no items are currently selected, the function will return an array containing only the `newItemId`.
+ * - If the `newItemId` or the last selected item is not found in the `items` array, the function will return an array containing only the `newItemId`.
+ * - The function ensures that the selection order is consistent with the order of items in the `items` array.
+ * - Items that are already selected will not be added again to the selection.
+ */
+export declare function multiSelectTo(selectedItemIds: string[], newItemId: string, items: Array<{
+    id: string;
+}>): string[];
+/**
+ * Handles column resizing logic for relative values.
+ * For example, if you have two values [50, 50] totaling 100, and you change the first value to 70, the second value will automatically adjust to 30 to maintain the total.
+ */
+export declare function adjustRelativeValues(values: number[], delta: number, index: number, min: number, startWidth: number, nextWidth: number): void;

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

@@ -0,0 +1,13 @@
+export declare const isFirefox: () => boolean;
+export declare const isChrome: () => boolean;
+export declare const isSafari: () => boolean;
+export declare const supportHLS: boolean;
+/**
+ * Check copied from Overlay.ts
+ */
+export declare const popoverSupported: boolean;
+export declare function getNextAncestor(node: Element): HTMLElement | null;
+export declare function findAncestorWithBuggyStyle(element: Element | null, predicate: (element: Element) => boolean): Element | null | undefined;
+export declare function findCuttingAncestor(element: Element): Element | null | undefined;
+export declare function findContainingBlock(element: Element): Element | null | undefined;
+export declare function isIOS(): boolean;

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

@@ -0,0 +1,77 @@
+type ColorExtract = {
+    blue?: number;
+    c?: number;
+    green?: number;
+    hex?: string;
+    k?: number;
+    m?: number;
+    red?: number;
+    y?: number;
+};
+export declare enum ColorType {
+    Cmyk = "cmyk",
+    Hex = "hex",
+    Rgb = "rgb",
+    Unknown = "unknown"
+}
+/**
+ * >>>> Color related regex below
+ */
+export declare const HEX_VALIDATION_REGEX: RegExp;
+export declare const RGB_VALIDATION_REGEX: RegExp;
+export declare const CMYK_VALIDATION_REGEX: RegExp;
+export declare const HEX_ALPHA_VALIDATION_REGEX: RegExp;
+/**
+ * >>>> Color related functions below
+ */
+export declare function getColorType(input: string): ColorType;
+/**
+ * Main convert functions
+ */
+export declare function extractColor(input: string): ColorExtract;
+/**
+ * format can you these values: hex, red, green, blue, c, m, y, k
+ * Example: "#hex", "red, green, blue", "c, m, y, k"
+ * Example: "hex", "(red | green | blue)", "(c & m & y & k)"
+ *
+ * Default format for hex is "#hex"
+ * Default format for rgb is "red, green, blue"
+ * Default format for cmyk is "c, m, y, k"
+ */
+export declare function convertColor(input: string, to: ColorType, format?: string): string;
+/**
+ * Calculate luminance & return text color that contrast to the background
+ * @param backgroundColor - The background color to calculate luminance - must be a valid HEX color!
+ */
+export declare function luminanceTextColor(backgroundColor: string, textColor?: string, textContrastColor?: string): string;
+/**
+ * Extracts light and dark color values from a CSS light-dark() function.
+ * Handles nested parentheses for color formats like rgb(), hsl(), etc.
+ * @param value - String containing light-dark(), e.g. "light-dark(#000, #fff)" or "light-dark(rgb(0,0,0), rgb(255,255,255))"
+ * @returns Space-separated light and dark colors, or empty string if invalid
+ * @example parseLightDark("light-dark(#000, #fff)") => "#000 #fff"
+ */
+export declare function parseLightDark(value: string): string;
+/**
+ * Converts two color values into a CSS light-dark() function string.
+ * @param light - The color for light mode (hex, rgb, rgba, hsl, hsla)
+ * @param dark - The color for dark mode (hex, rgb, rgba, hsl, hsla)
+ * @returns CSS light-dark() string, e.g. "light-dark(#000, #fff)"
+ * @example getLightDarkCssString("#000", "#fff") => "light-dark(#000, #fff)"
+ */
+export declare function getLightDarkCssString(light: string, dark: string): string;
+/**
+ * Parses a border value containing light-dark() into space-separated color and size parts.
+ * @param value - Border value string containing light-dark(), e.g. "light-dark(#000, #fff) 0px"
+ * @returns Space-separated string of light color, dark color, and size, or null if invalid
+ * @example parseBorder("light-dark(#000, #fff) 0px") => "#000 #fff 0px"
+ */
+export declare function parseBorder(value: string): string | null;
+/**
+ * Parses a shadow value containing light-dark() into space-separated offset and color parts.
+ * @param value - Shadow value string, e.g. "0px 0px 0px 0px light-dark(#000, #fff)"
+ * @returns Space-separated string of offsets followed by colors, or empty string if invalid
+ * @example parseShadow("0px 0px 0px 0px light-dark(#000, #fff)") => "0px 0px 0px 0px #000 #fff"
+ */
+export declare function parseShadow(value: string): string;
+export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

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

@@ -0,0 +1,22 @@
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+/** Parses a CSS duration and returns the number of milliseconds. */
+export declare function parseDuration(delay: number | string): number;
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number | null | undefined;
+    composite?: CompositeOperationOrAuto;
+    easing?: string;
+    offset?: number | null;
+}[];

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

@@ -0,0 +1,5 @@
+declare const timecodeConverter: {
+    fromAttribute: (value: string) => number[];
+    toAttribute: (value: number[]) => string;
+};
+export { timecodeConverter };

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

@@ -0,0 +1,39 @@
+interface Constructor<T> {
+    new (...args: any[]): T;
+}
+interface ClassDescriptor {
+    elements: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+    kind: 'class';
+}
+interface ClassElement {
+    descriptor?: PropertyDescriptor;
+    extras?: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+    initializer?: Function;
+    key: PropertyKey;
+    kind: 'field' | 'method';
+    placement: 'static' | 'prototype' | 'own';
+}
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```
+ * @customElement('my-element')
+ * class MyElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The name of the custom element to define.
+ */
+export declare const customElement: (tagName: string) => (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) => any;
+declare global {
+    interface Window {
+        ControlMgr: any;
+        Matrix3: any;
+    }
+}
+export {};

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

@@ -0,0 +1 @@
+export declare const debounce: (delay: number, leading?: boolean) => <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => void;

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

@@ -0,0 +1,3 @@
+import { ReactiveElement } from 'lit';
+
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

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

@@ -0,0 +1,15 @@
+interface DragOptions {
+    /**
+     * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+     * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+     * a drag (e.g. positioning a handle initially at the click target).
+     */
+    initialEvent: PointerEvent;
+    /** Callback that runs as dragging occurs. */
+    onMove: (x: number, y: number, pointerEvent: PointerEvent) => void;
+    /** Callback that runs when dragging stops. */
+    onStop: () => void;
+}
+/** Begins listening for dragging. */
+export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
+export {};

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

@@ -0,0 +1,2 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

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

@@ -0,0 +1,79 @@
+import { CortexFormControl } from '../../../base/src/cortex-element.ts';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export declare const formCollections: WeakMap<HTMLFormElement, Set<CortexFormControl>>;
+export interface FormControlControllerOptions {
+    /**
+     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
+     * states such as user-valid and user-invalid.user interacted validity states. */
+    assumeInteractionOn: string[];
+    /**
+     * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false.
+     *   this is helpful is you want to check validation without triggering the native browser constraint violation warning.
+     */
+    checkValidity: (input: CortexFormControl) => boolean;
+    /** A function that returns the form control's default value. */
+    defaultValue: (input: CortexFormControl) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: CortexFormControl) => boolean;
+    /** A function that returns the form containing the form control. */
+    form: (input: CortexFormControl) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: CortexFormControl) => string;
+    /**
+     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+     * prevent submission and trigger the browser's constraint violation warning.
+     */
+    reportValidity: (input: CortexFormControl) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: CortexFormControl, value: unknown) => void;
+    /** A function that returns the form control's current value. */
+    value: (input: CortexFormControl) => unknown | unknown[];
+}
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export declare class FormControlController implements ReactiveController {
+    host: CortexFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & CortexFormControl, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private readonly handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private checkFormValidity;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter?: HTMLInputElement): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter?: HTMLInputElement): void;
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid: boolean): void;
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity(): void;
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `cx-invalid`.
+     * If the `cx-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `cx-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

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

@@ -0,0 +1,70 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
+export interface Translation {
+    $code: string;
+    $dir: 'ltr' | 'rtl';
+    $name: string;
+}
+export interface DefaultTranslation extends Translation {
+    [key: string]: any;
+}
+export interface ExistsOptions {
+    includeFallback: boolean;
+    lang: string;
+}
+/**
+ * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+ * lowercase.
+ */
+export declare function dir(host: ReactiveControllerHost & HTMLElement): string;
+/** Registers one or more translations */
+export declare function registerTranslation(...translation: Translation[]): void;
+/** Updates all localized elements that are currently connected */
+export declare function update(): void;
+/**
+ * Localize Reactive Controller for components built with Lit
+ *
+ * To use this controller, import the class and instantiate it in a custom element constructor:
+ *
+ * private localize = new LocalizeController(this);
+ *
+ * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
+ * respond to changes to its own dir|lang properties, make it a property:
+ *
+ *   @property() dir: string;
+ *   @property() lang: string;
+ *
+ * To use a translation method, call it like this:
+ *
+ *   ${this.localize.term('term_key_here')}
+ *   ${this.localize.date('2021-12-03')}
+ *   ${this.localize.number(1000000)}
+ */
+export declare class LocalizeController<UserTranslation extends Translation = DefaultTranslation> implements ReactiveController {
+    host: ReactiveControllerHost & HTMLElement;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+     * lowercase.
+     */
+    dir(): string;
+    /**
+     * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
+     * lowercase.
+     */
+    lang(): string;
+    private getTranslationData;
+    /** Determines if the specified term exists, optionally checking the fallback translation. */
+    exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
+    /** Outputs a translated term. */
+    term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
+    /** Outputs a localized date in the specified format. */
+    date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
+    /** Outputs a localized number in the specified format. */
+    number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
+    /** Outputs a localized time in relative format. */
+    relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
+}