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
*
* ```
*
* ### 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