inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34482 Modelling inconsistencies in mat form fields label alignments ii (#10929)

Browse Source 
* AAE-34482 fixing card view datetime component in adf using mat-label

* AAE-34482 fixing the padding for mat-form-field labels

* AAE-34482 resolving the pr review comments

* AAE-34482 changing the floatType from 'auto' to null

* AAE-34482 changing the scss class name as per the review comment

* AAE-34482 fixing the left units
This commit is contained in:
Soumyajit Chakraborty
2025-06-23 16:14:39 +05:30
committed by GitHub
parent c16417cbff
commit f40107de33
19 changed files with 105 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -1,13 +1,14 @@
<label <mat-label
class="adf-property-label" class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable" *ngIf="showProperty && !isEditable"
[attr.for]="'card-view-dateitem-' + property.key" [attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }" [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
> >
{{ property.label | translate }} {{ property.label | translate }}
</label> </mat-label>
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"> <div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
<span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span <span
@@ -18,10 +19,20 @@
>{{ property.displayValue }}</span >{{ property.displayValue }}</span
> >
</span> </span>
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable"> <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input">
<mat-label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
>
{{ property.label | translate }}
</mat-label>
<div class="adf-dateitem-editable-controls"> <div class="adf-dateitem-editable-controls">
<span <span
class="adf-datepicker-toggle" class="adf-datepicker-span-button"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key" [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()" (click)="showDatePicker()"
tabindex="0" tabindex="0"
@@ -32,8 +43,18 @@
{{ property.displayValue }}</span {{ property.displayValue }}</span
> >
</span> </span>
</div>
<input
matInput
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
[value]="valueDate"
(dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key"
/>
<mat-icon <mat-icon
matIconSuffix
*ngIf="showClearAction" *ngIf="showClearAction"
class="adf-date-reset-icon" class="adf-date-reset-icon"
(click)="onDateClear()" (click)="onDateClear()"
@@ -42,23 +63,13 @@
> >
clear clear
</mat-icon> </mat-icon>
<mat-datetimepicker-toggle <mat-datetimepicker-toggle
matIconSuffix
[attr.tabindex]="-1" [attr.tabindex]="-1"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key" [attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker" [for]="datetimePicker"
/> />
</div>
<input
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
[value]="valueDate"
(dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key"
/>
<mat-datetimepicker <mat-datetimepicker
#datetimePicker #datetimePicker
@@ -67,18 +78,18 @@
[attr.data-automation-id]="'datepicker-' + property.key" [attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate" [startAt]="valueDate"
/> />
</div> </mat-form-field>
<ng-template #elseEmptyValueBlock> <ng-template #elseEmptyValueBlock>
{{ property.default | translate }} {{ property.default | translate }}
</ng-template> </ng-template>
<div *ngIf="property.multivalued" <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<mat-chip-listbox #chipList class="adf-textitem-chip-list"> <mat-chip-listbox #chipList class="adf-textitem-chip-list">
<mat-chip-option <mat-chip-option
*ngFor="let propertyValue of property.displayValue; let idx = index" *ngFor="let propertyValue of property.displayValue; let idx = index"
[removable]="isEditable" [removable]="isEditable"
(removed)="removeValueFromList(idx)"> (removed)="removeValueFromList(idx)"
>
{{ propertyValue }} {{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon> <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
</mat-chip-option> </mat-chip-option>

4
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@@ -6,7 +6,6 @@
padding-bottom: 6px; padding-bottom: 6px;
line-height: 20px; line-height: 20px;
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
margin-top: 10px; margin-top: 10px;
&.adf-property-value-editable { &.adf-property-value-editable {
@@ -42,7 +41,6 @@
.adf-dateitem-editable { .adf-dateitem-editable {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
padding: 0 5px;
/* stylelint-disable-next-line no-descending-specificity */ /* stylelint-disable-next-line no-descending-specificity */
&-controls { &-controls {
@@ -62,7 +60,7 @@
transform: scale(0.8); transform: scale(0.8);
} }
.adf-datepicker-toggle { .adf-datepicker-span-button {
flex: 1 0 auto; flex: 1 0 auto;
font-size: 14px; font-size: 14px;
} }

8
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -28,6 +28,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { addMinutes } from 'date-fns'; import { addMinutes } from 'date-fns';
import { NoopTranslateModule } from '../../../testing/noop-translate.module'; import { NoopTranslateModule } from '../../../testing/noop-translate.module';
import { UnitTestingUtils } from '../../../testing/unit-testing-utils'; import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('CardViewDateItemComponent', () => { describe('CardViewDateItemComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -38,7 +39,7 @@ describe('CardViewDateItemComponent', () => {
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [NoopTranslateModule, CardViewDateItemComponent] imports: [NoopTranslateModule, CardViewDateItemComponent, NoopAnimationsModule]
}); });
appConfigService = TestBed.inject(AppConfigService); appConfigService = TestBed.inject(AppConfigService);
appConfigService.config.dateValues = { appConfigService.config.dateValues = {
@@ -66,6 +67,7 @@ describe('CardViewDateItemComponent', () => {
const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value'); const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
it('should render the label and value', () => { it('should render the label and value', () => {
fixture.detectChanges(); fixture.detectChanges();
@@ -119,7 +121,7 @@ describe('CardViewDateItemComponent', () => {
component.editable = true; component.editable = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY'); expect(getDateTime().trim()).toBe('FAKE-DEFAULT-KEY');
}); });
it('should render value when editable:true', () => { it('should render value when editable:true', () => {
@@ -128,7 +130,7 @@ describe('CardViewDateItemComponent', () => {
component.property.editable = true; component.property.editable = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyValue().trim()).toBe('Jul 10, 2017'); expect(getDateTime().trim()).toBe('Jul 10, 2017');
}); });
it('should render the picker and toggle in case of editable:true', () => { it('should render the picker and toggle in case of editable:true', () => {

8
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View File

@@ -41,6 +41,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
@Component({ @Component({
providers: [ providers: [
@@ -57,9 +59,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
MatIconModule, MatIconModule,
MatDatetimepickerModule, MatDatetimepickerModule,
MatChipsModule, MatChipsModule,
MatInputModule,
MatFormFieldModule, MatFormFieldModule,
MatDatepickerModule, MatDatepickerModule,
MatSnackBarModule MatSnackBarModule,
ReactiveFormsModule
], ],
templateUrl: './card-view-dateitem.component.html', templateUrl: './card-view-dateitem.component.html',
styleUrls: ['./card-view-dateitem.component.scss'], styleUrls: ['./card-view-dateitem.component.scss'],
@@ -78,6 +82,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
valueDate: Date; valueDate: Date;
cardViewDateTimeControl: FormControl<Date> = new FormControl<Date>(null);
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
constructor( constructor(

45
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -1,13 +1,9 @@
<ng-container *ngIf="!property.isEmpty() || isEditable"> <ng-container *ngIf="!property.isEmpty() || isEditable">
<div [ngSwitch]="templateType"> <div [ngSwitch]="templateType">
<div *ngSwitchDefault> <div *ngSwitchDefault>
<div <div *ngIf="!isEditable"
[attr.data-automation-id]="'card-select-label-' + property.key" [attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label" class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': isEditable,
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }} >{{ property.label | translate }}
</div> </div>
<div class="adf-property-field"> <div class="adf-property-field">
@@ -15,22 +11,31 @@
*ngIf="!isEditable" *ngIf="!isEditable"
class="adf-property-value adf-property-read-only" class="adf-property-value adf-property-read-only"
[attr.data-automation-id]="'select-readonly-value-' + property.key" [attr.data-automation-id]="'select-readonly-value-' + property.key"
data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }} data-automation-class="read-only-value"
>
{{ property.displayValue | async | translate }}
</div> </div>
<div *ngIf="isEditable"> <div *ngIf="isEditable">
<mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}"> <mat-form-field class="adf-property-value">
<mat-label
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label adf-property-value-editable"
[ngClass]="{
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}
</mat-label>
<mat-select <mat-select
[(value)]="value" [(value)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }" [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter" panelClass="adf-select-filter"
(selectionChange)="onChange($event)" (selectionChange)="onChange($event)"
data-automation-class="select-box" data-automation-class="select-box"
[aria-label]="property.label | translate"> [aria-label]="property.label | translate"
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"/> >
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option> <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option <mat-option *ngFor="let option of list$ | async" [value]="option.key">
*ngFor="let option of list$ | async"
[value]="option.key">
{{ option.label | translate }} {{ option.label | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
@@ -42,7 +47,8 @@
<mat-form-field <mat-form-field
class="adf-property-field adf-card-selectitem-autocomplete" class="adf-property-field adf-card-selectitem-autocomplete"
[ngClass]="{ 'adf-property-read-only': !isEditable }" [ngClass]="{ 'adf-property-read-only': !isEditable }"
[floatLabel]="'always'"> [floatLabel]="property.default ? 'always' : null"
>
<mat-label <mat-label
*ngIf="showProperty || isEditable" *ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-autocomplete-based-selectitem-label-' + property.key" [attr.data-automation-id]="'card-autocomplete-based-selectitem-label-' + property.key"
@@ -50,7 +56,8 @@
[ngClass]="{ [ngClass]="{
'adf-property-value-editable': isEditable, 'adf-property-value-editable': isEditable,
'adf-property-readonly-value': isReadonlyProperty 'adf-property-readonly-value': isReadonlyProperty
}"> }"
>
{{ property.label | translate }} {{ property.label | translate }}
</mat-label> </mat-label>
<input <input
@@ -68,10 +75,12 @@
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[attr.data-automation-id]="'card-autocomplete-based-selectitem-value-' + property.key" [attr.data-automation-id]="'card-autocomplete-based-selectitem-value-' + property.key"
/> />
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
(optionSelected)="onOptionSelected($event)"> <mat-option
<mat-option *ngFor="let option of property.options$ | async" [value]="option.key" *ngFor="let option of property.options$ | async"
[attr.data-automation-id]="'card-autocomplete-based-selectitem-option-' + property.key"> [value]="option.key"
[attr.data-automation-id]="'card-autocomplete-based-selectitem-option-' + property.key"
>
{{ option.label }} {{ option.label }}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>

3
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@@ -34,7 +34,8 @@
} }
#{ms.$mat-select-trigger} { #{ms.$mat-select-trigger} {
padding: 6px 12px 6px 6px; padding-left: 6px;
padding-right: 6px;
} }
} }
} }

5
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
View File

@@ -173,10 +173,11 @@ describe('CardViewSelectItemComponent', () => {
component.ngOnChanges({}); component.ngOnChanges({});
component.editable = true; component.editable = true;
fixture.detectChanges(); fixture.detectChanges();
const not_editable_label = fixture.nativeElement.querySelector('.adf-property-label-not-editable');
const field = await testingUtils.getMatFormFieldByCSS('.adf-property-value'); const field = await testingUtils.getMatFormFieldByCSS('.adf-property-value');
expect(await field.hasLabel()).toBeFalse(); expect(await field.hasLabel()).toBeTrue();
expect(not_editable_label).toBeNull();
}); });
}); });

3
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -5,7 +5,6 @@
[ngClass]="{ [ngClass]="{
'adf-property-read-only': !isEditable 'adf-property-read-only': !isEditable
}" }"
[floatLabel]="'always'"
> >
<mat-label <mat-label
*ngIf="showProperty || isEditable" *ngIf="showProperty || isEditable"
@@ -111,7 +110,7 @@
(keyup.enter)="clicked()" (keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
> >
<mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="'always'"> <mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="property.default ? 'always' : null">
<mat-label <mat-label
*ngIf="showProperty || isEditable" *ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-textitem-label-' + property.key" [attr.data-automation-id]="'card-textitem-label-' + property.key"

1
lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
View File

@@ -97,7 +97,6 @@ describe('CardViewComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
expect(getPropertyLabel()).toBe('My date label'); expect(getPropertyLabel()).toBe('My date label');
expect(getPropertyValueText()).toBe('6/14/17, 12:00 AM'); expect(getPropertyValueText()).toBe('6/14/17, 12:00 AM');
}); });

2
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@@ -33,7 +33,7 @@
margin: 0; margin: 0;
background-color: white; background-color: white;
position: absolute; position: absolute;
width: 96%; width: 98%;
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */
margin-left: 0 !important; margin-left: 0 !important;
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */

2
lib/core/src/lib/form/components/widgets/amount/amount.widget.html
View File

@@ -10,7 +10,7 @@
> >
</div> </div>
<div> <div>
<mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'"> <mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : null">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
> >

2
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
View File

@@ -10,7 +10,7 @@
<div> <div>
<mat-form-field class="adf-date-time-widget adf-form-field-input" <mat-form-field class="adf-date-time-widget adf-form-field-input"
[class.adf-left-label-input-datepicker]="field.leftLabels" [class.adf-left-label-input-datepicker]="field.leftLabels"
[hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : 'auto'"> [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"> <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span> {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-label> </mat-label>

2
lib/core/src/lib/form/components/widgets/date/date.widget.html
View File

@@ -1,5 +1,5 @@
<div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"> <div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
<mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'"> <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label" <mat-label class="adf-label"
[id]="field.id + '-label'" [id]="field.id + '-label'"
[attr.for]="field.id"> [attr.for]="field.id">

2
lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
View File

@@ -9,7 +9,7 @@
</div> </div>
<div> <div>
<mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'"> <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"> <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span> {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-label> </mat-label>

2
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
View File

@@ -1,7 +1,7 @@
<div class="adf-multiline-text-widget {{ field.className }}" <div class="adf-multiline-text-widget {{ field.className }}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly"> [class.adf-readonly]="field.readOnly">
<mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'"> <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label" [attr.for]="field.id"> <mat-label class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span> {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-label> </mat-label>

2
lib/core/src/lib/form/components/widgets/number/number.widget.html
View File

@@ -9,7 +9,7 @@
</label> </label>
</div> </div>
<div> <div>
<mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : 'auto'"> <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"> <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span> {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-label> </mat-label>

2
lib/core/src/lib/form/components/widgets/text/text.widget.html
View File

@@ -8,7 +8,7 @@
</label> </label>
</div> </div>
<div> <div>
<mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : 'auto'"> <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
<mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id"> <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span> {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-label> </mat-label>

10
lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
View File

@@ -143,7 +143,9 @@ describe('TaskHeaderCloudComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(
By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button')
);
expect(valueEl.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:55 PM GMT+00:00'); expect(valueEl.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:55 PM GMT+00:00');
}); });
@@ -164,7 +166,9 @@ describe('TaskHeaderCloudComponent', () => {
component.refreshData(); component.refreshData();
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(
By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button')
);
expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT'); expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT');
}); });
@@ -172,7 +176,7 @@ describe('TaskHeaderCloudComponent', () => {
component.taskDetails.processInstanceId = null; component.taskDetails.processInstanceId = null;
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input '));
expect(valueEl.nativeElement.value).toEqual('ADF_CLOUD_TASK_HEADER.PROPERTIES.PARENT_NAME_DEFAULT'); expect(valueEl.nativeElement.value).toEqual('ADF_CLOUD_TASK_HEADER.PROPERTIES.PARENT_NAME_DEFAULT');
}); });

4
lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts
View File

@@ -353,7 +353,7 @@ describe('TaskHeaderComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button'));
expect(valueEl.nativeElement.innerText.trim()).toBe('Nov 3, 2016'); expect(valueEl.nativeElement.innerText.trim()).toBe('Nov 3, 2016');
}); });
@@ -364,7 +364,7 @@ describe('TaskHeaderComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value .adf-datepicker-span-button'));
expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT'); expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT');
}); });