projects/i-components/src/lib/components/grid/grid.component.ts
Angular Component for the Grid Control.
OnInit
AfterContentInit
AfterViewInit
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
ModelProviderService
{ provide: GridModel, useValue: null }
|
| selector | wm-grid |
| styleUrls | ./grid.component.scss |
| templateUrl | ./grid.component.html |
constructor(injector: Injector, injectedModel: GridModel, provider: ModelProviderService, elementRef: ElementRef, cdRef: ChangeDetectorRef, renderer: Renderer2)
|
|||||||||||||||||||||
|
Creates an instance of GridComponent.
Parameters :
|
| background | |
Type : any
|
|
|
Property used to save the background. |
|
| columnDefinitionsSource | |
|
Property used to save the column definitions. |
|
| forceDisplayGrid | |
Type : boolean
|
|
Default value : false
|
|
|
Flag to force using display grid instead of display flex. |
|
| isItemTemplate | |
Type : boolean
|
|
| itemsControlDataSource | |
Type : any
|
|
|
Contains the items sent by the ItemsControl |
|
| itemsControlItemTemplate | |
|
Contains the ItemTemplate template sent by the ItemsControl |
|
| model | |
Type : GridModel
|
|
|
Object with properties and events for the Grid. |
|
| rowDefinitionsSource | |
|
Property used to save the row definitions. |
|
| 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... |
|
| 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.has-height |
Type : boolean
|
Default value : false
|
|
Return true if the component has a defined height |
| class.has-width |
Type : boolean
|
Default value : false
|
|
Return true if the component has a defined width |
| 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. |
| addControlsStyle | ||||||||||||
addControlsStyle(controlsSource: any, newControls: any)
|
||||||||||||
|
Adds the style to each new control.
Parameters :
Returns :
void
|
| Private applySplitting | |||||||||
applySplitting(splitter: GridSplitterComponent, event: any)
|
|||||||||
|
Apply the splitting action to either the columns or the rows
Parameters :
Returns :
void
|
| calcDefinitionsStyle |
calcDefinitionsStyle()
|
|
Gets the style based on the row and column definitions to be used in the main grid CSS properties.
Returns :
void
|
| calcGridTemplateColumns |
calcGridTemplateColumns()
|
|
Calculates the CSS grid-template-columns property based on the columnDefinitions.
Returns :
string[]
{string} |
| calcGridTemplateRows |
calcGridTemplateRows()
|
|
Calculates the CSS grid-template-rows property based on the rowDefinitions.
Returns :
string[]
{string} |
| Private checkIfSplitterListenersAreRequired |
checkIfSplitterListenersAreRequired()
|
|
Checks if the mouse listeners are going to be required for splitter functionality
Returns :
void
|
| childrenChangeHandler | ||||||
childrenChangeHandler(name: string)
|
||||||
|
handler for the children when any of the gridProperties changes
Parameters :
Returns :
void
|
| collectionChangeInput | ||||||||
collectionChangeInput(name: string)
|
||||||||
|
Method to update the collection from the itemsControlDataSource
Parameters :
Returns :
any
{*} |
| columnGridArea | ||||||
columnGridArea(index: number)
|
||||||
|
Return grid-area css property to apply in the dinamcally added divs for grid-splitters
Parameters :
Returns :
string
|
| Private convertToFlex | ||||||||||||
convertToFlex(rowFlex: any, columnFlex: boolean)
|
||||||||||||
|
Convert the grid to flex if the grid size is 1 x 1
Parameters :
Returns :
void
|
| definitionsHandler | ||||||
definitionsHandler(name: string)
|
||||||
|
This method notifies the service in case a column changes.
Parameters :
Returns :
void
|
| disableMouseEventsOnIFrames |
disableMouseEventsOnIFrames()
|
|
Disables mouse events on IFrames inside this grid.
Returns :
void
|
| enableMouseEventsOnIFrames |
enableMouseEventsOnIFrames()
|
|
Enables mouse events on IFrames inside this grid.
Returns :
void
|
| endMovingSplitter | ||||||
endMovingSplitter(event: MouseEvent)
|
||||||
|
Called in mouseup event, disables isSplitterMoving flag.
Parameters :
Returns :
void
|
| getContext | ||||||
getContext(item: any)
|
||||||
|
Return a wrapped object with a context property. If the data comes from a dataContext, it will used this method to generate the groups. This context is used when the ItemsControl passed the dataSource to the grid component.
Parameters :
Returns :
any
{context: any} |
| Private getDataSource |
getDataSource()
|
|
Returns the current data collection for the grid.
Returns :
any
{*} |
| getDynamicUIElements | ||||||
getDynamicUIElements(arrayToInspect: any)
|
||||||
|
Returns the dynamic components to render.
Parameters :
Returns :
any
{*} |
| Private getMinValue | ||||||
getMinValue(expr: string)
|
||||||
|
Retrieves the min value from a minmax expression
Parameters :
Returns :
number
{number} |
| Private GetSplitSideSize |
GetSplitSideSize(side: number, sizeValue: number, minVal: number)
|
|
Returns :
any
|
| Private getStarValue | ||||||
getStarValue(expr: string)
|
||||||
|
Returns the numeric component of a star expression (55fr)
Parameters :
Returns :
number
{number} |
| gridSplitterXAxisHandler | |||||||||
gridSplitterXAxisHandler(gridSplitter: GridSplitterComponent, event: MouseEvent)
|
|||||||||
|
Handler used when the GridSplitter component is resizing columns.
Parameters :
Returns :
void
|
| gridSplitterYAxisHandler | |||||||||
gridSplitterYAxisHandler(gridSplitter: GridSplitterComponent, event: MouseEvent)
|
|||||||||
|
Handler used when the GridSplitter component is resizing rows.
Parameters :
Returns :
void
|
| handleMovingSplitter | ||||||
handleMovingSplitter(event: MouseEvent)
|
||||||
|
Handle for a moving splitter during drag action (when mouse button is pressed).
Parameters :
Returns :
void
|
| hasGridParent |
hasGridParent()
|
|
Determines if this grid component is inside another one.
Returns :
boolean
|
| heightDefaultStyle |
heightDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:670
|
|
Overrides method to consider item template case
Returns :
string
{string} |
| Private initSplitBehavior | ||||||
initSplitBehavior(splitter: GridSplitterComponent)
|
||||||
|
Initializes the information required to do the resizing using a specific splitter
Parameters :
Returns :
void
|
| isPrimaryButtonPressed | ||||||
isPrimaryButtonPressed(event: MouseEvent)
|
||||||
|
Returns
Parameters :
Returns :
boolean
{boolean} |
| Private isStar | ||||||
isStar(expr: string)
|
||||||
|
Checks if a size is star
Parameters :
Returns :
boolean
{boolean} |
| modelChangeHandler | ||||||
modelChangeHandler(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:757
|
||||||
|
Function executed when a property model changes.
Parameters :
Returns :
void
|
| modelChildrenChangeHandler | ||||||
modelChildrenChangeHandler(name: string)
|
||||||
|
Method to handler the children collection change.
Parameters :
Returns :
void
|
| modifyInternalIFrames | ||||||
modifyInternalIFrames(fn: (iframe: HTMLIFrameElement) => void)
|
||||||
|
Modifies the IFrames inside this grid, by aplying the given function to each internal IFrame.
Parameters :
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1057
|
|
Check if there are new control to be display and add rowdefinitions and columndefinitions to the model
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1040
|
|
Angular life cycle hook
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1008
|
|
Angular life cycle hook. Used to unsubscribe any function before destroy the component
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:987
|
|
Angular lifecycle.
Returns :
void
|
| onMovingSplitter | ||||||
onMovingSplitter(event: MouseEvent)
|
||||||
|
OnMovingSplitter Handler called in the onmousemove event.
Parameters :
Returns :
void
|
| Private processChildAlignment | ||||||
processChildAlignment(orientation)
|
||||||
|
Process the alignment of the element when the parent is a flex
Parameters :
Returns :
void
|
| Private processXAxisHandlerForSplit | ||||||||||||
processXAxisHandlerForSplit(gridSplitter: GridSplitterComponent, sizeA: number, sizeB: number)
|
||||||||||||
|
To process X axis for splitBehavior = Split
Parameters :
Returns :
void
|
| Private processYAxisHandlerForSplit | ||||||||||||
processYAxisHandlerForSplit(gridSplitter: GridSplitterComponent, sizeA: number, sizeB: number)
|
||||||||||||
|
To process Y axis for splitBehavior = Split
Parameters :
Returns :
void
|
| refreshGridLayout | ||||||
refreshGridLayout(name: string)
|
||||||
|
This method calculates the columns and rows for the grid from the model or declarations
Parameters :
Returns :
void
|
| Private registerSplitterListeners |
registerSplitterListeners()
|
|
Register mouse event listeners for the splitters handling
Returns :
void
|
| rowGridArea | ||||||
rowGridArea(index: number)
|
||||||
|
Return grid-area css property to apply in the dinamcally added divs for grid-splitters
Parameters :
Returns :
string
|
| Private syncStaticColumnDefinition |
syncStaticColumnDefinition()
|
|
Sync the static column definition with the columnDefinition model
Returns :
void
|
| Private syncStaticRowDefinition |
syncStaticRowDefinition()
|
|
Sync the static row definition with the rowDefinition model
Returns :
void
|
| Private unregisterSplitterListeners |
unregisterSplitterListeners()
|
|
Unregister mouse event listeners for the the splitters handling
Returns :
void
|
| Private updateColumnModelForSplit |
updateColumnModelForSplit()
|
|
Updating the model for columns when splitBehavior = Split
Returns :
void
|
| updateColumnRowModel | ||||||
updateColumnRowModel(splitter: GridSplitterComponent)
|
||||||
|
Updates the width or height values on the columns or rows definitions of the grid.
Parameters :
Returns :
void
|
| Private updateRowAndColumnsLayout |
updateRowAndColumnsLayout()
|
|
Update the rows and columns section for the grid
Returns :
void
|
| Private updateRowModelForSplit |
updateRowModelForSplit()
|
|
Updating the model for rows when splitBehavior = Split
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
|
| Protected hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2374
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| Protected hostVerticalAlignmentCall |
hostVerticalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2357
|
|
Assign all the vertical bindings for the control
Returns :
void
|
| imageToPath | ||||||
imageToPath(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2202
|
||||||
|
Returns the path of the given image.
Parameters :
Returns :
any
|
| loadStaticItems | ||||||||||||
loadStaticItems(staticItems: any, itemsCollection: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1634
|
||||||||||||
|
Parameters :
Returns :
void
void |
| Private markForCheckComp |
markForCheckComp()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2451
|
|
Marks current component
Returns :
void
|
| mouseEnterHandler | ||||||||
mouseEnterHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1982
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| mouseLeaveHandler | ||||||||
mouseLeaveHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2001
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| Public ngAfterContentChecked |
ngAfterContentChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:867
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewChecked |
ngAfterViewChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:893
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public 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 __gridRoot |
Type : ElementRef
|
|
Internal reference to grid root element |
| Private __gridSplitter |
Type : QueryList<GridSplitterComponent>
|
|
Internal list of the grid splitters found |
| Private __gridSplitterArray |
Type : GridSplitterComponent[]
|
|
Internal list of the grid splitters found converted to a plain list |
| Private actualColumnSizes |
Type : string[]
|
Default value : []
|
|
Internal array with the sizes calculated to apply to the columns |
| Private actualRowSizes |
Type : string[]
|
Default value : []
|
|
Internal array with the sizes calculated to apply to the rows |
| cacheItems |
Type : []
|
Default value : []
|
|
Collection to compare when there are new elements to display |
| childrenChangeRef |
Type : function
|
|
Contains the reference to the function in charge of tracking the changes of the children property |
| columnChangeRef |
Type : function
|
|
Contains the reference to the function in charge of tracking the changes of the columnDefinition property |
| columnDefinitions |
Type : QueryList<GridColumnDefinitionsComponent>
|
Decorators :
@ContentChildren(GridColumnDefinitionsComponent, {descendants: false})
|
|
ColumnDefinitions of the Grid Component. |
| columnsSplitter |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren('colSplitter')
|
|
Columns references used by the GridSplitter |
| content |
Type : QueryList<any>
|
Decorators :
@ContentChildren('gridItem', {descendants: true})
|
|
QueryList of child grid elements. |
| firstTime |
Default value : true
|
|
Flag used to mark when the event is call the first time |
| flexDirection |
Type : string
|
|
set the flex box direction when the display is set as flex |
| flexStyle |
Type : string
|
|
Property used it when the grid have one column/row to assign a flexBox instead of the grid |
| forceDisplayGrid |
Default value : false
|
Decorators :
@Input()
|
|
Flag to force using display grid instead of display flex. |
| gridColumns |
Type : string
|
Default value : ''
|
|
Defines the number of columns in the grid |
| gridRows |
Type : string
|
Default value : ''
|
|
Defines the number of rows in the grid |
| Private gridService |
Type : GridService
|
|
Property used to save the GridService instance obtained from the injector. |
| hasHeight |
Default value : false
|
Decorators :
@HostBinding('class.has-height')
|
|
Return true if the component has a defined height |
| hasWidth |
Default value : false
|
Decorators :
@HostBinding('class.has-width')
|
|
Return true if the component has a defined width |
| horizontalAlignmentFlex |
Type : string
|
| isInitialized |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:543
|
|
Flag to know if the component is ready to render |
| isItemTemplate |
Type : boolean
|
Decorators :
@Input()
|
| Private itemsCntrlItemTemplate |
Type : TemplateRef<any>
|
|
Property used to save the template that will be use to render the itemsCtrlDataSource items |
| Private itemsCtrlDataSource |
Type : any
|
|
Property used to save the collection to render as dynamic controls |
| itemsToRender |
Type : []
|
Default value : []
|
|
This property have the collection of items that should be render |
| model |
Type : GridModel
|
Decorators :
@Input()
|
|
Object with properties and events for the Grid. |
| Protected modelProxy |
Type : GridModel
|
Default value : ModelProxy.create<GridModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:552
|
|
ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings. |
| Private mouseLeaveSplitterListener |
Type : function
|
Default value : null
|
|
Mouse leave listener added to handling splitter actions |
| Private mouseMoveSplitterListener |
Type : function
|
Default value : null
|
|
Mouse move listener added to handling splitter actions |
| Private mouseUpSplitterListener |
Type : function
|
Default value : null
|
|
Mouse up listener added to handling splitter actions |
| Private onUpdateColumnRowModel |
Default value : false
|
|
Flag to prevent circular updating of height/widths of rows |
| rowChangeRef |
Type : function
|
|
Contains the reference to the function in charge of tracking the changes of the RowDefinition property |
| rowDefinitions |
Type : QueryList<GridRowDefinitionsComponent>
|
Decorators :
@ContentChildren(GridRowDefinitionsComponent, {descendants: false})
|
|
RowDefinitions of the Grid Component. |
| rowsSplitter |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren('rowSplitter')
|
|
Rows references used by the GridSplitter |
| Private sizesUpdatedToStar |
Type : number[]
|
Default value : []
|
|
To keep track of what sizes were updated to star during splitting actions |
| 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 |
| gridRoot | ||||||
getgridRoot()
|
||||||
|
Getter for the reference to the root element of the grid
Returns :
ElementRef
|
||||||
setgridRoot(value: ElementRef)
|
||||||
|
Setter for the reference to the root element of the grid
Parameters :
Returns :
void
|
| gridSplitter | ||||||
getgridSplitter()
|
||||||
|
Getter for GridSplitter of the Grid component.
Returns :
QueryList<GridSplitterComponent>
|
||||||
setgridSplitter(value: QueryList<GridSplitterComponent>)
|
||||||
|
Setter for GridSplitter of the Grid component.
Parameters :
Returns :
void
|
| background | ||||||
getbackground()
|
||||||
|
Gets the background property from the grid model
Returns :
any
|
||||||
setbackground(value: any)
|
||||||
|
Property used to save the background.
Parameters :
Returns :
void
|
| itemsControlDataSource | ||||||
getitemsControlDataSource()
|
||||||
setitemsControlDataSource(value: any)
|
||||||
|
Contains the items sent by the ItemsControl
Parameters :
Returns :
void
|
| itemsControlItemTemplate | ||||||
getitemsControlItemTemplate()
|
||||||
setitemsControlItemTemplate(value: TemplateRef
|
||||||
|
Contains the ItemTemplate template sent by the ItemsControl
Parameters :
Returns :
void
|
| backgroundColor |
getbackgroundColor()
|
|
Gets the Background from the GridModel.
Returns :
string
|
| columnDefinitionsSource | ||||||
getcolumnDefinitionsSource()
|
||||||
|
Gets the ColumnDefinitions from the GridModel.
Returns :
GridColumnDefinitions
|
||||||
setcolumnDefinitionsSource(value: GridColumnDefinitions)
|
||||||
|
Property used to save the column definitions.
Parameters :
Returns :
void
|
| itemsControlContainsUIElements |
getitemsControlContainsUIElements()
|
|
Verifies if the items collections contains UIElements to be rendered
Returns :
boolean
|
| rowDefinitionsSource | ||||||
getrowDefinitionsSource()
|
||||||
|
Gets the RowDefinitions from the GridModel.
Returns :
GridRowDefinitions
|
||||||
setrowDefinitionsSource(value: GridRowDefinitions)
|
||||||
|
Property used to save the row definitions.
Parameters :
Returns :
void
|
| children |
getchildren()
|
|
Gets the Children from the GridModel.
Returns :
any
|
| columnsArray |
getcolumnsArray()
|
|
Returns an array of the columnsSplitter references.
Returns :
ElementRef[]
|
| rowsArray |
getrowsArray()
|
|
Returns an array of the rowSplitter references.
Returns :
ElementRef[]
|
| gridSplitterArray |
getgridSplitterArray()
|
|
Return an array of GridSplitters |
| movingSplitters |
getmovingSplitters()
|
|
Gets the grid splitters that are being moved.
Returns :
GridSplitterComponent[]
|
| columnDefinitionsArray |
getcolumnDefinitionsArray()
|
|
Returns internal array of ColumnDefinitions model property.
Returns :
GridColumnDefinition[]
|
| rowDefinitionsArray |
getrowDefinitionsArray()
|
|
Returns internal array of RowDefinitions model property.
Returns :
GridRowDefinition[]
|
import {
AfterContentInit,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
ElementRef,
HostBinding,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
QueryList,
Renderer2,
SkipSelf,
TemplateRef,
ViewChild,
ViewChildren,
} from '@angular/core';
import {
AngularComponentId,
ComponentId,
DependencyObject,
GridColumnDefinition,
GridColumnDefinitions,
GridLength,
GridModel,
GridRowDefinition,
GridRowDefinitions,
GridUnitType,
HorizontalAlignment,
ModelProviderService,
ModelProxy,
SolidColorBrush,
smColorToCssColor,
} from '@mobilize/wms-framework';
import { GridService } from '../../services/grid.service';
import { Utils } from '../../utils/utilities';
import { BaseComponent } from '../base/base.component';
import { GridColumnDefinitionComponent } from '../grid-column-definition/grid-column-definition.component';
import { GridColumnDefinitionsComponent } from '../grid-column-definitions/grid-column-definitions.component';
import { GridRowDefinitionComponent } from '../grid-row-definition/grid-row-definition.component';
import { GridRowDefinitionsComponent } from '../grid-row-definitions/grid-row-definitions.component';
import {
GridResizeDirection,
GridSplitBehavior,
GridSplitterComponent,
} from '../grid-splitter/grid-splitter.component';
/**
* Angular Component for the Grid Control.
*
* @export
* @class GridComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterContentInit}
* @implements {AfterViewInit}
* @implements {OnDestroy}
*/
@Component({
selector: 'wm-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.scss'],
providers: [ModelProviderService, { provide: GridModel, useValue: null }],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.gridPanel])
export class GridComponent
extends BaseComponent
implements OnInit, AfterContentInit, AfterViewInit, OnDestroy
{
/**
* Flag to prevent circular updating of height/widths of rows
*
* @private
* @memberof GridComponent
*/
private onUpdateColumnRowModel = false;
/**
* QueryList of child grid elements.
*
* @type {QueryList<any>}
* @memberof GridComponent
*/
@ContentChildren('gridItem', { descendants: true })
content: QueryList<any>;
/**
* ColumnDefinitions of the Grid Component.
*
* @type {QueryList<GridColumnDefinitionsComponent>}
* @memberof GridComponent
*/
@ContentChildren(GridColumnDefinitionsComponent, { descendants: false })
columnDefinitions: QueryList<GridColumnDefinitionsComponent>;
/**
* RowDefinitions of the Grid Component.
*
* @type {QueryList<GridRowDefinitionsComponent>}
* @memberof GridComponent
*/
@ContentChildren(GridRowDefinitionsComponent, { descendants: false })
rowDefinitions: QueryList<GridRowDefinitionsComponent>;
/**
* Internal reference to grid root element
*
* @private
* @type {ElementRef}
* @memberof GridComponent
*/
private __gridRoot: ElementRef;
/**
* Internal list of the grid splitters found
*
* @private
* @type {QueryList<GridSplitterComponent>}
* @memberof GridComponent
*/
private __gridSplitter: QueryList<GridSplitterComponent>;
/**
* Internal list of the grid splitters found converted to a plain list
*
* @private
* @type {GridSplitterComponent[]}
* @memberof GridComponent
*/
private __gridSplitterArray: GridSplitterComponent[];
/**
* Mouse move listener added to handling splitter actions
*
* @private
* @memberof GridComponent
*/
private mouseMoveSplitterListener: () => void = null;
/**
* Mouse up listener added to handling splitter actions
*
* @private
* @memberof GridComponent
*/
private mouseUpSplitterListener: () => void = null;
/**
* Mouse leave listener added to handling splitter actions
*
* @private
* @memberof GridComponent
*/
private mouseLeaveSplitterListener: () => void = null;
/**
* Getter for the reference to the root element of the grid
*
* @readonly
* @type {ElementRef}
* @memberof GridComponent
*/
@ViewChild('gridRoot')
get gridRoot(): ElementRef {
return this.__gridRoot;
}
/**
* Setter for the reference to the root element of the grid
*
* @memberof GridComponent
*/
set gridRoot(value: ElementRef) {
this.__gridRoot = value;
this.checkIfSplitterListenersAreRequired();
}
/**
* Getter for GridSplitter of the Grid component.
*
* @readonly
* @type {QueryList<GridSplitterComponent>}
* @memberof GridComponent
*/
@ContentChildren(GridSplitterComponent)
get gridSplitter(): QueryList<GridSplitterComponent> {
return this.__gridSplitter;
}
/**
* Setter for GridSplitter of the Grid component.
*
* @memberof GridComponent
*/
set gridSplitter(value: QueryList<GridSplitterComponent>) {
this.__gridSplitter = value;
this.__gridSplitterArray = this.__gridSplitter?.toArray() ?? null;
this.checkIfSplitterListenersAreRequired();
}
/**
* Checks if the mouse listeners are going to be required for splitter functionality
*
* @private
* @memberof GridComponent
*/
private checkIfSplitterListenersAreRequired(): void {
if (
!!this.gridSplitter &&
!!this.gridRoot &&
this.gridSplitter.length > 0
) {
this.registerSplitterListeners();
} else {
this.unregisterSplitterListeners();
}
}
/**
* Register mouse event listeners for the splitters handling
*
* @private
* @memberof GridComponent
*/
private registerSplitterListeners(): void {
this.unregisterSplitterListeners();
this.mouseMoveSplitterListener = this.renderer2.listen(
this.gridRoot.nativeElement,
'mousemove',
this.onMovingSplitter.bind(this)
);
this.mouseUpSplitterListener = this.renderer2.listen(
this.gridRoot.nativeElement,
'mouseup',
this.endMovingSplitter.bind(this)
);
this.mouseLeaveSplitterListener = this.renderer2.listen(
this.gridRoot.nativeElement,
'mouseleave',
this.endMovingSplitter.bind(this)
);
}
/**
* Unregister mouse event listeners for the the splitters handling
*
* @private
* @memberof GridComponent
*/
private unregisterSplitterListeners(): void {
this.mouseMoveSplitterListener?.();
this.mouseUpSplitterListener?.();
this.mouseLeaveSplitterListener?.();
this.mouseMoveSplitterListener = null;
this.mouseUpSplitterListener = null;
this.mouseLeaveSplitterListener = null;
}
/**
* Columns references used by the GridSplitter
*
* @type {QueryList<ElementRef>}
* @memberof GridComponent
*/
@ViewChildren('colSplitter')
columnsSplitter: QueryList<ElementRef>;
/**
* Rows references used by the GridSplitter
*
* @type {QueryList<ElementRef>}
* @memberof GridComponent
*/
@ViewChildren('rowSplitter')
rowsSplitter: QueryList<ElementRef>;
/**
* Property used to save the background.
*
* @memberof GridComponent
*/
@Input()
set background(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
GridModel.BackgroundProperty,
value
)
) {
this.modelProxy.Background = Utils.createSolidBrush(value);
}
}
/**
* Gets the background property from the grid model
*
* @readonly
* @type {string}
* @memberof GridComponent
*/
get background(): any {
return this.model.Background;
}
/**
* Indicates whether this { GridComponent } is used inside of a {@link ItemsControl }
* object as either item template or item template panel.
* Setting this to true will cause the heigth to be set to auto instead of defaulting to 100%.
*
* @type {boolean}
* @memberof GridComponent
*/
@Input()
@HostBinding('class.isItemTemplate')
isItemTemplate: boolean;
/**
* Contains the items sent by the ItemsControl
*
* @type {any}
* @memberof GridComponent
*/
@Input()
set itemsControlDataSource(value: any) {
this.itemsCtrlDataSource = value;
if (this.itemsCtrlDataSource?.change) {
/* istanbul ignore next */
this.registerHandler(this.itemsCtrlDataSource.change, (name) =>
this.collectionChangeInput(name)
);
}
const dataSource = this.getDataSource();
this.getDynamicUIElements(dataSource);
}
get itemsControlDataSource(): any {
return this.itemsCtrlDataSource;
}
/**
* Contains the ItemTemplate template sent by the ItemsControl
*
* @type {any}
* @memberof GridComponent
*/
@Input()
set itemsControlItemTemplate(value: TemplateRef<any>) {
this.itemsCntrlItemTemplate = value;
const dataSource = this.getDataSource();
this.getDynamicUIElements(dataSource);
}
get itemsControlItemTemplate(): TemplateRef<any> {
return this.itemsCntrlItemTemplate;
}
/**
* Object with properties and events for the Grid.
*
* @type {GridModel}
* @memberof GridComponent
*/
@Input()
model: GridModel;
/**
* Return true if the component
* has a defined height
*
* @readonly
* @type {boolean}
* @memberof GridComponent
*/
@HostBinding('class.has-height')
hasHeight = false;
/**
* Return true if the component
* has a defined width
*
* @readonly
* @type {boolean}
* @memberof GridComponent
*/
@HostBinding('class.has-width')
hasWidth = false;
/**
* Gets the Background from the GridModel.
*
* @type {string}
* @memberof GridComponent
*/
get backgroundColor(): string {
/* istanbul ignore else */
if (this.model.Background) {
return smColorToCssColor(
(this.model.Background as SolidColorBrush).Color
);
}
}
/**
* Contains the reference to the function in charge of tracking the changes of the columnDefinition property
*
* @memberof GridComponent
*/
columnChangeRef: (propertyName: string) => void;
/**
* Property used it when the grid have one column/row to assign a flexBox instead of the grid
*
* @memberof GridComponent
*/
flexStyle: string;
/**
* set the flex box direction when the display is set as flex
*
* @type {string}
* @memberof GridComponent
*/
flexDirection: string;
/**
*
*
* @type {string}
* @memberof GridComponent
*/
horizontalAlignmentFlex: string;
/**
* Contains the reference to the function in charge of tracking the changes of the RowDefinition property
*
* @memberof GridComponent
*/
rowChangeRef: (propertyName: string) => void;
/**
* Contains the reference to the function in charge of tracking the changes of the children property
*
* @memberof GridComponent
*/
childrenChangeRef: (propertyName: string) => void;
/**
* Contains the references to the functions in charge of tracking the changes of each Column in the ColumnDefintions
*
* @memberof GridComponent
*/
definitionsRefs = new Map<DependencyObject, (propertyName: string) => void>();
/**
* Flag used to mark when the event is call the first time
*
* @memberof GridComponent
*/
firstTime = true;
/**
* Defines the number of rows in the grid
*
* @memberof GridComponent
*/
gridRows = '';
/**
* Internal array with the sizes calculated to apply to the rows
*
* @private
* @memberof GridComponent
*/
private actualRowSizes: string[] = [];
/**
* Defines the number of columns in the grid
*
* @memberof GridComponent
*/
gridColumns = '';
/**
* Internal array with the sizes calculated to apply to the columns
*
* @private
* @memberof GridComponent
*/
private actualColumnSizes: string[] = [];
/**
* To keep track of what sizes were updated to star during splitting actions
*
* @private
* @memberof GridComponent
*/
private sizesUpdatedToStar: number[] = [];
/**
* This property have the collection of items that should be render
*
* @memberof GridComponent
*/
itemsToRender = [];
/**
* Collection to compare when there are new elements to display
*
* @memberof GridComponent
*/
cacheItems = [];
/**
* Flag to know if the component is ready to render
*
* @type {boolean}
* @memberof GridComponent
*/
isInitialized = false;
/**
* ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {GridModel}
* @memberof GridComponent
*/
protected modelProxy: GridModel = ModelProxy.create<GridModel>();
/**
* Property used to save the collection to render as dynamic controls
*
* @private
* @type *
* @memberof GridComponent
*/
private itemsCtrlDataSource: any;
/**
* Property used to save the template that will be use to render the itemsCtrlDataSource items
*
* @private
* @type {*}
* @memberof GridComponent
*/
private itemsCntrlItemTemplate: TemplateRef<any>;
/**
* Property used to save the GridService instance obtained from the injector.
*
* @private
* @type {GridService}
* @memberof GridComponent
*/
private gridService: GridService;
/**
* Creates an instance of GridComponent.
*
* @param {Injector} injector
* @param {GridModel} [injectedModel=null]
* @memberof GridComponent
*/
/* istanbul ignore next */
constructor(
private injector: Injector,
@SkipSelf() @Optional() protected injectedModel: GridModel = null,
private provider: ModelProviderService,
private elementRef: ElementRef,
private cdRef: ChangeDetectorRef,
private renderer: Renderer2
) {
super(cdRef, injector);
this.model = injectedModel;
this.gridService = injector?.get(GridService);
}
/**
* Flag to force using display grid instead of display flex.
*
* @memberof GridComponent
*/
@Input()
forceDisplayGrid = false;
/**
* Property used to save the column definitions.
*
* @type {*}
* @memberof GridComponent
*/
@Input()
set columnDefinitionsSource(value: GridColumnDefinitions) {
this.modelProxy.ColumnDefinitions = value;
}
/**
* Gets the ColumnDefinitions from the GridModel.
*
* @readonly
* @type {GridColumnDefinitions}
* @memberof GridComponent
*/
get columnDefinitionsSource(): GridColumnDefinitions {
return this.model.ColumnDefinitions;
}
/**
* Verifies if the items collections contains UIElements to be rendered
*
* @returns boolean True if the collection contains UIElements otherwise false
* @memberof GridComponent
*/
get itemsControlContainsUIElements(): boolean {
return Utils.containsUIElement(this.itemsControlDataSource);
}
/**
* Property used to save the row definitions.
*
* @type {*}
* @memberof GridComponent
*/
@Input()
set rowDefinitionsSource(value: GridRowDefinitions) {
this.modelProxy.RowDefinitions = value;
}
/**
* Gets the RowDefinitions from the GridModel.
*
* @readonly
* @type {GridRowDefinitions}
* @memberof GridComponent
*/
get rowDefinitionsSource(): GridRowDefinitions {
return this.model.RowDefinitions;
}
/**
* Overrides method to consider item template case
*
* @return {*} {string}
* @memberof GridComponent
*/
heightDefaultStyle(): string {
return this.isItemTemplate ? 'auto' : super.heightDefaultStyle();
}
/**
* Method to update the collection from the itemsControlDataSource
*
* @param {string} name property name that fire the event
* @return {*} {*}
* @memberof StackPanelComponent
*/
collectionChangeInput(name: string): any {
/* istanbul ignore else */
if (name === 'Count') {
const dataSource = this.getDataSource();
this.getDynamicUIElements(dataSource);
}
}
/**
* Determines if this grid component is inside another one.
*
* @return {*}
* @memberof GridComponent
*/
hasGridParent() {
let parentElement = this.elementRef.nativeElement.parentElement;
while (parentElement) {
if (
parentElement.localName === 'wm-grid' ||
parentElement.localName === 'wm-user-control'
) {
return true;
}
parentElement = parentElement.parentElement;
}
return false;
}
/**
* Gets the Children from the GridModel.
*
* @readonly
* @type {*}
* @memberof GridComponent
*/
get children(): any {
return this.model.Children;
}
/**
* This method calculates the columns and rows for the grid from the model or declarations
*
* @param {string} name
* @memberof GridComponent
*/
refreshGridLayout(name: string): void {
/* istanbul ignore else */
if (name === 'Count' && this.isInitialized) {
this.updateRowAndColumnsLayout();
this.detectChangesAction();
}
}
/**
* This method notifies the service in case a column changes.
*
* @param {string} name
* @memberof GridComponent
*/
definitionsHandler(name: string) {
if (this.onUpdateColumnRowModel) return;
/* istanbul ignore else */
if (name === 'ColumnDefinitionWidth' || name === 'RowDefinitionHeight') {
this.updateRowAndColumnsLayout();
this.detectChangesAction();
this.gridService.checkForGridAutoDefinitions(this.model);
}
}
/**
* Function executed when a property model changes.
*
* @param {string} name
* @memberof GridComponent
*/
modelChangeHandler(name: string) {
super.modelChangeHandler(name);
if (name === 'Width') {
this.hasWidth = this.width > 0;
}
if (name === 'Height') {
this.hasHeight = this.height > 0;
}
}
/**
* handler for the children when any of the gridProperties changes
*
* @param {string} name
* @memberof GridComponent
*/
childrenChangeHandler(name: string) {
const gridProperties = [
'Grid_Column',
'Grid_Row',
'Grid_ColumnSpan',
'Grid_RowSpan',
];
/* istanbul ignore next */
if (gridProperties.includes(name)) {
this.addControlsStyle(this.cacheItems, this.itemsToRender);
this.gridService.checkForGridAutoDefinitions(this.model);
this.detectChangesAction();
}
}
/**
* Gets the style based on the row and column definitions to be used in the main grid CSS properties.
*
* @return {*}
* @memberof GridComponent
*/
calcDefinitionsStyle(): void {
this.actualColumnSizes = this.calcGridTemplateColumns();
this.actualRowSizes = this.calcGridTemplateRows();
if (this.actualColumnSizes.length === 0) {
this.actualColumnSizes.push('100%');
}
if (this.actualRowSizes.length === 0) {
this.actualRowSizes.push('100%');
}
}
/**
* Calculates the CSS grid-template-columns property based on the columnDefinitions.
*
* @return {*} {string}
* @memberof GridComponent
*/
calcGridTemplateColumns(): string[] {
/* istanbul ignore next */
const columns = this.model?.ColumnDefinitions?.internalArray;
const columnsValues = [];
columns?.forEach((column) => {
/* istanbul ignore else */
if (column instanceof GridColumnDefinitionComponent) {
column = column.model;
}
if (column.Width?.IsAbsolute) {
columnsValues.push(`${column.Width.Value}px`);
} else {
const minValue = column.MinWidth ? `${column.MinWidth}px` : '0px';
if (column.Width?.IsStar) {
columnsValues.push(`minmax(${minValue}, ${column.Width.Value}fr)`);
} else if (column.Width?.IsAuto) {
columnsValues.push(`minmax(${minValue}, max-content)`);
} else {
const maxValue = column.MaxWidth ? `${column.MaxWidth}px` : 'auto';
columnsValues.push(`minmax(${minValue}, ${maxValue})`);
}
}
});
return columnsValues;
}
/**
* Calculates the CSS grid-template-rows property based on the rowDefinitions.
*
* @return {*} {string}
* @memberof GridComponent
*/
calcGridTemplateRows(): string[] {
/* istanbul ignore next */
const rows = this.model?.RowDefinitions?.internalArray;
const rowsValues = [];
rows?.forEach((row) => {
/* istanbul ignore else */
if (row instanceof GridRowDefinitionComponent) {
row = row.model;
}
if (row.Height?.IsAbsolute) {
rowsValues.push(`${row.Height.Value}px`);
} else {
const minValue = row.MinHeight ? `${row.MinHeight}px` : '0px';
if (row.Height?.IsStar) {
rowsValues.push(`minmax(${minValue}, ${row.Height.Value}fr)`);
} else if (row.Height?.IsAuto) {
rowsValues.push(`minmax(${minValue}, max-content)`);
} else {
const maxValue = row.MaxHeight ? `${row.MaxHeight}px` : 'auto';
rowsValues.push(`minmax(${minValue}, ${maxValue})`);
}
}
});
return rowsValues;
}
/**
* Returns the dynamic components to render.
*
* @return {*} {*}
* @memberof GridComponent
*/
getDynamicUIElements(arrayToInspect: any): any {
let controlsSource = [];
// Getting the controls to inspect, we have two options:
// 1) controls from the itemsControl sent by context
// 2) controls from the grid itself
if (this.afterContentInitCalled && arrayToInspect) {
const contentModels = [];
/* istanbul ignore next */
this.content.map((el) => {
contentModels.push(el.model);
});
controlsSource = Utils.differenceWith(arrayToInspect, contentModels);
const equals = Utils.areSameElements(this.cacheItems, controlsSource);
/* istanbul ignore next */
if (!equals) {
this.cacheItems = controlsSource;
const newControls = Utils.getUIControls(controlsSource, this.injector);
this.addControlsStyle(controlsSource, newControls);
this.itemsToRender = newControls;
this.gridService.checkForGridAutoDefinitions(this.model);
this.detectChangesAction();
}
}
}
/**
* Adds the style to each new control.
*
* @param {*} controlsSource - Children array
* @param {*} newControls - Collection of components
* @memberof GridComponent
*/
addControlsStyle(controlsSource: any, newControls: any) {
/* istanbul ignore next */
const total = controlsSource.count
? controlsSource.count
: controlsSource.length;
for (let i = 0; i < total; i++) {
/* istanbul ignore next */
const tmpItem = controlsSource.getItem
? controlsSource.getItem(i)
: controlsSource[i];
/* istanbul ignore next */
const rowCount =
this.model?.RowDefinitions?.internalArray.length ||
this.rowDefinitions?.first?.itemsArray.length;
/* istanbul ignore next */
const columnCount =
this.model?.ColumnDefinitions?.internalArray.length ||
this.columnDefinitions?.first?.itemsArray.length;
const row = GridModel.GetRow(tmpItem);
const rowSpan = GridModel.GetRowSpan(tmpItem);
const column = GridModel.GetColumn(tmpItem);
const columnSpan = GridModel.GetColumnSpan(tmpItem);
const style = {
row: Utils.getGridRowColumnStyle(row, rowSpan, rowCount),
column: Utils.getGridRowColumnStyle(column, columnSpan, columnCount),
};
newControls[i]['style'] = style;
/* istanbul ignore else */
if (tmpItem.change?.handlers?.length <= 1) {
this.registerHandler(tmpItem.change, (name: string) =>
this.childrenChangeHandler(name)
);
}
}
}
/**
* Return a wrapped object with a context property.
* If the data comes from a dataContext, it will used this method
* to generate the groups. This context is used when the ItemsControl
* passed the dataSource to the grid component.
*
* @param {any} item
* @return {*} {context: any}
* @memberof GridComponent
*/
getContext(item: any): any {
return { context: item };
}
/**
* Returns an array of the columnsSplitter references.
*
* @type {ElementRef[]}
* @memberof GridComponent
*/
get columnsArray(): ElementRef[] {
return this.columnsSplitter?.toArray();
}
/**
* Returns an array of the rowSplitter references.
*
* @type {ElementRef[]}
* @memberof GridComponent
*/
get rowsArray(): ElementRef[] {
return this.rowsSplitter?.toArray();
}
/**
* Angular lifecycle.
*
* @memberof GridComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new GridModel();
this.setupModel(this.model);
super.ngOnInit();
this.columnChangeRef = this.model.ColumnDefinitions.change?.addHandler(
this.refreshGridLayout.bind(this)
);
this.rowChangeRef = this.model.RowDefinitions.change?.addHandler(
this.refreshGridLayout.bind(this)
);
this.childrenChangeRef = this.model.Children.change.addHandler(
this.modelChildrenChangeHandler.bind(this)
);
}
/**
* Angular life cycle hook.
* Used to unsubscribe any function before destroy the component
*
* @memberof GridComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.model?.ColumnDefinitions?.change?.removeHandler(this.columnChangeRef);
this.model?.RowDefinitions?.change?.removeHandler(this.rowChangeRef);
this.model?.Children?.change?.removeHandler(this.childrenChangeRef);
/* istanbul ignore else */
if (this.definitionsRefs?.size > 0) {
for (const [col, handlerRef] of this.definitionsRefs) {
col?.change?.removeHandler(handlerRef);
}
}
this.unregisterSplitterListeners();
this.content = null;
this.__gridRoot = null;
}
/**
* Method to handler the children collection change.
*
* @param {string} name
* @memberof GridComponent
*/
modelChildrenChangeHandler(name: string) {
const dataSource = this.getDataSource();
this.getDynamicUIElements(dataSource);
}
/**
* Angular life cycle hook
*
* @memberof GridComponent
*/
ngAfterViewInit(): void {
super.ngAfterViewInit();
this.cdRefBase.detach();
this.isInitialized = true;
this.updateRowAndColumnsLayout();
const dataSource = this.getDataSource();
this.getDynamicUIElements(dataSource);
this.cdRefBase.reattach();
this.gridService.checkForGridAutoDefinitions(this.model);
this.detectChanges();
}
/**
* Check if there are new control to be display and add rowdefinitions and columndefinitions to the model
*
* @memberof GridComponent
*/
ngAfterContentInit(): void {
super.ngAfterContentInit();
this.afterContentInitCalled = true;
this.syncStaticRowDefinition();
this.syncStaticColumnDefinition();
}
/**
* Return an array of GridSplitters
*
* @memberof GridComponent
*/
get gridSplitterArray() {
return this.__gridSplitterArray;
}
/**
* Apply the splitting action to either the columns or the rows
*
* @private
* @param {GridSplitterComponent} splitter
* @param {*} event
* @memberof GridComponent
*/
private applySplitting(splitter: GridSplitterComponent, event: any): void {
/* istanbul ignore else */
if (
splitter.resizeDirection === GridResizeDirection.Column &&
this.columnsArray?.length > 0
) {
this.gridSplitterXAxisHandler(splitter, event);
} else if (
splitter.resizeDirection === GridResizeDirection.Row &&
this.rowsArray?.length > 0
) {
this.gridSplitterYAxisHandler(splitter, event);
}
}
/**
* Initializes the information required to do the resizing using a specific splitter
*
* @private
* @param {GridSplitterComponent} splitter
* @memberof GridComponent
*/
private initSplitBehavior(splitter: GridSplitterComponent) {
let sizes = null;
if (splitter.resizeDirection === GridResizeDirection.Row) {
sizes = this.actualRowSizes;
} else {
sizes = this.actualColumnSizes;
}
//Can't do resizing on inexisting rows/cols
if (
splitter.splitSideA >= sizes.length ||
splitter.splitSideB >= sizes.length
)
return;
const isStarSideA = this.isStar(sizes[splitter.splitSideA]);
const isStarSideB = this.isStar(sizes[splitter.splitSideB]);
const behaviorAB = !isStarSideA ? GridSplitBehavior.A : GridSplitBehavior.B;
splitter.splitBehavior =
!isStarSideA || !isStarSideB ? behaviorAB : GridSplitBehavior.Split;
}
/**
* Checks if a size is star
*
* @private
* @param {string} expr
* @return {*} {boolean}
* @memberof GridComponent
*/
private isStar(expr: string): boolean {
return expr?.indexOf('fr') >= 0;
}
/**
* Returns the numeric component of a star expression (55fr)
*
* @private
* @param {string} expr
* @return {*} {number}
* @memberof GridComponent
*/
private getStarValue(expr: string): number {
const match = expr?.match(/(\d+(\.\d+)?)fr/);
if (match && match.length > 0) return Number.parseFloat(match[1]);
return null;
}
/**
* Retrieves the min value from a minmax expression
*
* @private
* @param {string} expr
* @return {*} {number}
* @memberof GridComponent
*/
private getMinValue(expr: string): number {
const match = expr?.match(/minmax\s*\(\s*(\d+(\.\d+)?)px/);
if (match && match.length > 0) {
return Number.parseFloat(match[1]);
}
return null;
}
/**
* Handler used when the GridSplitter component is resizing columns.
*
* @param {GridSplitterComponent} gridSplitter
* @param {MouseEvent} event
* @memberof GridComponent
*/
gridSplitterXAxisHandler(
gridSplitter: GridSplitterComponent,
event: MouseEvent
): void {
const sizeA =
this.columnsArray[gridSplitter.splitSideA].nativeElement.clientWidth +
event.movementX;
const sizeB =
this.columnsArray[gridSplitter.splitSideB].nativeElement.clientWidth -
event.movementX;
switch (gridSplitter.splitBehavior) {
case GridSplitBehavior.Split:
this.processXAxisHandlerForSplit(gridSplitter, sizeA, sizeB);
break;
case GridSplitBehavior.A:
const columnA =
this.model.ColumnDefinitions.internalArray[gridSplitter.splitSideA];
const widthA =
columnA.MaxWidth && columnA.MaxWidth > 0
? Number.parseFloat(columnA.MaxWidth)
: null;
this.actualColumnSizes[gridSplitter.splitSideA] =
widthA && sizeA > widthA ? widthA + 'px' : sizeA + 'px';
break;
default:
const columnB =
this.model.ColumnDefinitions.internalArray[gridSplitter.splitSideB];
const widthB =
columnB.MaxWidth && columnB.MaxWidth > 0
? Number.parseFloat(columnB.MaxWidth)
: null;
this.actualColumnSizes[gridSplitter.splitSideB] =
widthB && sizeB > widthB ? widthB + 'px' : sizeB + 'px';
break;
}
this.gridColumns = this.actualColumnSizes.join(' ');
this.detectChangesAction();
}
/**
* To process X axis for splitBehavior = Split
*
* @private
* @param {GridSplitterComponent} gridSplitter
* @param {number} sizeA
* @param {number} sizeB
* @memberof GridComponent
*/
private processXAxisHandlerForSplit(
gridSplitter: GridSplitterComponent,
sizeA: number,
sizeB: number
) {
this.sizesUpdatedToStar = [];
this.actualColumnSizes.forEach((value, index) => {
const minVal = this.getMinValue(value);
if (index === gridSplitter.splitSideA) {
this.actualColumnSizes[gridSplitter.splitSideA] = this.GetSplitSideSize(
gridSplitter.splitSideA,
sizeA,
minVal
);
this.sizesUpdatedToStar.push(index);
} else if (index === gridSplitter.splitSideB) {
this.actualColumnSizes[gridSplitter.splitSideB] = this.GetSplitSideSize(
gridSplitter.splitSideB,
sizeB,
minVal
);
this.sizesUpdatedToStar.push(index);
} else if (this.isStar(value)) {
const actualWidth = this.columnsArray[index].nativeElement.clientWidth;
this.actualColumnSizes[index] =
minVal !== null
? `minmax(${minVal}px, ${actualWidth}fr)`
: `${actualWidth}fr`;
this.sizesUpdatedToStar.push(index);
}
});
}
private GetSplitSideSize(
side: number,
sizeValue: number,
minVal: number
): any {
const maxWidthA = this.model.ColumnDefinitions.internalArray[side].MaxWidth
? Number.parseFloat(
this.model.ColumnDefinitions.internalArray[side].MaxWidth
)
: null;
sizeValue = sizeValue > maxWidthA && maxWidthA > 0 ? maxWidthA : sizeValue;
return minVal !== null
? `minmax(${minVal}px, ${sizeValue}fr)`
: `${sizeValue}fr`;
}
/**
* Handler used when the GridSplitter component is resizing rows.
*
* @param {GridSplitterComponent} gridSplitter
* @param {MouseEvent} event
* @memberof GridComponent
*/
gridSplitterYAxisHandler(
gridSplitter: GridSplitterComponent,
event: MouseEvent
): void {
const sizeA =
this.rowsArray[gridSplitter.splitSideA].nativeElement.clientHeight +
event.movementY;
const sizeB =
this.rowsArray[gridSplitter.splitSideB].nativeElement.clientHeight -
event.movementY;
switch (gridSplitter.splitBehavior) {
case GridSplitBehavior.Split:
this.processYAxisHandlerForSplit(gridSplitter, sizeA, sizeB);
break;
case GridSplitBehavior.A:
this.actualRowSizes[gridSplitter.splitSideA] = sizeA + 'px';
break;
default:
this.actualRowSizes[gridSplitter.splitSideB] = sizeB + 'px';
break;
}
this.gridRows = this.actualRowSizes.join(' ');
this.detectChangesAction();
}
/**
* To process Y axis for splitBehavior = Split
*
* @private
* @param {GridSplitterComponent} gridSplitter
* @param {number} sizeA
* @param {number} sizeB
* @memberof GridComponent
*/
private processYAxisHandlerForSplit(
gridSplitter: GridSplitterComponent,
sizeA: number,
sizeB: number
) {
this.sizesUpdatedToStar = [];
this.actualRowSizes.forEach((value, index) => {
const minVal = this.getMinValue(value);
if (index === gridSplitter.splitSideA) {
this.actualRowSizes[gridSplitter.splitSideA] =
minVal !== null ? `minmax(${minVal}px, ${sizeA}fr)` : `${sizeA}fr`;
this.sizesUpdatedToStar.push(index);
} else if (index === gridSplitter.splitSideB) {
this.actualRowSizes[gridSplitter.splitSideB] =
minVal !== null ? `minmax(${minVal}px, ${sizeB}fr)` : `${sizeB}fr`;
this.sizesUpdatedToStar.push(index);
} else if (this.isStar(value)) {
const actualWidth = this.rowsArray[index].nativeElement.clientHeight;
this.actualRowSizes[index] =
minVal !== null
? `minmax(${minVal}px, ${actualWidth}fr)`
: `${actualWidth}fr`;
this.sizesUpdatedToStar.push(index);
}
});
}
/**
* Disables mouse events on IFrames inside this grid.
*
* @memberof GridComponent
*/
disableMouseEventsOnIFrames(): void {
this.modifyInternalIFrames((iframe) => {
this.renderer2.addClass(iframe, 'wmControlIsEnabledFalse');
});
}
/**
* Enables mouse events on IFrames inside this grid.
*
* @memberof GridComponent
*/
enableMouseEventsOnIFrames(): void {
this.modifyInternalIFrames((iframe) => {
this.renderer2.removeClass(iframe, 'wmControlIsEnabledFalse');
});
}
/**
* Modifies the IFrames inside this grid, by aplying the given
* function to each internal IFrame.
*
* @param {(iframe: HTMLIFrameElement) => void} fn
* @memberof GridComponent
*/
modifyInternalIFrames(fn: (iframe: HTMLIFrameElement) => void): void {
const el = this.elementRef.nativeElement as HTMLElement;
const iframes = el.getElementsByTagName('iframe');
for (const iframe of iframes) {
fn(iframe);
}
}
/**
* Returns `true` if the primary button (usually the left button)
* is pressed on the given event, `false` otherwise.
*
* @param {MouseEvent} event
* @return {*} {boolean}
* @memberof GridComponent
*/
isPrimaryButtonPressed(event: MouseEvent): boolean {
return (event.buttons & 0x1) === 0x1;
}
/**
* OnMovingSplitter Handler called in the onmousemove event.
*
* @param {any} event
* @memberof GridComponent
*/
onMovingSplitter(event: MouseEvent): void {
if (this.isPrimaryButtonPressed(event)) {
this.handleMovingSplitter(event);
} else {
this.endMovingSplitter(event);
}
}
/**
* Gets the grid splitters that are being moved.
*
* @readonly
* @type {GridSplitterComponent[]}
* @memberof GridComponent
*/
get movingSplitters(): GridSplitterComponent[] {
return this.gridSplitterArray.filter((x) => x.isSplitterMoving);
}
/**
* Handle for a moving splitter during drag
* action (when mouse button is pressed).
*
* @param {MouseEvent} event
* @memberof GridComponent
*/
handleMovingSplitter(event: MouseEvent): void {
for (const splitter of this.movingSplitters) {
/* istanbul ignore else */
if (splitter.splitBehavior === GridSplitBehavior.None) {
this.initSplitBehavior(splitter);
this.disableMouseEventsOnIFrames();
}
/* istanbul ignore else */
if (splitter.splitBehavior !== GridSplitBehavior.None) {
this.applySplitting(splitter, event);
break;
}
}
}
/**
* Called in mouseup event, disables isSplitterMoving flag.
*
* @param {any} event
* @memberof GridComponent
*/
endMovingSplitter(event: MouseEvent): void {
for (const splitter of this.movingSplitters) {
this.updateColumnRowModel(splitter);
splitter.isSplitterMoving = false;
splitter.splitBehavior = GridSplitBehavior.None;
const params = { sender: splitter.model, e: event };
splitter.model.MouseLeftButtonUp.fire([params.sender, params.e]);
splitter.mouseLeftButtonUp.emit(params);
this.enableMouseEventsOnIFrames();
break; // Only one splitter should be moving at a time. There is no need to keep iterating.
}
}
/**
* Updates the width or height values on the columns or rows definitions of the grid.
*
* @param {GridSplitterComponent} splitter
* @memberof GridComponent
*/
updateColumnRowModel(splitter: GridSplitterComponent) {
this.onUpdateColumnRowModel = true;
if (splitter.resizeDirection === GridResizeDirection.Row) {
switch (splitter.splitBehavior) {
case GridSplitBehavior.Split:
this.updateRowModelForSplit();
break;
case GridSplitBehavior.A:
this.model.RowDefinitions.internalArray[splitter.splitSideA].Height =
new GridLength(
Number.parseFloat(
this.actualRowSizes[splitter.splitSideA].replace('px', '')
)
);
break;
default:
this.model.RowDefinitions.internalArray[splitter.splitSideB].Height =
new GridLength(
Number.parseFloat(
this.actualRowSizes[splitter.splitSideB].replace('px', '')
)
);
break;
}
} else {
switch (splitter.splitBehavior) {
case GridSplitBehavior.Split:
this.updateColumnModelForSplit();
break;
case GridSplitBehavior.A:
this.model.ColumnDefinitions.internalArray[
splitter.splitSideA
].Width = new GridLength(
Number.parseFloat(
this.actualColumnSizes[splitter.splitSideA].replace('px', '')
)
);
break;
default:
const columnDefinitionSize = Number.parseFloat(
this.actualColumnSizes[splitter.splitSideB].replace('px', '')
);
this.model.ColumnDefinitions.internalArray[
splitter.splitSideB
].Width = !isNaN(columnDefinitionSize)
? new GridLength(columnDefinitionSize)
: new GridLength(1, GridUnitType.Star);
break;
}
}
this.onUpdateColumnRowModel = false;
}
/**
* Updating the model for rows when splitBehavior = Split
*
* @private
* @memberof GridComponent
*/
private updateRowModelForSplit() {
this.sizesUpdatedToStar.forEach((index) => {
const starVal = this.getStarValue(this.actualRowSizes[index]);
if (starVal !== null) {
this.model.RowDefinitions.internalArray[index].Height = new GridLength(
starVal,
GridUnitType.Star
);
} else {
console.warn('Star value was not found in expression');
}
});
this.sizesUpdatedToStar = [];
}
/**
* Updating the model for columns when splitBehavior = Split
*
* @private
* @memberof GridComponent
*/
private updateColumnModelForSplit() {
this.sizesUpdatedToStar.forEach((index) => {
const starVal = this.getStarValue(this.actualColumnSizes[index]);
if (starVal !== null) {
this.model.ColumnDefinitions.internalArray[index].Width =
new GridLength(starVal, GridUnitType.Star);
} else {
console.warn('Star value was not found in expression');
}
});
this.sizesUpdatedToStar = [];
}
/**
* Return grid-area css property to apply in the dinamcally added divs for grid-splitters
*
* @param {number} index
* @memberof GridComponent
*/
columnGridArea(index: number): string {
return `1 / ${index + 1} / auto / auto`;
}
/**
* Return grid-area css property to apply in the dinamcally added divs for grid-splitters
*
* @param {number} index
* @memberof GridComponent
*/
rowGridArea(index: number): string {
return `${index + 1} / 1 / auto / auto`;
}
/**
* Returns internal array of ColumnDefinitions model property.
*
* @memberof GridComponent
*/
get columnDefinitionsArray(): GridColumnDefinition[] {
return this.model.ColumnDefinitions.internalArray;
}
/**
* Returns internal array of RowDefinitions model property.
*
* @memberof GridComponent
*/
get rowDefinitionsArray(): GridRowDefinition[] {
return this.model.RowDefinitions.internalArray;
}
/**
* Sync the static column definition with the columnDefinition model
*
* @private
* @memberof GridComponent
*/
private syncStaticColumnDefinition(): void {
const columns = this.columnDefinitions?.first?.itemsArray;
/* istanbul ignore else */
if (columns && columns.length > 0) {
this.model.ColumnDefinitions.clear();
columns?.forEach((column) => {
column = column.model ? column.model : column;
this.model.ColumnDefinitions.add(column);
const tempRef = column.change.addHandler(
this.definitionsHandler.bind(this)
);
this.definitionsRefs.set(column, tempRef);
});
}
}
/**
* Sync the static row definition with the rowDefinition model
*
* @private
* @memberof GridComponent
*/
private syncStaticRowDefinition(): void {
const rows = this.rowDefinitions?.first?.itemsArray;
/* istanbul ignore else */
if (rows && rows.length > 0) {
this.model.RowDefinitions.clear();
rows.forEach((row) => {
row = row.model ? row.model : row;
this.model.RowDefinitions.add(row);
const tempRef = row.change.addHandler(
this.definitionsHandler.bind(this)
);
this.definitionsRefs.set(row, tempRef);
});
}
}
/**
* Returns the current data collection for the grid.
*
* @private
* @return {*} {*}
* @memberof GridComponent
*/
private getDataSource(): any {
return this.itemsControlDataSource
? this.itemsControlDataSource.internalArray
: this.children.internalArray;
}
/**
* Update the rows and columns section for the grid
*
* @private
* @memberof GridComponent
*/
private updateRowAndColumnsLayout() {
let rowFlex = false;
let columnFlex = false;
this.calcDefinitionsStyle();
const rowsValues = this.actualRowSizes.join(' ');
const columnsValues = this.actualColumnSizes.join(' ');
if (this.gridSplitterArray.length > 0) {
this.columnsArray.forEach((value) => {
value.nativeElement.style.width = 'auto';
});
this.rowsArray.forEach((value) => {
value.nativeElement.style.height = 'auto';
});
}
if (this.gridRows !== rowsValues) {
this.gridRows = rowsValues;
if (this.actualRowSizes.length === 1) {
rowFlex = true;
}
}
if (this.gridColumns !== columnsValues) {
this.gridColumns = columnsValues;
if (this.actualColumnSizes.length === 1) {
columnFlex = true;
}
}
this.convertToFlex(rowFlex, columnFlex);
}
/**
* Convert the grid to flex if the grid size is 1 x 1
*
* @private
* @param {*} rowFlex - flag to indicate that the grid contains 1 row
* @param {boolean} columnFlex - flag to indicate that the grid contains 1 column
* @memberof GridComponent
*/
private convertToFlex(rowFlex: any, columnFlex: boolean) {
if (
rowFlex &&
columnFlex &&
this.content?.length === 1 &&
!this.forceDisplayGrid
) {
this.flexStyle = 'flex';
this.flexDirection = 'row';
this.processChildAlignment(this.content.first.model?.HorizontalAlignment);
}
}
/**
* Process the alignment of the element when the parent is a flex
*
* @private
* @param {number} [orientation=-1]
* @memberof GridComponent
*/
private processChildAlignment(orientation = -1) {
switch (orientation) {
case HorizontalAlignment.Left:
this.horizontalAlignmentFlex = 'flex-start';
break;
case HorizontalAlignment.Right:
this.horizontalAlignmentFlex = 'flex-end';
break;
case HorizontalAlignment.Center:
this.horizontalAlignmentFlex = 'center';
break;
default:
break;
}
}
}
<div
*ngIf="visibility && isInitialized"
[style.background-color]="backgroundColor"
class="gridPanel panelContext"
[style.display]="flexStyle"
[style.flex-direction]="flexDirection"
[style.justify-content]="horizontalAlignmentFlex"
[style.grid-template-columns]="gridColumns"
[style.grid-template-rows]="gridRows"
[style.padding]="margin"
[style.cursor]="cursorStyle | memoize: cursor"
(mouseenter)="mouseEnterHandler($event)"
(mouseleave)="mouseLeaveHandler($event)"
#gridRoot
>
<ng-content> </ng-content>
<ng-container *ngIf="!itemsControlItemTemplate">
<ng-container
*ngFor="let value of itemsToRender; let i = index; trackBy: trackByFn"
>
<div
[style.grid-row]="value.style.row"
[style.grid-column]="value.style.column"
[style.display]="'inherit'"
>
<ng-container
*ngComponentOutlet="value.component; injector: value.customInjector"
>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="gridSplitterArray.length > 0">
<div
*ngFor="
let value of columnDefinitionsArray;
let i = index;
trackBy: trackByFn
"
#colSplitter
[style.height]="'0px'"
[style.grid-area]="columnGridArea | memoize: i"
></div>
<div
*ngFor="
let value of rowDefinitionsArray;
let i = index;
trackBy: trackByFn
"
#rowSplitter
[style.width]="'0px'"
[style.grid-area]="rowGridArea | memoize: i"
></div>
</ng-container>
</ng-container>
<!-- Start rendering content from ItemsControl component-->
<ng-container *ngIf="itemsControlItemTemplate && itemsControlDataSource">
<ng-container *ngIf="!itemsControlContainsUIElements">
<ng-container *ngFor="let value of itemsControlDataSource">
<ng-container
*ngTemplateOutlet="
itemsControlItemTemplate;
context: getContext | memoize: value
"
>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="itemsControlContainsUIElements">
<ng-container
*ngFor="let value of itemsToRender; let i = index; trackBy: trackByFn"
>
<div
[style.grid-row]="value.style.row"
[style.grid-column]="value.style.column"
[style.display]="'inherit'"
>
<ng-container
*ngComponentOutlet="value.component; injector: value.customInjector"
>
</ng-container>
</div>
</ng-container>
</ng-container>
</ng-container>
<!-- End rendering content from ItemsControl component-->
</div>
./grid.component.scss
@import '../../scss/variables';
.gridPanel {
display: grid;
height: inherit;
width: inherit;
min-height: inherit;
min-width: inherit;
max-height: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
overflow: hidden !important;
-webkit-user-select: none;
user-select: none;
margin-top: var(--xam-grid-margin-top, $xam-grid-margin-top-default);
margin-left: var(--xam-grid-margin-left, $xam-grid-margin-left-default);
}
:host {
display: block;
}