@salesforce/ui-bundle-template-feature-angular-authentication 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/README.md

@@ -0,0 +1,85 @@
+# Base Angular App
+
+Base Angular App is a template application that demonstrates how to build an Angular UI Bundle on the Salesforce platform with the Angular CLI, TypeScript, Tailwind, Spartan NG (shadcn/ui for Angular), and the Salesforce UI Bundle SDK. It provides a minimal shell (home, 404), routing with standalone components and signals, so feature apps can extend it via the patches pipeline.
+
+This UI Bundle lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+
+## Table of contents
+
+- [Run (development)](#run-development)
+- [Build](#build)
+- [Deploy](#deploy)
+- [Test](#test)
+- [Lint](#lint)
+
+## Run (development)
+
+From the UI Bundle directory (`force-app/main/default/uiBundles/base-angular-app`):
+
+```bash
+npm install
+npm run dev
+```
+
+This starts the Salesforce Angular dev server (`sf-angular-serve`).
+
+## Build
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run build
+```
+
+The production build is written to `dist/` inside the UI Bundle folder. Use `npm run watch` to rebuild on change in development mode. Deploy using the steps in [Deploy](#deploy).
+
+## Deploy
+
+From the **SFDX project root** (the directory that contains `force-app/`):
+
+1. Build the UI Bundle:
+
+   ```bash
+   cd force-app/main/default/uiBundles/base-angular-app && npm install && npm run build && cd -
+   ```
+
+2. Deploy the UI Bundle only:
+
+   ```bash
+   sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
+   ```
+
+   Or deploy all metadata:
+
+   ```bash
+   sf project deploy start --source-dir force-app --target-org <alias>
+   ```
+
+   Replace `<alias>` with your target org alias.
+
+## Test
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run test
+```
+
+This runs the unit test suite via `ng test`. For end-to-end tests:
+
+```bash
+npm run build:e2e
+npm run e2e
+```
+
+This builds with E2E asset rewrites and runs Playwright against the static build. Ensure Chromium is installed (`npx playwright install chromium` if needed).
+
+## Lint
+
+From the UI Bundle directory:
+
+```bash
+npm run lint
+```

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/angular.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false,
+    "cache": {
+      "enabled": false
+    }
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "feature-angular-authentication": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "css"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-esbuild:application",
+          "options": {
+            "outputPath": {
+              "base": "dist",
+              "browser": ""
+            },
+            "deployUrl": "./",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "plugins": []
+          },
+          "configurations": {
+            "production": {
+              "plugins": ["./esbuild/api-version.mjs"],
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all",
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                }
+              }
+            },
+            "development": {
+              "plugins": ["./esbuild/graphql-codegen.mjs"],
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-esbuild:dev-server",
+          "options": {
+            "middlewares": ["./middleware/html.mjs", "./middleware/proxy.mjs"]
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "feature-angular-authentication:build:production"
+            },
+            "development": {
+              "buildTarget": "feature-angular-authentication:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "src/**/*.graphql"]
+          }
+        }
+      }
+    }
+  }
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/codegen.yml

@@ -0,0 +1,95 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,ts}'
+generates:
+  src/app/api/graphql-operations-types.ts:
+    plugins:
+      - 'graphql-codegen-typescript-operation-types'
+      - 'typescript-operations'
+    config:
+      onlyOperationTypes: true
+      skipTypename: true
+      preResolveTypes: true
+      scalars:
+        # String-serialized scalars
+        JSON:
+          input: 'string'
+          output: 'string'
+        Date:
+          input: 'string'
+          output: 'string'
+        DateTime:
+          input: 'string'
+          output: 'string'
+        Time:
+          input: 'string'
+          output: 'string'
+        Email:
+          input: 'string'
+          output: 'string'
+        Url:
+          input: 'string'
+          output: 'string'
+        PhoneNumber:
+          input: 'string'
+          output: 'string'
+        Picklist:
+          input: 'string'
+          output: 'string'
+        MultiPicklist:
+          input: 'string'
+          output: 'string'
+        TextArea:
+          input: 'string'
+          output: 'string'
+        LongTextArea:
+          input: 'string'
+          output: 'string'
+        RichTextArea:
+          input: 'string'
+          output: 'string'
+        EncryptedString:
+          input: 'string'
+          output: 'string'
+        Base64:
+          input: 'string'
+          output: 'string'
+        IdOrRef:
+          input: 'string'
+          output: 'string'
+        # BigDecimal-serialized scalars (accepts number or string, returns number)
+        Currency:
+          input: 'number | string'
+          output: 'number'
+        BigDecimal:
+          input: 'number | string'
+          output: 'number'
+        Double:
+          input: 'number | string'
+          output: 'number'
+        Percent:
+          input: 'number | string'
+          output: 'number'
+        Longitude:
+          input: 'number | string'
+          output: 'number'
+        Latitude:
+          input: 'number | string'
+          output: 'number'
+        # Integer-like scalars
+        Long:
+          input: 'number'
+          output: 'number'
+        BigInteger:
+          input: 'number'
+          output: 'number'
+        Short:
+          input: 'number'
+          output: 'number'
+        Byte:
+          input: 'number'
+          output: 'number'
+        Char:
+          input: 'number'
+          output: 'number'
+overwrite: true
+ignoreNoDocuments: true

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/components.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "node_modules/@spartan-ng/cli/src/generators/ui/schema.json",
+  "componentsPath": "src/app/shared",
+  "importAlias": "@spartan-ng/styles",
+  "style": "nova"
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/e2e/app.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('base-angular-app', () => {
+	test('home page loads and shows welcome content', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+		await expect(page.getByText('Welcome to your Angular application.')).toBeVisible();
+	});
+
+	test('not found route shows 404', async ({ page }) => {
+		await page.goto('/non-existent-route');
+		await expect(page.getByRole('heading', { name: '404' })).toBeVisible();
+		await expect(page.getByText('Page not found')).toBeVisible();
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/esbuild/api-version.mjs

@@ -0,0 +1,17 @@
+/**
+ * Build-time substitution of `__SF_API_VERSION__` (production + main app code in dev).
+ *
+ * Resolves the connected org's API version (from `sf` CLI session) once at
+ * builder startup and injects it via esbuild's `define`. Falls back to "65.0"
+ * if no session is available — matches @salesforce/platform-sdk's default.
+ *
+ * In `ng serve`, this plugin runs on the application esbuild pass but does NOT
+ * reach Vite's optimizeDeps prebundle of node_modules. `scripts/dev.mjs` covers
+ * that gap by passing the same value via `ng serve --define`.
+ *
+ * Referenced from angular.json: architect.build.options.plugins[].
+ */
+import { createApiVersionPlugin } from '@salesforce/angular-plugin-ui-bundle';
+
+const { plugin } = await createApiVersionPlugin();
+export default plugin;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/esbuild/graphql-codegen.mjs

@@ -0,0 +1,13 @@
+/**
+ * GraphQL Codegen esbuild plugin — runs codegen on build start.
+ *
+ * Resolves GraphQL operations into typed TypeScript at build time using the
+ * project's `codegen.yml` configuration. Re-runs on every rebuild during
+ * `ng serve` so generated types stay in sync with schema/document changes.
+ *
+ * Referenced from angular.json: architect.build.options.plugins[].
+ */
+import { createGraphQLCodegenPlugin } from '@salesforce/angular-plugin-ui-bundle';
+
+const plugin = createGraphQLCodegenPlugin();
+export default plugin;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/eslint-plugin-angular-graphql.js

@@ -0,0 +1,148 @@
+/**
+ * eslint-plugin-angular-graphql.js
+ *
+ * Custom ESLint plugin with composite processor that enables BOTH:
+ * - Angular inline template linting (processInlineTemplates)
+ * - GraphQL tagged template literal linting (@graphql-eslint processor)
+ *
+ * ESLint only allows one processor per file type. This plugin calls both
+ * processors under the hood, returning the source code only once to avoid
+ * duplicate TypeScript lint messages.
+ *
+ * Usage:
+ *   import { createPlugin } from './eslint-plugin-angular-graphql.js';
+ *   const plugin = createPlugin({ schemaPath: '/absolute/path/to/schema.graphql' });
+ *
+ * Safety assumptions (verified against source):
+ * - Neither processor clones source messages in postprocess (object identity dedup works)
+ * - gql tags do not appear inside inline template strings (autofix ranges non-overlapping)
+ * - Both processors store internal state keyed by filePath (or derived from it)
+ */
+import { existsSync } from 'node:fs';
+import angular from 'angular-eslint';
+import graphqlPlugin from '@graphql-eslint/eslint-plugin';
+
+const angularProcessor = angular.processInlineTemplates;
+const graphqlProcessor = graphqlPlugin.processor;
+
+// Track block counts per file for postprocess message routing
+const blockCountsMap = new Map();
+
+const compositeProcessor = {
+	meta: {
+		name: 'angular-graphql/composite',
+		version: '1.0.0',
+	},
+	supportsAutofix: true,
+
+	preprocess(code, filePath) {
+		// Call both preprocessors — this populates their internal state maps
+		// Angular returns: [source, ...htmlBlocks] (source FIRST)
+		const angularResult = angularProcessor.preprocess(code, filePath);
+		// GraphQL returns: [...gqlBlocks, source] (source LAST)
+		const graphqlResult = graphqlProcessor.preprocess(code, filePath);
+
+		// Extract blocks (excluding source) from each
+		const htmlBlocks = angularResult.length > 1 ? angularResult.slice(1) : [];
+		const gqlBlocks = graphqlResult.length > 1 ? graphqlResult.slice(0, -1) : [];
+
+		// Store counts for postprocess routing
+		blockCountsMap.set(filePath, {
+			gqlCount: gqlBlocks.length,
+			htmlCount: htmlBlocks.length,
+		});
+
+		// Return unified: [gqlBlocks..., htmlBlocks..., source]
+		// Source appears exactly ONCE at the end
+		return [...gqlBlocks, ...htmlBlocks, code];
+	},
+
+	postprocess(messages, filePath) {
+		const { gqlCount, htmlCount } = blockCountsMap.get(filePath) || { gqlCount: 0, htmlCount: 0 };
+		blockCountsMap.delete(filePath);
+
+		const sourceIndex = gqlCount + htmlCount;
+		const sourceMessages = messages[sourceIndex] || [];
+
+		// Short-circuit: neither processor extracted blocks
+		if (gqlCount === 0 && htmlCount === 0) {
+			return sourceMessages;
+		}
+
+		// Short-circuit: only Angular had blocks
+		if (gqlCount === 0) {
+			const angularMessages = [sourceMessages, ...messages.slice(0, htmlCount)];
+			return angularProcessor.postprocess(angularMessages, filePath);
+		}
+
+		// Short-circuit: only GraphQL had blocks
+		if (htmlCount === 0) {
+			const gqlMessages = [...messages.slice(0, gqlCount), sourceMessages];
+			return graphqlProcessor.postprocess(gqlMessages, filePath);
+		}
+
+		// Both had blocks — route to each postprocess and merge
+		// GraphQL expects: [gqlBlock0Msgs, ..., gqlBlockNMsgs, sourceMessages]
+		const gqlInput = [...messages.slice(0, gqlCount), sourceMessages];
+		const gqlResult = graphqlProcessor.postprocess(gqlInput, filePath);
+
+		// Angular expects: [sourceMessages, htmlBlock0Msgs, ..., htmlBlockMMsgs]
+		const angularInput = [sourceMessages, ...messages.slice(gqlCount, gqlCount + htmlCount)];
+		const angularResult = angularProcessor.postprocess(angularInput, filePath);
+
+		// Deduplicate source messages (both postprocessors pass them through by reference)
+		const sourceSet = new Set(sourceMessages);
+		const gqlOnly = gqlResult.filter((m) => !sourceSet.has(m));
+
+		// angularResult = [...sourceMessages, ...adjustedHtmlMessages]
+		// gqlOnly = [...adjustedGqlMessages] (source messages filtered out)
+		return [...angularResult, ...gqlOnly].sort((a, b) => a.line - b.line || a.column - b.column);
+	},
+};
+
+/**
+ * Factory: pass schemaPath, get back a plugin with configs ready to spread.
+ * - If schema exists → composite processor (Angular + GraphQL) + GraphQL rules
+ * - If no schema → Angular-only inline template processor, no GraphQL rules
+ */
+export function createPlugin({ schemaPath } = {}) {
+	const schemaExists = !!(schemaPath && existsSync(schemaPath));
+
+	const configs = [
+		{
+			files: ['**/*.ts'],
+			processor: schemaExists ? compositeProcessor : angularProcessor,
+		},
+		...(schemaExists
+			? [
+					{
+						files: ['**/*.graphql'],
+						languageOptions: {
+							parser: graphqlPlugin.parser,
+							parserOptions: {
+								graphQLConfig: {
+									schema: schemaPath,
+									documents: 'src/**/*.ts',
+								},
+							},
+						},
+						plugins: {
+							'@graphql-eslint': graphqlPlugin,
+						},
+						rules: {
+							'@graphql-eslint/no-anonymous-operations': 'error',
+							'@graphql-eslint/no-duplicate-fields': 'error',
+							'@graphql-eslint/known-fragment-names': 'error',
+							'@graphql-eslint/no-undefined-variables': 'error',
+							'@graphql-eslint/no-unused-variables': 'error',
+						},
+					},
+				]
+			: []),
+	];
+
+	return {
+		meta: { name: 'eslint-plugin-angular-graphql', version: '1.0.0' },
+		configs,
+	};
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/eslint.config.js

@@ -0,0 +1,76 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import angular from 'angular-eslint';
+import tseslint from 'typescript-eslint';
+import { createPlugin } from './eslint-plugin-angular-graphql.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const schemaPath = resolve(__dirname, '../../../../../schema.graphql');
+const angularGraphqlPlugin = createPlugin({ schemaPath });
+
+export default tseslint.config(
+	// Global ignores
+	{
+		ignores: [
+			'dist/**/*',
+			'.angular/**/*',
+			'coverage/**/*',
+			'node_modules/**/*',
+			// Vendored Spartan primitives use upstream hlm*/brn* selectors and are
+			// not authored here, so they can't satisfy the app-prefix/a11y rules.
+			'**/shared/**',
+		],
+	},
+	// TypeScript files
+	{
+		files: ['**/*.ts'],
+		extends: [
+			js.configs.recommended,
+			...tseslint.configs.recommended,
+			...angular.configs.tsRecommended,
+		],
+		rules: {
+			'@angular-eslint/directive-selector': [
+				'error',
+				{
+					type: 'attribute',
+					prefix: 'app',
+					style: 'camelCase',
+				},
+			],
+			'@angular-eslint/component-selector': [
+				'error',
+				{
+					type: 'element',
+					prefix: 'app',
+					style: 'kebab-case',
+				},
+			],
+			// The UI wrapper components (app-button, app-card, …) intentionally
+			// alias an input to `class` so callers can write `class="…"` on the host
+			// and have it forward to the inner Material element. Allow that one name.
+			'@angular-eslint/no-input-rename': ['error', { allowedNames: ['class'] }],
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					caughtErrorsIgnorePattern: '^_',
+					ignoreRestSiblings: true,
+				},
+			],
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/explicit-function-return-type': 'off',
+			'@typescript-eslint/explicit-module-boundary-types': 'off',
+		},
+	},
+	// Template files
+	{
+		files: ['**/*.html'],
+		extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+		rules: {},
+	},
+	// Inline template processor + GraphQL rules (plugin handles schema detection)
+	...angularGraphqlPlugin.configs,
+);

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/feature-angular-authentication.uibundle-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <masterLabel>feature-angular-authentication</masterLabel>
+    <description>A Salesforce UI Bundle.</description>
+    <isActive>true</isActive>
+    <version>1</version>
+</UIBundle>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/middleware/html.mjs

@@ -0,0 +1,3 @@
+import { createHtmlMiddleware } from '@salesforce/angular-plugin-ui-bundle';
+
+export default await createHtmlMiddleware();

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/middleware/proxy.mjs

@@ -0,0 +1,12 @@
+/**
+ * Proxy middleware for Angular CLI dev server.
+ *
+ * Forwards `/services/*` and other manifest-routed paths to the connected
+ * Salesforce org with authentication. Watches `ui-bundle.json` for changes
+ * and recreates the proxy handler automatically (manual browser refresh needed).
+ *
+ * Referenced from angular.json: architect.serve.options.middlewares[].
+ */
+import { createProxyMiddleware } from '@salesforce/angular-plugin-ui-bundle';
+
+export default await createProxyMiddleware();

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "base-angular-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "sf-angular-serve",
+    "dev:design": "sf-angular-serve --design",
+    "build": "ng lint && ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint",
+    "build:e2e": "ng lint && ng build && node scripts/rewrite-e2e-assets.mjs",
+    "e2e": "playwright test",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "graphql:codegen": "graphql-codegen"
+  },
+  "dependencies": {
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@ng-icons/core": "^32.2.0",
+    "@ng-icons/lucide": "^32.2.0",
+    "@salesforce/angular-plugin-ui-bundle": "^12.5.4",
+    "@salesforce/platform-sdk": "^12.5.4",
+    "@spartan-ng/brain": "^1.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "rxjs": "~7.8.0",
+    "tailwind-merge": "^3.5.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-esbuild": "^21.0.0",
+    "@angular-eslint/builder": "^21.0.0",
+    "@angular/build": "^21.2.11",
+    "@angular/cli": "^21.2.11",
+    "@angular/compiler-cli": "^21.2.0",
+    "@eslint/js": "^9.0.0",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "@graphql-eslint/eslint-plugin": "^4.1.0",
+    "@playwright/test": "^1.49.0",
+    "@spartan-ng/cli": "^1.3.1",
+    "@tailwindcss/postcss": "^4.0.0",
+    "angular-eslint": "^21.0.0",
+    "eslint": "^9.0.0",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "jsdom": "^28.0.0",
+    "postcss": "^8.5.0",
+    "serve": "^14.2.5",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.1.0",
+    "@salesforce/graphiti": "^12.5.4"
+  },
+  "overrides": {
+    "undici": "^7.28.0"
+  }
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5176;
+
+export default defineConfig({
+	testDir: './e2e',
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
+	use: {
+		baseURL: `http://localhost:${E2E_PORT}`,
+		trace: 'on-first-retry',
+	},
+	projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+	webServer: {
+		// Serve built dist/ with a static server so e2e works in CI without an SF org
+		// (ng serve runs the SF plugin/proxy middleware and can fail without an org).
+		command: `npx serve dist -l ${E2E_PORT}`,
+		url: `http://localhost:${E2E_PORT}`,
+		reuseExistingServer: !process.env.CI,
+		timeout: process.env.CI ? 120_000 : 60_000,
+	},
+});