mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-30141 Replace ngIf for asterix with style visibility (#10665)
This commit is contained in:
Tomasz Nastaly
GitHub
@@ -1,7 +1,7 @@
|
||||
<div class="adf-attach-widget {{ field.className }}" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{ field.name | translate }}
|
||||
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
|
||||
<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
|
||||
</label>
|
||||
<div class="adf-attach-widget-container">
|
||||
<div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<div class="adf-attach-folder-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate}}<span *ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-attach-folder-widget {{ field.className }}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{ field.name | translate }}<span [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<div class="adf-attach-folder-widget-container">
|
||||
<div *ngIf="hasFolder" class="adf-attach-folder-result">
|
||||
<mat-icon>folder</mat-icon>
|
||||
<div class="adf-attach-folder-files-row">
|
||||
<span matLine id="{{'folder-'+field?.id}}"
|
||||
role="button" tabindex="0" class="adf-folder">{{selectedFolderName}}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-'+field?.id+'-remove'"
|
||||
(click)="removeFolder();">
|
||||
<span matLine id="{{ 'folder-' + field?.id }}" role="button" tabindex="0" class="adf-folder">{{ selectedFolderName }}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-' + field?.id + '-remove'" (click)="removeFolder()">
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!hasFolder && !field.readOnly">
|
||||
<button mat-raised-button
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="openSelectDialogFromFileSource()"
|
||||
[id]="'folder-'+field?.id+'-button'"
|
||||
class="adf-attach-folder-menu-trigger">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}
|
||||
[id]="'folder-' + field?.id + '-button'"
|
||||
class="adf-attach-folder-menu-trigger"
|
||||
>
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}
|
||||
<mat-icon>cloud_upload</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
[class.adf-invalid]="dropdownControl.invalid && dropdownControl.touched"
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<mat-form-field>
|
||||
<mat-select class="adf-select" [id]="field.id" [formControl]="dropdownControl">
|
||||
<mat-option *ngFor="let opt of field.options" [value]="opt" [id]="opt.id">{{opt.name}}</mat-option>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="adf-dynamic-table-scrolling {{field.className}}" [class.adf-invalid]="!isValid()">
|
||||
<div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></div>
|
||||
<div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></div>
|
||||
|
||||
<div *ngIf="!editMode">
|
||||
<div class="adf-table-container">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
|
||||
*ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<adf-alfresco-viewer [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false" />
|
||||
<error-widget [error]="field.validationSummary" />
|
||||
</div>
|
||||
|
||||
@@ -1,47 +1,53 @@
|
||||
<div class="adf-group-widget {{field.className}}"
|
||||
[class.is-dirty]="!!field.value"
|
||||
[class.adf-invalid]="!field.isValid && isTouched()"
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
id="functional-group-div">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="adf-group-widget-field">
|
||||
<div
|
||||
class="adf-group-widget {{field.className}}"
|
||||
[class.is-dirty]="!!field.value"
|
||||
[class.adf-invalid]="!field.isValid && isTouched()"
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
id="functional-group-div"
|
||||
>
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="adf-group-widget-field">
|
||||
<mat-chip-grid #chipGrid>
|
||||
<mat-chip-row
|
||||
*ngFor="let group of selectedGroups"
|
||||
(removed)="onRemove(group)"
|
||||
[disabled]="field.readOnly"
|
||||
[attr.data-automation-id]="'adf-group-widget-chip-' + group.id"
|
||||
class="adf-group-widget-field-chip">
|
||||
class="adf-group-widget-field-chip"
|
||||
>
|
||||
{{ getDisplayName(group) }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + group.name">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
<input matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
data-automation-id="adf-group-search-input"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[id]="field.id"
|
||||
[formControl]="searchTerm"
|
||||
[disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
|
||||
[placeholder]="field.placeholder"
|
||||
(blur)="markAsTouched()"
|
||||
[matAutocomplete]="auto"
|
||||
#inputValue>
|
||||
<input
|
||||
matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
data-automation-id="adf-group-search-input"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[id]="field.id"
|
||||
[formControl]="searchTerm"
|
||||
[disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
|
||||
[placeholder]="field.placeholder"
|
||||
(blur)="markAsTouched()"
|
||||
[matAutocomplete]="auto"
|
||||
#inputValue
|
||||
/>
|
||||
</mat-chip-grid>
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateOption($event.option.value)" [displayWith]="getDisplayName">
|
||||
<mat-option *ngFor="let item of groups$ | async; let i = index"
|
||||
id="adf-group-widget-user-{{i}}"
|
||||
[id]="field.id +'-'+item.id"
|
||||
[value]="item"
|
||||
[disabled]="isGroupAlreadySelected(item)">
|
||||
<mat-option
|
||||
*ngFor="let item of groups$ | async; let i = index"
|
||||
id="adf-group-widget-user-{{i}}"
|
||||
[id]="field.id +'-'+item.id"
|
||||
[value]="item"
|
||||
[disabled]="isGroupAlreadySelected(item)"
|
||||
>
|
||||
<span id="adf-group-label-name">{{item.name}}</span>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary" />
|
||||
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
[class.adf-invalid]="!field.isValid && isTouched()"
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
id="people-widget-content">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="adf-people-widget-field">
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<div class="adf-radio-buttons-widget {{field.className}}"
|
||||
[class.adf-readonly]="field.readOnly" [id]="field.id">
|
||||
<div class="adf-radio-buttons-widget {{field.className}}" [class.adf-readonly]="field.readOnly" [id]="field.id">
|
||||
<div class="adf-radio-button-container">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
|
||||
<mat-radio-button
|
||||
[title]="field.tooltip"
|
||||
@@ -11,7 +12,9 @@
|
||||
[checked]="field.value === opt.id"
|
||||
(change)="onOptionClick(opt.id)"
|
||||
color="primary"
|
||||
class="adf-radio-button" *ngFor="let opt of field.options" >
|
||||
class="adf-radio-button"
|
||||
*ngFor="let opt of field.options"
|
||||
>
|
||||
{{opt.name}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
@@ -1,21 +1,39 @@
|
||||
<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
|
||||
>
|
||||
<div class="adf-upload-widget-container">
|
||||
<div>
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
|
||||
<img matListItemLine class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"/>
|
||||
<span matListItemLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
|
||||
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
|
||||
(click)="removeFile(file);" (keyup.enter)="removeFile(file);">
|
||||
<img
|
||||
matListItemLine
|
||||
class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
<span
|
||||
matListItemLine
|
||||
id="{{'file-'+file.id}}"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="adf-file"
|
||||
>{{file.name}}</span
|
||||
>
|
||||
<button
|
||||
*ngIf="!field.readOnly"
|
||||
mat-icon-button
|
||||
[id]="'file-'+file.id+'-remove'"
|
||||
(click)="removeFile(file);"
|
||||
(keyup.enter)="removeFile(file);"
|
||||
>
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
|
||||
Reference in New Issue
Block a user