From c41e47e704b642dce1e9859b26b9295a95190049 Mon Sep 17 00:00:00 2001
From: John Rassa <john.rassa@bluehalo.com>
Date: Wed, 17 Jul 2024 14:19:50 -0400
Subject: [PATCH] refactor: rework asy-sort-header for improved rendering
 flexibility

---
 .../ago-date/ago-date-column.component.html   | 21 ++++----
 .../ago-date/ago-date-column.component.ts     |  4 +-
 .../columns/date/date-column.component.html   | 21 ++++----
 .../columns/date/date-column.component.ts     |  6 +--
 .../asy-expandable-list-column.component.html | 19 ++++---
 .../asy-expandable-list-column.component.scss | 21 +++++---
 .../columns/text/text-column.component.html   | 21 ++++----
 .../columns/text/text-column.component.ts     |  4 +-
 src/app/common/table/filter/_shared.scss      |  2 +
 .../asy-header-sort.component.html            | 16 ++++++
 .../asy-header-sort.component.scss}           | 12 ++---
 .../asy-header-sort.component.ts}             | 14 +++---
 .../asy-sort-header.component.html            | 18 -------
 src/app/common/table/sort/public-api.ts       |  2 +-
 .../list-cache-entries.component.ts           |  4 +-
 .../list-euas/admin-list-euas.component.html  |  8 ++-
 .../list-euas/admin-list-euas.component.ts    |  4 +-
 .../admin-list-feedback.component.html        | 12 +++--
 .../admin-list-feedback.component.ts          |  4 +-
 .../list-messages.component.html              |  4 +-
 .../list-messages/list-messages.component.ts  |  4 +-
 .../admin-list-users.component.html           |  4 +-
 .../list-users/admin-list-users.component.ts  |  4 +-
 .../list-audit-entries.component.html         | 50 ++++++++++++-------
 .../list-audit-entries.component.ts           |  4 +-
 .../list-team-members.component.ts            |  4 +-
 .../list-teams/list-sub-teams.component.ts    |  4 +-
 .../list-teams/list-teams.component.html      |  8 ++-
 .../teams/list-teams/list-teams.component.ts  |  4 +-
 29 files changed, 172 insertions(+), 131 deletions(-)
 create mode 100644 src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html
 rename src/app/common/table/sort/{asy-sort-header/asy-sort-header.component.scss => asy-header-sort/asy-header-sort.component.scss} (68%)
 rename src/app/common/table/sort/{asy-sort-header/asy-sort-header.component.ts => asy-header-sort/asy-header-sort.component.ts} (91%)
 delete mode 100644 src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html

diff --git a/src/app/common/table/columns/ago-date/ago-date-column.component.html b/src/app/common/table/columns/ago-date/ago-date-column.component.html
index 92883f4b..f362eb7e 100644
--- a/src/app/common/table/columns/ago-date/ago-date-column.component.html
+++ b/src/app/common/table/columns/ago-date/ago-date-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		<div class="text-nowrap" container="body" ngbTooltip="{{ obj[name] | utcDate: format() }}">
diff --git a/src/app/common/table/columns/ago-date/ago-date-column.component.ts b/src/app/common/table/columns/ago-date/ago-date-column.component.ts
index 712aac45..e13fc2a0 100644
--- a/src/app/common/table/columns/ago-date/ago-date-column.component.ts
+++ b/src/app/common/table/columns/ago-date/ago-date-column.component.ts
@@ -5,7 +5,7 @@ import { Component, booleanAttribute, input } from '@angular/core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 import { AgoDatePipe, UtcDatePipe } from '../../../pipes';
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { DateColumnComponent } from '../date/date-column.component';
 
 @Component({
@@ -15,7 +15,7 @@ import { DateColumnComponent } from '../date/date-column.component';
 		CommonModule,
 		CdkTableModule,
 		UtcDatePipe,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AgoDatePipe,
 		NgbTooltip
 	],
diff --git a/src/app/common/table/columns/date/date-column.component.html b/src/app/common/table/columns/date/date-column.component.html
index bf918206..af78c7e1 100644
--- a/src/app/common/table/columns/date/date-column.component.html
+++ b/src/app/common/table/columns/date/date-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] | utcDate: format() }}
diff --git a/src/app/common/table/columns/date/date-column.component.ts b/src/app/common/table/columns/date/date-column.component.ts
index f881a5ff..d72147c7 100644
--- a/src/app/common/table/columns/date/date-column.component.ts
+++ b/src/app/common/table/columns/date/date-column.component.ts
@@ -2,14 +2,14 @@ import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 
-import { UtcDatePipe } from '../../../pipes/utc-date-pipe/utc-date.pipe';
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { UtcDatePipe } from '../../../pipes';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.component';
 
 @Component({
 	selector: 'asy-date-column',
 	standalone: true,
-	imports: [CommonModule, CdkTableModule, UtcDatePipe, AsySortHeaderComponent],
+	imports: [CommonModule, CdkTableModule, UtcDatePipe, AsyHeaderSortComponent],
 	templateUrl: './date-column.component.html',
 	styleUrls: ['./date-column.component.scss']
 })
diff --git a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
index 6b752ea6..be06952d 100644
--- a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
+++ b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell *cdkHeaderCellDef>
-		<ng-template #defaultHeaderTemplate>
+		<div class="header-text">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</div>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td
 		class=""
diff --git a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.scss b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.scss
index a58374c0..cf9da921 100644
--- a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.scss
+++ b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.scss
@@ -1,13 +1,18 @@
 .list-column-collapsed {
-  .list-item:not(:first-child) {
-    display: none;
-
-  }
+	.list-item:not(:first-child) {
+		display: none;
+	}
 }
 
 .fa-angle-down {
-  transform: scale(1, -1);
-  .list-column-collapsed & {
-    transform: scale(1, 1);
-  }
+	transform: scale(1, -1);
+	.list-column-collapsed & {
+		transform: scale(1, 1);
+	}
+}
+
+.header-text {
+	display: inline-block;
+	position: relative;
+	top: -1px;
 }
diff --git a/src/app/common/table/columns/text/text-column.component.html b/src/app/common/table/columns/text/text-column.component.html
index 1a59c5f3..03775816 100644
--- a/src/app/common/table/columns/text/text-column.component.html
+++ b/src/app/common/table/columns/text/text-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] || defaultValue() }}
diff --git a/src/app/common/table/columns/text/text-column.component.ts b/src/app/common/table/columns/text/text-column.component.ts
index f39fd3da..3d9bfb9c 100644
--- a/src/app/common/table/columns/text/text-column.component.ts
+++ b/src/app/common/table/columns/text/text-column.component.ts
@@ -2,13 +2,13 @@ import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.component';
 
 @Component({
 	selector: 'asy-text-column',
 	standalone: true,
-	imports: [CommonModule, AsySortHeaderComponent, CdkTableModule],
+	imports: [CommonModule, AsyHeaderSortComponent, CdkTableModule],
 	templateUrl: './text-column.component.html',
 	styleUrls: ['./text-column.component.scss']
 })
diff --git a/src/app/common/table/filter/_shared.scss b/src/app/common/table/filter/_shared.scss
index 7ec4f4df..0c03445e 100644
--- a/src/app/common/table/filter/_shared.scss
+++ b/src/app/common/table/filter/_shared.scss
@@ -5,6 +5,8 @@ $filter-dropdown-font-size: 0.75rem !default;
 $filter-dropdown-max-height: 250px !default;
 
 button.dropdown-toggle {
+	position: relative;
+	top: -2px;
 	background: inherit;
 	border: none;
 	font: inherit;
diff --git a/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html
new file mode 100644
index 00000000..056c73d3
--- /dev/null
+++ b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html
@@ -0,0 +1,16 @@
+<button class="btn btn-text p-0" type="button">
+	<ng-content />
+
+	@if (sortable()) {
+		<span class="fa-stack">
+			<span
+				class="fa-solid fa-sort-desc fa-stack-1x low-opacity"
+				[class.sorted]="isSorted() && sortDir() === 'DESC'"
+			></span>
+			<span
+				class="fa-solid fa-sort-asc fa-stack-1x low-opacity"
+				[class.sorted]="isSorted() && sortDir() === 'ASC'"
+			></span>
+		</span>
+	}
+</button>
diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.scss b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.scss
similarity index 68%
rename from src/app/common/table/sort/asy-sort-header/asy-sort-header.component.scss
rename to src/app/common/table/sort/asy-header-sort/asy-header-sort.component.scss
index 0bee544c..ee73f486 100644
--- a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.scss
+++ b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.scss
@@ -1,11 +1,12 @@
 @import '../../../../../styles/shared';
 
+:host {
+	display: inline-block;
+}
+
 button {
 	background: inherit;
-	border: none;
 	font: inherit;
-	padding-top: 0;
-	padding-bottom: 0;
 }
 
 .fa-solid {
@@ -23,8 +24,3 @@ button {
 	line-height: 2px;
 	width: 22px;
 }
-
-.asy-sort-header-sortable {
-	cursor: pointer;
-	padding-right: 5px;
-}
diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.ts
similarity index 91%
rename from src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts
rename to src/app/common/table/sort/asy-header-sort/asy-header-sort.component.ts
index 3891f759..88ff1bcd 100644
--- a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts
+++ b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.ts
@@ -24,21 +24,20 @@ interface AsySortHeaderColumnDef {
 }
 
 @Component({
-	selector: '[asy-sort-header]',
-	templateUrl: './asy-sort-header.component.html',
-	styleUrls: ['./asy-sort-header.component.scss'],
+	selector: 'asy-header-sort',
+	templateUrl: './asy-header-sort.component.html',
+	styleUrls: ['./asy-header-sort.component.scss'],
 	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: {
-		class: 'asy-sort-header',
+		class: 'text-nowrap',
 		'(click)': '_handleClick()',
-		'[class.asy-sort-header-sorted]': 'isSorted()',
 		'[attr.aria-sort]': '_getAriaSortAttribute()'
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: []
 })
-export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
+export class AsyHeaderSortComponent implements AsySortable, OnDestroy, OnInit {
 	readonly #destroyRef = inject(DestroyRef);
 	readonly #changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -51,7 +50,8 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 	 * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
 	 * the column's name.
 	 */
-	@Input('asy-sort-header')
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input('sortId')
 	id: string;
 
 	/** Overrides the sort start value of the containing AsySort for this AsySortable. */
diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
deleted file mode 100644
index 456ee5c5..00000000
--- a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="text-nowrap">
-	<button class="btn btn-text px-0" type="button">
-		<ng-content />
-
-		@if (sortable()) {
-			<span class="fa-stack">
-				<span
-					class="fa-solid fa-sort-desc fa-stack-1x low-opacity"
-					[class.sorted]="isSorted() && sortDir() === 'DESC'"
-				></span>
-				<span
-					class="fa-solid fa-sort-asc fa-stack-1x low-opacity"
-					[class.sorted]="isSorted() && sortDir() === 'ASC'"
-				></span>
-			</span>
-		}
-	</button>
-</div>
diff --git a/src/app/common/table/sort/public-api.ts b/src/app/common/table/sort/public-api.ts
index bb85604d..eadf5b81 100644
--- a/src/app/common/table/sort/public-api.ts
+++ b/src/app/common/table/sort/public-api.ts
@@ -1,2 +1,2 @@
-export * from './asy-sort-header/asy-sort-header.component';
+export * from './asy-header-sort/asy-header-sort.component';
 export * from './asy-sort.directive';
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
index 32547014..47f0ab78 100644
--- a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
+++ b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
@@ -23,8 +23,8 @@ import {
 	ActionsMenuTemplateDirective,
 	AgoDateColumnComponent,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	PaginatorComponent,
@@ -47,7 +47,7 @@ import { CacheEntry } from '../cache-entry.model';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
 		JsonPipe,
diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
index cc0ad46b..04b864bb 100644
--- a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
+++ b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
@@ -45,7 +45,9 @@ <h1 skipTo>EUAs</h1>
 			>
 				<asy-text-column name="_id" header="ID" [sortable]="false" />
 				<ng-container cdkColumnDef="title">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Title</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Title</asy-header-sort>
+					</th>
 					<td class="hide-overflow" cdk-cell *cdkCellDef="let eua">
 						<a class="btn btn-link p-0" [routerLink]="['/admin/eua', eua._id]">
 							{{ eua.title }}
@@ -53,7 +55,9 @@ <h1 skipTo>EUAs</h1>
 					</td>
 				</ng-container>
 				<ng-container cdkColumnDef="text">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Text</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Text</asy-header-sort>
+					</th>
 					<td class="hide-overflow" cdk-cell *cdkCellDef="let eua">
 						{{ eua.text }}
 					</td>
diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts
index 9bd08e59..df0cc5a0 100644
--- a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts
+++ b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts
@@ -21,8 +21,8 @@ import {
 	ActionsMenuColumnComponent,
 	ActionsMenuTemplateDirective,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ColumnChooserComponent,
@@ -46,7 +46,7 @@ import { EuaService } from '../eua.service';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		SidebarComponent,
 		ColumnChooserComponent,
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
index 441a4ff9..cec93592 100644
--- a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
+++ b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
@@ -74,7 +74,9 @@ <h1 skipTo>System Feedback</h1>
 				<asy-ago-date-column name="created" header="Submitted Date" />
 				<asy-ago-date-column name="updated" />
 				<ng-container cdkColumnDef="type">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Type</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Type</asy-header-sort>
+					</th>
 					<td class="text-nowrap" cdk-cell *cdkCellDef="let feedback">
 						{{ feedback.type | titlecase }}
 					</td>
@@ -92,8 +94,8 @@ <h1 skipTo>System Feedback</h1>
 				<asy-text-column name="os" />
 				<asy-text-column name="url" header="Submitted From" />
 				<ng-container cdkColumnDef="status">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-						Status
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort> Status </asy-header-sort>
 						<asy-header-filter list-filter [options]="['New', 'Open', 'Closed']" />
 					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
@@ -148,7 +150,9 @@ <h1 skipTo>System Feedback</h1>
 					</td>
 				</ng-container>
 				<ng-container cdkColumnDef="assignee">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Assignee</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Assignee</asy-header-sort>
+					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
 						<button
 							class="btn btn-text dropdown-toggle p-0"
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
index 68822297..ec470f64 100644
--- a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
+++ b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
@@ -21,9 +21,9 @@ import {
 	AgoDateColumnComponent,
 	AsyFilterDirective,
 	AsyHeaderListFilterComponent,
+	AsyHeaderSortComponent,
 	AsyHeaderTextFilterComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ColumnChooserComponent,
@@ -46,7 +46,7 @@ import { AdminUsersService } from '../../user/admin-users.service';
 		OverlayModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyHeaderListFilterComponent,
 		AsyTableEmptyStateComponent,
 		SidebarComponent,
diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.html b/src/app/core/admin/messages/list-messages/list-messages.component.html
index 7be6b2e4..0a8c462a 100644
--- a/src/app/core/admin/messages/list-messages/list-messages.component.html
+++ b/src/app/core/admin/messages/list-messages/list-messages.component.html
@@ -32,7 +32,9 @@ <h1 skipTo>Messages</h1>
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
 			<ng-container cdkColumnDef="title">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Title</th>
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>Title</asy-header-sort>
+				</th>
 				<td cdk-cell *cdkCellDef="let message">
 					<a class="btn btn-link p-0" [routerLink]="['/admin/message', message._id]">
 						{{ message.title }}
diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.ts b/src/app/core/admin/messages/list-messages/list-messages.component.ts
index 92b556eb..775a225a 100644
--- a/src/app/core/admin/messages/list-messages/list-messages.component.ts
+++ b/src/app/core/admin/messages/list-messages/list-messages.component.ts
@@ -21,8 +21,8 @@ import {
 	ActionsMenuColumnComponent,
 	ActionsMenuTemplateDirective,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	DateColumnComponent,
@@ -43,7 +43,7 @@ import { Message, MessageService } from '../../../messages';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
 		CdkMenu,
diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.html b/src/app/core/admin/user/list-users/admin-list-users.component.html
index dad7e2a8..faaccc3a 100644
--- a/src/app/core/admin/user/list-users/admin-list-users.component.html
+++ b/src/app/core/admin/user/list-users/admin-list-users.component.html
@@ -49,7 +49,9 @@ <h1 skipTo>Users</h1>
 			>
 				<asy-text-column name="_id" header="ID" [sortable]="false" />
 				<ng-container cdkColumnDef="name">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Name</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Name</asy-header-sort>
+					</th>
 					<td class="text-nowrap" cdk-cell *cdkCellDef="let user">
 						<a class="btn btn-link p-0" [routerLink]="['/admin/user', user._id]">
 							{{ user.name }}
diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.ts b/src/app/core/admin/user/list-users/admin-list-users.component.ts
index e4bbaed8..87b869c8 100644
--- a/src/app/core/admin/user/list-users/admin-list-users.component.ts
+++ b/src/app/core/admin/user/list-users/admin-list-users.component.ts
@@ -29,8 +29,8 @@ import {
 	AsyExpandableListColumnComponent,
 	AsyFilterDirective,
 	AsyHeaderListFilterComponent,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ColumnChooserComponent,
@@ -59,7 +59,7 @@ import { UserRoleFilterDirective } from './user-role-filter.directive';
 		OverlayModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyHeaderListFilterComponent,
 		UserRoleFilterDirective,
 		NgClass,
diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
index 50745233..f46bd4b2 100644
--- a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
+++ b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
@@ -19,9 +19,11 @@ <h1 skipTo>Audit Logs</h1>
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
 			<ng-container cdkColumnDef="audit.actor">
-				<th asy-sort-header="audit.actor.name" cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-user"></span>
-					Actor
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort sortId="audit.actor.name">
+						<span class="fa-solid fa-user"></span>
+						Actor
+					</asy-header-sort>
 					<asy-header-filter audit-actor-filter typeahead-filter />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
@@ -29,9 +31,11 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="created">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-clock"></span>
-					Timestamp
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>
+						<span class="fa-solid fa-clock"></span>
+						Timestamp
+					</asy-header-sort>
 					<asy-header-filter date-filter />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
@@ -39,9 +43,11 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="audit.action">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-mouse-pointer"></span>
-					Action
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>
+						<span class="fa-solid fa-mouse-pointer"></span>
+						Action
+					</asy-header-sort>
 					<asy-header-filter audit-distinct-value-filter list-filter showSearch />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
@@ -49,9 +55,11 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="audit.auditType">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-tag"></span>
-					Type
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>
+						<span class="fa-solid fa-tag"></span>
+						Type
+					</asy-header-sort>
 					<asy-header-filter audit-distinct-value-filter list-filter showSearch />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
@@ -59,7 +67,7 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="audit.object">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Object</th>
+				<th cdk-header-cell *cdkHeaderCellDef><asy-header-sort>Object</asy-header-sort></th>
 				<td class="hide-overflow" cdk-cell *cdkCellDef="let entry">
 					<asy-audit-component
 						[auditObject]="entry.audit.object?.after ?? entry.audit.object"
@@ -86,9 +94,11 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="before">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-history"></span>
-					Before
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>
+						<span class="fa-solid fa-history"></span>
+						Before
+					</asy-header-sort>
 				</th>
 				<td class="hide-overflow" cdk-cell *cdkCellDef="let entry">
 					<asy-audit-component
@@ -116,9 +126,11 @@ <h1 skipTo>Audit Logs</h1>
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="message">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-					<span class="fa-solid fa-file-text"></span>
-					Message
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>
+						<span class="fa-solid fa-file-text"></span>
+						Message
+					</asy-header-sort>
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
 					{{ entry?.message }}
diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.ts b/src/app/core/audit/list-audit-entries/list-audit-entries.component.ts
index a561d6db..a57a7f91 100644
--- a/src/app/core/audit/list-audit-entries/list-audit-entries.component.ts
+++ b/src/app/core/audit/list-audit-entries/list-audit-entries.component.ts
@@ -21,9 +21,9 @@ import {
 	AsyFilterDirective,
 	AsyHeaderDateFilterComponent,
 	AsyHeaderListFilterComponent,
+	AsyHeaderSortComponent,
 	AsyHeaderTypeaheadFilterComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	PaginatorComponent
@@ -48,7 +48,7 @@ import { AuditDistinctValueFilterDirective } from './audit-distinct-value-filter
 		OverlayModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyHeaderTypeaheadFilterComponent,
 		AuditActorFilterDirective,
 		AuditObjectComponent,
diff --git a/src/app/core/teams/list-team-members/list-team-members.component.ts b/src/app/core/teams/list-team-members/list-team-members.component.ts
index b95dc384..d32d275c 100644
--- a/src/app/core/teams/list-team-members/list-team-members.component.ts
+++ b/src/app/core/teams/list-team-members/list-team-members.component.ts
@@ -36,8 +36,8 @@ import {
 	AgoDateColumnComponent,
 	AsyFilterDirective,
 	AsyHeaderListFilterComponent,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ListFilterOption,
@@ -67,7 +67,7 @@ import { TeamsService } from '../teams.service';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyHeaderListFilterComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
diff --git a/src/app/core/teams/list-teams/list-sub-teams.component.ts b/src/app/core/teams/list-teams/list-sub-teams.component.ts
index 53ecdcb9..f5bc09eb 100644
--- a/src/app/core/teams/list-teams/list-sub-teams.component.ts
+++ b/src/app/core/teams/list-teams/list-sub-teams.component.ts
@@ -9,8 +9,8 @@ import { SystemAlertComponent } from '../../../common/system-alert';
 import {
 	AgoDateColumnComponent,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	PaginatorComponent
@@ -32,7 +32,7 @@ import { BaseListTeamsComponent } from './base-list-teams.component';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
 		AgoDateColumnComponent
diff --git a/src/app/core/teams/list-teams/list-teams.component.html b/src/app/core/teams/list-teams/list-teams.component.html
index e7c03138..569ef0a1 100644
--- a/src/app/core/teams/list-teams/list-teams.component.html
+++ b/src/app/core/teams/list-teams/list-teams.component.html
@@ -37,7 +37,9 @@ <h1 skipTo>Teams</h1>
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
 			<ng-container cdkColumnDef="name">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Name</th>
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>Name</asy-header-sort>
+				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let team">
 					<a class="btn btn-link p-0" [routerLink]="['/team', team._id]">
 						{{ team.name }}
@@ -46,7 +48,9 @@ <h1 skipTo>Teams</h1>
 			</ng-container>
 			<asy-ago-date-column name="created" />
 			<ng-container cdkColumnDef="description">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Description</th>
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>Description</asy-header-sort>
+				</th>
 				<td cdk-cell *cdkCellDef="let team">
 					{{ team.description }}
 				</td>
diff --git a/src/app/core/teams/list-teams/list-teams.component.ts b/src/app/core/teams/list-teams/list-teams.component.ts
index f33844fc..e4944500 100644
--- a/src/app/core/teams/list-teams/list-teams.component.ts
+++ b/src/app/core/teams/list-teams/list-teams.component.ts
@@ -7,8 +7,8 @@ import { SystemAlertComponent } from '../../../common/system-alert';
 import {
 	AgoDateColumnComponent,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	DateColumnComponent,
@@ -29,7 +29,7 @@ import { BaseListTeamsComponent } from './base-list-teams.component';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
 		AgoDateColumnComponent,