@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
62 lines (61 loc) • 3.38 kB
TypeScript
import { AnimationEvent } from '@angular/animations';
import { AfterContentInit, EventEmitter, OnDestroy } from '@angular/core';
import { ToolbarSearchButtonDirective } from './toolbar-search-button.directive';
import { ToolbarSearchFieldDirective } from './toolbar-search-field.directive';
import * as i0 from "@angular/core";
export declare class ToolbarSearchComponent implements AfterContentInit, OnDestroy {
private readonly _platformId;
private readonly _elementRef;
private readonly _colorService;
private readonly _renderer;
/** The direction in which the search box will expand. If the search button is aligned to the right edge of the container, specify left. */
direction: 'left' | 'right';
/** Whether the color scheme is inverted. For use when the component is hosted on a dark background, e.g. the masthead. */
inverse: boolean;
/** Indicate whether or not the search field should always be expanded */
alwaysExpanded: boolean;
/** Whether the input field is visible. Use this to collapse or expand the control in response to other events. */
set expanded(value: boolean);
get expanded(): boolean;
set background(value: string);
/** Emitted when the expanded state changes */
expandedChange: EventEmitter<boolean>;
/**
* Emitted when a search query has been submitted, either by pressing enter when the search field has focus, or by clicking the search button
* when the search field contains text. The event contains the search text.
*/
search: EventEmitter<string>;
/** Return the correct animation based on the expanded state */
get _expandedAnimation(): {
value: string;
params: {
initialWidth: string;
};
};
/** Access the input field element */
field: ToolbarSearchFieldDirective;
/** Access the search button element */
button: ToolbarSearchButtonDirective;
/** Store the CSS position value as this may change to absolute */
_position: string;
/** Store the active background color */
_backgroundColor: string;
/** Store the expanded state */
private _expanded;
/** Store the programmatically created placeholder element */
private _placeholder;
/** Unsubscribe from all subscriptions on component destroy */
private readonly _onDestroy;
ngAfterContentInit(): void;
ngOnDestroy(): void;
animationStart(event: AnimationEvent): void;
animationDone(event: AnimationEvent): void;
/** Programmatically create a placeholder element */
private createPlaceholder;
/** Update the display state of the placeholder node */
private setPlaceholderVisible;
/** Set the placeholder height to match the height of this component. */
private setPlaceholderHeight;
static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarSearchComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarSearchComponent, "ux-toolbar-search", never, { "direction": { "alias": "direction"; "required": false; }; "inverse": { "alias": "inverse"; "required": false; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "background": { "alias": "background"; "required": false; }; }, { "expandedChange": "expandedChange"; "search": "search"; }, ["field", "button"], ["*"], false, never>;
}