projects/i-components/src/lib/components/text-box/text-box.component.ts
Angular Component for the TextBox Control.
OnInit
OnDestroy
AfterViewInit
AfterContentChecked
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | wm-text-box |
| styleUrls | ./text-box.component.scss |
| templateUrl | ./text-box.component.html |
Public
constructor(injector: Injector, elementRef: ElementRef, cdRef: ChangeDetectorRef, injectedModel: TextBoxModel)
|
||||||||||||||||||||
|
Creates an instance of TextBoxComponent.
Parameters :
|
| acceptsReturn | |
Type : boolean
|
|
| background | |
Type : any
|
|
|
Property used to save the background. |
|
| borderBrush | |
Type : any
|
|
|
Property used to save the BorderBrush. |
|
| borderThickness | |
Type : number
|
|
|
Sets the property BorderThickness of the control model. |
|
| horizontalScrollBarVisibility | |
|
Property used to save the Horizontal Scroll Bar Visibility. |
|
| isReadOnly | |
Type : boolean
|
|
|
Sets the property IsReadOnly of the control model. |
|
| maxLength | |
Type : number
|
|
|
Property used to save the max length. |
|
| model | |
Type : TextBoxModel
|
|
|
Object with properties and events for the textBox. |
|
| name | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:251
|
|
|
Sets the name model property for the control when the name is an input |
|
| text | |
Type : any
|
|
|
string used in the text property of the textBox |
|
| textWrapping | |
|
Sets the Text Wrapping for the TextBoxModel. |
|
| verticalScrollBarVisibility | |
|
Property used to save the the Vertical Scroll Bar Visbility. |
|
| Watermark | |
Type : any
|
|
|
Gets/sets the placeholder for textArea. Runs only on initialization |
|
| controlTemplate | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1197
|
|
|
Sets the controlTemplate Input property for changing the model's |
|
| cursor | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1451
|
|
|
Property used to save the cursor value |
|
| dataContext | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:952
|
|
|
Gets/sets the dataContext Input property for changing the model's |
|
| dataGridRowHeight | |
Type : number
|
|
Default value : 22
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:507
|
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
|
| foreground | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1223
|
|
|
Sets the value of the Foreground property |
|
| height | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1394
|
|
|
Sets the height |
|
| horizontalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1096
|
|
|
Sets the horizontal alignment. |
|
| horizontalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1125
|
|
|
Sets the horizontal content alignment. |
|
| hostHozSelfAlign | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:380
|
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
|
| isEnabled | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1008
|
|
|
Gets/sets the isEnabled property for the BaseComponent |
|
| isTabStop | |
Type : boolean
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:760
|
|
|
Sets/gets IsTabStop property of the BaseComponent |
|
| margin | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:782
|
|
|
Sets Margin property of the BaseComponent. |
|
| maxHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1325
|
|
|
Sets maxHeight |
|
| maxWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1283
|
|
|
Sets maxWidth |
|
| minHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1304
|
|
|
Sets minHeight |
|
| minWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1262
|
|
|
Sets min Width |
|
| opacity | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1336
|
|
|
Sets Opacity value property of the component |
|
| spellCheck | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:186
|
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
|
| style | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1434
|
|
|
Sets the style |
|
| tabIndex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:733
|
|
|
Sets the property TabIndex of the control model. |
|
| tag | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1171
|
|
|
Object used in the Tag property of the Button |
|
| useCss | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:177
|
|
|
Determines if the component uses CSS height/width values, instead of inputs |
|
| verticalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1038
|
|
|
Sets the vertical alignment. |
|
| verticalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1067
|
|
|
Sets the vertical content alignment. |
|
| visibility | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:980
|
|
|
Gets/sets the visibility property for the BaseComponent |
|
| width | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1365
|
|
|
Sets the width |
|
| zindex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1498
|
|
|
Property used to set the canvas zindex value. Note: Consider moving this @Input to canvas.direcive.ts, refactoring the directive so all inputs are declared in the directive, and all @HostBindings are declared here in baseComponent, the directive would be responsible for updating the models, while baseComponent will be responsible for binding the values: zIndex, Top, Left... |
|
| gotFocus | |
Type : EventEmitter<literal type>
|
|
|
GotFocus EventEmitter Event trigger when the control get the focus. |
|
| keyDown | |
Type : EventEmitter<literal type>
|
|
|
keyDown EventEmitter EventEmitter normally called in the keyDownHandler. |
|
| keyUp | |
Type : EventEmitter<literal type>
|
|
|
KeyUp EventEmitter EventEmitter normally called in the keyUpHandler. |
|
| lostFocus | |
Type : EventEmitter<any>
|
|
|
LostFocus EventEmitter Event trigger when the control lost the focus. |
|
| mouseEnter | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:161
|
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
|
| selectionChanged | |
Type : EventEmitter<literal type>
|
|
|
Event Emitter. EventEmitter normally called in the selectionChangeHandler. |
|
| textChanged | |
Type : EventEmitter<literal type>
|
|
|
TextChanged EventEmitter EventEmitter normally called in the TextChangedHandler. |
|
| bindingValidationError | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:114
|
|
|
output to emit the new value of the bindingValidationError event |
|
| layoutUpdated | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:140
|
|
|
Output to emit when then component's layout is updated. |
|
| loaded | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:123
|
|
|
Output to emit when then component is loaded. |
|
| mouseLeave | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:167
|
|
|
Event Emitter Called in the mouseLeave handler |
|
| mouseLeftButtonUp | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:147
|
|
|
MouseLeftButtonUp event Emitter. |
|
| sizeChanged | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:132
|
|
|
Output to emit when then component size is changed. |
|
| class |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| class.defaultFontStyles |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| class.focusable |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| class.hasDefinedCursor |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| class.horizontal-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| class.horizontal-left |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| class.horizontal-right |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| class.horizontal-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| class.vertical-bottom |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| class.vertical-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| class.vertical-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| class.vertical-top |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| style.display |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| style.font-family |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| style.font-size |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| style.font-style |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| style.font-weight |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| style.height |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| style.max-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| style.max-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| style.min-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| style.min-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| style.opacity |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| style.width |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| style.z-index |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| calcHeight |
calcHeight()
|
|
Calculates the element´s height according to its content
Returns :
void
|
| checkVerticalAlignments | ||||||
checkVerticalAlignments(value: FrameworkElement)
|
||||||
|
Return true if the given model have a strech vertical alignments otherwise false
Parameters :
Returns :
boolean
|
| cleanTextBindingDirtyFlag |
cleanTextBindingDirtyFlag()
|
|
Sets isDirty flag to false when text property is a bindingExpression
Returns :
void
|
| enterKeyDownHandler | ||||||
enterKeyDownHandler(event: any)
|
||||||
|
Event handler for when the user press enter in the input control.
Parameters :
Returns :
void
|
| focusHandler | ||||||||
focusHandler(event: any)
|
||||||||
|
Event handler for when element gets focus
Parameters :
Returns :
void
|
| focusoutHandler |
focusoutHandler()
|
|
Event handler for when the control lose the focus.
Returns :
void
|
| gotFocusCallback |
gotFocusCallback()
|
|
Callback function called whenever the TextBox got focus from model.
Returns :
void
|
| isStretchHorizontalAlignment | ||||||
isStretchHorizontalAlignment(value: FrameworkElement)
|
||||||
|
Return true if the given model have a strech horizontal alignments otherwise false
Parameters :
Returns :
boolean
|
| keyDownHandler | ||||||
keyDownHandler(event: KeyboardEvent)
|
||||||
|
Event handler for when the user write a letter in the input control.
Parameters :
Returns :
void
|
| keyUpHandler | ||||||||
keyUpHandler(event: KeyboardEvent)
|
||||||||
|
Event handler for when after the user write a character in the input control.
Parameters :
Returns :
void
|
| modelChangeHandler | ||||||
modelChangeHandler(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:582
|
||||||
|
Method that allows the update of the component after the model have been updated
Parameters :
Returns :
void
|
| mouseDownHandler | ||||||||
mouseDownHandler(event: any)
|
||||||||
|
Event handler for when the user start the click on the control.
Parameters :
Returns :
void
|
| mouseEnterHandler | ||||||||
mouseEnterHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:879
|
||||||||
|
Event Handler for when the move the mouse hover the TextBox
Parameters :
Returns :
void
|
| ngAfterContentChecked |
ngAfterContentChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1149
|
|
Angular lifecycle
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:553
|
|
Angular lifeCycle hook.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:565
|
|
Cleanup logic for the text-box component
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:504
|
|
Angular lifecycle.
Returns :
void
|
| processTextChange | ||||||
processTextChange(name?: string)
|
||||||
|
Method that allows the processing of the text property changes
Parameters :
Returns :
void
|
| processTextHeight | ||||||
processTextHeight(name?: string)
|
||||||
|
Method that allows the processing of the textwrapping property
Parameters :
Returns :
void
|
| processTextWrapping | ||||||
processTextWrapping(name?: string)
|
||||||
|
Method that allows the processing of the textwrapping property
Parameters :
Returns :
void
|
| resolveParent |
resolveParent()
|
|
Try to resolve the parent of the TextBox.
Returns :
FrameworkElement
|
| selectionChangedHandler | ||||||||
selectionChangedHandler(event: any)
|
||||||||
|
Event handler for when the text selection changed.
Parameters :
Returns :
void
|
| selectText |
selectText()
|
|
Method used to select a text with indexes configured. SelectionStart and SelectionLength from the model.
Returns :
void
|
| textChangeHandler | ||||||||
textChangeHandler(event: any)
|
||||||||
|
Set the value of the text when the user changes
Parameters :
Returns :
void
|
| updateBindingSource |
updateBindingSource()
|
|
Updates the textbox text binding source
Returns :
void
|
| updateSelection |
updateSelection()
|
|
Updates the model SelectionStart and SelectionLength.
Returns :
void
|
| validateHomeEndKey | ||||||
validateHomeEndKey(event: KeyboardEvent)
|
||||||
|
validates that the event for stop event propagation when a home key is pressed and the cursor is not at the start or and end key is pressed and the cursor is not at the end
Parameters :
Returns :
void
|
| Protected alignmentHandler |
alignmentHandler()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2346
|
|
Calculate the values for the grid size behavior from the alignments
Returns :
void
|
| Protected assignPendingPropertyValues |
assignPendingPropertyValues()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2057
|
|
Apply pending assignments to properties with property values
Returns :
void
|
| calculateActualSize | ||||||||
calculateActualSize(name?: string)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1674
|
||||||||
|
If the name is equal to 'calculateActualSize', then call the handlerCalcActualSize function and pass in false to avoid the timer in the function. memberof BaseComponent
Parameters :
Returns :
void
|
| Protected checkAndRegisterCompatibilityBinding | |||||||||
checkAndRegisterCompatibilityBinding(property: DependencyProperty, bindingObjectCandidate: any)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2023
|
|||||||||
|
Verifies if the given object (bindingObjectCandidate) is a binding object. If so the binding will be registered.
Parameters :
Returns :
boolean
{boolean} true if the value is a binding info object and if the binding was registered, false if not |
| Protected checkForStaticResource | ||||||||||||
checkForStaticResource(property: string, value: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2043
|
||||||||||||
|
Checks if the given value is a static resource reference or not, if a reference then the value is queue for later assignment.
Parameters :
Returns :
boolean
true if the value is a static resource reference, otherwise false |
| checkStaticItemInModelCollection | ||||||||||||
checkStaticItemInModelCollection(collection: any, itemToCheck: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1889
|
||||||||||||
|
Checks if the element exists previously in the items collection
Parameters :
Returns :
number
number Returns -1 if the item is not present in the items collection otherwise the index value |
| createElementInRoot |
createElementInRoot(injector: Injector, componentToCreate: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2698
|
|
Create a given component on the HTML body.
Returns :
ComponentRef<any>
|
| cursorStyle |
cursorStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1549
|
|
Returns the correct CSS cursor style and sets the definedCursor flag if necessary
Returns :
string
{string} |
| detectChanges |
detectChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:813
|
|
Performs a single detect Changes over the component
Returns :
void
|
| detectChangesAction |
detectChangesAction()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1686
|
|
Handle subscription to the notifyDetectChanges action Refresh the component whenever a model modification was performed
Returns :
void
|
| getForeground |
getForeground()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1966
|
|
Calculates the Foreground color to be applied
Returns :
string
string |
| getImageString | ||||||
getImageString(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2221
|
||||||
|
Returns string path to the image.
Parameters :
Returns :
any
|
| getTargetValue | ||||||
getTargetValue(e: Event)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2239
|
||||||
|
Returns the value from a $event
Parameters :
Returns :
string
|
| Protected handlerCalcActualSize | ||||||
handlerCalcActualSize(async: boolean)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2391
|
||||||
|
Handler that calculates ActualHeight & ActualWidth based on its inner content.
Parameters :
Returns :
void
|
| heightCalc |
heightCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1939
|
|
Applies the height CSS value
Returns :
any
|
| heightDefaultStyle |
heightDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1914
|
|
Calculates the auto height value
Returns :
string
{string} |
| Protected hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2374
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| Protected hostVerticalAlignmentCall |
hostVerticalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2357
|
|
Assign all the vertical bindings for the control
Returns :
void
|
| imageToPath | ||||||
imageToPath(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2202
|
||||||
|
Returns the path of the given image.
Parameters :
Returns :
any
|
| loadStaticItems | ||||||||||||
loadStaticItems(staticItems: any, itemsCollection: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1634
|
||||||||||||
|
Parameters :
Returns :
void
void |
| Private markForCheckComp |
markForCheckComp()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2451
|
|
Marks current component
Returns :
void
|
| mouseLeaveHandler | ||||||||
mouseLeaveHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2001
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| Public ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:857
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewChecked |
ngAfterViewChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:893
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:847
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnChanges |
ngOnChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:824
|
|
Angular Lifecycle Hooks
Returns :
void
|
| preventItemsDuplication | ||||||||||||||||||
preventItemsDuplication(itemsToRender: any, items: any, contentChildTemplate: any, afterContentInitCalled: boolean, injector: Injector)
|
||||||||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||||||||
|
Defined in
BaseComponent:2170
|
||||||||||||||||||
|
Validates if coming models are the same, and prevents to be recreated on Ribbon DOM. (Needs to be checked, in some statics scenarios RibbonTab, RibbonGroup duplicates items)
Parameters :
Returns :
any[]
|
| processAlignments | ||||||
processAlignments(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1704
|
||||||
|
Method to check if the component should assign a alignment property
Parameters :
Returns :
void
{void} |
| processCursor | ||||||
processCursor(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1850
|
||||||
|
Method to set the cursor style of the component
Parameters :
Returns :
void
|
| processCustomCssClasses | ||||||
processCustomCssClasses(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1723
|
||||||
|
Method to set custom CSS Clases
Parameters :
Returns :
void
{void} |
| processFocusable | ||||||
processFocusable(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1816
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| Private processFontFamily | ||||||
processFontFamily(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2784
|
||||||
|
Process the FontFamily property
Parameters :
Returns :
any
|
| processFonts | ||||||
processFonts(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1778
|
||||||
|
Method to apply the font styles for the component.
Parameters :
Returns :
void
|
| Private processFontSize | ||||||
processFontSize(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2798
|
||||||
|
Process the FontSize property
Parameters :
Returns :
any
|
| Private processFontStyle | ||||||
processFontStyle(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2815
|
||||||
|
Process the FontStyle property
Parameters :
Returns :
any
|
| Private processFontWeight | ||||||
processFontWeight(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2832
|
||||||
|
Process the FontWeight property
Parameters :
Returns :
any
|
| processHeights | ||||||
processHeights(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1797
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| processIsEnabled | ||||||
processIsEnabled(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1764
|
||||||
|
Process changes to
Parameters :
Returns :
void
|
| processOpacity | ||||||
processOpacity(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1751
|
||||||
|
Method to apply the opacity for the component.
Parameters :
Returns :
void
|
| processVisibility | ||||||
processVisibility(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1737
|
||||||
|
Method to check if the component should be show or hide.
Parameters :
Returns :
void
|
| processWidths | ||||||
processWidths(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1829
|
||||||
|
Method to check and set the width of the grid
Parameters :
Returns :
void
|
| Private processZIndex | ||||||
processZIndex(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1872
|
||||||
|
Method to process the ZIndex when set through the model
Parameters :
Returns :
void
|
| Private recreateInvalidBindings |
recreateInvalidBindings()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2756
|
|
Execution of removeModelProxyHandlers in a previous instance of the component (that used the same model) could have set some bindings in an invalid state, this will check if some of them has to be recreated
Returns :
void
|
| Private registerContextMenuActions | ||||||
registerContextMenuActions(ctxMenu: ContextMenuManager)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2533
|
||||||
|
Enable the contextMenu actions to be displayed when the user perform an action Creates dinamically a new instance of XamContextMenu to be displayed in the screen
Parameters :
Returns :
void
|
| Protected registerDomEventListenerOnElement |
registerDomEventListenerOnElement(eventName: string, handler: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2316
|
|
Registers a DOM handler on the current element
Returns :
void
|
| Protected registerHandler | |||||||||
registerHandler(event: SubscriptionEvent<void>, arrowHandler: (s: any,a: any) => void)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2298
|
|||||||||
|
Register arrow handler into the given
Parameters :
Returns :
void
|
| Protected registerMouseEvents |
registerMouseEvents()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2272
|
|
Registers mouse events if required
Returns :
void
|
| Protected registerObservers | ||||||||||||
registerObservers(emitter: EventEmitter
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2252
|
||||||||||||
|
Register observers from the given
Parameters :
Returns :
void
|
| Private registerToolTip | |||||||||
registerToolTip(element: ElementRef
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2607
|
|||||||||
|
Registers a tooltip to a component
Parameters :
Returns :
void
|
| Private removeModelProxyHandlers |
removeModelProxyHandlers()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2738
|
|
Clean up the handlers when the component is destroyed
Returns :
void
|
| Private setComponentForDirectives |
setComponentForDirectives()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2512
|
|
Sets an internal reference through the element ref to access the component in a directive
Returns :
void
|
| Protected setPendingPropertyValue |
setPendingPropertyValue(property: string, value: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2336
|
|
Stores the pending property values for instance attach properties. Which will be applied when the model is available
Returns :
void
|
| setupDependencyComponents | ||||||
setupDependencyComponents(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1612
|
||||||
|
Adds the references to the dependency components
Parameters :
Returns :
void
|
| setupModel | ||||||
setupModel(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1559
|
||||||
|
Syncs the modelProxy with model
Parameters :
Returns :
void
void |
| Private syncToolTip | ||||||
syncToolTip(tooltip: ToolTipModel)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2587
|
||||||
|
Updates the tooltip associated to a component
Parameters :
Returns :
void
|
| Private syncValidationError | ||||||
syncValidationError(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2766
|
||||||
|
Syncs validation information with component properties
Parameters :
Returns :
void
|
| Private tabSelectionSubscription |
tabSelectionSubscription()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2471
|
|
Subscribe to the tabhandler event if Required When the component is inside a tab control it should trigger the load event every time the tab is selected
Returns :
void
|
| trackByFn | ||||||||||||
trackByFn(index: any, item: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1904
|
||||||||||||
|
Function used by Angular to track elements in the ngFor directive. We use the GUID property to compare elements.
Parameters :
Returns :
any
{*} -return the model or object itself |
| Private unregisterToolTip | ||||||
unregisterToolTip(element: ElementRef
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2719
|
||||||
|
Unregisters a tooltip to a component
Parameters :
Returns :
void
|
| Private updateSizePropertiesForActualSizeChange | ||||||||
updateSizePropertiesForActualSizeChange(element: Element)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2421
|
||||||||
|
Updates the size properties of the component based on the initial size change
Parameters :
Returns :
void
|
| validatesLoadingFlag |
validatesLoadingFlag()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1519
|
|
Validates loading flag for components outside current tab index TabIndexService should be only tabItem provider, and when currentTabId is different from selectedTab IsFirstTimeLoad is set to false because tabService is going to be one in charge to trigger only one time when tab changes.
Returns :
void
|
| widthCalc |
widthCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1953
|
|
Applies the width CSS value
Returns :
any
|
| widthDefaultStyle |
widthDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1926
|
|
Calculates the auto width value
Returns :
string
{string} |
| Private changeCallbackForValidation |
Type : any
|
|
Event Handler reference for the validation. |
| controlRef |
Type : ElementRef
|
Decorators :
@ViewChild('control')
|
|
Reference the HTMLElement of the component |
| forcedGrow |
Default value : false
|
|
Forced grow mechanism |
| gotFocus |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
GotFocus EventEmitter Event trigger when the control get the focus. |
| Private gridService |
Type : GridService
|
|
Property used to save the GridService instance obtained from the injector. |
| inheritedTextBox |
Type : TextBoxComponent
|
Decorators :
@ViewChild(TextBoxComponent)
|
|
Reference the component itself in case is an inherited TextBox. |
| isExplicitText |
Type : boolean
|
|
Flag to know if the text comes from a string value and have TextWrapping set to NoWrap, if this is the case the white-space css property must be 'pre' |
| keyDown |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
keyDown EventEmitter EventEmitter normally called in the keyDownHandler. |
| keyUp |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
KeyUp EventEmitter EventEmitter normally called in the keyUpHandler. |
| lostFocus |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
LostFocus EventEmitter Event trigger when the control lost the focus. |
| model |
Type : TextBoxModel
|
Decorators :
@Input()
|
|
Object with properties and events for the textBox. |
| Protected modelProxy |
Type : TextBoxModel
|
Default value : ModelProxy.create<TextBoxModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:215
|
|
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()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:161
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
| mouseInteraction |
Default value : false
|
|
This field is a flag to know when the user click with the mouse on the control |
| selectionChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event Emitter. EventEmitter normally called in the selectionChangeHandler. |
| textChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
TextChanged EventEmitter EventEmitter normally called in the TextChangedHandler. |
| whiteSpaceWrap |
Type : string
|
|
Style property associated to the style.whitespace |
| actualSizeCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:481
|
|
Flag to know if the Angular event was called |
| afterContentInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:465
|
|
Flag to know if the Angular event was called |
| afterViewCheckedCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:473
|
|
Flag to know if the Angular event was called |
| afterViewInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:457
|
|
Flag to know if the Angular event was called |
| Private bindingValidationCallback |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:618
|
|
Callback for binding validation |
| bindingValidationError |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:114
|
|
output to emit the new value of the bindingValidationError event |
| Private cdRefInjection |
Type : ChangeDetectorRef
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:659
|
|
Change Detector Reference for the component |
| Private changeDetectionTimer |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:668
|
|
A timer to debounce changedetection actions |
| Protected changeDetectorNotifier |
Type : ChangeDectionNotifierService
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:576
|
|
Change Detection Notifier Service instace. |
| Private contextMenuUnlistener |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:676
|
|
Context Menu event unlisten action. |
| Private ctxMenuInstance |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:630
|
|
Reference to the ctxMenuInstance |
| customCssClasses |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('class')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| Private customTooltipInstance |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:641
|
|
Reference to the custom tooltip instance this is used to render a popup with custom elements used when the content value is not a string |
| dataGridRowHeight |
Type : number
|
Default value : 22
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:507
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
| Protected domHandlerUnListeners |
Type : Array<void>
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:567
|
|
A collection (possible undefined) of DOM unlistener functions . That is, functions to de register handlers |
| fireLoadedSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:449
|
|
Flag to control load event for components inside tab control |
| focusable |
Default value : false
|
Decorators :
@HostBinding('class.focusable')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| Protected handlersToUnregister |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:558
|
|
handlers to unregister when the component is destroyed |
| hasDefinedCursor |
Default value : false
|
Decorators :
@HostBinding('class.hasDefinedCursor')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| hostFontFamily |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-family')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| hostFontSize |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-size')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| hostFontStyle |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-style')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| hostFontStyles |
Default value : false
|
Decorators :
@HostBinding('class.defaultFontStyles')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| hostFontWeight |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-weight')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| hostHeight |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.height')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| hostHozCenter |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| hostHozLeft |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-left')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| hostHozRight |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-right')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| hostHozSelfAlign |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-selfalign')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:380
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
| hostHozStretch |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| hostMaxHeight |
Type : number
|
Decorators :
@HostBinding('style.max-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| hostMaxWidth |
Type : number
|
Decorators :
@HostBinding('style.max-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| hostMinHeight |
Type : number
|
Decorators :
@HostBinding('style.min-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| hostMinWidth |
Type : number
|
Decorators :
@HostBinding('style.min-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| hostOpacity |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.opacity')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| hostVerBottom |
Default value : false
|
Decorators :
@HostBinding('class.vertical-bottom')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| hostVerCenter |
Default value : false
|
Decorators :
@HostBinding('class.vertical-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| hostVerStretch |
Default value : false
|
Decorators :
@HostBinding('class.vertical-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| hostVerTop |
Default value : false
|
Decorators :
@HostBinding('class.vertical-top')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| hostVisibility |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.display')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| hostWidth |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.width')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| hostZIndex |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.z-index')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| isInitialized |
Type : any
|
Default value : undefined
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:523
|
|
Flag to know if the component is ready to render |
| isInternalInherit |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:515
|
|
Flag which indicates that the component is an internal use for inheritance |
| layoutUpdated |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:140
|
|
Output to emit when then component's layout is updated. |
| loaded |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:123
|
|
Output to emit when then component is loaded. |
| Protected modelChangeRef |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:601
|
|
Contains the reference of the function added for handle the model's change |
| mouseLeave |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:167
|
|
Event Emitter Called in the mouseLeave handler |
| Private mouseLeaveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:684
|
|
Mouse over event for tooltip unlisten action. |
| mouseLeftButtonUp |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:147
|
|
MouseLeftButtonUp event Emitter. |
| Private mouseMoveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:701
|
|
Mouse move event for tooltip unlisten action. This should have a short lifespan, as much as it takes for the tooltip to be shown |
| Private mouseOverTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:692
|
|
Mouse over event for tooltip unlisten action. |
| Protected ngZone |
Type : NgZone
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:585
|
|
Angular´s NgZone accessor |
| Protected pendingDependencyPropertyValue |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:549
|
|
A collection of pending dependency properties values to assign to the model |
| Protected pendingSetValues |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:540
|
|
A collection of pending values to assign to the model |
| Protected renderer2 |
Type : Renderer2
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:594
|
|
Angular´s Renderer2 |
| sizeChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:132
|
|
Output to emit when then component size is changed. |
| Private sizeChangedPendingTimeout |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:610
|
|
Timeout id for triggering the sizechanged event |
| spellCheck |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:186
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
| staticContent |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:432
|
|
cache the static content of the control to validate if the current data is not equals. |
| tabSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:440
|
|
TabSelection event subscription |
| Private tooltipMousePosition |
Type : DOMRect
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:710
|
|
To track the position of the mouse while the tooltip is being displayed |
| Private toolTipTimeout |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:650
|
|
To control the timer to show the tooltip |
| useCss |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:177
|
|
Determines if the component uses CSS height/width values, instead of inputs |
| validationError |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:488
|
|
Property to set the validationError class in the component |
| validationErrorMessage |
Type : string
|
Default value : ''
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:496
|
|
Property for specifying validation error message |
| textBoxRef |
gettextBoxRef()
|
|
Returns the reference of the internal control
Returns :
ElementRef
|
| name | ||||||
setname(value: string)
|
||||||
|
Sets the name model property for the control when the name is an input
Parameters :
Returns :
void
|
| maxLength | ||||||
setmaxLength(value: number)
|
||||||
|
Property used to save the max length.
Parameters :
Returns :
void
|
| acceptsReturn | ||||||
setacceptsReturn(value: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| background | ||||||
setbackground(value: any)
|
||||||
|
Property used to save the background.
Parameters :
Returns :
void
|
| borderBrush | ||||||
getborderBrush()
|
||||||
|
Gets the borderBrush from the TextBoxModel.
Returns :
any
|
||||||
setborderBrush(value: any)
|
||||||
|
Property used to save the BorderBrush.
Parameters :
Returns :
void
|
| horizontalScrollBarVisibility | ||||||
gethorizontalScrollBarVisibility()
|
||||||
|
Gets the Horizontal Scroll Bar Visibility from the TextBoxModel.
Returns :
string | ScrollBarVisibility
|
||||||
sethorizontalScrollBarVisibility(value: string | ScrollBarVisibility)
|
||||||
|
Property used to save the Horizontal Scroll Bar Visibility.
Parameters :
Returns :
void
|
| verticalScrollBarVisibility | ||||||
getverticalScrollBarVisibility()
|
||||||
|
Gets the Vertical Scroll Bar Visibility from the TextBoxModel.
Returns :
string | ScrollBarVisibility
|
||||||
setverticalScrollBarVisibility(value: string | ScrollBarVisibility)
|
||||||
|
Property used to save the the Vertical Scroll Bar Visbility.
Parameters :
Returns :
void
|
| text | ||||||
gettext()
|
||||||
|
Gets the Text value property from the TextBoxModel.
Returns :
any
|
||||||
settext(value: any)
|
||||||
|
string used in the text property of the textBox
Parameters :
Returns :
void
|
| isReadOnly | ||||||
getisReadOnly()
|
||||||
|
Gets the value of the isReadOnly property.
Returns :
boolean
|
||||||
setisReadOnly(value: boolean)
|
||||||
|
Sets the property IsReadOnly of the control model.
Parameters :
Returns :
void
|
| borderThickness | ||||||
getborderThickness()
|
||||||
|
Gets the value of the BorderThickness property.
Returns :
number
|
||||||
setborderThickness(value: number)
|
||||||
|
Sets the property BorderThickness of the control model.
Parameters :
Returns :
void
|
| Watermark | ||||||
getWatermark()
|
||||||
|
Gets/sets the placeholder for textArea. Runs only on initialization
Returns :
any
|
||||||
setWatermark(value: any)
|
||||||
|
Gets/sets the placeholder for textArea. Runs only on initialization
Parameters :
Returns :
void
|
| textWrapping | ||||||
gettextWrapping()
|
||||||
|
Gets the Text Wrapping from the TextBoxModel.
Returns :
TextWrapping | string | BindingInfo
|
||||||
settextWrapping(value: TextWrapping | string | BindingInfo)
|
||||||
|
Sets the Text Wrapping for the TextBoxModel.
Parameters :
Returns :
void
|
| horizontalScrollStyle |
gethorizontalScrollStyle()
|
|
Getter for the style of the horizontal scroll bar
Returns :
string
|
| verticalScrollStyle |
getverticalScrollStyle()
|
|
Getter for the style of the vertical scroll bar
Returns :
string
|
| maxLengthValue | ||||||
getmaxLengthValue()
|
||||||
|
Gets the Max Length from the TextBoxModel.
Returns :
number
|
||||||
setmaxLengthValue(value: number)
|
||||||
|
Sets the Max Length for the TextBoxModel.
Parameters :
Returns :
void
|
| acceptsReturnValue | ||||||
getacceptsReturnValue()
|
||||||
|
Gets the Accepts Return from the TextBoxModel.
Returns :
boolean
|
||||||
setacceptsReturnValue(value: boolean)
|
||||||
|
Sets the Accepts Return for the TextBoxModel.
Parameters :
Returns :
void
|
| backgroundColor | ||||||
getbackgroundColor()
|
||||||
|
Gets the Background from the TextBoxModel.
Returns :
any
|
||||||
setbackgroundColor(value: any)
|
||||||
|
Sets the Background for the TextBoxModel.
Parameters :
Returns :
void
|
| borderBrushColor | ||||||
getborderBrushColor()
|
||||||
|
Gets the BorderBrush from the TextBoxModel.
Returns :
any
|
||||||
setborderBrushColor(value: any)
|
||||||
|
Sets the BorderBrush for the TextBoxModel.
Parameters :
Returns :
void
|
| selectionStart |
getselectionStart()
|
|
Gets the value of the SelectionStart. Index used to indicate where the selection starts.
Returns :
number
|
| selectionEnd |
getselectionEnd()
|
|
Gets the calculate value of the SelectionEnd. Index used to indicate where the selection ends.
Returns :
number
|
| inputWidth |
getinputWidth()
|
|
Return the width of the input based on its content.
Returns :
string
|
| containerWidth |
getcontainerWidth()
|
|
Return the width of the input based on its content.
Returns :
string
|
| parentControl |
getparentControl()
|
|
Gets component parent.
Returns :
FrameworkElement
|
| parentIsContentControl |
getparentIsContentControl()
|
|
Try to resolve parent based on DOM, returns true if parent is a ContentControl.
Returns :
boolean
|
| shouldGrow |
getshouldGrow()
|
|
Return if the width should grow to its content.
Returns :
boolean
|
| templateModel |
gettemplateModel()
|
|
Returns template model
Returns :
any
|
import {
AfterContentChecked,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
ViewChild,
} from '@angular/core';
import {
ModelProxy,
TextBoxModel,
ComponentId,
AngularComponentId,
TextWrapping,
smColorToCssColor,
SolidColorBrush,
ScrollBarVisibility,
BindingInfo,
KeyEventArgs,
RoutedEventArgs,
MouseEventArgs,
VerticalAlignment,
HorizontalAlignment,
BindingExpression,
FrameworkElement,
ContentControlModel,
GridModel,
} from '@mobilize/wms-framework';
import { GridService } from '../../services/grid.service';
import { Utils } from '../../utils';
import { BaseComponent } from '../base/base.component';
/**
* Angular Component for the TextBox Control.
*
* @export
* @class TextBoxComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {OnDestroy}
*/
@Component({
selector: 'wm-text-box',
templateUrl: './text-box.component.html',
styleUrls: ['./text-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.textBox])
export class TextBoxComponent
extends BaseComponent
implements OnInit, OnDestroy, AfterViewInit, AfterContentChecked
{
/**
* Reference the HTMLElement of the component
*
* @type {ElementRef}
* @memberof TextBoxComponent
*/
@ViewChild('control')
controlRef: ElementRef;
/**
* Reference the component itself in case is an inherited TextBox.
*
* @type {TextBoxComponent}
* @memberof TextBoxComponent
*/
@ViewChild(TextBoxComponent)
inheritedTextBox: TextBoxComponent;
/**
* Object with properties and events for the textBox.
*
* @type {TextBoxModel}
* @memberof TextBoxComponent
*/
@Input() model: TextBoxModel;
/**
* GotFocus EventEmitter
* Event trigger when the control get the focus.
*
* @type {EventEmitter<TextBoxModel, RoutedEventArgs>}
* @memberof TextBoxComponent
*/
@Output() gotFocus: EventEmitter<{
sender: TextBoxModel;
e: RoutedEventArgs;
}> = new EventEmitter();
/**
* LostFocus EventEmitter
* Event trigger when the control lost the focus.
*
* @type {EventEmitter<any>}
* @memberof TextBoxComponent
*/
@Output() lostFocus: EventEmitter<any> = new EventEmitter();
/**
* KeyUp EventEmitter
* EventEmitter normally called in the keyUpHandler.
*
* @type {EventEmitter<any>}
* @memberof TextBoxComponent
*/
@Output() keyUp: EventEmitter<{ sender: TextBoxModel; e: KeyEventArgs }> =
new EventEmitter();
/**
* keyDown EventEmitter
* EventEmitter normally called in the keyDownHandler.
*
* @type {EventEmitter<TextBoxModel, KeyEventArgs>}
* @memberof TextBoxComponent
*/
@Output() keyDown: EventEmitter<{ sender: TextBoxModel; e: KeyEventArgs }> =
new EventEmitter<any>();
/**
* TextChanged EventEmitter
* EventEmitter normally called in the TextChangedHandler.
*
* @type {EventEmitter<TextBoxModel, any>}
* @memberof TextBoxComponent
*/
@Output() textChanged: EventEmitter<{ sender: TextBoxModel; e: any }> =
new EventEmitter();
/**
* Event Emitter.
* EventEmitter normally called in the mouseEnterHandler.
*
* @type {EventEmitter<TextBoxModel, MouseEventArgs>}
* @memberof TextBoxComponent
*/
@Output() mouseEnter: EventEmitter<{
sender: TextBoxModel;
e: MouseEventArgs;
}> = new EventEmitter();
/**
* Event Emitter.
* EventEmitter normally called in the selectionChangeHandler.
*
* @type {EventEmitter<TextBoxModel, MouseEventArgs>}
* @memberof TextBoxComponent
*/
@Output() selectionChanged: EventEmitter<{ sender: TextBoxModel; e: any }> =
new EventEmitter();
/**
* This field is a flag to know when the user click with the mouse on the control
*
* @memberof TextBoxComponent
*/
mouseInteraction = false;
/**
* Flag to know if the text comes from a string value and
* have TextWrapping set to NoWrap, if this is the
* case the white-space css property must be 'pre'
*
* @type {boolean}
* @memberof TextBoxComponent
*/
isExplicitText: boolean;
/**
* Style property associated to the style.whitespace
*
* @type {string}
* @memberof TextBoxComponent
*/
whiteSpaceWrap: string;
/**
* Forced grow mechanism
*
* @memberof TextBoxComponent
*/
forcedGrow = false;
/**
* ModelProxy is a copy of the model, used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {TextBoxModel}
* @memberof TextBoxComponent
*/
protected modelProxy: TextBoxModel = ModelProxy.create<TextBoxModel>();
/**
*
* Event Handler reference for the validation.
*
* @private
* @type {*}
* @memberof TextBoxComponent
*/
private changeCallbackForValidation: any;
/**
* Property used to save the GridService instance obtained from the injector.
*
* @private
* @type {GridService}
* @memberof TextBoxComponent
*/
private gridService: GridService;
/**
* Returns the reference of the internal control
*
* @type {ElementRef}
* @memberof TextBoxComponent
*/
get textBoxRef(): ElementRef {
return this.controlRef ?? this.inheritedTextBox?.controlRef;
}
/**
* Sets the name model property for the control when the name is an input
*
* @memberof TextBoxComponent
*/
@Input() set name(value: string) {
this.modelProxy.Name = value;
}
/**
* Property used to save the max length.
*
* @memberof TextBoxComponent
*/
@Input()
set maxLength(value: number) {
this.modelProxy.MaxLength = value;
}
/**
*
* @memberof TextBoxComponent
*/
@Input()
set acceptsReturn(value: boolean) {
this.modelProxy.AcceptsReturn = value;
}
/**
* Property used to save the background.
*
* @memberof TextBoxComponent
*/
@Input()
set background(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.BackgroundProperty,
value
)
) {
this.modelProxy.Background = Utils.createSolidBrush(value);
}
}
/**
* Property used to save the BorderBrush.
*
* @memberof TextBoxComponent
*/
@Input()
set borderBrush(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.BorderBrushProperty,
value
)
) {
this.modelProxy.BorderBrush = Utils.createSolidBrush(value);
}
}
/**
* Gets the borderBrush from the TextBoxModel.
*
* @type {any}
* @memberof TextBoxComponent
*/
get borderBrush(): any {
if (this.model.BorderBrush instanceof SolidColorBrush) {
return smColorToCssColor(this.model.BorderBrush.Color);
}
}
/**
* Property used to save the Horizontal Scroll Bar Visibility.
*
* @type {string | ScrollBarVisibility}
* @memberof TextBoxComponent
*/
@Input()
set horizontalScrollBarVisibility(value: string | ScrollBarVisibility) {
/* istanbul ignore else */
if (ScrollBarVisibility[value]) {
this.modelProxy.HorizontalScrollBarVisibility =
ScrollBarVisibility[value];
}
}
/**
* Gets the Horizontal Scroll Bar Visibility from the TextBoxModel.
*
* @type {string | ScrollBarVisibility}
* @memberof TextBoxComponent
*/
get horizontalScrollBarVisibility(): string | ScrollBarVisibility {
return this.model.HorizontalScrollBarVisibility;
}
/**
* Property used to save the the Vertical Scroll Bar Visbility.
*
* @memberof TextBoxComponent
*/
@Input()
set verticalScrollBarVisibility(value: string | ScrollBarVisibility) {
/* istanbul ignore else */
if (ScrollBarVisibility[value]) {
this.modelProxy.VerticalScrollBarVisibility = ScrollBarVisibility[value];
}
}
/**
* Gets the Vertical Scroll Bar Visibility from the TextBoxModel.
*
* @type {ScrollBarVisibility}
* @memberof TextBoxComponent
*/
get verticalScrollBarVisibility(): string | ScrollBarVisibility {
return this.model.VerticalScrollBarVisibility;
}
/**
* string used in the text property of the textBox
*
* @memberof TextBoxComponent
*/
@Input() set text(value: any) {
this.isExplicitText = typeof value === 'string';
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.TextProperty,
value
)
) {
this.modelProxy.Text = value?.toString();
}
}
/**
* Gets the Text value property from the TextBoxModel.
*
* @memberof TextBoxComponent
*/
get text(): any {
return this.model.Text;
}
/**
* Sets the property IsReadOnly of the control model.
*
* @memberof TextBoxComponent
*/
@Input() set isReadOnly(value: boolean) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.IsReadOnlyProperty,
value
)
) {
this.modelProxy.IsReadOnly = value;
}
}
/**
* Gets the value of the isReadOnly property.
*
* @type {boolean}
* @memberof TextBoxComponent
*/
get isReadOnly(): boolean {
return this.model.IsReadOnly;
}
/**
* Sets the property BorderThickness of the control model.
*
* @memberof TextBoxComponent
*/
@Input() set borderThickness(value: number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.BorderThicknessProperty,
value
)
) {
this.modelProxy.BorderThickness = value;
}
}
/**
* Gets the value of the BorderThickness property.
*
* @type {number}
* @memberof TextBoxComponent
*/
get borderThickness(): number {
return this.model.BorderThickness;
}
/**
* Gets/sets the placeholder for textArea.
* Runs only on initialization
*
* @type {any}
* @memberof TextBoxComponent
*/
set Watermark(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.WatermarkProperty,
value
)
) {
this.modelProxy.WaterMark = value;
}
}
/**
* Gets/sets the placeholder for textArea.
* Runs only on initialization
*
* @type {any}
* @memberof TextBoxComponent
*/
@Input()
get Watermark(): any {
return this.model.WaterMark ?? '';
}
/**
* Creates an instance of TextBoxComponent.
*
* @param {Injector} injector - Angular Injector
* @param {TextBoxModel} [injectedModel=null] - TextBox model for the current Angular Component
* @memberof TextBoxComponent
*/
/* istanbul ignore next */
public constructor(
private injector: Injector,
private elementRef: ElementRef,
private cdRef: ChangeDetectorRef,
@Optional() protected injectedModel: TextBoxModel = null
) {
super(cdRef, injector);
this.model = injectedModel;
this.gridService = injector.get(GridService);
}
/**
* Angular lifecycle.
*
* @memberof TextBoxComponent
*/
ngOnInit(): void {
this.model = this.model || this.injectedModel || new TextBoxModel();
this.setupModel(this.model);
super.ngOnInit();
this.registerObservers(this.gotFocus, this.model, this.model.GotFocus);
this.registerObservers(
this.textChanged,
this.model,
this.model.TextChanged
);
this.registerObservers(this.mouseEnter, this.model, this.model.MouseEnter);
this.registerObservers(this.lostFocus, this.model, this.model.LostFocus);
this.model.GotFocus.addHandler(this.gotFocusCallback, this);
this.model.SelectionChanged.addHandler(this.selectionChangedHandler, this);
}
/**
* Updates the textbox text binding source
*
* @memberof TextBoxComponent
*/
updateBindingSource(): void {
const bindingExpression = this.model.GetBindingExpression(
TextBoxModel.TextProperty
);
if (bindingExpression instanceof BindingExpression) {
bindingExpression.UpdateSource();
}
}
/**
* Sets isDirty flag to false when text property is a bindingExpression
*
* @memberof TextBoxComponent
*/
cleanTextBindingDirtyFlag(): void {
const bindingExpression = this.model.GetBindingExpression(
TextBoxModel.TextProperty
);
if (bindingExpression instanceof BindingExpression) {
bindingExpression.isDirty = false;
}
}
/**
* Angular lifeCycle hook.
*
* @memberof TextBoxComponent
*/
ngAfterViewInit() {
super.ngAfterViewInit();
this.isInitialized = true;
this.calcHeight();
this.detectChangesAction();
}
/**
* Cleanup logic for the text-box component
*
* @memberof TextBoxComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.model?.change.removeHandler(this.changeCallbackForValidation);
this.model.GotFocus.removeHandler(this.gotFocusCallback, this);
this.model.GotFocus.removeHandler(this.selectionChangedHandler, this);
this.changeCallbackForValidation = null;
if (this.model.hasFocus) {
this.updateBindingSource();
}
}
/**
* Method that allows the update of the component after the model have been updated
*
* @param {string} [name]
* @memberof TextBoxComponent
*/
modelChangeHandler(name?: string): void {
this.processTextChange(name);
this.processTextWrapping(name);
this.processTextHeight(name);
super.modelChangeHandler(name);
}
/**
* Method that allows the processing of the text property changes
*
* @param {string} [name]
* @memberof TextBoxComponent
*/
processTextChange(name?: string): void {
/* istanbul ignore else */
if (name === 'Text' && this.controlRef?.nativeElement) {
this.controlRef.nativeElement.value = this.text;
}
}
/**
* Method that allows the processing of the textwrapping property
*
* @param {string} [name]
* @memberof TextBoxComponent
*/
processTextHeight(name?: string): void {
if (this.isInitialized && (name === 'Text' || name === 'Height')) {
this.calcHeight();
}
}
/**
* Method that allows the processing of the textwrapping property
*
* @param {string} [name]
* @memberof TextBoxComponent
*/
processTextWrapping(name?: string): void {
if (name === undefined || name === 'TextWrapping' || name === 'Text') {
if (
this.model.TextWrapping !== TextWrapping.Wrap &&
this.isExplicitText
) {
this.whiteSpaceWrap = 'nowrap';
} else if (this.model.TextWrapping === TextWrapping.Wrap) {
this.whiteSpaceWrap = 'pre-wrap';
} else {
this.whiteSpaceWrap = 'pre';
}
}
}
/**
* Method used to select a text with indexes configured.
* SelectionStart and SelectionLength from the model.
*
* @memberof TextBoxComponent
*/
selectText(): void {
(this.controlRef?.nativeElement as HTMLInputElement)?.setSelectionRange(
this.selectionStart,
this.selectionEnd
);
}
/**
* Gets the Text Wrapping from the TextBoxModel.
*
* @type {TextWrapping}
* @memberof TextBoxComponent
*/
get textWrapping(): TextWrapping | string | BindingInfo {
return this.model.TextWrapping;
}
/**
* Sets the Text Wrapping for the TextBoxModel.
*
* @memberof TextBoxComponent
*/
@Input()
set textWrapping(value: TextWrapping | string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
TextBoxModel.TextWrappingProperty,
value
)
) {
if (typeof value === 'string' && TextWrapping[value]) {
this.modelProxy.TextWrapping = TextWrapping[value];
} else {
this.modelProxy.TextWrapping = value as any;
}
}
}
/**
* Calculates the element´s height according to its content
*
* @type {void}
* @memberof TextBoxComponent
*/
calcHeight(): void {
const numberOfLineBreaks = (this.text?.match(/\n/g) || []).length;
if (
isNaN(this.model.Height) &&
numberOfLineBreaks <= 1 &&
(this.checkVerticalAlignments(this.model) ||
this.parentControl?.constructor === ContentControlModel ||
this.parentIsContentControl ||
this.checkVerticalAlignments(this.parentControl))
) {
this.model.Height = 24;
} else if (
this.checkVerticalAlignments(this.model) &&
numberOfLineBreaks > 1
) {
const newHeight = 24 + numberOfLineBreaks * 12;
this.model.Height = newHeight;
}
}
/**
* Getter for the style of the horizontal scroll bar
*
* @readonly
* @type {string}
* @memberof TextBoxComponent
*/
get horizontalScrollStyle(): string {
if (this.model.TextWrapping === TextWrapping.Wrap) {
return 'hidden';
} else {
switch (this.horizontalScrollBarVisibility) {
case ScrollBarVisibility.Visible:
return 'scroll';
case ScrollBarVisibility.Auto:
return 'auto';
default:
return 'hidden';
}
}
}
/**
* Getter for the style of the vertical scroll bar
*
* @readonly
* @type {string}
* @memberof TextBoxComponent
*/
get verticalScrollStyle(): string {
switch (this.verticalScrollBarVisibility) {
case ScrollBarVisibility.Visible:
return 'scroll';
case ScrollBarVisibility.Auto:
return 'auto';
default:
return 'hidden';
}
}
/**
* Gets the Max Length from the TextBoxModel.
*
* @type {number}
* @memberof TextBoxComponent
*/
get maxLengthValue(): number {
return this.model.MaxLength > 0 ? this.model.MaxLength : null;
}
/**
* Sets the Max Length for the TextBoxModel.
*
* @memberof TextBoxComponent
*/
set maxLengthValue(value: number) {
this.model.MaxLength = value;
}
/**
* Gets the Accepts Return from the TextBoxModel.
*
* @type {boolean}
* @memberof TextBoxComponent
*/
get acceptsReturnValue(): boolean {
return this.model.AcceptsReturn;
}
/**
* Sets the Accepts Return for the TextBoxModel.
*
* @memberof TextBoxComponent
*/
set acceptsReturnValue(value: boolean) {
this.model.AcceptsReturn = value;
}
/**
* Gets the Background from the TextBoxModel.
*
* @type {string}
* @memberof TextBoxComponent
*/
get backgroundColor(): any {
/* istanbul ignore else */
if (this.model.Background) {
return smColorToCssColor(
(this.model.Background as SolidColorBrush).Color
);
}
}
/**
* Sets the Background for the TextBoxModel.
*
* @memberof TextBoxComponent
*/
set backgroundColor(value: any) {
this.modelProxy.Background = Utils.createSolidBrush(value);
}
/**
* Gets the BorderBrush from the TextBoxModel.
*
* @type {string}
* @memberof TextBoxComponent
*/
get borderBrushColor(): any {
/* istanbul ignore else */
if (this.model.BorderBrush) {
return smColorToCssColor(
(this.model.BorderBrush as SolidColorBrush).Color
);
}
}
/**
* Sets the BorderBrush for the TextBoxModel.
*
* @memberof TextBoxComponent
*/
set borderBrushColor(value: any) {
this.modelProxy.BorderBrush = Utils.createSolidBrush(value);
}
/**
* Gets the value of the SelectionStart. Index used to indicate where the selection starts.
*
* @readonly
* @type {number}
* @memberof TextBoxComponent
*/
get selectionStart(): number {
return this.model.SelectionStart;
}
/**
* Gets the calculate value of the SelectionEnd. Index used to indicate where the selection ends.
*
* @readonly
* @type {number}
* @memberof TextBoxComponent
*/
get selectionEnd(): number {
let end = this.selectionStart + this.model.SelectionLength;
end = end > this.text?.length ? this.text.length : end;
return end;
}
/**
* Set the value of the text when the user changes
*
* @param {any} event - Object event from DOM.
* @memberof TextBoxComponent
*/
textChangeHandler(event: any): void {
const value = event.target.value;
/* istanbul ignore else */
if (this.text !== value) {
this.model.dirtyInput = true;
this.text = value;
const params = { sender: this.model, e: event };
this.model.triggerTextChanged(params);
}
}
/**
* Event Handler for when the move the mouse hover the TextBox
*
* @param {*} event - event from the DOM event
* @memberof TextBoxComponent
*/
mouseEnterHandler(event: any): void {
const params = { sender: this.model, e: new MouseEventArgs(event) };
this.model.triggerMouseEnter(params);
}
/**
* Event handler for when element gets focus
*
* @param {any} event - Object event from DOM.
*/
focusHandler(event: any): void {
if (!this.mouseInteraction) {
this.selectText();
}
const args = new RoutedEventArgs();
args.OriginalSource = this.model;
const params = { sender: this.model, e: args };
this.model.triggerGotFocus(params);
this.mouseInteraction = false;
}
/**
* Event handler for when the control lose the focus.
*/
focusoutHandler(): void {
this.model.triggerLostFocus();
}
/**
* Event handler for when after the user write a character in the input control.
*
* @param {*} event - Object event from the HTML event
* @memberof TextBoxComponent
*/
keyUpHandler(event: KeyboardEvent): void {
const args = Utils.getKeyEventArgs(event);
const params = { sender: this.model, e: args };
this.model.triggerKeyUp(params);
this.keyUp.emit(params);
}
/**
* Event handler for when the user write a letter in the input control.
*
* @param {*} event
* @memberof TextBoxComponent
*/
keyDownHandler(event: KeyboardEvent): void {
this.validateHomeEndKey(event);
const args = Utils.getKeyEventArgs(event);
const params = { sender: this.model, e: args };
this.model.triggerKeyDown(params);
this.keyDown.emit(params);
}
/**
* validates that the event for stop event propagation when
* a home key is pressed and the cursor is not at the start
* or and end key is pressed and the cursor is not at the end
*
* @param {*} event
* @memberof TextBoxComponent
*/
validateHomeEndKey(event: KeyboardEvent): void {
const input = this.controlRef?.nativeElement as HTMLInputElement;
if (!input) return;
/* istanbul ignore else */
if (
event.key === 'Home' &&
(input.selectionStart !== 0 ||
(input.selectionStart === 0 && input.selectionEnd != 0))
) {
event.stopPropagation();
}
/* istanbul ignore else */
if (event.key === 'End' && input?.selectionStart != input.value.length) {
event.stopPropagation();
}
}
/**
* Event handler for when the user press enter in the input control.
*
* @param {*} event
* @memberof TextBoxComponent
*/
enterKeyDownHandler(event: any): void {
/* istanbul ignore else */
if (!this.acceptsReturnValue) {
event.preventDefault();
}
}
/**
* Event handler for when the user start the click on the control.
*
* @param {*} event - event from the DOM
* @memberof TextBoxComponent
*/
mouseDownHandler(event: any): void {
this.mouseInteraction = true;
}
/**
* Event handler for when the text selection changed.
*
* @param {*} event - event from the DOM
* @memberof TextBoxComponent
*/
selectionChangedHandler(event: any): void {
this.selectText();
}
/**
* Return the width of the input based on its content.
*
* @memberof TextBoxComponent
*/
get inputWidth(): string {
return this.shouldGrow
? this.model.Text?.toString().length + 2 + 'ch !important'
: '100%';
}
/**
* Return the width of the input based on its content.
*
* @memberof TextBoxComponent
*/
get containerWidth(): string {
return this.shouldGrow ? 'auto !important' : '';
}
/**
* Gets component parent.
*
* @type {FrameworkElement}
* @memberof TextBoxComponent
*/
get parentControl(): FrameworkElement {
return this.model.Parent ?? this.resolveParent();
}
/**
* Try to resolve the parent of the TextBox.
*
* @type {FrameworkElement}
* @memberof TextBoxComponent
*/
resolveParent(): FrameworkElement {
if (!this.isInitialized) return undefined;
let domParent = this.elementRef.nativeElement.parentElement;
const maxAttemps = 8;
let attemps = 0;
while (!domParent?.__component && attemps < maxAttemps) {
domParent = domParent?.parentElement;
attemps++;
}
return domParent?.__component?.model;
}
/**
* Try to resolve parent based on DOM, returns true if parent is a ContentControl.
*
* @type {boolean}
* @memberof TextBoxComponent
*/
get parentIsContentControl(): boolean {
if (!this.isInitialized) return undefined;
let domParent = this.elementRef.nativeElement.parentElement;
const maxAttemps = 8;
let attemps = 0;
while (attemps < maxAttemps) {
if (domParent?.tagName === 'WM-CONTENT-CONTROL') {
return true;
}
domParent = domParent?.parentElement;
attemps++;
}
return false;
}
/**
* Return if the width should grow to its content.
*
* @memberof RadComboBoxComponent
*/
get shouldGrow(): boolean {
// Validates if is inside a grid with columns definition, shouldn't grow when col width is absolute
const isGridWithCols =
this.parentControl instanceof GridModel
? this.parentControl.ColumnDefinitions.count > 0
: false;
// Validates if the parent or self alignment affects the grow
const shouldAdjust =
(!isGridWithCols &&
!this.isStretchHorizontalAlignment(this.parentControl)) ||
!this.isStretchHorizontalAlignment(this.model);
// Prioritizes the self width over any alignment or parent dimensions
return (
Number.isNaN(this.width) &&
(this.parentControl?.constructor === ContentControlModel ||
shouldAdjust ||
this.model.HasAutoColumnGridParent)
);
}
/**
* Return true if the given model have a strech vertical alignments otherwise false
*
* @type {boolean}
* @memberof TextBoxComponent
*/
checkVerticalAlignments(value: FrameworkElement): boolean {
return value
? value.VerticalAlignment !== VerticalAlignment.Stretch
: false;
}
/**
* Return true if the given model have a strech horizontal alignments otherwise false
*
* @type {boolean}
* @memberof TextBoxComponent
*/
isStretchHorizontalAlignment(value: FrameworkElement): boolean {
return value
? value.HorizontalAlignment === HorizontalAlignment.Stretch
: true;
}
/**
* Returns template model
*
* @memberof TextBoxComponent
*/
get templateModel(): any {
return this.model.templateModel;
}
/**
* Callback function called whenever the TextBox got focus from model.
*
* @type {void}
* @memberof TextBoxComponent
*/
gotFocusCallback(): void {
this.controlRef?.nativeElement.focus();
}
/**
* Updates the model SelectionStart and SelectionLength.
*
* @type {void}
* @memberof TextBoxComponent
*/
updateSelection(): void {
const element = this.controlRef?.nativeElement as HTMLInputElement;
if (element && this.model.Text) {
this.model.SelectionStart = element.selectionStart;
this.model.SelectionLength =
element.selectionEnd - element.selectionStart;
}
}
/**
* Angular lifecycle
*
* @memberof TextBoxComponent
*/
ngAfterContentChecked(): void {
if (this.model.hasFocus) {
this.updateSelection();
}
}
}
<div
*ngIf="templateModel && visibility"
class="autoHeightWidth"
[wmValidationSupport]="[validationError, validationErrorMessage, null, '7px']"
>
<wm-content-control [content]="templateModel">
<ng-content></ng-content>
</wm-content-control>
</div>
<div
*ngIf="!templateModel && visibility"
[wmValidationSupport]="[validationError, validationErrorMessage, null, '7px']"
class="autoHeightWidth notfocusable container"
[style.width]="containerWidth"
>
<textarea
id="textbox"
#control
[value]="text"
[attr.spellcheck]="spellCheck"
(input)="textChangeHandler($event)"
[readonly]="isReadOnly"
(focus)="focusHandler($event)"
(focusout)="focusoutHandler()"
(keyup)="keyUpHandler($event)"
(mouseenter)="mouseEnterHandler($event)"
(mouseleave)="mouseLeaveHandler($event)"
(keydown)="keyDownHandler($event)"
(mousedown)="mouseDownHandler($event)"
[attr.maxLength]="maxLengthValue"
[disabled]="!isEnabled"
(keydown.enter)="enterKeyDownHandler($event)"
[style.background-color]="backgroundColor"
[style.color]="getForeground | memoize: foreground"
[style.border-width.px]="borderThickness"
[style.border-color]="borderBrush"
[tabindex]="tabIndex"
[style.overflow-x]="horizontalScrollStyle"
[style.overflow-y]="verticalScrollStyle"
[style.white-space]="whiteSpaceWrap"
cols="1"
class="autoHeightWidth"
[placeholder]="Watermark"
[style.width]="inputWidth"
></textarea>
</div>
./text-box.component.scss
@import '../../scss/variables';
textarea {
border: 1.5px solid $text-box-border-color;
resize: none;
box-sizing: border-box;
}
textarea#textbox {
cursor: text !important;
padding-top: var(--epmtextbox-padding-top, $text-box-padding-top);
}
textarea:read-only {
background-color: $background-readonly !important;
}
textarea::selection {
background: $default-editing-selection-background-color !important;
color: $default-editing-selection-foreground-color !important;
}
textarea::-moz-selection {
background: $default-editing-selection-background-color !important;
color: $default-editing-selection-foreground-color !important;
}
textarea:focus,
textarea:hover {
outline: none !important;
border: 1.5px solid $default-control-active-color;
}
.container {
box-sizing: content-box;
}