@salesforce/templates 66.13.3 → 66.13.4

package/lib/templates/uiBundles/angularbasic/package.json

@@ -14,7 +14,9 @@
     "test": "ng test",
     "lint": "ng lint",
     "build:e2e": "ng build && node scripts/rewrite-e2e-assets.mjs",
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "graphql:codegen": "graphql-codegen"
   },
   "dependencies": {
     "@angular/animations": "^21.2.0",
@@ -48,7 +50,12 @@
     "tailwindcss": "^4.0.0",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.0.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "@graphql-eslint/eslint-plugin": "^4.1.0"
   },
   "overrides": {
     "undici": "^7.28.0"

package/lib/templates/uiBundles/angularbasic/scripts/get-graphql-schema.mjs

@@ -0,0 +1,69 @@
+/**
+ * Downloads the full GraphQL schema from a connected Salesforce org via introspection.
+ *
+ * Usage:
+ *   npm run graphql:schema
+ *   node scripts/get-graphql-schema.mjs [output-path]
+ *
+ * The default output path matches the schema location expected by codegen.yml
+ * and .graphqlrc.yml so that codegen and IDE tooling resolve it automatically.
+ */
+import { writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { getOrgInfo } from '@salesforce/ui-bundle/app';
+import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
+import { pruneSchema } from '@graphql-tools/utils';
+
+const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+const TARGET_ORG = process.env.SF_TARGET_ORG || undefined;
+
+async function executeSalesforceGraphQLQuery(query, variables, operationName) {
+	const orgInfo = await getOrgInfo(TARGET_ORG);
+	if (!orgInfo) {
+		throw new Error('Could not resolve a Salesforce org. Set SF_TARGET_ORG or a default org.');
+	}
+	const { rawInstanceUrl: instanceUrl, apiVersion, accessToken } = orgInfo;
+
+	const targetUrl = `${instanceUrl}/services/data/v${apiVersion}/graphql`;
+
+	console.log(`Executing introspection query against ${targetUrl}`);
+	const response = await fetch(targetUrl, {
+		method: 'POST',
+		headers: {
+			Authorization: `Bearer ${accessToken}`,
+			'Content-Type': 'application/json',
+			'X-Chatter-Entity-Encoding': 'false',
+		},
+		body: JSON.stringify({ query, variables, operationName }),
+	});
+
+	if (!response.ok) {
+		const errorText = await response.text();
+		throw new Error(
+			`Salesforce GraphQL request failed: ${response.status} ${response.statusText} - ${errorText}`,
+		);
+	}
+
+	return response.json();
+}
+
+try {
+	const outputPath = resolve(process.argv[2] || DEFAULT_SCHEMA_PATH);
+
+	const introspectionResult = await executeSalesforceGraphQLQuery(
+		getIntrospectionQuery(),
+		{},
+		'IntrospectionQuery',
+	);
+
+	const schema = buildClientSchema(introspectionResult.data);
+	const prunedSchema = pruneSchema(schema);
+	const sdl = printSchema(prunedSchema);
+
+	writeFileSync(outputPath, sdl);
+
+	console.log(`Schema saved to ${outputPath}`);
+} catch (error) {
+	console.error('Error:', error.message);
+	process.exit(1);
+}

package/lib/templates/uiBundles/angularbasic/src/app/app.routes.ts

@@ -4,9 +4,9 @@
  * For full license text, see the LICENSE.txt file
  */
 import { Routes } from '@angular/router';
-import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
-import { HomeComponent } from './pages/home/home.component';
-import { NotFoundComponent } from './pages/not-found/not-found.component';
+import { AppLayoutComponent } from './components/layout/app-layout/app-layout';
+import { HomeComponent } from './pages/home/home';
+import { NotFoundComponent } from './pages/not-found/not-found';
 
 export const routes: Routes = [
 	{

package/lib/templates/uiBundles/angularbasic/src/app/components/layout/app-layout/{app-layout.component.spec.ts → app-layout.spec.ts}

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

package/lib/templates/uiBundles/angularbasic/src/app/components/layout/app-layout/{app-layout.component.ts → app-layout.ts}

@@ -10,7 +10,7 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 	selector: 'app-layout',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [RouterLink, RouterLinkActive, RouterOutlet],
-	templateUrl: './app-layout.component.html',
+	templateUrl: './app-layout.html',
 })
 export class AppLayoutComponent {
 	readonly isOpen = signal(false);

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/alert/{alert.component.ts → alert.ts}

@@ -21,7 +21,7 @@ const VARIANT_CLASSES: Record<AppAlertVariant, string> = {
 	selector: 'app-alert',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [MatIconModule],
-	templateUrl: './alert.component.html',
+	templateUrl: './alert.html',
 	host: {
 		'data-slot': 'alert',
 		role: 'alert',

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/button/{button.component.ts → button.ts}

@@ -30,8 +30,8 @@ export type AppButtonSize =
 	selector: 'app-button',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [MatButtonModule, MatIconModule],
-	templateUrl: './button.component.html',
-	styleUrl: './button.component.scss',
+	templateUrl: './button.html',
+	styleUrl: './button.scss',
 })
 export class ButtonComponent {
 	readonly appearance = input<AppButtonAppearance>('filled');

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/card/{card.component.ts → card.ts}

@@ -26,7 +26,7 @@ export type AppCardSize = 'default' | 'sm';
 	imports: [MatCard],
 	template:
 		'<mat-card appearance="outlined" [class]="classes()" [class.app-card-sm]="size() === \'sm\'"><ng-content /></mat-card>',
-	styleUrl: './card.component.scss',
+	styleUrl: './card.scss',
 })
 export class CardComponent {
 	readonly size = input<AppCardSize>('default');

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/collapsible/{collapsible.component.ts → collapsible.ts}

@@ -15,7 +15,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 	selector: 'app-collapsible',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [MatExpansionModule],
-	templateUrl: './collapsible.component.html',
+	templateUrl: './collapsible.html',
 })
 export class CollapsibleComponent {
 	/** Two-way bindable expanded state. Supports `[(open)]`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-picker/{date-picker.component.ts → date-picker.ts}

@@ -18,8 +18,8 @@ import type { AppFieldSize } from '../field-size';
 	selector: 'app-date-picker',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
-	templateUrl: './date-picker.component.html',
-	styleUrl: './date-picker.component.scss',
+	templateUrl: './date-picker.html',
+	styleUrl: './date-picker.scss',
 })
 export class DatePickerComponent {
 	/** Two-way bindable date value. `null` clears the field. Supports `[(value)]`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-range-picker/{date-range-picker.component.ts → date-range-picker.ts}

@@ -21,8 +21,8 @@ export { DateRange } from '@angular/material/datepicker';
 	selector: 'app-date-range-picker',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
-	templateUrl: './date-range-picker.component.html',
-	styleUrl: './date-range-picker.component.scss',
+	templateUrl: './date-range-picker.html',
+	styleUrl: './date-range-picker.scss',
 })
 export class DateRangePickerComponent {
 	/** Two-way bindable range value. `null` clears the field. Supports `[(value)]`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/dialog/{dialog.component.ts → dialog.ts}

@@ -16,7 +16,7 @@ import { ChangeDetectionStrategy, Component, input, model, output } from '@angul
 	selector: 'app-dialog',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [CdkConnectedOverlay, CdkTrapFocus],
-	templateUrl: './dialog.component.html',
+	templateUrl: './dialog.html',
 })
 export class DialogComponent {
 	/** Two-way bindable open state. Supports `[(open)]`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/field/{field.component.ts → field.ts}

@@ -12,7 +12,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 @Component({
 	selector: 'app-field',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './field.component.html',
+	templateUrl: './field.html',
 	host: {
 		'data-slot': 'field',
 		class: 'flex flex-col gap-1.5',

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/input/{input.component.ts → input.ts}

@@ -14,8 +14,8 @@ import type { AppFieldSize } from '../field-size';
 	selector: 'app-input',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [FormsModule, MatFormFieldModule, MatInputModule],
-	templateUrl: './input.component.html',
-	styleUrl: './input.component.scss',
+	templateUrl: './input.html',
+	styleUrl: './input.scss',
 })
 export class InputComponent {
 	/** Two-way bindable value. Supports `[(value)]`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/label/{label.component.ts → label.ts}

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 @Component({
 	selector: 'app-label',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './label.component.html',
+	templateUrl: './label.html',
 })
 export class LabelComponent {
 	/** Optional `for` attribute forwarded to the underlying `<label>`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/paginator/{paginator.component.ts → paginator.ts}

@@ -14,7 +14,7 @@ import { MatPaginator, type PageEvent } from '@angular/material/paginator';
 	selector: 'app-paginator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [MatPaginator],
-	templateUrl: './paginator.component.html',
+	templateUrl: './paginator.html',
 })
 export class PaginatorComponent {
 	/** Total item count; Material derives the page count as `ceil(length / pageSize)`. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/popover/{popover.component.ts → popover.ts}

@@ -15,7 +15,7 @@ import { ChangeDetectionStrategy, Component, input, model } from '@angular/core'
 	selector: 'app-popover',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [CdkConnectedOverlay, CdkOverlayOrigin],
-	templateUrl: './popover.component.html',
+	templateUrl: './popover.html',
 })
 export class PopoverComponent {
 	/**

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/select/{select.component.ts → select.ts}

@@ -27,8 +27,8 @@ export interface AppSelectOption {
 	selector: 'app-select',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [FormsModule, MatFormFieldModule, MatSelectModule],
-	templateUrl: './select.component.html',
-	styleUrl: './select.component.scss',
+	templateUrl: './select.html',
+	styleUrl: './select.scss',
 })
 export class SelectComponent {
 	/** Two-way bindable single-select value. Ignored when `multiple` is set. */

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/separator/{separator.component.ts → separator.ts}

@@ -31,8 +31,8 @@ const ORIENTATION_CLASSES: Record<AppSeparatorOrientation, string> = {
 	selector: 'app-separator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [MatDivider],
-	templateUrl: './separator.component.html',
-	styleUrl: './separator.component.scss',
+	templateUrl: './separator.html',
+	styleUrl: './separator.scss',
 	host: {
 		'data-slot': 'separator',
 		'[attr.data-orientation]': 'orientation()',

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/skeleton/{skeleton.component.ts → skeleton.ts}

@@ -13,8 +13,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
 	selector: 'app-skeleton',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './skeleton.component.html',
-	styleUrl: './skeleton.component.scss',
+	templateUrl: './skeleton.html',
+	styleUrl: './skeleton.scss',
 	host: {
 		'data-slot': 'skeleton',
 		'aria-hidden': 'true',

package/lib/templates/uiBundles/angularbasic/src/app/pages/home/{home.component.spec.ts → 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/lib/templates/uiBundles/angularbasic/src/app/pages/home/{home.component.ts → 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/lib/templates/uiBundles/angularbasic/src/app/pages/not-found/{not-found.component.spec.ts → 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/lib/templates/uiBundles/angularbasic/src/app/pages/not-found/{not-found.component.ts → 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 {}