projects/i-components/src/lib/components/rad-combo-box/rad-combo-box.component.ts
Angular Component for the RadComboBox Control.
OnInit
AfterContentInit
AfterViewChecked
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
DataProviderService
|
| selector | wm-rad-combo-box |
| styleUrls | ./rad-combo-box.component.scss |
| templateUrl | ./rad-combo-box.component.html |
Public
constructor(injector: Injector, injectedModel: RadComboBoxModel, cdRef: ChangeDetectorRef, dataService: DataProviderService, element: ElementRef)
|
||||||||||||||||||
|
Creates an instance of RadComboBoxComponent.
Parameters :
|
| background | |
|
Property used to save the background. |
|
| canKeyboardNavigationSelectItems | |
|
Sets canKeyboardNavigationSelectItems property of the RadComboBoxComponent. |
|
| clearSelectionButtonContent | |
|
Sets clearSelectionButtonContent property of the RadComboBoxComponent. |
|
| clearSelectionButtonVisibility | |
Type : boolean
|
|
|
Sets clearSelectionButtonVisibility property of the RadComboBoxComponent. |
|
| displayMemberPath | |
Type : any
|
|
|
Sets the name or path of the property that is displayed for each data item. |
|
| forceElementSynchronization | |
Type : boolean
|
|
Default value : false
|
|
|
Force synchronization on first open |
|
| isEditable | |
|
Sets isEditable property of the RadComboBoxComponent. |
|
| isFilteringEnabled | |
Type : boolean
|
|
|
Sets isFilteringEnabled property of the RadComboBoxComponent. |
|
| isReadOnly | |
|
Sets isReadOnly property of the RadComboBoxComponent. |
|
| itemsPanel | |
|
Template reference to be used as the RadComboBox.ItemsPanel If you provide this input, it will overwrite the exist section. |
|
| itemsSource | |
Type : any
|
|
|
Sets ItemsSource property of the RadComboBoxComponent. |
|
| maxDropDownHeight | |
Type : any
|
|
|
Sets MaxDropDownHeight property of the RadComboBoxComponent. |
|
| model | |
Type : RadComboBoxModel
|
|
|
Object with properties and events for the RadComboBoxComponent. |
|
| openDropDownOnFocus | |
|
Sets openDropDownOnFocus property of the RadComboBoxComponent. |
|
| selectedIndex | |
Type : number | BindingInfo
|
|
|
Gets the selected index of the combobox control |
|
| selectedItem | |
|
Sets selectedItem property of the RadComboBoxModel. |
|
| selectedValue | |
Type : any
|
|
|
Sets selectedValue property of the RadComboBoxModel. |
|
| selectedValuePath | |
Type : any
|
|
|
Sets selectedValuePath property of the RadComboBoxModel. |
|
| shouldResetFilteringValue | |
Type : boolean
|
|
|
Sets ShouldResetFilteringValue model property |
|
| text | |
|
Sets text property of the RadComboBoxModel. |
|
| textSearchMode | |
Type : any
|
|
|
Sets textSearchMode property of the RadComboBoxComponent |
|
| controlTemplate | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1197
|
|
|
Sets the controlTemplate Input property for changing the model's |
|
| cursor | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1451
|
|
|
Property used to save the cursor value |
|
| dataContext | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:952
|
|
|
Gets/sets the dataContext Input property for changing the model's |
|
| dataGridRowHeight | |
Type : number
|
|
Default value : 22
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:507
|
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
|
| foreground | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1223
|
|
|
Sets the value of the Foreground property |
|
| height | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1394
|
|
|
Sets the height |
|
| horizontalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1096
|
|
|
Sets the horizontal alignment. |
|
| horizontalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1125
|
|
|
Sets the horizontal content alignment. |
|
| hostHozSelfAlign | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:380
|
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
|
| isEnabled | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1008
|
|
|
Gets/sets the isEnabled property for the BaseComponent |
|
| isTabStop | |
Type : boolean
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:760
|
|
|
Sets/gets IsTabStop property of the BaseComponent |
|
| margin | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:782
|
|
|
Sets Margin property of the BaseComponent. |
|
| maxHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1325
|
|
|
Sets maxHeight |
|
| maxWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1283
|
|
|
Sets maxWidth |
|
| minHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1304
|
|
|
Sets minHeight |
|
| minWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1262
|
|
|
Sets min Width |
|
| name | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1153
|
|
|
Sets the name model property for the control when the name is an input |
|
| opacity | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1336
|
|
|
Sets Opacity value property of the component |
|
| spellCheck | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:186
|
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
|
| style | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1434
|
|
|
Sets the style |
|
| tabIndex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:733
|
|
|
Sets the property TabIndex of the control model. |
|
| tag | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1171
|
|
|
Object used in the Tag property of the Button |
|
| useCss | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:177
|
|
|
Determines if the component uses CSS height/width values, instead of inputs |
|
| verticalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1038
|
|
|
Sets the vertical alignment. |
|
| verticalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1067
|
|
|
Sets the vertical content alignment. |
|
| visibility | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:980
|
|
|
Gets/sets the visibility property for the BaseComponent |
|
| width | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1365
|
|
|
Sets the width |
|
| zindex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1498
|
|
|
Property used to set the canvas zindex value. Note: Consider moving this @Input to canvas.direcive.ts, refactoring the directive so all inputs are declared in the directive, and all @HostBindings are declared here in baseComponent, the directive would be responsible for updating the models, while baseComponent will be responsible for binding the values: zIndex, Top, Left... |
|
| dropDownClosed | |
Type : EventEmitter<literal type>
|
|
|
Event Emitter. Dropdown closed event. |
|
| dropDownOpened | |
Type : EventEmitter<literal type>
|
|
|
Event Emitter. Dropdown opened event. |
|
| selectionChanged | |
Type : EventEmitter<any>
|
|
|
Event Emitter. SelectionChanged event. |
|
| bindingValidationError | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:114
|
|
|
output to emit the new value of the bindingValidationError event |
|
| layoutUpdated | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:140
|
|
|
Output to emit when then component's layout is updated. |
|
| loaded | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:123
|
|
|
Output to emit when then component is loaded. |
|
| mouseEnter | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:157
|
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
|
| mouseLeave | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:167
|
|
|
Event Emitter Called in the mouseLeave handler |
|
| mouseLeftButtonUp | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:147
|
|
|
MouseLeftButtonUp event Emitter. |
|
| sizeChanged | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:132
|
|
|
Output to emit when then component size is changed. |
|
| class |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| class.defaultFontStyles |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| class.focusable |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| class.hasDefinedCursor |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| class.horizontal-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| class.horizontal-left |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| class.horizontal-right |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| class.horizontal-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| class.vertical-bottom |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| class.vertical-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| class.vertical-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| class.vertical-top |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| style.display |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| style.font-family |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| style.font-size |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| style.font-style |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| style.font-weight |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| style.height |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| style.max-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| style.max-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| style.min-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| style.min-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| style.opacity |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| style.width |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| style.z-index |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| document:mousedown |
Arguments : '$event'
|
document:mousedown(event: any)
|
|
Click handler to check if the input value should be reseted. |
| mouseenter |
mouseenter()
|
|
Listener to the mouse enter event to trigger visual state change animation |
| mouseleave |
mouseleave()
|
|
Listener to the mouse leave event to trigger visual state change animation |
| addClearSelectionButton | ||||||
addClearSelectionButton(overlay: Element)
|
||||||
|
Adds the ClearSelectionButton to the drop down
Parameters :
Returns :
void
|
| addDynamicItemPanelButtons |
addDynamicItemPanelButtons(items: any[], startIndex: number, endIndex: number)
|
|
Dinamically add button to the StackPanel instance.
Returns :
void
|
| applyMinWidth |
applyMinWidth()
|
|
Apply min width css property
Returns :
number
|
| applySuggestionOnInput |
applySuggestionOnInput(value: string, suggestedText: any)
|
|
Apply text suggestion to the internal textarea
Returns :
void
|
| Protected arrowDownHandler |
arrowDownHandler()
|
|
Handle the arrow down key event. Update the selectedIndex and move the scroll position if needed.
Returns :
void
|
| Protected arrowUpHandler |
arrowUpHandler()
|
|
Handle the arrow up key event. Update the selectedIndex and move the scroll position if needed.
Returns :
void
|
| assignItemsPanelItems | ||||||||||||
assignItemsPanelItems(items: any[], index: number)
|
||||||||||||
|
Assign Items to a StackPanelModel to simulate ItemsPanel Silverlight behavior
Parameters :
Returns :
void
|
| assignTextSelectedItem |
assignTextSelectedItem()
|
|
Assign Text Selected item
Returns :
void
|
| Private calculateItemsForReadOnly | ||||||||||||
calculateItemsForReadOnly(event: KeyboardEvent, value: string)
|
||||||||||||
|
Calculate if there are options for the searchFilterText in the items source.
Parameters :
Returns :
boolean
{boolean} |
| calcVisualAppearanceEditable |
calcVisualAppearanceEditable()
|
|
Obtain if radComboBox is Editable and apply styles according to his boolean value.
Returns :
void
|
| calcVisualState |
calcVisualState()
|
|
Given the current visual state of the control it calculates the custom classes to apply to animate the state
Returns :
void
|
| childrenCountChangeHandler | ||||||
childrenCountChangeHandler(name: string)
|
||||||
|
Listener to changes in the count of items in the model
Parameters :
Returns :
void
|
| Private clearComboBox |
clearComboBox()
|
|
clears both selected and focused states from the drop down also closes the dropDown and clears the input
Returns :
void
|
| Private clearDropDownFocus |
clearDropDownFocus()
|
|
clears focus in the drop down
Returns :
void
|
| Private clearDropDownSelection |
clearDropDownSelection()
|
|
clears selection in the drop down so it can be set again next time the drop down is shown
Returns :
void
|
| clickListener | ||||||
clickListener(event: any)
|
||||||
Decorators :
@HostListener('document:mousedown', ['$event'])
|
||||||
|
Click handler to check if the input value should be reseted.
Parameters :
Returns :
void
|
| emitStackPanelLoading | ||||||
emitStackPanelLoading(flag: boolean)
|
||||||
|
Emits to stack panel a flag to know if items are loading.
Parameters :
Returns :
void
|
| Protected enterKeyHandler |
enterKeyHandler()
|
|
Handle the enter key event. Update the selectedIndex.
Returns :
void
|
| getActualValue |
getActualValue(valueToTransform: any, otherValue: any)
|
|
Get the actual to display
Returns :
string
|
| getItemImage | ||||||
getItemImage(imageToCovert: any)
|
||||||
|
Gets the item image.
Parameters :
Returns :
string
|
| handleClosing | ||||||
handleClosing(event: any)
|
||||||
|
Event before the dropdown is closed
Parameters :
Returns :
void
|
| Private handleFilteringWithReadOnly |
handleFilteringWithReadOnly()
|
|
If the user has enabled filtering, and the user has not typed anything in the last 1500ms, then reset the filter
Returns :
void
|
| handleOnClick | ||||||
handleOnClick(event: any)
|
||||||
|
Event to handle when the not editable radComboBox is clicked
Parameters :
Returns :
void
|
| handleOpening | ||||||
handleOpening(event: any)
|
||||||
|
Event before the dropdown is opened
Parameters :
Returns :
void
|
| handleToogleClick | ||||||
handleToogleClick(event: any)
|
||||||
|
Event to handle when the dropdown icon is clicked
Parameters :
Returns :
void
|
| Protected hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2321
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| indexSelectedResolver |
indexSelectedResolver()
|
|
Resolves IndexSelected value when virtual scroll is enabled
Returns :
void
|
| Private isNavigationKey | ||||||||
isNavigationKey(event: any)
|
||||||||
|
returns true if the event is a navigation key
Parameters :
Returns :
boolean
{boolean} returns true if the event is a navigation key |
| itemsPanelSelectionChanged | ||||||
itemsPanelSelectionChanged(value: ButtonModel)
|
||||||
|
Trigger a selectionChanged if the value has changed from an external component (StackPanel)
Parameters :
Returns :
void
|
| keyDownHandler | ||||||
keyDownHandler(event: KeyboardEvent)
|
||||||
|
Handler for the key down event.
Parameters :
Returns :
void
{void} |
| modelChangeHandler | ||||||
modelChangeHandler(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1277
|
||||||
|
Update model change
Parameters :
Returns :
void
|
| navigateItemHandler |
navigateItemHandler()
|
|
Handles naviation to an item based on suggestion.
Returns :
void
|
| navigateSuggestedItem | ||||||
navigateSuggestedItem(suggestion: any)
|
||||||
|
Navigate to a suggested item based on the current text
Parameters :
Returns :
any
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:604
|
|
Determines when all properties are ready and set renderingFlag true.
Returns :
void
|
| ngAfterViewChecked |
ngAfterViewChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:616
|
|
added for focusing the input when the focus is lost when the data is loaded
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:628
|
|
Clean up code of the component
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:575
|
|
Angular lifecycle hook.
Returns :
void
|
| onFocusIn |
onFocusIn()
|
|
Listener of focusIn in the input nodes to trigger visual state change animation
Returns :
void
|
| onFocusOut |
onFocusOut()
|
|
Listener of focusOut in the input nodes to trigger visual state change animation
Returns :
void
|
| onMouseEnter |
onMouseEnter()
|
Decorators :
@HostListener('mouseenter')
|
|
Listener to the mouse enter event to trigger visual state change animation
Returns :
void
|
| onMouseLeave |
onMouseLeave()
|
Decorators :
@HostListener('mouseleave')
|
|
Listener to the mouse leave event to trigger visual state change animation
Returns :
void
|
| onSelection | ||||||
onSelection(event: any)
|
||||||
|
Event triggered when selection changes and itemSource property is defined.
Parameters :
Returns :
void
|
| pageResolver |
pageResolver(items: any[], skip: number, take: number)
|
|
Assign a subset of elements to the child stack panel component
Returns :
void
|
| resetFilter |
resetFilter()
|
|
Reset filter timeout and text.
Returns :
void
|
| resetFilteringValue |
resetFilteringValue()
|
|
Resets internal value and clear filter.
Returns :
void
|
| returnSelectedItem |
returnSelectedItem()
|
|
Return selectedItem with or without displayMemberPath
Returns :
any
|
| Private searchForOption | ||||||
searchForOption(event: KeyboardEvent)
|
||||||
|
Try to determinate if there are values for the search text or not Also handle the backspace key.
Parameters :
Returns :
boolean
{boolean} |
| searchItemsPipe | ||||||||||||||||
searchItemsPipe(text: string, mode: TextSearchMode | string, forced)
|
||||||||||||||||
|
Search through items using the textSearchModePipe
Parameters :
Returns :
any[]
|
| selectInputText | ||||||||
selectInputText(delayed)
|
||||||||
|
Selects the text on the input
Parameters :
Returns :
void
|
| selectInputTextFromRange |
selectInputTextFromRange(start: number, end: number)
|
|
Selects the text on the input from a certain range
Returns :
void
|
| syncItemsToRender |
syncItemsToRender()
|
|
Synchronize the internal collection itemsToRender
Returns :
void
|
| syncModel |
syncModel()
|
|
Syncs the model with the component values.
Returns :
void
|
| syncTextWithSelectedItem |
syncTextWithSelectedItem()
|
|
Syncs the Text property and the SelectedItem text.
Returns :
void
|
| Private syncToUISelectedItem |
syncToUISelectedItem()
|
|
Makes sure the drop down will show the selected index if one is specified by the model
Returns :
void
|
| tabKeyHandler |
tabKeyHandler()
|
|
Handles tab key to replicate Silverlight behavior, it selects and gives focus to next item.
Returns :
void
|
| transformDisplayMemberPath |
transformDisplayMemberPath(stringValue: any, itemToRender: any)
|
|
DisplayMemberPath string transform
Returns :
string
|
| unassignedSelectedValue | ||||||
unassignedSelectedValue(value: string)
|
||||||
|
Unassigned selected item if the value is empty.
Parameters :
Returns :
void
|
| updateItems |
updateItems()
|
|
Update internal collection of items
Returns :
void
|
| Protected alignmentHandler |
alignmentHandler()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2346
|
|
Calculate the values for the grid size behavior from the alignments
Returns :
void
|
| Protected assignPendingPropertyValues |
assignPendingPropertyValues()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2057
|
|
Apply pending assignments to properties with property values
Returns :
void
|
| calculateActualSize | ||||||||
calculateActualSize(name?: string)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1674
|
||||||||
|
If the name is equal to 'calculateActualSize', then call the handlerCalcActualSize function and pass in false to avoid the timer in the function. memberof BaseComponent
Parameters :
Returns :
void
|
| Protected checkAndRegisterCompatibilityBinding | |||||||||
checkAndRegisterCompatibilityBinding(property: DependencyProperty, bindingObjectCandidate: any)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2023
|
|||||||||
|
Verifies if the given object (bindingObjectCandidate) is a binding object. If so the binding will be registered.
Parameters :
Returns :
boolean
{boolean} true if the value is a binding info object and if the binding was registered, false if not |
| Protected checkForStaticResource | ||||||||||||
checkForStaticResource(property: string, value: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2043
|
||||||||||||
|
Checks if the given value is a static resource reference or not, if a reference then the value is queue for later assignment.
Parameters :
Returns :
boolean
true if the value is a static resource reference, otherwise false |
| checkStaticItemInModelCollection | ||||||||||||
checkStaticItemInModelCollection(collection: any, itemToCheck: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1889
|
||||||||||||
|
Checks if the element exists previously in the items collection
Parameters :
Returns :
number
number Returns -1 if the item is not present in the items collection otherwise the index value |
| createElementInRoot |
createElementInRoot(injector: Injector, componentToCreate: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2698
|
|
Create a given component on the HTML body.
Returns :
ComponentRef<any>
|
| cursorStyle |
cursorStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1549
|
|
Returns the correct CSS cursor style and sets the definedCursor flag if necessary
Returns :
string
{string} |
| detectChanges |
detectChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:813
|
|
Performs a single detect Changes over the component
Returns :
void
|
| detectChangesAction |
detectChangesAction()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1686
|
|
Handle subscription to the notifyDetectChanges action Refresh the component whenever a model modification was performed
Returns :
void
|
| getForeground |
getForeground()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1966
|
|
Calculates the Foreground color to be applied
Returns :
string
string |
| getImageString | ||||||
getImageString(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2221
|
||||||
|
Returns string path to the image.
Parameters :
Returns :
any
|
| getTargetValue | ||||||
getTargetValue(e: Event)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2239
|
||||||
|
Returns the value from a $event
Parameters :
Returns :
string
|
| Protected handlerCalcActualSize | ||||||
handlerCalcActualSize(async: boolean)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2391
|
||||||
|
Handler that calculates ActualHeight & ActualWidth based on its inner content.
Parameters :
Returns :
void
|
| heightCalc |
heightCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1939
|
|
Applies the height CSS value
Returns :
any
|
| heightDefaultStyle |
heightDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1914
|
|
Calculates the auto height value
Returns :
string
{string} |
| Protected hostVerticalAlignmentCall |
hostVerticalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2357
|
|
Assign all the vertical bindings for the control
Returns :
void
|
| imageToPath | ||||||
imageToPath(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2202
|
||||||
|
Returns the path of the given image.
Parameters :
Returns :
any
|
| loadStaticItems | ||||||||||||
loadStaticItems(staticItems: any, itemsCollection: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1634
|
||||||||||||
|
Parameters :
Returns :
void
void |
| Private markForCheckComp |
markForCheckComp()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2451
|
|
Marks current component
Returns :
void
|
| mouseEnterHandler | ||||||||
mouseEnterHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1982
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| mouseLeaveHandler | ||||||||
mouseLeaveHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2001
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| Public ngAfterContentChecked |
ngAfterContentChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:867
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:877
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:847
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnChanges |
ngOnChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:824
|
|
Angular Lifecycle Hooks
Returns :
void
|
| preventItemsDuplication | ||||||||||||||||||
preventItemsDuplication(itemsToRender: any, items: any, contentChildTemplate: any, afterContentInitCalled: boolean, injector: Injector)
|
||||||||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||||||||
|
Defined in
BaseComponent:2170
|
||||||||||||||||||
|
Validates if coming models are the same, and prevents to be recreated on Ribbon DOM. (Needs to be checked, in some statics scenarios RibbonTab, RibbonGroup duplicates items)
Parameters :
Returns :
any[]
|
| processAlignments | ||||||
processAlignments(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1704
|
||||||
|
Method to check if the component should assign a alignment property
Parameters :
Returns :
void
{void} |
| processCursor | ||||||
processCursor(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1850
|
||||||
|
Method to set the cursor style of the component
Parameters :
Returns :
void
|
| processCustomCssClasses | ||||||
processCustomCssClasses(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1723
|
||||||
|
Method to set custom CSS Clases
Parameters :
Returns :
void
{void} |
| processFocusable | ||||||
processFocusable(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1816
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| Private processFontFamily | ||||||
processFontFamily(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2784
|
||||||
|
Process the FontFamily property
Parameters :
Returns :
any
|
| processFonts | ||||||
processFonts(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1778
|
||||||
|
Method to apply the font styles for the component.
Parameters :
Returns :
void
|
| Private processFontSize | ||||||
processFontSize(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2798
|
||||||
|
Process the FontSize property
Parameters :
Returns :
any
|
| Private processFontStyle | ||||||
processFontStyle(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2815
|
||||||
|
Process the FontStyle property
Parameters :
Returns :
any
|
| Private processFontWeight | ||||||
processFontWeight(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2832
|
||||||
|
Process the FontWeight property
Parameters :
Returns :
any
|
| processHeights | ||||||
processHeights(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1797
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| processIsEnabled | ||||||
processIsEnabled(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1764
|
||||||
|
Process changes to
Parameters :
Returns :
void
|
| processOpacity | ||||||
processOpacity(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1751
|
||||||
|
Method to apply the opacity for the component.
Parameters :
Returns :
void
|
| processVisibility | ||||||
processVisibility(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1737
|
||||||
|
Method to check if the component should be show or hide.
Parameters :
Returns :
void
|
| processWidths | ||||||
processWidths(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1829
|
||||||
|
Method to check and set the width of the grid
Parameters :
Returns :
void
|
| Private processZIndex | ||||||
processZIndex(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1872
|
||||||
|
Method to process the ZIndex when set through the model
Parameters :
Returns :
void
|
| Private recreateInvalidBindings |
recreateInvalidBindings()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2756
|
|
Execution of removeModelProxyHandlers in a previous instance of the component (that used the same model) could have set some bindings in an invalid state, this will check if some of them has to be recreated
Returns :
void
|
| Private registerContextMenuActions | ||||||
registerContextMenuActions(ctxMenu: ContextMenuManager)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2533
|
||||||
|
Enable the contextMenu actions to be displayed when the user perform an action Creates dinamically a new instance of XamContextMenu to be displayed in the screen
Parameters :
Returns :
void
|
| Protected registerDomEventListenerOnElement |
registerDomEventListenerOnElement(eventName: string, handler: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2316
|
|
Registers a DOM handler on the current element
Returns :
void
|
| Protected registerHandler | |||||||||
registerHandler(event: SubscriptionEvent<void>, arrowHandler: (s: any,a: any) => void)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2298
|
|||||||||
|
Register arrow handler into the given
Parameters :
Returns :
void
|
| Protected registerMouseEvents |
registerMouseEvents()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2272
|
|
Registers mouse events if required
Returns :
void
|
| Protected registerObservers | ||||||||||||
registerObservers(emitter: EventEmitter
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2252
|
||||||||||||
|
Register observers from the given
Parameters :
Returns :
void
|
| Private registerToolTip | |||||||||
registerToolTip(element: ElementRef
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2607
|
|||||||||
|
Registers a tooltip to a component
Parameters :
Returns :
void
|
| Private removeModelProxyHandlers |
removeModelProxyHandlers()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2738
|
|
Clean up the handlers when the component is destroyed
Returns :
void
|
| Private setComponentForDirectives |
setComponentForDirectives()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2512
|
|
Sets an internal reference through the element ref to access the component in a directive
Returns :
void
|
| Protected setPendingPropertyValue |
setPendingPropertyValue(property: string, value: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2336
|
|
Stores the pending property values for instance attach properties. Which will be applied when the model is available
Returns :
void
|
| setupDependencyComponents | ||||||
setupDependencyComponents(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1612
|
||||||
|
Adds the references to the dependency components
Parameters :
Returns :
void
|
| setupModel | ||||||
setupModel(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1559
|
||||||
|
Syncs the modelProxy with model
Parameters :
Returns :
void
void |
| Private syncToolTip | ||||||
syncToolTip(tooltip: ToolTipModel)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2587
|
||||||
|
Updates the tooltip associated to a component
Parameters :
Returns :
void
|
| Private syncValidationError | ||||||
syncValidationError(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2766
|
||||||
|
Syncs validation information with component properties
Parameters :
Returns :
void
|
| Private tabSelectionSubscription |
tabSelectionSubscription()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2471
|
|
Subscribe to the tabhandler event if Required When the component is inside a tab control it should trigger the load event every time the tab is selected
Returns :
void
|
| trackByFn | ||||||||||||
trackByFn(index: any, item: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1904
|
||||||||||||
|
Function used by Angular to track elements in the ngFor directive. We use the GUID property to compare elements.
Parameters :
Returns :
any
{*} -return the model or object itself |
| Private unregisterToolTip | ||||||
unregisterToolTip(element: ElementRef
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2719
|
||||||
|
Unregisters a tooltip to a component
Parameters :
Returns :
void
|
| Private updateSizePropertiesForActualSizeChange | ||||||||
updateSizePropertiesForActualSizeChange(element: Element)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2421
|
||||||||
|
Updates the size properties of the component based on the initial size change
Parameters :
Returns :
void
|
| validatesLoadingFlag |
validatesLoadingFlag()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1519
|
|
Validates loading flag for components outside current tab index TabIndexService should be only tabItem provider, and when currentTabId is different from selectedTab IsFirstTimeLoad is set to false because tabService is going to be one in charge to trigger only one time when tab changes.
Returns :
void
|
| widthCalc |
widthCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1953
|
|
Applies the width CSS value
Returns :
any
|
| widthDefaultStyle |
widthDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1926
|
|
Calculates the auto width value
Returns :
string
{string} |
| Protected clearButtonRef |
Type : HTMLElement
|
|
Holds a reference for the ClearSelectionButton |
| Protected dataProviderService |
Type : DataProviderService
|
|
Reference to the data provider service that enables the virtual scrolling mode |
| deleteKeyPressed |
Default value : false
|
|
This flag determinate when the user type a delete key, to avoid navigating. |
| dropDown |
Type : IgxDropDownComponent
|
Decorators :
@ViewChild('dropDown')
|
|
Reference to the igx-dropdown component |
| dropDownClosed |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter. Dropdown closed event. |
| dropDownOpened |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter. Dropdown opened event. |
| filterTimer |
Type : null
|
Default value : null
|
|
keep the timer for the readOnly property, to reset the search text |
| forceElementSynchronization |
Default value : false
|
Decorators :
@Input()
|
|
Force synchronization on first open |
| forceTextUpdate |
Default value : false
|
|
Flag to force text update. |
| input |
Type : ElementRef<HTMLInputElement>
|
Decorators :
@ViewChild('input')
|
|
Reference to the input element |
| inputContainerClasses |
Type : string
|
Default value : 'chromes_buttonChrome'
|
|
Custom classes binding to apply to the border and the button depending on the current visual state of the control |
| inputIconClasses |
Type : string
|
Default value : 'control-button-normal'
|
| inputSpan |
Type : ElementRef
|
Decorators :
@ViewChild('inputSpan')
|
|
Reference to the input span element |
| internalValueChanging |
Type : boolean
|
|
Flag to know if internal value update should be ignored. |
| isDropDownOpen |
Default value : false
|
|
Internal flag to know if dropdown component is open |
| isInitialized |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:457
|
|
Flag to know if the component is ready to render |
| isResetingFilter |
Default value : false
|
|
Flag to determine if the filter with the readOnly should be cleared |
| itemHeight |
Type : number
|
Default value : 48
|
|
Item Height Used for virtual scrolling |
| itemsToRender |
Type : []
|
Default value : []
|
|
Collection of components to render. |
| itemToHighlight |
Type : any
|
|
Store the item to be highlight when the radcombo has an items panel. |
| Protected loading |
Default value : false
|
|
Flag to indicate a load indicator when the combobox is changing from one page to another |
| mainContainer |
Type : ElementRef<HTMLElement>
|
Decorators :
@ViewChild('mainContainer')
|
|
Reference to the main container div |
| model |
Type : RadComboBoxModel
|
Decorators :
@Input()
|
|
Object with properties and events for the RadComboBoxComponent. |
| Protected modelProxy |
Type : RadComboBoxModel
|
Default value : ModelProxy.create<RadComboBoxModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:467
|
|
ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings. |
| Protected numberOfItemsFromEndBeforeFetchingMore |
Type : number
|
Default value : 10
|
|
Number of elements from end before trying to load more on the screen |
| onFocus |
Default value : false
|
| onMouseOver |
Default value : false
|
|
Control state variables |
| Private onSyncToUISelectedItem |
Default value : false
|
|
Flag to avoid unnecessary actions |
| Private overlayService |
Type : IgxOverlayService
|
|
Reference to the overlay service, used to display the dropDown |
| overlaySettingsAuto |
Type : any
|
|
Settings object for dropdown overlay |
| radComboBoxComponent |
Type : RadComboBoxComponent
|
Decorators :
@ViewChild(RadComboBoxComponent)
|
|
Gets the current RadComboBoxComponent if it is an inherited Component |
| Protected radComboBoxItemsPanel |
Type : RadComboBoxItemsPanelComponent
|
Decorators :
@ContentChild(RadComboBoxItemsPanelComponent)
|
|
Template elements reference |
| radComboBoxItemTemplate |
Type : TemplateRef<any>
|
Decorators :
@ContentChild('itemTemplate')
|
|
Template elements reference |
| searchFilterText |
Type : string
|
Default value : ''
|
|
variable use keep the input text when the control isReadOnly. |
| selectionChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter. SelectionChanged event. |
| Protected stackPanelComponent |
Type : StackPanelComponent
|
Decorators :
@ViewChild(StackPanelComponent)
|
|
Stack panel component used to display the items if it is on panel mode |
| stackPanelModel |
Type : StackPanelModel
|
|
Used for displaying an ItemsPanel |
| Private textFilterValue |
Type : string
|
Default value : ''
|
|
Text used to filter combo box options. |
| Protected textSearchModePipe |
Default value : new TextSearchModePipe()
|
|
Instance of TextSearchModePipe. Used for virtual scrolling |
| virtualizationThreshold |
Type : number
|
Default value : 50
|
|
Threshold number to use to decide when virtualization will be enabled |
| actualSizeCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:481
|
|
Flag to know if the Angular event was called |
| afterContentInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:465
|
|
Flag to know if the Angular event was called |
| afterViewCheckedCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:473
|
|
Flag to know if the Angular event was called |
| afterViewInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:457
|
|
Flag to know if the Angular event was called |
| Private bindingValidationCallback |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:618
|
|
Callback for binding validation |
| bindingValidationError |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:114
|
|
output to emit the new value of the bindingValidationError event |
| Private cdRefInjection |
Type : ChangeDetectorRef
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:659
|
|
Change Detector Reference for the component |
| Private changeDetectionTimer |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:668
|
|
A timer to debounce changedetection actions |
| Protected changeDetectorNotifier |
Type : ChangeDectionNotifierService
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:576
|
|
Change Detection Notifier Service instace. |
| Private contextMenuUnlistener |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:676
|
|
Context Menu event unlisten action. |
| Private ctxMenuInstance |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:630
|
|
Reference to the ctxMenuInstance |
| customCssClasses |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('class')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| Private customTooltipInstance |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:641
|
|
Reference to the custom tooltip instance this is used to render a popup with custom elements used when the content value is not a string |
| dataGridRowHeight |
Type : number
|
Default value : 22
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:507
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
| Protected domHandlerUnListeners |
Type : Array<void>
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:567
|
|
A collection (possible undefined) of DOM unlistener functions . That is, functions to de register handlers |
| fireLoadedSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:449
|
|
Flag to control load event for components inside tab control |
| focusable |
Default value : false
|
Decorators :
@HostBinding('class.focusable')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| Protected handlersToUnregister |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:558
|
|
handlers to unregister when the component is destroyed |
| hasDefinedCursor |
Default value : false
|
Decorators :
@HostBinding('class.hasDefinedCursor')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| hostFontFamily |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-family')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| hostFontSize |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-size')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| hostFontStyle |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-style')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| hostFontStyles |
Default value : false
|
Decorators :
@HostBinding('class.defaultFontStyles')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| hostFontWeight |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-weight')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| hostHeight |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.height')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| hostHozCenter |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| hostHozLeft |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-left')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| hostHozRight |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-right')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| hostHozSelfAlign |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-selfalign')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:380
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
| hostHozStretch |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| hostMaxHeight |
Type : number
|
Decorators :
@HostBinding('style.max-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| hostMaxWidth |
Type : number
|
Decorators :
@HostBinding('style.max-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| hostMinHeight |
Type : number
|
Decorators :
@HostBinding('style.min-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| hostMinWidth |
Type : number
|
Decorators :
@HostBinding('style.min-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| hostOpacity |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.opacity')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| hostVerBottom |
Default value : false
|
Decorators :
@HostBinding('class.vertical-bottom')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| hostVerCenter |
Default value : false
|
Decorators :
@HostBinding('class.vertical-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| hostVerStretch |
Default value : false
|
Decorators :
@HostBinding('class.vertical-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| hostVerTop |
Default value : false
|
Decorators :
@HostBinding('class.vertical-top')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| hostVisibility |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.display')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| hostWidth |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.width')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| hostZIndex |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.z-index')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| isInternalInherit |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:515
|
|
Flag which indicates that the component is an internal use for inheritance |
| layoutUpdated |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:140
|
|
Output to emit when then component's layout is updated. |
| loaded |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:123
|
|
Output to emit when then component is loaded. |
| Protected modelChangeRef |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:601
|
|
Contains the reference of the function added for handle the model's change |
| mouseEnter |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:157
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
| mouseLeave |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:167
|
|
Event Emitter Called in the mouseLeave handler |
| Private mouseLeaveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:684
|
|
Mouse over event for tooltip unlisten action. |
| mouseLeftButtonUp |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:147
|
|
MouseLeftButtonUp event Emitter. |
| Private mouseMoveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:701
|
|
Mouse move event for tooltip unlisten action. This should have a short lifespan, as much as it takes for the tooltip to be shown |
| Private mouseOverTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:692
|
|
Mouse over event for tooltip unlisten action. |
| Protected ngZone |
Type : NgZone
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:585
|
|
Angular´s NgZone accessor |
| Protected pendingDependencyPropertyValue |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:549
|
|
A collection of pending dependency properties values to assign to the model |
| Protected pendingSetValues |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:540
|
|
A collection of pending values to assign to the model |
| Protected renderer2 |
Type : Renderer2
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:594
|
|
Angular´s Renderer2 |
| sizeChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:132
|
|
Output to emit when then component size is changed. |
| Private sizeChangedPendingTimeout |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:610
|
|
Timeout id for triggering the sizechanged event |
| spellCheck |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:186
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
| staticContent |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:432
|
|
cache the static content of the control to validate if the current data is not equals. |
| tabSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:440
|
|
TabSelection event subscription |
| Private tooltipMousePosition |
Type : DOMRect
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:710
|
|
To track the position of the mouse while the tooltip is being displayed |
| Private toolTipTimeout |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:650
|
|
To control the timer to show the tooltip |
| useCss |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:177
|
|
Determines if the component uses CSS height/width values, instead of inputs |
| validationError |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:488
|
|
Property to set the validationError class in the component |
| validationErrorMessage |
Type : string
|
Default value : ''
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:496
|
|
Property for specifying validation error message |
| background | ||||||
setbackground(value: string | BindingInfo)
|
||||||
|
Property used to save the background.
Parameters :
Returns :
void
|
| backgroundColor | ||||||
getbackgroundColor()
|
||||||
|
Gets the Background from the model.
Returns :
string | undefined
|
||||||
setbackgroundColor(value: string | undefined)
|
||||||
|
Sets the Background for the model.
Parameters :
Returns :
void
|
| shouldResetFilteringValue | ||||||
getshouldResetFilteringValue()
|
||||||
|
Gets ShouldResetFilteringValue model property
Returns :
boolean
|
||||||
setshouldResetFilteringValue(value: boolean)
|
||||||
|
Sets ShouldResetFilteringValue model property
Parameters :
Returns :
void
|
| virtualization |
getvirtualization()
|
|
Flag to indicate virtualization will be used to render the items |
| canKeyboardNavigationSelectItems | ||||||
getcanKeyboardNavigationSelectItems()
|
||||||
|
Gets canKeyboardNavigationSelectItems property of the RadComboBoxComponent.
Returns :
boolean | BindingInfo
|
||||||
setcanKeyboardNavigationSelectItems(value: boolean | BindingInfo)
|
||||||
|
Sets canKeyboardNavigationSelectItems property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| clearSelectionButtonVisibility | ||||||
getclearSelectionButtonVisibility()
|
||||||
|
Gets clearSelectionButtonVisibility property of the RadComboBoxComponent.
Returns :
boolean
|
||||||
setclearSelectionButtonVisibility(value: boolean)
|
||||||
|
Sets clearSelectionButtonVisibility property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| clearSelectionButtonContent | ||||||
getclearSelectionButtonContent()
|
||||||
|
Gets clearSelectionButtonContent property of the RadComboBoxComponent.
Returns :
string | BindingInfo
|
||||||
setclearSelectionButtonContent(value: string | BindingInfo)
|
||||||
|
Sets clearSelectionButtonContent property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| displayMemberPath | ||||||
getdisplayMemberPath()
|
||||||
|
Gets the name or path of the property that is displayed for each data item.
Returns :
any
|
||||||
setdisplayMemberPath(value: any)
|
||||||
|
Sets the name or path of the property that is displayed for each data item.
Parameters :
Returns :
void
|
| isEditable | ||||||
getisEditable()
|
||||||
|
Gets isEditable property of the RadComboBoxComponent.
Returns :
boolean | BindingInfo
|
||||||
setisEditable(value: boolean | BindingInfo)
|
||||||
|
Sets isEditable property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| isFilteringEnabled | ||||||
getisFilteringEnabled()
|
||||||
|
Gets isFilteringEnabled property of the RadComboBoxComponent.
Returns :
boolean
|
||||||
setisFilteringEnabled(value: boolean)
|
||||||
|
Sets isFilteringEnabled property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| isReadOnly | ||||||
getisReadOnly()
|
||||||
|
Gets isReadOnly property of the RadComboBoxComponent.
Returns :
boolean | BindingInfo
|
||||||
setisReadOnly(value: boolean | BindingInfo)
|
||||||
|
Sets isReadOnly property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| items |
getitems()
|
|
Returns current model items.
Returns :
any
|
| selectedIndex | ||||||
getselectedIndex()
|
||||||
|
Gets the selected index of the combobox control
Returns :
number | BindingInfo
|
||||||
setselectedIndex(value: number | BindingInfo)
|
||||||
|
Sets the selected index of the combobox control
Parameters :
Returns :
void
|
| itemsPanel | ||||||
getitemsPanel()
|
||||||
|
Returns the template.
Returns :
TemplateRef<any>
|
||||||
setitemsPanel(value: TemplateRef
|
||||||
|
Template reference to be used as the RadComboBox.ItemsPanel If you provide this input, it will overwrite the exist section.
Parameters :
Returns :
void
|
| itemsSource | ||||||
getitemsSource()
|
||||||
|
Gets ItemsSource property of the RadComboBoxComponent.
Returns :
any
|
||||||
setitemsSource(value: any)
|
||||||
|
Sets ItemsSource property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| maxDropDownHeight | ||||||
getmaxDropDownHeight()
|
||||||
|
Gets MaxDropDownHeight property of the RadComboBoxComponent.
Returns :
any
|
||||||
setmaxDropDownHeight(value: any)
|
||||||
|
Sets MaxDropDownHeight property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| openDropDownOnFocus | ||||||
getopenDropDownOnFocus()
|
||||||
|
Gets openDropDownOnFocus property of the RadComboBoxComponent.
Returns :
boolean | BindingInfo
|
||||||
setopenDropDownOnFocus(value: boolean | BindingInfo)
|
||||||
|
Sets openDropDownOnFocus property of the RadComboBoxComponent.
Parameters :
Returns :
void
|
| selectedItem | ||||||
getselectedItem()
|
||||||
|
Gets selectedItem property of the RadComboBoxModel.
Returns :
any | BindingInfo
|
||||||
setselectedItem(value: any | BindingInfo)
|
||||||
|
Sets selectedItem property of the RadComboBoxModel.
Parameters :
Returns :
void
|
| selectedValue | ||||||
getselectedValue()
|
||||||
|
Gets selectedValue property of the RadComboBoxModel.
Returns :
any
|
||||||
setselectedValue(value: any)
|
||||||
|
Sets selectedValue property of the RadComboBoxModel.
Parameters :
Returns :
void
|
| selectedValuePath | ||||||
getselectedValuePath()
|
||||||
|
Gets selectedValuePath property of the RadComboBoxModel.
Returns :
any
|
||||||
setselectedValuePath(value: any)
|
||||||
|
Sets selectedValuePath property of the RadComboBoxModel.
Parameters :
Returns :
void
|
| text | ||||||
gettext()
|
||||||
|
Gets text property of the RadComboBoxModel.
Returns :
string | BindingInfo
|
||||||
settext(value: string | BindingInfo)
|
||||||
|
Sets text property of the RadComboBoxModel.
Parameters :
Returns :
void
|
| textSearchMode | ||||||
gettextSearchMode()
|
||||||
|
Gets textSearchMode property of the RadComboBoxComponent
Returns :
any
|
||||||
settextSearchMode(value: any)
|
||||||
|
Sets textSearchMode property of the RadComboBoxComponent
Parameters :
Returns :
void
|
| textFilter | ||||||
gettextFilter()
|
||||||
|
Gets the textFilter reference for RadComboBox and extended Components
Returns :
string
|
||||||
settextFilter(value: string)
|
||||||
|
Sets textFilter property of the RadComboBoxModel.
Parameters :
Returns :
void
|
| internalValue | ||||||
getinternalValue()
|
||||||
|
Gets internal text value
Returns :
string
|
||||||
setinternalValue(value: string)
|
||||||
|
Sets internal text value, also updates text model value and navigate to an item.
Parameters :
Returns :
void
|
| containsUIElements |
getcontainsUIElements()
|
|
Verifies if the items collections contains UIElements to be rendered
Returns :
boolean
|
| inputWidth |
getinputWidth()
|
|
Return the width of the input based on its content.
Returns :
string
|
| widthAuto |
getwidthAuto()
|
|
If the width is defined it should take all the available space, otherwise the width is set to auto.
Returns :
string
|
| widthIsNaN |
getwidthIsNaN()
|
|
Return if the width is NaN.
Returns :
boolean
|
| isContainerHorizontalStretch |
getisContainerHorizontalStretch()
|
|
Evaluate if the
Returns :
boolean
|
| getTextSuggestion |
getgetTextSuggestion()
|
|
Get text suggestion based on the current text
Returns :
any
|
import {
AfterContentInit,
AfterViewChecked,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
ElementRef,
EventEmitter,
HostListener,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
TemplateRef,
ViewChild,
} from '@angular/core';
import {
AngularComponentId,
BindingInfo,
ButtonModel,
ComponentId,
FrameworkElement,
HorizontalAlignment,
ModelProxy,
RadComboBoxModel,
SmColors,
smColorToCssColor,
SolidColorBrush,
StackPanelModel,
TextSearchMode,
} from '@mobilize/wms-framework';
import {
AbsoluteScrollStrategy,
AutoPositionStrategy,
IgxDropDownComponent,
IgxOverlayService,
} from 'igniteui-angular';
import { TextSearchModePipe } from '../../pipes/textsearchmode.pipe';
import { DataProviderService } from '../../services/data-provider.service';
import { Utils } from '../../utils/utilities';
import { BaseComponent } from '../base/base.component';
import { RadComboBoxItemsPanelComponent } from '../rad-combo-box-items-panel/rad-combo-box-items-panel.component';
import { StackPanelComponent } from '../stack-panel/stack-panel.component';
/**
* Angular Component for the RadComboBox Control.
*
* @export
* @class RadComboBoxComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterContentInit}
*/
@Component({
selector: 'wm-rad-combo-box',
templateUrl: './rad-combo-box.component.html',
styleUrls: ['./rad-combo-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [DataProviderService],
})
@ComponentId([AngularComponentId.radComboBox])
export class RadComboBoxComponent
extends BaseComponent
implements OnInit, AfterContentInit, AfterViewChecked, OnDestroy
{
/**
* Flag to avoid unnecessary actions
*
* @private
* @memberof RadComboBoxComponent
*/
private onSyncToUISelectedItem = false;
/**
* Reference to the overlay service, used to display the dropDown
*
* @private
* @type {IgxOverlayService}
* @memberof ComboBoxComponent
*/
private overlayService: IgxOverlayService;
/**
* Custom classes binding to apply to the border and the button depending on the current visual state of the control
*
* @memberof RadComboBoxComponent
*/
inputContainerClasses = 'chromes_buttonChrome';
inputIconClasses = 'control-button-normal';
/**
* Control state variables
*
* @memberof RadComboBoxComponent
*/
onMouseOver = false;
onFocus = false;
/**
* This property contains the relative index of the current displayed collection.
* For example, if you render 10 items for the comboBox, this property will be base on 0-9.
*
* @memberof RadComboBoxComponent
*/
IndexSelected = -1;
/**
* This flag determinate when the user type a delete key, to avoid navigating.
*
* @memberof RadComboBoxComponent
*/
deleteKeyPressed = false;
/**
* Listener to the mouse enter event to trigger visual state change animation
*
* @memberof RadComboBoxComponent
*/
@HostListener('mouseenter')
onMouseEnter() {
this.onMouseOver = true;
this.calcVisualState();
}
/**
* Listener to the mouse leave event to trigger visual state change animation
*
* @memberof RadComboBoxComponent
*/
@HostListener('mouseleave')
onMouseLeave() {
this.onMouseOver = false;
this.calcVisualState();
}
/**
* Listener of focusIn in the input nodes to trigger visual state change animation
*
* @memberof RadComboBoxComponent
*/
onFocusIn() {
this.onFocus = true;
this.calcVisualState();
}
/**
* Listener of focusOut in the input nodes to trigger visual state change animation
*
* @memberof RadComboBoxComponent
*/
onFocusOut() {
this.onFocus = false;
this.calcVisualState();
}
/**
* Given the current visual state of the control it calculates the custom classes to apply to animate the state
*
* @memberof RadComboBoxComponent
*/
calcVisualState(): void {
this.calcVisualAppearanceEditable();
if (this.isEnabled && this.isEditable) {
if (this.onMouseOver || this.onFocus) {
this.inputIconClasses = 'control-button-mouseover';
this.inputContainerClasses = 'control-outer-border-mouseover';
}
if (this.model?.IsDropDownOpen) {
this.inputIconClasses = 'control-button-pressed';
this.inputContainerClasses = 'control-outer-border-pressed';
}
}
if (this.isEnabled && !this.isEditable) {
if (this.onMouseOver || this.onFocus) {
this.inputIconClasses = 'control-button-mouseover';
this.inputContainerClasses = 'control-outer-mouseover';
}
if (this.model?.IsDropDownOpen) {
this.inputIconClasses = 'control-button-pressed';
this.inputContainerClasses = 'control-outer-pressed';
}
}
}
/**
* Obtain if radComboBox is Editable and apply styles according to his boolean value.
*
* @memberof RadComboBoxComponent
*/
calcVisualAppearanceEditable(): void {
if (this.isEditable) {
this.inputContainerClasses = 'controls-outer-border-normal';
this.inputIconClasses = 'control-button-normal';
} else {
this.inputContainerClasses = 'chromes_buttonChrome';
this.inputIconClasses = 'control-button-normal';
}
}
/**
* Object with properties and events for the RadComboBoxComponent.
*
* @type {RadComboBoxModel}
* @memberof RadComboBoxComponent
*/
@Input() model: RadComboBoxModel;
/**
* Property used to save the background.
*
* @memberof RadComboBoxComponent
*/
@Input()
set background(value: string | BindingInfo) {
if (
!this.checkAndRegisterCompatibilityBinding(
ButtonModel.BackgroundProperty,
value
)
) {
this.modelProxy.Background = Utils.createSolidBrush(value);
}
}
/**
* Sets the Background for the model.
*
* @memberof RadComboBoxComponent
*/
set backgroundColor(value: string | undefined) {
this.model.Background = Utils.createSolidBrush(value);
}
/**
* Gets the Background from the model.
*
* @type {string}
* @memberof ButtonComponent
*/
get backgroundColor(): string | undefined {
if (this.model.Background) {
return smColorToCssColor(
(this.model.Background as SolidColorBrush).Color
);
}
return undefined;
}
/**
* Force synchronization on first open
*
* @memberof RadComboBoxComponent
*/
@Input()
forceElementSynchronization = false;
/**
* Sets ShouldResetFilteringValue model property
*
* @memberof RadComboBoxComponent
*/
@Input()
set shouldResetFilteringValue(value: boolean) {
this.modelProxy.ShouldResetFilteringValue = value;
}
/**
* Gets ShouldResetFilteringValue model property
*
* @memberof RadComboBoxComponent
*/
get shouldResetFilteringValue(): boolean {
return this.model.ShouldResetFilteringValue;
}
/**
* Gets the current RadComboBoxComponent if
* it is an inherited Component
*
* @type {IgxGridComponent}
* @memberof RadComboBoxComponent
*/
@ViewChild(RadComboBoxComponent)
radComboBoxComponent: RadComboBoxComponent;
/**
* Event Emitter.
* Dropdown closed event.
*
* @type {EventEmitter<RadComboBoxModel>}
* @memberof RadComboBoxComponent
*/
@Output() dropDownClosed: EventEmitter<{ sender: RadComboBoxModel; e: any }> =
new EventEmitter();
/**
* Event Emitter.
* Dropdown opened event.
*
* @type {EventEmitter<RadComboBoxModel>}
* @memberof RadComboBoxComponent
*/
@Output() dropDownOpened: EventEmitter<{ sender: RadComboBoxModel; e: any }> =
new EventEmitter();
/**
*
* Event Emitter.
* SelectionChanged event.
*
* @type {EventEmitter<any>}
* @memberof RadComboBoxComponent
*/
@Output() selectionChanged: EventEmitter<any> = new EventEmitter();
/**
* Reference to the main container div
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@ViewChild('mainContainer')
mainContainer: ElementRef<HTMLElement>;
/**
* Reference to the igx-dropdown component
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@ViewChild('dropDown')
dropDown: IgxDropDownComponent;
/**
* Reference to the input span element
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@ViewChild('inputSpan')
inputSpan: ElementRef;
/**
* Reference to the input element
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@ViewChild('input')
input: ElementRef<HTMLInputElement>;
/**
* Settings object for dropdown overlay
*
* @type {any}
* @memberof RadComboBoxComponent
*/
overlaySettingsAuto: any;
/**
* Internal flag to know if dropdown component is open
*
* @type {any}
* @memberof RadComboBoxComponent
*/
isDropDownOpen = false;
/**
* Store the item to be highlight when the radcombo has an items panel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
itemToHighlight: any;
/**
* Template elements reference
*
* @type {TemplateRef<any>}
* @memberof RadComboBoxComponent
*/
@ContentChild('itemTemplate')
radComboBoxItemTemplate: TemplateRef<any>;
/**
* Template elements reference
*
* @type {RadComboBoxItemsPanelComponent}
* @memberof RadComboBoxComponent
*/
@ContentChild(RadComboBoxItemsPanelComponent)
protected radComboBoxItemsPanel: RadComboBoxItemsPanelComponent;
/**
* Stack panel component used to display the
* items if it is on panel mode
*
* @protected
* @type {StackPanelComponent}
* @memberof RadComboBoxComponent
*/
@ViewChild(StackPanelComponent)
protected stackPanelComponent: StackPanelComponent;
/**
* Text used to filter combo box options.
*
* @memberof RadComboBoxComponent
*/
private textFilterValue = '';
/**
* Flag to force text update.
*
* @protected
* @memberof RadComboBoxComponent
*/
forceTextUpdate = false;
/**
* Collection of components to render.
*
* @protected
* @memberof RadComboBoxComponent
*/
itemsToRender = [];
/**
* Flag to know if the component is ready to render
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
isInitialized = false;
/**
* ModelProxy is a copy of the model,
* used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {RadComboBoxModel}
* @memberof RadComboBoxComponent
*/
protected modelProxy: RadComboBoxModel =
ModelProxy.create<RadComboBoxModel>();
/**
* Flag to indicate a load indicator when the combobox
* is changing from one page to another
*
* @protected
* @memberof RadComboBoxComponent
*/
protected loading = false;
/**
* Number of elements from end before trying to load more on the screen
*
* @protected
* @memberof RadComboBoxComponent
*/
protected numberOfItemsFromEndBeforeFetchingMore = 10;
/**
* Item Height
* Used for virtual scrolling
*
* @protected
* @memberof RadComboBoxComponent
*/
itemHeight = 48;
/**
* Flag to indicate virtualization will be used to render the items
*
* @protected
* @memberof RadComboBoxComponent
*/
get virtualization() {
return this.itemsToRender?.length > this.virtualizationThreshold;
}
/**
* Threshold number to use to decide when virtualization will be enabled
*
* @memberof RadComboBoxComponent
*/
virtualizationThreshold = 50;
/**
* Used for displaying an ItemsPanel
*
* @protected
* @memberof RadComboBoxComponent
*/
stackPanelModel: StackPanelModel;
/**
* Holds a reference for the ClearSelectionButton
*
* @protected
* @memberof RadComboBoxComponent
*/
protected clearButtonRef: HTMLElement;
/**
* Reference to the data provider service
* that enables the virtual scrolling mode
*
* @protected
* @type {DataProviderService}
* @memberof RadComboBoxComponent
*/
protected dataProviderService: DataProviderService;
/**
* Instance of TextSearchModePipe.
*
* Used for virtual scrolling
*
* @protected
* @memberof RadComboBoxComponent
*/
protected textSearchModePipe = new TextSearchModePipe();
/**
* Creates an instance of RadComboBoxComponent.
*
* @param {Injector} injector
* @param {RadComboBoxModel} [injectedModel=null]
* @memberof RadComboBoxComponent
*/
/* istanbul ignore next */
public constructor(
private injector: Injector,
@Optional() protected injectedModel: RadComboBoxModel = null,
private cdRef: ChangeDetectorRef,
@Optional() private dataService: DataProviderService = undefined,
@Optional() protected element: ElementRef = null
) {
super(cdRef, injector);
this.overlayService = injector.get(IgxOverlayService);
this.model = injectedModel;
this.dataProviderService = dataService;
}
/**
* Angular lifecycle hook.
*
* @memberof RadComboBoxComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new RadComboBoxModel();
this.setupModel(this.model);
super.ngOnInit();
this.registerObservers(
this.selectionChanged,
this.model,
this.model.SelectionChanged
);
this.registerObservers(
this.dropDownClosed,
this.model,
this.model.DropDownClosed
);
this.overlaySettingsAuto = {
positionStrategy: new AutoPositionStrategy(),
scrollStrategy: new AbsoluteScrollStrategy(),
modal: false,
closeOnEscape: false,
target: {},
};
this.model.items.change.addHandler(this.childrenCountChangeHandler, this);
}
/**
* Determines when all properties are ready and set renderingFlag true.
*
* @memberof RadComboBoxComponent
*/
ngAfterContentInit(): void {
super.ngAfterContentInit();
this.syncModel();
this.assignTextSelectedItem();
this.isInitialized = true;
this.detectChangesAction();
}
/**
* added for focusing the input when the focus is lost when the data is loaded
*
* @memberof RadComboBoxComponent
*/
ngAfterViewChecked(): void {
super.ngAfterViewChecked();
if (this.isEnabled && this.onFocus) {
this.input?.nativeElement.focus();
}
}
/**
* Clean up code of the component
*
* @memberof RadComboBoxComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.model.SelectionChanged.removeAllHandlers();
this.model.DropDownOpened.removeAllHandlers();
this.model.items?.change.removeHandler(
this.childrenCountChangeHandler,
this
);
}
/**
* Listener to changes in the count of items in the model
*
* @param {string} name
* @memberof RadComboBoxComponent
*/
childrenCountChangeHandler(name: string) {
/* istanbul ignore else */
if ('Count' === name) {
this.updateItems();
}
}
/**
* Update internal collection of items
*
* @memberof RadComboBoxComponent
*/
updateItems(): void {
this.syncItemsToRender();
if (this.stackPanelModel != null) {
this.forceTextUpdate = true;
this.detectChanges();
this.forceTextUpdate = false;
if (
this.itemsToRender.length &&
!this.itemsToRender.includes(this.selectedItem)
)
this.selectedItem = null;
const items = !this.forceElementSynchronization
? this.searchItemsPipe(this.textFilter, this.textSearchMode)
: this.itemsToRender;
this.assignItemsPanelItems(items);
}
}
/**
* Sets canKeyboardNavigationSelectItems property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set canKeyboardNavigationSelectItems(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.CanKeyboardNavigationSelectItemsProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.CanKeyboardNavigationSelectItems = value;
}
}
/**
* Gets canKeyboardNavigationSelectItems property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get canKeyboardNavigationSelectItems(): boolean | BindingInfo {
return this.model.CanKeyboardNavigationSelectItems;
}
/**
* Sets clearSelectionButtonVisibility property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set clearSelectionButtonVisibility(value: boolean) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.ClearSelectionButtonVisibilityProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.ClearSelectionButtonVisibility = value;
}
}
/**
* Gets clearSelectionButtonVisibility property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get clearSelectionButtonVisibility(): boolean {
return this.model.ClearSelectionButtonVisibility;
}
/**
* Sets clearSelectionButtonContent property of the RadComboBoxComponent.
*
* @type {string | BindingInfo}
* @memberof RadComboBoxComponent
*/
@Input()
set clearSelectionButtonContent(value: string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.ClearSelectionButtonContentProperty,
value
) &&
typeof value === 'string'
) {
this.modelProxy.ClearSelectionButtonContent = value;
}
}
/**
* Gets clearSelectionButtonContent property of the RadComboBoxComponent.
*
* @type {string | BindingInfo}
* @memberof RadComboBoxComponent
*/
get clearSelectionButtonContent(): string | BindingInfo {
return this.model.ClearSelectionButtonContent;
}
/**
* Sets the name or path of the property that is displayed for each data item.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set displayMemberPath(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.IsEditableProperty,
value
) &&
typeof value === 'string'
) {
this.modelProxy.DisplayMemberPath = value;
}
}
/**
* Gets the name or path of the property that is displayed for each data item.
*
* @readonly
* @type {any}
* @memberof RadComboBoxComponent
*/
get displayMemberPath(): any {
return this.model.DisplayMemberPath;
}
/**
* Sets isEditable property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set isEditable(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.IsEditableProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.IsEditable = value;
}
}
/**
* Gets isEditable property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get isEditable(): boolean | BindingInfo {
return this.model.IsEditable;
}
/**
* Sets isFilteringEnabled property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set isFilteringEnabled(value: boolean) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.IsFilteringEnabledProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.IsFilteringEnabled = value;
}
}
/**
* Gets isFilteringEnabled property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get isFilteringEnabled(): boolean {
return this.model.IsFilteringEnabled;
}
/**
* Sets isReadOnly property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set isReadOnly(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.IsReadOnlyProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.IsReadOnly = value;
}
}
/**
* Gets isReadOnly property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get isReadOnly(): boolean | BindingInfo {
return this.model.IsReadOnly;
}
/**
* Returns current model items.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get items(): any {
return this.model.items;
}
/**
* Gets the selected index of the combobox control
*
* @type {(number | BindingInfo)}
* @memberof RadComboBoxComponent
*/
@Input()
get selectedIndex(): number | BindingInfo {
return this.model.SelectedIndex;
}
/**
* Sets the selected index of the combobox control
*
* @memberof RadComboBoxComponent
*/
set selectedIndex(value: number | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.SelectedIndexProperty,
value
)
) {
this.modelProxy.SelectedIndex = value as number;
}
}
/**
* Template reference to be used as the RadComboBox.ItemsPanel
* If you provide this input, it will overwrite the exist section.
*
* @type {TemplateRef<any>}
* @memberof RadComboBoxComponent
*/
@Input()
set itemsPanel(value: TemplateRef<any>) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.ItemsPanelProperty,
value
)
) {
this.modelProxy.ItemsPanel = value;
}
}
/**
* Returns the template.
*
* @returns TemplateRef
* @memberof RadComboBoxComponent
*/
get itemsPanel(): TemplateRef<any> {
return this.model.ItemsPanel;
}
/**
* Sets ItemsSource property of the RadComboBoxComponent.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set itemsSource(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.ItemsSourceProperty,
value
)
) {
this.modelProxy.ItemsSource = value;
}
}
/**
* Gets ItemsSource property of the RadComboBoxComponent.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get itemsSource(): any {
return this.model.ItemsSource;
}
/**
* Sets MaxDropDownHeight property of the RadComboBoxComponent.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set maxDropDownHeight(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.MaxDropDownHeightProperty,
value
)
) {
this.modelProxy.MaxDropDownHeight = value;
}
}
/**
* Gets MaxDropDownHeight property of the RadComboBoxComponent.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get maxDropDownHeight(): any {
return this.model.MaxDropDownHeight;
}
/**
* Sets openDropDownOnFocus property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
@Input()
set openDropDownOnFocus(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.OpenDropDownOnFocusProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.OpenDropDownOnFocus = value;
}
}
/**
* Gets openDropDownOnFocus property of the RadComboBoxComponent.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
get openDropDownOnFocus(): boolean | BindingInfo {
return this.model.OpenDropDownOnFocus;
}
/**
* Sets selectedItem property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set selectedItem(value: any | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.SelectedItemProperty,
value
)
) {
this.modelProxy.SelectedItem = value;
}
}
/**
* Gets selectedItem property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get selectedItem(): any | BindingInfo {
return this.model.SelectedItem;
}
/**
* Sets selectedValue property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set selectedValue(value: any) {
// Force update of text on input element when user selects the same selected value.
/* istanbul ignore else */
if (this.isInitialized) {
this.forceTextUpdate = true;
this.detectChangesAction();
this.forceTextUpdate = false;
}
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.SelectedValueProperty,
value
)
) {
this.modelProxy.SelectedValue = value;
}
}
/**
* Gets selectedValue property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get selectedValue(): any {
return this.model.SelectedValue;
}
/**
* Sets selectedValuePath property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
@Input()
set selectedValuePath(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.TextProperty,
value
) &&
typeof value === 'string'
) {
this.modelProxy.SelectedValuePath = value;
}
}
/**
* Gets selectedValuePath property of the RadComboBoxModel.
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get selectedValuePath(): any {
return this.model.SelectedValuePath;
}
/**
* Sets text property of the RadComboBoxModel.
*
* @type {string}
* @memberof RadComboBoxComponent
*/
@Input()
set text(value: string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.TextProperty,
value
) &&
typeof value === 'string'
) {
this.modelProxy.Text = value;
}
}
/**
* Gets text property of the RadComboBoxModel.
*
* @memberof RadComboBoxComponent
*/
get text(): string | BindingInfo {
return this.model.Text;
}
/**
* Sets textSearchMode property of the RadComboBoxComponent
*
* @type {string | TextSearchMode}
* @memberof RadComboBoxComponent
*/
@Input()
set textSearchMode(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
RadComboBoxModel.TextSearchModeProperty,
value
)
) {
if (value === 'Contains' || value === TextSearchMode.Contains) {
this.modelProxy.TextSearchMode = TextSearchMode.Contains;
} else if (
value === 'ContainsCaseSensitive' ||
value === TextSearchMode.ContainsCaseSensitive
) {
this.modelProxy.TextSearchMode = TextSearchMode.ContainsCaseSensitive;
} else if (
value === 'StartsWithCaseSensitive' ||
value === TextSearchMode.StartsWithCaseSensitive
) {
this.modelProxy.TextSearchMode = TextSearchMode.StartsWithCaseSensitive;
} else {
this.modelProxy.TextSearchMode = TextSearchMode.StartsWith;
}
}
}
/**
* Gets textSearchMode property of the RadComboBoxComponent
*
* @type {string | TextSearchMode}
* @memberof RadComboBoxComponent
*/
get textSearchMode(): any {
return this.model.TextSearchMode;
}
/**
* Sets textFilter property of the RadComboBoxModel.
*
* @type {string}
* @memberof RadComboBoxComponent
*/
set textFilter(value: string) {
this.textFilterValue = value;
}
/**
* Gets the textFilter reference
* for RadComboBox and extended Components
*
* @readonly
* @type {string}
* @memberof RadComboBoxComponent
*/
get textFilter(): string {
return this.radComboBoxComponent
? this.radComboBoxComponent.textFilterValue
: this.textFilterValue;
}
/**
* Flag to know if internal value update should be ignored.
*
* @type {boolean}
* @memberof RadComboBoxComponent
*/
internalValueChanging: boolean;
/**
* Sets internal text value, also updates text model value and navigate to an item.
*
* @type {string}
* @memberof RadComboBoxComponent
*/
set internalValue(value: string) {
this.model.InternalValue = value;
if (this.internalValueChanging) {
this.internalValueChanging = false;
return;
}
this.textFilter = value;
this.text = value;
this.unassignedSelectedValue(value);
this.resetFilter();
this.navigateItemHandler();
}
/**
* Gets internal text value
*
* @type {string}
* @memberof RadComboBoxComponent
*/
get internalValue(): string {
return this.model.InternalValue;
}
/**
* Update model change
*
* @param {string} [name]
* @memberof RadComboBoxComponent
*/
modelChangeHandler(name?: string) {
if (name === 'ItemsPanel') {
this.stackPanelModel = this.stackPanelModel ?? new StackPanelModel();
this.assignItemsPanelItems(this.itemsToRender);
this.model.items.change.removeHandler(
this.childrenCountChangeHandler,
this
);
this.model.items.change.addHandler(this.childrenCountChangeHandler, this);
} else if (name === 'ItemsSource') {
this.updateItems();
}
if (
name === 'ItemTemplate' &&
this.model.ItemTemplate instanceof TemplateRef
) {
this.radComboBoxItemTemplate = this.model.ItemTemplate;
}
if (name === 'Text') {
this.assignTextSelectedItem();
}
if (name === 'IsDropDownOpen') {
if (
this.dropDown &&
this.constructor?.name === 'RadComboBoxComponent' &&
this.isDropDownOpen !== this.model.IsDropDownOpen
) {
this.overlaySettingsAuto.target = this.inputSpan.nativeElement;
this.overlaySettingsAuto.excludeFromOutsideClick = [
this.inputSpan.nativeElement,
];
this.dropDown.toggle(this.overlaySettingsAuto);
}
}
if (name === 'IsEnabled') {
this.calcVisualState();
}
if (name === 'SelectedItem') {
this.syncTextWithSelectedItem();
}
if (name === 'SelectedIndex') {
this.clearDropDownSelection();
}
if (name === 'IsEditable') {
this.calcVisualAppearanceEditable();
}
super.modelChangeHandler(name);
}
/**
* Assign Text Selected item
*
* @memberof RadComboBoxComponent
*/
assignTextSelectedItem(): void {
/* istanbul ignore else */
if (this.model.Text && this.model.Text !== this.textFilter) {
this.internalValueChanging = true;
this.internalValue = this.model.Text;
if (!this.isEnabled) return;
// Filter for non-empty text only
const results = this.searchItemsPipe(this.model.Text, 'Exact', true);
/* istanbul ignore else */
if (results.length > 0 && results[0] !== this.selectedItem) {
this.selectedItem = results[0];
}
}
}
/**
* Event before the dropdown is closed
*
* @param {*} event
* @memberof RadComboBoxComponent
*/
handleClosing(event: any): void {
if (
!this.dropDown ||
this.constructor?.name !== 'RadComboBoxComponent' ||
!this.isDropDownOpen
) {
event.cancel = true;
return;
}
this.clearButtonRef?.remove();
const params = { sender: this.model, e: event };
this.model.OnDropDownClosed(event);
this.model.DropDownClosed.fire([params.sender, params.e]);
this.isDropDownOpen = false;
this.model.IsDropDownOpen = false;
this.calcVisualState();
this.dropDown.updateScrollPosition();
}
/**
* Event before the dropdown is opened
*
* @param {*} event
* @memberof RadComboBoxComponent
*/
handleOpening(event: any): void {
if (
!this.dropDown ||
this.constructor?.name !== 'RadComboBoxComponent' ||
this.isDropDownOpen
) {
event.cancel = true;
return;
}
if (!this.forceElementSynchronization) {
this.model.forceSyncItemsWithItemsSource();
this.forceElementSynchronization = true;
} else if (
this.itemsPanel &&
this.stackPanelComponent &&
this.dataProviderService
) {
this.indexSelectedResolver();
this.dataProviderService.emitRequestDataAction(this.model.SelectedIndex);
}
const params = { sender: this.model, e: event };
this.model.OnDropDownOpened(event);
this.model.DropDownOpened.fire([params.sender, params.e]);
this.dropDownOpened.emit(params);
this.isDropDownOpen = true;
this.model.IsDropDownOpen = true;
this.calcVisualState();
this.syncToUISelectedItem();
this.selectInputText();
setTimeout(() => {
const minWidth =
this.element?.nativeElement?.getBoundingClientRect?.()?.width;
const selector = document.querySelectorAll(
'.igx-overlay>.igx-overlay__wrapper>.igx-overlay__content'
);
if (selector.length > 0) {
const overlay = selector[selector.length - 1];
(overlay as HTMLElement).style.setProperty('width', 'auto');
if (!Number.isNaN(minWidth) && minWidth > 0) {
(overlay as HTMLElement).style.setProperty(
'min-width',
`${minWidth}px`
);
}
this.renderer2.addClass(overlay, 'rad-combo-box-overlay__content');
Utils.adjustDropDownToWindow(
overlay,
(this.dropDown as any).toggleDirective.overlayId,
this.overlayService
);
// Makes visible the clear selection button
if (this.clearSelectionButtonVisibility) {
this.addClearSelectionButton(overlay);
}
}
}, 16);
}
/**
* clears selection in the drop down so it can be set again next time the drop down is shown
*
* @private
* @memberof RadComboBoxComponent
*/
private clearDropDownSelection(): void {
if (this.dropDown?.selectedItem != null) {
this.onSyncToUISelectedItem = true;
this.dropDown?.clearSelection?.();
this.onSyncToUISelectedItem = false;
}
}
/**
* clears focus in the drop down
*
* @private
* @memberof RadComboBoxComponent
*/
private clearDropDownFocus(): void {
if (!this.dropDown) return;
this.dropDown.items.forEach((item) => (item.focused = false));
this.detectChanges();
}
/**
* clears both selected and focused states from the drop down
* also closes the dropDown and clears the input
*
* @private
* @memberof RadComboBoxComponent
*/
private clearComboBox(): void {
this.clearDropDownSelection();
this.clearDropDownFocus();
this.dropDown.close();
this.selectedIndex = -1;
this.selectedValue = null;
this.internalValueChanging = true;
this.internalValue = '';
}
/**
* Makes sure the drop down will show the selected index if one is specified by the model
*
* @private
* @memberof RadComboBoxComponent
*/
private syncToUISelectedItem(): void {
const idx = this.model?.SelectedIndex;
if (
this.dropDown != null &&
this.dropDown.selectedItem == null &&
idx >= 0
) {
this.onSyncToUISelectedItem = true;
this.dropDown?.setSelectedItem?.(idx);
/* istanbul ignore next */
if (this.dropDown?.items?.length > idx) {
this.dropDown?.navigateItem(idx);
}
this.onSyncToUISelectedItem = false;
}
}
/**
* Event to handle when the dropdown icon is clicked
*
* @param {*} event
* @memberof RadComboBoxComponent
*/
handleToogleClick(event: any): void {
this.overlaySettingsAuto.target = this.inputSpan.nativeElement;
this.overlaySettingsAuto.excludeFromOutsideClick = [
this.inputSpan.nativeElement,
];
this.dropDown?.toggle(this.overlaySettingsAuto);
}
/**
* Event to handle when the not editable radComboBox is clicked
*
* @param {*} event
* @memberof RadComboBoxComponent
*/
handleOnClick(event: any): void {
if (!this.model.IsEditable && !event.target.className.includes('icon')) {
this.handleToogleClick(event);
}
}
/**
* Event triggered when selection changes and itemSource property is defined.
*
* @type {void}
* @param {any} event
* @memberof RadComboBoxComponent
*/
onSelection(event: any): void {
if (this.onSyncToUISelectedItem) return;
if (this.itemsSource) {
if (this.selectedValuePath) {
this.selectedValue = event.newSelection.value[this.selectedValuePath];
this.selectInputText();
} else {
this.model.SelectValueDelayedSelectionChanged(event.newSelection.value);
this.selectInputText(true);
}
this.text = this.getActualValue(
this.selectedItem,
event.newSelection.value
);
}
this.dropDown?.close();
this.textFilter = '';
}
/**
* Selects the text on the input
*
* @param {boolean} delayed for cases in which we use the model.SelectValueDelayedSelectionChanged
* @memberof RadComboBoxComponent
*/
selectInputText(delayed = false): void {
if (delayed) {
setTimeout(() => {
this.input?.nativeElement.select();
}, 5);
} else {
this.input?.nativeElement.select();
}
}
/**
* Selects the text on the input from a certain range
*
* @param {number} start
* @param {number} end
* @type {void}
* @memberof RadComboBoxComponent
*/
selectInputTextFromRange(start: number, end: number): void {
this.input?.nativeElement.setSelectionRange(start, end, 'forward');
}
/**
* Verifies if the items collections contains UIElements to be rendered
*
* @returns boolean True if the collection contains UIElements otherwise false
* @memberof RadComboBoxComponent
*/
get containsUIElements(): boolean {
return Utils.containsUIElement(this.items);
}
/**
* Syncs the model with the component values.
*
* @type {void}
* @memberof RadComboBoxComponent
*/
syncModel(): void {
this.syncItemsToRender();
// Syncs SelectedItem and SelectedIndex
/* istanbul ignore next */
if (this.model.SelectedIndex !== -1) {
this.text = this.displayMemberPath
? this.model.SelectedItem?.[this.displayMemberPath]
: this.model.SelectedItem;
if (this.selectedItem && this.text === '') {
this.model.SelectValueDelayedSelectionChanged(this.selectedItem);
}
}
// Syncs ItemTemplate
/* istanbul ignore next */
if (
(this.radComboBoxItemTemplate &&
!Utils.isEqual(
this.model.ItemTemplate,
this.radComboBoxItemTemplate
)) ||
(!this.radComboBoxItemTemplate &&
this.model.ItemTemplate instanceof TemplateRef)
) {
this.model.ItemTemplate = this.radComboBoxItemTemplate;
}
// Syncs ItemsPanel
/* istanbul ignore next */
if (
this.radComboBoxItemsPanel &&
!Utils.isEqual(this.model.ItemsPanel, this.radComboBoxItemsPanel.template)
) {
this.model.ItemsPanel = this.radComboBoxItemsPanel.template;
this.stackPanelModel = this.stackPanelModel ?? new StackPanelModel();
this.assignItemsPanelItems(this.itemsToRender);
}
}
/**
* Synchronize the internal collection itemsToRender
*
* @memberof RadComboBoxComponent
*/
syncItemsToRender(): void {
this.itemsToRender = this.containsUIElements
? Utils.getUIControls(this.items, this.injector)
: [...this.items?.internalArray];
}
/**
* Trigger a selectionChanged if the value has changed from an external component (StackPanel)
*
* @type {void}
* @memberof RadComboBoxComponent
*/
itemsPanelSelectionChanged(value: ButtonModel): void {
const event = {
newSelection: {
value: value.Tag.item,
},
};
this.IndexSelected = value.Tag.index;
this.onSelection(event);
}
/**
* keep the timer for the readOnly property, to reset the search text
*
* @memberof RadComboBoxComponent
*/
filterTimer = null;
/**
* Flag to determine if the filter with the readOnly should be cleared
*
* @memberof RadComboBoxComponent
*/
isResetingFilter = false;
/**
* Unassigned selected item if the value is empty.
*
* @param {string} value
* @type {void}
* @memberof RadComboBoxComponent
*/
unassignedSelectedValue(value: string): void {
/* istanbul ignore else */
if (value === '') {
this.searchFilterText = '';
/* istanbul ignore else */
if (this.selectedItem !== null) {
this.selectedItem = null;
this.selectedValue = null;
}
}
}
/**
* Reset filter timeout and text.
*
* @type {void}
* @memberof RadComboBoxComponent
*/
resetFilter(): void {
/* istanbul ignore else */
if (this.isFilteringEnabled) {
this.filterTimer = setTimeout(() => {
this.searchFilterText = '';
this.isResetingFilter = true;
}, 1500);
}
}
/**
* returns true if the event is a navigation key
*
* @private
* @param {*} event - event to be checked
* @return {*} {boolean} returns true if the event is a navigation key
* @memberof RadComboBoxComponent
*/
private isNavigationKey(event: any): boolean {
return (
event.code === 'ArrowDown' ||
event.code === 'ArrowUp' ||
event.code === 'Enter'
);
}
/**
* Handler for the key down event.
*
* @param {KeyboardEvent} event
* @return {*} {void}
* @memberof RadComboBoxComponent
*/
keyDownHandler(event: KeyboardEvent): void {
// The igxDropDownItemNavigation directive handles this behavior
// this avoids conflicts with events triggered twice by client code
//added tab on condition for tab will act as an Enter
if (event.code != 'Enter' && event.code != 'Tab') {
const keyEventArgs = Utils.getKeyEventArgs(event);
this.model.KeyDown.fire([this.model, keyEventArgs]);
}
if (event.code === 'Tab') {
this.tabKeyHandler();
}
if (event.code === 'Backspace' || event.code === 'Delete') {
this.deleteKeyPressed = true;
}
// Prevents default behavior from the igxDropDownItemNavigation directive
if (event.code == 'Space') {
this.internalValue += ' ';
event.preventDefault();
event.stopPropagation();
}
if (this.isReadOnly && this.isEditable) {
const result = this.searchForOption(event);
if (!result) {
event.preventDefault?.();
event.stopPropagation?.();
}
}
const isStackPanel = document.querySelector(
'.igx-overlay>.igx-overlay__wrapper>.igx-overlay__content wm-stack-panel.panel-options'
);
// handle the default behavior of the combo box
if (isStackPanel == null) {
return;
}
// handle the stackPanel scenario (when the combo box is opened)
switch (event.key) {
case 'ArrowDown':
this.arrowDownHandler();
break;
case 'ArrowUp':
this.arrowUpHandler();
break;
case 'Enter':
this.enterKeyHandler();
break;
default:
break;
}
if (this.isNavigationKey(event)) {
this.stackPanelComponent?.calculatePageData(true, -1);
}
}
/**
* variable use keep the input text when the control isReadOnly.
*
* @memberof RadComboBoxComponent
*/
searchFilterText = '';
/**
* Try to determinate if there are values for the search text or not
* Also handle the backspace key.
*
* @private
* @param {KeyboardEvent} event
* @return {*} {boolean}
* @memberof RadComboBoxComponent
*/
private searchForOption(event: KeyboardEvent): boolean {
this.handleFilteringWithReadOnly();
if (event.key === 'Backspace') {
this.searchFilterText = this.searchFilterText.slice(0, -1);
return true;
}
const value = `${this.searchFilterText}${event.key}`;
return value && value.length > 0
? this.calculateItemsForReadOnly(event, value)
: false;
}
/**
* Calculate if there are options for the searchFilterText in the items source.
*
* @private
* @param {KeyboardEvent} event - event for the keydown
* @param {string} value - value to be searched
* @return {*} {boolean}
* @memberof RadComboBoxComponent
*/
private calculateItemsForReadOnly(
event: KeyboardEvent,
value: string
): boolean {
const items = this.textSearchModePipe.transform(
this.itemsToRender,
value,
this.textSearchMode,
true,
this.displayMemberPath
);
if (items.length > 0) {
this.searchFilterText += event.key;
return true;
}
return false;
}
/**
* If the user has enabled filtering, and the user has not typed anything in the last 1500ms, then
* reset the filter
*/
private handleFilteringWithReadOnly(): void {
/* istanbul ignore else */
if (!this.model.IsFilteringEnabled) {
return;
}
/* istanbul ignore else */
if (this.filterTimer) {
clearTimeout(this.filterTimer);
}
/* istanbul ignore else */
if (this.isResetingFilter) {
this.searchFilterText = '';
this.isResetingFilter = false;
this.input.nativeElement.value = '';
}
}
/**
* Return selectedItem with or without displayMemberPath
*
* @return {any}
* @memberof RadComboBoxComponent
*/
returnSelectedItem(): any {
if (this.forceTextUpdate) {
return null;
} else if (this.radComboBoxItemTemplate) {
return this.selectedItem;
} else {
return this.selectedItem
? this.getActualValue(this.selectedItem, this.selectedItem)
: '';
}
}
/**
* Assign Items to a StackPanelModel to simulate ItemsPanel Silverlight behavior
*
* @type {void}
* @memberof RadComboBoxComponent
*/
assignItemsPanelItems(items: any[], index = 0): void {
this.stackPanelModel.maxHeight = this.maxDropDownHeight;
/* istanbul ignore else */
if (this.dataProviderService) {
if (this.stackPanelComponent)
this.stackPanelComponent.virtualScroll.totalItems = items.length;
this.dataProviderService.dataSource = items;
this.dataProviderService.pageResolver = this.pageResolver.bind(this);
if (index > 0) {
this.dataProviderService.emitRequestDataAction(index);
} else {
this.dataProviderService.emitRequestDataAction(
items.length === 0 ? 0 : this.model.SelectedIndex
);
}
}
}
/**
* Handle the arrow up key event.
* Update the selectedIndex and move the scroll position if needed.
*
* @private
* @return {*}
* @memberof RadComboBoxComponent
*/
protected arrowUpHandler(): void {
if (this.IndexSelected == -1) {
this.IndexSelected = 0;
return;
}
this.IndexSelected--;
if (this.IndexSelected == -1) {
this.IndexSelected = 0;
this.stackPanelComponent.scrollPanel.nativeElement.scrollTop -=
this.stackPanelComponent.virtualScroll.itemHeight;
}
}
/**
* Handle the arrow down key event.
* Update the selectedIndex and move the scroll position if needed.
*
* @private
* @memberof RadComboBoxComponent
*/
protected arrowDownHandler(): void {
if (this.IndexSelected == -1) {
this.IndexSelected = 0;
} else {
this.IndexSelected++;
const IndexPosition =
this.IndexSelected % this.stackPanelComponent.virtualScroll.bufferSize;
if (IndexPosition == 0) {
this.IndexSelected--;
this.stackPanelComponent.scrollPanel.nativeElement.scrollTop +=
this.stackPanelComponent.virtualScroll.itemHeight;
}
}
}
/**
* Handles tab key to replicate Silverlight behavior, it selects and gives focus to next item.
*
* @param {any} suggestion
* @type {void}
* @memberof RadComboBoxComponent
*/
tabKeyHandler(): void {
const suggestion = this.getTextSuggestion;
if (
!this.model.IsDropDownOpen &&
suggestion &&
this.selectedItem !== suggestion
) {
this.selectedItem = suggestion;
} else if (
this.model.IsDropDownOpen &&
!this.itemsPanel &&
this.dropDown.focusedItem?.value
) {
this.selectedItem = this.dropDown.focusedItem.value;
this.syncToUISelectedItem();
this.dropDown.close();
} else if (
this.model.IsDropDownOpen &&
this.itemsPanel &&
this.IndexSelected !== -1
) {
if (this.IndexSelected < this.stackPanelModel.Children.count) {
const item = this.stackPanelModel.Children.getItem(
this.IndexSelected
) as ButtonModel;
this.selectedItem = item.Tag.item;
}
this.dropDown.close();
} else if (this.model.IsDropDownOpen && this.IndexSelected === -1) {
this.dropDown.close();
}
this.resetFilteringValue();
}
/**
* Handle the enter key event.
* Update the selectedIndex.
*
* @private
* @memberof RadComboBoxComponent
*/
protected enterKeyHandler(): void {
this.itemsPanelSelectionChanged(
this.stackPanelModel.Children.getItem(this.IndexSelected) as ButtonModel
);
}
/**
* Assign a subset of elements to the child stack panel component
*
* @param {any[]} items
* @param {number} skip
* @param {number} take
* @memberof RadComboBoxComponent
*/
pageResolver(items: any[], skip: number, take: number): void {
/* istanbul ignore else */
if (!items) return;
const itemPerPage = 10;
this.stackPanelModel.Children.clear();
this.stackPanelComponent.virtualScroll.scrollDelay = 100;
this.stackPanelComponent.virtualScroll.topIndex = skip;
if (items.length > itemPerPage && skip + take > items.length) {
skip -= skip + take - items.length;
}
const startIndex = skip < 0 || items.length <= itemPerPage ? 0 : skip;
this.addDynamicItemPanelButtons(items, startIndex, skip + take);
this.emitStackPanelLoading(false);
}
/**
* Dinamically add button to the StackPanel instance.
*
* @param {any[]} items
* @param {number} startIndex
* @param {number} endIndex
*
* @memberof RadComboBoxComponent
*/
addDynamicItemPanelButtons(
items: any[],
startIndex: number,
endIndex: number
): void {
items.slice(startIndex, endIndex).forEach((item: any, index: number) => {
const tempButton = new ButtonModel();
tempButton.Content = this.displayMemberPath
? item[this.displayMemberPath]
: item;
tempButton.Tag = { item, index };
tempButton.Height = this.stackPanelComponent.virtualScroll.itemHeight;
tempButton.Click.addHandler(this.itemsPanelSelectionChanged, this);
tempButton.CustomCSSClasses = 'radComboBoxButtonItem';
tempButton.BorderBrush = new SolidColorBrush(SmColors.Transparent);
if (
tempButton.Content === this.returnSelectedItem() &&
this.IndexSelected === -1
) {
this.IndexSelected = index;
}
if (
(!this.itemToHighlight && this.IndexSelected === index) ||
this.itemToHighlight === tempButton.Tag.item
) {
tempButton.CustomCSSClasses += ' navigation-selection';
if (this.itemToHighlight) {
this.IndexSelected = index;
this.itemToHighlight = undefined;
}
}
this.stackPanelModel.Children.add(tempButton);
this.emitStackPanelLoading(true);
});
}
/**
* Emits to stack panel a flag to know if items are loading.
*
* @param {boolean} flag
* @memberof RadComboBoxComponent
*/
emitStackPanelLoading(flag: boolean): void {
this.dataProviderService.emitItemsCountDataAction(flag);
}
/**
* DisplayMemberPath string transform
*
* @param stringValue
* @param itemToRender
* @returns
*/
transformDisplayMemberPath(stringValue: any, itemToRender: any): string {
if (!stringValue || !itemToRender) return null;
let result = itemToRender;
if (stringValue.indexOf('.') === -1) {
return itemToRender[stringValue];
} else {
const stringChunks = stringValue.split(/\./);
for (const chunk of stringChunks) {
result = result[chunk];
}
}
return result;
}
/**
* Return the width of the input based on its content.
*
* @memberof RadComboBoxComponent
*/
get inputWidth(): string {
const isStretchable =
!this.widthIsNaN ||
(this.isContainerHorizontalStretch &&
this.model.HorizontalAlignment === HorizontalAlignment.Stretch);
return isStretchable ? '100%' : this.text?.toString().length + 1 + 'ch';
}
/**
* If the width is defined it should take all the available space, otherwise the width is set to auto.
*
* @memberof RadComboBoxComponent
*/
get widthAuto(): string {
const isStretchable =
!this.widthIsNaN ||
(this.isContainerHorizontalStretch &&
this.model.HorizontalAlignment === HorizontalAlignment.Stretch);
return isStretchable ? '100%' : 'auto';
}
/**
* Return if the width is NaN.
*
* @memberof RadComboBoxComponent
*/
get widthIsNaN(): boolean {
return Number.isNaN(this.width);
}
/**
* Evaluate if the `HorizontalStrechAlignment` is set in the container.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get isContainerHorizontalStretch(): boolean {
if (this.model.Parent instanceof FrameworkElement) {
return (
this.model.Parent.HorizontalAlignment === HorizontalAlignment.Stretch
);
}
return true;
}
/**
* Apply min width css property
*
* @memberof RadComboBoxComponent
*/
applyMinWidth(): number {
return this.minWidth - 15 > 25 ? this.minWidth - 15 : 25;
}
/**
* Syncs the Text property and the SelectedItem text.
*
* @memberof RadComboBoxComponent
*/
syncTextWithSelectedItem(): void {
/* istanbul ignore else */
if (this.text !== this.returnSelectedItem()) {
this.text = this.returnSelectedItem();
this.internalValueChanging = true;
this.internalValue = this.returnSelectedItem();
}
}
/**
* Search through items using the textSearchModePipe
*
* @type {any[]}
* @memberof RadComboBoxComponent
*/
searchItemsPipe(
text: string,
mode: TextSearchMode | string,
forced = false
): any[] {
return this.textSearchModePipe.transform(
this.itemsToRender,
text,
mode,
forced ? forced : Boolean(this.isFilteringEnabled),
this.displayMemberPath
);
}
/**
* Apply text suggestion to the internal textarea
*
* @param {any} value
* @param {any} suggestedText
* @param {any} event
* @type {any}
* @memberof RadComboBoxComponent
*/
applySuggestionOnInput(value: string, suggestedText: any): void {
if (
value &&
suggestedText &&
value !== suggestedText &&
!this.isFilteringEnabled &&
this.textSearchMode === TextSearchMode.StartsWith &&
!this.deleteKeyPressed &&
this.input?.nativeElement
) {
this.input.nativeElement.value = suggestedText;
this.selectInputTextFromRange(value.length, suggestedText.length);
}
}
/**
* Get text suggestion based on the current text
*
* @type {any}
* @memberof RadComboBoxComponent
*/
get getTextSuggestion(): any {
if (!this.internalValue) return;
const result = this.searchItemsPipe(
this.internalValue,
this.textSearchMode,
true
);
return result.length > 0 ? result[0] : undefined;
}
/**
* Navigate to a suggested item based on the current text
*
* @type {any}
* @memberof RadComboBoxComponent
*/
navigateSuggestedItem(suggestion: any): any {
/* istanbul ignore else */
if (!suggestion) {
this.itemToHighlight = undefined;
this.clearDropDownFocus();
return;
}
const index = this.itemsToRender.indexOf(suggestion);
if (!this.itemsPanel) {
this.dropDown.navigateItem(index);
} else {
this.itemToHighlight = suggestion;
this.assignItemsPanelItems(this.itemsToRender, index);
}
}
/**
* Get the actual to display
*
* @param {any} valueToTransform
* @param {any} otherValue
* @type {string}
* @memberof RadComboBoxComponent
*/
getActualValue(valueToTransform: any, otherValue: any): string {
return this.displayMemberPath
? this.transformDisplayMemberPath(
this.displayMemberPath,
valueToTransform
)
: otherValue;
}
/**
* Adds the ClearSelectionButton to the drop down
*
* @param {Element} overlay
* @memberof RadComboBoxComponent
*/
addClearSelectionButton(overlay: Element): void {
const parent = overlay.getElementsByClassName('igx-drop-down__list')[0];
// Instantiate the new ClearButton
this.clearButtonRef = document.createElement('button');
this.clearButtonRef.addEventListener('click', () => this.clearComboBox());
this.clearButtonRef.textContent =
this.clearSelectionButtonContent.toString();
this.renderer2.addClass(
this.clearButtonRef,
'rad-combo-clear-selection-button'
);
parent.insertBefore(this.clearButtonRef, parent.childNodes[0]);
}
/**
* Gets the item image.
*
* @type {string}
* @memberof RadComboBoxComponent
*/
getItemImage(imageToCovert: any): string {
return this.imageToPath(imageToCovert?.Image?.uriSource?.relativeUrl);
}
/**
* Assign all the horizontal bindings for the control
*
* @protected
* @type {void}
* @memberof RadComboBoxComponent
*/
protected hostHorizontalAlignmentCall(): void {
super.hostHorizontalAlignmentCall();
this.hostHozSelfAlign = true;
}
/**
* Handles naviation to an item based on suggestion.
*
* @type {void}
* @memberof RadComboBoxComponent
*/
navigateItemHandler(): void {
const suggestedItem = this.getTextSuggestion;
const suggestedText = this.getActualValue(suggestedItem, suggestedItem);
this.applySuggestionOnInput(this.internalValue, suggestedText);
this.deleteKeyPressed = false;
/* istanbul ignore else */
if (!this.isFilteringEnabled) {
this.navigateSuggestedItem(suggestedItem);
} else if (this.itemsPanel && this.isFilteringEnabled) {
const tempArray = this.searchItemsPipe(
this.textFilter,
this.textSearchMode
);
this.stackPanelComponent?.virtualScroll.resetValues(tempArray.length);
this.assignItemsPanelItems(tempArray);
} else if (this.itemsPanel) {
this.stackPanelComponent?.calculatePageData(true, -1);
}
}
/**
* Click handler to check if the input value should be reseted.
*
* @type {void}
* @memberof RadComboBoxComponent
*/
@HostListener('document:mousedown', ['$event'])
clickListener(event: any): void {
if (
!this.shouldResetFilteringValue ||
!this.isFilteringEnabled ||
this.constructor.name !== 'RadComboBoxComponent'
)
return;
const overlay = document.querySelector('.rad-combo-box-overlay__content');
if (
!this.element.nativeElement.contains(event.target) &&
!overlay?.contains(event.target)
) {
this.resetFilteringValue();
}
}
/**
* Resets internal value and clear filter.
*
* @type {void}
* @memberof RadComboBoxComponent
*/
resetFilteringValue(): void {
if (
!this.shouldResetFilteringValue ||
!this.isFilteringEnabled ||
this.internalValue === this.returnSelectedItem()
)
return;
this.internalValueChanging = true;
this.internalValue = this.returnSelectedItem();
this.textFilter = '';
}
/**
* Resolves IndexSelected value when virtual scroll is enabled
*
* @type {void}
* @memberof RadComboBoxComponent
*/
indexSelectedResolver(): void {
const itemsLenght = this.itemsToRender.length;
if (
itemsLenght >= this.dataProviderService.maxPageSize &&
this.IndexSelected != -1 &&
itemsLenght - this.dataProviderService.maxPageSize > this.selectedIndex
) {
this.IndexSelected = 0;
} else if (
itemsLenght >= this.dataProviderService.maxPageSize &&
this.IndexSelected != -1 &&
itemsLenght - this.dataProviderService.maxPageSize < this.selectedIndex
) {
this.IndexSelected =
this.dataProviderService.maxPageSize -
(itemsLenght - Number(this.selectedIndex));
}
}
}
<div
*ngIf="visibility && isInitialized"
class="autoHeightWidth radComboContainer"
[wmValidationSupport]="[validationError, validationErrorMessage, null, '7px']"
>
<div
class="mainContainer widthHeightInheritance"
[class.disabled]="!isEnabled"
[style.width]="widthAuto"
#mainContainer
>
<span
class="widthHeightInheritance inputClass"
[class]="inputContainerClasses"
(click)="handleOnClick($event)"
#inputSpan
>
<span
class="valueContainer"
[style.width]="!radComboBoxItemTemplate ? widthAuto : '100%'"
>
<div
*ngIf="!selectedItem && !radComboBoxItemTemplate"
class="widthHeightInheritance"
[igxDropDownItemNavigation]="dropDown"
>
<input
#input
[(ngModel)]="internalValue"
(keydown)="keyDownHandler($event)"
[style.background]="backgroundColor"
[readonly]="!isEditable"
(focus)="onFocusIn()"
(blur)="onFocusOut()"
[attr.spellcheck]="spellCheck"
[style.width]="inputWidth"
[style.min-width.px]="applyMinWidth | memoize: minWidth"
class="textContainer"
[class.disabledInput]="!isEnabled"
/>
</div>
<ng-container *ngIf="radComboBoxItemTemplate && selectedItem">
<ng-container
[ngTemplateOutlet]="radComboBoxItemTemplate"
[ngTemplateOutletContext]="{
context:
returnSelectedItem
| memoize: forceTextUpdate:selectedItem:displayMemberPath
}"
>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedItem && !radComboBoxItemTemplate">
<div
*ngIf="!selectedItem.Image?.uriSource"
class="widthHeightInheritance"
[igxDropDownItemNavigation]="dropDown"
>
<input
#input
class="widthHeightInheritance"
[(ngModel)]="internalValue"
(keydown)="keyDownHandler($event)"
[attr.spellcheck]="spellCheck"
[style.background]="backgroundColor"
[readonly]="!isEditable"
[style.width]="inputWidth"
(focus)="onFocusIn()"
(blur)="onFocusOut()"
[style.min-width.px]="applyMinWidth | memoize: minWidth"
class="textContainer"
[class.disabledInput]="!isEnabled"
/>
</div>
<ng-container *ngIf="selectedItem.Image?.uriSource">
<img [src]="getItemImage | memoize: selectedItem" />
</ng-container>
</ng-container>
</span>
<span
class="iconContainer"
[class]="inputIconClasses"
[style.background]="backgroundColor"
(click)="handleToogleClick($event)"
>
<igx-icon class="icon"
>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon
>
</span>
</span>
</div>
<igx-drop-down
class="dropdown"
#dropDown
(selectionChanging)="onSelection($event)"
(opening)="handleOpening($event)"
(closing)="handleClosing($event)"
>
<ng-container *ngIf="!itemsPanel">
<div
*ngIf="virtualization"
class="drop-down-virtual-wrapper"
[ngStyle]="{ 'max-height.px': maxDropDownHeight }"
>
<igx-drop-down-item
*igxFor="
let item of itemsToRender
| textSearchModePipe
: textFilter
: textSearchMode
: isFilteringEnabled
: displayMemberPath;
index as index;
scrollOrientation: 'vertical';
containerSize: maxDropDownHeight;
itemSize: itemHeight
"
[value]="item"
[index]="index"
>
<ng-container
[ngTemplateOutlet]="dropDownItemContentTemplate"
[ngTemplateOutletContext]="{ item: item }"
>
</ng-container>
</igx-drop-down-item>
</div>
<div
*ngIf="!virtualization"
class="drop-down-wrapper"
[ngStyle]="{ 'max-height.px': maxDropDownHeight }"
>
<igx-drop-down-item
*ngFor="
let item of itemsToRender
| textSearchModePipe
: textFilter
: textSearchMode
: isFilteringEnabled
: displayMemberPath
"
[value]="item"
>
<ng-container
[ngTemplateOutlet]="dropDownItemContentTemplate"
[ngTemplateOutletContext]="{ item: item }"
>
</ng-container>
</igx-drop-down-item>
</div>
<ng-template #dropDownItemContentTemplate let-item="item">
<div
*ngIf="isInitialized && !radComboBoxItemTemplate && displayMemberPath"
class="itemDisplayMemberPath"
>
{{ transformDisplayMemberPath(displayMemberPath, item) }}
</div>
<div *ngIf="isInitialized && radComboBoxItemTemplate">
<ng-container
[ngTemplateOutlet]="radComboBoxItemTemplate"
[ngTemplateOutletContext]="{ context: item }"
>
</ng-container>
</div>
<div
*ngIf="
isInitialized && !radComboBoxItemTemplate && !displayMemberPath
"
>
<ng-container *ngIf="!item.Image?.uriSource">
{{ item }}
</ng-container>
<ng-container *ngIf="item.Image?.uriSource">
<img [src]="getItemImage | memoize: item" />
</ng-container>
</div>
</ng-template>
</ng-container>
<ng-container *ngIf="itemsPanel">
<!-- This implementation only works works when the ItemsPanel is a StackPanel instance, its is the most used case in EPSI -->
<wm-stack-panel
#stackPanel
class="panel-options"
[virtualScrollEnabled]="true"
[model]="stackPanelModel"
></wm-stack-panel>
</ng-container>
</igx-drop-down>
</div>
./rad-combo-box.component.scss
@import '../../scss/variables';
.radComboContainer {
position: relative;
}
.mainContainer {
background-clip: padding-box;
padding: 0;
display: flex;
flex-flow: row nowrap;
position: relative;
transition: all 0.1s ease;
}
.inputClass {
color: $rad-combo-box-color;
background-color: $rad-combo-box-background-color;
background-image: $rad-combo-box-background-image;
border: $rad-combo-box-border-style;
display: flex;
font-family: inherit;
height: 100%;
box-sizing: border-box;
border-radius: $rad-combo-box-border-radius;
}
.valueContainer {
display: flex;
flex-flow: row nowrap;
align-items: center;
overflow: hidden;
background-color: inherit;
height: 100%;
color: $accent-color;
}
.iconContainer {
width: $rad-combo-box-icon-size;
display: flex;
user-select: none;
}
.textContainer {
padding: 0px 0px 0px 2px;
border: 0px;
height: inherit;
min-height: $rad-combo-box-min-height;
outline: none;
}
.widthHeightInheritance {
width: inherit;
height: inherit;
min-width: inherit;
min-height: inherit;
}
.drop-down-virtual-wrapper {
overflow: hidden;
min-width: 180px;
}
%radComboBoxStackPanelButtonSelected {
background: $rad-combo-box-item-selected;
border: $rad-combo-box-item-selected-border;
}
::ng-deep {
wm-stack-panel {
&.panel-options {
min-width: 200px;
display: block;
&:hover {
wm-button.radComboBoxButtonItem button {
background: $accent-background;
}
}
wm-button.radComboBoxButtonItem {
> button {
background: $accent-background;
}
&.navigation-selection button {
@extend %radComboBoxStackPanelButtonSelected;
}
&:hover {
> button.buttonClass {
@extend %radComboBoxStackPanelButtonSelected;
}
~ .radComboBoxButtonItem > button {
background: $accent-background;
}
}
}
}
}
}
.icon {
align-self: center;
}
.control-button-normal {
background: $rad-combo-box-button-normal-background;
}
.control-button-mouseover {
background: $telerik-control-background-hover-color;
}
.control-button-pressed {
background: $telerik-control-background-selected-color;
}
.controls-outer-border-normal {
border: $rad-combo-box-normal-border;
border-radius: $rad-combo-box-border-radius;
}
.control-outer-border-mouseover {
border: $rad-combo-box-mouseover-border;
}
.control-outer-border-pressed {
border: $rad-combo-box-pressed-border;
}
.chromes_buttonChrome {
border: $rad-combo-box-normal-border;
border-radius: $rad-combo-box-border-radius;
background: $rad-combo-box-button-normal-background;
}
.control-outer-mouseover {
background: $rad-combo-box-mouseover-background;
border: $rad-combo-box-mouseover-border;
}
.control-outer-pressed {
border: $telerik-control-background-selected-color;
background: $telerik-control-background-selected-color;
}
igx-drop-down-item {
padding: 0 2.5em 0 1.5em;
cursor: default;
}
%igx-drop-down-item-normal-state {
background: $rad-combo-box-item-normal-background;
border: none;
}
%igx-drop-down-item-selected-state {
background: $rad-combo-box-item-mouseover-background;
border: $rad-combo-box-item-mouseover-border;
}
.drop-down-wrapper,
.drop-down-virtual-wrapper {
&:hover {
.igx-drop-down__item {
@extend %igx-drop-down-item-normal-state;
}
}
.igx-drop-down__item {
border-radius: $rad-combo-box-item-mouseover-border-radius;
box-sizing: border-box;
color: unset;
height: 2rem;
&--selected {
@extend %igx-drop-down-item-normal-state;
}
&--focused {
@extend %igx-drop-down-item-selected-state;
}
&:hover {
@extend %igx-drop-down-item-selected-state;
~ .igx-drop-down__item {
@extend %igx-drop-down-item-normal-state;
}
}
}
}
.dropdown {
width: 100%;
}
::ng-deep {
//The use of this custom class will prevent the styles to bleed out of the rad-combo-box drop down
.rad-combo-box-overlay__content {
> .igx-drop-down__list {
box-sizing: border-box;
.rad-combo-clear-selection-button {
width: 100%;
height: auto;
display: block;
line-height: $rad-combo-box-clear-select-button-line-height;
font-size: $rad-combo-box-clear-select-button-font-size;
background: $rad-combo-box-button-normal-background;
border: $rad-combo-box-normal-border;
&:hover {
background: $telerik-control-background-hover-color;
border: $rad-combo-box-mouseover-border;
}
&:active {
background: $telerik-control-background-selected-color;
border: $rad-combo-box-pressed-border;
}
}
}
}
}
.disabledInput {
background-color: $default-control-disabled-background-color;
color: $accent-color;
}
:host ::ng-deep {
wm-text-block > span {
display: flex;
align-items: center;
//Using important, because ignite override it
padding: 0px 0px 0px 2px !important;
}
}