import * as i0 from '@angular/core'; import { TemplateRef, OnChanges, OnInit, OnDestroy, AfterContentInit, EventEmitter, SimpleChanges, ComponentRef, AfterViewInit, ElementRef } from '@angular/core'; import { Subscription } from 'rxjs'; import { BooleanInput } from '@angular/cdk/coercion'; import { EuiIconSvgComponent } from '@eui/components/eui-icon'; /** * Directive for defining named template references that can be dynamically rendered. * Provides a way to identify and retrieve templates by name for content projection. * Commonly used in components that accept multiple template slots (headers, footers, custom content). * Works with TemplateRef to enable flexible content customization. * * @usageNotes * ```html * *

Custom Header

*
* * * * * ``` * * In component: * ```typescript * @ContentChildren(EuiTemplateDirective) templates: QueryList; * * getTemplate(name: string) { * return this.templates.find(t => t.getType() === name)?.template; * } * ``` * * ### Accessibility * - Template content should follow accessibility guidelines * - Ensure dynamic content maintains proper heading hierarchy * - Screen readers will announce template content when rendered * * ### Notes * - Use euiTemplate input to assign template name * - Templates retrieved via ContentChildren query in parent component * - getType() method returns template name for identification * - Supports generic typing for template context */ declare class EuiTemplateDirective { template: TemplateRef; type: string; name: string; getType(): string; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[euiTemplate]", never, { "type": { "alias": "type"; "required": false; }; "name": { "alias": "euiTemplate"; "required": false; }; }, {}, never, never, true, never>; } /** * Directive for displaying contextual information in a tooltip overlay on hover or focus. * Provides semantic color variants and flexible positioning relative to the trigger element. * Automatically handles show/hide behavior with configurable delays and keyboard dismissal. * Built on Angular CDK Overlay for robust positioning and scroll handling. * * @usageNotes * Basic tooltip: * ```html * * ``` * * Tooltip with position and variant: * ```html * ! * ``` * * Tooltip with delays: * ```html * Info * ``` * * ### Accessibility * - Tooltip appears on both hover and keyboard focus for screen reader compatibility * - Press Escape key to dismiss tooltip * - Ensure tooltip content is non-essential as it may not be announced by all screen readers * * ### Notes * - Tooltip content should be brief and contextual * - Use semantic variants (euiTooltipDanger, euiTooltipWarning) to convey meaning * - Position automatically adjusts if space is insufficient (fallback positioning) * - Tooltip is disabled when isDisabled is true or tooltipContent is empty */ declare class EuiTooltipDirective implements OnChanges, OnInit, OnDestroy { /** * Sets the `data-e2e` attribute for the host element. * * @default 'eui-tooltip' */ e2eAttr: string; /** * Sets the delay for the tooltip to be visible. * * @default 0 */ showDelay: number; /** * Sets the delay for the tooltip to be hidden * * @default 0 */ hideDelay: number; /** * Sets the alignment of the content in the tooltip. * * @default 'center'' */ contentAlignment: 'left' | 'right' | 'center' | 'justify'; /** * Sets the position of the tooltip relative to its trigger element. * * @default 'center'' */ position: 'left' | 'right' | 'above' | 'below' | 'before' | 'after' | string; /** * Whether the tooltip is disabled. * * @default false (enable) */ isDisabled: boolean; /** * Tooltip content. */ tooltipContent: string; /** * Whether the tooltip has a Primary state. * * @default false */ euiTooltipPrimary: boolean; /** * Whether the tooltip has a Secondary state. * * @default false */ euiTooltipSecondary: boolean; /** * Whether the tooltip has Info state. * * @default false */ euiTooltipInfo: boolean; /** * Whether the tooltip has a Success state. * * @default false */ euiTooltipSuccess: boolean; /** * Whether the tooltip has a Warning state. * * @default false */ euiTooltipWarning: boolean; /** * Whether the tooltip has a Danger state. * * @default false */ euiTooltipDanger: boolean; /** * Whether the tooltip has Accent state. * * @default false */ euiTooltipAccent: boolean; private originX; private originY; private overlayX; private overlayY; private fallbackOriginX; private fallbackOriginY; private fallbackOverlayX; private fallbackOverlayY; private overlayRef; private destroy$; private isOpen$; private mouseleaveSubscription; private blurSubscription; private showDelaySubscription; private positionStrategySubscription; private tooltipInstance; private overlay; private host; ngOnChanges(): void; ngOnInit(): void; ngOnDestroy(): void; mouseEntering(event: MouseEvent): void; focused(event: FocusEvent): void; /** * Returns the current open state. * * @returns {boolean} `true` if the element is open, otherwise `false`. */ get isOpen(): boolean; /** * Method that shows a tooltip. * * @param origin Origin of the tooltip. Where it will be displayed. */ show(origin?: EventTarget): void; /** * Method that closes a tooltip. */ hide(): void; protected onEscapePressed(event: KeyboardEvent): void; /** * Generates and returns the tooltip configuration based on the defined tooltip properties. * * @returns {EuiTooltipInterface} The tooltip configuration object, including attributes used in container component. */ private getTooltipConfig; /** * Determines and returns the tooltip's position based on the overlay's connection pair. * * @param {ConnectedOverlayPositionChange} overlayPosition - The overlay position change event. * @returns {string} The calculated position (`'above'`, `'below'`, `'left'`, or `'right'`). */ private getPosition; /** * Sets the position-related properties based on the current `position` value. */ private setPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showDelay: unknown; static ngAcceptInputType_hideDelay: unknown; static ngAcceptInputType_isDisabled: unknown; static ngAcceptInputType_euiTooltipPrimary: unknown; static ngAcceptInputType_euiTooltipSecondary: unknown; static ngAcceptInputType_euiTooltipInfo: unknown; static ngAcceptInputType_euiTooltipSuccess: unknown; static ngAcceptInputType_euiTooltipWarning: unknown; static ngAcceptInputType_euiTooltipDanger: unknown; static ngAcceptInputType_euiTooltipAccent: unknown; } /** * @description * A directive that adds maxLength functionality to input and textarea elements with visual feedback. * It shows the remaining characters count and provides visual indication when the limit is reached. * * @selector input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength] * * @example * ### Basic usage * ```html * * ``` * * ### With form control * ```html * * ``` * * ### Hide maxlength indicator * ```html * * ``` * * @publicApi */ declare class EuiMaxLengthDirective implements AfterContentInit, OnDestroy, OnChanges { /** * @description * It accepts number values to indicate the maxLength of an input. To reset or disable it set the value to null. * NULL value will remove any MaxLength indicator even if another input like isShowMaxlength equals true. */ maxLength: number; /** * @description * Controls the visibility of the maxLength indicator. * When true, shows a counter with remaining characters. * When false, hides the counter but maintains the maxLength restriction. * * @default true */ isShowMaxlength: boolean; /** * @description * Emits when the input value length reaches or exceeds the maxLength limit. * Emits true when a limit is reached, false when below limit. * * @emits {boolean} True when max length is reached, false otherwise */ maxLengthReached: EventEmitter; valueChangesSubscription: Subscription; private maxLengthSpan; private wrapper; private lengthCalcFn; private el; private renderer; private control; constructor(); ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterContentInit(): void; onChange(): void; onInput(): void; onPaste(event: ClipboardEvent): void; /** * Sets a custom function to calculate the length of the input value. * Useful for implementing custom length calculation logic (e.g., counting characters differently). * * @param fn Function that takes a string input and returns its calculated length * * @example * ```typescript * // Custom length calculation excluding spaces * directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length); * ``` */ setLengthCalcFactory(fn: (input: string) => number): void; /** * Calculates the maximum length for the input element based on current value or provided value. * * @param value Optional value to calculate max length against (overrides the current input value) * @returns {number} Calculated maximum length * @private */ private calculateMaxLength; /** * @description * Refreshes the visual state of the maxLength indicator and updates input restrictions. * - Updates the remaining characters count * - Applies/removes error styling * - Emits maxLengthReached event * - Truncates value if it exceeds maxLength * * @private */ private _refreshValue; /** * @description * Creates the maxLength indicator box in the DOM. * Wraps the input element and adds the counter span with appropriate styling. * * @private */ private createMaxLengthBox; /** * @description * Removes the maxLength indicator box from the DOM. * Restores the original DOM structure by unwrapping the input element. * * @private */ private destroyMaxLengthBox; /** * @description * Returns the current value of the input element. * Handles different update strategies when used with forms. * * @returns {string} Current input value * @private */ private getValue; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_maxLength: unknown; static ngAcceptInputType_isShowMaxlength: unknown; } declare enum ConditionOperator { AND = "AND", OR = "OR" } /** * Structural directive conditionally rendering content based on user permissions. * Checks permissions via EuiPermissionService and shows/hides content accordingly. * Supports single or multiple permission checks with AND/OR logical operators. * Similar to *ngIf but permission-based instead of boolean-based. * * @usageNotes * Single permission: * ```html * * ``` * * Multiple permissions (AND - all required): * ```html *
* Admin content *
* ``` * * Multiple permissions (OR - any required): * ```html *
* Manager or Admin content *
* ``` * * ### Accessibility * - Content completely removed from DOM when permissions not granted * - No visual indication of hidden content to unauthorized users * - Screen readers will not encounter permission-restricted content * * ### Notes * - Default operator is AND (all permissions required) * - Use OR operator when any single permission should grant access * - Requires EuiPermissionService to be configured in application * - Permission checks happen synchronously on directive initialization and input changes */ declare class EuiHasPermissionDirective { /** * @internal * Array storing the current permission requirements */ private permissions; /** * @internal * Logical operator for permission checks (AND/OR). Defaults to AND. */ private operator; /** * @internal * Flag tracking whether the content is currently hidden */ private isHidden; /** * Sets the logical operator for permission checks. * 'AND' requires all permissions, 'OR' requires at least one permission. * Default: 'AND' */ set euiHasPermissionOperator(operator: ConditionOperator); /** * Array of permission strings required to display the content. * Can be single permission or multiple permissions. */ set euiHasPermission(val: any); private templateRef; private viewContainer; private permissionService; /** * @internal * @description * Updates the view based on the current permission check results. * If permissions are granted, displays the content. * If permissions are not granted, hides the content. */ private updateView; /** * @internal * @description * Checks if all required permissions are granted. * Uses AND logic - all permissions must be granted for the method to return true. * * @returns {boolean} True if all permissions are granted, false otherwise */ private checkPermission; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive toggling CSS class on app header when scrolling past a threshold. * Monitors window scroll position and adds 'shrink-header-active' class to app wrapper. * Requires specific DOM structure with 'app-wrapper' and 'app-header' element IDs. * Typically used for sticky headers that shrink or change appearance on scroll. * * @usageNotes * ```html *
*
Header content
*
Main content
*
* ``` * * ### Accessibility * - Visual feedback for scroll position * - Does not affect keyboard navigation or screen readers * - Ensure header remains accessible in both states * * ### Notes * - Requires elements with IDs 'app-wrapper' and 'app-header' * - Class 'shrink-header-active' added when scrolled past header height * - Scroll threshold automatically calculated from header height * - Set euiScrollHandler to false to disable */ declare class EuiScrollHandlerDirective implements OnInit { navIsFixed: boolean; appHeaderHeight: number; euiScrollHandler: boolean; private appWrapper; private appHeader; private document; ngOnInit(): void; onWindowScroll(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_euiScrollHandler: unknown; } /** * Directive toggling CSS class on any element when scrolling past a custom threshold. * More flexible alternative to euiScrollHandler with configurable element ID, class, and height. * Monitors window scroll and applies specified class when threshold exceeded. * * @usageNotes * ```html *
* Navigation content *
* ``` * * ### Accessibility * - Visual feedback for scroll position * - Does not affect keyboard navigation or screen readers * - Ensure element remains accessible in both states * * ### Notes * - Element ID specified via euiScrollHandlerElement input * - CSS class specified via toggleClass input * - Scroll threshold specified via toggleActiveHeight input (in pixels) * - Class added when scroll position exceeds toggleActiveHeight */ declare class EuiScrollHandlerElementDirective { euiScrollHandlerElement: string; toggleClass: string; toggleActiveHeight: number; navIsFixed: boolean; private document; onWindowScroll(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_toggleActiveHeight: unknown; } /** * Directive scrolling smoothly to a target element when clicked. * Provides animated scroll with configurable duration, offset, and easing. * Supports scrolling within containers and callbacks before/after scroll. * * @usageNotes * ```html * *
Target content
* ``` * * With options: * ```html * Go to footer * ``` * * ### Accessibility * - Smooth scroll provides better UX than instant jump * - Ensure target element has proper focus management * - Consider reduced motion preferences for accessibility * * ### Notes * - Target element identified by ID via euiScrollTo input * - Default duration is 800ms * - Offset adjusts final scroll position (negative scrolls higher) * - Supports multiple easing functions (easeInOutQuart default) * - Can scroll within specific container via containerId */ declare class EuiSmoothScrollToDirective { targetElement: any; scrollTo: string; duration: number; offset: number; easing: string; callbackBefore: any; callbackAfter: any; containerId: string; middleAlign: any; onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_duration: unknown; static ngAcceptInputType_offset: unknown; } /** * Directive automatically scrolling to host element on initialization or click. * Provides animated scroll with configurable duration, offset, and easing. * Supports conditional scrolling and callbacks before/after scroll. * * @usageNotes * Scroll on init: * ```html *
Content
* ``` * * Scroll on click: * ```html *
Click to scroll here
* ``` * * ### Accessibility * - Smooth scroll provides better UX than instant jump * - Use scrollIf to conditionally enable scrolling * - Consider reduced motion preferences for accessibility * * ### Notes * - Scrolls to host element automatically on init (unless scrollIf is false) * - Set scrollOnClick to true for click-triggered scrolling * - Default duration is 800ms * - Offset adjusts final scroll position * - Supports scrolling within specific container via containerId * - middleAlign centers element in viewport */ declare class EuiSmoothScrollDirective implements OnInit { private platformId; private el; scrollIf: boolean; duration: number; offset: number; easing: string; callbackBefore: any; callbackAfter: any; containerId: string; scrollOnClick: boolean; middleAlign: any; onClick(target: any): void; ngOnInit(): void; private scroll; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_duration: unknown; static ngAcceptInputType_offset: unknown; static ngAcceptInputType_scrollOnClick: unknown; } /** * Directive displaying a loading spinner icon inside input fields during async operations. * Dynamically creates and positions a loading icon that appears when euiLoading is true. * Automatically manages wrapper div for icon positioning and handles readonly state. * Compatible with euiClearable directive for combined loading and clear functionality. * * @usageNotes * ```html * * ``` * * ```typescript * isSearching = false; * * onSearch() { * this.isSearching = true; * this.api.search().subscribe(() => this.isSearching = false); * } * ``` * * ### Accessibility * - Loading icon positioned at end of input for visual feedback * - Input becomes readonly while loading to prevent changes during operation * - Icon has aria-label for screen reader announcement * * ### Notes * - Loading icon automatically positioned at input end * - Works alongside euiClearable directive without conflicts * - Wrapper div created automatically for icon positioning * - Input set to readonly state when loading is active */ declare class EuiLoadingDirective implements OnChanges { euiLoading: boolean; get readonly(): any; set readonly(v: BooleanInput); get cssClasses(): string; set cssClasses(value: string); protected _loadingIcon: ComponentRef; private _euiUFlexWrapper; private _cssClasses; private _isReadonly; private _elementRef; private _viewContainerRef; private _renderer; private injector; ngOnChanges(changes: SimpleChanges): void; /** * create a flex wrapper for the input to hold the icon * * @private */ private createFlexWrapper; /** * checks if the parent has a flexWrapper. This is used to avoid creating multiple flexWrappers * * @private */ private doesParentHasAFlexWrapper; /** * removes the flexWrapper while keeping the input element intact * * @private */ private removeFlexWrapper; /** * creates the loading icon component * * @private */ private createLoadingIcon; /** * removes the loading icon component * * @private */ private removeLoadingIcon; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_euiLoading: unknown; } /** * Directive adding a clear button to text and number input fields for quick value reset. * Dynamically creates a close icon that appears when input has content and clears value on click. * Automatically handles form control integration and disabled/readonly states. * Only works with euiInputText and euiInputNumber input types. * * @usageNotes * ```html * * ``` * * ```html * * ``` * * ### Accessibility * - Clear icon has aria-label="Clear input field" for screen readers * - Icon is keyboard accessible with Enter key support * - Icon hidden when input is empty to avoid confusion * - Disabled state removes keyboard access and pointer events * * ### Notes * - Only compatible with text, search, and eui-number input types * - Clear icon visibility toggles based on input value presence * - Works with both ngModel and reactive forms * - Dispatches 'clear' event when value is cleared * - Automatically manages wrapper div for icon positioning */ declare class EuiClearableDirective implements OnChanges, AfterViewInit { euiClearable: boolean; get readonly(): any; set readonly(v: BooleanInput); get disabled(): any; set disabled(v: BooleanInput); get cssClasses(): string; set cssClasses(value: string); private _cssClasses; protected _clearableIcon: ComponentRef; private _euiUFlexWrapper; private _isReadonly; private _disabled; private _elementRef; private _viewContainerRef; private _renderer; private injector; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onKeyUpAndModelChange(value: any): void; private onClearableClicked; /** * creates the Clearable icon component * * @private */ private createClearableIcon; /** * detach the Clearable icon from the view * * @private */ private removeClearableIcon; /** * create a flex wrapper for the input to hold the icon * * @private */ private createFlexWrapper; /** * checks if the parent has a flexWrapper. This is used to avoid creating multiple flexWrappers * * @private */ private doesParentHasAFlexWrapper; /** * removes the flexWrapper while keeping the input element intact * * @private */ private removeFlexWrapper; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_euiClearable: unknown; } /** * Defines the placement of the resizable handle and determines the direction of resizing behavior. * 'left' positions the handle on the left edge and resizes by adjusting from the left boundary. * 'right' positions the handle on the right edge and resizes by adjusting from the right boundary. */ type EuiResizablePosition = 'left' | 'right'; /** * Enables interactive resizing of a container element by dragging a handle. * Applies width constraints dynamically and supports left or right-side handle placement. * Intended for use in layouts requiring user-adjustable panel widths, such as sidebars or split views. */ declare class EuiResizableDirective implements OnInit, OnDestroy { /** * Minimum width constraint for the resizable container in pixels. Prevents the container from being resized below this value. * Accepts string or number values, automatically converted to non-negative pixels. Defaults to 0. */ euiResizableMinWidth: i0.InputSignalWithTransform; /** * Determines the placement of the resizable handle and the direction of resizing behavior. * 'left' positions the handle on the left edge; 'right' positions it on the right edge. Defaults to 'right'. */ euiResizablePosition: i0.InputSignal; /** * Determines if the resizable directive is affecting eui-app-side-container */ euiResizableSideContainer: i0.InputSignalWithTransform; /** * Determines if the resizable feature is disable or not */ euiResizableHidden: i0.InputSignalWithTransform; /** * Accessible label for the separator handle. * @default 'Press the left or right arrow key to resize the panel' */ euiResizableAriaLabel: i0.InputSignal; /** * Maximum width constraint for the resizable container in pixels. * Used for aria-valuemax on the separator handle. */ euiResizableMaxWidth: i0.InputSignalWithTransform; /** * Step size in pixels for keyboard arrow key resizing. * @default 10 */ euiResizableKeyStep: i0.InputSignalWithTransform; styleWidth: number; styleMinWidth: number; styleMaxWidth: number; styleFlexBasisWidth: number; private _resizableBar; private destroy$; private interaction$; private _initialized; private _documentRef; private _elementRef; private _renderer; private _viewContainerRef; private cd; constructor(); ngOnInit(): void; ngOnDestroy(): void; private _applySize; private _onKeydown; private _setupInteraction; private _teardownInteraction; private _createResizableBar; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class EuiArrowKeyNavigableDirective { elementRef: ElementRef; tabindex: string; isFocused: boolean; onFocus(): void; onBlur(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export { ConditionOperator, EuiArrowKeyNavigableDirective, EuiClearableDirective, EuiHasPermissionDirective, EuiLoadingDirective, EuiMaxLengthDirective, EuiResizableDirective, EuiScrollHandlerDirective, EuiScrollHandlerElementDirective, EuiSmoothScrollDirective, EuiSmoothScrollToDirective, EuiTemplateDirective, EuiTooltipDirective }; export type { EuiResizablePosition }; //# sourceMappingURL=eui-components-directives.d.ts.map