UNPKG

igniteui-angular

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

358 lines (350 loc) 14.1 kB
import * as i4 from 'igniteui-angular/input-group'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective, IgxLabelDirective, IgxInputGroupType, IgxHintDirective } from 'igniteui-angular/input-group'; import { IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownBaseDirective, IgxDropDownItemBaseDirective, IgxDropDownComponent, Navigate } from 'igniteui-angular/drop-down'; import * as i0 from '@angular/core'; import { AfterContentInit, OnInit, AfterViewInit, OnDestroy, AfterContentChecked, QueryList, EventEmitter, TemplateRef } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { OverlaySettings, EditorProvider, IgxOverlayService, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from 'igniteui-angular/core'; import { ToggleViewCancelableEventArgs, ToggleViewEventArgs } from 'igniteui-angular/directives'; /** * The `<igx-select-item>` is a container intended for row items in * a `<igx-select>` container. */ declare class IgxSelectGroupComponent extends IgxDropDownGroupComponent { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectGroupComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSelectGroupComponent, "igx-select-item-group", never, {}, {}, never, ["igx-select-item"], true, never>; } declare class IgxSelectItemComponent extends IgxDropDownItemComponent { /** @hidden @internal */ isHeader: boolean; private _text; /** * Gets/Sets the item's text to be displayed in the select component's input when the item is selected. * * ```typescript * //get * let mySelectedItem = this.dropDown.selectedItem; * let selectedItemText = mySelectedItem.text; * ``` * * ```html * // set * <igx-select-item [text]="'London'"></igx-select-item> * ``` */ get text(): string; set text(text: string); /** @hidden @internal */ get itemText(): any; /** * Sets/Gets if the item is the currently selected one in the select * * ```typescript * let mySelectedItem = this.select.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` */ get selected(): any; set selected(value: any); static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectItemComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSelectItemComponent, "igx-select-item", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, ["igx-prefix, [igxPrefix]", "*", "igx-suffix, [igxSuffix]"], true, never>; } /** @hidden @internal */ interface IgxSelectBase extends IgxDropDownBaseDirective { input: IgxInputDirective; readonly selectedItem: IgxDropDownItemBaseDirective; open(overlaySettings?: OverlaySettings): any; close(): any; toggle(overlaySettings?: OverlaySettings): any; calculateScrollPosition(item: IgxDropDownItemBaseDirective): number; getFirstItemElement(): HTMLElement; getEditElement(): HTMLElement; } /** @hidden @internal */ declare class IgxSelectToggleIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectToggleIconDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxSelectToggleIconDirective, "[igxSelectToggleIcon]", never, {}, {}, never, never, true, never>; } /** @hidden @internal */ declare class IgxSelectHeaderDirective { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectHeaderDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxSelectHeaderDirective, "[igxSelectHeader]", never, {}, {}, never, never, true, never>; } /** @hidden @internal */ declare class IgxSelectFooterDirective { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectFooterDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxSelectFooterDirective, "[igxSelectFooter]", never, {}, {}, never, never, true, never>; } /** * **Ignite UI for Angular Select** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select) * * The `igxSelect` provides an input with dropdown list allowing selection of a single item. * * Example: * ```html * <igx-select #select1 [placeholder]="'Pick One'"> * <label igxLabel>Select Label</label> * <igx-select-item *ngFor="let item of items" [value]="item.field"> * {{ item.field }} * </igx-select-item> * </igx-select> * ``` */ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSelectBase, ControlValueAccessor, AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider, AfterContentChecked { protected overlayService: IgxOverlayService; private _inputGroupType; private _injector; /** @hidden @internal */ inputGroup: IgxInputGroupComponent; /** @hidden @internal */ input: IgxInputDirective; /** @hidden @internal */ children: QueryList<IgxSelectItemComponent>; protected prefixes: QueryList<IgxPrefixDirective>; protected suffixes: QueryList<IgxSuffixDirective>; protected internalSuffixes: QueryList<IgxSuffixDirective>; /** @hidden @internal */ label: IgxLabelDirective; /** * Sets input placeholder. * */ placeholder: any; /** * Disables the component. * ```html * <igx-select [disabled]="'true'"></igx-select> * ``` */ disabled: boolean; /** * Sets custom OverlaySettings `IgxSelectComponent`. * ```html * <igx-select [overlaySettings] = "customOverlaySettings"></igx-select> * ``` */ overlaySettings: OverlaySettings; /** @hidden @internal */ maxHeight: string; /** * Emitted before the dropdown is opened * * ```html * <igx-select opening='handleOpening($event)'></igx-select> * ``` */ opening: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the dropdown is opened * * ```html * <igx-select (opened)='handleOpened($event)'></igx-select> * ``` */ opened: EventEmitter<IBaseEventArgs>; /** * Emitted before the dropdown is closed * * ```html * <igx-select (closing)='handleClosing($event)'></igx-select> * ``` */ closing: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the dropdown is closed * * ```html * <igx-select (closed)='handleClosed($event)'></igx-select> * ``` */ closed: EventEmitter<IBaseEventArgs>; /** * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.select.toggleIconTemplate = myCustomTemplate; * ``` * ```html * <!-- Set in markup --> * <igx-select #select> * ... * <ng-template igxSelectToggleIcon let-collapsed> * <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> * </ng-template> * </igx-select> * ``` */ toggleIconTemplate: TemplateRef<any>; /** * The custom template, if any, that should be used when rendering the HEADER for the select items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.select.headerTemplate = myCustomTemplate; * ``` * ```html * <!-- Set in markup --> * <igx-select #select> * ... * <ng-template igxSelectHeader> * <div class="select__header"> * This is a custom header * </div> * </ng-template> * </igx-select> * ``` */ headerTemplate: TemplateRef<any>; /** * The custom template, if any, that should be used when rendering the FOOTER for the select items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; * myComponent.select.footerTemplate = myCustomTemplate; * ``` * ```html * <!-- Set in markup --> * <igx-select #select> * ... * <ng-template igxSelectFooter> * <div class="select__footer"> * This is a custom footer * </div> * </ng-template> * </igx-select> * ``` */ footerTemplate: TemplateRef<any>; private hintElement; /** @hidden @internal */ width: string; /** @hidden @internal do not use the drop-down container class */ cssClass: boolean; /** @hidden @internal */ allowItemsFocus: boolean; /** @hidden @internal */ height: string; private ngControl; private _overlayDefaults; private _value; private _type; /** * Gets/Sets the component value. * * ```typescript * // get * let selectValue = this.select.value; * ``` * * ```typescript * // set * this.select.value = 'London'; * ``` * ```html * <igx-select [value]="value"></igx-select> * ``` */ get value(): any; set value(v: any); /** * Sets how the select will be styled. * The allowed values are `line`, `box` and `border`. The input-group default is `line`. * ```html * <igx-select [type]="'box'"></igx-select> * ``` */ get type(): IgxInputGroupType; set type(val: IgxInputGroupType); /** @hidden @internal */ get selectionValue(): any; /** @hidden @internal */ get selectedItem(): IgxSelectItemComponent; private _onChangeCallback; private _onTouchedCallback; /** @hidden @internal */ writeValue: (value: any) => void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden @internal */ getEditElement(): HTMLInputElement; /** @hidden @internal */ selectItem(newSelection: IgxDropDownItemBaseDirective, event?: any): void; /** @hidden @internal */ getFirstItemElement(): HTMLElement; /** * Opens the select * * ```typescript * this.select.open(); * ``` */ open(overlaySettings?: OverlaySettings): void; inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void; /** @hidden @internal */ ngAfterContentInit(): void; /** * Event handlers * * @hidden @internal */ handleOpening(e: ToggleViewCancelableEventArgs): void; /** @hidden @internal */ onToggleContentAppended(event: ToggleViewEventArgs): void; /** @hidden @internal */ handleOpened(): void; /** @hidden @internal */ handleClosing(e: ToggleViewCancelableEventArgs): void; /** @hidden @internal */ handleClosed(): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ onFocus(): void; /** * @hidden @internal */ ngOnInit(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ get toggleIcon(): string; /** * @hidden @internal * Prevent input blur - closing the items container on Header/Footer Template click. */ mousedownHandler(event: any): void; protected onStatusChanged(): void; private get isTouchedOrDirty(); private get hasValidators(); protected navigate(direction: Navigate, currentIndex?: number): void; protected manageRequiredAsterisk(): void; private setSelection; static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSelectComponent, "igx-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["label", "toggleIconTemplate", "headerTemplate", "footerTemplate", "hintElement", "children", "prefixes", "suffixes"], ["[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint, [igxHint]", "*", "igx-select-item, igx-select-item-group"], true, never>; static ngAcceptInputType_disabled: unknown; } declare const IGX_SELECT_DIRECTIVES: readonly [typeof IgxSelectComponent, typeof IgxSelectItemComponent, typeof IgxSelectGroupComponent, typeof IgxSelectHeaderDirective, typeof IgxSelectFooterDirective, typeof IgxSelectToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * @hidden * @deprecated * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSelectModule { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxSelectModule, never, [typeof IgxSelectComponent, typeof IgxSelectItemComponent, typeof IgxSelectGroupComponent, typeof IgxSelectHeaderDirective, typeof IgxSelectFooterDirective, typeof IgxSelectToggleIconDirective, typeof i4.IgxLabelDirective, typeof i4.IgxPrefixDirective, typeof i4.IgxSuffixDirective, typeof i4.IgxHintDirective], [typeof IgxSelectComponent, typeof IgxSelectItemComponent, typeof IgxSelectGroupComponent, typeof IgxSelectHeaderDirective, typeof IgxSelectFooterDirective, typeof IgxSelectToggleIconDirective, typeof i4.IgxLabelDirective, typeof i4.IgxPrefixDirective, typeof i4.IgxSuffixDirective, typeof i4.IgxHintDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxSelectModule>; } export { IGX_SELECT_DIRECTIVES, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective };