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

File

projects/m2-core/src/lib/shared/ui-components/value/pseudo-multiple-value.component.ts

Metadata

selector [pseudo-multiple-value]
template 
<table class="card-rows-table">
    <colgroup>
        <col [style.width.%]="colWidthRatioInPercent">
        <col>
    </colgroup>
    <ng-container *ngFor="let part of parts; let isFirst = first; let isLast = last">
        <tr *ngIf="!part.isHidden" class="card-row">
            <td *ngIf="isFirst" left-card-col [level]="level" [cardRowInitIndent]="cardRowInitIndent"
                [bottomBorder]="bottomBorder" [rowSpan]="visiblePartsCount">
                {{paramName}}
            </td>
            <td right-card-col [editModeON]="editModeON" [isFocused]="part === focusedPart"
                [bottomBorder]="bottomBorder">
                <div class="cell-content-wrapper">
                    <div class="overflow-ellipsis user-select-on">
                        <!-- template -->
                        <ng-container *ngIf="!editModeON && valuePartTemplate; else highlightedInputTmpl">
                            <ng-template [ngTemplateOutlet]="valuePartTemplate"
                                         [ngTemplateOutletContext]="{ $implicit: part.newVal }">
                            </ng-template>
                        </ng-container>

                        <!-- default input -->
                        <ng-template #highlightedInputTmpl>
                            <highlighted-input [(text)]="part.newVal" [readonly]="!editModeON"
                                               [highlight]="highlight"
                                               (hlFocus)="onValueFocused(part)" (hlBlur)="onValueBlurred(part)"
                                               (hlEnterKeyUp)="emitChangeIfNeeded(part)"
                                               (hlEscapeKeyUp)="part.resetChange()">
                            </highlighted-input>
                        </ng-template>
                    </div>
                    <div class="cell-tools" *ngIf="isLast && parts.length > partsLimit">
                        <i class="fa sdi-icon" [ngClass]="showTopMode ? 'fa-ellipsis-h' : 'fa-angle-up'"
                           [title]="showTopMode ? showAllTitle : collapseTitle" (click)="toggleShowTopMode()">
                        </i>
                    </div>
                </div>
            </td>
        </tr>
    </ng-container>
</table>

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

bottomBorder
Type : boolean
cardRowInitIndent
Type : any
Default value : CONSTANTS.CARD_ROW_INIT_INDENT
colWidthRatioInPercent
Type : number
Default value : 50
currentValue
Type : string
editModeON
Type : boolean
highlight
Type : boolean
Default value : false
level
Type : number
Default value : 0
paramName
Type : string
Default value : 'Property'
paramTip
Type : string
partsLimit
Type : any
Default value : Number.MAX_SAFE_INTEGER
valuePartTemplate
Type : TemplateRef<any>

Outputs

valueChange
Type : EventEmitter

Methods

emitChangeIfNeeded
emitChangeIfNeeded(part: ValuePart)

Changes

Parameters :
Name Type Optional
part ValuePart No
Returns : void
onValueBlurred
onValueBlurred(part: ValuePart)
Parameters :
Name Type Optional
part ValuePart No
Returns : void
onValueFocused
onValueFocused(part: ValuePart)

focus/blur

Parameters :
Name Type Optional
part ValuePart No
Returns : void
toggleShowTopMode
toggleShowTopMode()

Show top mode

Returns : void

Properties

_currentValue
Type : string
collapseTitle
Default value : $localize`:@@collapseTitle:Свернуть`
Optional focusedPart
Type : ValuePart
parts
Type : ValuePart[]
Default value : [new ValuePart()]
showAllTitle
Default value : $localize`:@@showAllTitle:Показать всех`
showTopMode
Default value : true
visiblePartsCount
Type : number
Default value : 1

Accessors

currentValue
getcurrentValue()
setcurrentValue(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""