Docs for m2-core, m2-components
  1. Components
  2. HighlightedInputComponent

File

projects/m2-core/src/lib/shared/ui-components/input/highlighted-input.component.ts

Extends

ContenteditableInput

Metadata

selector highlighted-input
styles .highlighted-input { line-height: 1.6; min-height: 2em; border: 2px solid transparent; border-left: 0; border-right: 0; padding: 1px 0; white-space: nowrap; overflow: hidden; } .highlighted-input.allow-wrap { white-space: normal; } .highlighted-input:not(:focus) { text-overflow: ellipsis; }
template 
<div #contenteditableRef [attr.contenteditable]="!readonly" class="highlighted-input user-select-on" [class.allow-wrap]="allowWrap"
     title="{{text}}" [attr.placeholder]="placeholder"
     (input)="onInput($event)" (textinput)="onTextInput($event)"
     (paste)="hlPaste.emit($event)"
     (focus)="onFocus($event)" (blur)="onBlur($event)"
     (mousedown)="onMousedown()" (dblclick)="onDblClick($event)"
     (keyup.escape)="onEscapeKeyUp($event)" (keyup.enter)="onEnterKeyUp($event)" (keydown)="onKeyDown($event)"></div> <!-- contenteditable element should be empty!!! -->

Index

Properties
Methods
Inputs
Outputs

Inputs

allowWrap
Type : boolean
Default value : true
highlight
Type : boolean
Default value : true
placeholder
Type : string
readonly
Type : boolean
text
Type : string

Outputs

hlBlur
Type : EventEmitter
hlDblClick
Type : EventEmitter
hlEnterKeyUp
Type : EventEmitter
hlEscapeKeyUp
Type : EventEmitter
hlFocus
Type : EventEmitter
hlInput
Type : EventEmitter
hlKeyDown
Type : EventEmitter
hlPaste
Type : EventEmitter
textChange
Type : EventEmitter

Methods

onBlur
onBlur(event: FocusEvent)
Parameters :
Name Type Optional
event FocusEvent No
Returns : void
onDblClick
onDblClick(event: MouseEvent)
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
onEnterKeyUp
onEnterKeyUp(event: KeyboardEvent)
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
onEscapeKeyUp
onEscapeKeyUp(event: KeyboardEvent)
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
onFocus
onFocus(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void
onInput
onInput(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void
onKeyDown
onKeyDown(event: KeyboardEvent)
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
onTextInput
onTextInput(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void
Protected updateView
updateView()
Returns : void
Public focus
focus(options?: FocusOptions)
Parameters :
Name Type Optional
options FocusOptions Yes
Returns : void
onMousedown
onMousedown()
Returns : void
Protected restoreSelection
restoreSelection(savedSelection: TextSelection)
Parameters :
Name Type Optional
savedSelection TextSelection No
Returns : void

Properties

contenteditableRef
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('contenteditableRef', {static: true})
Protected hasJustBeenEdited
Type : boolean
Protected Optional prevSelection
Type : TextSelection
textValue
Type : string
Default value : ''
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""