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

File

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

Implements

OnInit

Metadata

selector ml-input
styles .hide-foreign .foreign { display: none; }
template 
<table class="card-rows-table" [class.hide-foreign]="hideForeign">
    <colgroup>
        <col [style.width.%]="colWidthRatioInPercent">
        <col>
    </colgroup>
    <tr *ngFor="let language of languages; let isFirst = first" class="card-row" [class.foreign]="!isFirst">
        <td *ngIf="isFirst" left-card-col
            [level]="level"
            [cardRowInitIndent]="cardRowInitIndent"
            [rowSpan]="languages.length"
        >
            <div class="cell-content-wrapper sticky-tools">
                <div class="overflow-ellipsis">
                    {{title}}
                </div>

                <div class="cell-tools">
                    <i *ngIf="isRequired && !newNames[0]" class="fa fa-exclamation-circle state-icon error-msg name-postfix"
                       title="Обязательное поле">
                    </i>
                </div>
            </div>
        </td>
        <td right-card-col [editModeON]="editModeON" [isFocused]="isNameFocused[language.id]">
            <div class="cell-content-wrapper">
                <div class="overflow-ellipsis">
                    <input #valueInput class="value-input" [(ngModel)]="newNames[language.id]"
                           title="{{newNames[language.id]}}" placeholder="{{language.displayName}}"
                           [disabled]="!editModeON"
                           (focus)="onNameFocused(language.id)" (blur)="onNameBlurred(language.id)"
                           (input)="showPropositions(language.id)"
                           (dblclick)="showPropositions(language.id, true)"
                           (keydown)="onInputKeyDown($event, language.id)"
                           (keyup.enter)="onChangeValue(language.id)"
                           (keyup.escape)="onNameEscapeKeyUp(language.id)"
                    />
                    <value-propositions *ngIf="usePropositions"
                                        #propositionsComponent
                                        [getPropositionsFn]="getPropositionsFn"
                                        [debounceTimeInMs]="debounceTimeInMs"
                                        [reloadOnShow]="reloadOnShow"
                                        [highlightOnly]="highlightOnly"
                                        [languageId]="language.id"
                                        (propositionSelected)="onPropositionSelected($event, language.id)"
                                        (propositionsWrapperMouseUp)="valueInput.focus()">
                    </value-propositions>
                </div>
                <div class="cell-tools">
                    <i *ngIf="usePropositions" class="fa fa-caret-down sdi-icon fade-in"
                       (click)="onPropositionsToggleClick(valueInput, language.id)">
                    </i>
                </div>
            </div>
        </td>
    </tr>
</table>

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(localizationService: LocalizationService)
Parameters :
Name Type Optional
localizationService LocalizationService No

Inputs

cardRowInitIndent
Type : any
Default value : CONSTANTS.CARD_ROW_INIT_INDENT
colWidthRatioInPercent
Type : number
Default value : 50
debounceTimeInMs
Type : number
Default value : 0
editModeON
Type : boolean
Default value : true
editValueFn
Type : function
getMlPropositionsFn
Type : function
hideForeign
Type : boolean
Default value : false
highlightOnly
Type : boolean
Default value : false
isRequired
Type : boolean
level
Type : number
Default value : 0
names
Type : []
reloadOnShow
Type : boolean
Default value : false
title
Type : any
Default value : $localize`:@@nameLabel:Наименование`

Outputs

nameChanged
Type : EventEmitter

Methods

Public focusFirst
focusFirst()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onChangeValue
onChangeValue(languageId: number)
Parameters :
Name Type Optional
languageId number No
Returns : void
onInputKeyDown
onInputKeyDown(event: KeyboardEvent, languageId: number)
Parameters :
Name Type Optional
event KeyboardEvent No
languageId number No
Returns : void
onNameBlurred
onNameBlurred(languageId: number)
Parameters :
Name Type Optional
languageId number No
Returns : void
onNameEscapeKeyUp
onNameEscapeKeyUp(languageId: number)
Parameters :
Name Type Optional
languageId number No
Returns : void
onNameFocused
onNameFocused(languageId: number)
Parameters :
Name Type Optional
languageId number No
Returns : void
onPropositionSelected
onPropositionSelected(proposition: Proposition, languageId: number)
Parameters :
Name Type Optional
proposition Proposition No
languageId number No
Returns : void
onPropositionsToggleClick
onPropositionsToggleClick(inputElem: HTMLInputElement, languageId: number)
Parameters :
Name Type Optional
inputElem HTMLInputElement No
languageId number No
Returns : void
showPropositions
showPropositions(languageId: number, immediately, emptyInput)
Parameters :
Name Type Optional Default value
languageId number No
immediately No false
emptyInput No false
Returns : void

Properties

_names
Type : string[]
Default value : []
focusedLanguageId
Type : number
Default value : 0
Optional getPropositionsFn
Type : function
isNameFocused
Type : []
Default value : []
Optional languages
Type : Language[]
newNames
Type : string[]
Default value : []
propositionComponents
Type : QueryList<ValuePropositionsComponent>
Decorators :
@ViewChildren(ValuePropositionsComponent)
valueInputs
Type : QueryList<ElementRef>
Decorators :
@ViewChildren('valueInput')

Accessors

names
getnames()
setnames(value: string[])
Parameters :
Name Type Optional
value string[] No
Returns : void
usePropositions
getusePropositions()

Propositions

Returns : boolean
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""