inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-10 14:11:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-21703 Fix group form widget style

Browse Source
This commit is contained in:
Diogo Bastos
2024-04-10 14:29:11 +01:00
parent 735ed25ac5
commit a9f2d053b7
3 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
View File

@@ -1,23 +1,24 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
<div>
<label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<div *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div>
<div>
<adf-cloud-group [mode]="mode"
[title]="title"
[readOnly]="field.readOnly"
[validate]="validate"
[roles]="roles"
[searchGroupsControl]="search"
[required]="isRequired()"
(changedGroups)="onChangedGroup($event)"
[preSelectGroups]="preSelectGroup"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
[matTooltipPosition]="'above'"
[matTooltipShowDelay]="1000">
[title]="title"
[readOnly]="field.readOnly"
[validate]="validate"
[roles]="roles"
[searchGroupsControl]="search"
[required]="isRequired()"
(changedGroups)="onChangedGroup($event)"
[preSelectGroups]="preSelectGroup"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
[matTooltipPosition]="'above'"
[matTooltipShowDelay]="1000"
>
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</adf-cloud-group>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"

4
lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
View File

@@ -1,7 +1,6 @@
<form>
<mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()"
id="adf-group-cloud-title-id">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
<ng-content select="[label]"></ng-content>
<mat-chip-grid #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
<mat-chip-row
*ngFor="let group of selectedGroups"
@@ -20,6 +19,7 @@
[formControl]="searchGroupsControl"
[matAutocomplete]="auto"
[matChipInputFor]="groupChipList"
[placeholder]="title | translate"
[required]="required"
(focus)="setFocus(true)"
(blur)="setFocus(false); markAsTouched()"

13
lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
View File

@@ -86,11 +86,18 @@ describe('GroupCloudComponent', () => {
it('should populate placeholder when title is present', () => {
component.title = 'TITLE_KEY';
fixture.detectChanges();
const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id');
expect(matLabel.textContent).toEqual('TITLE_KEY');
const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-search-input"]');
expect(inputElement.placeholder).toEqual('TITLE_KEY');
});
it('should not populate placeholder when title is not present', () => {
fixture.detectChanges();
const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-search-input"]');
expect(inputElement.placeholder).toEqual('');
});
describe('Search group', () => {