@cds/core/internal-components/popup/popup.element.d.ts

Clarity Design System - common components, themes, and utilties

import { AxisAligns, EventEmitter, PositionableElement } from '@cds/core/internal';
import { PropertyValues } from 'lit';
import { CdsInternalStaticOverlay } from '@cds/core/internal-components/overlay';
import { CdsInternalPointer } from './pointer.element.js';
/**
 * ```typescript
 * import '@cds/core/internal-components/popup/register.js';
 * ```
 *
 * ```html
 * <cds-internal-popup>
 *  <section cds-layout="vertical align:horizontal-stretch">
 *    <div cds-layout="vertical pad:md gap:md">
 *      <h2 cds-text="display">A Title</h2>
 *      <div>
 *        <p cds-text="body">
 *          Content inside a generic popup.
 *        </p>
 *      </div>
 *    </div>
 *  </section>
 * </cds-internal-popup>
 * ```
 *
 * @beta
 * @element cds-internal-popup
 * @slot - Content slot for the content inside the popup's panel
 * @event closeChange - Notify user when close event has occurred
 * @cssprop --active-corner-border-radius
 * @cssprop --background
 * @cssprop --backdrop-background
 * @cssprop --layered-backdrop-background
 * @cssprop --border-color
 * @cssprop --border-radius
 * @cssprop --border-width
 * @cssprop --box-shadow
 * @cssprop --close-button-offset
 * @cssprop --color
 * @cssprop --min-height
 * @cssprop --min-width
 * @cssprop --max-height
 * @cssprop --max-width
 * @cssprop --mobile-max-height
 * @cssprop --overflow - sets overflow x and y values respectively
 * @cssprop --height
 * @cssprop --width
 * @cssprop --animation-duration
 * @cssprop --animation-easing
 *
 * KNOWN ISSUE: Safari jumps through the exit animation but only when the ESC key is pressed.
 *
 */
export declare class CdsInternalPopup extends CdsInternalStaticOverlay implements PositionableElement {
    i18n: {
        closeButtonAriaLabel: string;
        contentStart: string;
        contentEnd: string;
    };
    cdsMotion: string;
    /**
     * force responsive by setting orientation to 'none'.
     * do not manipulate the responsive property because the
     * positioning logic may override your changes.
     */
    /** @private */
    responsive: boolean;
    cdsMotionChange: EventEmitter<string>;
    /**
     * Used to force an override of the popup trigger focus recovery. Used by the closable controller.
     */
    trigger: HTMLElement;
    /**
     * Accepts both an HTMLElement and a string
     */
    anchor: HTMLElement | string;
    /** @private */
    get anchorElement(): HTMLElement | null;
    anchorAlign: AxisAligns;
    /** @private */
    get anchorRect(): DOMRect;
    mainAxisOffset: number;
    crossAxisOffset: number;
    orientation: string;
    /**
     * If false, the dropdown will not show a close button ever.
     * If true, it will always show a close button.
     * If undefined, it will only show a close button when responsive. a11y expects a close button when responsive.
     *
     */
    closable: boolean;
    pointerAlign: AxisAligns;
    /**
     * Forces a pointer to show with popup from known pointer types
     * @type {'angle' | 'default'}
     */
    defaultPointerType: string | null;
    pointer: CdsInternalPointer;
    /** @private */
    pointerWrapper: HTMLElement;
    /** @private */
    hostWrapper: HTMLElement;
    /** @private */
    popupWrapper: HTMLElement;
    /** @private */
    contentWrapper: HTMLElement;
    protected observers: (MutationObserver | ResizeObserver)[];
    private setUpPositioningObserver;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(props: PropertyValues<this>): void;
    updated(props: PropertyValues<this>): void;
    protected render(): import("lit-html").TemplateResult<1>;
    static get styles(): import("lit").CSSResultGroup[];
}