projects/i-components/src/lib/components/base/base.component.ts
Component to be use as BaseComponent for the Angular Components. Should contains the FrameworkElement elements.
OnInit
AfterContentInit
AfterViewInit
AfterViewChecked
OnDestroy
OnChanges
DoCheck
AfterContentChecked
constructor(cdRefBase: ChangeDetectorRef, injectorBase: Injector)
|
|||||||||
|
Parameters :
|
| controlTemplate | |
Type : any
|
|
|
Sets the controlTemplate Input property for changing the model's |
|
| cursor | |
|
Property used to save the cursor value |
|
| dataContext | |
Type : any
|
|
|
Gets/sets the dataContext Input property for changing the model's |
|
| dataGridRowHeight | |
Type : number
|
|
Default value : 22
|
|
|
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
|
|
|
Sets the value of the Foreground property |
|
| height | |
|
Sets the height |
|
| horizontalAlignment | |
|
Sets the horizontal alignment. |
|
| horizontalContentAlignment | |
|
Sets the horizontal content alignment. |
|
| hostHozSelfAlign | |
Type : boolean
|
|
Default value : false
|
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
|
| isEnabled | |
|
Gets/sets the isEnabled property for the BaseComponent |
|
| isTabStop | |
Type : boolean
|
|
|
Sets/gets IsTabStop property of the BaseComponent |
|
| margin | |
Type : string
|
|
|
Sets Margin property of the BaseComponent. |
|
| maxHeight | |
Type : any
|
|
|
Sets maxHeight |
|
| maxWidth | |
Type : any
|
|
|
Sets maxWidth |
|
| minHeight | |
Type : any
|
|
|
Sets minHeight |
|
| minWidth | |
Type : any
|
|
|
Sets min Width |
|
| name | |
Type : string
|
|
|
Sets the name model property for the control when the name is an input |
|
| opacity | |
|
Sets Opacity value property of the component |
|
| spellCheck | |
Type : boolean
|
|
Default value : false
|
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
|
| style | |
|
Sets the style |
|
| tabIndex | |
Type : number
|
|
|
Sets the property TabIndex of the control model. |
|
| tag | |
Type : any
|
|
|
Object used in the Tag property of the Button |
|
| useCss | |
Type : boolean
|
|
Default value : false
|
|
|
Determines if the component uses CSS height/width values, instead of inputs |
|
| verticalAlignment | |
|
Sets the vertical alignment. |
|
| verticalContentAlignment | |
|
Sets the vertical content alignment. |
|
| visibility | |
Type : any
|
|
|
Gets/sets the visibility property for the BaseComponent |
|
| width | |
|
Sets the width |
|
| zindex | |
Type : number
|
|
|
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>
|
|
|
output to emit the new value of the bindingValidationError event |
|
| layoutUpdated | |
Type : EventEmitter<any>
|
|
|
Output to emit when then component's layout is updated. |
|
| loaded | |
Type : EventEmitter<any>
|
|
|
Output to emit when then component is loaded. |
|
| mouseEnter | |
Type : EventEmitter<literal type>
|
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
|
| mouseLeave | |
Type : EventEmitter<literal type>
|
|
|
Event Emitter Called in the mouseLeave handler |
|
| mouseLeftButtonUp | |
Type : EventEmitter<literal type>
|
|
|
MouseLeftButtonUp event Emitter. |
|
| sizeChanged | |
Type : EventEmitter<any>
|
|
|
Output to emit when then component size is changed. |
|
| class |
Type : string
|
Default value : null
|
|
Applies custom CSS classes |
| class.defaultFontStyles |
Type : boolean
|
Default value : false
|
|
Applies default font styles class, used to allow specificity for each control css |
| class.focusable |
Type : boolean
|
Default value : false
|
|
Display if the component is focusable or not |
| class.hasDefinedCursor |
Type : boolean
|
Default value : false
|
|
Applies Defined Cursor class |
| class.horizontal-center |
Type : boolean
|
Default value : false
|
|
Applies horizontal alignment left class |
| class.horizontal-left |
Type : boolean
|
Default value : false
|
|
Applies horizontal alignment left class |
| class.horizontal-right |
Type : boolean
|
Default value : false
|
|
Applies horizontal alignment right class |
| class.horizontal-stretch |
Type : boolean
|
Default value : false
|
|
Applies horizontal alignment stretch class |
| class.vertical-bottom |
Type : boolean
|
Default value : false
|
|
Applies vertical alignment bottom class |
| class.vertical-center |
Type : boolean
|
Default value : false
|
|
Applies vertical alignment center class |
| class.vertical-stretch |
Type : boolean
|
Default value : false
|
|
Applies horizontal alignment stretch class |
| class.vertical-top |
Type : boolean
|
Default value : false
|
|
Applies vertical alignment top class |
| style.display |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the visibility |
| style.font-family |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the font-family |
| style.font-size |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the font-size |
| style.font-style |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the font-style |
| style.font-weight |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the font-weight |
| style.height |
Type : string
|
Default value : null
|
|
Property use it to apply the host binding for the height |
| style.max-height.px |
Type : number
|
|
Property used to apply the host binding for max-height |
| style.max-width.px |
Type : number
|
|
Property used to apply the host binding for max-width |
| style.min-height.px |
Type : number
|
|
Property used to apply the host binding for min-height |
| style.min-width.px |
Type : number
|
|
Property used to apply the host binding for min-width |
| style.opacity |
Type : any
|
Default value : null
|
|
Property use it to apply the host binding for the opacity |
| style.width |
Type : string
|
Default value : null
|
|
Property use it to apply the host binding for the width |
| style.z-index |
Type : string
|
Default value : null
|
|
Sets the z-index style. |
| Protected alignmentHandler |
alignmentHandler()
|
|
Calculate the values for the grid size behavior from the alignments
Returns :
void
|
| Protected assignPendingPropertyValues |
assignPendingPropertyValues()
|
|
Apply pending assignments to properties with property values
Returns :
void
|
| calculateActualSize | ||||||||
calculateActualSize(name?: string)
|
||||||||
|
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)
|
|||||||||
|
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)
|
||||||||||||
|
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)
|
||||||||||||
|
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)
|
|
Create a given component on the HTML body.
Returns :
ComponentRef<any>
|
| cursorStyle |
cursorStyle()
|
|
Returns the correct CSS cursor style and sets the definedCursor flag if necessary
Returns :
string
{string} |
| detectChanges |
detectChanges()
|
|
Performs a single detect Changes over the component
Returns :
void
|
| detectChangesAction |
detectChangesAction()
|
|
Handle subscription to the notifyDetectChanges action Refresh the component whenever a model modification was performed
Returns :
void
|
| getForeground |
getForeground()
|
|
Calculates the Foreground color to be applied
Returns :
string
string |
| getImageString | ||||||
getImageString(value: any)
|
||||||
|
Returns string path to the image.
Parameters :
Returns :
any
|
| getTargetValue | ||||||
getTargetValue(e: Event)
|
||||||
|
Returns the value from a $event
Parameters :
Returns :
string
|
| Protected handlerCalcActualSize | ||||||
handlerCalcActualSize(async: boolean)
|
||||||
|
Handler that calculates ActualHeight & ActualWidth based on its inner content.
Parameters :
Returns :
void
|
| heightCalc |
heightCalc()
|
|
Applies the height CSS value
Returns :
any
|
| heightDefaultStyle |
heightDefaultStyle()
|
|
Calculates the auto height value
Returns :
string
{string} |
| Protected hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| Protected hostVerticalAlignmentCall |
hostVerticalAlignmentCall()
|
|
Assign all the vertical bindings for the control
Returns :
void
|
| imageToPath | ||||||
imageToPath(value: any)
|
||||||
|
Returns the path of the given image.
Parameters :
Returns :
any
|
| loadStaticItems | ||||||||||||
loadStaticItems(staticItems: any, itemsCollection: any)
|
||||||||||||
|
Parameters :
Returns :
void
void |
| Private markForCheckComp |
markForCheckComp()
|
|
Marks current component
Returns :
void
|
| modelChangeHandler | ||||||||
modelChangeHandler(name?: string)
|
||||||||
|
Method to handle the model's change
Parameters :
Returns :
void
|
| mouseEnterHandler | ||||||||
mouseEnterHandler(event: any)
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| mouseLeaveHandler | ||||||||
mouseLeaveHandler(event: any)
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| Public ngAfterContentChecked |
ngAfterContentChecked()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterContentInit |
ngAfterContentInit()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewChecked |
ngAfterViewChecked()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewInit |
ngAfterViewInit()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngDoCheck |
ngDoCheck()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnChanges |
ngOnChanges()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnDestroy |
ngOnDestroy()
|
|
Cleanup operations for base component
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Angular Lifecycle Hooks
Returns :
void
|
| preventItemsDuplication | ||||||||||||||||||
preventItemsDuplication(itemsToRender: any, items: any, contentChildTemplate: any, afterContentInitCalled: boolean, injector: Injector)
|
||||||||||||||||||
|
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)
|
||||||
|
Method to check if the component should assign a alignment property
Parameters :
Returns :
void
{void} |
| processCursor | ||||||
processCursor(name: string)
|
||||||
|
Method to set the cursor style of the component
Parameters :
Returns :
void
|
| processCustomCssClasses | ||||||
processCustomCssClasses(name: string)
|
||||||
|
Method to set custom CSS Clases
Parameters :
Returns :
void
{void} |
| processFocusable | ||||||
processFocusable(name: string)
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| Private processFontFamily | ||||||
processFontFamily(name: string)
|
||||||
|
Process the FontFamily property
Parameters :
Returns :
any
|
| processFonts | ||||||
processFonts(name: string)
|
||||||
|
Method to apply the font styles for the component.
Parameters :
Returns :
void
|
| Private processFontSize | ||||||
processFontSize(name: string)
|
||||||
|
Process the FontSize property
Parameters :
Returns :
any
|
| Private processFontStyle | ||||||
processFontStyle(name: string)
|
||||||
|
Process the FontStyle property
Parameters :
Returns :
any
|
| Private processFontWeight | ||||||
processFontWeight(name: string)
|
||||||
|
Process the FontWeight property
Parameters :
Returns :
any
|
| processHeights | ||||||
processHeights(name: string)
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| processIsEnabled | ||||||
processIsEnabled(name: string)
|
||||||
|
Process changes to
Parameters :
Returns :
void
|
| processOpacity | ||||||
processOpacity(name: string)
|
||||||
|
Method to apply the opacity for the component.
Parameters :
Returns :
void
|
| processVisibility | ||||||
processVisibility(name: string)
|
||||||
|
Method to check if the component should be show or hide.
Parameters :
Returns :
void
|
| processWidths | ||||||
processWidths(name: string)
|
||||||
|
Method to check and set the width of the grid
Parameters :
Returns :
void
|
| Private processZIndex | ||||||
processZIndex(name: string)
|
||||||
|
Method to process the ZIndex when set through the model
Parameters :
Returns :
void
|
| Private recreateInvalidBindings |
recreateInvalidBindings()
|
|
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)
|
||||||
|
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)
|
|
Registers a DOM handler on the current element
Returns :
void
|
| Protected registerHandler | |||||||||
registerHandler(event: SubscriptionEvent<void>, arrowHandler: (s: any,a: any) => void)
|
|||||||||
|
Register arrow handler into the given
Parameters :
Returns :
void
|
| Protected registerMouseEvents |
registerMouseEvents()
|
|
Registers mouse events if required
Returns :
void
|
| Protected registerObservers | ||||||||||||
registerObservers(emitter: EventEmitter
|
||||||||||||
|
Register observers from the given
Parameters :
Returns :
void
|
| Private registerToolTip | |||||||||
registerToolTip(element: ElementRef
|
|||||||||
|
Registers a tooltip to a component
Parameters :
Returns :
void
|
| Private removeModelProxyHandlers |
removeModelProxyHandlers()
|
|
Clean up the handlers when the component is destroyed
Returns :
void
|
| Private setComponentForDirectives |
setComponentForDirectives()
|
|
Sets an internal reference through the element ref to access the component in a directive
Returns :
void
|
| Protected setPendingPropertyValue |
setPendingPropertyValue(property: string, value: any)
|
|
Stores the pending property values for instance attach properties. Which will be applied when the model is available
Returns :
void
|
| setupDependencyComponents | ||||||
setupDependencyComponents(model: FrameworkElement)
|
||||||
|
Adds the references to the dependency components
Parameters :
Returns :
void
|
| setupModel | ||||||
setupModel(model: FrameworkElement)
|
||||||
|
Syncs the modelProxy with model
Parameters :
Returns :
void
void |
| Private syncToolTip | ||||||
syncToolTip(tooltip: ToolTipModel)
|
||||||
|
Updates the tooltip associated to a component
Parameters :
Returns :
void
|
| Private syncValidationError | ||||||
syncValidationError(name?: string)
|
||||||
|
Syncs validation information with component properties
Parameters :
Returns :
void
|
| Private tabSelectionSubscription |
tabSelectionSubscription()
|
|
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)
|
||||||||||||
|
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
|
||||||
|
Unregisters a tooltip to a component
Parameters :
Returns :
void
|
| Private updateSizePropertiesForActualSizeChange | ||||||||
updateSizePropertiesForActualSizeChange(element: Element)
|
||||||||
|
Updates the size properties of the component based on the initial size change
Parameters :
Returns :
void
|
| validatesLoadingFlag |
validatesLoadingFlag()
|
|
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()
|
|
Applies the width CSS value
Returns :
any
|
| widthDefaultStyle |
widthDefaultStyle()
|
|
Calculates the auto width value
Returns :
string
{string} |
| actualSizeCalled |
Default value : false
|
|
Flag to know if the Angular event was called |
| afterContentInitCalled |
Default value : false
|
|
Flag to know if the Angular event was called |
| afterViewCheckedCalled |
Default value : false
|
|
Flag to know if the Angular event was called |
| afterViewInitCalled |
Default value : false
|
|
Flag to know if the Angular event was called |
| Private bindingValidationCallback |
Type : function
|
|
Callback for binding validation |
| bindingValidationError |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
output to emit the new value of the bindingValidationError event |
| Private cdRefInjection |
Type : ChangeDetectorRef
|
|
Change Detector Reference for the component |
| Private changeDetectionTimer |
Type : any
|
|
A timer to debounce changedetection actions |
| Protected changeDetectorNotifier |
Type : ChangeDectionNotifierService
|
|
Change Detection Notifier Service instace. |
| Private contextMenuUnlistener |
Type : function
|
|
Context Menu event unlisten action. |
| Private ctxMenuInstance |
Type : any
|
|
Reference to the ctxMenuInstance |
| customCssClasses |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('class')
|
|
Applies custom CSS classes |
| Private customTooltipInstance |
Type : any
|
Default value : null
|
|
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()
|
|
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>
|
|
A collection (possible undefined) of DOM unlistener functions . That is, functions to de register handlers |
| fireLoadedSubscription |
Type : Subscription
|
Default value : null
|
|
Flag to control load event for components inside tab control |
| focusable |
Default value : false
|
Decorators :
@HostBinding('class.focusable')
|
|
Display if the component is focusable or not |
| Protected handlersToUnregister |
Type : Array<>
|
Default value : []
|
|
handlers to unregister when the component is destroyed |
| hasDefinedCursor |
Default value : false
|
Decorators :
@HostBinding('class.hasDefinedCursor')
|
|
Applies Defined Cursor class |
| hostFontFamily |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-family')
|
|
Property use it to apply the host binding for the font-family |
| hostFontSize |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-size')
|
|
Property use it to apply the host binding for the font-size |
| hostFontStyle |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-style')
|
|
Property use it to apply the host binding for the font-style |
| hostFontStyles |
Default value : false
|
Decorators :
@HostBinding('class.defaultFontStyles')
|
|
Applies default font styles class, used to allow specificity for each control css |
| hostFontWeight |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-weight')
|
|
Property use it to apply the host binding for the font-weight |
| hostHeight |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.height')
|
|
Property use it to apply the host binding for the height |
| hostHozCenter |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-center')
|
|
Applies horizontal alignment left class |
| hostHozLeft |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-left')
|
|
Applies horizontal alignment left class |
| hostHozRight |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-right')
|
|
Applies horizontal alignment right class |
| hostHozStretch |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-stretch')
|
|
Applies horizontal alignment stretch class |
| hostMaxHeight |
Type : number
|
Decorators :
@HostBinding('style.max-height.px')
|
|
Property used to apply the host binding for max-height |
| hostMaxWidth |
Type : number
|
Decorators :
@HostBinding('style.max-width.px')
|
|
Property used to apply the host binding for max-width |
| hostMinHeight |
Type : number
|
Decorators :
@HostBinding('style.min-height.px')
|
|
Property used to apply the host binding for min-height |
| hostMinWidth |
Type : number
|
Decorators :
@HostBinding('style.min-width.px')
|
|
Property used to apply the host binding for min-width |
| hostOpacity |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.opacity')
|
|
Property use it to apply the host binding for the opacity |
| hostVerBottom |
Default value : false
|
Decorators :
@HostBinding('class.vertical-bottom')
|
|
Applies vertical alignment bottom class |
| hostVerCenter |
Default value : false
|
Decorators :
@HostBinding('class.vertical-center')
|
|
Applies vertical alignment center class |
| hostVerStretch |
Default value : false
|
Decorators :
@HostBinding('class.vertical-stretch')
|
|
Applies horizontal alignment stretch class |
| hostVerTop |
Default value : false
|
Decorators :
@HostBinding('class.vertical-top')
|
|
Applies vertical alignment top class |
| hostVisibility |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.display')
|
|
Property use it to apply the host binding for the visibility |
| hostWidth |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.width')
|
|
Property use it to apply the host binding for the width |
| hostZIndex |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.z-index')
|
|
Sets the z-index style. |
| isInitialized |
Type : any
|
Default value : undefined
|
|
Flag to know if the component is ready to render |
| isInternalInherit |
Default value : false
|
|
Flag which indicates that the component is an internal use for inheritance |
| layoutUpdated |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Output to emit when then component's layout is updated. |
| loaded |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Output to emit when then component is loaded. |
| Protected modelChangeRef |
Type : function
|
|
Contains the reference of the function added for handle the model's change |
| Protected modelProxy |
Type : any
|
Default value : null
|
|
ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings. |
| mouseEnter |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
| mouseLeave |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter Called in the mouseLeave handler |
| Private mouseLeaveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Mouse over event for tooltip unlisten action. |
| mouseLeftButtonUp |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
MouseLeftButtonUp event Emitter. |
| Private mouseMoveTooltipUnlistener |
Type : function
|
Default value : null
|
|
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
|
|
Mouse over event for tooltip unlisten action. |
| Protected ngZone |
Type : NgZone
|
|
Angular´s NgZone accessor |
| Protected pendingDependencyPropertyValue |
Type : Array<>
|
Default value : []
|
|
A collection of pending dependency properties values to assign to the model |
| Protected pendingSetValues |
Type : Array<>
|
Default value : []
|
|
A collection of pending values to assign to the model |
| Protected renderer2 |
Type : Renderer2
|
|
Angular´s Renderer2 |
| sizeChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Output to emit when then component size is changed. |
| Private sizeChangedPendingTimeout |
Type : any
|
|
Timeout id for triggering the sizechanged event |
| spellCheck |
Default value : false
|
Decorators :
@Input()
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
| staticContent |
Type : any
|
Default value : null
|
|
cache the static content of the control to validate if the current data is not equals. |
| tabSubscription |
Type : Subscription
|
Default value : null
|
|
TabSelection event subscription |
| Private tooltipMousePosition |
Type : DOMRect
|
Default value : null
|
|
To track the position of the mouse while the tooltip is being displayed |
| Private toolTipTimeout |
Type : any
|
Default value : null
|
|
To control the timer to show the tooltip |
| useCss |
Default value : false
|
Decorators :
@Input()
|
|
Determines if the component uses CSS height/width values, instead of inputs |
| validationError |
Default value : false
|
|
Property to set the validationError class in the component |
| validationErrorMessage |
Type : string
|
Default value : ''
|
|
Property for specifying validation error message |
| tabIndex | ||||||
gettabIndex()
|
||||||
|
Gets the value of the tab index property.
Returns :
number
|
||||||
settabIndex(value: number)
|
||||||
|
Sets the property TabIndex of the control model.
Parameters :
Returns :
void
|
| isTabStop | ||||||
getisTabStop()
|
||||||
setisTabStop(value: boolean)
|
||||||
|
Sets/gets IsTabStop property of the BaseComponent
Parameters :
Returns :
void
|
| margin | ||||||
getmargin()
|
||||||
|
Gets Margin property of the BaseComponent.
Returns :
string
|
||||||
setmargin(value: string)
|
||||||
|
Sets Margin property of the BaseComponent.
Parameters :
Returns :
void
|
| dataContext | ||||||
getdataContext()
|
||||||
|
Gets the value of the model's
Returns :
any
|
||||||
setdataContext(value: any)
|
||||||
|
Gets/sets the dataContext Input property for changing the model's
Parameters :
Returns :
void
|
| visibility | ||||||
getvisibility()
|
||||||
|
Gets the value of the model for the visibility property
Returns :
any
|
||||||
setvisibility(value: any)
|
||||||
|
Gets/sets the visibility property for the BaseComponent
Parameters :
Returns :
void
|
| isEnabled | ||||||
getisEnabled()
|
||||||
|
Gets the value of the model for the isEnabled property
Returns :
boolean | BindingInfo
|
||||||
setisEnabled(value: boolean | BindingInfo)
|
||||||
|
Gets/sets the isEnabled property for the BaseComponent
Parameters :
Returns :
void
|
| verticalAlignment | ||||||
getverticalAlignment()
|
||||||
|
Gets the vertical alignment.
Returns :
string | number
|
||||||
setverticalAlignment(value: string | number)
|
||||||
|
Sets the vertical alignment.
Parameters :
Returns :
void
|
| verticalContentAlignment | ||||||
getverticalContentAlignment()
|
||||||
|
Gets the vertical content alignment.
Returns :
string | number
|
||||||
setverticalContentAlignment(value: string | number)
|
||||||
|
Sets the vertical content alignment.
Parameters :
Returns :
void
|
| horizontalAlignment | ||||||
gethorizontalAlignment()
|
||||||
|
Gets the horizontal alignment.
Returns :
string | number
|
||||||
sethorizontalAlignment(value: string | number)
|
||||||
|
Sets the horizontal alignment.
Parameters :
Returns :
void
|
| horizontalContentAlignment | ||||||
gethorizontalContentAlignment()
|
||||||
|
Gets the horizontal content alignment.
Returns :
string | number
|
||||||
sethorizontalContentAlignment(value: string | number)
|
||||||
|
Sets the horizontal content alignment.
Parameters :
Returns :
void
|
| name | ||||||
getname()
|
||||||
|
Gets the name model property for the control when the name is an input
Returns :
string
|
||||||
setname(value: string)
|
||||||
|
Sets the name model property for the control when the name is an input
Parameters :
Returns :
void
|
| tag | ||||||
gettag()
|
||||||
|
Gets the Tag model property
Returns :
any
|
||||||
settag(value: any)
|
||||||
|
Object used in the Tag property of the Button
Parameters :
Returns :
void
|
| controlTemplate | ||||||
getcontrolTemplate()
|
||||||
|
Gets the template model property
Returns :
any
|
||||||
setcontrolTemplate(value: any)
|
||||||
|
Sets the controlTemplate Input property for changing the model's
Parameters :
Returns :
void
|
| foreground | ||||||
getforeground()
|
||||||
|
Gets the value of the Color for TextBlockModel
Returns :
any
|
||||||
setforeground(value: any)
|
||||||
|
Sets the value of the Foreground property
Parameters :
Returns :
void
|
| minWidth | ||||||
getminWidth()
|
||||||
|
Gets min width property
Returns :
any
|
||||||
setminWidth(value: any)
|
||||||
|
Sets min Width
Parameters :
Returns :
void
|
| maxWidth | ||||||
getmaxWidth()
|
||||||
|
Gets maxWidth
Returns :
any
|
||||||
setmaxWidth(value: any)
|
||||||
|
Sets maxWidth
Parameters :
Returns :
void
|
| minHeight | ||||||
getminHeight()
|
||||||
|
Gets minHeight
Returns :
any
|
||||||
setminHeight(value: any)
|
||||||
|
Sets minHeight
Parameters :
Returns :
void
|
| maxHeight | ||||||
getmaxHeight()
|
||||||
|
Gets maxHeight
Returns :
any
|
||||||
setmaxHeight(value: any)
|
||||||
|
Sets maxHeight
Parameters :
Returns :
void
|
| opacity | ||||||
getopacity()
|
||||||
|
Gets Opacity value property of the component
Returns :
number | BindingInfo
|
||||||
setopacity(value: number | BindingInfo)
|
||||||
|
Sets Opacity value property of the component
Parameters :
Returns :
void
|
| width | ||||||
getwidth()
|
||||||
|
Gets the width
Returns :
number | string | BindingInfo
|
||||||
setwidth(value: number | string | BindingInfo)
|
||||||
|
Sets the width
Parameters :
Returns :
void
|
| height | ||||||
getheight()
|
||||||
|
Gets the height
Returns :
number | string | BindingInfo
|
||||||
setheight(value: number | string | BindingInfo)
|
||||||
|
Sets the height
Parameters :
Returns :
void
|
| style | ||||||
getstyle()
|
||||||
|
Gets the style
Returns :
RuntimeStyleInfo | BindingInfo
|
||||||
setstyle(value: RuntimeStyleInfo | BindingInfo)
|
||||||
|
Sets the style
Parameters :
Returns :
void
|
| cursor | ||||||
getcursor()
|
||||||
|
Gets the cursor value
Returns :
string | BindingInfo
|
||||||
setcursor(value: string | BindingInfo)
|
||||||
|
Property used to save the cursor value
Parameters :
Returns :
void
|
| zindex | ||||||
setzindex(value: number)
|
||||||
|
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...
Parameters :
Returns :
void
|
| horizontalLeft |
gethorizontalLeft()
|
|
Evaluate if the
Returns :
boolean
|
| horizontalRight |
gethorizontalRight()
|
|
Evaluate if the
Returns :
boolean
|
| horizontalCenter |
gethorizontalCenter()
|
|
Evaluate if the
Returns :
boolean
|
| horizontalStretch |
gethorizontalStretch()
|
|
Evaluate if the
Returns :
boolean
|
| verticalBottom |
getverticalBottom()
|
|
Evaluate if the
Returns :
boolean
|
| verticalTop |
getverticalTop()
|
|
Evaluate if the
Returns :
boolean
|
| verticalCenter |
getverticalCenter()
|
|
Evaluate if the
Returns :
boolean
|
| verticalStretch |
getverticalStretch()
|
|
Evaluate if the
Returns :
boolean
|
import {
AfterContentInit,
AfterViewInit,
ChangeDetectorRef,
Component,
EventEmitter,
ElementRef,
HostBinding,
Injector,
Input,
NgZone,
OnDestroy,
OnInit,
Optional,
Output,
AfterViewChecked,
ApplicationRef,
ViewContainerRef,
OnChanges,
AfterContentChecked,
DoCheck,
Renderer2,
Type,
ComponentRef,
} from '@angular/core';
import {
isResourceKeyValue,
BindingInfo,
BindingValidationErrorEventArgs,
ContextMenuManager,
Cursors,
DependencyProperty,
FrameworkElement,
HorizontalAlignment,
PointModel,
ModelProxy,
ModifierKeys,
registerPendingSetValues,
RuntimeStyleInfo,
SubscriptionEvent,
UIElement,
VerticalAlignment,
getResourceKeyValue,
OpenMode,
ToolTipModel,
MouseEventArgs,
Control,
TabItemService,
SolidColorBrush,
SmColor,
smColorToCssColor,
TypeResolver,
ChildWindowService,
BitmapImage,
Uri,
ToolTipService,
PlacementMode,
ThicknessModel,
CanvasModel,
} from '@mobilize/wms-framework';
import { ChangeDectionNotifierService } from '../../services/change-dection-notifier.service';
import { Utils } from '../../utils';
import { TabIndexService } from '../tab-item/tab-index.service';
import { ToolTipServiceComponent } from '../tooltip-service/tooltip-service.component';
import { Subscription } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
/**
* Component to be use as BaseComponent for the Angular Components.
* Should contains the FrameworkElement elements.
*
* @export
* @class BaseComponent
*/
@Component({
template: '',
})
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
export class BaseComponent
implements
OnInit,
AfterContentInit,
AfterViewInit,
AfterViewChecked,
OnDestroy,
OnChanges,
DoCheck,
AfterContentChecked
{
/**
* output to emit the new value of the bindingValidationError event
*
* @type {EventEmitter<any>}
* @memberof BaseComponent
*/
@Output()
bindingValidationError: EventEmitter<any> = new EventEmitter();
/**
* Output to emit when then component is loaded.
*
* @type {EventEmitter<any>}
* @memberof BaseComponent
*/
@Output()
loaded: EventEmitter<any> = new EventEmitter();
/**
* Output to emit when then component size is changed.
*
* @type {EventEmitter<any>}
* @memberof BaseComponent
*/
@Output()
sizeChanged: EventEmitter<any> = new EventEmitter();
/**
* Output to emit when then component's layout is updated.
*
* @type {EventEmitter<any>}
* @memberof BaseComponent
*/
@Output()
layoutUpdated: EventEmitter<any> = new EventEmitter();
/**
* MouseLeftButtonUp event Emitter.
*
* @memberof BaseComponent
*/
@Output() mouseLeftButtonUp: EventEmitter<{ sender: UIElement; e: any }> =
new EventEmitter<any>();
/**
* Event Emitter.
* EventEmitter normally called in the mouseEnterHandler.
*
* @type {EventEmitter<ImageComponent>}
* @memberof ImageComponent
*/
@Output() mouseEnter: EventEmitter<{ sender: UIElement; e: MouseEventArgs }> =
new EventEmitter();
/**
* Event Emitter
* Called in the mouseLeave handler
*
* @type {EventEmitter<{sender: ImageModel; e: MouseEventArgs}>}
* @memberof ImageComponent
*/
@Output() mouseLeave: EventEmitter<{ sender: UIElement; e: MouseEventArgs }> =
new EventEmitter();
/**
* Determines if the component uses CSS height/width values,
* instead of inputs
*
* @type {boolean}
* @memberof BaseComponent
*/
@Input() useCss = false;
/**
* Flag to determinate if the component should do the spell check or not.
* Default value is false.
*
* @type {boolean}
* @memberof BaseComponent
*/
@Input() spellCheck = false;
/**
* Property use it to apply the host binding for the width
*
* @type string
* @memberof BaseComponent
*/
@HostBinding('style.width') hostWidth: string = null;
/**
* Property used to apply the host binding for min-width
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('style.min-width.px') hostMinWidth: number;
/**
* Property used to apply the host binding for max-width
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('style.max-width.px') hostMaxWidth: number;
/**
* Property use it to apply the host binding for the height
*
* @type string
* @memberof BaseComponent
*/
@HostBinding('style.height') hostHeight: string = null;
/**
* Property used to apply the host binding for min-height
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('style.min-height.px') hostMinHeight: number;
/**
* Property used to apply the host binding for max-height
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('style.max-height.px') hostMaxHeight: number;
/**
* Property use it to apply the host binding for the visibility
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.display')
hostVisibility: any = null;
/**
* Property use it to apply the host binding for the opacity
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.opacity')
hostOpacity: any = null;
/**
* Property use it to apply the host binding for the font-family
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.font-family')
hostFontFamily: any = null;
/**
* Property use it to apply the host binding for the font-size
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.font-size')
hostFontSize: any = null;
/**
* Property use it to apply the host binding for the font-style
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.font-style')
hostFontStyle: any = null;
/**
* Property use it to apply the host binding for the font-weight
*
* @type {*}
* @memberof BaseComponent
*/
@HostBinding('style.font-weight')
hostFontWeight: any = null;
/**
* Applies horizontal alignment left class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.horizontal-left')
hostHozLeft = false;
/**
* Applies horizontal alignment left class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.horizontal-center')
hostHozCenter = false;
/**
* Applies horizontal alignment stretch class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.vertical-stretch')
hostVerStretch = false;
/**
* Applies vertical alignment bottom class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.vertical-bottom')
hostVerBottom = false;
/**
* Applies vertical alignment center class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.vertical-center')
hostVerCenter = false;
/**
* Applies vertical alignment top class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.vertical-top')
hostVerTop = false;
/**
* Applies horizontal alignment stretch class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.horizontal-stretch')
hostHozStretch = false;
/**
* Applies horizontal alignment right class
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.horizontal-right')
hostHozRight = false;
/**
* Applies horizontal selfalign class. Flags indicates when the control should handle its own
* horizontal alignment and ignore container alignment.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
@HostBinding('class.horizontal-selfalign')
@Input()
hostHozSelfAlign = false;
/**
* Display if the component is focusable or not
*
* @memberof BaseComponent
*/
@HostBinding('class.focusable')
focusable = false;
/**
* Applies default font styles class, used to allow specificity for each control css
*
* @readonly
* @type {boolean}
* @memberof AlignmentDirective
*/
@HostBinding('class.defaultFontStyles')
hostFontStyles = false;
/**
* Applies custom CSS classes
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('class')
customCssClasses: string = null;
/**
* Applies Defined Cursor class
*
* @memberof BaseComponent
*/
@HostBinding('class.hasDefinedCursor')
hasDefinedCursor = false;
/**
* Sets the z-index style.
*
* @type {string}
* @memberof BaseComponent
*/
@HostBinding('style.z-index')
hostZIndex: string = null;
/**
* cache the static content of the control to validate if the current data is not equals.
*
* @type {*}
* @memberof BaseComponent
*/
staticContent: any = null;
/**
* TabSelection event subscription
*
* @type {Subscription}
* @memberof BaseComponent
*/
tabSubscription: Subscription = null;
/**
* Flag to control load event for
* components inside tab control
*
* @type {Subscription}
* @memberof BaseComponent
*/
fireLoadedSubscription: Subscription = null;
/**
* Flag to know if the Angular event was called
*
* @type {boolean}
* @memberof BaseComponent
*/
afterViewInitCalled = false;
/**
* Flag to know if the Angular event was called
*
* @type {boolean}
* @memberof BaseComponent
*/
afterContentInitCalled = false;
/**
* Flag to know if the Angular event was called
*
* @type {boolean}
* @memberof BaseComponent
*/
afterViewCheckedCalled = false;
/**
* Flag to know if the Angular event was called
*
* @type {boolean}
* @memberof BaseComponent
*/
actualSizeCalled = false;
/**
* Property to set the validationError class in the component
*
* @memberof BaseComponent
*/
validationError = false;
/**
* Property for specifying validation error message
*
* @type {string}
* @memberof BaseComponent
*/
validationErrorMessage = '';
/**
* 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.
*
* @type {number}
* @memberof BaseComponent
*/
@Input()
dataGridRowHeight = 22;
/**
* Flag which indicates that the component is an internal use for inheritance
*
* @type {boolean}
* @memberof BaseComponent
*/
isInternalInherit = false;
/**
* Flag to know if the component is ready to render
*
* @type {boolean | undefined}
* @memberof BaseComponent
*/
isInitialized: any = undefined;
/**
* ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings.
*
* @type { any }
* @memberof BaseComponent
*/
protected modelProxy: any = null;
/**
* A collection of pending values to assign to the model
*
* @protected
* @type {Array<[DependencyProperty, any]>}
* @memberof BaseComponent
*/
protected pendingSetValues: Array<[DependencyProperty, any]> = [];
/**
* A collection of pending dependency properties values to assign to the model
*
* @protected
* @type {Array<[DependencyProperty, any]>}
* @memberof BaseComponent
*/
protected pendingDependencyPropertyValue: Array<[string, any]> = [];
/**
* handlers to unregister when the component is destroyed
*
* @protected
* @type {Array<[SubscriptionEvent<any>, any]>}
* @memberof BaseComponent
*/
protected handlersToUnregister: Array<[SubscriptionEvent<any>, any]> = [];
/**
* A collection (possible undefined) of DOM unlistener functions .
* That is, functions to de register handlers
*
* @protected
* @memberof BaseComponent
*/
protected domHandlerUnListeners: Array<() => void>;
/**
* Change Detection Notifier Service instace.
*
* @protected
* @type {ChangeDectionNotifierService}
* @memberof BaseComponent
*/
protected changeDetectorNotifier: ChangeDectionNotifierService;
/**
* Angular´s NgZone accessor
*
* @protected
* @type {NgZone}
* @memberof BaseComponent
*/
protected ngZone: NgZone;
/**
* Angular´s Renderer2
*
* @protected
* @type {Renderer2}
* @memberof BaseComponent
*/
protected renderer2: Renderer2;
/**
* Contains the reference of the function added for handle the model's change
*
* @memberof BaseComponent
*/
protected modelChangeRef: (propertyName: string) => void;
/**
* Timeout id for triggering the sizechanged event
*
* @private
* @type {*}
* @memberof BaseComponent
*/
private sizeChangedPendingTimeout: any;
/**
* Callback for binding validation
*
* @private
* @memberof BaseComponent
*/
private bindingValidationCallback: (
sender: any,
e: BindingValidationErrorEventArgs
) => void;
/**
* Reference to the ctxMenuInstance
*
* @private
* @type {ContextMenuManagerComponent}
* @memberof BaseComponent
*/
private ctxMenuInstance: any;
/**
* 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
*
* @private
* @type {*}
* @memberof BaseComponent
*/
private customTooltipInstance: any = null;
/**
* To control the timer to show the tooltip
*
* @private
* @type {*}
* @memberof BaseComponent
*/
private toolTipTimeout: any = null;
/**
*Change Detector Reference for the component
*
* @private
* @type {ChangeDetectorRef}
* @memberof BaseComponent
*/
private cdRefInjection: ChangeDetectorRef;
/**
* A timer to debounce changedetection actions
*
* @private
* @type {*}
* @memberof BaseComponent
*/
private changeDetectionTimer: any;
/**
* Context Menu event unlisten action.
*
* @private
* @memberof BaseComponent
*/
private contextMenuUnlistener: () => void;
/**
* Mouse over event for tooltip unlisten action.
*
* @private
* @memberof BaseComponent
*/
private mouseLeaveTooltipUnlistener: () => void = null;
/**
* Mouse over event for tooltip unlisten action.
*
* @private
* @memberof BaseComponent
*/
private mouseOverTooltipUnlistener: () => void = null;
/**
* 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
* @memberof BaseComponent
*/
private mouseMoveTooltipUnlistener: () => void = null;
/**
* To track the position of the mouse while the tooltip is being displayed
*
* @private
* @type {DOMRect}
* @memberof BaseComponent
*/
private tooltipMousePosition: DOMRect = null;
constructor(
@Optional() protected cdRefBase: ChangeDetectorRef = null,
@Optional() protected injectorBase: Injector = null
) {
if (this.injectorBase != null) {
this.changeDetectorNotifier = injectorBase.get(
ChangeDectionNotifierService
);
this.ngZone = injectorBase.get(NgZone);
this.renderer2 = injectorBase.get(Renderer2);
if (this.cdRefBase == null) {
this.cdRefBase = injectorBase.get(ChangeDetectorRef);
}
}
}
/**
* Sets the property TabIndex of the control model.
*
* @memberof BaseComponent
*/
@Input() set tabIndex(value: number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
Control.TabIndexProperty,
value
)
) {
this.modelProxy.TabIndex = value;
}
}
/**
* Gets the value of the tab index property.
*
* @type {number}
* @memberof BaseComponent
*/
get tabIndex(): number {
return this.isTabStop ? this.modelProxy.TabIndex : -1;
}
/**
* Sets/gets IsTabStop property of the BaseComponent
*
* @memberof BaseComponent
*/
@Input() set isTabStop(value: boolean) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
Control.IsTabStopProperty,
value
)
) {
this.modelProxy.IsTabStop = value;
}
}
get isTabStop(): boolean {
return this.modelProxy.IsTabStop;
}
/**
* Sets Margin property of the BaseComponent.
*
* @memberof BaseComponent
*/
@Input()
set margin(value: string) {
if (
!this.checkAndRegisterCompatibilityBinding(Control.MarginProperty, value)
) {
this.modelProxy.Margin = ThicknessModel.parse(value);
}
}
/**
* Gets Margin property of the BaseComponent.
*
* @type {string}
* @memberof BaseComponent
*/
get margin(): string {
if (this.modelProxy.Margin) {
const top = this.modelProxy.Margin.Top;
const bottom = this.modelProxy.Margin.Bottom;
const left = this.modelProxy.Margin.Left;
const right = this.modelProxy.Margin.Right;
return `${top}px ${right}px ${bottom}px ${left}px`;
} else {
return null;
}
}
/**
* Performs a single detect Changes over the component
*
* @memberof BaseComponent
*/
detectChanges() {
if (this.cdRefBase && !this.cdRefBase['destroyed']) {
this.cdRefBase?.detectChanges();
}
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngOnChanges() {
this.modelProxy?.OnChanges?.();
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngOnInit() {
this.modelProxy?.OnInit?.();
this.setComponentForDirectives();
this.syncValidationError();
this.processFocusable('IsTabStop');
this.tabSelectionSubscription();
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngDoCheck() {
this.modelProxy?.DoCheck?.();
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngAfterContentInit() {
this.modelProxy?.AfterContentInit?.();
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngAfterContentChecked() {
this.modelProxy?.AfterContentChecked?.();
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngAfterViewInit() {
this.validatesLoadingFlag();
if (!this.isInternalInherit) {
this.modelProxy?.AfterViewInit?.();
}
if (this.isInitialized === undefined) {
this.handlerCalcActualSize(true);
}
}
/**
* Angular Lifecycle Hooks
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngAfterViewChecked() {
this.modelProxy?.AfterViewChecked?.();
if (this.isInitialized && !this.actualSizeCalled) {
this.handlerCalcActualSize(true);
}
}
/**
* Cleanup operations for base component
*
* @memberof BaseComponent
*/
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
public ngOnDestroy() {
this.contextMenuUnlistener?.();
this.mouseLeaveTooltipUnlistener?.();
this.mouseOverTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener?.();
this.contextMenuUnlistener = null;
this.mouseLeaveTooltipUnlistener = null;
this.mouseOverTooltipUnlistener = null;
this.mouseMoveTooltipUnlistener = null;
if (this.modelProxy) {
this.removeModelProxyHandlers();
}
if (this.tabSubscription) {
this.tabSubscription.unsubscribe();
this.fireLoadedSubscription.unsubscribe();
}
/*istanbul ignore next */
if (this.handlersToUnregister?.length > 0) {
for (const pair of this.handlersToUnregister) {
pair[0].removeHandler(pair[1]);
}
}
/*istanbul ignore next */
if (this.domHandlerUnListeners?.length) {
for (const unlistener of this.domHandlerUnListeners) {
unlistener();
}
this.domHandlerUnListeners = [];
}
if (this.customTooltipInstance) {
this.customTooltipInstance.destroy();
this.customTooltipInstance = null;
}
if (this.toolTipTimeout) {
clearTimeout(this.toolTipTimeout);
this.toolTipTimeout = null;
}
}
/**
* Gets/sets the dataContext Input property for changing the model's `DataContextProperty`
*
* @memberof BaseComponent
*/
@Input() set dataContext(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.DataContextProperty,
value
)
) {
this.modelProxy.DataContext = value;
}
}
/**
* Gets the value of the model's `DataContextProperty`
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get dataContext(): any {
return this.modelProxy.DataContext;
}
/**
* Gets/sets the visibility property for the BaseComponent
*
* @memberof BaseComponent
*/
@Input() set visibility(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
UIElement.VisibilityProperty,
value
)
) {
this.modelProxy.Visibility = value;
}
}
/**
* Gets the value of the model for the visibility property
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get visibility(): any {
return this.modelProxy.Visibility;
}
/**
* Gets/sets the isEnabled property for the BaseComponent
*
* @memberof BaseComponent
*/
@Input() set isEnabled(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
Control.IsEnabledProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.IsEnabled = value;
}
}
/**
* Gets the value of the model for the isEnabled property
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get isEnabled(): boolean | BindingInfo {
return this.modelProxy.IsEnabled;
}
/**
* Sets the vertical alignment.
*
* @memberof BaseComponent
*/
@Input()
set verticalAlignment(value: string | number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.VerticalAlignmentProperty,
value
)
) {
this.modelProxy.VerticalAlignment =
typeof value === 'number' ? value : VerticalAlignment.parse(value);
}
}
/**
* Gets the vertical alignment.
*
* @type {(string | number)}
* @memberof BaseComponent
*/
get verticalAlignment(): string | number {
return this.modelProxy.VerticalAlignment;
}
/**
* Sets the vertical content alignment.
*
* @memberof BaseComponent
*/
@Input()
set verticalContentAlignment(value: string | number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.VerticalContentAlignmentProperty,
value
)
) {
this.modelProxy.VerticalContentAlignment =
typeof value === 'number' ? value : VerticalAlignment.parse(value);
}
}
/**
* Gets the vertical content alignment.
*
* @type {(string | number)}
* @memberof BaseComponent
*/
get verticalContentAlignment(): string | number {
return this.modelProxy.VerticalContentAlignment;
}
/**
* Sets the horizontal alignment.
*
* @memberof BaseComponent
*/
@Input()
set horizontalAlignment(value: string | number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.HorizontalAlignmentProperty,
value
)
) {
this.modelProxy.HorizontalAlignment =
typeof value === 'number' ? value : HorizontalAlignment.parse(value);
}
}
/**
* Gets the horizontal alignment.
*
* @type {(string | number)}
* @memberof BaseComponent
*/
get horizontalAlignment(): string | number {
return this.modelProxy.HorizontalAlignment;
}
/**
* Sets the horizontal content alignment.
*
* @memberof BaseComponent
*/
@Input()
set horizontalContentAlignment(value: string | number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.HorizontalContentAlignmentProperty,
value
)
) {
this.modelProxy.HorizontalContentAlignment =
typeof value === 'number' ? value : HorizontalAlignment.parse(value);
}
}
/**
* Gets the horizontal content alignment.
*
* @type {(string | number)}
* @memberof BaseComponent
*/
get horizontalContentAlignment(): string | number {
return this.modelProxy.HorizontalContentAlignment;
}
/**
* Sets the name model property for the control when the name is an input
*
* @memberof BaseComponent
*/
@Input() set name(value: string) {
this.modelProxy.Name = value;
}
/**
* Gets the name model property for the control when the name is an input
*
* @memberof BaseComponent
*/
get name(): string {
return this.modelProxy.Name;
}
/**
* Object used in the Tag property of the Button
*
* @memberof BaseComponent
*/
@Input() set tag(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.TagProperty,
value
)
) {
this.modelProxy.Tag = value;
}
}
/**
* Gets the Tag model property
*
* @memberof BaseComponent
*/
get tag(): any {
return this.modelProxy.Tag;
}
/**
* Sets the controlTemplate Input property for changing the model's `TemplateProperty`
*
* @memberof BaseComponent
*/
@Input() set controlTemplate(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
Control.TemplateProperty,
value
)
) {
this.modelProxy.Template = value;
}
}
/**
* Gets the template model property
*
* @memberof BaseComponent
*/
get controlTemplate(): any {
return this.modelProxy.Template ?? null;
}
/**
* Sets the value of the Foreground property
*
* @memberof BaseComponent
*/
@Input() set foreground(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
Control.ForegroundProperty,
value
)
) {
this.modelProxy.Foreground = Utils.createSolidBrush(value);
}
}
/**
* Gets the value of the Color for TextBlockModel
*
* @readonly
* @type {any}
* @memberof ButtonComponent
*/
get foreground(): any {
return this.modelProxy.Foreground ?? null;
}
/**
* Gets min width property
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
get minWidth(): any {
return this.modelProxy.minWidth || 'unset';
}
/**
* Sets min Width
*
* @memberof BaseComponent
*/
@Input()
set minWidth(value: any) {
this.modelProxy.minWidth = parseFloat(value);
}
/**
* Gets maxWidth
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
get maxWidth(): any {
return this.modelProxy.maxWidth || 'unset';
}
/**
* Sets maxWidth
*
* @memberof BaseComponent
*/
@Input()
set maxWidth(value: any) {
this.modelProxy.maxWidth = parseFloat(value);
}
/**
* Gets minHeight
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
get minHeight(): any {
return this.modelProxy.minHeight || 'unset';
}
/**
* Sets minHeight
*
* @memberof BaseComponent
*/
@Input()
set minHeight(value: any) {
this.modelProxy.minHeight = parseFloat(value);
}
/**
* Gets maxHeight
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
get maxHeight(): any {
return this.modelProxy.maxHeight || 'unset';
}
/**
* Sets maxHeight
*
* @memberof BaseComponent
*/
@Input()
set maxHeight(value: any) {
this.modelProxy.maxHeight = parseFloat(value);
}
/**
* Sets Opacity value property of the component
*
* @type {number}
* @memberof BaseComponent
*/
@Input()
set opacity(value: number | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
UIElement.OpacityProperty,
value
) &&
typeof value === 'number'
) {
this.modelProxy.Opacity = value;
}
}
/**
* Gets Opacity value property of the component
*
* @type {number}
* @memberof BaseComponent
*/
get opacity(): number | BindingInfo {
return this.modelProxy.Opacity;
}
/**
* Sets the width
*
* @memberof BaseComponent
*/
@Input()
set width(value: number | string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.WidthProperty,
value
)
) {
this.modelProxy.Width = Number(value);
}
}
/**
* Gets the width
*
* @readonly
* @type {number}
* @memberof BaseComponent
*/
get width(): number | string | BindingInfo {
return this.modelProxy?.Width;
}
/**
* Sets the height
*
* @memberof BaseComponent
*/
@Input()
set height(value: number | string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.HeightProperty,
value
)
) {
this.modelProxy.Height = Number(value);
}
}
/**
* Gets the height
*
* @readonly
* @type {number}
* @memberof BaseComponent
*/
get height(): number | string | BindingInfo {
return this.modelProxy?.Height;
}
/**
* Gets the style
*
* @readonly
* @type {number}
* @memberof BaseComponent
*/
get style(): RuntimeStyleInfo | BindingInfo {
return this.modelProxy?.Style;
}
/**
* Sets the style
*
* @memberof BaseComponent
*/
@Input()
set style(value: RuntimeStyleInfo | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.StyleProperty,
value
)
) {
this.modelProxy.Style = value as RuntimeStyleInfo;
}
}
/**
* Property used to save the cursor value
*
* @memberof BaseComponent
*/
@Input() set cursor(value: string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
FrameworkElement.CursorProperty,
value
)
) {
this.modelProxy.Cursor = Cursors.parse(value?.toString());
const cursorStyle = Utils.cssCursorName(this.modelProxy?.Cursor);
if (
cursorStyle !== 'inherit' &&
cursorStyle !== 'default' &&
!this.hasDefinedCursor
) {
this.hasDefinedCursor = true;
} else if (
(cursorStyle === 'inherit' || cursorStyle === 'default') &&
this.hasDefinedCursor
) {
this.hasDefinedCursor = false;
}
}
}
/**
* Gets the cursor value
*
* @readonly
* @type {(string | BindingInfo)}
* @memberof BaseComponent
*/
get cursor(): string | BindingInfo {
return this.modelProxy.Cursor?.toString();
}
/**
* 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...
*
* @type {number}
* @memberof BaseComponent
*/
@Input() set zindex(value: number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
CanvasModel.ZIndexProperty,
value
) &&
typeof value === 'number'
) {
//This is a temporal store while sync is done with the real model
this.modelProxy[CanvasModel.ZIndexProperty.name] = value;
}
}
/**
* 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.
*
* @memberof BaseComponent
*/
validatesLoadingFlag(): void {
/* istanbul ignore else */
if (this.injectorBase != null) {
const tabService = this.injectorBase.get<TabItemService>(
TabItemService as Type<TabItemService>,
'not found' as any
) as any;
const tabIndex = this.injectorBase.get<TabIndexService>(
TabIndexService as Type<TabIndexService>,
'not found' as any
) as any;
/* istanbul ignore else */
if (
tabIndex &&
tabIndex !== 'not found' &&
(tabIndex.currentTabId !== tabService.selectedTab ||
(!tabIndex.currentTabId && tabIndex.currentTabId !== 0)) &&
this.modelProxy
) {
this.modelProxy.IsFirstTimeLoad = false;
}
}
}
/**
* Returns the correct CSS cursor style and sets the definedCursor flag if necessary
*
* @return {*} {string}
* @memberof BaseComponent
*/
cursorStyle(): string {
return Utils.cssCursorName(this.modelProxy?.Cursor);
}
/**
* Syncs the modelProxy with model
*
* @param {FrameworkElement} model
* @returns void
*/
setupModel(model: FrameworkElement): void {
const resolvedType =
model.AngularComponentId &&
TypeResolver.getType(model.AngularComponentId);
this.isInternalInherit =
!!resolvedType && resolvedType?.name !== this.constructor.name;
model.change?.removeHandler(this.modelChangeRef);
this.modelChangeRef = model.change?.addHandler(
this.modelChangeHandler.bind(this)
);
ModelProxy.copy(this.modelProxy, model);
this.modelProxy = model;
const contextModel = model;
const valuesToSet = this.pendingSetValues;
registerPendingSetValues(valuesToSet, contextModel);
this.recreateInvalidBindings();
this.pendingSetValues = [];
this.assignPendingPropertyValues();
/* istanbul ignore else */
if (this.bindingValidationError.observers?.length > 0) {
this.bindingValidationCallback = model.BindingValidationError.addHandler(
(obj, args) => {
this.bindingValidationError.emit({ sender: model, e: args });
}
);
}
this.setupDependencyComponents(model);
this.modelChangeHandler();
this.alignmentHandler();
// Register static observers into the model.
this.registerObservers(this.loaded, model, model.Loaded);
this.registerObservers(this.sizeChanged, model, model.SizeChanged);
this.registerObservers(this.layoutUpdated, model, model.LayoutUpdated);
this.registerObservers(
this.mouseLeftButtonUp,
model,
model.MouseLeftButtonUp
);
if (this.cdRefBase && !this.cdRefBase['destroyed']) {
this.cdRefBase.detectChanges();
}
}
/**
* Adds the references to the dependency components
*
* @param {FrameworkElement} model
* @memberof BaseComponent
*/
setupDependencyComponents(model: FrameworkElement): void {
// Set Context Menu
this.registerHandler(model.CtxMenuOpened, (obj, ctx) => {
this.registerContextMenuActions(ctx);
});
if (model.ctxMenuManager) {
this.registerContextMenuActions(model.ctxMenuManager);
}
// Set Tooltip
this.registerHandler(model.ToolTipSet, (obj, ctx) => {
this.syncToolTip(ctx);
});
if (model.tooltip) {
this.syncToolTip(model.tooltip);
}
}
/**
* @param {any} staticItems The static elements to be added
* @param {any} itemsCollection The control items collection
* @returns void
*/
loadStaticItems(staticItems: any, itemsCollection: any): void {
staticItems.forEach((element) => {
if (
this.checkStaticItemInModelCollection(itemsCollection, element) === -1
) {
itemsCollection.add(element.model);
}
});
}
/**
*Method to handle the model's change
*
* @param { string } name - property name that change
* @memberof BaseComponent
*/
modelChangeHandler(name?: string) {
this.processFocusable(name);
this.processWidths(name);
this.processHeights(name);
this.calculateActualSize(name);
this.processVisibility(name);
this.processOpacity(name);
this.processIsEnabled(name);
this.processFonts(name);
this.processAlignments(name);
this.processCustomCssClasses(name);
this.processCursor(name);
this.processZIndex(name);
this.syncValidationError(name);
this.detectChangesAction();
}
/**
* If the name is equal to 'calculateActualSize', then call the handlerCalcActualSize function and
* pass in false to avoid the timer in the function.
*
* @param {string} [name] - The name of the event.
* memberof BaseComponent
*/
calculateActualSize(name?: string): void {
if (name === 'calculateActualSize') {
this.handlerCalcActualSize(false);
}
}
/**
* Handle subscription to the notifyDetectChanges action
* Refresh the component whenever a model modification was performed
*
* @memberof BaseComponent
*/
detectChangesAction() {
if (this.ngZone) {
// if ngZone is defined then make sure it executes markForCheck inside Angular´s Zone
this.ngZone?.run(() => {
this.markForCheckComp();
});
} else {
this.markForCheckComp();
}
}
/**
* Method to check if the component should assign a alignment property
*
* @param {string} name
* @return {*} {void}
* @memberof BaseComponent
*/
processAlignments(name: string): void {
if (name === 'VerticalAlignment') {
this.hostVerticalAlignmentCall();
return;
}
/* istanbul ignore else */
if (name === 'HorizontalAlignment') {
this.hostHorizontalAlignmentCall();
return;
}
}
/**
* Method to set custom CSS Clases
*
* @param {string} name
* @return {*} {void}
* @memberof BaseComponent
*/
processCustomCssClasses(name: string): void {
if (name === undefined || name === 'CustomCSSClasses') {
this.customCssClasses = this.modelProxy.CustomCSSClasses;
return;
}
}
/**
* Method to check if the component should be show or hide.
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processVisibility(name: string) {
if (name === undefined || name === 'Visibility') {
this.hostVisibility = this.modelProxy.Visibility ? undefined : 'none';
return;
}
}
/**
* Method to apply the opacity for the component.
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processOpacity(name: string): void {
/* istanbul ignore else */
if (name === undefined || name === 'Opacity') {
this.hostOpacity = this.modelProxy.Opacity ?? 1;
}
}
/**
* Process changes to `IsEnabled` property.
*
* @param {string} name
* @memberof BaseComponent
*/
processIsEnabled(name: string): void {
/* istanbul ignore else */
if (name === undefined || name === 'IsEnabled') {
this.processOpacity('Opacity');
}
}
/**
* Method to apply the font styles for the component.
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processFonts(name: string): void {
if (this.modelProxy instanceof Control) {
this.hostFontStyles = true;
} else {
return;
}
this.processFontFamily(name);
this.processFontSize(name);
this.processFontStyle(name);
this.processFontWeight(name);
}
/**
* Method to check and set the height of the grid
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processHeights(name: string) {
if (name === undefined || name === 'Height') {
this.hostHeight = this.heightCalc();
}
if (name === undefined || name === 'minHeight' || name === 'MinHeight') {
this.hostMinHeight = this.modelProxy.minHeight || undefined;
}
if (name === undefined || name === 'maxHeight' || name === 'MaxHeight') {
this.hostMaxHeight = this.modelProxy.maxHeight || undefined;
}
}
/**
* Method to check and set the height of the grid
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processFocusable(name: string) {
if (name === 'IsTabStop' && this.modelProxy instanceof Control) {
this.focusable = this.modelProxy.IsTabStop;
}
}
/**
* Method to check and set the width of the grid
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processWidths(name: string) {
if (name === undefined || name === 'Width') {
this.hostWidth = this.widthCalc();
}
if (name === undefined || name === 'minWidth' || name === 'MinWidth') {
this.hostMinWidth = this.modelProxy.minWidth || undefined;
}
if (name === undefined || name === 'maxWidth' || name === 'MaxWidth') {
this.hostMaxWidth = this.modelProxy.maxWidth || undefined;
}
}
/**
* Method to set the cursor style of the component
*
* @param {string} name
* @return {*}
* @memberof BaseComponent
*/
processCursor(name: string) {
if (name === undefined || name === 'Cursor') {
const cursorStyle = Utils.cssCursorName(this.modelProxy?.Cursor);
if (
cursorStyle !== 'inherit' &&
cursorStyle !== 'default' &&
!this.hasDefinedCursor
) {
this.hasDefinedCursor = true;
} else if (cursorStyle === 'inherit' && this.hasDefinedCursor) {
this.hasDefinedCursor = false;
}
}
}
/**
* Method to process the ZIndex when set through the model
*
* @private
* @param {string} name
* @memberof BaseComponent
*/
private processZIndex(name: string) {
if (name === undefined || name === CanvasModel.ZIndexProperty.name) {
const value = (<any>this).model?.getValue?.(CanvasModel.ZIndexProperty);
if (value) {
const zindexValue = parseInt(value, 10) || 0;
this.hostZIndex = `${zindexValue}`;
}
}
}
/**
* Checks if the element exists previously in the items collection
*
* @param {any} collection The control items collection
* @param {any} itemToCheck The static element to be reviewed
* @returns number Returns -1 if the item is not present in the items collection otherwise the index value
*/
checkStaticItemInModelCollection(collection: any, itemToCheck: any): number {
return collection.internalArray
? collection.internalArray.indexOf(itemToCheck.model)
: collection.indexOf(itemToCheck.model);
}
/**
* Function used by Angular to track elements in the ngFor directive.
* We use the GUID property to compare elements.
*
* @param {*} index - index of the array
* @param {*} item - item of the array
* @return {*} {*} -return the model or object itself
* @memberof BaseComponent
*/
trackByFn(index: any, item: any): any {
return item.model ?? item.item ?? item;
}
/**
* Calculates the auto height value
*
* @return {*} {string}
* @memberof BaseComponent
*/
heightDefaultStyle(): string {
return this.modelProxy?.VerticalAlignment === VerticalAlignment.Stretch
? '100%'
: 'auto';
}
/**
* Calculates the auto width value
*
* @return {*} {string}
* @memberof BaseComponent
*/
widthDefaultStyle(): string {
return this.modelProxy?.HorizontalAlignment === HorizontalAlignment.Stretch
? '100%'
: 'auto';
}
/**
* Applies the height CSS value
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
heightCalc(): any {
/* istanbul ignore else */
if (!this.useCss) {
return this.height > 0 ? `${this.height}px` : this.heightDefaultStyle();
}
}
/**
* Applies the width CSS value
*
* @readonly
* @type {*}
* @memberof BaseComponent
*/
widthCalc(): any {
/* istanbul ignore else */
if (!this.useCss) {
return this.width > 0 ? `${this.width}px` : this.widthDefaultStyle();
}
}
/**
* Calculates the Foreground color to be applied
*
* @returns string
* @memberof BaseComponent
*/
getForeground(): string {
if (this.foreground instanceof SolidColorBrush) {
return smColorToCssColor(this.foreground.Color);
} else if (this.foreground instanceof SmColor) {
return smColorToCssColor(this.foreground);
} else {
return 'inherit';
}
}
/**
* Event Handler for when the mouse enter the Image component.
*
* @param {*} event - event from the DOM event
* @memberof BaseComponent
*/
mouseEnterHandler(event: any): void {
const params = {
sender: this.modelProxy as any,
e: new MouseEventArgs(event),
};
/* istanbul ignore else */
if (this.modelProxy instanceof Control) {
this.modelProxy.OnMouseEnter();
}
this.modelProxy.MouseEnter.fire([params.sender, params.e]);
this.mouseEnter.emit(params);
}
/**
* Event Handler for when the mouse enter the Image component.
*
* @param {*} event - event from the DOM event
* @memberof BaseComponent
*/
mouseLeaveHandler(event: any): void {
const params = {
sender: this.modelProxy as any,
e: new MouseEventArgs(event),
};
/* istanbul ignore else */
if (this.modelProxy instanceof Control) {
this.modelProxy.OnMouseLeave();
}
this.modelProxy.MouseLeave.fire([params.sender, params.e]);
this.mouseLeave.emit(params);
}
/**
* Verifies if the given object (bindingObjectCandidate) is a binding object. If so the binding will be registered.
*
* @protected
* @param {DependencyProperty} property
* @param {*} bindingObjectCandidate
* @return {*} {boolean} true if the value is a binding info object and if the binding was registered, false if not
* @memberof BaseComponent
*/
protected checkAndRegisterCompatibilityBinding(
property: DependencyProperty,
bindingObjectCandidate: any
): boolean {
return Utils.validateCompatibilityBindings(
property,
bindingObjectCandidate,
this.modelProxy,
this.pendingSetValues
);
}
/**
* Checks if the given value is a static resource reference or not, if a reference then
* the value is queue for later assignment.
*
* @param property the name of the property to check for
* @param value the property value
* @returns true if the value is a static resource reference, otherwise false
*/
protected checkForStaticResource(property: string, value: any): boolean {
if (isResourceKeyValue(value)) {
this.setPendingPropertyValue(property, value);
return true;
}
return false;
}
/**
* Apply pending assignments to properties with property values
*
* @protected
* @memberof BaseComponent
*/
protected assignPendingPropertyValues() {
if (this.pendingDependencyPropertyValue) {
for (const [propertyName, value] of this.pendingDependencyPropertyValue) {
let newValue = value;
if (isResourceKeyValue(value)) {
newValue = getResourceKeyValue(value, this.modelProxy);
}
this[propertyName] = newValue;
}
this.pendingDependencyPropertyValue = undefined;
}
}
/**
* Evaluate if the `HorizontalLeftAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get horizontalLeft(): boolean {
return this.modelProxy?.HorizontalAlignment === HorizontalAlignment.Left;
}
/**
* Evaluate if the `HorizontalRightAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get horizontalRight(): boolean {
return this.modelProxy?.HorizontalAlignment === HorizontalAlignment.Right;
}
/**
* Evaluate if the `HorizontalCenterAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get horizontalCenter(): boolean {
return this.modelProxy?.HorizontalAlignment === HorizontalAlignment.Center;
}
/**
* Evaluate if the `HorizontalStrechAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get horizontalStretch(): boolean {
return this.modelProxy?.HorizontalAlignment === HorizontalAlignment.Stretch;
}
/**
* Evaluate if the `VerticalBottomAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get verticalBottom(): boolean {
return this.modelProxy?.VerticalAlignment === VerticalAlignment.Bottom;
}
/**
* Evaluate if the `VerticalTopAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get verticalTop(): boolean {
return this.modelProxy?.VerticalAlignment === VerticalAlignment.Top;
}
/**
* Evaluate if the `VerticalCenterAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get verticalCenter(): boolean {
return this.modelProxy?.VerticalAlignment === VerticalAlignment.Center;
}
/**
* Evaluate if the `VerticalStretchAlignment` should be set.
*
* @readonly
* @type {boolean}
* @memberof BaseComponent
*/
get verticalStretch(): boolean {
return this.modelProxy?.VerticalAlignment === VerticalAlignment.Stretch;
}
/**
* 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)
*
* @param {*} itemsToRender
* @param {*} items
* @param {*} contentChildTemplate
* @param {boolean} afterContentInitCalled
* @param {Injector} injector
* @return {any[]}
* @memberof BaseComponent
*/
preventItemsDuplication(
itemsToRender: any,
items: any,
contentChildTemplate: any,
afterContentInitCalled: boolean,
injector: Injector
): any[] {
const oldControlsToRender: any = itemsToRender;
const newItemsTorender = Utils.getDynamicUIElements(
items,
contentChildTemplate,
afterContentInitCalled,
injector
);
return newItemsTorender?.map((newItem) => {
const item = oldControlsToRender?.filter((oldItem) => {
return newItem.item === oldItem.item;
});
if (item && item.length === 1) {
return item[0];
} else {
return newItem;
}
});
}
/**
* Returns the path of the given image.
*
* @param {any} value
* @memberof BaseComponent
*/
imageToPath(value: any): any {
const sanitizer = this.injectorBase.get(DomSanitizer);
const str = this.getImageString(value);
if (sanitizer && typeof str === 'string' && str?.startsWith('blob:')) {
return sanitizer.bypassSecurityTrustUrl(str);
} else if (typeof str === 'string' && /;component/.test(str)) {
return str.replace(/^\/([^;]+);component(.+$)/, 'assets/$1$2');
} else {
return str;
}
}
/**
* Returns string path to the image.
*
* @param {any} value
* @memberof BaseComponent
*/
getImageString(value: any) {
if (value instanceof Uri) {
return value.ToString();
} else if (value instanceof BitmapImage) {
return value.UriSource.ToString();
} else if (typeof value === 'string') {
return value;
} else {
return value;
}
}
/**
* Returns the value from a $event
*
* @param {Event} e
* @memberof BaseComponent
*/
getTargetValue(e: Event): string {
return (e.target as HTMLInputElement).value;
}
/**
* Register observers from the given `EventEmitter` into the given `SubscriptionEvent`.
*
* @protected
* @param {EventEmitter<any>} emitter
* @param {FrameworkElement} model
* @param {SubscriptionEvent<(s,a) => void>} event
* @memberof BaseComponent
*/
protected registerObservers(
emitter: EventEmitter<any>,
model: FrameworkElement,
event: SubscriptionEvent<(s, a) => void>
): void {
/* istanbul ignore else */
if (emitter?.observers?.length > 0) {
this.handlersToUnregister.push([
event,
event.addHandler((_, a) => emitter.emit({ sender: model, e: a })),
]);
}
}
/**
* Registers mouse events if required
*
* @protected
* @memberof BaseComponent
*/
protected registerMouseEvents() {
if (this.modelProxy.MouseLeftButtonUp.hasHandlers()) {
this.registerDomEventListenerOnElement('mouseup', (domEvent) => {
/* istanbul ignore else */
if (ChildWindowService.IsOpening) {
return;
}
/* istanbul ignore next */
this.modelProxy.MouseLeftButtonUp.fire([
this.modelProxy,
new MouseEventArgs(domEvent),
]);
});
}
}
/**
* Register arrow handler into the given `SubscriptionEvent` with unregister handling when component destroy.
*
* @protected
* @param {SubscriptionEvent<(s,a) => void>} event
* @param {(s,a) => void} arrowHandler
* @param {any} self
* @memberof BaseComponent
*/
protected registerHandler(
event: SubscriptionEvent<(s, a) => void>,
arrowHandler: (s: any, a: any) => void
): void {
/* istanbul ignore else */
if (event) {
this.handlersToUnregister.push([event, event.addHandler(arrowHandler)]);
}
}
/**
* Registers a DOM handler on the current element
*
* @protected
* @param {string} eventName
* @param {*} handler
* @memberof BaseComponent
*/
protected registerDomEventListenerOnElement(eventName: string, handler: any) {
if (this.injectorBase && this.renderer2) {
const elementRef = this.injectorBase.get(ElementRef);
const element = elementRef?.nativeElement;
this.domHandlerUnListeners = this.domHandlerUnListeners ?? [];
this.domHandlerUnListeners.push(
this.renderer2.listen(element, eventName, handler)
);
}
}
/**
* Stores the pending property values for instance attach properties. Which will be applied when the model is available
*
* @protected
* @param {EventEmitter<any>} emitter
* @param {FrameworkElement} model
* @param {SubscriptionEvent<(s,a) => void>} event
* @memberof BaseComponent
*/
protected setPendingPropertyValue(property: string, value: any) {
this.pendingDependencyPropertyValue.push([property, value]);
}
/**
* Calculate the values for the grid size behavior from the alignments
*
* @private
* @memberof BaseComponent
*/
protected alignmentHandler(): void {
this.hostHorizontalAlignmentCall();
this.hostVerticalAlignmentCall();
}
/**
* Assign all the vertical bindings for the control
*
* @private
* @memberof BaseComponent
*/
protected hostVerticalAlignmentCall(): void {
this.hostVerBottom = this.verticalBottom;
this.hostVerTop = this.verticalTop;
this.hostVerCenter = this.verticalCenter;
this.hostVerStretch = this.verticalStretch;
if (this.verticalStretch && this.height) {
this.hostVerCenter = true;
this.hostVerStretch = false;
}
}
/**
* Assign all the horizontal bindings for the control
*
* @private
* @memberof BaseComponent
*/
protected hostHorizontalAlignmentCall(): void {
this.hostHozLeft = this.horizontalLeft;
this.hostHozRight = this.horizontalRight;
this.hostHozCenter = this.horizontalCenter;
this.hostHozStretch = this.horizontalStretch;
if (this.horizontalStretch && this.width) {
this.hostHozCenter = true;
this.hostHozStretch = false;
}
}
/**
* Handler that calculates ActualHeight & ActualWidth based on its inner content.
*
* @protected
* @memberof BaseComponent
*/
protected handlerCalcActualSize(async: boolean): void {
/* istanbul ignore else */
if (
this.injectorBase &&
(Number.isNaN(this.height) || Number.isNaN(this.width))
) {
const elementRef = this.injectorBase.get(ElementRef);
const element = elementRef?.nativeElement?.firstElementChild;
/* istanbul ignore else */
if (element instanceof Element) {
if (async) {
// We need to wait until the component is fully rendered to try getting the actual dimensions.
this.sizeChangedPendingTimeout = setTimeout(() => {
this.updateSizePropertiesForActualSizeChange(element);
}, 50);
} else {
this.updateSizePropertiesForActualSizeChange(element);
}
this.actualSizeCalled = true;
}
}
}
/**
* Updates the size properties of the component based on the initial size change
*
* @private
* @param {Element} element HTML element
* @memberof BaseComponent
*/
private updateSizePropertiesForActualSizeChange(element: Element) {
let shouldRaiseSizeChangedEvent = false;
let boundingRect: DOMRect = null;
if (Number.isNaN(this.height)) {
// We use `getBoundingClientRect` because `clientHeight` returns zero for some elements
boundingRect = element?.getBoundingClientRect();
const newHeight = boundingRect.height;
shouldRaiseSizeChangedEvent = newHeight !== this.modelProxy.ActualHeight;
this.modelProxy.ActualHeight = newHeight;
}
if (Number.isNaN(this.width)) {
// We use `getBoundingClientRect` because `clientWidth` returns zero for some elements
boundingRect = boundingRect ?? element?.getBoundingClientRect();
const newWidth = boundingRect.width;
shouldRaiseSizeChangedEvent =
shouldRaiseSizeChangedEvent || newWidth !== this.modelProxy.ActualWidth;
this.modelProxy.ActualWidth = newWidth;
}
if (shouldRaiseSizeChangedEvent) {
this.modelProxy.RaiseSizeChangedEvent();
}
this.sizeChangedPendingTimeout = null;
}
/**
* Marks current component
*
* @private
* @memberof BaseComponent
*/
private markForCheckComp() {
this.cdRefBase?.markForCheck();
if (this.changeDetectorNotifier?.timeout) {
clearTimeout(this.changeDetectorNotifier.timeout);
}
if (this.changeDetectorNotifier) {
this.changeDetectorNotifier.timeout = setTimeout(() => {
this.changeDetectorNotifier?.notifyDetectChanges(this);
}, this.changeDetectorNotifier.timer);
}
}
/**
* 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
*
* @private
* @memberof BaseComponent
*/
private tabSelectionSubscription() {
/* istanbul ignore else */
if (this.injectorBase != null) {
const tabService = this.injectorBase.get<TabItemService>(
TabItemService as Type<TabItemService>,
'not found' as any
) as any;
/* istanbul ignore else */
if (tabService && tabService !== 'not found' && this.modelProxy) {
// Component is inside a tab control
this.fireLoadedSubscription = tabService.loadTabCleared.subscribe(
() => {
this.modelProxy.IsFirstTimeLoad = true;
}
);
this.tabSubscription = tabService.tabSelectedEvent.subscribe(
(tabSelected) => {
const tabIndex = this.injectorBase.get<TabIndexService>(
TabIndexService as Type<TabIndexService>,
'not found' as any
) as any;
/* istanbul ignore else */
if (
tabIndex &&
tabIndex !== 'not found' &&
tabIndex.currentTabId === tabService.selectedTab
) {
this.modelProxy.fireLoaded(); // Fire load event when select current tab
}
}
);
}
}
}
/**
* Sets an internal reference through the element ref to access the component in a directive
*
* @private
* @memberof BaseComponent
*/
private setComponentForDirectives() {
if (this.injectorBase != null) {
const elementRef = this.injectorBase.get(ElementRef);
/* eslint no-underscore-dangle: ["error", { "allow": ["__component"] }]*/
elementRef.nativeElement.__component = this;
this.domHandlerUnListeners = this.domHandlerUnListeners ?? [];
this.domHandlerUnListeners.push(
() => (elementRef.nativeElement.__component = null)
);
}
}
/**
* 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
*
* @private
* @param {ContextMenuManager} ctxMenu
* @memberof BaseComponent
*/
private registerContextMenuActions(ctxMenu: ContextMenuManager): void {
const element = this.injectorBase.get(ElementRef);
if (
element &&
element.nativeElement &&
ctxMenu.OpenMode !== OpenMode.None
) {
const eventName =
ctxMenu.OpenMode === OpenMode.LeftClick ? 'click' : 'contextmenu';
this.contextMenuUnlistener?.();
this.contextMenuUnlistener = this.renderer2.listen(
element.nativeElement,
eventName,
(ev) => {
if (this.ctxMenuInstance) {
this.ctxMenuInstance.destroy();
}
if (
((ctxMenu.ModifierKeys & ModifierKeys.Shift) ===
ModifierKeys.Shift &&
!ev.shiftKey) ||
((ctxMenu.ModifierKeys & ModifierKeys.Alt) === ModifierKeys.Alt &&
!ev.altKey) ||
((ctxMenu.ModifierKeys & ModifierKeys.Control) ===
ModifierKeys.Control &&
!ev.ctrlKey)
) {
//Verify if required key combiniation is pressed
return; // If key combination is not pressed the ctxmenu will not be displayed
}
ev.preventDefault();
ev.stopPropagation();
const contextComponent = this.createElementInRoot(
this.injectorBase,
TypeResolver.getType(ctxMenu.AngularComponentId)
);
this.ctxMenuInstance = contextComponent;
this.ctxMenuInstance.instance.model = ctxMenu;
this.ctxMenuInstance.instance.model.ContextMenu.MouseClickLocation =
new PointModel(ev.clientX, ev.clientY);
this.ctxMenuInstance.changeDetectorRef.detectChanges();
}
);
}
}
/**
* Updates the tooltip associated to a component
*
* @private
* @param {ToolTipModel} tooltip
* @memberof BaseComponent
*/
private syncToolTip(tooltip: ToolTipModel): void {
const element = this.injectorBase.get(ElementRef);
/* istanbul ignore else */
if (element && element.nativeElement) {
if (tooltip == null) {
this.unregisterToolTip(element);
} else {
this.registerToolTip(element, tooltip);
}
}
}
/**
* Registers a tooltip to a component
*
* @private
* @param {ElementRef<any>} element
* @param {ToolTipModel} tooltip
* @memberof BaseComponent
*/
private registerToolTip(element: ElementRef<any>, tooltip: ToolTipModel) {
const displayElement = element.nativeElement;
this.mouseOverTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener = null;
/* istanbul ignore next */
this.mouseOverTooltipUnlistener = this.renderer2.listen(
element.nativeElement,
'mouseover',
() => {
if (this.customTooltipInstance) {
return;
}
if (this.toolTipTimeout) {
clearTimeout(this.toolTipTimeout);
}
this.mouseMoveTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener = this.renderer2.listen(
element.nativeElement,
'mousemove',
(ev) => {
this.tooltipMousePosition = new DOMRect(
ev.clientX,
ev.clientY,
0,
0
);
}
);
this.toolTipTimeout = setTimeout(() => {
this.mouseMoveTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener = null;
this.toolTipTimeout = null;
this.customTooltipInstance = this.createElementInRoot(
this.injectorBase,
ToolTipServiceComponent
);
//Mobilize-Note: Placement set to tooltip should take precedence over ToolTipService and for that we need to
//set appart when we are getting the default value or where the value was explicitily set to PlacementMode.Mouse
//this code can't set appart the cases, just assumes
let placement: PlacementMode = tooltip.Placement;
this.customTooltipInstance.instance.placement = placement;
if (
placement == PlacementMode.Mouse &&
(placement = ToolTipService.GetPlacement(this.modelProxy)) !=
PlacementMode.Mouse
) {
this.customTooltipInstance.instance.placement = placement;
}
this.customTooltipInstance.instance.model = tooltip;
this.customTooltipInstance.instance.ownerTargetRect =
displayElement.getBoundingClientRect();
this.customTooltipInstance.instance.mousePosition =
this.tooltipMousePosition;
this.tooltipMousePosition = null;
this.customTooltipInstance.changeDetectorRef.detectChanges();
}, 750);
}
);
this.mouseLeaveTooltipUnlistener?.();
this.mouseLeaveTooltipUnlistener = this.renderer2.listen(
element.nativeElement,
'mouseleave',
(ev) => {
/* istanbul ignore else */
if (this.customTooltipInstance) {
this.customTooltipInstance.destroy();
this.customTooltipInstance = null;
}
if (this.toolTipTimeout) {
clearTimeout(this.toolTipTimeout);
this.toolTipTimeout = null;
}
}
);
}
/**
* Create a given component on the HTML body.
*
* @param {Injector} injector
* @param {any} componentToCreate
* @type {ComponentRef<any>}
*
* @memberof BaseComponent
*/
createElementInRoot(
injector: Injector,
componentToCreate: any
): ComponentRef<any> {
const appRef = injector.get(ApplicationRef);
const root = appRef.components[0];
const viewContainerRef = root.injector.get(ViewContainerRef);
const newComponent = viewContainerRef.createComponent(componentToCreate, {
injector: root.injector,
});
viewContainerRef.insert(newComponent.hostView);
return newComponent;
}
/**
* Unregisters a tooltip to a component
*
* @private
* @param {ElementRef<any>} element
* @memberof BaseComponent
*/
private unregisterToolTip(element: ElementRef<any>) {
this.mouseOverTooltipUnlistener?.();
this.mouseLeaveTooltipUnlistener?.();
this.mouseMoveTooltipUnlistener?.();
this.mouseOverTooltipUnlistener = null;
this.mouseLeaveTooltipUnlistener = null;
this.mouseMoveTooltipUnlistener = null;
if (this.customTooltipInstance) {
this.customTooltipInstance.destroy();
this.customTooltipInstance = null;
}
}
/**
* Clean up the handlers when the component is destroyed
*
* @private
* @memberof BaseComponent
*/
private removeModelProxyHandlers(): void {
this.modelProxy.OnDestroy?.();
this.modelProxy.CleanupBindingSubscriptions?.();
this.modelProxy.BindingValidationError?.removeHandler(
this.bindingValidationCallback
);
if (this.modelProxy.change) {
this.modelProxy.change.removeHandler(this.modelChangeRef);
}
}
/**
* 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
*
* @private
* @memberof BaseComponent
*/
private recreateInvalidBindings(): void {
this.modelProxy.RecreateInvalidBindings?.();
}
/**
* Syncs validation information with component properties
*
* @private
* @memberof BaseComponent
*/
private syncValidationError(name?: string) {
if (
(name === 'validationError' || typeof name === 'undefined') &&
this.modelProxy != null
) {
this.validationErrorMessage = this.modelProxy.validationMessage;
this.validationError = this.modelProxy['InValidationError'] === true;
}
}
/**
* Process the FontFamily property
*
* @private
* @param {string} name
* @returns {*}
* @memberof BaseComponent
*/
private processFontFamily(name: string): any {
if (name === undefined || name === 'FontFamily') {
this.hostFontFamily = this.modelProxy.FontFamily ?? null;
}
}
/**
* Process the FontSize property
*
* @private
* @param {string} name
* @returns {*}
* @memberof BaseComponent
*/
private processFontSize(name: string): any {
if (name === undefined || name === 'FontSize') {
const fontSizeValue = this.modelProxy.FontSize
? `${this.modelProxy.FontSize}px`
: null;
this.hostFontSize = fontSizeValue;
}
}
/**
* Process the FontStyle property
*
* @private
* @param {string} name
* @returns {*}
* @memberof BaseComponent
*/
private processFontStyle(name: string): any {
if (name === undefined || name === 'FontStyle') {
const fontStyleValue = this.modelProxy.FontStyle
? Utils.getFontStyle(this.modelProxy.FontStyle)
: null;
this.hostFontStyle = fontStyleValue;
}
}
/**
* Process the FontWeight property
*
* @private
* @param {string} name
* @returns {*}
* @memberof BaseComponent
*/
private processFontWeight(name: string): any {
if (name === undefined || name === 'FontWeight') {
const fontWeightValue = this.modelProxy.FontWeight
? Utils.getFontWeight(this.modelProxy.FontWeight)
: null;
this.hostFontWeight = fontWeightValue;
}
}
}