@microsoft/windows-admin-center-sdk/angular/src/controls/tooltip/tooltip.directive.d.ts

Microsoft - Windows Admin Center Shell

import { ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CoreBaseComponent } from '../common/base.component';
import { TooltipShowMode } from './models/tooltip-options';
import { TooltipZoneDirective } from './tooltip-zone.directive';
import * as i0 from "@angular/core";
export declare class ToolTipFocusEvent {
    static focusIn: string;
    static focusOut: string;
}
export declare class ToolTipMouseEvent {
    static mouseEnter: string;
    static mouseLeave: string;
}
/**
 *
 * @smeDoc {@label Tooltip @id sme-tooltip-directive}
 *
 * @overview
 * @file {@filepath ./examples/overview.md}
 *
 * @example {@label Basic Usage @id basic-usage}
 * @file {@filename component.html @filepath ./examples/basic-usage.component.html}
 * @file {@filename component.ts @filepath ./examples/tooltip-example.component.ts}
 *
 * @example {@label Custom Template @id custom-template}
 * @file {@filename component.html @filepath ./examples/template-reference.component.html}
 * @file {@filename component.ts @filepath ./examples/tooltip-example.component.ts}
 *
 * @example {@label Custom Implementation @id tooltip-zone}
 * @file {@filename component.html @filepath ./examples/tooltip-zone.component.html}
 */
/**
 * Directive to create tooltips in the tooltip host.
 */
export declare class TooltipDirective extends CoreBaseComponent implements OnDestroy, OnChanges, OnInit {
    private elementRef;
    private domSanitizer;
    /**
     * The source name to use for logging
     */
    protected get logSourceName(): string;
    toolTipFocusEventTriggered: EventEmitter<ToolTipFocusEvent>;
    toolTipMouseEventTriggered: EventEmitter<ToolTipMouseEvent>;
    private internalTitle;
    /**
     * Sets the native tooltip property.
     *
     * This input is susceptible to XSS attacks, and is sanitized if necessary.
     * In cases the input is sanitized, the displayed tooltip to the user will only show the sanitized content.
     * This behavior (defense) is expected since users should not present XSS payloads in the [title] attribute.
     */
    set title(input: string);
    /**
     * Gets the native tooltip property.
     */
    get title(): string;
    /**
     * A template reference for a custom tooltip.
     */
    smeTooltip: TemplateRef<any>;
    /**
     * A data object that can be accessed in a template reference for a custom tooltip.
     */
    smeTooltipContext: any;
    /**
     * The input for the placement of the tooltip. Defaults to 'bottom'.
     */
    smeTooltipPlacement: string;
    /**
     * Indicates when to show the tooltip.
     */
    smeTooltipShowOn: TooltipShowMode;
    /**
     * Indicates when to explicitly not show the tooltip in cases where it needs to be shown only under certain conditions.
     */
    smeTooltipShow: boolean;
    /**
     * Indicates if receiving hover and focus events.
     */
    smeTooltipEnableEvents: boolean;
    /**
     * Indicates if hide the tooltip when inner HTML is the same as tooltip content
     * In certain cases, we always need the tooltip to show, such as the multi-tool component tool list.
     */
    hideOnTooltipSameAsText: boolean;
    /**
     * The defined zone for showing tooltip with a shortcut. The zone is a wrapper for the content that is relevant to the tooltip.
     */
    tooltipZone: TooltipZoneDirective;
    /**
     * Gets the id of the tooltip that will describe this element
     */
    get ariaDescribedBy(): string;
    /**
     * The actual placement of the tooltip
     */
    private get placement();
    /**
     * The tooltip host
     */
    private get tooltipHost();
    /**
     * Indicates that tooltips should show on focus/hover.
     */
    get showOnfocus(): boolean;
    /**
     * Internal placeholder for the current focused state
     */
    private focused;
    /**
     * Internal placeholder for the current clicked state
     */
    private clicked;
    /**
     * Internal placeholder for the current hovered state
     */
    private hovered;
    /**
     * Internal mutation observer used to watch for disabled attribute on elements
     */
    private observer;
    /**
     * Internal placeholder for tooltip triggering cause (click, hover, focus)
     */
    private tooltipTrigger;
    /**
     * Indicates if the tooltip is being shown.
     */
    get shown(): boolean;
    /**
     * Indicates that this tooltip should show only when the text is truncated
     * We assume this is true if the title attribute is exactly the same as the text content of this node.
     */
    private get isTooltipSameAsText();
    /**
     * Indicates that this tooltip should be shown
     */
    private get shouldShow();
    /**
     * Initializes a new instance of the @see PivotComponent class.
     * @param injector The angular injection service. required by @SmeInjectableBase() decorator in the base @see BaseComponent class
     */
    constructor(elementRef: ElementRef, domSanitizer: DomSanitizer, injector: Injector);
    /**
     * Implementation of angular OnInit interface
     */
    ngOnInit(): void;
    /**
     * Implementation of angular OnChanges interface
     * On any change we update the tooltip if it is shown
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Implementation of angular OnDestroy interface
     */
    ngOnDestroy(): void;
    /**
     * Creates the idBag used by this component to store unique element ids.
     * id values will be assigned be the @see BaseComponent super class.
     */
    protected createIdBag(): MsftSme.StringMap<string>;
    /**
     * Host listeners for tooltip focus events
     */
    onFocusEvent(event: Event): void;
    /**
     * Host listeners for tooltip mouse events
     */
    onMouseEvent(event: Event): void;
    /**
     * Host listeners for click and enter
     */
    onClick(event: Event): void;
    /**
     * Shows or hides the tooltip if either the hover or focused states are true
     * @param hovered indicates the element is hovered
     * @param focused indicates the element is focused
     */
    private showHideTooltip;
    /**
     * Shows the tooltip.
     */
    show(showOnShortCut?: boolean, restoreFocusTo?: HTMLElement): void;
    /**
     * Hides the tooltip.
     */
    hide(): void;
    private getTooltipOptions;
    /**
     * Determines if the text node content is truncated.
     */
    private getIsTruncated;
    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[smeTooltip],[title]", never, { "title": "title"; "smeTooltip": "smeTooltip"; "smeTooltipContext": "smeTooltipContext"; "smeTooltipPlacement": "smeTooltipPlacement"; "smeTooltipShowOn": "smeTooltipShowOn"; "smeTooltipShow": "smeTooltipShow"; "smeTooltipEnableEvents": "smeTooltipEnableEvents"; "hideOnTooltipSameAsText": "hideOnTooltipSameAsText"; "tooltipZone": "tooltipZone"; }, { "toolTipFocusEventTriggered": "toolTipFocusEventTriggered"; "toolTipMouseEventTriggered": "toolTipMouseEventTriggered"; }, never, never, false, never>;
}