@dialpad/dialtone-vue 2.106.6 → 2.107.0

package/dist/types/components/popover/popover.vue.d.ts

@@ -0,0 +1,762 @@
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     * @values true, false
+     */
+    openOnContext: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * ARIA role for the content of the popover. Defaults to "dialog".
+     * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+        validator: (role: unknown) => boolean;
+    };
+    /**
+     * ID of the element that serves as the label for the popover content.
+     * Defaults to the "anchor" element; this exists to provide a different
+     * ID of the label element if, for example, the anchor slot contains
+     * other items that do not serve as a label. You should provide this
+     * or ariaLabel, but not both.
+     */
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Descriptive label for the popover content. You should provide this
+     * or ariaLabelledby, but not both.
+     */
+    ariaLabel: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property, when the header popover is visible
+     */
+    closeButtonProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    padding: {
+        type: StringConstructor;
+        default: string;
+        validator: (padding: unknown) => boolean;
+    };
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     * @values null, anchor
+     */
+    contentWidth: {
+        type: StringConstructor;
+        default: string;
+        validator: (contentWidth: unknown) => boolean;
+    };
+    /**
+     * Tabindex value for the content. Passing null, no tabindex attribute will be set.
+     */
+    contentTabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The id of the tooltip
+     */
+    id: {
+        type: StringConstructor;
+        default(): string;
+    };
+    /**
+     *  Displaces the content box from its anchor element
+     *  by the specified number of pixels.
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    /**
+     * Determines if the popover hides upon clicking the
+     * anchor or outside the content box.
+     * @values true, false
+     */
+    hideOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
+     */
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * @values true, false
+     */
+    tether: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (sticky: unknown) => boolean;
+    };
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Additional class name for the header content wrapper element.
+     */
+    headerClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Additional class name for the footer content wrapper element.
+     */
+    footerClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Additional class name for the dialog element.
+     */
+    dialogClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
+     */
+    initialFocusElement: {
+        type: (StringConstructor | {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+        })[];
+        default: string;
+        validator: (initialFocusElement: unknown) => any;
+    };
+    /**
+     * If the popover should open pressing up or down arrow key on the anchor element.
+     * This can be set when not passing open prop.
+     * @values true, false
+     */
+    openWithArrowKeys: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+        type: (StringConstructor | {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+        })[];
+        default: string;
+        validator: (appendTo: unknown) => boolean;
+    };
+}, {}, {
+    POPOVER_PADDING_CLASSES: {
+        none: undefined;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    POPOVER_HEADER_FOOTER_PADDING_CLASSES: {
+        none: undefined;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    intersectionObserver: null;
+    isOutsideViewport: boolean;
+    isOpen: boolean;
+    anchorEl: null;
+    popoverContentEl: null;
+}, {
+    popoverListeners(): {
+        keydown: (event: any) => void;
+        'after-leave': (event: any) => void;
+        'after-enter': (event: any) => void;
+    };
+    calculatedMaxHeight(): "calc(100vh - var(--dt-space-300))";
+    labelledBy(): never;
+}, {
+    hasIntersectedViewport(entries: any): void;
+    popperOptions(): {
+        modifiers: ({
+            name: string;
+            enabled: boolean;
+            phase: string;
+            fn: any;
+            requiresIfExists: string[];
+        } | {
+            name: string;
+            options: {
+                fallbackPlacements: any[];
+                boundary: string;
+                altAxis?: undefined;
+                tether?: undefined;
+            };
+            enabled?: undefined;
+        } | {
+            name: string;
+            enabled: boolean;
+            options?: undefined;
+        } | {
+            name: string;
+            options: {
+                altAxis: boolean;
+                tether: boolean;
+                fallbackPlacements?: undefined;
+                boundary?: undefined;
+            };
+            enabled?: undefined;
+        })[];
+    };
+    validateProps(): void;
+    calculateAnchorZindex(): 300 | 650;
+    defaultToggleOpen(e: any): void;
+    onContext(event: any): Promise<void>;
+    toggleOpen(): void;
+    onArrowKeyPress(e: any): void;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    closePopover(): void;
+    preventScrolling(): void;
+    enableScrolling(): void;
+    removeReferences(): void;
+    onShow(): Promise<void>;
+    onLeaveTransitionComplete(): Promise<void>;
+    onEnterTransitionComplete(): Promise<void>;
+    focusInitialElement(): void;
+    focusInitialElementById(): void;
+    onResize(): void;
+    onClickOutside(): void;
+    onKeydown(e: any): void;
+    setPopoverContentAnchorWidth(): Promise<void>;
+    focusFirstElementIfNeeded(domEl: any): void;
+    initTippyInstance(): void;
+}, {
+    props: {
+        visuallyHiddenClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        visuallyHiddenCloseLabel: {
+            type: StringConstructor;
+            default: null;
+        };
+    };
+    watch: {
+        $props: {
+            immediate: boolean;
+            deep: boolean;
+            handler(): void;
+        };
+    };
+    computed: {
+        showVisuallyHiddenClose(): any;
+    };
+    methods: {
+        validateVisuallyHiddenCloseProps(): void;
+    };
+} | {
+    methods: {
+        getFirstFocusableElement(el: object): Promise<any>;
+        focusFirstElement(el?: object): Promise<void>;
+        focusElementById(elementId: any): Promise<void>; /**
+         * ARIA role for the content of the popover. Defaults to "dialog".
+         * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+         */
+        _getFirstFocusElement(focusableElements: any): any;
+        _getFocusableElements(el?: object, includeNegativeTabIndex?: bool): any[];
+        focusTrappedTabPress(e: object, el: object): void;
+    };
+}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("update:open" | "opened")[], string, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     * @values true, false
+     */
+    openOnContext: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * ARIA role for the content of the popover. Defaults to "dialog".
+     * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+        validator: (role: unknown) => boolean;
+    };
+    /**
+     * ID of the element that serves as the label for the popover content.
+     * Defaults to the "anchor" element; this exists to provide a different
+     * ID of the label element if, for example, the anchor slot contains
+     * other items that do not serve as a label. You should provide this
+     * or ariaLabel, but not both.
+     */
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Descriptive label for the popover content. You should provide this
+     * or ariaLabelledby, but not both.
+     */
+    ariaLabel: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property, when the header popover is visible
+     */
+    closeButtonProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    padding: {
+        type: StringConstructor;
+        default: string;
+        validator: (padding: unknown) => boolean;
+    };
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     * @values null, anchor
+     */
+    contentWidth: {
+        type: StringConstructor;
+        default: string;
+        validator: (contentWidth: unknown) => boolean;
+    };
+    /**
+     * Tabindex value for the content. Passing null, no tabindex attribute will be set.
+     */
+    contentTabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The id of the tooltip
+     */
+    id: {
+        type: StringConstructor;
+        default(): string;
+    };
+    /**
+     *  Displaces the content box from its anchor element
+     *  by the specified number of pixels.
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    /**
+     * Determines if the popover hides upon clicking the
+     * anchor or outside the content box.
+     * @values true, false
+     */
+    hideOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
+     */
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * @values true, false
+     */
+    tether: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (sticky: unknown) => boolean;
+    };
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Additional class name for the header content wrapper element.
+     */
+    headerClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Additional class name for the footer content wrapper element.
+     */
+    footerClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Additional class name for the dialog element.
+     */
+    dialogClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
+     */
+    initialFocusElement: {
+        type: (StringConstructor | {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+        })[];
+        default: string;
+        validator: (initialFocusElement: unknown) => any;
+    };
+    /**
+     * If the popover should open pressing up or down arrow key on the anchor element.
+     * This can be set when not passing open prop.
+     * @values true, false
+     */
+    openWithArrowKeys: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+        type: (StringConstructor | {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+        })[];
+        default: string;
+        validator: (appendTo: unknown) => boolean;
+    };
+}>>, {
+    role: string;
+    id: string;
+    ariaLabel: string;
+    closeButtonProps: Record<string, any>;
+    dialogClass: string | Record<string, any> | unknown[];
+    maxHeight: string;
+    contentClass: string | Record<string, any> | unknown[];
+    headerClass: string | Record<string, any> | unknown[];
+    footerClass: string | Record<string, any> | unknown[];
+    elementType: string;
+    transition: string;
+    open: boolean;
+    maxWidth: string;
+    offset: unknown[];
+    fallbackPlacements: unknown[];
+    tether: boolean;
+    appendTo: string | HTMLElement;
+    hideOnClick: boolean;
+    placement: string;
+    sticky: string | boolean;
+    showCloseButton: boolean;
+    modal: boolean;
+    openOnContext: boolean;
+    ariaLabelledby: string;
+    padding: string;
+    contentWidth: string;
+    contentTabindex: number;
+    externalAnchor: string;
+    initialFocusElement: string | HTMLElement;
+    openWithArrowKeys: boolean;
+}>;
+export default _default;
+//# sourceMappingURL=popover.vue.d.ts.map