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

File

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

Metadata

selector [display-name]
styles input.display-name { background: transparent; border: none; width: 90%; text-overflow: ellipsis; } .inline-tools > .sdi-icon { font-size: 1.15em; opacity: .5; } .inline-tools > .sdi-icon:hover { opacity: 1; }
template 
<input *ngIf="renamingMode; else readMode" type="text" #nameInput [(ngModel)]="entity.displayName" class="display-name"
       (blur)="turnOffRenamingMode()" (keyup.enter)="turnOffRenamingMode()"/>

<ng-template #readMode>
    <span class="display-name" (dblclick)="$event.stopPropagation(); turnOnRenamingMode()">
        <ng-container *ngIf="entity.displayName; else nameIsNotSet">
            {{entity.displayName}}
        </ng-container>
        <ng-template #nameIsNotSet>
            <span class="placeholder">{{namePlaceholder}}</span>
        </ng-template>
    </span>

    <span *ngIf="editModeON" class="inline-tools">
        <i class="fa fa-fw fa-pencil sdi-icon"
           i18n-title="@@renameTitle" title="Переименовать"
           (click)="turnOnRenamingMode()">
        </i>
        <i *ngIf="showDeleteIcon" class="fa fa-fw fa-times sdi-icon"
           i18n-title="@@deleteTitle" title="Удалить"
           (click)="onDeleteClick($event)">
        </i>
    </span>
</ng-template>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

editModeON
Type : boolean
entity
Type : EntityLight
showDeleteIcon
Type : boolean

Outputs

deleteClick
Type : EventEmitter

Methods

onDeleteClick
onDeleteClick(event: MouseEvent)
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
turnOffRenamingMode
turnOffRenamingMode()
Returns : void
turnOnRenamingMode
turnOnRenamingMode()
Returns : void

Properties

nameInputRef
Type : ElementRef<HTMLInputElement>
Decorators :
@ViewChild('nameInput')
namePlaceholder
Type : string
renamingMode
Type : boolean
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""