mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
c1bf8e4db9
* [ADF-3726] Enable/disable Copy to clipboard in Metadata from config * Update app.config.json * Fix e2e tests
152 lines
7.6 KiB
HTML
152 lines
7.6 KiB
HTML
<div [attr.data-automation-id]="'card-textitem-label-' + property.key"
|
|
class="adf-property-label"
|
|
*ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
|
|
<div class="adf-property-value">
|
|
<span *ngIf="!isEditable()">
|
|
<span *ngIf="!isClickable(); else nonClickableTemplate"
|
|
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
|
<span *ngIf="!isChipViewEnabled; else chipListTemplate">
|
|
<span *ngIf="showProperty() && !copyToClipboardAction"
|
|
[ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
|
|
class="adf-textitem-value">
|
|
{{ property.displayValue }}
|
|
</span>
|
|
<span *ngIf="showProperty() && copyToClipboardAction"
|
|
[ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
|
|
(dblclick)="copyToClipboard(property.displayValue)"
|
|
class="adf-textitem-value"
|
|
matTooltipShowDelay="1000"
|
|
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
|
|
{{ property.displayValue }}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<ng-template #nonClickableTemplate>
|
|
<div role="button"
|
|
class="adf-textitem-clickable"
|
|
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
|
|
(click)="clicked()"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-between center">
|
|
<span class="adf-textitem-clickable-value"
|
|
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
|
<span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
|
|
</span>
|
|
<button mat-icon-button
|
|
fxFlex="0 0 auto"
|
|
*ngIf="showClickableIcon()"
|
|
class="adf-textitem-action"
|
|
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
|
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
|
|
<mat-icon class="adf-textitem-icon">{{property?.icon}}</mat-icon>
|
|
</button>
|
|
</div>
|
|
</ng-template>
|
|
</span>
|
|
<span *ngIf="isEditable()">
|
|
<div *ngIf="!inEdit"
|
|
role="button"
|
|
tabindex="0"
|
|
[attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
|
(click)="setEditMode(true)"
|
|
(keydown.enter)="setEditMode(true)"
|
|
class="adf-textitem-readonly"
|
|
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-between center">
|
|
<span *ngIf="!isChipViewEnabled; else chipListTemplate"
|
|
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
|
<span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
|
|
</span>
|
|
|
|
<button mat-icon-button
|
|
fxFlex="0 0 auto"
|
|
class="adf-textitem-action"
|
|
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
|
[attr.data-automation-id]="'card-textitem-edit-icon-' + property.key">
|
|
|
|
<mat-icon class="adf-textitem-icon"> create</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div *ngIf="inEdit"
|
|
class="adf-textitem-editable">
|
|
<div class="adf-textitem-editable-controls">
|
|
<mat-form-field floatPlaceholder="never"
|
|
class="adf-input-container">
|
|
<input *ngIf="!isChipViewEnabled && !property.multiline"
|
|
#editorInput
|
|
(keydown.escape)="reset($event)"
|
|
(keydown.enter)="update($event)"
|
|
matInput
|
|
class="adf-input"
|
|
[placeholder]="property.default | translate"
|
|
[(ngModel)]="editedValue"
|
|
[attr.data-automation-id]="'card-textitem-editinput-' + property.key">
|
|
<textarea *ngIf="!isChipViewEnabled && property.multiline"
|
|
#editorInput
|
|
matInput
|
|
matTextareaAutosize
|
|
matAutosizeMaxRows="1"
|
|
matAutosizeMaxRows="5"
|
|
class="adf-textarea"
|
|
[placeholder]="property.default | translate"
|
|
[(ngModel)]="editedValue"
|
|
(input)="onTextAreaInputChange()"
|
|
[attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
|
|
<div *ngIf="isChipViewEnabled">
|
|
<mat-chip-list class="adf-input"
|
|
#chipList>
|
|
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
|
|
[removable]="true"
|
|
(removed)="removeValueFromList(idx)">
|
|
{{ propertyValue }}
|
|
<mat-icon matChipRemove>cancel</mat-icon>
|
|
</mat-chip>
|
|
<input #editorInput
|
|
[placeholder]="property.default | translate"
|
|
[matChipInputFor]="chipList"
|
|
[matChipInputAddOnBlur]="true"
|
|
(matChipInputTokenEnd)="addValueToList($event)"
|
|
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
|
|
</mat-chip-list>
|
|
</div>
|
|
</mat-form-field>
|
|
<button mat-icon-button
|
|
class="adf-textitem-action"
|
|
(click)="update($event)"
|
|
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
|
|
[attr.data-automation-id]="'card-textitem-update-' + property.key">
|
|
<mat-icon class="adf-textitem-icon">done</mat-icon>
|
|
</button>
|
|
|
|
<button mat-icon-button
|
|
(click)="reset($event)"
|
|
class="adf-textitem-action"
|
|
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
|
|
[attr.data-automation-id]="'card-textitem-reset-' + property.key">
|
|
|
|
<mat-icon>clear</mat-icon>
|
|
</button>
|
|
</div>
|
|
<mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
|
|
class="adf-textitem-editable-error"
|
|
*ngIf="hasErrors()">
|
|
<ul>
|
|
<li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
|
|
</ul>
|
|
</mat-error>
|
|
</div>
|
|
</span>
|
|
<ng-template #emptyValueTemplate>
|
|
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
|
|
</ng-template>
|
|
|
|
<ng-template #chipListTemplate>
|
|
<mat-chip-list>
|
|
<mat-chip *ngFor="let propertyValue of editedValue">
|
|
{{ propertyValue }}
|
|
</mat-chip>
|
|
</mat-chip-list>
|
|
</ng-template>
|
|
</div>
|