@orangelogic/design-system 2.19.0-ci.5

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

@@ -0,0 +1,11 @@
+/**
+ * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+ * parent doesn't have to be positioned relative or absolute.
+ *
+ * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems
+ * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+ */
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    left: number;
+    top: number;
+};

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

@@ -0,0 +1,10 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export declare class CortexPopupController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    currentZIndex: number;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    constructor(host: ReactiveControllerHost & Element);
+    activatePopup(): Promise<void>;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

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

@@ -0,0 +1,9 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    end: HTMLElement;
+    start: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

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

@@ -0,0 +1 @@
+export declare const isCortexAdobePlugin: () => boolean;

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    deepCompare?: boolean;
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

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

@@ -0,0 +1,30 @@
+import { TemplateResult } from 'lit';
+
+declare global {
+    interface Window {
+        StackMgr: any;
+    }
+}
+export declare const isDomElement: (element: unknown) => boolean;
+export declare const isInElement: (element: Element | null, target: Element) => boolean;
+export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+/**
+ * @param value - The CSS value to convert to pixels.
+ * @param contextEl - The element to use as the context for the conversion.
+ * @param property - The property to use for the conversion. If the property is horizontal, use 'width'. If the property is vertical, use 'height'.
+ * @returns The value in pixels.
+ */
+export declare const cssValueToPx: (value: string, contextEl?: HTMLElement, property?: "width" | "height") => number;
+/** Calculate the progress number by using mouse event and container element */
+export declare const getRelativeClickPercentage: (event: MouseEvent, container: HTMLElement) => number;
+export declare const loadScript: (src: string, window?: Window) => Promise<void>;
+export declare function getNeededPaddingForBoxShadow(boxShadow: string, appendPx?: boolean): {
+    paddingBottom: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+};
+export declare function sortByTopPosition<T extends Element>(elements: T[]): T[];
+export declare function getCurrentZIndex(): any;
+export declare function getCortexPopupLayer(): HTMLElement;
+export declare function getElementFromTemplate(template: TemplateResult): HTMLElement;

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

@@ -0,0 +1 @@
+export declare const isModKey: (event: KeyboardEvent | MouseEvent) => boolean;

package/library/packages/utils/src/fetch/fetchCortex.d.ts

@@ -0,0 +1,3 @@
+export declare function fetchCortexApi(relativeUrl: string, init?: RequestInit, params?: {
+    [key: string]: string | undefined;
+} | Array<[string, string | undefined]> | null, baseUri?: string): Promise<Response>;

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

@@ -0,0 +1,12 @@
+/**
+ * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the
+ * property will be converted to an array.
+ */
+export declare function serialize(form: HTMLFormElement): Record<string, unknown>;
+/**
+ * Returns all form controls that are associated with the specified form. Includes both native and Shoelace form
+ * controls. Use this function in lieu of the `HTMLFormElement.elements` property, which doesn't recognize Shoelace
+ * form controls.
+ */
+export declare function getFormControls(form: HTMLFormElement): Element[];
+export declare function isFormInteracted(form: HTMLFormElement): boolean;

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

@@ -0,0 +1 @@
+export declare function debounce(func: (...args: any[]) => void, wait: number, immediate?: boolean): (...args: any[]) => void;

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

@@ -0,0 +1 @@
+export * from 'gsap';

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

@@ -0,0 +1,28 @@
+export declare const calculateAspectRatioFit: (srcWidth: number, srcHeight: number, desiredWidth: number, desiredHeight: number) => {
+    height: number;
+    width: number;
+};
+export declare function resizeImage(image: string, width: number, height: number, maxWidth: number, maxHeight: number): Promise<{
+    height: number;
+    url: string;
+    width: number;
+}>;
+export declare function cropImage(image: {
+    height: number;
+    url: string;
+    width: number;
+}, options: {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}): Promise<string>;
+export declare function rotateImage(image: {
+    height: number;
+    url: string;
+    width: number;
+}, rotate: number): Promise<string>;
+export declare function getContainedImageSize(img: HTMLImageElement): {
+    height: number;
+    width: number;
+};

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

@@ -0,0 +1,32 @@
+/**
+ * Converts a numeric value from one data size unit to another.
+ *
+ * Supports both byte units (B, KB, MB, GB, TB) and bit units (b, Kb, Mb, Gb, Tb).
+ *
+ * @param {number} [decimals=2] - Number of decimal places to round the result to.
+ * @param {'B'|'KB'|'MB'|'GB'|'TB'|'b'|'Kb'|'Mb'|'Gb'|'Tb'} [inputUnit='B'] - Unit of the input value.
+ * @param {'B'|'KB'|'MB'|'GB'|'TB'|'b'|'Kb'|'Mb'|'Gb'|'Tb'} [targetUnit='B'] - Unit to convert the input value into.
+ * @param {number} value - The numeric value to convert.
+ * @returns {number} The converted value rounded to the specified decimal places.
+ *                   Returns 0 if the input is invalid or results in NaN.
+ */
+export declare function convertDataUnits({ decimals, inputUnit, targetUnit, value, }: {
+    decimals?: number;
+    inputUnit?: 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'b' | 'Kb' | 'Mb' | 'Gb' | 'Tb';
+    targetUnit?: 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'b' | 'Kb' | 'Mb' | 'Gb' | 'Tb';
+    value: number;
+}): number;
+export declare function sanitizeRotation(rotation: number): number;
+export declare function convertPixelsToAspectRatio(width: number, height: number): {
+    height: number;
+    width: number;
+};
+export declare function rotateBox(width: number, height: number, angle: number): {
+    height: number;
+    width: number;
+};
+export declare function convertDurationToMilliseconds(duration: string): number;
+export declare function extractValueAndUnit(value: string): {
+    unit: string;
+    value: number;
+} | null;

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

@@ -0,0 +1,4 @@
+export declare function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): {
+    [P in K]: T[P];
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Use for padding, margin
+ */
+export declare function splitBoxValues(padding: string, removeUnit?: boolean): [string, string, string, string];

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

@@ -0,0 +1,11 @@
+import { DeviceType } from '../../../types/src/content-builder';
+
+/**
+ * Extracts breakpoints from CSS custom properties with fallback to default values.
+ *
+ * @param element - The element to get computed styles from
+ * @param defaultBreakpoints - Default breakpoints to use if CSS custom properties are not available
+ * @returns A tuple of [mobile, tablet, desktop] breakpoints
+ */
+export declare function getBreakpointsFromCSS(element: Element, defaultBreakpoints?: [number, number, number]): [number, number, number];
+export declare function getDeviceType(breakpoints: [number, number, number]): DeviceType;

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

@@ -0,0 +1,2 @@
+export declare function readLocalStorageValue(key: string, defaultValue: string): string;
+export declare function writeLocalStorageValue(key: string, value: string): void;

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

@@ -0,0 +1,117 @@
+import { TimecodeMode } from '../../../types/src/video-editor';
+
+/**
+ * Converts a string to kebab-case.
+ *
+ * The function handles various cases such as spaces, underscores, and camelCase.
+ * It first replaces spaces and underscores with hyphens. Then it handles camelCase
+ * by inserting hyphens before uppercase letters, converting the string to lowercase,
+ * and trimming hyphens from the start and end of the result.
+ */
+export declare function toKebabCase(str: string): string;
+/**
+ * Converts a string to PascalCase.
+ *
+ * The function handles various cases such as kebab-case, snake_case, and spaces.
+ * It first replaces spaces, hyphens, and underscores with a single space.
+ * Then it capitalizes the first letter of each word and joins them together.
+ */
+export declare function toPascalCase(str: string): string;
+/**
+ * Converts a string to camelCase.
+ *
+ * The function handles various cases such as kebab-case, snake_case, and spaces.
+ * It first replaces hyphens, underscores, and spaces with a single space.
+ * Then it lowers the first character of the string and capitalizes the first letter
+ * of each subsequent word, joining them together without spaces.
+ */
+export declare function toCamelCase(str: string): string;
+/**
+ * Converts from pascal case into title case (Ex: MyPackTest → My Pack Test)
+ */
+export declare function toTitleCase(strInPascal: string): string;
+/**
+ * Converts the first character of string to upper case
+ */
+export declare function upperFirst(str: unknown): string | null;
+/**
+ * Truncate text from the middle
+ * @param str The string to truncate
+ * @param threshold The threshold at which to truncate
+ * @param before The number of characters to keep before the truncation
+ * @param after The number of characters to keep after the truncation
+ * @returns The truncated string
+ */
+export declare const truncateTextMiddle: (str: string, threshold: number, before: number, after: number) => string;
+/**
+ * Splits a camelCase formatted string into words, keeping the first word as is
+ * and converting subsequent words to lowercase.
+ *
+ * @param input The camelCase formatted string to split.
+ * @returns A string with the first word unchanged and subsequent words in lowercase.
+ */
+export declare const splitCamelCaseFormatted: (input: string) => string;
+/**
+ * Options for formatting time
+ */
+export interface TimeFormatOptions {
+    /** Frame rate for SMPTE and frames modes (default: 24 fps) */
+    frameRate?: number;
+    /** The timecode mode to use */
+    mode?: TimecodeMode;
+    /** Whether to show hours in standard mode */
+    showHours?: boolean;
+    /** Whether to show milliseconds in standard mode */
+    showMilliseconds?: boolean;
+}
+/**
+ * Formats a number of seconds into a string based on the specified timecode mode.
+ *
+ * @param seconds The number of seconds to format
+ * @param options Formatting options
+ * @returns A formatted time string
+ *
+ * @example
+ * // Standard mode (default) - MM:SS format
+ * formatSecondsToTime(3661.5) // "01:01:01.5"
+ * formatSecondsToTime(3661.5, { showHours: true }) // "01:01:01"
+ * formatSecondsToTime(3661.5, { showMilliseconds: true }) // "01:01:01.50"
+ *
+ * // SMPTE mode - HH:MM:SS:FF format
+ * formatSecondsToTime(3661.5, { mode: 'smpte', frameRate: 24 }) // "01:01:01:12"
+ * formatSecondsToTime(3661.5, { mode: 'smpte', frameRate: 30 }) // "01:01:01:15"
+ *
+ * // Frames mode - total frame count
+ * formatSecondsToTime(3661.5, { mode: 'frames', frameRate: 24 }) // "87876"
+ * formatSecondsToTime(3661.5, { mode: 'frames', frameRate: 30 }) // "109845"
+ */
+export declare function formatSecondsToTime(seconds: number, options?: TimeFormatOptions): string;
+/**
+ * Pads a path with a trailing slash if it doesn't already have one
+ * @param path The path to pad
+ * @returns The padded path
+ */
+export declare function padPath(path: string): string;
+/**
+ * Parses a time string and converts it to seconds.
+ * This function reverses the effect of formatSecondsToTime.
+ *
+ * @param timeString The time string to parse
+ * @param options Parsing options
+ * @returns The number of seconds, or null if parsing fails
+ *
+ * @example
+ * // Standard time formats
+ * formatTimeToSeconds('01:15') // 75
+ * formatTimeToSeconds('01:01:01.50') // 3661.5
+ * formatTimeToSeconds('01:01:01') // 3661
+ *
+ * // SMPTE timecode format
+ * formatTimeToSeconds('01:01:01:12', { mode: TimecodeMode.SMPTE, frameRate: 24 }) // 3661.5
+ *
+ * // Frames format
+ * formatTimeToSeconds('87876', { mode: TimecodeMode.Frames, frameRate: 24 }) // 3661.5
+ */
+export declare function formatTimeToSeconds(timeString: string, options?: TimeFormatOptions): number;
+export declare function extractExtension(filename: string): string | null;
+export declare function sanitizeHTML(html: string): string;

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

@@ -0,0 +1,5 @@
+type ToastOptionType = {
+    notificationType?: string;
+};
+export declare const toast: (message: string, option?: ToastOptionType) => void;
+export {};

package/library/packages/utils/src/translations/en.d.ts

@@ -0,0 +1,4 @@
+import { Translation } from '../custom-element/i18n.ts';
+
+declare const translation: Translation;
+export default translation;

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

@@ -0,0 +1,6 @@
+export declare const appendProtocol: (inputUrl: string, defaultProtocol?: string, ignoreRelativeUrl?: boolean) => string;
+export declare const isValidUrl: (urlString: string) => boolean;
+export declare const RELATIVE_URL_REGEX: string;
+export declare const URL_VALIDATION_REGEX: string;
+export declare const URL_DOMAIN_VALIDATION_REGEX: string;
+export declare const URL_PROTOCOL_VALIDATION_REGEX: string;

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

@@ -0,0 +1,20 @@
+type FrameData = {
+    data: string;
+    time: number;
+};
+export declare function insertFrameToCache(arr: FrameData[], newObj: FrameData): void;
+export declare function findInRange(frames: FrameData[], min: number, max: number): FrameData;
+export declare function extractFrames({ cache, interval, src, startPosition, stopPosition, }: {
+    cache?: {
+        frames: FrameData[];
+        src: string;
+    };
+    interval: number;
+    src: string;
+    startPosition?: number;
+    stopPosition?: number;
+}): AsyncGenerator<{
+    data: string;
+    time: number;
+}, void, unknown>;
+export {};