primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
581 lines (577 loc) • 25.4 kB
TypeScript
import * as _angular_core from '@angular/core';
import { Provider, ElementRef, TemplateRef } from '@angular/core';
import { MotionOptions } from '@primeuix/motion';
import * as i2 from 'primeng/api';
import { OverlayOptions, OverlayService } from 'primeng/api';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Fluid } from 'primeng/fluid';
import { Overlay } from 'primeng/overlay';
import { CSSProperties, InputSize, InputVariant, AppendTo } from 'primeng/types/shared';
import { VoidListener } from 'primeng/ts-helpers';
import { CascadeSelectPassThrough, CascadeSelectChangeEvent, CascadeSelectShowEvent, CascadeSelectBeforeShowEvent, CascadeSelectBeforeHideEvent, CascadeSelectValueTemplateContext, CascadeSelectOptionTemplateContext, CascadeSelectProcessedOption, CascadeSelectFocusedOptionInfo, CascadeSelectOptionChangeEvent, CascadeSelectOptionClickEvent, CascadeSelectOptionMouseEvent } from 'primeng/types/cascadeselect';
export * from 'primeng/types/cascadeselect';
import { BaseStyle } from 'primeng/base';
/**
*
* CascadeSelect is a form component to select a value from a nested structure of options.
*
* [Live Demo](https://www.primeng.org/cascadeselect/)
*
* @module cascadeselectstyle
*
*/
declare enum CascadeSelectClasses {
/**
* Class name of the root element
*/
root = "p-cascadeselect",
/**
* Class name of the label element
*/
label = "p-cascadeselect-label",
/**
* Class name of the dropdown element
*/
dropdown = "p-cascadeselect-dropdown",
/**
* Class name of the loading icon element
*/
loadingIcon = "p-cascadeselect-loading-icon",
/**
* Class name of the dropdown icon element
*/
clearIcon = "p-cascadeselect-clear-icon",
/**
* Class name of the dropdown icon element
*/
dropdownIcon = "p-cascadeselect-dropdown-icon",
/**
* Class name of the overlay element
*/
overlay = "p-cascadeselect-overlay",
/**
* Class name of the list container element
*/
listContainer = "p-cascadeselect-list-container",
/**
* Class name of the list element
*/
list = "p-cascadeselect-list",
/**
* Class name of the item element
*/
item = "p-cascadeselect-item",
/**
* Class name of the item content element
*/
itemContent = "p-cascadeselect-item-content",
/**
* Class name of the item text element
*/
itemText = "p-cascadeselect-item-text",
/**
* Class name of the group icon element
*/
groupIcon = "p-cascadeselect-group-icon",
/**
* Class name of the item list element
*/
itemList = "p-cascadeselect-item-list"
}
declare class CascadeSelectStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-cascadeselect-mobile': any;
'p-disabled': any;
'p-invalid': any;
'p-variant-filled': boolean;
'p-focus': any;
'p-inputwrapper-filled': any;
'p-inputwrapper-focus': any;
'p-cascadeselect-open': any;
'p-cascadeselect-fluid': any;
'p-cascadeselect-sm p-inputfield-sm': boolean;
'p-cascadeselect-lg p-inputfield-lg': boolean;
})[];
label: ({ instance }: {
instance: any;
}) => (string | {
'p-placeholder': boolean;
'p-cascadeselect-label-empty': boolean;
})[];
clearIcon: string;
dropdown: string;
loadingIcon: string;
dropdownIcon: string;
overlay: ({ instance }: {
instance: any;
}) => (string | {
'p-cascadeselect-mobile-active': any;
})[];
listContainer: string;
list: string;
option: ({ instance, processedOption }: {
instance: any;
processedOption: any;
}) => (string | {
'p-cascadeselect-option-active': any;
'p-cascadeselect-option-selected': any;
'p-focus': any;
'p-disabled': any;
})[];
optionContent: string;
optionText: string;
groupIcon: string;
optionList: string;
};
inlineStyles: {
root: ({ instance }: {
instance: any;
}) => {
position: string | undefined;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CascadeSelectStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<CascadeSelectStyle>;
}
interface CascadeSelectStyle extends BaseStyle {
}
declare const CASCADESELECT_VALUE_ACCESSOR: Provider;
/**
* CascadeSelect is a form component to select a value from a nested structure of options.
* @group Components
*/
declare class CascadeSelect extends BaseEditableHolder<CascadeSelectPassThrough> {
componentName: string;
$pcCascadeSelect: CascadeSelect | undefined;
bindDirectiveInstance: Bind;
onAfterViewChecked(): void;
private _internalId;
/**
* Unique identifier of the component
* @group Props
*/
id: _angular_core.InputSignal<string | undefined>;
$id: _angular_core.Signal<string>;
/**
* Text to display when the search is active. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue '{0} results are available'
*/
searchMessage: _angular_core.InputSignal<string | undefined>;
/**
* Text to display when there is no data. Defaults to global value in i18n translation configuration.
* @group Props
*/
emptyMessage: _angular_core.InputSignal<string | undefined>;
/**
* Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue '{0} items selected'
*/
selectionMessage: _angular_core.InputSignal<string | undefined>;
/**
* Text to display when filtering does not return any results. Defaults to value from PrimeNG locale configuration.
* @group Props
* @defaultValue 'No available options'
*/
emptySearchMessage: _angular_core.InputSignal<string | undefined>;
/**
* Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue 'No selected item'
*/
emptySelectionMessage: _angular_core.InputSignal<string | undefined>;
/**
* Locale to use in searching. The default locale is the host environment's current locale.
* @group Props
*/
searchLocale: _angular_core.InputSignal<string | undefined>;
/**
* Name of the disabled field of an option.
* @group Props
*/
optionDisabled: _angular_core.InputSignal<string | undefined>;
/**
* Fields used when filtering the options, defaults to optionLabel.
* @group Props
*/
focusOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Determines if the option will be selected on focus.
* @group Props
*/
selectOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to focus on the first visible or selected element when the overlay panel is shown.
* @group Props
*/
autoOptionFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* An array of selectitems to display as the available options.
* @group Props
*/
options: _angular_core.InputSignal<string | string[] | undefined>;
/**
* Property name or getter function to use as the label of an option.
* @group Props
*/
optionLabel: _angular_core.InputSignal<string | undefined>;
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
* @group Props
*/
optionValue: _angular_core.InputSignal<string | undefined>;
/**
* Property name or getter function to use as the label of an option group.
* @group Props
*/
optionGroupLabel: _angular_core.InputSignal<string | undefined>;
/**
* Property name or getter function to retrieve the items of a group.
* @group Props
*/
optionGroupChildren: _angular_core.InputSignal<string | string[] | null | undefined>;
/**
* Default text to display when no option is selected.
* @group Props
*/
placeholder: _angular_core.InputSignal<string | undefined>;
/**
* Selected value of the component.
* @group Props
*/
value: _angular_core.WritableSignal<unknown>;
/**
* A property to uniquely identify an option.
* @group Props
*/
dataKey: _angular_core.InputSignal<string | undefined>;
/**
* Identifier of the underlying input element.
* @group Props
*/
inputId: _angular_core.InputSignal<string | undefined>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
/**
* Label of the input for accessibility.
* @group Props
*/
inputLabel: _angular_core.InputSignal<string | undefined>;
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* When enabled, a clear icon is displayed to clear the value.
* @group Props
*/
showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Style class of the overlay panel.
* @group Props
*/
panelStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the overlay panel.
* @group Props
*/
panelStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
* @group Props
*/
overlayOptions: _angular_core.InputSignal<OverlayOptions | undefined>;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether the dropdown is in loading state.
* @group Props
*/
loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Icon to display in loading state.
* @group Props
*/
loadingIcon: _angular_core.InputSignal<string | undefined>;
/**
* The breakpoint to define the maximum width boundary.
* @group Props
*/
breakpoint: _angular_core.InputSignal<string>;
/**
* Specifies the size of the component.
* @defaultValue undefined
* @group Props
*/
size: _angular_core.InputSignal<InputSize | undefined>;
/**
* Specifies the input variant of the component.
* @defaultValue undefined
* @group Props
*/
variant: _angular_core.InputSignal<InputVariant | undefined>;
/**
* Spans 100% width of the container when enabled.
* @defaultValue undefined
* @group Props
*/
fluid: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'self'
* @group Props
*/
appendTo: _angular_core.InputSignal<AppendTo>;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
/**
* Callback to invoke on value change.
* @param {CascadeSelectChangeEvent} event - Custom change event.
* @group Emits
*/
onChange: _angular_core.OutputEmitterRef<CascadeSelectChangeEvent>;
/**
* Callback to invoke when a group changes.
* @group Emits
*/
onGroupChange: _angular_core.OutputEmitterRef<{
originalEvent: Event;
value?: unknown;
isFocus?: boolean;
}>;
/**
* Callback to invoke when the overlay is shown.
* @param {CascadeSelectShowEvent} event - Custom overlay show event.
* @group Emits
*/
onShow: _angular_core.OutputEmitterRef<CascadeSelectShowEvent | undefined>;
/**
* Callback to invoke when the overlay is hidden.
* @group Emits
*/
onHide: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when the clear token is clicked.
* @group Emits
*/
onClear: _angular_core.OutputEmitterRef<MouseEvent | undefined>;
/**
* Callback to invoke before overlay is shown.
* @param {CascadeSelectBeforeShowEvent} event - Custom overlay show event.
* @group Emits
*/
onBeforeShow: _angular_core.OutputEmitterRef<CascadeSelectBeforeShowEvent>;
/**
* Callback to invoke before overlay is hidden.
* @param {CascadeSelectBeforeHideEvent} event - Custom overlay hide event.
* @group Emits
*/
onBeforeHide: _angular_core.OutputEmitterRef<CascadeSelectBeforeHideEvent>;
/**
* Callback to invoke when input receives focus.
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
onFocus: _angular_core.OutputEmitterRef<FocusEvent>;
/**
* Callback to invoke when input loses focus.
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
onBlur: _angular_core.OutputEmitterRef<FocusEvent>;
focusInputViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
panelViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
overlayViewChild: _angular_core.Signal<Overlay | undefined>;
/**
* Custom value template.
* @group Templates
*/
valueTemplate: _angular_core.Signal<TemplateRef<CascadeSelectValueTemplateContext<any>> | undefined>;
/**
* Custom option template.
* @group Templates
*/
optionTemplate: _angular_core.Signal<TemplateRef<CascadeSelectOptionTemplateContext<any>> | undefined>;
/**
* Custom header template.
* @group Templates
*/
headerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom footer template.
* @group Templates
*/
footerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom trigger icon template.
* @group Templates
*/
triggerIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom loading icon template.
* @group Templates
*/
loadingIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom option group icon template.
* @group Templates
*/
groupIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom clear icon template.
* @group Templates
*/
clearIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
selectionPath: CascadeSelectProcessedOption[] | null;
focused: _angular_core.WritableSignal<boolean>;
overlayVisible: _angular_core.WritableSignal<boolean>;
clicked: _angular_core.WritableSignal<boolean>;
dirty: _angular_core.WritableSignal<boolean>;
searchValue: string | undefined;
searchTimeout: ReturnType<typeof setTimeout> | undefined;
hideTimeout: ReturnType<typeof setTimeout> | undefined;
focusedOptionInfo: _angular_core.WritableSignal<CascadeSelectFocusedOptionInfo>;
activeOptionPath: _angular_core.WritableSignal<CascadeSelectProcessedOption[]>;
processedOptions: CascadeSelectProcessedOption[];
_componentStyle: CascadeSelectStyle;
initialized: _angular_core.WritableSignal<boolean>;
$variant: _angular_core.Signal<InputVariant | null>;
$appendTo: _angular_core.Signal<AppendTo>;
valueTemplateContext: _angular_core.Signal<{
$implicit: unknown;
placeholder: string | undefined;
}>;
$tabindex: _angular_core.Signal<number>;
requiredAttr: _angular_core.Signal<"" | undefined>;
disabledAttr: _angular_core.Signal<"" | undefined>;
ariaExpanded: _angular_core.Signal<boolean>;
ariaControls: _angular_core.Signal<string | null>;
ariaActiveDescendant: _angular_core.Signal<string | null | undefined>;
showClearIcon: _angular_core.Signal<boolean>;
focusedOptionIdValue: _angular_core.Signal<string | null | undefined>;
loadingIconClass: _angular_core.Signal<string>;
pcFluid: Fluid | null;
get hasFluid(): boolean;
onHostClick(event: MouseEvent): void;
get listLabel(): string;
get focusedOptionId(): string | null;
get searchResultMessageText(): string;
get searchMessageText(): string;
get emptySearchMessageText(): string;
get emptyMessageText(): string;
get selectionMessageText(): string;
get emptySelectionMessageText(): string;
get selectedMessageText(): string;
visibleOptions: _angular_core.Signal<CascadeSelectProcessedOption[]>;
label: _angular_core.Signal<any>;
hasSelectedOption(): boolean;
createProcessedOptions(options: unknown[] | undefined, level?: number, parent?: CascadeSelectProcessedOption | Record<string, unknown>, parentKey?: string): CascadeSelectProcessedOption[];
onInputFocus(event: FocusEvent): void;
onInputBlur(event: FocusEvent): void;
onInputKeyDown(event: KeyboardEvent): void;
onArrowDownKey(event: KeyboardEvent): void;
onArrowUpKey(event: KeyboardEvent): void;
onArrowLeftKey(event: KeyboardEvent): void;
onArrowRightKey(event: KeyboardEvent): void;
onHomeKey(event: KeyboardEvent): void;
onEndKey(event: KeyboardEvent): void;
onEnterKey(event: KeyboardEvent): void;
onSpaceKey(event: KeyboardEvent): void;
onEscapeKey(event: KeyboardEvent): void;
onTabKey(event: KeyboardEvent): void;
onBackspaceKey(event: KeyboardEvent): void;
equalityKey(): string | undefined;
updateModel(value: unknown, event?: Event): void;
autoUpdateModel(): void;
scrollInView(index?: number): void;
changeFocusedOptionIndex(event: Event, index: number, preventSelection?: boolean): void;
matchMediaListener: VoidListener;
onOptionSelect(event: {
originalEvent: Event;
value?: unknown;
isHide?: boolean;
}): void;
onOptionGroupSelect(event: {
originalEvent: Event;
value?: unknown;
isFocus?: boolean;
}): void;
onContainerClick(event: MouseEvent): void;
isOptionMatched(processedOption: CascadeSelectProcessedOption): any;
isOptionDisabled(option: unknown): any;
isValidOption(processedOption: CascadeSelectProcessedOption): boolean;
isValidSelectedOption(processedOption: CascadeSelectProcessedOption): boolean;
isSelected(processedOption: CascadeSelectProcessedOption): boolean;
findOptionPathByValue(value: unknown, processedOptions?: CascadeSelectProcessedOption[] | null, level?: number): any;
findFirstOptionIndex(): number;
findLastOptionIndex(): number;
findNextOptionIndex(index: number): number;
findPrevOptionIndex(index: number): number;
findSelectedOptionIndex(): number;
findFirstFocusedOptionIndex(): number;
findLastFocusedOptionIndex(): number;
searchOptions(event: KeyboardEvent, char: string): boolean;
hide(event?: any, isFocus?: boolean): void;
show(event?: CascadeSelectShowEvent, isFocus?: boolean): void;
clear(event?: MouseEvent): void;
getOptionLabel(option: unknown): any;
getOptionValue(option: unknown): any;
getOptionGroupLabel(optionGroup: unknown): any;
getOptionGroupChildren(optionGroup: unknown, level: number): any;
isOptionGroup(option: unknown, level: number): any;
isProccessedOptionGroup(processedOption: CascadeSelectProcessedOption): boolean;
getProccessedOptionLabel(processedOption: CascadeSelectProcessedOption): any;
overlayService: OverlayService;
constructor();
query: MediaQueryList | undefined;
queryMatches: _angular_core.WritableSignal<boolean>;
mobileActive: _angular_core.WritableSignal<boolean>;
onOptionChange(event: CascadeSelectOptionChangeEvent): void;
onOptionClick(event: CascadeSelectOptionClickEvent): void;
onOptionMouseEnter(event: CascadeSelectOptionMouseEvent): void;
onOptionMouseMove(event: CascadeSelectOptionMouseEvent): void;
onInit(): void;
onAfterViewInit(): void;
bindMatchMediaListener(): void;
unbindMatchMediaListener(): void;
onOverlayAfterLeave(): void;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value: any, setModelValue: (value: any) => void): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CascadeSelect, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CascadeSelect, "p-cascadeselect, p-cascade-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "searchMessage": { "alias": "searchMessage"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "selectionMessage": { "alias": "selectionMessage"; "required": false; "isSignal": true; }; "emptySearchMessage": { "alias": "emptySearchMessage"; "required": false; "isSignal": true; }; "emptySelectionMessage": { "alias": "emptySelectionMessage"; "required": false; "isSignal": true; }; "searchLocale": { "alias": "searchLocale"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "focusOnHover": { "alias": "focusOnHover"; "required": false; "isSignal": true; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "autoOptionFocus": { "alias": "autoOptionFocus"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionGroupLabel": { "alias": "optionGroupLabel"; "required": false; "isSignal": true; }; "optionGroupChildren": { "alias": "optionGroupChildren"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "inputLabel": { "alias": "inputLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; "isSignal": true; }; "panelStyle": { "alias": "panelStyle"; "required": false; "isSignal": true; }; "overlayOptions": { "alias": "overlayOptions"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingIcon": { "alias": "loadingIcon"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; "onGroupChange": "onGroupChange"; "onShow": "onShow"; "onHide": "onHide"; "onClear": "onClear"; "onBeforeShow": "onBeforeShow"; "onBeforeHide": "onBeforeHide"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["valueTemplate", "optionTemplate", "headerTemplate", "footerTemplate", "triggerIconTemplate", "loadingIconTemplate", "groupIconTemplate", "clearIconTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class CascadeSelectModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CascadeSelectModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<CascadeSelectModule, never, [typeof CascadeSelect, typeof i2.SharedModule], [typeof CascadeSelect, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<CascadeSelectModule>;
}
export { CASCADESELECT_VALUE_ACCESSOR, CascadeSelect, CascadeSelectClasses, CascadeSelectModule, CascadeSelectStyle };