inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-10335] Grouped input controls with radio buttons for search date range component (#11507)

Browse Source 
* [ACS-10335] Grouped input controls with radio buttons for search date range component

* [ACS-10335] Change role group to fieldset element
This commit is contained in:
AleksanderSklorz
2026-01-13 09:41:00 +01:00
committed by GitHub
parent 38070c210c
commit 0c3cdaa006
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
+12 -4
View File
@@ -5,9 +5,13 @@
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
</mat-radio-button> </mat-radio-button>
</span> </span>
<span class="adf-search-date-range-container-row"> <fieldset
class="adf-search-date-range-container-row"
aria-labelledby="adf-search-date-range-in-last-radio-button">
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-in-last"> <mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-in-last">
<span id="adf-search-date-range-in-last-radio-button">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
</span>
</mat-radio-button> </mat-radio-button>
<mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field" subscriptSizing="dynamic" floatLabel="always"> <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field" subscriptSizing="dynamic" floatLabel="always">
<mat-label id="adf-search-date-range-quantity-label">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.QUANTITY' | translate }}</mat-label> <mat-label id="adf-search-date-range-quantity-label">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.QUANTITY' | translate }}</mat-label>
@@ -26,10 +30,14 @@
<mat-option data-automation-id="date-range-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option> <mat-option data-automation-id="date-range-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</span> </fieldset>
<span class="adf-search-date-range-container-row adf-search-date-range-container-row-date"> <fieldset
class="adf-search-date-range-container-row adf-search-date-range-container-row-date"
aria-labelledby="adf-search-date-range-between-radio-button">
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between"> <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
<span id="adf-search-date-range-between-radio-button">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
</span>
</mat-radio-button> </mat-radio-button>
<mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic" floatLabel="always"> <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic" floatLabel="always">
<mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.DATE_RANGE' | translate }}</mat-label> <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.DATE_RANGE' | translate }}</mat-label>
@@ -47,6 +55,6 @@
<mat-error *ngIf="betweenEndDateFormControl.errors?.invalidDate">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.END_DATE.INVALID_FORMAT' | translate : { requiredFormat: dateFormat } }}</mat-error> <mat-error *ngIf="betweenEndDateFormControl.errors?.invalidDate">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.END_DATE.INVALID_FORMAT' | translate : { requiredFormat: dateFormat } }}</mat-error>
<mat-error *ngIf="betweenEndDateFormControl.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.END_DATE.REQUIRED' | translate }}</mat-error> <mat-error *ngIf="betweenEndDateFormControl.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.END_DATE.REQUIRED' | translate }}</mat-error>
</mat-form-field> </mat-form-field>
</span> </fieldset>
</mat-radio-group> </mat-radio-group>
</div> </div>
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
+3 -1
View File
@@ -13,8 +13,10 @@ adf-search-date-range {
&-row { &-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 21px; padding: 0 0 21px;
align-items: center; align-items: center;
border: 0;
margin: 0;
&-date { &-date {
margin-top: 8px; margin-top: 8px;