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
TypeScript
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 };