@salesforce/ui-bundle-template-app-angular-template-b2x 11.31.11 → 11.31.12

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/menu/auth-menu/auth-menu.html

@@ -0,0 +1,26 @@
+@if (loading()) {
+<app-skeleton class="size-8 rounded-full" />
+} @else {
+<button matIconButton [matMenuTriggerFor]="menu" aria-label="User menu">
+	<mat-icon>person</mat-icon>
+</button>
+
+<mat-menu #menu="matMenu" xPosition="before">
+	@if (isAuthenticated()) {
+	<div class="px-3 py-2 font-medium truncate">{{ user()?.name }}</div>
+	<hr />
+	<a mat-menu-item [routerLink]="routes.PROFILE.PATH">Edit Profile</a>
+	<ng-content select="[menuItems]" />
+	<button mat-menu-item type="button" (click)="onLogout()">Sign Out</button>
+	} @else {
+	<a mat-menu-item [routerLink]="routes.LOGIN.PATH">
+		<mat-icon>login</mat-icon>
+		<span>Log In</span>
+	</a>
+	<a mat-menu-item [routerLink]="routes.REGISTER.PATH">
+		<mat-icon>person_add</mat-icon>
+		<span>Register</span>
+	</a>
+	}
+</mat-menu>
+}

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/menu/auth-menu/auth-menu.component.ts → angularextapp/src/app/features/authentication/menu/auth-menu/auth-menu.ts}

@@ -8,7 +8,7 @@ import { RouterLink } from "@angular/router";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
-import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton.component";
+import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton";
 import { AuthService } from "../../auth/auth.service";
 import { ROUTES } from "../../config/authentication.config";
 
@@ -30,7 +30,7 @@ import { ROUTES } from "../../config/authentication.config";
 	selector: "app-auth-menu",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [RouterLink, MatButtonModule, MatIconModule, MatMenuModule, SkeletonComponent],
-	templateUrl: "./auth-menu.component.html",
+	templateUrl: "./auth-menu.html",
 })
 export class AuthMenuComponent {
 	private readonly authService = inject(AuthService);

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/session/session.html

@@ -0,0 +1,55 @@
+@if (showWarningModal()) {
+<app-dialog [open]="true" [closeOnBackdrop]="false">
+	<div
+		class="max-w-md"
+		role="alertdialog"
+		aria-labelledby="session-warning-title"
+		aria-describedby="session-warning-description"
+	>
+		<h2 id="session-warning-title" class="text-lg font-semibold">
+			{{ labels.sessionWarningTitle }}
+		</h2>
+		<p id="session-warning-description" class="text-sm text-muted-foreground mt-1">
+			{{ labels.sessionWarningMessage }}
+		</p>
+
+		<div class="flex flex-col items-center gap-4 py-6">
+			<time
+				[attr.datetime]="isoTime()"
+				role="timer"
+				aria-live="off"
+				aria-atomic="true"
+				aria-describedby="session-warning-description"
+				class="text-5xl font-bold text-center tabular-nums text-destructive"
+			>
+				{{ formattedTime() }}
+			</time>
+		</div>
+
+		<div class="flex gap-4 justify-end">
+			<app-button variant="outlined" (clicked)="onLogoutClick()">
+				{{ labels.logoutButton }}
+			</app-button>
+			<app-button variant="filled" (clicked)="onContinue()">
+				{{ labels.continueButton }}
+			</app-button>
+		</div>
+	</div>
+</app-dialog>
+} @if (showExpiredAlert()) {
+<div class="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-md px-4">
+	<app-status-alert
+		variant="error"
+		[title]="labels.sessionWarningTitle"
+		[message]="labels.invalidSessionMessage"
+	/>
+	<button
+		type="button"
+		class="sr-only"
+		[attr.aria-label]="labels.closeLabel"
+		(click)="onDismissAlert()"
+	>
+		{{ labels.closeLabel }}
+	</button>
+</div>
+}

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/session-timeout/session-timeout-validator/session-timeout-validator.component.ts → angularextapp/src/app/features/authentication/session/session.ts}

@@ -13,13 +13,13 @@ import {
 	signal,
 } from "@angular/core";
 import { Router } from "@angular/router";
-import { DialogComponent } from "../../../../components/ui/dialog/dialog.component";
-import { StatusAlertComponent } from "../../components/status-alert/status-alert.component";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
-import { AuthService } from "../../auth/auth.service";
-import { SessionTimeoutService } from "../session-timeout.service";
-import { LABELS, STORAGE_KEYS } from "../session-timeout.config";
-import { ROUTES } from "../../config/authentication.config";
+import { DialogComponent } from "../../../components/ui/dialog/dialog";
+import { StatusAlertComponent } from "../status-alert/status-alert";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { AuthService } from "../auth/auth.service";
+import { SessionTimeoutService } from "../utils/session-timeout.service";
+import { LABELS, STORAGE_KEYS } from "../utils/session-timeout.config";
+import { ROUTES } from "../config/authentication.config";
 
 /**
  * Session-timeout validator — the Angular port of the React
@@ -46,7 +46,7 @@ import { ROUTES } from "../../config/authentication.config";
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	providers: [SessionTimeoutService],
 	imports: [DialogComponent, StatusAlertComponent, ButtonComponent],
-	templateUrl: "./session-timeout-validator.component.html",
+	templateUrl: "./session.html",
 })
 export class SessionTimeoutValidatorComponent implements OnInit {
 	private readonly authService = inject(AuthService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/components/status-alert/status-alert.component.html → angularextapp/src/app/features/authentication/status-alert/status-alert.html}

@@ -1,7 +1,5 @@
 <app-alert [title]="title()" [class]="toneClass()">
-	@if (message()) {
-		{{ message() }}
-	} @else {
-		<ng-content />
+	@if (message()) { {{ message() }} } @else {
+	<ng-content />
 	}
 </app-alert>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/components/status-alert/status-alert.component.ts → angularextapp/src/app/features/authentication/status-alert/status-alert.ts}

@@ -4,7 +4,7 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { AlertComponent } from "../../../../components/ui/alert/alert.component";
+import { AlertComponent } from "../../../components/ui/alert/alert";
 
 /** Status banner variant conveying the tone of the message. */
 export type AppStatusAlertVariant = "error" | "success" | "info" | "warning";
@@ -22,7 +22,7 @@ export type AppStatusAlertVariant = "error" | "success" | "info" | "warning";
 	selector: "app-status-alert",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [AlertComponent],
-	templateUrl: "./status-alert.component.html",
+	templateUrl: "./status-alert.html",
 	host: {
 		"data-slot": "status-alert",
 	},

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/forms/submit-button/submit-button.component.html → angularextapp/src/app/features/authentication/submit-button/submit-button.html}

@@ -1,8 +1,5 @@
 <app-button type="submit" [disabled]="submitting() || disabled()" class="w-full">
 	@if (submitting()) {
-		<app-spinner [diameter]="16" aria-hidden="true" />
-		{{ loadingLabel() }}
-	} @else {
-		{{ label() }}
-	}
+	<app-spinner [diameter]="16" aria-hidden="true" />
+	{{ loadingLabel() }} } @else { {{ label() }} }
 </app-button>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/authentication/forms/submit-button/submit-button.component.ts → angularextapp/src/app/features/authentication/submit-button/submit-button.ts}

@@ -4,8 +4,8 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
-import { SpinnerComponent } from "../../../../components/ui/spinner/spinner.component";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { SpinnerComponent } from "../../../components/ui/spinner/spinner";
 
 /**
  * Submit button that reflects form submission state — the Angular port of the
@@ -20,8 +20,8 @@ import { SpinnerComponent } from "../../../../components/ui/spinner/spinner.comp
 	selector: "app-submit-button",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, SpinnerComponent],
-	templateUrl: "./submit-button.component.html",
-	styleUrl: "./submit-button.component.scss",
+	templateUrl: "./submit-button.html",
+	styleUrl: "./submit-button.scss",
 })
 export class SubmitButtonComponent {
 	/** Button text when not submitting. */

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/breadcrumb/breadcrumb.html

@@ -0,0 +1,54 @@
+<nav aria-label="Breadcrumb" class="mb-3">
+	<ol
+		class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
+	>
+		@if (includeHome()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		} @if (isDetailView()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="listPath()" class="hover:text-foreground transition-colors"
+				>{{ listLabel() }}</a
+			>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		<li class="inline-flex items-center gap-1.5">
+			@if (loading() && !recordName()) {
+			<app-skeleton class="h-4 w-32" />
+			} @else {
+			<span class="text-foreground font-normal" aria-current="page">{{ recordName() }}</span>
+			}
+		</li>
+		} @else {
+		<li class="inline-flex items-center gap-1.5">
+			<span class="text-foreground font-normal" aria-current="page">{{ listLabel() }}</span>
+		</li>
+		}
+	</ol>
+</nav>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/object-breadcrumb/object-breadcrumb.component.ts → angularextapp/src/app/features/object-search/breadcrumb/breadcrumb.ts}

@@ -5,7 +5,7 @@
  */
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
-import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton.component";
+import { SkeletonComponent } from "../../../components/ui/skeleton/skeleton";
 
 /**
  * Object-search breadcrumb — Home > Records list > (optional) Record name.
@@ -19,7 +19,7 @@ import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton.c
 	selector: "app-object-breadcrumb",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [RouterLink, SkeletonComponent],
-	templateUrl: "./object-breadcrumb.component.html",
+	templateUrl: "./breadcrumb.html",
 })
 export class ObjectBreadcrumbComponent {
 	/** Router path for the object list view (e.g. `/accounts`). */

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/active-filters.html

@@ -0,0 +1,23 @@
+@if (chips().length > 0) {
+<div class="flex flex-wrap gap-2">
+	@for (chip of chips(); track chip.field) {
+	<app-button
+		appearance="outlined"
+		size="sm"
+		iconEnd="close"
+		[ariaLabel]="'Remove filter ' + chip.label"
+		(clicked)="onRemove(chip.field)"
+	>
+		{{ chip.label }}
+	</app-button>
+	}
+	<app-button
+		appearance="destructive"
+		size="sm"
+		ariaLabel="Clear all filters"
+		(clicked)="onClearAll()"
+	>
+		Clear all
+	</app-button>
+</div>
+}

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/active-filters/active-filters.component.ts → angularextapp/src/app/features/object-search/filters/active-filters.ts}

@@ -4,9 +4,9 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
-import type { ActiveFilterValue } from "../../utils/filter-utils";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { ActiveFilterValue } from "../utils/filter-utils";
 
 /**
  * Format the display label for one active filter chip. Mirrors the React
@@ -56,7 +56,7 @@ function formatFilterLabel(filter: ActiveFilterValue): string {
 	selector: "app-active-filters",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent],
-	templateUrl: "./active-filters.component.html",
+	templateUrl: "./active-filters.html",
 })
 export class ActiveFiltersComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/date-filter/date-filter.component.ts → angularextapp/src/app/features/object-search/filters/date-filter.ts}

@@ -7,14 +7,14 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from "@an
 // Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
 // they land at uiBundles/<target>/src/app/components/ui/{date-picker,select}/..., four
 // levels up.
-import { DatePickerComponent } from "../../../../../components/ui/date-picker/date-picker.component";
+import { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
 import {
 	SelectComponent,
 	type AppSelectOption,
-} from "../../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import type { FilterFieldConfig, FilterFieldType } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Single-date filter — operator select ("After" / "Before") plus a date
@@ -37,7 +37,7 @@ const OPERATOR_OPTIONS: readonly AppSelectOption[] = [
 	selector: "app-date-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [DatePickerComponent, SelectComponent, FilterFieldWrapperComponent],
-	templateUrl: "./date-filter.component.html",
+	templateUrl: "./date-filter.html",
 })
 export class DateFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/date-range-filter/date-range-filter.component.ts → angularextapp/src/app/features/object-search/filters/date-range-filter.ts}

@@ -9,11 +9,11 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from "@an
 import {
 	DateRange,
 	DateRangePickerComponent,
-} from "../../../../../components/ui/date-range-picker/date-range-picker.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import type { FilterFieldConfig, FilterFieldType } from "../../../utils/filter-utils";
-import { toDate, toDateString } from "../date-filter/date-filter.component";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+} from "../../../components/ui/date-range-picker/date-range-picker";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../utils/filter-utils";
+import { toDate, toDateString } from "./date-filter";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Date range filter — a single two-ended range picker. Emits a `daterange`
@@ -28,7 +28,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-date-range-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [DateRangePickerComponent, FilterFieldWrapperComponent],
-	templateUrl: "./date-range-filter.component.html",
+	templateUrl: "./date-range-filter.html",
 })
 export class DateRangeFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/filter-field-wrapper/filter-field-wrapper.component.html → angularextapp/src/app/features/object-search/filters/filter-field-wrapper.html}

@@ -3,9 +3,9 @@
 	<ng-content />
 	<div class="min-h-4">
 		@if (error(); as err) {
-			<p class="text-xs text-red-600" role="alert">{{ err }}</p>
+		<p class="text-xs text-red-600" role="alert">{{ err }}</p>
 		} @else if (helpText(); as help) {
-			<p class="text-xs text-gray-500">{{ help }}</p>
+		<p class="text-xs text-gray-500">{{ help }}</p>
 		}
 	</div>
 </div>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/filter-field-wrapper/filter-field-wrapper.component.ts → angularextapp/src/app/features/object-search/filters/filter-field-wrapper.ts}

@@ -6,8 +6,8 @@
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/label/..., three levels up from this
-// filter folder (app/object-search/components/filters/ -> app/components/ui/).
-import { LabelComponent } from "../../../../../components/ui/label/label.component";
+// filter folder (app/object-search/filters/ -> app/components/ui/).
+import { LabelComponent } from "../../../components/ui/label/label";
 
 /**
  * Standard label + control + help/error scaffold shared by every filter
@@ -22,7 +22,7 @@ import { LabelComponent } from "../../../../../components/ui/label/label.compone
 	selector: "app-filter-field-wrapper",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [LabelComponent],
-	templateUrl: "./filter-field-wrapper.component.html",
+	templateUrl: "./filter-field-wrapper.html",
 })
 export class FilterFieldWrapperComponent {
 	/** Visible field label rendered above the control. */

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/multi-select-filter/multi-select-filter.component.ts → angularextapp/src/app/features/object-search/filters/multi-select-filter.ts}

@@ -4,11 +4,11 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
-import type { AppFieldSize } from "../../../../../components/ui/field-size";
-import { SelectComponent } from "../../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import type { AppFieldSize } from "../../../components/ui/field-size";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Multi-select picklist filter. All presentation (checkbox options, trigger
@@ -22,7 +22,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-multi-select-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [SelectComponent, FilterFieldWrapperComponent],
-	templateUrl: "./multi-select-filter.component.html",
+	templateUrl: "./multi-select-filter.html",
 })
 export class MultiSelectFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/numeric-range-filter/numeric-range-filter.component.ts → angularextapp/src/app/features/object-search/filters/numeric-range-filter.ts}

@@ -21,11 +21,11 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { FormsModule } from "@angular/forms";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Numeric range filter — paired `min` / `max` inputs whose committed values are
@@ -47,7 +47,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 		MatFormFieldModule,
 		MatInputModule,
 	],
-	templateUrl: "./numeric-range-filter.component.html",
+	templateUrl: "./numeric-range-filter.html",
 })
 export class NumericRangeFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/search-filter/search-filter.component.ts → angularextapp/src/app/features/object-search/filters/search-filter.ts}

@@ -17,11 +17,11 @@ import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Multi-field search filter — a debounced input whose value is applied via
@@ -35,7 +35,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-search-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [InputComponent, FilterFieldWrapperComponent],
-	templateUrl: "./search-filter.component.html",
+	templateUrl: "./search-filter.html",
 })
 export class SearchFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/select-filter/select-filter.component.ts → angularextapp/src/app/features/object-search/filters/select-filter.ts}

@@ -9,10 +9,10 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from "@an
 import {
 	SelectComponent,
 	type AppSelectOption,
-} from "../../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Single-value picklist filter — a select rendered from `config.options` with
@@ -27,7 +27,7 @@ const ALL_VALUE = "";
 	selector: "app-select-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [SelectComponent, FilterFieldWrapperComponent],
-	templateUrl: "./select-filter.component.html",
+	templateUrl: "./select-filter.html",
 })
 export class SelectFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/filters/text-filter/text-filter.component.ts → angularextapp/src/app/features/object-search/filters/text-filter.ts}

@@ -17,11 +17,11 @@ import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Text filter — free-text input that writes a `like %value%` clause via
@@ -36,7 +36,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-text-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [InputComponent, FilterFieldWrapperComponent],
-	templateUrl: "./text-filter.component.html",
+	templateUrl: "./text-filter.html",
 })
 export class TextFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/pagination-controls/pagination-controls.component.ts → angularextapp/src/app/features/object-search/pagination/pagination.ts}

@@ -5,8 +5,8 @@
  */
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
 import type { PageEvent } from "@angular/material/paginator";
-import { PaginatorComponent } from "../../../../components/ui/paginator/paginator.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
+import { PaginatorComponent } from "../../../components/ui/paginator/paginator";
+import { ObjectSearchStateService } from "../object-search-state.service";
 
 /**
  * Cursor-pagination bridge. Feeds the shared cursor state into the presentational
@@ -23,7 +23,7 @@ import { ObjectSearchStateService } from "../../object-search-state.service";
 	selector: "app-pagination-controls",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [PaginatorComponent],
-	templateUrl: "./pagination-controls.component.html",
+	templateUrl: "./pagination.html",
 })
 export class PaginationControlsComponent {
 	/** Total row count from the latest fetch; drives the paginator's range label. */

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/search-bar/search-bar.component.html → angularextapp/src/app/features/object-search/search-bar/search-bar.html}

@@ -45,11 +45,11 @@
 			</svg>
 			<span>Filters</span>
 			@if (nonSearchFilterCount() > 0) {
-				<span
-					class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
-				>
-					{{ nonSearchFilterCount() }}
-				</span>
+			<span
+				class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
+			>
+				{{ nonSearchFilterCount() }}
+			</span>
 			}
 		</app-button>
 		<div class="p-3 min-w-72 max-w-96 space-y-3">

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/features/object-search/components/search-bar/search-bar.component.ts → angularextapp/src/app/features/object-search/search-bar/search-bar.ts}

@@ -15,11 +15,11 @@ import {
 } from "@angular/core";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { debounceTime } from "rxjs/operators";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
-import { InputComponent } from "../../../../components/ui/input/input.component";
-import { PopoverComponent } from "../../../../components/ui/popover/popover.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
-import type { FilterFieldConfig } from "../../utils/filter-utils";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { InputComponent } from "../../../components/ui/input/input";
+import { PopoverComponent } from "../../../components/ui/popover/popover";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
 
 /** How long to wait after the last keystroke before writing to state. */
 const SEARCH_DEBOUNCE_MS = 300;
@@ -48,7 +48,7 @@ const SEARCH_DEBOUNCE_MS = 300;
 	selector: "app-search-bar",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, InputComponent, PopoverComponent],
-	templateUrl: "./search-bar.component.html",
+	templateUrl: "./search-bar.html",
 })
 export class SearchBarComponent implements OnInit {
 	/** Config for the multi-field search filter (its label, placeholder, etc.). */