@salesforce/ui-bundle-template-base-angular-app 11.17.1 → 11.18.0

package/src/force-app/main/default/uiBundles/base-angular-app/src/styles.scss

@@ -0,0 +1,170 @@
+@import 'tailwindcss';
+
+@layer base {
+	html,
+	body {
+		@apply min-h-screen;
+	}
+
+	body {
+		@apply antialiased bg-white;
+	}
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * shadcn design tokens, ported from the React base app's global.css so the
+ * shared object-search feature (bg-card, text-muted-foreground, border-border,
+ * rounded-* via --radius, etc.) renders identically in Angular. The React base
+ * also imports tw-animate-css and shadcn/tailwind.css (accordion keyframes +
+ * data-* variants) — omitted here as they are not installed for the Angular
+ * base and are not required for layout/color parity.
+ */
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+/*
+ * Angular Material colour re-skin — layered on top of the custom M3 theme
+ * defined in theme.scss. The theme owns density (compact control heights) and
+ * seeds the base `--mat-sys-*` system variables; here we remap the colour and
+ * shape system variables to our shadcn design tokens so every Material
+ * component adopts the shadcn look without touching component code. This block
+ * loads after theme.scss, so these values win.
+ *
+ * Control sizing is NOT set here — density handles heights, and any remaining
+ * form-field-specific styling lives in the component's own scoped CSS.
+ */
+:root {
+	--mat-sys-primary: var(--primary);
+	--mat-sys-on-primary: var(--primary-foreground);
+	--mat-sys-surface: var(--background);
+	--mat-sys-on-surface: var(--foreground);
+	--mat-sys-surface-variant: var(--muted);
+	--mat-sys-on-surface-variant: var(--muted-foreground);
+	--mat-sys-outline: var(--border);
+	--mat-sys-outline-variant: var(--border);
+	--mat-sys-error: var(--destructive);
+	--mat-sys-corner-small: var(--radius-sm);
+	--mat-sys-corner-medium: var(--radius-md);
+	--mat-sys-corner-large: var(--radius-lg);
+
+	// Card subtitle — Material defaults this to `--mat-sys-on-surface` (the same
+	// dark colour as the title). React renders the card description in muted
+	// grey (`text-muted-foreground`), so point the subtitle token there.
+	--mat-card-subtitle-text-color: var(--muted-foreground);
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/theme.scss

@@ -0,0 +1,39 @@
+// Copyright (c) 2026, Salesforce, Inc.,
+// All rights reserved.
+// For full license text, see the LICENSE.txt file
+
+// Angular Material M3 theme.
+// See https://material.angular.dev/guide/theming.
+//
+// This replaces the prebuilt azure-blue theme so we can set a negative
+// `density` — the standard, system-driven way to get the compact control
+// heights the React reference uses (no hardcoded pixel heights anywhere).
+//
+// Colour is intentionally NOT finalised here: the shadcn design tokens are
+// applied on top by remapping `--mat-sys-*` in styles.css, which loads after
+// this file. The palette below only seeds Material's base system variables.
+@use '@angular/material' as mat;
+
+html {
+	@include mat.theme(
+		(
+			color: (
+				theme-type: light,
+				primary: mat.$azure-palette,
+				tertiary: mat.$blue-palette,
+			),
+			// Font family reads Tailwind's system stack (`--font-sans`, the same
+			// default the React reference uses) instead of Material's Roboto, so
+			// Material components and Tailwind-styled text share one font. Tailwind
+			// is the single source of the family; the typescale sizes/weights stay
+			// Material's own.
+			typography: (
+					plain-family: var(--font-sans),
+					brand-family: var(--font-sans),
+				),
+			// Compact density (scale 0 to -5). Drives control heights via
+			// Material's own tokens instead of hardcoded px.
+			density: -2,
+		)
+	);
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/api/graphql-client.service.ts

@@ -1,48 +0,0 @@
-import { Injectable } from '@angular/core';
-import { createDataSDK } from '@salesforce/platform-sdk';
-
-/**
- * True when the operation's first definition is a `mutation`. Strips GraphQL
- * comments first so a leading `# ...` line can't mask the keyword. Queries
- * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
- * query().
- */
-function isMutation(operation: string): boolean {
-	return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
-}
-
-/**
- * Thin GraphQL client: createDataSDK + sdk.graphql with centralized error
- * handling. Mutations are routed to sdk.graphql.mutate and everything else to
- * sdk.graphql.query (the SDK rejects an operation sent to the wrong method).
- * Use with gql-tagged queries and generated operation types for type-safe calls.
- */
-@Injectable({ providedIn: 'root' })
-export class GraphqlClient {
-	async execute<TData, TVariables = Record<string, unknown>>(
-		operation: string,
-		variables?: TVariables,
-	): Promise<TData> {
-		const data = await createDataSDK();
-		const result = isMutation(operation)
-			? await data.graphql!.mutate<TData, TVariables>({
-					mutation: operation,
-					variables,
-				})
-			: await data.graphql!.query<TData, TVariables>({
-					query: operation,
-					variables,
-				});
-
-		if (result.errors?.length) {
-			const msg = result.errors.map((e) => e.message).join('; ');
-			throw new Error(`GraphQL Error: ${msg}`);
-		}
-
-		if (result.data == null) {
-			throw new Error('GraphQL response data is null');
-		}
-
-		return result.data;
-	}
-}

package/src/force-app/main/default/uiBundles/base-angular-app/src/styles.css

@@ -1,12 +0,0 @@
-@import 'tailwindcss';
-
-@layer base {
-	html,
-	body {
-		@apply min-h-screen;
-	}
-
-	body {
-		@apply antialiased bg-white;
-	}
-}