[AAE-49015] - Keep removing mat-selectors

This commit is contained in:
VitoAlbano
2026-08-03 13:13:48 +01:00
parent d512fd2033
commit f619e4e817
5 changed files with 14 additions and 26 deletions
@@ -4,6 +4,7 @@
<mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container"> <mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount > 0; else withOutDisplayCount" > <ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
<mat-chip <mat-chip
class="adf-card-view-array-chip"
*ngFor="let item of items.slice(0, displayCount)" *ngFor="let item of items.slice(0, displayCount)"
(keyup.enter)="clicked()" (keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
@@ -14,6 +15,7 @@
</div> </div>
</mat-chip> </mat-chip>
<mat-chip <mat-chip
class="adf-card-view-array-chip"
*ngIf="items.length > displayCount" *ngIf="items.length > displayCount"
data-automation-id="card-arrayitem-more-chip" data-automation-id="card-arrayitem-more-chip"
[matMenuTriggerFor]="menu"> [matMenuTriggerFor]="menu">
@@ -22,6 +24,7 @@
</ng-container> </ng-container>
<ng-template #withOutDisplayCount> <ng-template #withOutDisplayCount>
<mat-chip <mat-chip
class="adf-card-view-array-chip"
*ngFor="let item of items" *ngFor="let item of items"
(keyup.enter)="clicked()" (keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
@@ -1,5 +1,3 @@
@use '../../../styles/mat-selectors' as ms;
.adf { .adf {
&-array-item-icon { &-array-item-icon {
margin-right: 5px; margin-right: 5px;
@@ -12,19 +10,12 @@
display: block; display: block;
} }
// <mat-card appearance="outlined"> already renders with no shadow (level0),
// so only the custom scroll/height layout remains on the ADF class.
&-array-item-more-chip-container { &-array-item-more-chip-container {
&#{ms.$mat-card} {
box-shadow: none;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
}
&-property-value {
#{ms.$mat-chip-list} {
padding-top: 6px;
}
}
&-card-view-array-item-container { &-card-view-array-item-container {
flex-direction: row; flex-direction: row;
@@ -35,7 +26,7 @@
border-color: var(--mat-sys-outline-variant); border-color: var(--mat-sys-outline-variant);
border-radius: 0; border-radius: 0;
#{ms.$mat-chip}:hover { .adf-card-view-array-chip:hover {
cursor: pointer; cursor: pointer;
} }
} }
@@ -1,5 +1,5 @@
<button <button
mat-button mat-icon-button
[matMenuTriggerFor]="menu" [matMenuTriggerFor]="menu"
aria-hidden="false" aria-hidden="false"
[attr.aria-label]="('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)" [attr.aria-label]="('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)"
@@ -8,11 +8,8 @@ $notification-item-height: 72px;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
&-notification-history-menu_button#{ms.$mat-button} { // <button mat-icon-button> already provides the 40px circular shape + zero padding.
border-radius: 90%; &-notification-history-menu_button {
padding: 0;
min-width: 40px;
height: 40px;
margin-top: 1px; margin-top: 1px;
.adf-notification-history-menu_button-icon { .adf-notification-history-menu_button-icon {
@@ -1,5 +1,3 @@
@use '../../../styles/mat-selectors' as ms;
.adf-assignment-header { .adf-assignment-header {
border-bottom: 1px solid var(--mat-sys-outline-variant); border-bottom: 1px solid var(--mat-sys-outline-variant);
padding: 6px 20px; padding: 6px 20px;
@@ -25,11 +23,10 @@
} }
} }
.adf-assignment-top-container#{ms.$mat-card} { // <mat-card> is already display:flex with no margin/padding; only the row-wrap
// layout + top border are ADF additions (Material default is flex-direction:column).
.adf-assignment-top-container {
border-top: 1px solid var(--mat-sys-outline-variant); border-top: 1px solid var(--mat-sys-outline-variant);
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: stretch; align-items: stretch;
} }