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

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

@@ -0,0 +1,50 @@
+<div class="flex items-center gap-2">
+	<span class="text-sm text-muted-foreground whitespace-nowrap">{{ label() }}</span>
+	<app-select
+		class="w-[160px]"
+		[options]="options()"
+		[value]="selectedValue()"
+		(valueChange)="onFieldChange($event)"
+		placeholder="Default"
+	/>
+	@if (sort(); as active) {
+	<app-button
+		appearance="text"
+		size="icon-sm"
+		[attr.aria-label]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
+		(clicked)="toggleDirection()"
+	>
+		@if (active.direction === "ASC") {
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="m5 12 7-7 7 7" />
+			<path d="M12 19V5" />
+		</svg>
+		} @else {
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="M12 5v14" />
+			<path d="m19 12-7 7-7-7" />
+		</svg>
+		}
+	</app-button>
+	}
+</div>

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

@@ -4,13 +4,13 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
+import { ButtonComponent } from "../../../components/ui/button/button";
 import {
 	SelectComponent,
 	type AppSelectOption,
-} from "../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
-import type { SortFieldConfig, SortState } from "../../utils/sort-utils";
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { SortFieldConfig, SortState } from "../utils/sort-utils";
 
 /** Sentinel value used in the select to represent "no sort". */
 const NONE_VALUE = "__none__";
@@ -27,7 +27,7 @@ const NONE_VALUE = "__none__";
 	selector: "app-sort-control",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, SelectComponent],
-	templateUrl: "./sort-control.component.html",
+	templateUrl: "./sort-control.html",
 })
 export class SortControlComponent {
 	/** Sortable fields to expose in the select. */

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/account-detail/account-detail-page.html

@@ -0,0 +1,164 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6" [attr.aria-busy]="loading()">
+	<app-object-breadcrumb
+		listPath="/accounts"
+		listLabel="Accounts"
+		[loading]="loading()"
+		[recordName]="recordName()"
+	/>
+
+	@if (loading()) {
+	<!-- Loading state -->
+	<app-skeleton class="h-8 w-56 mb-4" />
+	<app-card>
+		<app-card-content class="space-y-8">
+			<div class="space-y-4">
+				@for (row of skeletonRows; track row) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+				</div>
+				}
+			</div>
+			<app-separator />
+			<div class="space-y-4">
+				<app-skeleton class="h-7 w-48 py-2" />
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<app-skeleton class="h-12 w-full" />
+					<app-skeleton class="h-12 w-full" />
+				</div>
+			</div>
+		</app-card-content>
+	</app-card>
+	} @else if (error()) {
+	<!-- Error state -->
+	<app-alert
+		variant="destructive"
+		icon="error"
+		title="Failed to load account"
+		description="Something went wrong while loading this account. Please try again later."
+	/>
+	<div class="mt-4 flex gap-3">
+		<app-button appearance="outlined" (clicked)="goBack()">← Back</app-button>
+		<app-button appearance="outlined" (clicked)="reload()">Retry</app-button>
+	</div>
+	} @else if (notFound()) {
+	<!-- Not found state -->
+	<app-card>
+		<app-card-content class="flex flex-col items-center justify-center py-16 text-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-12 text-muted-foreground mb-4"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M12 17h.01" />
+				<path d="M10.1 9a2.4 2.4 0 0 1 3.9 1.9c0 1.5-2 2-2 3" />
+				<path d="M14.5 4.5 20 10l-2 2" />
+				<path d="M4 4h9l7 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" />
+			</svg>
+			<h2 class="text-lg font-semibold mb-1">Account not found</h2>
+			<p class="text-sm text-muted-foreground mb-6">
+				The account you're looking for doesn't exist or may have been deleted.
+			</p>
+			<app-button appearance="outlined" (clicked)="goBack()">← Go back</app-button>
+		</app-card-content>
+	</app-card>
+	} @else if (account()) {
+	<!-- Content -->
+	<h1 class="text-2xl font-bold mb-4">Account: {{ title() }}</h1>
+
+	<app-card>
+		<app-card-content class="space-y-8">
+			<!-- Top section -->
+			<div class="space-y-4">
+				@for (row of topRows(); track $index) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					@for (field of row; track field.label) {
+					<div>
+						<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+						<dd class="mt-0.5">
+							@if (field.value && field.telephone) {
+							<a [href]="'tel:' + field.value" class="underline">{{ field.value }}</a>
+							} @else { {{ field.value ?? "—" }} }
+						</dd>
+					</div>
+					}
+				</div>
+				}
+			</div>
+
+			<app-separator />
+
+			<!-- Additional Information -->
+			<app-collapsible title="Additional Information" [(open)]="additionalOpen">
+				<div class="space-y-4">
+					@for (row of additionalRows(); track $index) {
+					<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+						@for (field of row; track field.label) {
+						<div>
+							<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+							<dd class="mt-0.5">{{ field.value ?? "—" }}</dd>
+						</div>
+						}
+					</div>
+					}
+					<div>
+						<dt class="text-sm text-muted-foreground">Description</dt>
+						<dd class="mt-0.5">{{ description() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+
+			<!-- Address Information -->
+			<app-collapsible title="Address Information" [(open)]="addressOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Billing Address</dt>
+						<dd class="mt-0.5">
+							@if (billingAddress()) { @for (line of billingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Shipping Address</dt>
+						<dd class="mt-0.5">
+							@if (shippingAddress()) { @for (line of shippingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+			<!-- System Information -->
+			<app-collapsible title="System Information" [(open)]="systemOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Created By</dt>
+						<dd class="mt-0.5">{{ createdBy() ?? "—" }}</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Last Modified By</dt>
+						<dd class="mt-0.5">{{ lastModifiedBy() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+		</app-card-content>
+	</app-card>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/account-detail/account-detail-page.component.ts → angularextapp/src/app/pages/account-detail/account-detail-page.ts}

@@ -10,17 +10,14 @@ import { map } from "rxjs/operators";
 // Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
 // they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
 // page folder (app/features/account-search/ -> app/components/ui/).
-import { AlertComponent } from "../../components/ui/alert/alert.component";
-import { ButtonComponent } from "../../components/ui/button/button.component";
-import {
-	CardComponent,
-	CardContentComponent,
-} from "../../components/ui/card/card.component";
-import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible.component";
-import { SeparatorComponent } from "../../components/ui/separator/separator.component";
-import { SkeletonComponent } from "../../components/ui/skeleton/skeleton.component";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { ButtonComponent } from "../../components/ui/button/button";
+import { CardComponent, CardContentComponent } from "../../components/ui/card/card";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SeparatorComponent } from "../../components/ui/separator/separator";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
 // Object-search feature building blocks (Waves 1-2), two levels up.
-import { ObjectBreadcrumbComponent } from "../../features/object-search/components/object-breadcrumb/object-breadcrumb.component";
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
 import { createAsyncData } from "../../utils/async-data";
 import {
 	fieldValue,
@@ -66,8 +63,8 @@ interface Field {
 		SkeletonComponent,
 		ObjectBreadcrumbComponent,
 	],
-	templateUrl: "./account-detail-page.component.html",
-	styleUrl: "./account-detail-page.component.scss",
+	templateUrl: "./account-detail-page.html",
+	styleUrl: "./account-detail-page.scss",
 })
 export class AccountDetailPageComponent {
 	private readonly service = inject(AccountSearchService);

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/account-search/account-search-page.html

@@ -0,0 +1,111 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+	<app-object-breadcrumb listPath="/accounts" listLabel="Accounts" />
+
+	<h1 class="text-2xl font-bold mb-4">Search Accounts</h1>
+
+	<div class="flex flex-col lg:flex-row gap-6">
+		<!-- Sidebar — Filter Panel -->
+		<aside class="w-full lg:w-80 shrink-0">
+			<app-collapsible title="Filters" [(open)]="filtersOpen">
+				<div class="space-y-1">
+					<app-search-filter [config]="searchConfig" />
+					<app-text-filter [config]="nameConfig" />
+					<app-select-filter [config]="industryConfig()" />
+					<app-multi-select-filter [config]="typeConfig()" />
+					<app-numeric-range-filter [config]="revenueConfig" />
+					<app-date-filter [config]="createdConfig" filterType="datetime" />
+					<app-date-range-filter [config]="lastModifiedConfig" filterType="datetimerange" />
+				</div>
+			</app-collapsible>
+		</aside>
+
+		<!-- Main area — Sort + Results -->
+		<div class="flex-1 min-w-0">
+			<div class="flex flex-wrap items-center gap-2 mb-4">
+				<app-sort-control [sortFields]="sortConfigs" />
+				<app-active-filters />
+			</div>
+
+			<div class="min-h-132" [attr.aria-busy]="loading()">
+				@if (loading()) {
+				<app-skeleton class="h-5 w-30 mb-3" />
+				<div class="divide-y">
+					@for (row of skeletonRows(); track row) {
+					<div class="flex items-center justify-between py-3">
+						<div class="space-y-2">
+							<app-skeleton class="h-5 w-40" />
+							<app-skeleton class="h-4 w-28" />
+						</div>
+						<div class="space-y-2 flex flex-col items-end">
+							<app-skeleton class="h-4 w-24" />
+							<app-skeleton class="h-4 w-20" />
+						</div>
+					</div>
+					}
+				</div>
+				} @else if (error()) {
+				<p class="text-sm text-muted-foreground mb-3">0 accounts found</p>
+				<app-alert
+					variant="destructive"
+					icon="error"
+					title="Failed to load accounts"
+					description="Something went wrong while loading accounts. Please try again later."
+				/>
+				} @else if (nodes().length > 0) {
+				<p class="text-sm text-muted-foreground mb-3">{{ resultCountLabel() }}</p>
+				<ul class="divide-y">
+					@for (node of nodes(); track node.Id) {
+					<li>
+						<a
+							[routerLink]="['/accounts', node.Id]"
+							class="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
+						>
+							<div>
+								<span class="font-medium">{{ name(node) }}</span>
+								<p class="text-sm text-muted-foreground">{{ secondaryLine(node) }}</p>
+							</div>
+							<div class="text-right text-sm">
+								<p>{{ phone(node) }}</p>
+								<p class="text-muted-foreground">{{ ownerName(node) }}</p>
+							</div>
+						</a>
+					</li>
+					}
+				</ul>
+				} @else {
+				<div class="flex flex-col items-center justify-center py-16 text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-12 text-muted-foreground mb-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="m13.5 8.5-5 5" />
+						<path d="m8.5 8.5 5 5" />
+						<circle cx="11" cy="11" r="8" />
+						<path d="m21 21-4.3-4.3" />
+					</svg>
+					<h2 class="text-lg font-semibold mb-1">No accounts found</h2>
+					<p class="text-sm text-muted-foreground">
+						Try adjusting your filters or search criteria.
+					</p>
+				</div>
+				}
+			</div>
+
+			<!-- Pagination — always visible, disabled while loading or on error -->
+			<app-pagination-controls
+				[totalCount]="totalCount()"
+				[hasNextPage]="hasNextPage()"
+				[endCursor]="endCursor()"
+				[pageSizeOptions]="pageSizeOptions"
+				[disabled]="controlsDisabled()"
+			/>
+		</div>
+	</div>
+</div>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/account-search/account-search-page.component.ts → angularextapp/src/app/pages/account-search/account-search-page.ts}

@@ -8,21 +8,21 @@ import { RouterLink } from "@angular/router";
 // Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
 // they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
 // page folder (app/features/account-search/ -> app/components/ui/).
-import { AlertComponent } from "../../components/ui/alert/alert.component";
-import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible.component";
-import { SkeletonComponent } from "../../components/ui/skeleton/skeleton.component";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
 // Object-search feature building blocks (Waves 1-2), two levels up.
-import { ObjectBreadcrumbComponent } from "../../features/object-search/components/object-breadcrumb/object-breadcrumb.component";
-import { SortControlComponent } from "../../features/object-search/components/sort-control/sort-control.component";
-import { ActiveFiltersComponent } from "../../features/object-search/components/active-filters/active-filters.component";
-import { PaginationControlsComponent } from "../../features/object-search/components/pagination-controls/pagination-controls.component";
-import { SearchFilterComponent } from "../../features/object-search/components/filters/search-filter/search-filter.component";
-import { TextFilterComponent } from "../../features/object-search/components/filters/text-filter/text-filter.component";
-import { SelectFilterComponent } from "../../features/object-search/components/filters/select-filter/select-filter.component";
-import { MultiSelectFilterComponent } from "../../features/object-search/components/filters/multi-select-filter/multi-select-filter.component";
-import { NumericRangeFilterComponent } from "../../features/object-search/components/filters/numeric-range-filter/numeric-range-filter.component";
-import { DateFilterComponent } from "../../features/object-search/components/filters/date-filter/date-filter.component";
-import { DateRangeFilterComponent } from "../../features/object-search/components/filters/date-range-filter/date-range-filter.component";
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
+import { SortControlComponent } from "../../features/object-search/sort-control/sort-control";
+import { ActiveFiltersComponent } from "../../features/object-search/filters/active-filters";
+import { PaginationControlsComponent } from "../../features/object-search/pagination/pagination";
+import { SearchFilterComponent } from "../../features/object-search/filters/search-filter";
+import { TextFilterComponent } from "../../features/object-search/filters/text-filter";
+import { SelectFilterComponent } from "../../features/object-search/filters/select-filter";
+import { MultiSelectFilterComponent } from "../../features/object-search/filters/multi-select-filter";
+import { NumericRangeFilterComponent } from "../../features/object-search/filters/numeric-range-filter";
+import { DateFilterComponent } from "../../features/object-search/filters/date-filter";
+import { DateRangeFilterComponent } from "../../features/object-search/filters/date-range-filter";
 import {
 	ObjectSearchStateService,
 	type PaginationConfig,
@@ -109,7 +109,7 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
 		DateFilterComponent,
 		DateRangeFilterComponent,
 	],
-	templateUrl: "./account-search-page.component.html",
+	templateUrl: "./account-search-page.html",
 })
 export class AccountSearchPageComponent {
 	private readonly service = inject(AccountSearchService);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/change-password/change-password-page.component.ts → angularextapp/src/app/pages/change-password/change-password-page.ts}

@@ -6,10 +6,10 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { DataClient } from "../../api/data-client.service";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
 import {
 	API_ROUTES,
 	AUTH_PLACEHOLDERS,
@@ -32,7 +32,7 @@ import {
 	selector: "app-change-password-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [AuthFormComponent, FieldComponent, InputComponent],
-	templateUrl: "./change-password-page.component.html",
+	templateUrl: "./change-password-page.html",
 })
 export class ChangePasswordPageComponent extends ReactiveFormPageBase {
 	private readonly fb = inject(FormBuilder);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/forgot-password/forgot-password-page.component.ts → angularextapp/src/app/pages/forgot-password/forgot-password-page.ts}

@@ -6,10 +6,10 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { DataClient } from "../../api/data-client.service";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
 import {
 	API_ROUTES,
 	AUTH_PLACEHOLDERS,
@@ -43,7 +43,7 @@ function usernameValidator(control: AbstractControl): ValidationErrors | null {
 	selector: "app-forgot-password-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [AuthFormComponent, FieldComponent, InputComponent],
-	templateUrl: "./forgot-password-page.component.html",
+	templateUrl: "./forgot-password-page.html",
 })
 export class ForgotPasswordPageComponent extends ReactiveFormPageBase {
 	private readonly fb = inject(FormBuilder);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/home/home-page.component.ts → angularextapp/src/app/pages/home/home-page.ts}

@@ -8,8 +8,8 @@ import { Router } from "@angular/router";
 // Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
 // they land at uiBundles/<target>/src/app/components/ui/{button,input}/..., three levels
 // up from this page folder (app/features/account-search/ -> app/components/ui/).
-import { ButtonComponent } from "../../components/ui/button/button.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+import { ButtonComponent } from "../../components/ui/button/button";
+import { InputComponent } from "../../components/ui/input/input";
 
 /**
  * Account-search landing page. Mirrors the React `Home` page: a single search
@@ -24,7 +24,7 @@ import { InputComponent } from "../../components/ui/input/input.component";
 	selector: "app-home-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, InputComponent],
-	templateUrl: "./home-page.component.html",
+	templateUrl: "./home-page.html",
 })
 export class HomePageComponent {
 	private readonly router = inject(Router);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/home/home.component.spec.ts → angularextapp/src/app/pages/home/home.spec.ts}

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { HomeComponent } from './home.component';
+import { HomeComponent } from './home';
 
 describe('HomeComponent', () => {
 	beforeEach(async () => {

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/home/home.component.ts → angularextapp/src/app/pages/home/home.ts}

@@ -8,6 +8,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
 	selector: 'app-home',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './home.component.html',
+	templateUrl: './home.html',
 })
 export class HomeComponent {}

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/login/login-page.component.ts → angularextapp/src/app/pages/login/login-page.ts}

@@ -7,10 +7,10 @@ import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/cor
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { DataClient } from "../../api/data-client.service";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
 import {
 	API_ROUTES,
 	AUTH_PLACEHOLDERS,
@@ -33,7 +33,7 @@ import {
 	selector: "app-login-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [RouterLink, AuthFormComponent, FieldComponent, InputComponent],
-	templateUrl: "./login-page.component.html",
+	templateUrl: "./login-page.html",
 })
 export class LoginPageComponent extends ReactiveFormPageBase {
 	private readonly fb = inject(FormBuilder);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/not-found/not-found.component.spec.ts → angularextapp/src/app/pages/not-found/not-found.spec.ts}

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
-import { NotFoundComponent } from './not-found.component';
+import { NotFoundComponent } from './not-found';
 
 describe('NotFoundComponent', () => {
 	beforeEach(async () => {

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/not-found/not-found.component.ts → angularextapp/src/app/pages/not-found/not-found.ts}

@@ -10,6 +10,6 @@ import { RouterLink } from '@angular/router';
 	selector: 'app-not-found',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [RouterLink],
-	templateUrl: './not-found.component.html',
+	templateUrl: './not-found.html',
 })
 export class NotFoundComponent {}