projects/i-components/src/lib/components/list-box/list-box.component.ts
Angular Component for the ListBox Control
OnInit
AfterContentInit
AfterViewInit
DoCheck
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | wm-list-box |
| styleUrls | ./list-box.component.scss |
| templateUrl | ./list-box.component.html |
Public
constructor(injectedModel: ListBoxModel, cd: ChangeDetectorRef, injector: Injector, dragDropService: DragDropService, element: ElementRef)
|
||||||||||||||||||
|
Creates an instance of ListBoxComponent.
Parameters :
|
| borderBrush | |
Type : any
|
|
|
Sets the border brush of the control. |
|
| displayMemberPath | |
Type : string | BindingInfo
|
|
|
The name or path of the property that is displayed for each data item. |
|
| itemsSource | |
Type : any
|
|
|
Sets a collection used to generate the content of the items |
|
| itemTemplate | |
|
Sets the ItemTemplate to apply through the model |
|
| model | |
Type : ListBoxModel
|
|
|
Object with listbox properties and events |
|
| selectedIndex | |
|
Set selectedIndex property |
|
| selectedItem | |
Type : any
|
|
|
Input to set the selectedItem for the listBox |
|
| selectionMode | |
Type : any
|
|
|
Sets the selectionMode to the model |
|
| 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... |
|
| selectionChanged | |
Type : EventEmitter<any>
|
|
|
SelectionChanged EventEmitter |
|
| 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. |
| assignItems |
assignItems()
|
|
Assing items to be rendered.
Returns :
void
|
| calcContainerSize |
calcContainerSize()
|
|
Based on the main container calculated list height.
Returns :
void
|
| calcItemSize |
calcItemSize()
|
|
Based on the listBox items ref calculated items height.
Returns :
void
|
| containerResizeHandler | ||||||
containerResizeHandler(entries: ResizeObserverEntry[])
|
||||||
|
Callback function to handle listbox container size changes.
Parameters :
Returns :
void
|
| dragEndHandler |
dragEndHandler(_event: any, itemModel: any, item: any)
|
|
Drag end event handler, it will only be execute when is a drag and drop list.
Returns :
void
|
| dragOverHandler | ||||||
dragOverHandler(event: any)
|
||||||
|
DragOver handler, allows container to drop items.
Parameters :
Returns :
void
|
| dragStartHandler |
dragStartHandler(_event: DragEvent, itemModel: any, item: any)
|
|
Drag started event handler, it will only be execute when is a drag and drop list.
Returns :
void
|
| dropHandler | ||||||
dropHandler(event: any)
|
||||||
|
Drop event handler, it will only be execute when is a drag and drop list.
Parameters :
Returns :
void
|
| getDisplayItem | ||||||
getDisplayItem(item: any)
|
||||||
|
Returns a string representation of the given item.
Parameters :
Returns :
string
|
| getSourceComponent | ||||||
getSourceComponent(src: HTMLElement)
|
||||||
|
Locate component from HTML element
Parameters :
Returns :
unknown
{unknown} |
| Private handleExtendedModeSelection | ||||||||||||||||
handleExtendedModeSelection(index: number, isShiftPressed: boolean, isCtrlPressed: boolean)
|
||||||||||||||||
|
Handles the click selection when the list is in extended mode
Parameters :
Returns :
void
|
| handleIndexChange | ||||||
handleIndexChange(event: any)
|
||||||
|
Handles the top index change event to keep track of the top element of the list box
Parameters :
Returns :
void
|
| Private handleKeyDown | ||||||||
handleKeyDown(event: any)
|
||||||||
|
Handles the key down action by navigating to next list box items.
Parameters :
Returns :
void
|
| Private handleKeyUp | ||||||||
handleKeyUp(event: any)
|
||||||||
|
Handles the key up action by navigating to previous list box items.
Parameters :
Returns :
void
|
| isFocusedItem | ||||||||
isFocusedItem(index: number)
|
||||||||
|
Indicates whether the item in the given index has the focus or not.
Parameters :
Returns :
boolean
{boolean} |
| isRendered |
isRendered()
|
|
Returns if the listBox nativeElement reference is currently on the window.
Returns :
boolean
|
| isSelectedItem | ||||||
isSelectedItem(value: any)
|
||||||
|
Returns true if the current item is selected.
Parameters :
Returns :
boolean
|
| itemClickHandler | |||||||||
itemClickHandler(event: MouseEvent, index: number)
|
|||||||||
|
Item click handler
Parameters :
Returns :
void
|
| itemKeyDownHandler | ||||||
itemKeyDownHandler(event: any)
|
||||||
|
Item key down handler
Parameters :
Returns :
void
|
| modelChangeHandler | ||||||
modelChangeHandler(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:604
|
||||||
|
Angular lifeCycle hook.
Parameters :
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:553
|
|
Angular lifeCycle hook. Enables a rendering flag to avoid ExpressionChangedAfterItHasBeenCheckedError.
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:541
|
|
Angular lifeCycle hook.
Returns :
void
|
| ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:567
|
|
Angular lifeCycle hook.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:590
|
|
Angular lifeCycle hook.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:514
|
|
Angular lifecycle hook. Initialize model
Returns :
void
|
| onBlur |
onBlur()
|
|
Handles the focus lost event
Returns :
void
|
| onFocus |
onFocus()
|
|
Handles the focus gained event
Returns :
void
|
| onWindowResize | ||||||
onWindowResize(event: any)
|
||||||
|
Refreshes the virtualized container dimensions
Parameters :
Returns :
void
|
| Private performKeyNavigation |
performKeyNavigation(event: any, targetIndex: number, requiresScroll: boolean)
|
|
Performs the list item navigation as a result of a key action. Navigating implies scrolling if required, selecting the new item and moving the focus to the new item.
Returns :
void
|
| selectionHandler |
selectionHandler(index: number, isShiftPressed: boolean, isCtrlPressed: boolean)
|
|
Selection changed handler
Returns :
void
|
| syncModel |
syncModel()
|
|
Syncs the model with static added values.
Returns :
void
|
| syncStaticItems |
syncStaticItems()
|
|
Syncs static items with the model
Returns :
void
|
| triggerLoadedEvent | ||||||
triggerLoadedEvent(name: string)
|
||||||
|
Handler triggering loaded event when the ItemsSource property have changed (Bug #504499)
Parameters :
Returns :
void
|
| virtualScrollRefresh |
virtualScrollRefresh()
|
|
It is neccesary to re-render CdkVirtualScrollViewport component because it has some issues when the ItemsSource have changed.
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 hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2374
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| 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 ngAfterViewChecked |
ngAfterViewChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:893
|
|
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} |
| cdkVirtualScrollViewport |
Type : CdkVirtualScrollViewport
|
Decorators :
@ViewChild(CdkVirtualScrollViewport)
|
|
Gets a reference to the CdkVirtualScrollViewport directive used for virtualization |
| componentsToRender |
Type : any[]
|
Default value : []
|
|
Array that stores components to be rendered when theres is no ItemsSource. |
| containerResizeObserver |
Default value : new ResizeObserver(
this.containerResizeHandler.bind(this)
)
|
|
Observer used to react to size changes in the listbox container. |
| dragAndDropReference |
Type : ListBoxDragDropTargetComponent
|
|
Reference to ListBoxDragDropTargetComponent if it exist. |
| dragDropHandler |
Type : Subscription
|
|
Drag and drop subscription handler |
| hasControlFocus |
Default value : false
|
|
Indicates whether this component list has t |
| isInitialized |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:476
|
|
Flag to know if the component is ready to render |
| itemHeight |
Type : number
|
|
Calculted ListBox items height. |
| itemsToRender |
Type : any[]
|
Default value : []
|
|
Items to be rendered when ItemsSource is defined. |
| itemTemplateRef |
Type : TemplateRef<any>
|
Decorators :
@ContentChild('listBoxItemTemplate')
|
|
Reference to a ItemTemplate define in HTML. |
| lastSelectedIndex |
Type : number
|
Default value : 0
|
|
Last selected index. |
| listBoxContainer |
Type : ElementRef<HTMLDivElement>
|
Decorators :
@ViewChild('listBoxContainer')
|
|
Reference to the listbox container. |
| Private listBoxTopElementIndex |
Type : number
|
Default value : 0
|
|
Keeps track of the top visible element of the list boxy |
| listHeight |
Type : number
|
|
Calculted list main container height. |
| listItemsRef |
Type : QueryList<any>
|
Decorators :
@ContentChildren('listBoxItem')
|
|
Query list with a set of items define in HTML. |
| Public model |
Type : ListBoxModel
|
Decorators :
@Input()
|
|
Object with listbox properties and events |
| Protected modelProxy |
Type : ListBoxModel
|
Default value : ModelProxy.create<ListBoxModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:485
|
|
ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings. |
| renderedItems |
Type : QueryList<ElementRef<Element>>
|
Decorators :
@ViewChildren('listBoxItemRef')
|
|
Query list with a set of rendered items. |
| resizeObservable |
Type : Observable<Event>
|
|
Observer for the window resize event |
| resizeSubscription |
Type : Subscription
|
|
Subscription called when the window is resized Used to refresh the virtualized container dimensions |
| selectionChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
SelectionChanged EventEmitter |
| shouldReRender |
Type : boolean
|
|
Flag to know if the VirtualScroller should be rerendered. |
| tempDataTransfer |
Type : any
|
|
Data to be transfered to other drag and drop list. |
| virtualScrollRef |
Type : CdkVirtualScrollViewport
|
Decorators :
@ViewChild(CdkVirtualScrollViewport)
|
|
Material virtual Scoll reference. |
| 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 |
| itemsSource | ||||||
getitemsSource()
|
||||||
|
Gets the collection used to generate the content of the items
Returns :
any
|
||||||
setitemsSource(value: any)
|
||||||
|
Sets a collection used to generate the content of the items
Parameters :
Returns :
void
|
| displayMemberPath | ||||||
getdisplayMemberPath()
|
||||||
|
The name or path of the property that is displayed for each data item.
Returns :
string | BindingInfo
|
||||||
setdisplayMemberPath(value: string | BindingInfo)
|
||||||
|
Set displayMemberPath
Parameters :
Returns :
void
|
| selectedIndex | ||||||
getselectedIndex()
|
||||||
|
Returns selected index from model
Returns :
number | BindingInfo
|
||||||
setselectedIndex(value: number | BindingInfo)
|
||||||
|
Set selectedIndex property
Parameters :
Returns :
void
|
| selectedItem | ||||||
getselectedItem()
|
||||||
|
Returns selected index from model
Returns :
any
|
||||||
setselectedItem(value: any)
|
||||||
|
Input to set the selectedItem for the listBox
Parameters :
Returns :
void
|
| selectionMode | ||||||
getselectionMode()
|
||||||
|
Defines SelectionMode that items could be selected
Returns :
any
|
||||||
setselectionMode(value: any)
|
||||||
|
Sets the selectionMode to the model
Parameters :
Returns :
void
|
| itemTemplate | ||||||
getitemTemplate()
|
||||||
|
Returns the ItemTemplate applied from the model
Returns :
DataTemplate
|
||||||
setitemTemplate(value: DataTemplate)
|
||||||
|
Sets the ItemTemplate to apply through the model
Parameters :
Returns :
void
|
| borderBrush | ||||||
getborderBrush()
|
||||||
|
Gets the border brush of the control.
Returns :
any
|
||||||
setborderBrush(value: any)
|
||||||
|
Sets the border brush of the control.
Parameters :
Returns :
void
|
| isDragDrop |
getisDragDrop()
|
|
Flag to know if the ListBox items can be dragged.
Returns :
boolean
|
| listItemsRefArray |
getlistItemsRefArray()
|
|
Returns an array with listItemsRef items.
Returns :
any[]
|
| containsUIElements |
getcontainsUIElements()
|
|
Verifies if the items collections contains UIElements to be rendered
Returns :
boolean
|
| items |
getitems()
|
|
Returns current model items.
Returns :
ItemsCollectionModel
|
| sizeResolved |
getsizeResolved()
|
|
Returns true if the calculated height is resolved
Returns :
boolean
|
| selectedItems |
getselectedItems()
|
|
Returns a list with the selected items.
Returns :
IList<unknown>
|
| virtualizedItemHeight |
getvirtualizedItemHeight()
|
|
Returns calculted list height or a default.
Returns :
number
|
| virtualizeListHeight |
getvirtualizeListHeight()
|
|
Returns calculted ListBox item height or a default.
Returns :
number
|
| isTemplateRef |
getisTemplateRef()
|
|
Returns true if the current item is selected.
Returns :
TemplateRef<any>
|
| isComponentRef |
getisComponentRef()
|
|
Returns true if the current item is selected.
Returns :
any
|
import {
AfterContentInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
EventEmitter,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
QueryList,
ContentChild,
TemplateRef,
ViewChildren,
ViewChild,
ElementRef,
DoCheck,
AfterViewInit,
} from '@angular/core';
import {
AngularComponentId,
BindingInfo,
ComponentId,
ListBoxModel,
ModelProxy,
SelectionMode,
DragEventArgs,
ItemDragEventArgs,
DragDropEffects,
DataTemplate,
SolidColorBrush,
smColorToCssColor,
ItemsCollectionModel,
IList,
} from '@mobilize/wms-framework';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { fromEvent, Observable, Subscription } from 'rxjs';
import { DragDropService } from '../../services/drag-drop.service';
import { BaseComponent } from '../base/base.component';
import { ListBoxDragDropTargetComponent } from '../list-box-drag-drop-target/list-box-drag-drop-target.component';
import { Utils } from '../../utils';
/**
* Angular Component for the ListBox Control
*
* @export
* @class ListBoxComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterContentInit}
* @implements {DoCheck}
* @implements {OnDestroy}
*/
@Component({
selector: 'wm-list-box',
templateUrl: './list-box.component.html',
styleUrls: ['./list-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.listBox])
export class ListBoxComponent
extends BaseComponent
implements OnInit, AfterContentInit, AfterViewInit, DoCheck, OnDestroy
{
/**
* Object with listbox properties and events
*
* @type {ListBox}
* @memberof ListBoxComponent
*/
@Input()
public model: ListBoxModel;
/**
* SelectionChanged EventEmitter
*
* @type {EventEmitter<any>}
* @memberof ListBoxComponent
*/
@Output()
selectionChanged: EventEmitter<any> = new EventEmitter<any>();
/**
* Sets a collection used to generate the content of the items
*
* @type {*}
* @memberof ListBoxComponent
*/
@Input()
set itemsSource(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.ItemsSourceProperty,
value
)
) {
this.modelProxy.ItemsSource = value;
}
}
/**
* Gets the collection used to generate the content of the items
*
* @readonly
* @type {*}
* @memberof ListBoxComponent
*/
get itemsSource(): any {
return this.model.ItemsSource;
}
/**
* Set displayMemberPath
*
* @type {string | BindingInfo}
* @memberof ListBoxComponent
*/
set displayMemberPath(value: string | BindingInfo) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.DisplayMemberPathProperty,
value
)
) {
this.modelProxy.DisplayMemberPath = value as string;
}
}
/**
* The name or path of the property that is displayed for each data item.
*
* @type {string | BindingInfo}
* @memberof ListBoxComponent
*/
@Input()
get displayMemberPath(): string | BindingInfo {
return this.model.DisplayMemberPath;
}
/**
* Set selectedIndex property
*
* @memberof ListBoxComponent
*/
@Input()
set selectedIndex(value: number | BindingInfo) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.DisplayMemberPathProperty,
value
)
) {
this.modelProxy.SelectedIndex = value as number;
}
}
/**
* Returns selected index from model
*
* @readonly
* @type {number}
* @memberof ListBoxComponent
*/
get selectedIndex(): number | BindingInfo {
return this.model.SelectedIndex;
}
/**
* Input to set the selectedItem for the listBox
*
* @type {*}
* @memberof ListBoxComponent
*/
@Input()
set selectedItem(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.SelectedItemProperty,
value
)
) {
this.modelProxy.SelectedItem = value;
}
}
/**
* Returns selected index from model
*
* @readonly
* @type {number}
* @memberof ListBoxComponent
*/
get selectedItem(): any {
return this.model.SelectedItem;
}
/**
* Sets the selectionMode to the model
*
* @memberof ListBoxComponent
*/
@Input()
set selectionMode(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.SelectedItemProperty,
value
)
) {
if (value === 'Single') {
this.modelProxy.SelectionMode = SelectionMode.Single;
} else if (value === 'Multiple') {
this.modelProxy.SelectionMode = SelectionMode.Multiple;
} else if (value === 'Extended') {
this.modelProxy.SelectionMode = SelectionMode.Extended;
}
}
}
/**
* Defines SelectionMode that items could be selected
*
* @readonly
* @type {*}
* @memberof ListBoxComponent
*/
get selectionMode(): any {
return this.model.SelectionMode;
}
/**
* Sets the ItemTemplate to apply through the model
*
* @memberof ListBoxComponent
*/
@Input()
set itemTemplate(value: DataTemplate) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.ItemTemplateProperty,
value
) &&
value instanceof DataTemplate
) {
this.modelProxy.ItemTemplate = value;
}
}
/**
* Returns the ItemTemplate applied from the model
*
* @readonly
* @type {(DataTemplate)}
* @memberof ListBoxComponent
*/
get itemTemplate(): DataTemplate {
return this.model.ItemTemplate;
}
/**
* Sets the border brush of the control.
*
* @memberof ListBoxComponent
*/
@Input()
set borderBrush(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
ListBoxModel.BorderBrushProperty,
value
)
) {
this.modelProxy.BorderBrush = Utils.createSolidBrush(value);
}
}
/**
* Gets the border brush of the control.
*
* @readonly
* @type {*}
* @memberof ListBoxComponent
*/
get borderBrush(): any {
return this.model.BorderBrush instanceof SolidColorBrush
? smColorToCssColor(this.model.BorderBrush.Color)
: null;
}
/**
* Flag to know if the ListBox items can be dragged.
*
* @readonly
* @type {boolean}
* @memberof ListBoxComponent
*/
get isDragDrop(): boolean {
return this.dragAndDropReference?.allowDrop as boolean;
}
/**
* Material virtual Scoll reference.
*
* @type {CdkVirtualScrollViewport}
* @memberof ListBoxComponent
*/
@ViewChild(CdkVirtualScrollViewport)
virtualScrollRef: CdkVirtualScrollViewport;
/**
* Query list with a set of rendered items.
*
* @type {QueryList<ElementRef<Element>>}
* @memberof ListBoxComponent
*/
@ViewChildren('listBoxItemRef')
renderedItems: QueryList<ElementRef<Element>>;
/**
* Reference to the listbox container.
*
* @type {ElementRef<HTMLDivElement>}
* @memberof ListBoxComponent
*/
@ViewChild('listBoxContainer')
listBoxContainer: ElementRef<HTMLDivElement>;
/**
* Reference to a ItemTemplate define in HTML.
*
* @type {TemplateRef<any>}
* @memberof ListBoxComponent
*/
@ContentChild('listBoxItemTemplate')
itemTemplateRef: TemplateRef<any>;
/**
* Query list with a set of items define in HTML.
*
* @type {QueryList<any>}
* @memberof ListBoxComponent
*/
@ContentChildren('listBoxItem')
listItemsRef: QueryList<any>;
/**
* Returns an array with listItemsRef items.
*
* @type {any[]}
* @memberof ListBoxComponent
*/
get listItemsRefArray(): any[] {
return this.listItemsRef.toArray();
}
/**
* Drag and drop subscription handler
*
* @type {Subscription}
* @memberof ListBoxComponent
*/
dragDropHandler: Subscription;
/**
* Data to be transfered to other drag and drop list.
*
* @type {any}
* @memberof ListBoxComponent
*/
tempDataTransfer: any;
/**
* Reference to ListBoxDragDropTargetComponent if it exist.
*
* @type {ListBoxDragDropTargetComponent}
* @memberof ListBoxComponent
*/
dragAndDropReference: ListBoxDragDropTargetComponent;
/**
* Calculted list main container height.
*
* @type {number}
* @memberof ListBoxComponent
*/
listHeight: number;
/**
* Calculted ListBox items height.
*
* @type {number}
* @memberof ListBoxComponent
*/
itemHeight: number;
/**
* Array that stores components to be rendered when theres is no ItemsSource.
*
* @type {any[]}
* @memberof ListBoxComponent
*/
componentsToRender: any[] = [];
/**
* Items to be rendered when ItemsSource is defined.
*
* @type {any[]}
* @memberof ListBoxComponent
*/
itemsToRender: any[] = [];
/**
* Last selected index.
*
* @memberof ListBoxComponent
*/
lastSelectedIndex = 0;
/**
* Flag to know if the VirtualScroller should be rerendered.
*
* @type {boolean}
* @memberof ListBoxComponent
*/
shouldReRender: boolean;
/**
* Observer for the window resize event
*
* @memberof ListBoxComponent
*/
resizeObservable: Observable<Event>;
/**
* Subscription called when the window is resized
* Used to refresh the virtualized container dimensions
*
* @memberof ListBoxComponent
*/
resizeSubscription: Subscription;
/**
* Observer used to react to size changes
* in the listbox container.
*
* @type {ResizeObserver}
* @memberof ListBoxComponent
*/
containerResizeObserver = new ResizeObserver(
this.containerResizeHandler.bind(this)
);
/**
* Flag to know if the component is ready to render
*
* @memberof ListBoxComponent
*/
isInitialized = false;
/**
* ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {ListBox}
* @memberof ListBoxComponent
*/
protected modelProxy: ListBoxModel = ModelProxy.create<ListBoxModel>();
/**
* Creates an instance of ListBoxComponent.
*
* @param {ListBoxModel} injectedModel
* @param {ChangeDetectorRef} cd
* @param {Injector} injector
* @param {DragDropService} dragDropService
* @memberof ListBoxComponent
*/
/* istanbul ignore next */
public constructor(
@Optional() private injectedModel: ListBoxModel,
private cd: ChangeDetectorRef,
private injector: Injector,
@Optional() private dragDropService: DragDropService,
private element: ElementRef
) {
super(cd, injector);
this.model = injectedModel;
}
/**
* Angular lifecycle hook.
* Initialize model
*
* @memberof ListBoxComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new ListBoxModel();
this.setupModel(this.model);
super.ngOnInit();
/* istanbul ignore next */
this.dragDropHandler =
this.dragDropService?.dataTransferObservable.subscribe((e: any) => {
this.tempDataTransfer = e;
});
this.registerObservers(
this.selectionChanged,
this.model,
this.model.SelectionChanged
);
this.model.items.change.addHandler(this.syncModel, this);
// Window resize event
this.resizeObservable = fromEvent(window, 'resize');
this.resizeSubscription = this.resizeObservable.subscribe((evt) =>
this.onWindowResize(evt)
);
}
/**
* Angular lifeCycle hook.
*
* @memberof ListBoxComponent
*/
ngAfterViewInit(): void {
super.ngAfterViewInit();
this.model.Loaded.removeAllHandlers();
this.containerResizeObserver.observe(this.listBoxContainer.nativeElement);
}
/**
* Angular lifeCycle hook.
* Enables a rendering flag to avoid ExpressionChangedAfterItHasBeenCheckedError.
*
* @memberof ListBoxComponent
*/
ngAfterContentInit(): void {
super.ngAfterContentInit();
this.syncStaticItems();
this.isInitialized = true;
this.syncModel();
this.assignItems();
this.detectChangesAction();
}
/**
* Angular lifeCycle hook.
*
* @memberof ListBoxComponent
*/
ngDoCheck(): void {
super.ngDoCheck();
if (this.isInitialized && !this.sizeResolved && this.isRendered()) {
this.calcContainerSize();
this.calcItemSize();
if (this.sizeResolved) {
this.detectChangesAction();
}
}
if (this.isRendered() && !this.shouldReRender) {
this.shouldReRender = true;
this.detectChangesAction();
}
if (!this.isRendered()) {
this.shouldReRender = false;
}
}
/**
* Angular lifeCycle hook.
*
* @memberof ListBoxComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
/* istanbul ignore next */
this.dragDropHandler?.unsubscribe();
this.resizeSubscription.unsubscribe();
this.model.items?.change.removeHandler(this.syncModel, this);
this.containerResizeObserver.disconnect();
}
/**
* Angular lifeCycle hook.
*
* @memberof ListBoxComponent
*/
modelChangeHandler(name: string): void {
this.triggerLoadedEvent(name);
super.modelChangeHandler(name);
}
/**
* Syncs the model with static added values.
*
* @type {void}
* @memberof ListBoxComponent
*/
syncModel(): void {
if (!this.isInitialized) return;
if (
this.itemTemplateRef &&
!Utils.isEqual(this.model.ItemTemplate, this.itemTemplateRef)
) {
this.model.ItemTemplate = new DataTemplate(this.itemTemplateRef, this);
}
if (this.listItemsRefArray.length > 0 || this.containsUIElements) {
this.componentsToRender = Utils.mergeItems(
this.items.internalArray,
this.listItemsRefArray,
this.isInitialized,
this.injector
);
}
this.virtualScrollRefresh();
}
/**
* Syncs static items with the model
*
* @type {void}
* @memberof ListBoxComponent
*/
syncStaticItems(): void {
if (this.listItemsRefArray.length === 0) return;
const mergedItems = Utils.mergeItems(
this.items.internalArray,
this.listItemsRefArray,
this.isInitialized,
this.injector
);
mergedItems.forEach((item: any) => {
this.model.items.add(item.item);
});
}
/**
* It is neccesary to re-render CdkVirtualScrollViewport component because it has
* some issues when the ItemsSource have changed.
*
* @type {void}
* @memberof ListBoxComponent
*/
virtualScrollRefresh(): void {
this.itemsToRender = [];
this.detectChanges();
this.assignItems();
this.detectChanges();
}
/**
* Assing items to be rendered.
*
* @type {any}
* @memberof ListBoxComponent
*/
assignItems(): void {
if (this.componentsToRender.length > 0) {
this.itemsToRender = this.componentsToRender;
} else {
this.itemsToRender = this.items.internalArray;
}
}
/**
* Refreshes the virtualized container dimensions
*
* @param {*} event
* @memberof ListBoxComponent
*/
onWindowResize(event: any): void {
this.calcContainerSize();
this.calcItemSize();
this.detectChangesAction();
}
/**
* Callback function to handle listbox container size changes.
*
* @param {ResizeObserverEntry[]} entries
* @memberof ListBoxComponent
*/
containerResizeHandler(entries: ResizeObserverEntry[]): void {
const height = entries[0].contentBoxSize[0].blockSize;
if (height !== 0 && this.listHeight !== height) {
this.listHeight = height;
this.detectChangesAction();
}
}
/**
* Verifies if the items collections contains UIElements to be rendered
*
* @returns boolean True if the collection contains UIElements otherwise false
* @memberof ListBoxComponent
*/
get containsUIElements(): boolean {
return this.itemsSource ? false : Utils.containsUIElement(this.items);
}
/**
* Returns current model items.
*
* @type {ItemsCollectionModel}
* @memberof ListBoxComponent
*/
get items(): ItemsCollectionModel {
return this.model.items;
}
/**
* Returns true if the calculated height is resolved
*
* @type {boolean}
* @memberof ListBoxComponent
*/
get sizeResolved(): boolean {
return this.itemHeight && this.itemHeight > 10;
}
/**
* Returns a list with the selected items.
*
* @type {IList<unknown>}
* @memberof ListBoxComponent
*/
get selectedItems(): IList<unknown> {
return this.model.SelectedItems;
}
/**
* Returns calculted list height or a default.
*
* @type {number}
* @memberof ListBoxComponent
*/
get virtualizedItemHeight(): number {
return this.itemHeight ?? 20;
}
/**
* Returns calculted ListBox item height or a default.
*
* @type {number}
* @memberof ListBoxComponent
*/
get virtualizeListHeight(): number {
return !isNaN(this.model.Height)
? this.model.Height
: this.listHeight ?? 650;
}
/**
* DragOver handler, allows container to drop items.
*
* @param {any} event
* @memberof ListBoxComponent
*/
dragOverHandler(event: any): void {
if (this.isDragDrop) {
event.preventDefault();
}
}
/**
* Drag started event handler, it will only be execute when is a drag and drop list.
*
* @param {DragEvent} _event
* @param {any} itemModel
* @param {any} item
* @memberof ListBoxComponent
*/
dragStartHandler(_event: DragEvent, itemModel: any, item: any): void {
if (this.isDragDrop) {
const itemDragArgs = new ItemDragEventArgs();
itemDragArgs.Data = item;
itemDragArgs.DragSource = itemModel;
itemDragArgs.Effects = DragDropEffects.All;
this.dragDropService?.notifyDataTransfer(item);
const params = {
sender: this.dragAndDropReference.model,
e: itemDragArgs,
};
this.dragAndDropReference.itemDragStarting.emit(params);
this.dragAndDropReference.model.ItemDragCompleted.fire([
params.sender,
params.e,
]);
}
}
/**
* Drag end event handler, it will only be execute when is a drag and drop list.
*
* @param {any} _event
* @param {any} itemModel
* @param {any} item
* @memberof ListBoxComponent
*/
dragEndHandler(_event: any, itemModel: any, item: any): void {
if (this.isDragDrop) {
const itemDragArgs = new ItemDragEventArgs();
itemDragArgs.Data = item;
itemDragArgs.DragSource = itemModel;
itemDragArgs.Effects = DragDropEffects.All;
const params = {
sender: this.dragAndDropReference.model,
e: itemDragArgs,
};
this.dragAndDropReference.itemDragCompleted.emit(params);
this.dragAndDropReference.model.ItemDragCompleted.fire([
params.sender,
params.e,
]);
}
}
/**
* Drop event handler, it will only be execute when is a drag and drop list.
*
* @param {any} event
* @memberof ListBoxComponent
*/
dropHandler(event: any): void {
if (this.isDragDrop) {
event.preventDefault();
event.stopPropagation();
const dragArgs = new DragEventArgs();
dragArgs.Data = this.tempDataTransfer;
this.tempDataTransfer = undefined;
dragArgs.Effects = DragDropEffects.All;
const params = { sender: this.dragAndDropReference.model, e: dragArgs };
dragArgs.OriginalSource = this.getSourceComponent(
event.target as HTMLElement
);
this.dragAndDropReference.drop.emit(params);
this.dragAndDropReference.model.Drop.fire([params.sender, params.e]);
}
}
/**
* Locate component from HTML element
*
* @param {HTMLElement} src
* @return {*} {unknown}
* @memberof ListBoxComponent
*/
getSourceComponent(src: HTMLElement): unknown {
let result: unknown = null;
while (src && !src['__component']) {
src = src.parentElement;
}
if (src && src['__component']) {
result = src['__component'].model;
}
return result;
}
/**
* Based on the main container calculated list height.
*
* @type {void}
* @memberof ListBoxComponent
*/
calcContainerSize(): void {
if (this.height) return;
const container = this.element?.nativeElement?.getBoundingClientRect();
this.listHeight =
container && container.height > 20 ? container.height : undefined;
}
/**
* Based on the listBox items ref calculated items height.
*
* @type {void}
* @memberof ListBoxComponent
*/
calcItemSize(): void {
const item = this.renderedItems.toArray();
const itemSize = item[0]?.nativeElement?.getBoundingClientRect().height;
this.itemHeight = itemSize && itemSize > 20 ? itemSize : undefined;
}
/**
* Returns if the listBox nativeElement reference is currently on the window.
*
* @type {boolean}
* @memberof ListBoxComponent
*/
isRendered(): boolean {
return this.element?.nativeElement
? document.contains(this.element.nativeElement)
: false;
}
/**
* Returns true if the current item is selected.
*
* @param {any} value
* @type {boolean}
* @memberof ListBoxComponent
*/
isSelectedItem(value: any): boolean {
if (this.componentsToRender.length > 0) {
return (
this.selectedItems.contains(value.item) ||
this.selectedItem === value.item
);
}
return this.selectedItems.contains(value) || this.selectedItem === value;
}
/**
* Returns true if the current item is selected.
*
* @type {boolean}
* @memberof ListBoxComponent
*/
get isTemplateRef(): TemplateRef<any> {
return this.itemTemplate?.templateRef;
}
/**
* Returns true if the current item is selected.
*
* @type {any}
* @memberof ListBoxComponent
*/
get isComponentRef(): any {
return this.itemTemplate?.TemplateComponentConstructor;
}
/**
* Returns a string representation of the given item.
*
* @param {any} item
* @type {string}
* @memberof ListBoxComponent
*/
getDisplayItem(item: any): string {
return this.displayMemberPath
? item[this.displayMemberPath as string]
: item;
}
/**
* Item click handler
*
* @param {PointerEvent} event
* @param {number} index
* @type {void}
* @memberof ListBoxComponent
*/
itemClickHandler(event: MouseEvent, index: number): void {
this.focusedIndex = index;
this.selectionHandler(index, event.shiftKey, event.ctrlKey);
}
/**
* Item key down handler
*
* @param {any} event
* @param {number} index
* @type {void}
* @memberof ListBoxComponent
*/
itemKeyDownHandler(event: any): void {
if (event.code !== 'Tab') {
event.preventDefault();
event.stopPropagation();
}
if (event.code === 'Space' || event.code === 'Enter') {
this.selectionHandler(this.focusedIndex, event.shiftKey, event.ctrlKey);
} else if (event.code === 'ArrowUp') {
this.handleKeyUp(event);
} else if (event.code === 'ArrowDown') {
this.handleKeyDown(event);
}
}
/**
* Selection changed handler
*
* @param {number} index
* @param {boolean} isShiftPressed
* @param {boolean} isCtrlPressed
* @type {void}
* @memberof ListBoxComponent
*/
selectionHandler(
index: number,
isShiftPressed: boolean,
isCtrlPressed: boolean
): void {
this.focusedIndex = index;
if (this.selectionMode === SelectionMode.Extended) {
this.handleExtendedModeSelection(index, isShiftPressed, isCtrlPressed);
} else {
this.model.Select(index);
}
}
/**
* Handler triggering loaded event when the ItemsSource property have changed (Bug #504499)
*
* @param {string} name
* @memberof ListBoxComponent
*/
triggerLoadedEvent(name: string): void {
if (name !== 'ItemsSource') return;
this.model.Loaded.fire([this, null]);
this.model.Loaded.removeAllHandlers();
}
/**
* Handles the click selection when the list is in extended mode
*
* @private
* @param {number} index the index where the selection event happened
* @param {boolean} isShiftPressed indicates whether shift key was pressed
* @param {boolean} isCtrlPressed indicates whether control key was pressed
* @memberof ListBoxComponent
*/
private handleExtendedModeSelection(
index: number,
isShiftPressed: boolean,
isCtrlPressed: boolean
): void {
if (isShiftPressed) {
this.model.Select(
Math.min(this.lastSelectedIndex, index),
Math.max(this.lastSelectedIndex, index),
isCtrlPressed
);
} else {
this.model.Select(index, -1, isCtrlPressed);
}
// last selected index for extended mode update only when shift not pressed
if (!isShiftPressed) {
this.lastSelectedIndex = index;
}
}
/**
* Gets a reference to the CdkVirtualScrollViewport directive used for virtualization
*
* @type {IgxForOfDirective<any>}
* @memberof ListBoxComponent
*/
@ViewChild(CdkVirtualScrollViewport)
cdkVirtualScrollViewport: CdkVirtualScrollViewport;
/**
* Indicates the item index that contains the item "focus".
* The focus is not the actual html focus but the current item element (different
* than selected in multiselect or extended modes)
*
* @memberof ListBoxComponent
*/
focusedIndex = -1;
/**
* Keeps track of the top visible element of the list boxy
*
* @private
* @memberof ListBoxComponent
*/
private listBoxTopElementIndex = 0;
/**
* Indicates whether this component list has t
*
* @memberof ListBoxComponent
*/
hasControlFocus = false;
/**
* Handles the focus lost event
*
* @memberof ListBoxComponent
*/
onBlur(): void {
this.hasControlFocus = false;
this.cd.markForCheck();
}
/**
* Handles the focus gained event
*
* @memberof ListBoxComponent
*/
onFocus(): void {
this.hasControlFocus = true;
}
/**
* Handles the key up action by navigating to previous list box items.
*
* @private
* @param {*} event the key event generated from html action
* @memberof ListBoxComponent
*/
private handleKeyUp(event: any): void {
if (this.focusedIndex > 0) {
const requiresScroll =
this.focusedIndex - 1 < this.listBoxTopElementIndex;
this.performKeyNavigation(event, this.focusedIndex - 1, requiresScroll);
}
}
/**
* Handles the key down action by navigating to next list box items.
*
* @private
* @param {*} event the key event generated from html action
* @memberof ListBoxComponent
*/
private handleKeyDown(event: any): void {
if (this.focusedIndex + 1 < this.model.items.internalArray.length) {
// calculating the element size by dividing rendered content size by rendered elements
const renderedCount =
this.cdkVirtualScrollViewport.getRenderedRange().end -
this.cdkVirtualScrollViewport.getRenderedRange().start +
1;
const elementSize =
this.cdkVirtualScrollViewport.measureRenderedContentSize() /
renderedCount;
// having the element size .. let's get the amount of visible elements
const elementsPerPage = Math.round(
this.cdkVirtualScrollViewport.getViewportSize() / elementSize
);
// requires scroll if new element index is bigger than last visible element
const requiresScroll =
this.focusedIndex + 1 >
this.listBoxTopElementIndex + elementsPerPage - 1;
this.performKeyNavigation(event, this.focusedIndex + 1, requiresScroll);
}
}
/**
* Handles the top index change event to keep track of the top element of the list box
*
* @param {*} event
* @memberof ListBoxComponent
*/
handleIndexChange(event: any): void {
this.listBoxTopElementIndex = event;
}
/**
* Performs the list item navigation as a result of a key action.
* Navigating implies scrolling if required, selecting the new item and moving the focus
* to the new item.
*
* @private
* @param {*} event
* @param {number} targetIndex
* @param {boolean} requiresScroll
* @memberof ListBoxComponent
*/
private performKeyNavigation(
event: any,
targetIndex: number,
requiresScroll: boolean
): void {
/* istanbul ignore else */
if (requiresScroll) {
this.cdkVirtualScrollViewport.scrollToIndex(targetIndex);
}
this.focusedIndex = targetIndex;
event.stopPropagation();
}
/**
* Indicates whether the item in the given index has the focus or not.
*
* @private
* @param {number} index the index of the item to test for.
* @return {*} {boolean}
* @memberof ListBoxComponent
*/
isFocusedItem(index: number): boolean {
return this.hasControlFocus && index === this.focusedIndex;
}
}
<div
*ngIf="isInitialized"
[style.border-color]="borderBrush"
class="autoHeightWidth listBoxContainer"
role="listbox"
[tabindex]="tabIndex"
(blur)="onBlur()"
(focus)="onFocus()"
(keydown)="itemKeyDownHandler($event)"
#listBoxContainer
>
<ng-container *ngIf="itemsToRender.length && shouldReRender">
<cdk-virtual-scroll-viewport
[style.height.px]="virtualizeListHeight"
[itemSize]="virtualizedItemHeight"
role="scrollbar"
(scrolledIndexChange)="handleIndexChange($event)"
>
<div
*cdkVirtualFor="
let item of itemsToRender;
let i = index;
templateCacheSize: 0
"
role="option"
class="listBoxItem"
[attr.aria-selected]="
isSelectedItem | memoize: item:selectedItem:selectedItems.count
"
[class.listBoxItemSelected]="
isSelectedItem | memoize: item:selectedItem:selectedItems.count
"
[class.listBoxItemFocused]="
isFocusedItem | memoize: i:focusedIndex:hasControlFocus
"
[style.height.px]="itemHeight"
[draggable]="isDragDrop"
(click)="itemClickHandler($event, i)"
(drop)="dropHandler($event)"
(dragover)="dragOverHandler($event)"
(dragstart)="dragStartHandler($event, model, item)"
(dragend)="dragEndHandler($event, model, item)"
#listBoxItemRef
>
<!-- ItemSource without ItemTemplate -->
<ng-container *ngIf="itemsSource && !itemTemplate">
{{ getDisplayItem | memoize: item:itemsSource }}
</ng-container>
<!-- ItemSource with ItemTemplate as ComponentRef-->
<ng-container *ngIf="itemsSource && isComponentRef">
<ng-container
*ngComponentOutlet="
isComponentRef;
injector: item | toInjector: itemTemplate.declaringContext
"
>
</ng-container>
</ng-container>
<!-- ItemSource with ItemTemplate as TemplareRef -->
<div *ngIf="itemsSource && isTemplateRef">
<ng-container
[ngTemplateOutlet]="isTemplateRef"
[ngTemplateOutletContext]="{ context: item }"
>
</ng-container>
</div>
<!-- Components -->
<ng-container *ngIf="!itemsSource && !itemTemplate && item">
<ng-container
*ngComponentOutlet="item.component; injector: item.customInjector"
></ng-container>
</ng-container>
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
</div>
./list-box.component.scss
@import '../../scss/variables';
.listBoxContainer {
border: $default-control-border;
box-sizing: border-box;
border-radius: $default-control-border-radius;
user-select: none;
background-color: $accent-background;
color: $accent-color;
.listBoxItem {
padding: var(--listbox-item-padding, $listbox-item-padding);
border: 1px transparent solid;
box-sizing: border-box;
&:hover {
background-color: $list-box-item-hover;
}
}
.listBoxItemSelected {
background-color: $list-box-item-selected;
}
.listBoxItemFocused {
border: 1px solid $default-control-active-color;
}
}