refactor: replace ngx-bootstrap w/ ng-bootstrap

ng-bootstrap seems to be better maintained, uses standalone components, and better supports dark mode in Bootstrap 5.

package.json

@@ -28,13 +28,13 @@
     "@angular/platform-browser-dynamic": "^17.3.4",
     "@angular/router": "^17.3.4",
     "@fortawesome/fontawesome-free": "^6.2.1",
+    "@ng-bootstrap/ng-bootstrap": "~16.0.0",
     "@ng-select/ng-select": "~12.0.7",
     "@ng-web-apis/common": "^3.0.6",
     "@ng-web-apis/storage": "^3.0.6",
     "bootstrap": "^5.3.3",
     "lodash": "~4.17.21",
     "luxon": "~3.2.1",
-    "ngx-bootstrap": "~12.0.0",
     "roboto-fontface": "0.10",
     "rxjs": "~7.8.1",
     "socket.io-client": "^2.2.0",

src/app/app.config.ts

@@ -9,9 +9,6 @@ import {
 	withInMemoryScrolling
 } from '@angular/router';
 
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-
 import { provideCdkDialog } from './common/dialog';
 import { provideAdminFeature } from './core/admin';
 import { provideAuditFeature } from './core/audit';
@@ -35,7 +32,6 @@ const disableAnimations: boolean = window.matchMedia('(prefers-reduced-motion: r
 
 export const appConfig: ApplicationConfig = {
 	providers: [
-		importProvidersFrom(BsDatepickerModule.forRoot(), TooltipModule.forRoot()),
 		!disableAnimations ? provideAnimations() : provideNoopAnimations(),
 		provideHttpClient(
 			withInterceptors([

src/app/common/datepicker/datepicker-range-popup/datepicker-range-popup.component.html

@@ -0,0 +1,58 @@
+<div class="dp-hidden position-absolute">
+	<input
+		class="form-control"
+		name="datepicker"
+		autoClose="outside"
+		ngbDatepicker
+		outsideDays="hidden"
+		tabindex="-1"
+		#datepicker="ngbDatepicker"
+		[dayTemplate]="t"
+		[displayMonths]="2"
+		[startDate]="fromDate()!"
+		(dateSelect)="onDateSelection($event)"
+	/>
+	<ng-template let-date let-focused="focused" #t>
+		<span
+			class="custom-day"
+			[class.faded]="isHovered(date) || isInside(date)"
+			[class.focused]="focused"
+			[class.range]="isRange(date)"
+			(mouseenter)="hoveredDate.set(date)"
+			(mouseleave)="hoveredDate.set(null)"
+		>
+			{{ date.day }}
+		</span>
+	</ng-template>
+</div>
+<div class="input-group">
+	<input
+		class="form-control"
+		name="dpFromDate"
+		[value]="fromDateString()"
+		autocomplete="off"
+		placeholder="yyyy-mm-dd"
+		#dpFromDate
+		[disabled]="disabled()"
+		(input)="fromDate.set(validateInput(fromDate(), dpFromDate.value))"
+	/>
+	<span class="input-group-text">-</span>
+	<input
+		class="form-control"
+		name="dpToDate"
+		[value]="toDateString()"
+		autocomplete="off"
+		placeholder="yyyy-mm-dd"
+		#dpToDate
+		[disabled]="disabled()"
+		(input)="toDate.set(validateInput(toDate(), dpToDate.value))"
+	/>
+	<button
+		class="btn btn-outline-secondary"
+		type="button"
+		[disabled]="disabled()"
+		(click)="datepicker.toggle()"
+	>
+		<span class="fa-solid fa-calendar-days"></span>
+	</button>
+</div>

src/app/common/datepicker/datepicker-range-popup/datepicker-range-popup.component.scss

@@ -0,0 +1,31 @@
+.dp-hidden {
+	width: 0;
+	margin: 0;
+	border: none;
+	padding: 0;
+}
+
+.custom-day {
+	text-align: center;
+	padding: 0.25rem;
+	display: inline-block;
+	height: 2rem;
+	width: 2rem;
+}
+
+.custom-day.focused {
+	background-color: var(--bs-primary);
+	color: white;
+}
+
+.custom-day.range,
+.custom-day:hover {
+	background-color: var(--bs-primary);
+	color: white;
+}
+
+.custom-day.faded {
+	background-color: var(--bs-primary-bg-subtle);
+	color: var(--bs-body-color);
+}
+

src/app/common/datepicker/datepicker-range-popup/datepicker-range-popup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatepickerRangePopupComponent } from './datepicker-range-popup.component';
+
+describe('DatepickerRangePopupComponent', () => {
+	let component: DatepickerRangePopupComponent;
+	let fixture: ComponentFixture<DatepickerRangePopupComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [DatepickerRangePopupComponent]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(DatepickerRangePopupComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});