projects/i-components/src/lib/components/xam-tile-manager/xam-tile-manager.component.ts
Angular Component for the XamTile manager Control.
OnInit
AfterViewInit
AfterContentInit
OnDestroy
| providers |
XamTileManagerService
|
| selector | wm-xam-tile-manager |
| styleUrls | ./xam-tile-manager.component.scss |
| templateUrl | ./xam-tile-manager.component.html |
constructor(injector: Injector, injectedModel: XamTileManagerModel, xamTileService: XamTileManagerService, elementRef: ElementRef, renderer: Renderer2, cdRef: ChangeDetectorRef)
|
|||||||||||||||||||||
|
Creates an instance of XamTileManagerComponent.
Parameters :
|
| itemsSource | |
Type : any
|
|
|
Sets internal data |
|
| model | |
Type : XamTileManagerModel
|
|
|
Current component 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... |
|
| animationEnded | |
Type : EventEmitter<literal type>
|
|
|
animationEnded event output |
|
| animationStarted | |
Type : EventEmitter<literal type>
|
|
|
animationStarted event output |
|
| loadingItemMapping | |
Type : EventEmitter<literal type>
|
|
|
loadingItemMapping event output |
|
| savingItemMapping | |
Type : EventEmitter<literal type>
|
|
|
savingItemMapping event output |
|
| tileClosed | |
Type : EventEmitter<literal type>
|
|
|
tileClosed event output |
|
| tileClosing | |
Type : EventEmitter<literal type>
|
|
|
tileClosing event output |
|
| tileDragging | |
Type : EventEmitter<literal type>
|
|
|
tileDtagging event output |
|
| tileStateChanged | |
Type : EventEmitter<literal type>
|
|
|
tileStateChanged event output |
|
| tileStateChanging | |
Type : EventEmitter<literal type>
|
|
|
tileStateChanging event output |
|
| tileSwapped | |
Type : EventEmitter<literal type>
|
|
|
tileSwapped event output |
|
| tileSwapping | |
Type : EventEmitter<literal type>
|
|
|
tileSwapping event output |
|
| 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. |
| assignStaticItems |
assignStaticItems()
|
|
Assign static set of items to be rendered.
Returns :
void
|
| Private checkIfSplitterListenersAreRequired |
checkIfSplitterListenersAreRequired()
|
|
Checks if the mouse listeners are going to be required for splitter functionality
Returns :
void
|
| checkMaximizedState |
checkMaximizedState()
|
|
Checks if the maximized state is the correct
Returns :
void
|
| collectionChangeInput | ||||||
collectionChangeInput(ev: any)
|
||||||
|
Handler to verify components
Parameters :
Returns :
any
{*} |
| columnGridArea | ||||||
columnGridArea(index: number)
|
||||||
|
Return grid-area css property to apply in the dinamcally added divs for splitters
Parameters :
Returns :
string
{string} |
| Private endMovingSplitters | ||||||
endMovingSplitters(event: any)
|
||||||
|
Stops the resizing of the main splitters in normal and maximized mode
Parameters :
Returns :
void
|
| generateSplitters |
generateSplitters()
|
|
Generates splitter for each tile column and row.
Returns :
void
|
| getDynamicUIElements | ||||||
getDynamicUIElements(arrayToInspect: any)
|
||||||
|
Returns the dynamic components to render.
Parameters :
Returns :
void
{*} |
| handleXamTileStateChange | ||||||
handleXamTileStateChange(component: XamTileComponent)
|
||||||
|
Handle the tile state changes
Parameters :
Returns :
void
|
| Private heightResizeObserverCallback | ||||||
heightResizeObserverCallback(entries: ResizeObserverEntry[])
|
||||||
|
To process callbacks from the resize observer
Parameters :
Returns :
void
|
| Private mouseMoveSplitters | ||||||
mouseMoveSplitters(event: any)
|
||||||
|
Mouse move handler for main grid when there are splitters and are in normal and maximized mode
Parameters :
Returns :
void
|
| moveElementToMaximizePanel |
moveElementToMaximizePanel()
|
|
Move the maximized panel to the maximized section of XamTileManager
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:765
|
|
Angular lifecycle hook. AfterContent Init
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:776
|
|
Angular lifeCycle method
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:800
|
|
Angular lifecycle hook. Unsubscribe from xamtileService
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:752
|
|
NgOnInit Lifecycle method
Returns :
void
|
| Private processHeightChange | ||||||
processHeightChange(entry: ResizeObserverEntry)
|
||||||
|
Checks if the change of height generates a change in the estimated max height for the grids
Parameters :
Returns :
boolean
{boolean} |
| Private processMainSplitterXAxisResize | |||||||||
processMainSplitterXAxisResize(splitter: XamTileSplitterComponent, event: any)
|
|||||||||
|
Process the resizing by columns. This logic is assuming the current size is given in 'fr' units
Parameters :
Returns :
void
|
| Private processMainSplitterYAxisResize | |||||||||
processMainSplitterYAxisResize(splitter: XamTileSplitterComponent, event: any)
|
|||||||||
|
Process the resizing by rows. This logic is assuming the current size is given in 'fr' units
Parameters :
Returns :
void
|
| Private processMaximizedSplitterResize | |||||||||
processMaximizedSplitterResize(splitter: XamTileSplitterComponent, event: any)
|
|||||||||
|
Process the resizing in maximized mode. This logic assumes there are only two rows and the resize is done in the second one, because the first is specified in 'fr' units
Parameters :
Returns :
void
|
| Private processWidthChange | ||||||
processWidthChange(entry: ResizeObserverEntry)
|
||||||
|
Checks if the change of width generates a change in the estimated max width for the grids
Parameters :
Returns :
boolean
{boolean} |
| registerTileService |
registerTileService()
|
|
Register some XamTileService handlers
Returns :
void
|
| rowGridArea | ||||||
rowGridArea(index: number)
|
||||||
|
Return grid-area css property to apply in the dinamcally added divs for splitters
Parameters :
Returns :
string
{string} |
| Private setStaticSize | |||||||||
setStaticSize(callback: ResizeObserverCallback, property: string)
|
|||||||||
|
Method that initializes the resize observers for height and width, to set right size. This is required to avoid the main grid to overflow when child xam-tile requires more space than needed, in theory the use of minmax having 0px for the layout should prevent this, but doesn't works, so we limit the size of the xam-tile-manager
Parameters :
Returns :
HTMLElement
|
| tileSwappedHandler |
tileSwappedHandler(sender: any, args: any)
|
|
Handler to verify components
Returns :
void
{*} |
| Private unobserveSizeObserver |
unobserveSizeObserver()
|
|
Unobserves height and with elements
Returns :
void
|
| Private unregisterSplitterListeners |
unregisterSplitterListeners()
|
|
Unregister mouse event listeners for the the splitters handling
Returns :
void
|
| Private updateRowAndColumnsMaximizedLayout |
updateRowAndColumnsMaximizedLayout()
|
|
Update the definition of sizes for columns and rows in maximized state
Returns :
void
|
| Private updateRowAndColumnsNormalLayout |
updateRowAndColumnsNormalLayout()
|
|
Update the definition of sizes for columns and rows in normal state
Returns :
void
|
| verifyMaxColsAndRows | ||||||||||||
verifyMaxColsAndRows(element: any, elementsCount: number)
|
||||||||||||
|
Verifies the max column and max row and updates it if it's necessary. Updates the element column to the max column of the tile manager when it's necessary
Parameters :
Returns :
void
|
| Private widthResizeObserverCallback | ||||||
widthResizeObserverCallback(entries: ResizeObserverEntry[])
|
||||||
|
To process callbacks from the resize observer
Parameters :
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
|
| modelChangeHandler | ||||||||
modelChangeHandler(name?: string)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1650
|
||||||||
|
Method to handle the model's change
Parameters :
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 ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:847
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnChanges |
ngOnChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:824
|
|
Angular Lifecycle Hooks
Returns :
void
|
| preventItemsDuplication | ||||||||||||||||||
preventItemsDuplication(itemsToRender: any, items: any, contentChildTemplate: any, afterContentInitCalled: boolean, injector: Injector)
|
||||||||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||||||||
|
Defined in
BaseComponent:2170
|
||||||||||||||||||
|
Validates if coming models are the same, and prevents to be recreated on Ribbon DOM. (Needs to be checked, in some statics scenarios RibbonTab, RibbonGroup duplicates items)
Parameters :
Returns :
any[]
|
| processAlignments | ||||||
processAlignments(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1704
|
||||||
|
Method to check if the component should assign a alignment property
Parameters :
Returns :
void
{void} |
| processCursor | ||||||
processCursor(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1850
|
||||||
|
Method to set the cursor style of the component
Parameters :
Returns :
void
|
| processCustomCssClasses | ||||||
processCustomCssClasses(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1723
|
||||||
|
Method to set custom CSS Clases
Parameters :
Returns :
void
{void} |
| processFocusable | ||||||
processFocusable(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1816
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| Private processFontFamily | ||||||
processFontFamily(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2784
|
||||||
|
Process the FontFamily property
Parameters :
Returns :
any
|
| processFonts | ||||||
processFonts(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1778
|
||||||
|
Method to apply the font styles for the component.
Parameters :
Returns :
void
|
| Private processFontSize | ||||||
processFontSize(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2798
|
||||||
|
Process the FontSize property
Parameters :
Returns :
any
|
| Private processFontStyle | ||||||
processFontStyle(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2815
|
||||||
|
Process the FontStyle property
Parameters :
Returns :
any
|
| Private processFontWeight | ||||||
processFontWeight(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2832
|
||||||
|
Process the FontWeight property
Parameters :
Returns :
any
|
| processHeights | ||||||
processHeights(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1797
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| processIsEnabled | ||||||
processIsEnabled(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1764
|
||||||
|
Process changes to
Parameters :
Returns :
void
|
| processOpacity | ||||||
processOpacity(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1751
|
||||||
|
Method to apply the opacity for the component.
Parameters :
Returns :
void
|
| processVisibility | ||||||
processVisibility(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1737
|
||||||
|
Method to check if the component should be show or hide.
Parameters :
Returns :
void
|
| processWidths | ||||||
processWidths(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1829
|
||||||
|
Method to check and set the width of the grid
Parameters :
Returns :
void
|
| Private processZIndex | ||||||
processZIndex(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1872
|
||||||
|
Method to process the ZIndex when set through the model
Parameters :
Returns :
void
|
| Private recreateInvalidBindings |
recreateInvalidBindings()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2756
|
|
Execution of removeModelProxyHandlers in a previous instance of the component (that used the same model) could have set some bindings in an invalid state, this will check if some of them has to be recreated
Returns :
void
|
| Private registerContextMenuActions | ||||||
registerContextMenuActions(ctxMenu: ContextMenuManager)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2533
|
||||||
|
Enable the contextMenu actions to be displayed when the user perform an action Creates dinamically a new instance of XamContextMenu to be displayed in the screen
Parameters :
Returns :
void
|
| Protected registerDomEventListenerOnElement |
registerDomEventListenerOnElement(eventName: string, handler: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2316
|
|
Registers a DOM handler on the current element
Returns :
void
|
| Protected registerHandler | |||||||||
registerHandler(event: SubscriptionEvent<void>, arrowHandler: (s: any,a: any) => void)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2298
|
|||||||||
|
Register arrow handler into the given
Parameters :
Returns :
void
|
| Protected registerMouseEvents |
registerMouseEvents()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2272
|
|
Registers mouse events if required
Returns :
void
|
| Protected registerObservers | ||||||||||||
registerObservers(emitter: EventEmitter
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2252
|
||||||||||||
|
Register observers from the given
Parameters :
Returns :
void
|
| Private registerToolTip | |||||||||
registerToolTip(element: ElementRef
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2607
|
|||||||||
|
Registers a tooltip to a component
Parameters :
Returns :
void
|
| Private removeModelProxyHandlers |
removeModelProxyHandlers()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2738
|
|
Clean up the handlers when the component is destroyed
Returns :
void
|
| Private setComponentForDirectives |
setComponentForDirectives()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2512
|
|
Sets an internal reference through the element ref to access the component in a directive
Returns :
void
|
| Protected setPendingPropertyValue |
setPendingPropertyValue(property: string, value: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2336
|
|
Stores the pending property values for instance attach properties. Which will be applied when the model is available
Returns :
void
|
| setupDependencyComponents | ||||||
setupDependencyComponents(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1612
|
||||||
|
Adds the references to the dependency components
Parameters :
Returns :
void
|
| setupModel | ||||||
setupModel(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1559
|
||||||
|
Syncs the modelProxy with model
Parameters :
Returns :
void
void |
| Private syncToolTip | ||||||
syncToolTip(tooltip: ToolTipModel)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2587
|
||||||
|
Updates the tooltip associated to a component
Parameters :
Returns :
void
|
| Private syncValidationError | ||||||
syncValidationError(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2766
|
||||||
|
Syncs validation information with component properties
Parameters :
Returns :
void
|
| Private tabSelectionSubscription |
tabSelectionSubscription()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2471
|
|
Subscribe to the tabhandler event if Required When the component is inside a tab control it should trigger the load event every time the tab is selected
Returns :
void
|
| trackByFn | ||||||||||||
trackByFn(index: any, item: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1904
|
||||||||||||
|
Function used by Angular to track elements in the ngFor directive. We use the GUID property to compare elements.
Parameters :
Returns :
any
{*} -return the model or object itself |
| Private unregisterToolTip | ||||||
unregisterToolTip(element: ElementRef
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2719
|
||||||
|
Unregisters a tooltip to a component
Parameters :
Returns :
void
|
| Private updateSizePropertiesForActualSizeChange | ||||||||
updateSizePropertiesForActualSizeChange(element: Element)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2421
|
||||||||
|
Updates the size properties of the component based on the initial size change
Parameters :
Returns :
void
|
| validatesLoadingFlag |
validatesLoadingFlag()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1519
|
|
Validates loading flag for components outside current tab index TabIndexService should be only tabItem provider, and when currentTabId is different from selectedTab IsFirstTimeLoad is set to false because tabService is going to be one in charge to trigger only one time when tab changes.
Returns :
void
|
| widthCalc |
widthCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1953
|
|
Applies the width CSS value
Returns :
any
|
| widthDefaultStyle |
widthDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1926
|
|
Calculates the auto width value
Returns :
string
{string} |
| Private __mainColSplitterRulersRef |
Type : QueryList<ElementRef>
|
|
Internal reference to the rulers for columns to assist in column resizing |
| Private __mainGridRef |
Type : ElementRef
|
Default value : null
|
|
Internal reference to mainGrid in normal mode |
| Private __mainRowSplitterRulersRef |
Type : QueryList<ElementRef>
|
|
Internal reference to the rulers for rows to assist in row resizing |
| Private __maximizedGridRef |
Type : ElementRef
|
Default value : null
|
|
Internal reference to the maximizedGrid in maximized mode |
| Private __splittersRef |
Type : QueryList<XamTileSplitterComponent>
|
Default value : null
|
|
Internal reference to the list of splitters in normal and maximized mode |
| actualMainColumnSizes |
Type : string[]
|
Default value : []
|
|
Individual size definition for each column in normal mode |
| actualMainRowSizes |
Type : string[]
|
Default value : []
|
|
Individual size definition for each row in normal mode |
| actualMaximizedRowSizes |
Type : string[]
|
Default value : []
|
|
Individual size definition for each row in maximized mode Hint, it will always have just two |
| animationEnded |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
animationEnded event output |
| animationStarted |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
animationStarted event output |
| Private cacheItems |
Type : []
|
Default value : []
|
|
Collection to compare when there are new elements to display |
| content |
Type : QueryList<XamTileComponent>
|
Decorators :
@ContentChildren(XamTileComponent)
|
|
Template elements reference |
| heightParentElement |
Type : HTMLElement
|
|
Reference to the parent element attached to a height resize observer |
| Private heightSizeObserver |
Type : ResizeObserver
|
Default value : null
|
|
Resize observer over the host control as part of the mechanism to avoid the grids overflowding |
| internalXamTileManager |
Type : XamTileManagerComponent
|
Decorators :
@ViewChild(XamTileManagerComponent)
|
|
Docu |
| isInitialized |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:634
|
|
Flag to know if the component is ready to render |
| isResizing |
Type : boolean
|
|
Docu |
| itemsToRender |
Type : any
|
|
Object that contains the list of controls to be rendered |
| loadingItemMapping |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
loadingItemMapping event output |
| Private mainColSplitterRulers |
Type : ElementRef[]
|
Default value : []
|
|
List of supporting tags for the resizing process by columns |
| Private mainRowSplitterRulers |
Type : ElementRef[]
|
Default value : []
|
|
List of supporting tags for the resizing process by rows |
| maximizedRowSizes |
Type : string
|
Default value : ''
|
|
Definition of the row sizes in maximized mode |
| maximizedTileRef |
Type : ElementRef
|
Decorators :
@ViewChild('maximizedTile')
|
|
Reference to the maximized tile container. |
| Private minimizedMaxHeight |
Type : number
|
Default value : 0
|
|
The maximal height to use for tiles when minized, also the space left for them |
| Private minimizedMinHeight |
Type : number
|
Default value : 0
|
|
The minimal height to use for tiles when minized, also the space left for them |
| minimizedTilesContainerRef |
Type : ElementRef
|
Decorators :
@ViewChild('minimizedTilesContainer')
|
|
Reference to the minimized tile container. |
| model |
Type : XamTileManagerModel
|
Decorators :
@Input()
|
|
Current component model |
| Protected modelProxy |
Type : XamTileManagerModel
|
Default value : ModelProxy.create<XamTileManagerModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:643
|
|
ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings. |
| Private mouseLeaveSplittersListener |
Type : function
|
Default value : null
|
|
Mouse leave listener added to handling splitter actions in normal and maximized mode |
| Private mouseMoveSplittersListener |
Type : function
|
Default value : null
|
|
Mouse move listener added to handling splitter actions in normal and maximized mode |
| Private mouseUpSplittersListener |
Type : function
|
Default value : null
|
|
Mouse up listener added to handling splitter actions in normal and maximized mode |
| savingItemMapping |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
savingItemMapping event output |
| Private splitters |
Type : XamTileSplitterComponent[]
|
Default value : []
|
|
Returns the array of splitters |
| tileClosed |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileClosed event output |
| tileClosing |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileClosing event output |
| tileDragging |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileDtagging event output |
| tileStateChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileStateChanged event output |
| tileStateChanging |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileStateChanging event output |
| tileSwapped |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileSwapped event output |
| tileSwapping |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
tileSwapping event output |
| timeoutForRecalculation |
Type : any
|
Default value : -1
|
|
Timeout id for recalculate the tile elements |
| widthParentElement |
Type : HTMLElement
|
|
Reference to the parent element attached to a width resize observer |
| Private widthSizeObserver |
Type : ResizeObserver
|
Default value : null
|
|
Resize observer over the host control as part of the mechanism to avoid the grids overflowding |
| xamTileSubscription |
Type : Subscription
|
|
Service event subscription Handles toggle state changes |
| 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 |
| mainGridRef | ||||||
getmainGridRef()
|
||||||
|
Gets the reference to the grid in normal mode.
Returns :
ElementRef
|
||||||
setmainGridRef(value: ElementRef)
|
||||||
|
Sets the reference to the grid in normal mode.
Parameters :
Returns :
void
|
| maximizedGridRef | ||||||
getmaximizedGridRef()
|
||||||
|
Gets the reference to the gird in maximized mode
Returns :
ElementRef
|
||||||
setmaximizedGridRef(value: ElementRef)
|
||||||
|
Sets the reference to the gird in maximized mode
Parameters :
Returns :
void
|
| splittersRef | ||||||
getsplittersRef()
|
||||||
|
Gets the reference to the dynamically added tile splitters in normal and maximized mode
Returns :
QueryList<XamTileSplitterComponent>
|
||||||
setsplittersRef(value: QueryList<XamTileSplitterComponent>)
|
||||||
|
Sets the reference to the dynamically added tile splitters in normal and maximized mode
Parameters :
Returns :
void
|
| mainRowSplitterRulersRef | ||||||
getmainRowSplitterRulersRef()
|
||||||
|
Gets the references to supporting tags for the resizing process by rows
Returns :
QueryList<ElementRef>
|
||||||
setmainRowSplitterRulersRef(value: QueryList
|
||||||
|
Sets the references to supporting tags for the resizing process by rows
Parameters :
Returns :
void
|
| mainColSplitterRulersRef | ||||||
getmainColSplitterRulersRef()
|
||||||
|
Gets the references to supporting tags for the resizing process by columns
Returns :
QueryList<ElementRef>
|
||||||
setmainColSplitterRulersRef(value: QueryList
|
||||||
|
Sets the references to supporting tags for the resizing process by columns
Parameters :
Returns :
void
|
| showTileAreaSplitter |
getshowTileAreaSplitter()
|
|
Checks if the tile splitter should be shown on maximized state
Returns :
boolean
|
| maximizedTile |
getmaximizedTile()
|
|
Docu
Returns :
ElementRef
|
| minimizedTilesContainer |
getminimizedTilesContainer()
|
|
Docu
Returns :
ElementRef
|
| contentArray |
getcontentArray()
|
|
Returns the array of templates
Returns :
any
|
| calcWidth | ||||||
getcalcWidth()
|
||||||
|
Calculted width based on observers
Returns :
string
|
||||||
setcalcWidth(value: string)
|
||||||
|
Calculted width based on observers
Parameters :
Returns :
void
|
| calcHeight | ||||||
getcalcHeight()
|
||||||
|
Calculted height based on observers
Returns :
string
|
||||||
setcalcHeight(value: string)
|
||||||
|
Calculted height based on observers
Parameters :
Returns :
void
|
| itemsSource | ||||||
getitemsSource()
|
||||||
|
Gets Internal XamTileManagerComponent data
Returns :
any
|
||||||
setitemsSource(value: any)
|
||||||
|
Sets internal data
Parameters :
Returns :
void
|
| items |
getitems()
|
|
Get the collection of Items from model
Returns :
any
|
| heightOverflow |
getheightOverflow()
|
|
Return overflow-y to avoid height issues
Returns :
string
|
| widthOverflow |
getwidthOverflow()
|
|
Return overflow-x to avoid width issues
Returns :
string
|
| explicitRowsColumnsLayout |
getexplicitRowsColumnsLayout()
|
|
Explicit Row and Columns layout for XamTileManager
Returns :
boolean
|
| verticalLayout |
getverticalLayout()
|
|
Vertical Layout
Returns :
boolean
|
| maxColumns | ||||||
getmaxColumns()
|
||||||
|
Gets the maxColumns for layout tiles
Returns :
number
|
||||||
setmaxColumns(value: number)
|
||||||
|
Sets the maxColumns for the layout of tiles
Parameters :
Returns :
void
|
| maxRows | ||||||
getmaxRows()
|
||||||
|
Gets the maxRows for layout tiles
Returns :
number
|
||||||
setmaxRows(value: number)
|
||||||
|
Sets the maxRows for the layouttiles
Parameters :
Returns :
void
|
| normalModeSettings |
getnormalModeSettings()
|
|
Gets the settings that are used to layout tiles
Returns :
NormalModeSettings
|
| maximizedModeSettings |
getmaximizedModeSettings()
|
|
Gets the settings that are used to layout minimized and maximized tiles
Returns :
MaximizedModeSettings
|
| mainRowSizes |
getmainRowSizes()
|
|
Returns the number of rows to be rendered in component
Returns :
string
|
| mainColumnSizes |
getmainColumnSizes()
|
|
Returns the number of columns to be rendered in component
Returns :
string
|
| maximized |
getmaximized()
|
|
Indicates if the component is on maximized state
Returns :
boolean
|
| hasMinimized |
gethasMinimized()
|
|
Return true if there are minimized items to show
Returns :
boolean
|
import {
AfterContentInit,
AfterViewInit,
ChangeDetectorRef,
Component,
ContentChildren,
ElementRef,
EventEmitter,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
QueryList,
Renderer2,
ViewChildren,
ViewChild,
} from '@angular/core';
import {
ModelProxy,
XamTileManagerModel,
NormalModeSettings,
TileLayoutOrder,
MaximizedModeSettings,
} from '@mobilize/wms-framework';
import { XamTileComponent } from '../xam-tile/xam-tile.component';
import { XamTileManagerService } from './xam-tile-manager.service';
import { Subscription } from 'rxjs';
import { Utils } from '../../utils/utilities';
import { BaseComponent } from '../base/base.component';
import { XamTileSplitterComponent } from '../xam-tile-splitter/xam-tile-splitter.component';
/**
* Angular Component for the XamTile manager Control.
*
* @export
* @class XamTileManagerComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterViewInit}
* @implements {AfterContentInit}
* @implements {OnDestroy}
*/
@Component({
selector: 'wm-xam-tile-manager',
templateUrl: './xam-tile-manager.component.html',
styleUrls: ['./xam-tile-manager.component.scss'],
providers: [XamTileManagerService],
})
export class XamTileManagerComponent
extends BaseComponent
implements OnInit, AfterViewInit, AfterContentInit, OnDestroy
{
/**
* Internal reference to mainGrid in normal mode
*
* @private
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
private __mainGridRef: ElementRef = null;
/**
* Internal reference to the maximizedGrid in maximized mode
*
* @private
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
private __maximizedGridRef: ElementRef = null;
/**
* Internal reference to the list of splitters in normal and maximized mode
*
* @private
* @type {QueryList<XamTileSplitterComponent>}
* @memberof XamTileManagerComponent
*/
private __splittersRef: QueryList<XamTileSplitterComponent> = null;
/**
* Internal reference to the rulers for rows to assist in row resizing
*
* @private
* @type {QueryList<ElementRef>}
* @memberof XamTileManagerComponent
*/
private __mainRowSplitterRulersRef: QueryList<ElementRef>;
/**
* Internal reference to the rulers for columns to assist in column resizing
*
* @private
* @type {QueryList<ElementRef>}
* @memberof XamTileManagerComponent
*/
private __mainColSplitterRulersRef: QueryList<ElementRef>;
/**
* Returns the array of splitters
*
* @readonly
* @type {*}
* @memberof XamTileManagerComponent
*/
private splitters: XamTileSplitterComponent[] = [];
/**
* List of supporting tags for the resizing process by rows
*
* @private
* @type {ElementRef[]}
* @memberof XamTileManagerComponent
*/
private mainRowSplitterRulers: ElementRef[] = [];
/**
* List of supporting tags for the resizing process by columns
*
* @private
* @type {ElementRef[]}
* @memberof XamTileManagerComponent
*/
private mainColSplitterRulers: ElementRef[] = [];
/**
* Individual size definition for each row in normal mode
*
* @type {string[]}
* @memberof XamTileManagerComponent
*/
actualMainRowSizes: string[] = [];
/**
* Individual size definition for each column in normal mode
*
* @type {string[]}
* @memberof XamTileManagerComponent
*/
actualMainColumnSizes: string[] = [];
/**
* Definition of the row sizes in maximized mode
*
* @memberof XamTileManagerComponent
*/
maximizedRowSizes = '';
/**
* Individual size definition for each row in maximized mode
* Hint, it will always have just two
*
* @type {string[]}
* @memberof XamTileManagerComponent
*/
actualMaximizedRowSizes: string[] = [];
/**
* Mouse move listener added to handling splitter actions in normal and maximized mode
*
* @private
* @memberof XamTileManagerComponent
*/
private mouseMoveSplittersListener: () => void = null;
/**
* Mouse up listener added to handling splitter actions in normal and maximized mode
*
* @private
* @memberof XamTileManagerComponent
*/
private mouseUpSplittersListener: () => void = null;
/**
* Mouse leave listener added to handling splitter actions in normal and maximized mode
*
* @private
* @memberof XamTileManagerComponent
*/
private mouseLeaveSplittersListener: () => void = null;
/**
* The minimal height to use for tiles when minized, also the space left for them
*
* @private
* @type {number}
* @memberof XamTileManagerComponent
*/
private minimizedMinHeight = 0;
/**
* The maximal height to use for tiles when minized, also the space left for them
*
* @private
* @type {number}
* @memberof XamTileManagerComponent
*/
private minimizedMaxHeight = 0;
/**
* animationEnded event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
animationEnded: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* animationStarted event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
animationStarted: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* loadingItemMapping event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
loadingItemMapping: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* savingItemMapping event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
savingItemMapping: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileClosed event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileClosed: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileClosing event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileClosing: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileDtagging event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileDragging: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileStateChanged event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileStateChanged: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileStateChanging event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileStateChanging: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileSwapped event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileSwapped: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* tileSwapping event output
*
* @type {EventEmitter<{ sender: XamTileManagerModel; e: any }>}
* @memberof XamTileManagerComponent
*/
@Output()
tileSwapping: EventEmitter<{
sender: XamTileManagerModel;
e: any;
}> = new EventEmitter();
/**
* Current component model
*
* @type {XamTileManagerModel}
* @memberof XamTileManagerComponent
*/
@Input()
model: XamTileManagerModel;
/**
* Template elements reference
*
* @type {QueryList<any>}
* @memberof XamTileManagerComponent
*/
@ContentChildren(XamTileComponent)
content: QueryList<XamTileComponent>;
/**
* Gets the reference to the grid in normal mode.
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
@ViewChild('mainGrid')
get mainGridRef(): ElementRef {
return this.__mainGridRef;
}
/**
* Sets the reference to the grid in normal mode.
*
* @memberof XamTileManagerComponent
*/
set mainGridRef(value: ElementRef) {
this.__mainGridRef = value;
this.checkIfSplitterListenersAreRequired();
}
/**
* Gets the reference to the gird in maximized mode
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
@ViewChild('maximizedGrid')
get maximizedGridRef(): ElementRef {
return this.__maximizedGridRef;
}
/**
* Sets the reference to the gird in maximized mode
*
* @memberof XamTileManagerComponent
*/
set maximizedGridRef(value: ElementRef) {
this.__maximizedGridRef = value;
this.checkIfSplitterListenersAreRequired();
}
/**
* Gets the reference to the dynamically added tile splitters in normal and maximized mode
*
* @type {QueryList<XamTileSplitterComponent>}
* @memberof XamTileManagerComponent
*/
@ViewChildren(XamTileSplitterComponent)
get splittersRef(): QueryList<XamTileSplitterComponent> {
return this.__splittersRef;
}
/**
* Sets the reference to the dynamically added tile splitters in normal and maximized mode
*
* @memberof XamTileManagerComponent
*/
set splittersRef(value: QueryList<XamTileSplitterComponent>) {
this.__splittersRef = value;
this.splitters = this.__splittersRef?.toArray() ?? [];
this.checkIfSplitterListenersAreRequired();
}
/**
* Gets the references to supporting tags for the resizing process by rows
*
* @type {QueryList<ElementRef>}
* @memberof XamTileManagerComponent
*/
@ViewChildren('mainRowSplitterRule')
get mainRowSplitterRulersRef(): QueryList<ElementRef> {
return this.__mainRowSplitterRulersRef;
}
/**
* Sets the references to supporting tags for the resizing process by rows
*
* @memberof XamTileManagerComponent
*/
set mainRowSplitterRulersRef(value: QueryList<ElementRef>) {
this.__mainRowSplitterRulersRef = value;
this.mainRowSplitterRulers =
this.__mainRowSplitterRulersRef?.toArray() ?? [];
}
/**
* Gets the references to supporting tags for the resizing process by columns
*
* @type {QueryList<ElementRef>}
* @memberof XamTileManagerComponent
*/
@ViewChildren('mainColSplitterRule')
get mainColSplitterRulersRef(): QueryList<ElementRef> {
return this.__mainColSplitterRulersRef;
}
/**
* Sets the references to supporting tags for the resizing process by columns
*
* @memberof XamTileManagerComponent
*/
set mainColSplitterRulersRef(value: QueryList<ElementRef>) {
this.__mainColSplitterRulersRef = value;
this.mainColSplitterRulers =
this.__mainColSplitterRulersRef?.toArray() ?? [];
}
/**
* Checks if the tile splitter should be shown on maximized state
*
* @readonly
* @type {boolean}
* @memberof XamTileManagerComponent
*/
get showTileAreaSplitter(): boolean {
return this.maximizedModeSettings?.ShowTileAreaSplitter ?? false;
}
/**
* Docu
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
@ViewChild(XamTileManagerComponent)
internalXamTileManager: XamTileManagerComponent;
/**
* Docu
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
get maximizedTile(): ElementRef {
return (
this.internalXamTileManager?.maximizedTileRef ?? this.maximizedTileRef
);
}
/**
* Docu
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
get minimizedTilesContainer(): ElementRef {
return (
this.internalXamTileManager?.minimizedTilesContainerRef ??
this.minimizedTilesContainerRef
);
}
/**
* Reference to the maximized tile container.
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
@ViewChild('maximizedTile')
maximizedTileRef: ElementRef;
/**
* Reference to the minimized tile container.
*
* @type {ElementRef}
* @memberof XamTileManagerComponent
*/
@ViewChild('minimizedTilesContainer')
minimizedTilesContainerRef: ElementRef;
/**
* Docu
*
* @type {boolean}
* @memberof XamTileManagerComponent
*/
isResizing: boolean;
/**
* Service event subscription
* Handles toggle state changes
*
* @type {Subscription}
* @memberof XamTileManagerComponent
*/
xamTileSubscription: Subscription;
/**
* Timeout id for recalculate the tile elements
*
* @type {*}
* @memberof XamTileManagerComponent
*/
timeoutForRecalculation: any = -1;
/**
* Returns the array of templates
*
* @readonly
* @type {*}
* @memberof XamTileManagerComponent
*/
get contentArray(): any {
return this.content.toArray();
}
/**
* Reference to the parent element attached to a height resize observer
*
* @type {HTMLElement}
* @memberof XamTileManagerComponent
*/
heightParentElement: HTMLElement;
/**
* Reference to the parent element attached to a width resize observer
*
* @type {HTMLElement}
* @memberof XamTileManagerComponent
*/
widthParentElement: HTMLElement;
/**
* Calculted width based on observers
*
* @memberof XamTileManagerComponent
*/
set calcWidth(value: string) {
this.model.CalcWidth = value;
}
/**
* Calculted width based on observers
*
* @type {string}
* @memberof XamTileManagerComponent
*/
get calcWidth(): string {
return this.model.CalcWidth;
}
/**
* Calculted height based on observers
*
* @memberof XamTileManagerComponent
*/
set calcHeight(value: string) {
this.model.CalcHeight = value;
}
/**
* Calculted height based on observers
*
* @type {string}
* @memberof XamTileManagerComponent
*/
get calcHeight(): string {
return this.model.CalcHeight;
}
/**
* Flag to know if the component is ready to render
*
* @type {boolean}
* @memberof XamTileManagerComponent
*/
isInitialized = false;
/**
* ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings.
*
* @private
* @type {XamTileManagerModel}
* @memberof XamTileManagerComponent
*/
protected modelProxy: XamTileManagerModel =
ModelProxy.create<XamTileManagerModel>();
/**
* Gets Internal XamTileManagerComponent data
*
* @readonly
* @memberof XamTileManagerComponent
*/
get itemsSource(): any {
return this.model.ItemsSource;
}
/**
* Sets internal data
*
* @memberof XamTileManagerComponent
*/
@Input()
set itemsSource(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
XamTileManagerModel.ItemsSourceProperty,
value
)
) {
this.modelProxy.ItemsSource = value;
}
}
/**
* Get the collection of Items from model
*
* @readonly
* @type {*}
* @memberof XamTileManagerComponent
*/
get items(): any {
return this.model.Items?.internalArray;
}
/**
*Object that contains the list of controls to be rendered
*
* @type {*}
* @memberof XamTileManagerComponent
*/
itemsToRender: any;
/**
* Collection to compare when there are new elements to display
*
* @memberof XamTileManagerComponent
*/
private cacheItems = [];
/**
* Resize observer over the host control as part of the mechanism to avoid the grids overflowding
*
* @private
* @type {ResizeObserver}
* @memberof XamTileManagerComponent
*/
private heightSizeObserver: ResizeObserver = null;
/**
* Resize observer over the host control as part of the mechanism to avoid the grids overflowding
*
* @private
* @type {ResizeObserver}
* @memberof XamTileManagerComponent
*/
private widthSizeObserver: ResizeObserver = null;
/**
* Creates an instance of XamTileManagerComponent.
*
* @param {XamTileManagerModel} injectedModel
* @memberof XamTileManagerComponent
*/
constructor(
private injector: Injector,
@Optional() protected injectedModel: XamTileManagerModel,
private xamTileService: XamTileManagerService,
private elementRef: ElementRef,
private renderer: Renderer2,
private cdRef: ChangeDetectorRef
) {
super(cdRef, injector);
this.model = injectedModel;
}
/**
* Assign static set of items to be rendered.
*
* @memberof XamTileManagerComponent
*/
assignStaticItems(): void {
if (this.constructor.name !== 'XamTileManagerComponent') return;
const arrayItems = this.contentArray;
// Adding static items in collection
this.loadStaticItems(arrayItems, this.model.Items);
}
/**
* NgOnInit Lifecycle method
*
* @memberof XamTileManagerComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new XamTileManagerModel();
this.setupModel(this.model);
super.ngOnInit();
this.registerTileService();
}
/**
* Angular lifecycle hook.
* AfterContent Init
*
* @memberof XamTileManagerComponent
*/
ngAfterContentInit(): void {
super.ngAfterContentInit();
this.isInitialized = true;
this.detectChangesAction();
}
/**
* Angular lifeCycle method
*
* @memberof XamTileManagerComponent
*/
ngAfterViewInit(): void {
super.ngAfterViewInit();
setTimeout(() => {
this.assignStaticItems();
this.getDynamicUIElements(this.items);
this.widthParentElement = this.setStaticSize(
this.widthResizeObserverCallback.bind(this),
'Width'
);
this.heightParentElement = this.setStaticSize(
this.heightResizeObserverCallback.bind(this),
'Height'
);
this.updateRowAndColumnsNormalLayout();
this.updateRowAndColumnsMaximizedLayout();
}, 0);
}
/**
* Angular lifecycle hook.
* Unsubscribe from xamtileService
*
* @memberof XamTileManagerComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.xamTileSubscription?.unsubscribe();
this.model.Items?.PropertyChanged?.removeHandler(
this.collectionChangeInput,
this
);
this.unobserveSizeObserver();
this.unregisterSplitterListeners();
}
/**
* Register some XamTileService handlers
*
* @memberof XamTileManagerComponent
*/
registerTileService(): void {
this.xamTileService.xamTileManagerRef = this;
this.model.Items?.PropertyChanged.addHandler(
this.collectionChangeInput,
this
);
this.xamTileSubscription =
this.xamTileService.tileStateChangeEvent.subscribe(
(e: XamTileComponent) => {
this.handleXamTileStateChange(e);
}
);
}
/**
* Method that initializes the resize observers for height and width, to set right size.
* This is required to avoid the main grid to overflow when child xam-tile requires more space
* than needed, in theory the use of minmax having 0px for the layout should prevent this, but
* doesn't works, so we limit the size of the xam-tile-manager
*
* @param {ResizeObserverCallback} callback
* @param {string} property
* @type {void}
*
* @memberof XamTileManagerComponent
*/
private setStaticSize(
callback: ResizeObserverCallback,
property: string
): HTMLElement {
if (this.model[property]) return;
let element: HTMLElement;
element = this.elementRef.nativeElement.parentElement;
while (
element?.parentElement &&
!(
element.style[property.toLowerCase()].includes('px') ||
element.style[property.toLowerCase()].includes('%')
)
) {
element = element.parentElement;
}
if (property === 'Width') {
this.widthSizeObserver = new ResizeObserver(callback);
this.widthSizeObserver.observe(element);
} else {
this.heightSizeObserver = new ResizeObserver(callback);
this.heightSizeObserver.observe(element);
}
return element;
}
/**
* Unobserves height and with elements
*
* @private
* @memberof XamTileManagerComponent
*/
private unobserveSizeObserver(): void {
if (this.widthParentElement) {
this.widthSizeObserver?.unobserve(this.widthParentElement);
}
if (this.heightParentElement) {
this.heightSizeObserver?.unobserve(this.heightParentElement);
}
}
/**
* To process callbacks from the resize observer
*
* @private
* @param {ResizeObserverEntry[]} entries
* @memberof XamTileManagerComponent
*/
private widthResizeObserverCallback(entries: ResizeObserverEntry[]): void {
if (!this.processWidthChange(entries[0])) return;
this.detectChangesAction();
}
/**
* To process callbacks from the resize observer
*
* @private
* @param {ResizeObserverEntry[]} entries
* @memberof XamTileManagerComponent
*/
private heightResizeObserverCallback(entries: ResizeObserverEntry[]): void {
if (!this.processHeightChange(entries[0])) return;
this.detectChangesAction();
}
/**
* Checks if the change of height generates a change in the estimated max height for the grids
*
* @private
* @param {ResizeObserverEntry} entry
* @return {*} {boolean}
* @memberof XamTileManagerComponent
*/
private processHeightChange(entry: ResizeObserverEntry): boolean {
if (!this.model.Height) {
const heightCalc = entry?.contentRect?.height;
if (heightCalc > 0 && `${heightCalc}px` !== this.calcHeight) {
this.calcHeight = `${heightCalc}px`;
return true;
}
} else if (this.calcHeight !== null) {
this.calcHeight = null;
return true;
}
return false;
}
/**
* Checks if the change of width generates a change in the estimated max width for the grids
*
* @private
* @param {ResizeObserverEntry} entry
* @return {*} {boolean}
* @memberof XamTileManagerComponent
*/
private processWidthChange(entry: ResizeObserverEntry): boolean {
if (!this.model.Width) {
const widthCalc = entry?.contentRect?.width;
if (widthCalc > 0 && `${widthCalc}px` !== this.calcWidth) {
this.calcWidth = `${widthCalc}px`;
return true;
}
} else if (this.calcWidth !== null) {
this.calcWidth = null;
return true;
}
return false;
}
/**
* Handle the tile state changes
*
* @param {XamTileComponent} component
* @memberof XamTileManagerComponent
*/
handleXamTileStateChange(component: XamTileComponent): void {
this.model.InternalMaximized = component.isMaximized;
this.model.InternalHasMinimized = false;
this.xamTileService.xamTilesCollection.forEach((e) => {
if (e.model !== component.model) {
e.executeSuspendingNotifications(() => {
e.isMaximized = false; // Minimize the other tiles
e.lastMaximized = false;
this.model.InternalHasMinimized = true;
});
}
});
this.detectChanges();
this.moveElementToMaximizePanel();
this.detectChangesAction();
}
/**
* Move the maximized panel to the maximized section of XamTileManager
*
* @memberof XamTileManagerComponent
*/
moveElementToMaximizePanel(): void {
const maximizedPanel = this.maximizedTile?.nativeElement ?? null;
const minimizedTilesContainer =
this.minimizedTilesContainer?.nativeElement ?? null;
/* istanbul ignore else */
if (maximizedPanel) {
while (maximizedPanel.firstChild) {
//Clean old nodes
maximizedPanel.removeChild(maximizedPanel.lastChild);
}
const maxTile = this.xamTileService.xamTilesCollection.filter(
(tile) => tile.isMaximized
);
/* istanbul ignore else */
if (maxTile.length > 0) {
this.renderer.appendChild(maximizedPanel, maxTile[0].displayElement);
}
}
this.xamTileService.xamTilesCollection.forEach((e) => {
e.displayElement.classList.remove('tileItemMinimized');
if (minimizedTilesContainer && !e.isMaximized) {
this.renderer.appendChild(minimizedTilesContainer, e.displayElement);
e.displayElement.classList.add('tileItemMinimized');
}
});
}
/**
* Handler to verify components
*
* @param {string} name
* @return {*} {*}
* @memberof XamTileManagerComponent
*/
collectionChangeInput(ev: any): any {
if (this.timeoutForRecalculation === -1) {
this.timeoutForRecalculation = setTimeout(() => {
this.checkMaximizedState();
this.getDynamicUIElements(this.items);
this.timeoutForRecalculation = -1;
});
}
}
/**
* Checks if the maximized state is the correct
*
* @private
* @memberof XamTileManagerComponent
*/
checkMaximizedState(): void {
if (this.maximized) {
this.model.InternalMaximized =
this.items.filter((item: any) => item.IsMaximized).length > 0;
}
}
/**
* Handler to verify components
*
* @param {any} sender
* @param {any} args
* @return {*} {*}
* @memberof XamTileManagerComponent
*/
tileSwappedHandler(sender: any, args: any): void {
this.model?.TileSwapped.fire([sender, args]);
}
/**
* Returns the dynamic components to render.
*
* @return {*} {*}
* @memberof XamTileManager
*/
getDynamicUIElements(arrayToInspect: any): void {
let newControlsToRender = [];
/* istanbul ignore else */
if (this.isInitialized && arrayToInspect) {
/* Gets the controls that are dynamic */
const staticCtrlModels = this.content.map((x) => x.model);
newControlsToRender = Utils.differenceWith(
arrayToInspect,
staticCtrlModels
);
this.maxColumns = 1; // Reset default values before checking the items
this.maxRows = 1; // Reset default values before checking the items
if (newControlsToRender.length === 0 && staticCtrlModels.length > 0) {
staticCtrlModels.forEach((element) => {
this.verifyMaxColsAndRows(element, staticCtrlModels.length);
});
} else {
newControlsToRender.forEach((element) => {
this.verifyMaxColsAndRows(element, newControlsToRender.length);
});
}
this.generateSplitters();
const equals = Utils.areSameElements(
this.cacheItems,
newControlsToRender
);
/* istanbul ignore next */
if (!equals) {
this.cacheItems = newControlsToRender;
const newControls = Utils.getUIControls(
newControlsToRender,
this.injector
);
this.itemsToRender = newControls;
this.model.UpdateLayout();
this.detectChangesAction();
}
}
}
/**
* Verifies the max column and max row and updates it if it's necessary.
* Updates the element column to the max column of the tile manager when it's necessary
* @param element item in the collection
* @param elementsCount number of items
*/
verifyMaxColsAndRows(element: any, elementsCount: number): void {
if (element.Column + 1 > this.maxColumns) {
if (elementsCount > 1) {
this.maxColumns = element.Column + 1;
} else {
element.Column = this.maxColumns;
}
}
if (element.Row + 1 > this.maxRows) {
this.maxRows = element.Row + 1;
}
}
/**
* Generates splitter for each tile column and row.
*
* @type {void}
* @memberof XamTileManager
*/
generateSplitters(): void {
this.model.Splitters = [];
for (let i = 1; i < this.maxColumns; i++) {
const splitter = new XamTileSplitterComponent();
splitter.isHorizontal = false;
splitter.gridArea = `1 / ${i} / span ${this.maxRows} / auto`;
this.model.Splitters.push(splitter);
}
for (let i = 1; i < this.maxRows; i++) {
const splitter = new XamTileSplitterComponent();
splitter.isHorizontal = true;
splitter.gridArea = `${i} / 1 / auto / span ${this.maxColumns}`;
this.model.Splitters.push(splitter);
}
}
/**
* Update the definition of sizes for columns and rows in normal state
*
* @private
* @memberof XamTileManagerComponent
*/
private updateRowAndColumnsNormalLayout() {
this.actualMainRowSizes = [];
this.actualMainColumnSizes = [];
for (let i = 0; i < this.maxRows; i++) {
this.actualMainRowSizes.push('minmax(0px, 1fr)');
}
for (let i = 0; i < this.maxColumns; i++) {
this.actualMainColumnSizes.push('minmax(0px, 1fr)');
}
this.model.MainRowSizes = this.actualMainRowSizes.join(' ');
this.model.MainColumnSizes = this.actualMainColumnSizes.join(' ');
}
/**
* Update the definition of sizes for columns and rows in maximized state
*
* @private
* @memberof XamTileManagerComponent
*/
private updateRowAndColumnsMaximizedLayout() {
this.actualMaximizedRowSizes = [];
this.actualMaximizedRowSizes.push('minmax(0px, 1fr)');
let targetHeight = 40;
const settings =
this.maximizedModeSettings?.MinimizedExpandedTileConstraints;
this.minimizedMinHeight = settings?.MinHeight ?? 0;
this.minimizedMinHeight =
this.minimizedMinHeight < 0 ? 0 : this.minimizedMinHeight;
this.minimizedMaxHeight = settings?.MaxHeight ?? Number.MAX_VALUE;
this.minimizedMaxHeight =
this.minimizedMaxHeight <= 0 ? Number.MAX_VALUE : this.minimizedMaxHeight;
this.minimizedMaxHeight =
this.minimizedMaxHeight < this.minimizedMinHeight
? this.minimizedMinHeight
: this.minimizedMaxHeight;
targetHeight = Math.max(targetHeight, this.minimizedMinHeight);
targetHeight = Math.min(targetHeight, this.minimizedMaxHeight);
this.actualMaximizedRowSizes.push(targetHeight + 'px');
this.maximizedRowSizes = this.actualMaximizedRowSizes.join(' ');
}
/**
* Return grid-area css property to apply in the dinamcally added divs for splitters
*
* @param {number} index
* @return {*} {string}
* @memberof XamTileManagerComponent
*/
rowGridArea(index: number): string {
return `${index + 1} / 1 / auto / auto`;
}
/**
* Return grid-area css property to apply in the dinamcally added divs for splitters
*
* @param {number} index
* @return {*} {string}
* @memberof XamTileManagerComponent
*/
columnGridArea(index: number): string {
return `1 / ${index + 1} / auto / auto`;
}
/**
* Checks if the mouse listeners are going to be required for splitter functionality
*
* @private
* @memberof XamTileManagerComponent
*/
private checkIfSplitterListenersAreRequired(): void {
this.unregisterSplitterListeners();
if (this.splitters.length > 0) {
//Normal mode
if (!!this.mainGridRef) {
this.mouseMoveSplittersListener = this.renderer2.listen(
this.mainGridRef.nativeElement,
'mousemove',
this.mouseMoveSplitters.bind(this)
);
this.mouseUpSplittersListener = this.renderer2.listen(
this.mainGridRef.nativeElement,
'mouseup',
this.endMovingSplitters.bind(this)
);
this.mouseLeaveSplittersListener = this.renderer2.listen(
this.mainGridRef.nativeElement,
'mouseleave',
this.endMovingSplitters.bind(this)
);
}
//Maximized mode
else if (!!this.maximizedGridRef) {
this.mouseMoveSplittersListener = this.renderer2.listen(
this.maximizedGridRef.nativeElement,
'mousemove',
this.mouseMoveSplitters.bind(this)
);
this.mouseUpSplittersListener = this.renderer2.listen(
this.maximizedGridRef.nativeElement,
'mouseup',
this.endMovingSplitters.bind(this)
);
this.mouseLeaveSplittersListener = this.renderer2.listen(
this.maximizedGridRef.nativeElement,
'mouseleave',
this.endMovingSplitters.bind(this)
);
}
}
}
/**
* Unregister mouse event listeners for the the splitters handling
*
* @private
* @memberof XamTileManagerComponent
*/
private unregisterSplitterListeners(): void {
this.mouseMoveSplittersListener?.();
this.mouseUpSplittersListener?.();
this.mouseLeaveSplittersListener?.();
this.mouseMoveSplittersListener = null;
this.mouseUpSplittersListener = null;
this.mouseLeaveSplittersListener = null;
}
/**
* Mouse move handler for main grid when there are splitters and are in normal and maximized mode
*
* @private
* @param {*} event
* @memberof XamTileManagerComponent
*/
private mouseMoveSplitters(event: any): void {
for (const splitter of this.splitters) {
/* istanbul ignore else */
if (splitter.isSplitterMoving) {
this.isResizing = true;
if (this.maximized) {
this.processMaximizedSplitterResize(splitter, event);
} else {
if (splitter.isHorizontal) {
this.processMainSplitterYAxisResize(splitter, event);
} else {
this.processMainSplitterXAxisResize(splitter, event);
}
}
break;
}
}
}
/**
* Stops the resizing of the main splitters in normal and maximized mode
*
* @private
* @param {*} event
* @memberof XamTileManagerComponent
*/
private endMovingSplitters(event: any): void {
for (const splitter of this.splitters) {
/* istanbul ignore else */
if (splitter.isSplitterMoving) {
splitter.isSplitterMoving = false;
this.isResizing = false;
this.xamTileService.notifyTileResizing(false);
}
}
}
/**
* Process the resizing in maximized mode. This logic assumes there are only two rows and the
* resize is done in the second one, because the first is specified in 'fr' units
*
* @private
* @param {XamTileSplitterComponent} splitter
* @param {*} event
* @memberof XamTileManagerComponent
*/
private processMaximizedSplitterResize(
splitter: XamTileSplitterComponent,
event: any
) {
let targetHeight =
this.minimizedTilesContainer.nativeElement.clientHeight - event.movementY;
targetHeight = Math.max(targetHeight, this.minimizedMinHeight);
targetHeight = Math.min(targetHeight, this.minimizedMaxHeight);
this.actualMaximizedRowSizes[1] = targetHeight + 'px';
this.maximizedRowSizes = this.actualMaximizedRowSizes.join(' ');
this.detectChangesAction();
}
/**
* Process the resizing by rows. This logic is assuming the current size is given
* in 'fr' units
*
* @private
* @param {XamTileSplitterComponent} splitter
* @param {*} event
* @memberof XamTileManagerComponent
*/
private processMainSplitterYAxisResize(
splitter: XamTileSplitterComponent,
event: any
) {
const currentPos = splitter.currentPosition;
const nextPos = currentPos + 1;
const sizeA =
this.mainRowSplitterRulers[currentPos].nativeElement.clientHeight +
event.movementY;
const sizeB =
this.mainRowSplitterRulers[nextPos].nativeElement.clientHeight -
event.movementY;
this.actualMainRowSizes.forEach((value, index) => {
if (index == currentPos) {
this.actualMainRowSizes[index] = `minmax(0px, ${sizeA}fr)`;
} else if (index == nextPos) {
this.actualMainRowSizes[index] = `minmax(0px, ${sizeB}fr)`;
} else {
const actualSize =
this.mainRowSplitterRulers[index].nativeElement.clientHeight;
this.actualMainRowSizes[index] = `minmax(0px, ${actualSize}fr)`;
}
});
this.model.MainRowSizes = this.actualMainRowSizes.join(' ');
this.detectChangesAction();
}
/**
* Process the resizing by columns. This logic is assuming the current size is given
* in 'fr' units
*
* @private
* @param {XamTileSplitterComponent} splitter
* @param {*} event
* @memberof XamTileManagerComponent
*/
private processMainSplitterXAxisResize(
splitter: XamTileSplitterComponent,
event: any
) {
const currentPos = splitter.currentPosition;
const nextPos = currentPos + 1;
const sizeA =
this.mainColSplitterRulers[currentPos].nativeElement.clientWidth +
event.movementX;
const sizeB =
this.mainColSplitterRulers[nextPos].nativeElement.clientWidth -
event.movementX;
this.actualMainColumnSizes.forEach((value, index) => {
if (index == currentPos) {
this.actualMainColumnSizes[index] = `minmax(0px, ${sizeA}fr)`;
} else if (index == nextPos) {
this.actualMainColumnSizes[index] = `minmax(0px, ${sizeB}fr)`;
} else {
const actualSize =
this.mainColSplitterRulers[index].nativeElement.clientWidth;
this.actualMainColumnSizes[index] = `minmax(0px, ${actualSize}fr)`;
}
});
this.model.MainColumnSizes = this.actualMainColumnSizes.join(' ');
this.detectChangesAction();
}
/**
* Return overflow-y to avoid height issues
*
* @return {string}
* @memberof XamTileManagerComponent
*/
get heightOverflow(): string {
if (
this.splitters[0]?.['element']?.nativeElement?.clientHeight >
this.mainGridRef?.nativeElement.clientHeight + 4
) {
return 'scroll';
} else {
return 'hidden';
}
}
/**
* Return overflow-x to avoid width issues
*
* @return {string}
* @memberof XamTileManagerComponent
*/
get widthOverflow(): string {
if (
this.splitters[this.maxColumns]?.['element']?.nativeElement?.clientWidth >
this.mainGridRef?.nativeElement.clientWidth + 4
) {
return 'scroll';
} else {
return 'hidden';
}
}
/**
* Explicit Row and Columns layout for
* XamTileManager
*
* @readonly
* @type {boolean}
* @memberof XamTileManagerComponent
*/
get explicitRowsColumnsLayout(): boolean {
return (
this.normalModeSettings.TileLayoutOrder ===
TileLayoutOrder.UseExplicitRowColumnOnTile
);
}
/**
* Vertical Layout
*
* @readonly
* @type {boolean}
* @memberof XamTileManagerComponent
*/
get verticalLayout(): boolean {
return this.normalModeSettings.TileLayoutOrder === TileLayoutOrder.Vertical;
}
/**
* Gets the maxColumns for layout tiles
*
* @readonly
* @type {number}
* @memberof XamTileManagerComponent
*/
get maxColumns(): number {
return this.model.InternalMaxColumns;
}
/**
* Sets the maxColumns for the layout of tiles
*
* @memberof XamTileManagerComponent
*/
set maxColumns(value: number) {
if (this.model.InternalMaxColumns !== value) {
this.model.InternalMaxColumns = value;
this.updateRowAndColumnsNormalLayout();
}
}
/**
* Gets the maxRows for layout tiles
*
* @readonly
* @type {number}
* @memberof XamTileManagerComponent
*/
get maxRows(): number {
return this.model.InternalMaxRows;
}
/**
* Sets the maxRows for the layouttiles
*
* @memberof XamTileManagerComponent
*/
set maxRows(value: number) {
if (this.model.InternalMaxRows !== value) {
this.model.InternalMaxRows = value;
this.updateRowAndColumnsNormalLayout();
}
}
/**
* Gets the settings that are used to layout
* tiles
*
* @readonly
* @type {NormalModeSettings}
* @memberof XamTileManagerComponent
*/
get normalModeSettings(): NormalModeSettings {
return this.model.NormalModeSettings;
}
/**
* Gets the settings that are used to layout minimized and maximized tiles
*
* @readonly
* @type {MaximizedModeSettings}
* @memberof XamTileManagerComponent
*/
get maximizedModeSettings(): MaximizedModeSettings {
return this.model.MaximizedModeSettings;
}
/**
* Returns the number of rows to be rendered in component
*
* @readonly
* @type {string}
* @memberof XamTileManagerComponent
*/
get mainRowSizes(): string {
return this.model.MainRowSizes;
}
/**
* Returns the number of columns to be rendered in component
*
* @readonly
* @type {string}
* @memberof XamTileManagerComponent
*/
get mainColumnSizes(): string {
return this.model.MainColumnSizes;
}
/**
* Indicates if the component is on maximized state
*
* @readonly
* @type {boolean}
* @memberof XamTileManagerComponent
*/
get maximized(): boolean {
return this.model.InternalMaximized;
}
/**
* Return true if there are minimized items to show
*
* @readonly
* @type {boolean}
* @memberof XamTileManagerComponent
*/
get hasMinimized(): boolean {
return this.model.InternalHasMinimized;
}
}
<!-- Used for XamTileManager when TileLayoutOrder = TileLayoutOrder.UseExplicitRowColumnOnTile is on-->
<ng-container *ngIf="visibility && isInitialized">
<div
igxDrop
#mainGrid
*ngIf="explicitRowsColumnsLayout && !maximized"
class="gridTiles"
[style.grid-template-columns]="mainColumnSizes"
[style.grid-template-rows]="mainRowSizes"
[style.overflow-x]="widthOverflow"
[style.overflow-y]="heightOverflow"
[style.height]="calcHeight"
[style.width]="calcWidth"
[class.isResizing]="isResizing"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="generateDynamicControls"></ng-container>
<ng-container *ngTemplateOutlet="generateSplitters"></ng-container>
<ng-container *ngTemplateOutlet="generateSplittersRulers"></ng-container>
</div>
<!-- Manager on Maximized -->
<div
#maximizedGrid
*ngIf="explicitRowsColumnsLayout && maximized"
class="gridTiles"
[style.height]="calcHeight"
[style.width]="calcWidth"
[style.grid-template-rows]="maximizedRowSizes"
>
<div
class="maximizedTile"
[class]="{
maximizedTileWithSplitter: hasMinimized && showTileAreaSplitter
}"
[style.grid-area]="'1 / 1 / auto / auto'"
#maximizedTile
></div>
<ng-container *ngIf="hasMinimized">
<wm-xam-tile-splitter
*ngIf="showTileAreaSplitter"
class="maximizedSplitter"
[gridArea]="'1 / 1 / auto / auto'"
[isHorizontal]="true"
></wm-xam-tile-splitter>
<div
class="minimizedTilesContainer"
[style.grid-area]="'2 / 1 / auto / auto'"
#minimizedTilesContainer
></div>
</ng-container>
<ng-container *ngTemplateOutlet="generateDynamicControls"></ng-container>
</div>
</ng-container>
<ng-template #generateDynamicControls>
<ng-container
*ngFor="let value of itemsToRender; let i = index; trackBy: trackByFn"
>
<ng-container
*ngComponentOutlet="value.component; injector: value.customInjector"
>
</ng-container>
</ng-container>
</ng-template>
<ng-template #generateSplitters>
<ng-container
*ngFor="let splitter of model?.Splitters; let i = index; trackBy: trackByFn"
>
<wm-xam-tile-splitter
[gridArea]="splitter.gridArea"
[isHorizontal]="splitter.isHorizontal"
[isTransparent]="true"
></wm-xam-tile-splitter>
</ng-container>
</ng-template>
<ng-template #generateSplittersRulers>
<div
*ngFor="let value of actualMainRowSizes; let i = index; trackBy: trackByFn"
#mainRowSplitterRule
[style.width]="'0px'"
[style.grid-area]="rowGridArea | memoize: i"
></div>
<div
*ngFor="
let value of actualMainColumnSizes;
let i = index;
trackBy: trackByFn
"
#mainColSplitterRule
[style.height]="'0px'"
[style.grid-area]="columnGridArea | memoize: i"
></div>
</ng-template>
./xam-tile-manager.component.scss
:host {
display: block;
.gridTiles {
display: grid;
overflow: auto;
max-height: 100%;
max-width: 100%;
min-width: 100%;
min-height: 100%;
height: 100%;
width: 100%;
}
.maximizedTile {
width: 100%;
overflow: hidden;
}
.maximizedTileWithSplitter {
margin-bottom: 7px;
}
.minimizedTilesContainer {
width: 100%;
overflow: hidden;
white-space: nowrap;
display: inline-flex;
vertical-align: super; //required to reduce extra top space given display: inline-flex
}
.isResizing {
isolation: isolate;
user-select: none;
}
.maximizedSplitter {
margin-bottom: 1px;
}
//We need it this way because it will be applied to an element re-inserted from another scope through java-script,
//so default encapsulation prevents the rule to be properly applied
::ng-deep .tileItemMinimized {
height: 100% !important;
width: 100% !important;
grid-area: unset !important;
}
}