refactor: filter and sheet modifications

projects/components/src/filtering/filter/filter-url.service.ts

@@ -23,6 +23,28 @@ export class FilterUrlService {
     private readonly filterParserLookupService: FilterParserLookupService
   ) {}
 
+  public getUrlFilteringStateChanges$(attributes: FilterAttribute[]): Observable<UrlFilteringState> {
+    return this.navigationService.navigation$.pipe(map(() => this.getUrlFilteringState(attributes)));
+  }
+
+  public getUrlFilteringState(attributes: FilterAttribute[]): UrlFilteringState {
+    const attributeMap = new Map(attributes.map(attribute => [attribute.name, attribute]));
+
+    return {
+      filters: this.getUrlFilters(attributes),
+      groupBy: this.getUrlGroupBy()
+        .map(attributeName => attributeMap.get(attributeName))
+        .filter((attribute): attribute is FilterAttribute => attribute !== undefined)
+    };
+  }
+
+  public setUrlFiltersAndGroupBy(filters: Filter[], groupBy: FilterAttribute[]): void {
+    this.navigationService.addQueryParametersToUrl({
+      [FilterUrlService.FILTER_QUERY_PARAM]: filters.length === 0 ? undefined : filters.map(f => f.urlString),
+      [FilterUrlService.GROUP_BY_QUERY_PARAM]: isEmpty(groupBy) ? undefined : [groupBy.map(g => g.name).toString()]
+    });
+  }
+
   public getUrlFiltersChanges$(attributes: FilterAttribute[]): Observable<Filter[]> {
     return this.navigationService.navigation$.pipe(map(() => this.getUrlFilters(attributes)));
   }
@@ -119,3 +141,8 @@ export class FilterUrlService {
       .find(splitFilter => splitFilter !== undefined);
   }
 }
+
+export interface UrlFilteringState {
+  filters: Filter[];
+  groupBy: FilterAttribute[];
+}

projects/components/src/overlay/overlay.service.ts

@@ -35,7 +35,10 @@ export class OverlayService {
       data: metadata
     });
 
-    popover.closeOnNavigation();
+    if (config.closeOnNavigation !== false) {
+      popover.closeOnNavigation();
+    }
+
     sheetRef.initialize(popover);
 
     this.setActiveSheetPopover(popover);
@@ -71,7 +74,6 @@ export class OverlayService {
     this.activeSheetPopover?.close();
 
     this.activeSheetPopover = popover;
-    this.activeSheetPopover.closeOnNavigation();
     this.sheetCloseSubscription = this.activeSheetPopover.closed$.subscribe(
       () => (this.activeSheetPopover = undefined)
     );

projects/components/src/overlay/sheet/default-sheet-ref.ts

@@ -29,4 +29,12 @@ export class DefaultSheetRef extends SheetRef {
     }
     this.popoverRef?.close();
   }
+
+  public show(): void {
+    this.popoverRef?.show();
+  }
+
+  public hide(): void {
+    this.popoverRef?.hide();
+  }
 }

projects/components/src/overlay/sheet/sheet.ts

@@ -8,6 +8,7 @@ export interface SheetOverlayConfig<TData = unknown> extends OverlayConfig {
   data?: TData;
   position?: PopoverFixedPositionLocation.Right | PopoverFixedPositionLocation.RightUnderHeader;
   closeOnEscapeKey?: boolean;
+  closeOnNavigation?: boolean;
   attachedTriggerTemplate?: TemplateRef<unknown>;
 }
 
@@ -24,4 +25,6 @@ export const SHEET_DATA = new InjectionToken<unknown>('SHEET_DATA');
 export abstract class SheetRef<TResult = unknown> {
   public abstract readonly closed$: Observable<TResult>;
   public abstract close(result?: TResult): void;
+  public abstract show(): void;
+  public abstract hide(): void;
 }

projects/components/src/select/select.component.ts

@@ -321,12 +321,12 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     }
 
     this.setSelection(item.value);
-    this.selectedChange.emit(this.selected);
-    this.propagateValueChangeToFormControl(this.selected);
+    this.propagateValue();
   }
 
   public onClearSelected(): void {
     this.setSelection();
+    this.propagateValue();
   }
 
   private setSelection(value?: V): void {
@@ -371,6 +371,11 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     this.disabled = isDisabled ?? false;
   }
 
+  private propagateValue(): void {
+    this.selectedChange.emit(this.selected);
+    this.propagateValueChangeToFormControl(this.selected);
+  }
+
   private propagateValueChangeToFormControl(value: V | undefined): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);