@orangelogic/design-system 2.19.0-pr77202.21

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

@@ -0,0 +1,77 @@
+import { default as CxCopyButton } from '../copy-button/copy-button.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { Alignment, Variant } from '../../../../types/src/header';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+export default class CxHeader extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-copy-button': typeof CxCopyButton;
+    };
+    private readonly localize;
+    defaultSlot: HTMLSlotElement;
+    heading: HTMLHeadingElement;
+    /**
+     * The button’s theme variant.
+     */
+    variant: Variant;
+    /**
+     * The font size of the heading.
+     * Will override the default font size by the variant if provided
+     */
+    fontSize: string | undefined;
+    /**
+     * Enables the anchor link for the header.
+     */
+    hasAnchorLink: boolean;
+    /**
+     * The anchor link for the header. This will be used as the href for the anchor link.
+     */
+    anchorLink: string;
+    /**
+     * Header alignment
+     */
+    alignment: Alignment;
+    /**
+     * Whether to disable copy button or not
+     */
+    disabledCopyButton: boolean;
+    private cms5PageReadyTimeout;
+    /**
+     * Get the owner window
+     */
+    private get ownerWindow();
+    /**
+     * Get the anchor ID for the header.
+     * If `hasAnchorLink` is false, it returns an empty string.
+     * If `anchorLink` is provided, it returns that.
+     * Otherwise, it generates an anchor based on the text content of the header,
+     */
+    get anchorID(): string;
+    scrollToAnchor: () => void;
+    constructor();
+    runFirstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Scroll to anchor after CMS5 page is ready
+     * Wait 100ms for repaint reflow shift layout (not affect by fetching api in web component)
+     */
+    handleCMS5PageReady(): void;
+    private handleClick;
+    getAnchorID(): string;
+    /**
+     * After Tiptap editor is destroyed, the slot element is removed.
+     * This method is used to re-add the slot element.
+     */
+    addSlotElement(): void;
+    handleHeadingChange(): void;
+    private handleCopyButtonClick;
+    renderHeading(content: TemplateResult): TemplateResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-header': CxHeader;
+    }
+}

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

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

package/library/packages/atoms/src/components/hub-connection/hub-connection.d.ts

@@ -0,0 +1,55 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import * as signalR from '@microsoft/signalr';
+/**
+ * @summary The `cx-hub-connection` component is used to establish a connection to a SignalR hub.
+ * https://learn.microsoft.com/en-us/javascript/api/%40microsoft/signalr/hubconnection?view=signalr-js-latest
+ *
+ * @event {{ args: any[] }} cx-invoked.[method_name] - Emitted when the method with such name is invoked on the server.
+ * E.g: `cx-invoked.receiveMessage` will fire when `receiveMessage` method is invoked on the server.
+ */
+export default class CxHubConnection extends CortexElement {
+    private connection;
+    /**
+     * In case the connection is re-established, we need to re-register the event listeners.
+     * This set stores the names of the method names that are being watched.
+     */
+    private readonly watchedMethods;
+    /** The url of the HubConnection to the server. */
+    baseUrl: string;
+    /** Default interval at which to ping the server in milliseconds. */
+    keepAliveIntervalInMilliseconds: number;
+    /** Default server timeout in milliseconds. */
+    serverTimeoutInMilliseconds: number;
+    /** A boolean value that determines whether the negotiation step should be skipped when connecting to the server. */
+    skipNegotiation: boolean;
+    /** The transport type for the connection. */
+    transport: signalR.HttpTransportType;
+    /**
+     * Controls when the connection starts.
+     */
+    connectMode: 'manual' | 'auto';
+    connectedCallback(): void;
+    private readonly emitEvent;
+    private registerEventListeners;
+    onBaseUrlChanged(): void;
+    /** Starts the connection.
+     * @returns A Promise that resolves when the connection is successfully started, or rejects with an error.
+     */
+    start(): Promise<void>;
+    /** Stops the connection.
+     * @returns A Promise that resolves when the connection is successfully stopped, or rejects with an error.
+     */
+    stop(): Promise<void>;
+    /**
+     * Invokes a hub method on the server using the specified method name and arguments.
+     * @param methodName The name of the server method to invoke.
+     * @param args The arguments to pass to the server method.
+     * @returns A Promise that resolves with the result of the server method (if any), or rejects with an error.
+     */
+    invoke(methodName: string, ...args: any[]): Promise<any>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-hub-connection': CxHubConnection;
+    }
+}

package/library/packages/atoms/src/components/icon/font-awesome.style.d.ts

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

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

@@ -0,0 +1,40 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Icons are symbols that can be used to represent various options within an application.
+ * https://fonts.google.com/icons
+ *
+ * @csspart span - The internal span element.
+ *
+ * @event cx-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+ * @event cx-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+ * @cssproperty [--weight=400] - The weight of the icon.
+ * @cssproperty [--grade=200] - The grade of the icon.
+ * @cssproperty [--optical-size=48] - The optical size of the icon.
+ */
+export default class CxIcon extends CortexElement {
+    static styles: CSSResultGroup;
+    /** The name of the icon to draw. Available names depend on the icon library being used. */
+    name: string;
+    /** The src of the icon for custom icons. */
+    src: string;
+    /**
+     * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+     * ignored by assistive devices.
+     */
+    label: string;
+    /** The variant of the icon to draw. */
+    variant: 'outlined' | 'filled' | 'round' | 'sharp' | 'two-tone' | 'fa';
+    /** The class of the Font Awesome icon to draw */
+    iconClass: string;
+    handleLabelChange(): void;
+    private onLoad;
+    private onError;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-icon': CxIcon;
+    }
+}

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

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

package/library/packages/atoms/src/components/icon-button/icon-button.d.ts

@@ -0,0 +1,102 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { ButtonVariant } from '../../../../types/src/button';
+import { CSSResultGroup } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxSpinner } from '../spinner/spinner';
+
+/**
+ * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ *
+ * @description For a full list of icons that come bundled with Orange Logic Design System, refer to the [icon component](?s=atoms&id=/icon).
+ *
+ * @event cx-blur - Emitted when the icon button loses focus.
+ * @event cx-focus - Emitted when the icon button gains focus.
+ *
+ * @slot badge - A badge to show on top right corner.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --group-divider-color - The color of the divider between icon buttons in a group.
+ */
+export default class CxIconButton extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-icon': typeof CxIcon;
+        'cx-spinner': typeof CxSpinner;
+    };
+    private readonly localize;
+    button: HTMLButtonElement | HTMLLinkElement;
+    icon: CxIcon;
+    private hasFocus;
+    /**
+     * The name of the icon to draw.
+     */
+    name?: string;
+    /**
+     * The variant of the icon to draw.
+     */
+    variant: 'outlined' | 'filled' | 'round' | 'sharp' | 'two-tone' | 'fa';
+    /** The variant of the button. */
+    buttonVariant: ButtonVariant;
+    /**
+     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can
+     * result in XSS attacks.
+     */
+    src?: string;
+    /**
+     * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+     */
+    href?: string;
+    /**
+     * Tells the browser where to open the link. Only used when `href` is set.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Tells the browser to download the linked file as this filename. Only used when `href` is set.
+     */
+    download?: string;
+    /**
+     * A description that gets read by assistive devices. For optimal accessibility, you should always include a label that
+     * describes what the icon button does.
+     */
+    label: string;
+    /**
+     * Disables the button.
+     */
+    disabled: boolean;
+    /** Draws the button in a loading state. */
+    loading: boolean;
+    /**
+     * The class of the Font Awesome icon to draw
+     */
+    iconClass: string;
+    /**
+     * The button's size.
+     */
+    size: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Draws an outlined button.
+     */
+    outline: boolean;
+    /**
+     * Draws a circular icon button.
+     */
+    circle: boolean;
+    runFirstUpdated(): void;
+    syncStyles(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleClick;
+    /** Simulates a click on the icon button. */
+    click(): void;
+    /** Sets focus on the icon button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the icon button. */
+    blur(): void;
+    render(): import('lit').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-icon-button': CxIconButton;
+    }
+}

package/library/packages/atoms/src/components/icon-button/icon-button.styles.d.ts

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

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

@@ -0,0 +1,60 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CxIframeLoading } from '../../../../types/src/iframe';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxIframe - A component for embedding iframes with responsive width and configurable height
+ *
+ * @cssproperty --height - The height of the iframe
+ *
+ * @csspart placeholder - The placeholder element when no source URL is provided
+ * @csspart iframe - The iframe element when a source URL is provided
+ */
+export default class CxIframe extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {};
+    private readonly localize;
+    iframe: HTMLIFrameElement;
+    /**
+     * The source URL for the iframe
+     */
+    src: string;
+    /**
+     * Title for accessibility
+     */
+    iframeTitle: string;
+    /**
+     * Lazy/eager loading
+     */
+    iframeLoading: CxIframeLoading;
+    /**
+     * The 'allow' attribute for the iframe (e.g. "fullscreen; autoplay")
+     */
+    allow: string;
+    /**
+     * The 'sandbox' attribute for the iframe (e.g. "allow-scripts allow-same-origin")
+     */
+    sandbox: string;
+    /**
+     * The 'referrerpolicy' attribute for the iframe (e.g. "no-referrer")
+     */
+    referrerPolicy: string;
+    /**
+     * Whether to allow fullscreen mode
+     */
+    canFullscreen: boolean;
+    /**
+     * Whether the iframe is currently loading content
+     */
+    loading: boolean;
+    /**
+     * Refreshes the iframe when the fullscreen mode is toggled
+     */
+    handleCanFullscreenChange(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-iframe': CxIframe;
+    }
+}

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

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

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

@@ -0,0 +1,171 @@
+import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
+import { ObjectFit } from '../../../../types/src/index.ts';
+import { ClickHandlerType } from '../../../../types/src/image';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n.ts';
+import { TemplateResult } from 'lit';
+import { Zoom } from 'medium-zoom';
+import { default as CxIcon } from '../icon/icon';
+import { default as CxPopup } from '../popup/popup';
+import { default as CxResizeObserver } from '../resize-observer/resize-observer';
+import { default as CxSkeleton } from '../skeleton/skeleton';
+import { default as CxSpace } from '../space/space';
+
+/**
+ * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
+ * The cx-image component is a simple way to display images in your application.
+ *
+ * @csspart image - The `img` element.
+ * @csspart skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
+ * @csspart fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
+ * @csspart base - The component’s outer wrapper.
+ * @csspart fallback-icon - The icon rendered inside the fallback slot.
+ *
+ * @cssproperty [--padding=0] - The padding of the image.
+ * @cssproperty --padding-top - The padding-top of the image (this will override the `--padding` property).
+ * @cssproperty --padding-left - The padding-left of the image (this will override the `--padding` property).
+ * @cssproperty --padding-right - The padding-right of the image (this will override the `--padding` property).
+ * @cssproperty --padding-bottom - The padding-bottom of the image (this will override the `--padding` property).
+ * @cssproperty --border-radius - The border-radius of the image.
+ * @cssproperty --border - The border of the image.
+ *
+ * @event cx-load - Emitted when the image has loaded.
+ * @event cx-error - Emitted when the image has failed to load.
+ * @event cx-image-zoom-open - Emitted when the image zoom is opened.
+ * @event cx-image-zoom-close - Emitted when the image zoom is closed.
+ *
+ * @slot skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
+ * @slot fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
+ */
+export default class CxImage extends ResizableElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-icon': typeof CxIcon;
+        'cx-popup': typeof CxPopup;
+        'cx-resize-observer': typeof CxResizeObserver;
+        'cx-skeleton': typeof CxSkeleton;
+        'cx-space': typeof CxSpace;
+    };
+    readonly localize: LocalizeController;
+    imageElement: HTMLImageElement;
+    zoomImageElement: HTMLImageElement;
+    highlighterElement: HTMLDivElement;
+    isLoaded: boolean;
+    isError: boolean;
+    /**
+     * The path to the image to load.
+     */
+    src: string;
+    /**
+     * The path to the placeholder image to be shown if src is not available.
+     */
+    placeholder: string;
+    /**
+     * A description of the image used by assistive devices.
+     */
+    alt: string;
+    /**
+     * The object-fit property of the image.
+     */
+    objectFit: ObjectFit;
+    /**
+     * Should the skeleton be shown when the image is loading.
+     */
+    skeleton: boolean;
+    /**
+     * Should show the fallback image when the image fails to load.
+     */
+    fallback: boolean;
+    /**
+     * Determines if the image should be zoom-able.
+     */
+    canZoom: boolean;
+    /**
+     * Indicates whether the image is currently loading. Useful for displaying a loading spinner when the image source is expected but not yet available.
+     */
+    loading: boolean;
+    /**
+     * Indicates whether the image takes the full width of the parent container.
+     */
+    block: boolean;
+    /**
+     * The loading attribute of the image.
+     */
+    htmlLoading: 'eager' | 'lazy';
+    /**
+     * The type of click handler to use.
+     * - automatic: The click handler is automatically handled by the image.
+     * - manual: The click handler is manually handled by the parent element.
+     */
+    clickHandlerType: ClickHandlerType;
+    /**
+     * Indicates whether the image is currently zoomed.
+     */
+    isZoomed: boolean;
+    imageRatio: number;
+    parsedAlt: string;
+    parsedAltDarkMode: string;
+    protected zoom: Zoom | null;
+    private lastPatchedWidth;
+    get currentAltValue(): string;
+    get currentSrc(): string;
+    get highlighterTabindex(): "0" | undefined;
+    get highlighterRole(): "img" | "button";
+    get highlighterClass(): {
+        [x: string]: boolean;
+        'highlightable-item': boolean;
+        'highlightable-item--effect-text-reveal': boolean;
+    };
+    get imageClass(): {
+        [x: string]: boolean;
+        image: boolean;
+        'image--can-zoom': boolean;
+        'image--has-action': boolean;
+        'image--hidden': boolean;
+    };
+    /**
+     * Whether the image have zoom action.
+     */
+    protected get hasZoomAction(): boolean;
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handle mouse enter event.
+     */
+    private handleMouseEnter;
+    /**
+     * Handle mouse leave event.
+     */
+    private handleMouseLeave;
+    /**
+     * If image is currently zoomed, close the zoom.
+     */
+    private handleBlur;
+    private handleKeyDown;
+    handleCanZoomChange(): Promise<void>;
+    handleObjectFitChange(): Promise<void>;
+    handleSrcChange(): void;
+    private initZoom;
+    protected handleLoad(): void;
+    protected handleError(): void;
+    protected handleSizeChange(): void;
+    private handleResize;
+    /**
+     * This function is used to update the last patched width of the image.
+     * This is required to correctly handle the orientation of the image on load.
+     * The this.clientWidth inside this.imageClass is not recalculated when the image is loaded.
+     */
+    private updateLastPatchedWidth;
+    /**
+     * Support CMS5 click action for the image.
+     */
+    protected handleClickAction(event: MouseEvent): void;
+    updated(changedProps: Map<string, unknown>): void;
+    openZoom(): void;
+    protected renderContent(): TemplateResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-image': CxImage;
+    }
+}

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

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

package/library/packages/atoms/src/components/image-comparer/image-comparer.d.ts

@@ -0,0 +1,49 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+
+/**
+ * @summary Compare visual differences between similar photos with a sliding panel.
+ *
+ * @description For best results, use images that share the same dimensions.
+ * The slider can be controlled by dragging or pressing the left and right arrow keys.
+ * (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)
+ *
+ * @slot before - The before image, an `<img>` or `<svg>` element.
+ * @slot after - The after image, an `<img>` or `<svg>` element.
+ * @slot handle - The icon used inside the handle.
+ *
+ * @event cx-change - Emitted when the position changes.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart before - The container that wraps the before image.
+ * @csspart after - The container that wraps the after image.
+ * @csspart divider - The divider that separates the images.
+ * @csspart handle - The handle that the user drags to expose the after image.
+ *
+ * @cssproperty --divider-width - The width of the dividing line.
+ * @cssproperty --handle-size - The size of the compare handle.
+ */
+export default class CxImageComparer extends CortexElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon': typeof CxIcon;
+    };
+    static scopedElement: {
+        'cx-icon': typeof CxIcon;
+    };
+    private readonly localize;
+    base: HTMLElement;
+    handle: HTMLElement;
+    /** The position of the divider as a percentage. */
+    position: number;
+    private handleDrag;
+    private handleKeyDown;
+    handlePositionChange(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-image-comparer': CxImageComparer;
+    }
+}

package/library/packages/atoms/src/components/image-comparer/image-comparer.styles.d.ts

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

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

@@ -0,0 +1,35 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Includes give you the power to embed external HTML files into the page.
+ *
+ * @description Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made. </br> </br>
+ * The included content will be inserted into the `<cx-include>` element's default slot so it can be easily accessed and styled through the light DOM.
+ *
+ * @event cx-load - Emitted when the included file is loaded.
+ * @event {{ status: number }} cx-error - Emitted when the included file fails to load due to an error.
+ */
+export default class CxInclude extends CortexElement {
+    static styles: CSSResultGroup;
+    /**
+     * The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
+     * code and can result in XSS attacks.
+     */
+    src: string;
+    /** The fetch mode to use. */
+    mode: 'cors' | 'no-cors' | 'same-origin';
+    /**
+     * Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+     * code and can result in XSS attacks.
+     */
+    allowScripts: boolean;
+    private executeScript;
+    handleSrcChange(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-include': CxInclude;
+    }
+}

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

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

package/library/packages/atoms/src/components/include/request.d.ts

@@ -0,0 +1,8 @@
+interface IncludeFile {
+    html: string;
+    ok: boolean;
+    status: number;
+}
+/** Fetches an include file from a remote source. Caching is enabled so the origin is only pinged once. */
+export declare function requestInclude(src: string, mode?: 'cors' | 'no-cors' | 'same-origin'): Promise<IncludeFile>;
+export {};