diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html index ea14834676..4d532411ae 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html @@ -1,13 +1,14 @@ - + +
{{ property.displayValue }} -
+ + + {{ property.label | translate }} +
- +
+ clear - -
- - - -
+ + {{ property.default | translate }} -
+
+ (removed)="removeValueFromList(idx)" + > {{ propertyValue }} cancel diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss index f389f07814..ea6cd6af6e 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -6,7 +6,6 @@ padding-bottom: 6px; line-height: 20px; color: var(--adf-metadata-property-panel-title-color); - border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); margin-top: 10px; &.adf-property-value-editable { @@ -42,7 +41,6 @@ .adf-dateitem-editable { cursor: pointer; width: 100%; - padding: 0 5px; /* stylelint-disable-next-line no-descending-specificity */ &-controls { @@ -62,7 +60,7 @@ transform: scale(0.8); } - .adf-datepicker-toggle { + .adf-datepicker-span-button { flex: 1 0 auto; font-size: 14px; } diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts index 82b4e5887d..963f80a325 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts @@ -28,6 +28,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { addMinutes } from 'date-fns'; import { NoopTranslateModule } from '../../../testing/noop-translate.module'; import { UnitTestingUtils } from '../../../testing/unit-testing-utils'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('CardViewDateItemComponent', () => { let loader: HarnessLoader; @@ -38,7 +39,7 @@ describe('CardViewDateItemComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopTranslateModule, CardViewDateItemComponent] + imports: [NoopTranslateModule, CardViewDateItemComponent, NoopAnimationsModule] }); appConfigService = TestBed.inject(AppConfigService); appConfigService.config.dateValues = { @@ -66,6 +67,7 @@ describe('CardViewDateItemComponent', () => { const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value'); + const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button'); it('should render the label and value', () => { fixture.detectChanges(); @@ -119,7 +121,7 @@ describe('CardViewDateItemComponent', () => { component.editable = true; fixture.detectChanges(); - expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY'); + expect(getDateTime().trim()).toBe('FAKE-DEFAULT-KEY'); }); it('should render value when editable:true', () => { @@ -128,7 +130,7 @@ describe('CardViewDateItemComponent', () => { component.property.editable = true; 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', () => { diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts index 76e7310c9c..bb1ab89ecf 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts @@ -41,6 +41,8 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; @Component({ providers: [ @@ -57,9 +59,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; MatIconModule, MatDatetimepickerModule, MatChipsModule, + MatInputModule, MatFormFieldModule, MatDatepickerModule, - MatSnackBarModule + MatSnackBarModule, + ReactiveFormsModule ], templateUrl: './card-view-dateitem.component.html', styleUrls: ['./card-view-dateitem.component.scss'], @@ -78,6 +82,8 @@ export class CardViewDateItemComponent extends BaseCardView = new FormControl(null); + private readonly destroyRef = inject(DestroyRef); constructor( diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html index 6ccd2dfc35..a81e25609b 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html @@ -1,36 +1,41 @@
-
{{ property.label | translate }} -
+
{{ (property.displayValue | async) | translate }} + data-automation-class="read-only-value" + > + {{ property.displayValue | async | translate }}
- + + {{ property.label | translate }} + - + [aria-label]="property.label | translate" + > + {{ 'CORE.CARDVIEW.NONE' | translate }} - + {{ option.label | translate }} @@ -42,7 +47,8 @@ + [floatLabel]="property.default ? 'always' : null" + > + }" + > {{ property.label | translate }} - - + + {{ option.label }} diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss index 530fd57b50..1ad1b29e64 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss @@ -34,7 +34,8 @@ } #{ms.$mat-select-trigger} { - padding: 6px 12px 6px 6px; + padding-left: 6px; + padding-right: 6px; } } } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts index eb47d42bd7..df05d022a5 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts @@ -173,10 +173,11 @@ describe('CardViewSelectItemComponent', () => { component.ngOnChanges({}); component.editable = true; fixture.detectChanges(); - + const not_editable_label = fixture.nativeElement.querySelector('.adf-property-label-not-editable'); const field = await testingUtils.getMatFormFieldByCSS('.adf-property-value'); - expect(await field.hasLabel()).toBeFalse(); + expect(await field.hasLabel()).toBeTrue(); + expect(not_editable_label).toBeNull(); }); }); diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html index d1851233a5..e4a2f3b827 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -5,7 +5,6 @@ [ngClass]="{ 'adf-property-read-only': !isEditable }" - [floatLabel]="'always'" > - + { fixture.detectChanges(); await fixture.whenStable(); - expect(getPropertyLabel()).toBe('My date label'); expect(getPropertyValueText()).toBe('6/14/17, 12:00 AM'); }); diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index 17feca2660..903c762f63 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/lib/core/src/lib/form/components/form-renderer.component.scss @@ -33,7 +33,7 @@ margin: 0; background-color: white; position: absolute; - width: 96%; + width: 98%; /* stylelint-disable-next-line declaration-no-important */ margin-left: 0 !important; /* stylelint-disable-next-line declaration-no-important */ diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html index 2bac168891..bbb97105fe 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html @@ -10,7 +10,7 @@ >
- + {{field.name | translate }}* diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html index 4a65cf937a..bfc050326d 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html @@ -10,7 +10,7 @@
+ [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : null"> {{ field.name | translate }} ({{ field.dateDisplayFormat }})* diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html index 730ef544be..66cb4a3b2c 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.html +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html @@ -1,5 +1,5 @@
- + diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html index 236c437b1d..d71962119b 100644 --- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html +++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html @@ -9,7 +9,7 @@
- + {{ field.name | translate }}* diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html index 1e746575b6..6b8991c6a9 100644 --- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html +++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html @@ -1,7 +1,7 @@
- + {{ field.name | translate }}* diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html index 1fe70f25fa..10f94ecc19 100644 --- a/lib/core/src/lib/form/components/widgets/number/number.widget.html +++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html @@ -9,7 +9,7 @@
- + {{ field.name | translate }}* diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html index ca458ac886..3f007d8eb8 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.html +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html @@ -8,7 +8,7 @@
- + {{ field.name | translate }}* diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts index 31832981e2..9f536731ab 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts @@ -143,7 +143,9 @@ describe('TaskHeaderCloudComponent', () => { await fixture.whenStable(); 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'); }); @@ -164,7 +166,9 @@ describe('TaskHeaderCloudComponent', () => { component.refreshData(); fixture.detectChanges(); 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'); }); @@ -172,7 +176,7 @@ describe('TaskHeaderCloudComponent', () => { component.taskDetails.processInstanceId = null; fixture.detectChanges(); 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'); }); diff --git a/lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts b/lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts index e7d53cd30f..7f95e9d6b1 100644 --- a/lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts +++ b/lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts @@ -353,7 +353,7 @@ describe('TaskHeaderComponent', () => { fixture.detectChanges(); 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'); }); @@ -364,7 +364,7 @@ describe('TaskHeaderComponent', () => { fixture.detectChanges(); 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'); });