Merge branch 'main' into fix/shell-portal-translations

libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.html

@@ -2,11 +2,9 @@
   <p-dropdown
     inputId="columnGroupSelectionDropdown"
     *ngIf="(allGroupKeys$ | async)?.length"
-    (onClear)="clearGroupSelection()"
     (onChange)="changeGroupSelection($event)"
     [options]="(allGroupKeys$ | async) || []"
     [placeholder]="placeholderKey | translate"
-    [showClear]="selectedGroupKey !== defaultGroupKey"
     [(ngModel)]="selectedGroupKey"
     [ariaLabel]="'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate"
   >

libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.ts

@@ -20,6 +20,11 @@ export class ColumnGroupSelectionComponent implements OnInit {
   }
   set selectedGroupKey(value: string) {
     this.selectedGroupKey$.next(value)
+    if (this.selectedGroupKey === this.customGroupKey) {
+      this.componentStateChanged.emit({
+        activeColumnGroupKey: value,
+      })
+    }
   }
 
   columns$ = new BehaviorSubject<DataTableColumn[]>([])
@@ -51,13 +56,19 @@ export class ColumnGroupSelectionComponent implements OnInit {
           .filter((value, index, self) => self.indexOf(value) === index && value != null)
       )
     )
-    const activeColumns = this.columns.filter((c) =>
-      c.predefinedGroupKeys?.includes(this.selectedGroupKey$.getValue() ?? this.defaultGroupKey)
-    )
-    this.componentStateChanged.emit({
-      activeColumnGroupKey: this.selectedGroupKey,
-      displayedColumns: activeColumns,
-    })
+    if (this.selectedGroupKey === this.customGroupKey) {
+      this.componentStateChanged.emit({
+        activeColumnGroupKey: this.selectedGroupKey,
+      })
+    } else {
+      const activeColumns = this.columns.filter((c) =>
+        c.predefinedGroupKeys?.includes(this.selectedGroupKey$.getValue() ?? this.defaultGroupKey)
+      )
+      this.componentStateChanged.emit({
+        activeColumnGroupKey: this.selectedGroupKey,
+        displayedColumns: activeColumns,
+      })
+    }
   }
 
   changeGroupSelection(event: { value: string }) {
@@ -71,16 +82,4 @@ export class ColumnGroupSelectionComponent implements OnInit {
       displayedColumns: activeColumns,
     })
   }
-
-  clearGroupSelection() {
-    let activeColumns = this.columns
-    if (this.defaultGroupKey) {
-      activeColumns = this.columns.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
-    }
-    this.groupSelectionChanged.emit({ activeColumns, groupKey: this.defaultGroupKey })
-    this.componentStateChanged.emit({
-      activeColumnGroupKey: this.defaultGroupKey,
-      displayedColumns: activeColumns,
-    })
-  }
 }

libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts

@@ -39,6 +39,7 @@ export class CustomGroupColumnSelectorComponent implements OnInit {
       displayedColumns: this._displayedColumns,
     })
   }
+  @Input() customGroupKey = ''
   @Input() dialogTitle = ''
   @Input() dialogTitleKey = ''
   @Input() openButtonTitle = ''
@@ -139,6 +140,7 @@ export class CustomGroupColumnSelectorComponent implements OnInit {
           frozen: this.frozenActionColumnModel,
           position: this.actionColumnPositionModel,
         },
+        activeColumnGroupKey: this.customGroupKey,
       })
     }
   }

libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html

@@ -51,6 +51,7 @@
         *ngIf="layout === 'table'"
         [columns]="columns"
         [displayedColumns]="(displayedColumns$ | async) ?? []"
+        [customGroupKey]="customGroupKey"
         (columnSelectionChanged)="onColumnSelectionChange($event)"
         [frozenActionColumn]="frozenActionColumn"
         [actionColumnPosition]="actionColumnPosition"

libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html

@@ -18,7 +18,7 @@
     </ng-container>
     <div>
       <button
-        id="buttonDialogSecondaryButton"
+        id="{{dialogData.config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}"
         pButton
         *ngIf="dialogData.config.secondaryButtonIncluded"
         [icon]="dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''"
@@ -32,7 +32,7 @@
     </div>
     <div>
       <button
-        id="buttonDialogPrimaryButton"
+        id="{{dialogData.config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}"
         pButton
         autofocus
         [icon]="dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''"

libs/portal-integration-angular/src/lib/model/button-dialog.ts

@@ -22,6 +22,7 @@ import { PrimeIcon } from '@onecx/angular-accelerator'
  */
 export interface ButtonDialogButtonDetails {
   key: string
+  id?: string
   icon?: PrimeIcon
   parameters?: Record<string, unknown>
   tooltipKey?: string

libs/portal-layout-styles/src/styles/primeng/sass/theme/designer/components/panel/_panel.scss

@@ -13,6 +13,11 @@
 
     .p-panel-header-icon {
       @include action-icon();
+      &:focus {
+        outline: $actionIconFocusOutline;
+        outline-offset: $actionIconFocusOutlineOffset;
+        box-shadow: var(--focus-shadow);
+      }
     }
   }
 

libs/portal-layout-styles/src/styles/primeng/sass/theme/extensions/_calendar.scss

@@ -86,6 +86,18 @@
     }
   }
 
+  .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):focus {
+      outline: $calendarFocusOutline;
+      outline-offset: $calendarFocusOutlineOffset;
+      box-shadow: none;
+    }
+
+  .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):focus  {
+    outline: $calendarFocusOutline;
+    outline-offset: $calendarFocusOutlineOffset;
+    box-shadow: none;
+  }
+
   table {
     th {
       border-bottom: var(--divider);

libs/portal-layout-styles/src/styles/primeng/sass/variables/theme/_theme_light.scss

@@ -65,6 +65,8 @@ $actionIconHoverBg: rgba(0, 0, 0, 0.04);
 $actionIconHoverBorderColor: transparent;
 $actionIconHoverColor: $textSecondaryColor;
 $actionIconBorderRadius: 50%;
+$actionIconFocusOutline: $focusOutlineCustom;
+$actionIconFocusOutlineOffset: 0px;
 
 //input field (e.g. inputtext, spinner, inputmask)
 $inputPadding: 1rem 1rem;