projects/i-components/src/lib/components/outlook-bar/outlook-bar.component.ts
Angular Component for the OutlookBar Control
OnInit
AfterViewInit
DoCheck
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
ModelProviderService
|
| selector | wm-outlook-bar |
| styleUrls | ./outlook-bar.component.scss |
| templateUrl | ./outlook-bar.component.html |
Public
constructor(injector: Injector, cdRef: ChangeDetectorRef, provider: ModelProviderService, componentFactoryResolver: ComponentFactoryResolver, injectedModel: OutlookBarModel)
|
||||||||||||||||||||||||
|
Creates an instance of OutlookBarComponent.
Parameters :
|
| allowMinimized | |
Type : boolean
|
|
|
Property of the OutlookBarGroup that sets the possibility of the XamOutlookBar to be minimized |
|
| defaultLargeIconTemplate | |
Type : TemplateRef<any>
|
|
|
Template reference to be used as the Large icon image for Group Template. If you provide this input, it will overwrite the exist section. |
|
| defaultSmallIconTemplate | |
Type : TemplateRef<any>
|
|
|
Template reference to be used as the small image for Group Template. If you provide this input, it will overwrite the exist section. |
|
| groupContentTemplate | |
Type : TemplateRef<any>
|
|
|
Template reference to be used as the Content Group Template. If you provide this input, it will overwrite the exist section. |
|
| groupHeaderTemplate | |
Type : TemplateRef<any>
|
|
|
Template reference to be used as the Header Group Template. If you provide this input, it will overwrite the exist section. |
|
| groupsSource | |
Type : any
|
|
|
Property of the OutlookBarGroup that contains a collection of items to create the OutlookBarGroups. |
|
| isMinimized | |
Type : boolean
|
|
|
Property of the OutlookBarGroup that sets the component as minimized |
|
| minimizedWidth | |
| model | |
Type : OutlookBarModel
|
|
|
Object with properties and events for the OutlookBar. |
|
| selectedGroup | |
|
Set the current component selectedGroup |
|
| 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... |
|
| navigationPaneExpanding | |
Type : EventEmitter<literal type>
|
|
|
Trigger for navigationPaneExpanding event |
|
| navigationPaneMinimizing | |
Type : EventEmitter<literal type>
|
|
|
Trigger for navigationPaneMinimizing event |
|
| selectedGroupChanged | |
Type : EventEmitter<literal type>
|
|
|
Trigger selected group changed |
|
| 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. |
| window:click |
Arguments : '$event.target'
|
window:click(target: any)
|
|
Listen clicks on the current window, if click ocurrs outside of the popup it should be closed. |
| addControl | ||||||
addControl(newElement: any)
|
||||||
|
Add a component instance to the outlookBar component
Parameters :
Returns :
any
|
| addItemsModel |
addItemsModel()
|
|
Add items to model from itemsSource
Returns :
void
|
| assignItems |
assignItems()
|
|
Assign components groups to model collection
Returns :
void
|
| assignStaticItems |
assignStaticItems()
|
|
Assign static items to the OutlookBarComponent
Returns :
void
|
| calcHeaderHeight |
calcHeaderHeight()
|
|
Try to resolve the OutlookBar item height once is rendered.
Returns :
void
|
| calcItemHeight | ||||||
calcItemHeight(item: any)
|
||||||
|
Returns OutlookBar item height
Parameters :
Returns :
string
|
| clickListener | ||||||
clickListener(target: any)
|
||||||
Decorators :
@HostListener('window:click', ['$event.target'])
|
||||||
|
Listen clicks on the current window, if click ocurrs outside of the popup it should be closed.
Parameters :
Returns :
void
|
| closePopup |
closePopup()
|
|
Deestroy the OutlookBarPopupComponent.
Returns :
void
|
| collapseAllButSelected |
collapseAllButSelected()
|
|
Collapse all panels in control
Returns :
void
|
| Public collapsed | ||||||
collapsed(index: number)
|
||||||
|
Method to validate if should collapse or not the expansion panel.
Parameters :
Returns :
boolean
{boolean} |
| collectionModifiedHandler |
collectionModifiedHandler(e: any, a: any)
|
|
Collection modified handler subscription
Returns :
void
|
| dynamicElements |
dynamicElements()
|
|
Set up dynamic elements
Returns :
any
{*} |
| getContext | ||||||
getContext(item: any)
|
||||||
|
Return a wrapped object with a context property. If the data comes from a dataContext, it will used this method to generate the groups.
Parameters :
Returns :
any
{context: any} |
| getItemHeader | ||||||
getItemHeader(group: OutlookBarGroupComponent)
|
||||||
|
Returns the item header.
Parameters :
Returns :
string
|
| isGroupSelected | ||||||
isGroupSelected(group: OutlookBarGroupComponent)
|
||||||
|
Returns if the given group is the selected one.
Parameters :
Returns :
boolean
|
| minimizedGroupClickHandler | ||||||
minimizedGroupClickHandler(item: any)
|
||||||
|
sets the values of the floating Panel.
Parameters :
Returns :
void
|
| modelChangeHandler | ||||||
modelChangeHandler(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:763
|
||||||
|
Model change handler event
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:592
|
|
Angular lifeCycle hook
Returns :
void
|
| ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:623
|
|
Angular lifecycle hook
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:642
|
|
Angular lifecycle hook
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:575
|
|
Angular lifeCycle hook
Returns :
void
|
| observeMainContainer |
observeMainContainer()
|
|
Creates a new ResizeObserver instance.
Returns :
void
|
| Public onInteraction | ||||
onInteraction(event)
|
||||
|
Event Handler for when the user click the header Group. Collapse each panel of the collection.
Parameters :
Returns :
void
|
| openPopup | ||||||
openPopup(event: any)
|
||||||
|
Create and attach a new OutlookBarPopupComponent on the body.
Parameters :
Returns :
void
|
| pinHandler |
pinHandler()
|
|
Pin or unpin the OutlookBar Component, and close the Floating panel if the panel is pinned.
Returns :
void
|
| Private processMinimizedState | ||||||
processMinimizedState(name: string)
|
||||||
|
Handle IsMinimized changes in the component
Parameters :
Returns :
void
|
| processSelectedGroup | ||||||
processSelectedGroup(name: string)
|
||||||
|
processing SelectedGroup
Parameters :
Returns :
void
|
| processVisibility | ||||||||
processVisibility(name: string)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:785
|
||||||||
|
Process visibility changes to expand selected group
Parameters :
Returns :
void
|
| resizeObserverCallback | ||||||
resizeObserverCallback(entries: ResizeObserverEntry[])
|
||||||
|
Callback function of the ResizeObserver.
Parameters :
Returns :
void
|
| Private selectedGroupExpand |
selectedGroupExpand()
|
|
Expand the selectedGroup
Returns :
void
|
| validateFloatingItem |
validateFloatingItem()
|
|
Validates if there is selected group but no floatingContext it should set it.
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 ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:857
|
|
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
|
| 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} |
| Public accordion |
Type : QueryList<IgxExpansionPanelComponent>
|
Decorators :
@ViewChildren(IgxExpansionPanelComponent)
|
|
List of IgxExpansionPanel Collection that are generated in the OutlookBarComponent |
| arrowHeaderHeight |
Type : number
|
Default value : 26
|
|
Height value of the header section that shows an arrow that minimize the OutlookBar. |
| collectionModifiedSubscription |
Type : any
|
|
Collection modified subscription |
| Public componentFactoryResolver |
Type : ComponentFactoryResolver
|
| defaultNavigationPaneTooltip |
Type : string
|
Default value : 'Click to expand Navigation Pane'
|
|
Default ToolTip shown while hovering the Navigation Pane. |
| floatingContext |
Type : any
|
|
Context to be used in the floating window when the outlookbar is in unpin mode and the groups are from a template. |
| floatingTemplate |
Type : any
|
|
Variable used to store the template for the floating section. |
| groupContentTemplate |
Type : TemplateRef<any>
|
Decorators :
@Input()
|
|
Template reference to be used as the Content Group Template. If you provide this input, it will overwrite the exist section. |
| groupHeaderTemplate |
Type : TemplateRef<any>
|
Decorators :
@Input()
|
|
Template reference to be used as the Header Group Template. If you provide this input, it will overwrite the exist section. |
| headerHeight |
Type : number
|
|
OutlookBar item header height value. |
| headerHeightResolved |
Type : boolean
|
|
Flag to know if the header height have been resolved. |
| headerHeightTimeout |
Type : any
|
|
Flag to know if there is a timeout in progress to avoid duplicating it. |
| items |
Type : QueryList<OutlookBarGroupComponent>
|
Decorators :
@ContentChildren(OutlookBarGroupComponent)
|
|
List of OutlookBarGroup that are inside of the OutlookBar Component. |
| model |
Type : OutlookBarModel
|
Decorators :
@Input()
|
|
Object with properties and events for the OutlookBar. |
| Protected modelProxy |
Type : OutlookBarModel
|
Default value : ModelProxy.create<OutlookBarModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:416
|
|
ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings. |
| navigationPaneExpanding |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Trigger for navigationPaneExpanding event |
| navigationPaneMinimizing |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Trigger for navigationPaneMinimizing event |
| navigationPaneRef |
Type : ElementRef
|
Decorators :
@ViewChild('navigationPaneRef')
|
|
NavigationPane reference |
| oldSelectedGroup |
Type : any
|
|
Previous selected group |
| outlookbarContainerRef |
Type : ElementRef
|
Decorators :
@ViewChild('outlookbarContainerRef')
|
|
Main outlookbar container reference |
| popupRef |
Type : ComponentRef<OutlookBarPopupComponent>
|
|
OutlookBarPopupComponent reference |
| selectedGroupChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Trigger selected group changed |
| sizeObserver |
Type : ResizeObserver
|
Default value : null
|
|
Reference to the ResizeObserver |
| 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. |
| isInitialized |
Type : any
|
Default value : undefined
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:523
|
|
Flag to know if the component is ready to render |
| 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 |
| groupsSource | ||||||
getgroupsSource()
|
||||||
setgroupsSource(value: any)
|
||||||
|
Property of the OutlookBarGroup that contains a collection of items to create the OutlookBarGroups.
Parameters :
Returns :
void
|
| isMinimized | ||||||
getisMinimized()
|
||||||
setisMinimized(value: boolean)
|
||||||
|
Property of the OutlookBarGroup that sets the component as minimized
Parameters :
Returns :
void
|
| allowMinimized | ||||||
getallowMinimized()
|
||||||
|
Indicates if the component can be minimized
Returns :
boolean
|
||||||
setallowMinimized(value: boolean)
|
||||||
|
Property of the OutlookBarGroup that sets the possibility of the XamOutlookBar to be minimized
Parameters :
Returns :
void
|
| selectedGroup | ||||||
getselectedGroup()
|
||||||
|
Gets the current component Selected group
Returns :
OutlookBarGroupModel
|
||||||
setselectedGroup(value: OutlookBarGroupModel)
|
||||||
|
Set the current component selectedGroup
Parameters :
Returns :
void
|
| groupHeaderControlTemplate |
getgroupHeaderControlTemplate()
|
|
Control template to be used as the header group templte If you provide this input it will override the original section
Returns :
any
|
| groups |
getgroups()
|
|
Gets the Groups model
Returns :
any
|
| minimizedWidth | ||||||
getminimizedWidth()
|
||||||
|
Gets the width with a border adjust adding 1 px.
Returns :
number | BindingInfo
|
||||||
setminimizedWidth(value: number | BindingInfo)
|
||||||
|
Parameters :
Returns :
void
|
| minimizeButtonExpandTooltip |
getminimizeButtonExpandTooltip()
|
|
Gets MinimizeButtonExpandTooltip property from model.
Returns :
string
|
| minimizeButtonMinimizeTooltip |
getminimizeButtonMinimizeTooltip()
|
|
Gets MinimizeButtonMinimizeTooltip property from model.
Returns :
string
|
| navigationPaneMinimizedText |
getnavigationPaneMinimizedText()
|
|
Gets NavigationPaneMinimizedText property from model.
Returns :
string
|
| navigationPaneMinimizedTooltip |
getnavigationPaneMinimizedTooltip()
|
|
Gets NavigationPaneMinimizedTooltip property from model.
Returns :
string
|
| getContextFloating |
getgetContextFloating()
|
|
Return a wrapped object with a context property. If the data comes from a dataContext, it will used this method to generate the floating panel context from the variable floatingContext.
Returns :
any
|
| renderOutlookBar |
getrenderOutlookBar()
|
|
Function to determinate if should render the OutlookBar Groups
Returns :
boolean
|
| containerHeight |
getcontainerHeight()
|
|
Returns main outlookBar container height
Returns :
string
|
| shouldShowArrow |
getshouldShowArrow()
|
|
Returns if the arrow button should be show or not.
Returns :
boolean
|
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
ComponentRef,
ContentChildren,
DoCheck,
ElementRef,
EventEmitter,
HostListener,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
QueryList,
TemplateRef,
ViewChild,
ViewChildren,
} from '@angular/core';
import { IgxExpansionPanelComponent } from 'igniteui-angular';
import { OutlookBarGroupComponent } from '../outlook-bar-group/outlook-bar-group.component';
import {
OutlookBarModel,
OutlookBarGroupModel,
ModelProxy,
ComponentId,
AngularComponentId,
ModelProviderService,
IList,
iuElementAt,
BindingInfo,
} from '@mobilize/wms-framework';
import { BaseComponent } from '../base/base.component';
import { Utils } from '../../utils/utilities';
import { OutlookBarPopupComponent } from '../outlook-bar-popup/outlook-bar-popup.component';
/**
* Angular Component for the OutlookBar Control
*
* @export
* @class OutlookBarComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterViewInit}
* @implements {DoCheck}
* @implements {OnDestroy}
*/
@Component({
selector: 'wm-outlook-bar',
templateUrl: './outlook-bar.component.html',
styleUrls: ['./outlook-bar.component.scss'],
providers: [ModelProviderService],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.outlookBar])
export class OutlookBarComponent
extends BaseComponent
implements OnInit, AfterViewInit, DoCheck, OnDestroy
{
/**
* Default ToolTip shown while hovering the Navigation Pane.
*
* @memberof OutlookBarComponent
*/
defaultNavigationPaneTooltip = 'Click to expand Navigation Pane';
/**
* Object with properties and events for the OutlookBar.
*
* @type {OutlookBarModel}
* @memberof OutlookBarComponent
*/
@Input() model: OutlookBarModel;
/**
* Property of the OutlookBarGroup that contains
* a collection of items to create the OutlookBarGroups.
*
* @type {*}
* @memberof OutlookBarComponent
*/
@Input()
set groupsSource(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
OutlookBarModel.GroupsSourceProperty,
value
)
) {
this.modelProxy.GroupsSource = value as IList<unknown>;
}
}
get groupsSource(): any {
return this.model.GroupsSource;
}
/**
* Property of the OutlookBarGroup that
* sets the component as minimized
*
* @type {*}
* @memberof OutlookBarComponent
*/
@Input()
set isMinimized(value: boolean) {
if (
!this.checkAndRegisterCompatibilityBinding(
OutlookBarModel.IsMinimizedProperty,
value
)
) {
this.modelProxy.IsMinimized = value;
}
}
get isMinimized(): boolean {
return this.model.IsMinimized;
}
/**
* Property of the OutlookBarGroup that
* sets the possibility of the XamOutlookBar to be minimized
*
* @type {*}
* @memberof OutlookBarComponent
*/
@Input()
set allowMinimized(value: boolean) {
if (
!this.checkAndRegisterCompatibilityBinding(
OutlookBarModel.AllowMinimizedProperty,
value
)
) {
this.modelProxy.AllowMinimized = value;
}
}
/**
* Indicates if the component can be minimized
*
* @readonly
* @type {boolean}
* @memberof OutlookBarComponent
*/
get allowMinimized(): boolean {
return this.model.AllowMinimized;
}
/**
*
* Template reference to be used as the Header Group Template.
* If you provide this input, it will overwrite the exist section.
*
* @type {TemplateRef<any>} Angular TemplateRef
* @memberof OutlookBarComponent
*/
@Input() groupHeaderTemplate: TemplateRef<any>;
/**
*
* Template reference to be used as the Content Group Template.
* If you provide this input, it will overwrite the exist section.
*
* @type {TemplateRef<any>} Angular TemplateRef
* @memberof OutlookBarComponent
*/
@Input() groupContentTemplate: TemplateRef<any>;
/**
*
* Template reference to be used as the small image for Group Template.
* If you provide this input, it will overwrite the exist section.
*
* @type {TemplateRef<any>} Angular TemplateRef
* @memberof OutlookBarComponent
*/
@Input() defaultSmallIconTemplate: TemplateRef<any>;
/**
*
* Template reference to be used as the Large icon image for Group Template.
* If you provide this input, it will overwrite the exist section.
*
* @type {TemplateRef<any>} Angular TemplateRef Angular TemplateRef
* @memberof OutlookBarComponent
*/
@Input() defaultLargeIconTemplate: TemplateRef<any>;
/**
* Set the current component selectedGroup
*
* @memberof OutlookBarComponent
*/
@Input()
set selectedGroup(value: OutlookBarGroupModel) {
if (
!this.checkAndRegisterCompatibilityBinding(
OutlookBarModel.SelectedGroupProperty,
value
)
) {
this.modelProxy.SelectedGroup = value;
}
}
/**
* Gets the current component Selected group
*
* @readonly
* @type {OutlookBarGroupModel}
* @memberof OutlookBarComponent
*/
get selectedGroup(): OutlookBarGroupModel {
return this.model.SelectedGroup;
}
/**
* Control template to be used as the header group templte
* If you provide this input it will override the original section
*
* @type null
* @memberof OutlookBarComponent
*/
get groupHeaderControlTemplate(): any {
return this.model.GroupHeaderControlTemplateModel;
}
/**
* Trigger selected group changed
*
* @type {EventEmitter<{ sender: OutlookBarGroupModel; e: any }>}
* @memberof OutlookBarComponent
*/
// eslint-disable-next-line @typescript-eslint/naming-convention
@Output() selectedGroupChanged: EventEmitter<{
NewSelectedOutlookBarGroup: OutlookBarGroupModel;
PreviousSelectedOutlookBarGroup: any;
}> = new EventEmitter();
/**
* Trigger for navigationPaneMinimizing event
*
* @type {EventEmitter<{ sender: any; event: any }>}
* @memberof OutlookBarComponent
*/
@Output() navigationPaneMinimizing: EventEmitter<{ sender: any; e: any }> =
new EventEmitter();
/**
* Trigger for navigationPaneExpanding event
*
* @type {EventEmitter<{ sender: any; e: any }>}
* @memberof OutlookBarComponent
*/
@Output() navigationPaneExpanding: EventEmitter<{ sender: any; e: any }> =
new EventEmitter();
/**
*
* List of OutlookBarGroup that are inside of the OutlookBar Component.
*
* @type {QueryList<OutlookBarGroupComponent>} Collection of OutlookBarGroup
* @memberof OutlookBarComponent
*/
@ContentChildren(OutlookBarGroupComponent)
items: QueryList<OutlookBarGroupComponent>;
/**
* List of IgxExpansionPanel Collection that are generated in the OutlookBarComponent
*
* @type {QueryList<IgxExpansionPanelComponent>}
* @memberof OutlookBarComponent
*/
@ViewChildren(IgxExpansionPanelComponent)
public accordion: QueryList<IgxExpansionPanelComponent>;
/**
* Array of items to show in the outlookbar component.
* The data can be obtained from the groupSource input or from the query
* of the content of type outlookbarGroup
* of the control.
*
* @type {any[]}
* @memberof OutlookBarComponent
*/
outlookItems: any[];
/**
*
* Context to be used in the floating window when the outlookbar is
* in unpin mode and the groups are from a template.
*
* @type {*}
* @memberof OutlookBarComponent
*/
floatingContext: any;
/**
* Variable used to store the template for the floating section.
*
* @type {*}
* @memberof OutlookBarComponent
*/
floatingTemplate: any;
/**
* Previous selected group
*
* @type {*}
* @memberof OutlookBarComponent
*/
oldSelectedGroup: any;
/**
* Collection modified subscription
*
* @type {*}
* @memberof OutlookBarComponent
*/
collectionModifiedSubscription: any;
/**
* OutlookBar item header height value.
*
* @type {number}
* @memberof OutlookBarComponent
*/
headerHeight: number;
/**
* Height value of the header section that shows an arrow that minimize the OutlookBar.
*
* @memberof OutlookBarComponent
*/
arrowHeaderHeight = 26;
/**
* Flag to know if the header height have been resolved.
*
* @type {boolean}
* @memberof OutlookBarComponent
*/
headerHeightResolved: boolean;
/**
* Flag to know if there is a timeout in progress to avoid duplicating it.
*
* @type {any}
* @memberof OutlookBarComponent
*/
headerHeightTimeout: any;
/**
* OutlookBarPopupComponent reference
*
* @type {ComponentRef<OutlookBarPopupComponent>}
* @memberof OutlookBarComponent
*/
popupRef: ComponentRef<OutlookBarPopupComponent>;
/**
* NavigationPane reference
*
* @type {ElementRef}
* @memberof OutlookBarComponent
*/
@ViewChild('navigationPaneRef')
navigationPaneRef: ElementRef;
/**
* Main outlookbar container reference
*
* @type {ElementRef}
* @memberof OutlookBarComponent
*/
@ViewChild('outlookbarContainerRef')
outlookbarContainerRef: ElementRef;
/**
* Reference to the ResizeObserver
*
* @type {ResizeObserver}
* @memberof OutlookBarComponent
*/
sizeObserver: ResizeObserver = null;
/**
* ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {OutlookBarModel}
* @memberof OutlookBarComponent
*/
protected modelProxy: OutlookBarModel = ModelProxy.create<OutlookBarModel>();
/**
* Creates an instance of OutlookBarComponent.
*
* @param {Injector} injector - Angular Injector
* @param {OutlookBarModel} [injectedModel=null] - OutlookBar model for the current Angular Component
* @memberof OutlookBarComponent
*/
/* istanbul ignore next */
public constructor(
private injector: Injector,
protected cdRef: ChangeDetectorRef,
private provider: ModelProviderService,
public componentFactoryResolver: ComponentFactoryResolver,
@Optional() protected injectedModel: OutlookBarModel = null
) {
super(cdRef, injector);
this.model = injectedModel;
}
/**
* Gets the Groups model
*
* @readonly
* @type {*}
* @memberof OutlookBarComponent
*/
get groups(): any {
return this.model.Groups?.internalArray;
}
/**
* Gets the width with a border adjust adding 1 px.
*
* @readonly
* @type { number | BindingInfo}
* @memberof OutlookBarComponent
*/
get minimizedWidth(): number | BindingInfo {
return this.model.MinimizedWidth;
}
@Input()
set minimizedWidth(value: number | BindingInfo) {
if (
!this.checkAndRegisterCompatibilityBinding(
OutlookBarModel.AllowMinimizedProperty,
value
)
) {
this.modelProxy.MinimizedWidth = value as number;
}
}
/**
* Gets MinimizeButtonExpandTooltip property from model.
*
* @readonly
* @type {string}
* @memberof OutlookBarComponent
*/
get minimizeButtonExpandTooltip(): string {
return this.model.StringSettings.MinimizeButtonExpandTooltip;
}
/**
* Gets MinimizeButtonMinimizeTooltip property from model.
*
* @readonly
* @type {string}
* @memberof OutlookBarComponent
*/
get minimizeButtonMinimizeTooltip(): string {
return this.model.StringSettings.MinimizeButtonMinimizeTooltip;
}
/**
* Gets NavigationPaneMinimizedText property from model.
*
* @readonly
* @type {string}
* @memberof OutlookBarComponent
*/
get navigationPaneMinimizedText(): string {
return this.model.StringSettings.NavigationPaneMinimizedText;
}
/**
* Gets NavigationPaneMinimizedTooltip property from model.
*
* @readonly
* @type {string}
* @memberof OutlookBarComponent
*/
get navigationPaneMinimizedTooltip(): string {
return this.model.StringSettings.NavigationPaneMinimizedTooltip;
}
/**
* Method to validate if should collapse or not the expansion panel.
*
* @param {number} index
* @return {*} {boolean}
* @memberof OutlookBarComponent
*/
public collapsed(index: number): boolean {
if (!this.accordion) {
return true;
}
return (
this.accordion.toArray()[index] &&
this.accordion.toArray()[index].collapsed
);
}
/**
* Event Handler for when the user click the header Group.
* Collapse each panel of the collection.
*
* @param {*} event
* @memberof OutlookBarComponent
*/
public onInteraction(event): void {
const allPanels = this.accordion.toArray();
const indexExpandedPanel = allPanels.indexOf(event.owner);
if (
indexExpandedPanel > -1 &&
this.model.Groups.count > indexExpandedPanel
) {
const selected = this.model.Groups.getItem(indexExpandedPanel);
this.selectedGroup = selected;
}
event.cancel = true;
}
/**
* Collapse all panels in control
*
* @memberof OutlookBarComponent
*/
collapseAllButSelected(): void {
const index = this.model.Groups.indexOf(this.selectedGroup);
const selected =
this.accordion.length > index ? iuElementAt(this.accordion, index) : null;
const expandedPanels = this.accordion.filter(
(panel) => !panel.collapsed && panel !== selected
);
/* istanbul ignore next */
expandedPanels.forEach((expandedPanel: any) => {
expandedPanel.collapse();
});
}
/**
* Angular lifeCycle hook
*
* @memberof OutlookBarComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new OutlookBarModel();
this.setupModel(this.model);
super.ngOnInit();
this.provider.model = this.model;
this.registerObservers(
this.selectedGroupChanged,
this.model,
this.model.SelectedGroupChanged
);
}
/**
* Angular lifeCycle hook
*
* @memberof OutlookBarComponent
*/
ngAfterViewInit(): void {
super.ngAfterViewInit();
setTimeout(() => {
this.outlookItems = [];
this.assignItems();
/* istanbul ignore next */
this.collectionModifiedSubscription =
this.model.Groups?.CollectionChanged.addHandler((e, a) =>
this.collectionModifiedHandler(e, a)
);
this.dynamicElements();
this.isInitialized = true;
setTimeout(() => {
if (!this.selectedGroup && this.groups) {
this.selectedGroup = this.groups[0];
} else {
this.selectedGroupExpand();
}
this.oldSelectedGroup = this.selectedGroup;
this.observeMainContainer();
this.detectChangesAction();
}, 150);
this.detectChangesAction();
}, 0);
}
/**
* Angular lifecycle hook
*
* @memberof OutlookBarComponent
*/
ngDoCheck(): void {
super.ngDoCheck();
if (
!this.headerHeightResolved &&
this.isInitialized &&
!this.headerHeightTimeout
) {
this.headerHeightTimeout = setTimeout(() => {
this.calcHeaderHeight();
this.headerHeightTimeout = undefined;
}, 0);
}
}
/**
* Angular lifecycle hook
*
* @memberof OutlookBarComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.sizeObserver?.disconnect();
this.sizeObserver = null;
this.popupRef?.destroy();
this.model.Groups?.CollectionChanged.removeHandler(
this.collectionModifiedSubscription
);
}
/**
*Assign components groups to model collection
*
* @memberof OutlookBarComponent
*/
assignItems(): void {
this.assignStaticItems();
this.addItemsModel();
}
/**
* Add items to model from itemsSource
*
* @memberof OutlookBarComponent
*/
addItemsModel(): void {
if (this.groupsSource && this.groups.length === 0) {
const arrayItems = this.groupsSource;
for (const item of arrayItems) {
this.model.Groups.add(item);
}
}
}
/**
* Collection modified handler subscription
*
* @param {*} e
* @param {*} a
* @memberof OutlookBarComponent
*/
collectionModifiedHandler(e: any, a: any): void {
this.dynamicElements();
//call of function to expand element for when there are sychronization issues
this.selectedGroupExpand();
}
/**
* Assign static items to the OutlookBarComponent
*
* @memberof OutlookBarComponent
*/
assignStaticItems(): void {
const arrayItems = this.items.toArray();
// Adding static items in collection
this.loadStaticItems(arrayItems, this.model.Groups);
for (const item of arrayItems) {
/* istanbul ignore else */
if (item.visibility) {
this.outlookItems.push(item);
}
}
}
/**
* Set up dynamic elements
*
* @return {*} {*}
* @memberof OutlookBarComponent
*/
dynamicElements(): any {
this.groups.forEach((element: any) => {
const isEqual = this.outlookItems.findIndex((x) => x.model === element);
/* istanbul ignore else */
if (isEqual === -1) {
/* istanbul ignore else */
if (element instanceof OutlookBarGroupModel && element.Visibility) {
const newControlsToRender = [];
element.Parent = this.model;
newControlsToRender.push(element);
const newElement = Utils.getUIControls(
newControlsToRender,
this.injector
)[0];
const component = this.addControl(newElement);
component.instance.model = element;
component.instance.ngOnInit();
component.changeDetectorRef.detectChanges();
this.outlookItems.push(component.instance);
}
}
});
if (this.groupsSource) {
this.outlookItems = this.groupsSource;
}
}
/**
* Add a component instance to the outlookBar component
*
* @param {*} newElement
* @return {*}
* @memberof OutlookBarComponent
*/
addControl(newElement: any) {
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(
newElement.component
);
const componentRef = componentFactory.create(
newElement.customInjector
) as ComponentRef<any>;
return componentRef;
}
/**
* Model change handler event
*
* @param {string} [name]
* @memberof OutlookBarComponent
*/
modelChangeHandler(name?: string): void {
this.processSelectedGroup(name);
this.processMinimizedState(name);
super.modelChangeHandler(name);
}
/**
* processing SelectedGroup
*
* @param {string} name
* @memberof OutlookBarComponent
*/
processSelectedGroup(name: string) {
if (name === undefined || name === 'SelectedGroup') {
this.selectedGroupExpand();
}
}
/**
* Process visibility changes to expand selected group
* @param name property name
*/
processVisibility(name: string): void {
super.processVisibility(name);
if (name === 'Visibility' && this.model.Visibility === true) {
setTimeout(() => {
this.selectedGroupExpand();
});
}
}
/**
* Pin or unpin the OutlookBar Component,
* and close the Floating panel if the panel is pinned.
*
* @memberof OutlookBarComponent
*/
pinHandler(): void {
this.isMinimized = !this.isMinimized;
}
/**
* sets the values of the floating Panel.
*
* @param {*} item
* @memberof OutlookBarComponent
*/
minimizedGroupClickHandler(item: any): void {
this.closePopup();
this.selectedGroup = item.model;
this.floatingContext = item;
this.floatingTemplate = item.template;
}
/**
* Return a wrapped object with a context property.
* If the data comes from a dataContext, it will used this method
* to generate the groups.
*
* @param {*} item
* @return {*} {context: any}
* @memberof OutlookBarComponent
*/
getContext(item: any): any {
return { context: item };
}
/**
* Return a wrapped object with a context property.
* If the data comes from a dataContext, it will used this method
* to generate the floating panel context from the variable [floatingContext]{@link OutlookBarComponent#floatingContext}.
*
* @return {*} {context: any}
* @memberof OutlookBarComponent
*/
get getContextFloating(): any {
return { context: this.floatingContext };
}
/**
* Function to determinate if should render the OutlookBar Groups
*
* @return {*} {boolean}
* @memberof OutlookBarComponent
*/
get renderOutlookBar(): boolean {
return (
this.isInitialized && this.outlookItems && this.outlookItems.length > 0
);
}
/**
* Returns main outlookBar container height
*
* @type {string}
* @memberof OutlookBarComponent
*/
get containerHeight(): string {
if (this.shouldShowArrow) {
return `calc(100% - ${this.arrowHeaderHeight}px)`;
} else {
return '100%';
}
}
/**
* Returns OutlookBar item height
*
* @type {string}
* @memberof OutlookBarComponent
*/
calcItemHeight(item: any): string {
if (item?.model === this.selectedGroup) {
return `calc(100% - ${
this.headerHeight * (this.accordion.toArray().length - 1)
}px)`;
} else {
return 'auto';
}
}
/**
* Returns if the arrow button should be show or not.
*
* @type {boolean}
* @memberof OutlookBarComponent
*/
get shouldShowArrow(): boolean {
return !this.model?.SelectedHeaderControlTemplate && this.allowMinimized;
}
/**
* Try to resolve the OutlookBar item height once is rendered.
*
* @type {void}
* @memberof OutlookBarComponent
*/
calcHeaderHeight(): void {
const items = this.accordion.toArray();
if (items.length === 0) return;
const item = items.find((value, index) => value.collapsed && index !== 0);
const dimensions = item?.nativeElement?.getBoundingClientRect();
this.headerHeight = dimensions?.height ?? 0;
if (this.headerHeight > 0) {
this.headerHeightResolved = true;
this.detectChangesAction();
}
}
/**
* Expand the selectedGroup
*
* @private
* @memberof OutlookBarComponent
*/
private selectedGroupExpand() {
if (this.outlookItems && this.selectedGroup) {
const index = this.model.Groups.indexOf(this.selectedGroup);
if (index > -1 && this.accordion.length > index) {
this.collapseAllButSelected();
setTimeout(() => {
if (!this.cdRef['destroyed']) {
this.accordion.toArray()[index].open();
}
}, 0);
}
}
}
/**
* Handle IsMinimized changes in the component
*
* @private
* @param {string} name
* @memberof OutlookBarComponent
*/
private processMinimizedState(name: string): void {
if (name === 'IsMinimized') {
const params = { sender: this.model, e: this };
this.closePopup();
if (this.isMinimized) {
this.model.NavigationPaneMinimizing.fire([params.sender, params.e]);
this.navigationPaneMinimizing.emit(params);
this.sizeObserver?.disconnect();
this.sizeObserver = null;
} else {
this.model.NavigationPaneExpanding.fire([params.sender, params.e]);
this.navigationPaneExpanding.emit(params);
this.detectChanges();
this.observeMainContainer();
setTimeout(() => {
this.selectedGroupExpand();
});
}
}
}
/**
* Returns if the given group is the selected one.
*
* @param {OutlookBarGroupComponent} group
* @memberof OutlookBarComponent
*/
isGroupSelected(group: OutlookBarGroupComponent): boolean {
return group.model === this.selectedGroup;
}
/**
* Returns the item header.
*
* @param {OutlookBarGroupComponent} group
* @memberof OutlookBarComponent
*/
getItemHeader(group: OutlookBarGroupComponent): string {
return group.header ?? '';
}
/**
* Validates if there is selected group but no floatingContext it should set it.
*
* @memberof OutlookBarComponent
*/
validateFloatingItem(): void {
if (this.selectedGroup && !this.floatingTemplate && !this.floatingContext) {
const group: OutlookBarGroupComponent = this.outlookItems.find(
(item: OutlookBarGroupComponent) => item.model === this.selectedGroup
);
if (group) {
this.floatingTemplate = group.template;
this.floatingContext = group;
}
}
}
/**
* Create and attach a new OutlookBarPopupComponent on the body.
*
* @type {void}
* @memberof OutlookBarComponent
*/
openPopup(event: any): void {
if (this.popupRef) return;
event.stopPropagation();
this.validateFloatingItem();
this.popupRef = this.createElementInRoot(
this.injector,
OutlookBarPopupComponent
);
this.popupRef.instance.dynamicTemplate = this.groupContentTemplate;
this.popupRef.instance.outlookBarRef = this.navigationPaneRef.nativeElement;
this.popupRef.instance.templateContext = this.getContextFloating;
this.popupRef.instance.outlookBarItem = this.floatingTemplate;
this.popupRef.instance.detectChanges();
}
/**
* Deestroy the OutlookBarPopupComponent.
*
* @type {void}
* @memberof OutlookBarComponent
*/
closePopup(): void {
this.popupRef?.destroy();
this.popupRef?.instance.detectChanges();
this.popupRef = undefined;
}
/**
* Creates a new ResizeObserver instance.
*
* @type {void}
* @memberof OutlookBarComponent
*/
observeMainContainer(): void {
if (
this.sizeObserver ||
!this.minimizedWidth ||
!this.outlookbarContainerRef
)
return;
this.sizeObserver = new ResizeObserver(
this.resizeObserverCallback.bind(this)
);
this.sizeObserver.observe(this.outlookbarContainerRef.nativeElement);
}
/**
* Callback function of the ResizeObserver.
*
* @type {void}
* @memberof OutlookBarComponent
*/
resizeObserverCallback(entries: ResizeObserverEntry[]): void {
const widthCalc = entries[0]?.contentRect?.width;
const existsInDOM = document.body.contains(
this.outlookbarContainerRef.nativeElement
);
if (existsInDOM && widthCalc < this.minimizedWidth) {
this.isMinimized = true;
}
}
/**
* Listen clicks on the current window, if click ocurrs outside of the
* popup it should be closed.
*
* @type {void}
* @memberof OutlookBarComponent
*/
@HostListener('window:click', ['$event.target'])
clickListener(target: any): void {
if (!this.popupRef) return;
const popupElement = this.popupRef.instance.element.nativeElement;
if (!popupElement.contains(target)) {
this.closePopup();
}
}
}
<div *ngIf="visibility" class="autoHeightWidth">
<!-- Normal/Maximized Container -->
<div *ngIf="!isMinimized" class="outlookbarContainer" #outlookbarContainerRef>
<div class="headerContainer" *ngIf="shouldShowArrow">
<button
class="arrowButton"
(click)="pinHandler()"
[title]="minimizeButtonMinimizeTooltip"
>
<span class="material-icons arrowIcon">arrow_back_ios_outlined</span>
<span class="material-icons arrowIcon">arrow_back_ios_outlined</span>
</button>
</div>
<div
*ngIf="renderOutlookBar"
[style.height]="containerHeight"
class="contentContainer"
>
<div
*ngFor="let item of outlookItems; let i = index"
[style.height]="calcItemHeight(item)"
[class]="item.customCssClasses"
>
<igx-expansion-panel class="expansionPanel allAvailableSpace">
<igx-expansion-panel-header
[iconPosition]="'left'"
(interaction)="onInteraction($event)"
[disabled]="false"
>
<igx-expansion-panel-title>
<ng-container
*ngIf="
!groupHeaderTemplate &&
!item.headerTemplate &&
!groupHeaderControlTemplate &&
!item.headerControlTemplate &&
!(
item.model === selectedGroup &&
model.SelectedHeaderControlTemplate
)
"
>
{{ item.header }}
</ng-container>
<ng-container *ngIf="groupHeaderTemplate">
<ng-container
*ngTemplateOutlet="
groupHeaderTemplate;
context: getContext(item)
"
></ng-container>
</ng-container>
<ng-container *ngIf="groupHeaderControlTemplate">
<wm-content-control [content]="groupHeaderControlTemplate">
<ng-content></ng-content>
</wm-content-control>
</ng-container>
<ng-container
*ngIf="
item.headerControlTemplate &&
!(
item.model === selectedGroup &&
model.SelectedHeaderControlTemplate
)
"
>
<wm-content-control [content]="item.headerControlTemplate">
<ng-content></ng-content>
</wm-content-control>
</ng-container>
<ng-container
*ngIf="
item.model === selectedGroup &&
model.SelectedHeaderControlTemplate
"
>
<wm-content-control
[content]="
model.SelectedHeaderControlTemplate
| controlFromControlTemplate: item.model
"
>
</wm-content-control>
</ng-container>
<ng-container
*ngIf="
!groupHeaderTemplate &&
!groupHeaderControlTemplate &&
!item.headerControlTemplate
"
>
<ng-container *ngTemplateOutlet="item.headerTemplate">
</ng-container>
</ng-container>
</igx-expansion-panel-title>
<igx-expansion-panel-icon>
<ng-container *ngIf="defaultLargeIconTemplate">
<ng-container
*ngTemplateOutlet="
defaultLargeIconTemplate;
context: getContext(item)
"
></ng-container>
</ng-container>
<ng-container
*ngIf="!defaultLargeIconTemplate && item.largeTemplate"
>
<ng-container
*ngTemplateOutlet="item.largeTemplate"
></ng-container>
</ng-container>
</igx-expansion-panel-icon>
</igx-expansion-panel-header>
<igx-expansion-panel-body
*ngIf="item.model === selectedGroup"
class="expansionPanelBody allAvailableSpace"
>
<ng-container *ngIf="groupContentTemplate">
<ng-container
*ngTemplateOutlet="
groupContentTemplate;
context: getContext(item)
"
>
</ng-container>
</ng-container>
<ng-container *ngIf="!groupContentTemplate && item.template">
<ng-container *ngTemplateOutlet="item.template"> </ng-container>
</ng-container>
<ng-container *ngIf="!groupContentTemplate && !item.template">
<wm-content-control [model]="item.model"></wm-content-control>
</ng-container>
</igx-expansion-panel-body>
</igx-expansion-panel>
</div>
</div>
</div>
<!-- Minimized Container -->
<div
class="minimizedOutlookContainer"
*ngIf="isMinimized"
[class.minimizedContainerWidth]="!minimizedWidth"
[style.width.px]="minimizedWidth"
>
<div class="minimizedContentContainer">
<div class="headerContainer">
<ng-container
*ngIf="model.SelectedHeaderControlTemplate; else defaultExpandButton"
>
<wm-content-control
[content]="
model.SelectedHeaderControlTemplate
| controlFromControlTemplate: model.SelectedGroup
"
>
</wm-content-control>
</ng-container>
<ng-template #defaultExpandButton>
<button
class="arrowButton"
(click)="pinHandler()"
[title]="minimizeButtonExpandTooltip"
>
<span class="material-icons arrowIcon"
>arrow_forward_ios_outlined</span
>
<span class="material-icons arrowIcon"
>arrow_forward_ios_outlined</span
>
</button>
</ng-template>
</div>
<div
class="navigationPane"
(click)="openPopup($event)"
[class.navigationPaneOpen]="popupRef"
[title]="navigationPaneMinimizedTooltip"
#navigationPaneRef
>
<label
*ngIf="selectedGroup; else defaultMinimizedLabel"
class="title"
>{{ navigationPaneMinimizedText }}</label
>
<ng-template #defaultMinimizedLabel>
<label class="title">Navigation Pane</label>
</ng-template>
</div>
<div class="minimizedGroupContainer">
<div
class="minimizedGroupButton"
*ngFor="let item of outlookItems"
(click)="minimizedGroupClickHandler(item)"
[title]="getItemHeader | memoize: item"
[class.minimizedGroupButtonSelected]="
isGroupSelected | memoize: item:selectedGroup
"
>
<div *ngIf="defaultLargeIconTemplate">
<ng-container
*ngTemplateOutlet="
defaultLargeIconTemplate;
context: getContext(item)
"
></ng-container>
</div>
<ng-container *ngIf="!defaultLargeIconTemplate && item.largeTemplate">
<ng-container *ngTemplateOutlet="item.largeTemplate"></ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
./outlook-bar.component.scss
@import '../../scss/variables';
// Normal/Maximized Section
.outlookbarContainer {
border: $default-control-border;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
.contentContainer {
.expansionPanel {
width: 100%;
min-width: $expaned-item-min-width;
border-bottom: $default-control-border;
box-sizing: border-box;
igx-expansion-panel-title {
margin: 0;
}
::ng-deep {
.igx-expansion-panel__header-icon--start {
margin: 0;
}
}
}
& > div:last-of-type .expansionPanel {
border-bottom: none;
}
}
}
// Minimized Section
.minimizedOutlookContainer {
height: calc(100% - $outlookBar-separator);
.minimizedContentContainer {
border: $default-control-border;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.navigationPane {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
width: 100%;
background-color: $outlookBar-default-background;
cursor: pointer;
.title {
color: $outlookBar-navigation-pane-title-color;
font-weight: bold;
width: max-content;
transform: rotate(-90deg);
user-select: none;
}
&:hover {
background-color: $outlookBar-navigation-pane-background-hover;
}
&:active {
background-color: $outlookBar-navigation-pane-background-active;
}
}
.navigationPaneOpen {
@extend .navigationPane;
background-color: $default-control-active-color;
&:hover {
background-color: $default-control-active-color;
}
&:active {
background-color: $outlookBar-navigation-pane-background-active;
}
}
.minimizedGroupContainer {
width: calc(100% - 1px);
.minimizedGroupButton {
height: $outlookBar-minimized-group-height;
width: 100%;
background: $outlookBar-group-background;
border: 0.5px $outlookBar-default-border;
border-top: 1px $outlookBar-default-border;
&:hover {
background: $outlookBar-hover-group-background;
}
&:active {
border-color: $default-control-active-color;
background: $outlookBar-active-group-background;
}
}
.minimizedGroupButtonSelected {
@extend .minimizedGroupButton;
background: $outlookBar-selected-group-background;
}
}
}
}
// Header and brrow button used to minimize or maximize the OutlookBar
.headerContainer {
display: flex;
align-items: center;
justify-content: flex-end;
height: $outlookBar-header-height;
border-bottom: $default-control-border;
background: $outlookBar-group-background;
.arrowButton {
display: flex;
align-items: center;
height: $outlookBar-arrow-button-size;
width: $outlookBar-arrow-button-size;
background-color: transparent;
border: none;
outline: none;
box-sizing: border-box;
padding: $outlookBar-separator;
margin-right: $outlookBar-separator;
&:hover {
background: $outlookBar-arrow-button-hover;
}
.arrowIcon {
width: $outlookBar-arrow-icon-width;
font-size: $outlookBar-arrow-icon-font-size;
color: $outlookBar-arrow-icon-color;
font-weight: bolder;
}
}
}
// Classes apply through code
.minimizedContainerWidth {
width: 100%;
}
.allAvailableSpace {
height: 100%;
}
.expansionPanelBody {
color: inherit;
padding: 0px;
}