various minor updates/fix from downstream (#390)

src/app/common/dialog/dialog.model.ts

@@ -13,7 +13,7 @@ export class DialogReturn<T> {
 
 export function isDialogActionOK<T>() {
 	return (source$: Observable<DialogReturn<T>>) =>
-		source$.pipe(filter((result) => result.action === DialogAction.OK));
+		source$.pipe(filter((result) => result?.action === DialogAction.OK));
 }
 
 export function mapToDialogReturnData<T>() {

src/app/common/pipes/utc-date-pipe/utc-date-utils.service.ts

@@ -7,16 +7,23 @@ export class UtcDateUtils {
 		value: string | number | Date | DateTime | null | undefined,
 		format?: string
 	): string {
-		if (null != value) {
+		if (value) {
 			let luxonDate;
 			if (value instanceof DateTime) {
 				luxonDate = value;
 			} else if (value instanceof Date) {
 				luxonDate = DateTime.fromJSDate(value).toUTC();
 			} else if (typeof value === 'number') {
 				luxonDate = DateTime.fromMillis(value).toUTC();
-			} else if (typeof value === 'string') {
+			} else {
 				luxonDate = DateTime.fromISO(value).toUTC();
+
+				if (!luxonDate.isValid) {
+					luxonDate = DateTime.fromFormat(value, 'D').toUTC();
+				}
+				if (!luxonDate.isValid) {
+					luxonDate = DateTime.fromFormat(value, 'M-d-yyyy').toUTC();
+				}
 				if (!luxonDate.isValid) {
 					// converts a string of milliseconds into a number
 					value = +value;

src/app/common/table/asy-table-data-source.ts

@@ -86,7 +86,7 @@ export class AsyTableDataSource<T> extends DataSource<T> {
 				switchMap(([search, filter]) =>
 					pagingOptions$.pipe(map((pagingOptions) => [pagingOptions, search, filter]))
 				),
-				tap(([pagingOptions]) => {
+				tap(() => {
 					this.loading$.next(true);
 					this.pagingResults$.next(NULL_PAGING_RESULTS);
 				}),

src/app/common/table/columns/expander/asy-expander-column.component.html

@@ -4,7 +4,7 @@
 		@if (isExpandable()(index, item)) {
 			<div style="cursor: pointer" (click)="toggle(index, item)">
 				<span
-					class="fa-solid fa-2x fa-angle-down"
+					class="fa-solid fa-lg fa-angle-down"
 					[class.fa-flip-vertical]="isExpanded(index, item)"
 				></span>
 			</div>

src/app/common/table/columns/selection/asy-selection-column.component.html

@@ -9,7 +9,6 @@
 					[checked]="_isAllSelected$ | async"
 					(change)="_toggleAll()"
 				/>
-				<label class="form-check-label" for="table-select-all"></label>
 			</div>
 		}
 	</th>
@@ -23,10 +22,6 @@
 				[disabled]="!isSelectable()(_isMultiTemplateDataRows ? dataIndex : index, result)"
 				(change)="toggle(_isMultiTemplateDataRows ? dataIndex : index, result)"
 			/>
-			<label
-				class="form-check-label"
-				for="table-selected-{{ _isMultiTemplateDataRows ? dataIndex : index }}"
-			></label>
 		</div>
 	</td>
 </ng-container>

src/app/common/table/columns/text/text-column.component.html

@@ -12,6 +12,6 @@
 		</ng-template>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
-		{{ obj[name] }}
+		{{ obj[name] || defaultValue() }}
 	</td>
 </ng-container>

src/app/common/table/columns/text/text-column.component.ts

@@ -1,6 +1,6 @@
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
 import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.component';
@@ -12,4 +12,6 @@ import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.co
 	templateUrl: './text-column.component.html',
 	styleUrls: ['./text-column.component.scss']
 })
-export class TextColumnComponent<T> extends AsyAbstractValueColumnComponent<T> {}
+export class TextColumnComponent<T> extends AsyAbstractValueColumnComponent<T> {
+	readonly defaultValue = input('');
+}

src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html

@@ -24,7 +24,7 @@
 	cdkConnectedOverlay
 	[cdkConnectedOverlayOpen]="isOpen()"
 	[cdkConnectedOverlayOrigin]="trigger"
-	(overlayOutsideClick)="isOpen.set(isClickOnDateRangePicker($event))"
+	(overlayOutsideClick)="handleOutsideClick($event)"
 >
 	<div class="dropdown-menu px-3" cdkTrapFocus cdkTrapFocusAutoCapture>
 		<div class="form-check">
@@ -76,6 +76,7 @@
 			<div class="input-group-append">
 				<ng-select
 					id="dateDurationInput"
+					appendTo="body"
 					[(ngModel)]="duration"
 					[clearable]="false"
 					[disabled]="isCustom()"
@@ -101,20 +102,18 @@
 			/>
 			<label class="form-check-label" for="custom-date-filter-enabled">Custom Range</label>
 		</div>
-		<div class="mb-0">
-			<input
-				class="form-control"
-				type="text"
-				bsDaterangepicker
-				placeholder="Custom range..."
-				[(ngModel)]="customRange"
-				[bsConfig]="{
-					adaptivePosition: true,
-					containerClass: 'theme-default'
-				}"
-				[disabled]="!isCustom"
-				(ngModelChange)="onDateFilterChange()"
-			/>
-		</div>
+		<input
+			class="form-control"
+			type="text"
+			bsDaterangepicker
+			placeholder="Custom range..."
+			[(ngModel)]="customRange"
+			[bsConfig]="{
+				adaptivePosition: true,
+				containerClass: 'theme-default'
+			}"
+			[disabled]="!isCustom"
+			(ngModelChange)="onDateFilterChange()"
+		/>
 	</div>
 </ng-template>

src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.scss

@@ -3,9 +3,15 @@
 @import '../shared';
 
 .dropdown-menu {
-	width: 210px;
+	width: 244px;
+
+	> .form-check {
+		margin-left: $spacer * .5;
+	}
 
 	.input-group {
+		padding: 0;
+
 		::ng-deep .ng-select-container {
 			border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
 			min-width: 82px;

src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.ts

@@ -48,8 +48,12 @@ export class AsyHeaderDateFilterComponent extends AsyAbstractHeaderFilterCompone
 		super(_columnDef);
 	}
 
-	isClickOnDateRangePicker(event: Event) {
-		return ((event.target as Element).closest('bs-daterangepicker-container') ?? null) !== null;
+	handleOutsideClick(event: Event) {
+		const isDatePickerOrNgSelect =
+			((event.target as Element).closest('bs-daterangepicker-container, ng-dropdown-panel') ??
+				null) !== null;
+
+		this.isOpen.set(isDatePickerOrNgSelect);
 	}
 
 	onDateFilterChange() {

src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html

@@ -28,7 +28,7 @@
 	(overlayOutsideClick)="isOpen.set(false)"
 >
 	<div class="dropdown-menu d-flex flex-column" cdkTrapFocus cdkTrapFocusAutoCapture>
-		@if (showSearch()) {
+		@if (showSearch() || _options.length > showSearchMinOptions()) {
 			<div class="search mt-2">
 				<asy-search-input
 					placeholder="Search..."

src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.ts

@@ -11,6 +11,7 @@ import {
 	booleanAttribute,
 	inject,
 	input,
+	numberAttribute,
 	signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -60,8 +61,11 @@ export class AsyHeaderListFilterComponent extends AsyAbstractHeaderFilterCompone
 	readonly #titleCasePipe = inject(TitleCasePipe);
 	readonly #destroyRef = inject(DestroyRef);
 
-	readonly showSearch = input(false, { transform: booleanAttribute });
 	readonly showMatch = input(false, { transform: booleanAttribute });
+	readonly showSearch = input(false, { transform: booleanAttribute });
+	readonly showSearchMinOptions = input(Number.MAX_SAFE_INTEGER, {
+		transform: numberAttribute
+	});
 
 	readonly optionsLoading = signal(false);
 

src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html

@@ -15,5 +15,4 @@
 			</span>
 		}
 	</button>
-	<ng-content select="asy-header-filter"></ng-content>
 </div>