@salesforce/templates 66.13.7 → 66.13.8

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/button/button.scss

@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-@use '@angular/material' as mat;
-
-// Compact density themes — Material's canonical heights (36 / 32 / 28px).
-$-lg: mat.define-theme(
-	(
-		density: (
-			scale: -1,
-		),
-	)
-);
-$-md: mat.define-theme(
-	(
-		density: (
-			scale: -2,
-		),
-	)
-);
-$-sm: mat.define-theme(
-	(
-		density: (
-			scale: -3,
-		),
-	)
-);
-
-@mixin -height($h) {
-	--mat-button-filled-container-height: #{$h};
-	--mat-button-outlined-container-height: #{$h};
-	--mat-button-text-container-height: #{$h};
-	--mat-button-tonal-container-height: #{$h};
-	--mat-button-protected-container-height: #{$h};
-}
-
-@mixin -label-size($s) {
-	--mat-button-filled-label-text-size: #{$s};
-	--mat-button-outlined-label-text-size: #{$s};
-	--mat-button-text-label-text-size: #{$s};
-	--mat-button-tonal-label-text-size: #{$s};
-	--mat-button-protected-label-text-size: #{$s};
-}
-
-:host {
-	display: inline-flex;
-}
-
-.mat-mdc-button-base {
-	width: 100%;
-	font-weight: 500;
-	--mat-button-filled-container-shape: var(--radius-md);
-	--mat-button-outlined-container-shape: var(--radius-md);
-	--mat-button-text-container-shape: var(--radius-md);
-	--mat-button-tonal-container-shape: var(--radius-md);
-	--mat-button-protected-container-shape: var(--radius-md);
-}
-
-// Heights via Material's density scale; 24px (xs) sits below the button
-// density floor (-3 = 28px), so it sets the height token directly.
-.size-default,
-.size-icon {
-	@include mat.button-density($-md);
-}
-.size-sm,
-.size-icon-sm {
-	@include mat.button-density($-sm);
-}
-.size-lg,
-.size-icon-lg {
-	@include mat.button-density($-lg);
-}
-.size-xs,
-.size-icon-xs {
-	@include -height(1.5rem);
-}
-
-// Font-size isn't a density concern, so it stays a label token.
-.size-default,
-.size-lg {
-	@include -label-size(0.875rem);
-}
-.size-sm {
-	@include -label-size(0.8rem);
-}
-.size-xs {
-	@include -label-size(0.75rem);
-}
-
-// Icon-only: square, no min-width or horizontal padding. Material's leading-icon
-// margins assume a text label, so zero them to keep the icon centred.
-.size-icon,
-.size-icon-xs,
-.size-icon-sm,
-.size-icon-lg {
-	width: auto;
-	min-width: 0;
-	padding: 0;
-	aspect-ratio: 1;
-
-	.mat-icon {
-		margin: 0;
-	}
-}
-
-// Destructive: subtle red tint + red text, matching React's bg-destructive/10.
-.destructive {
-	--mat-button-filled-container-color: color-mix(in oklch, var(--destructive) 10%, transparent);
-	--mat-button-filled-label-text-color: var(--destructive);
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/card/card.scss

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-// `size="sm"` — compact padding. Material hardcodes the card's 16px padding
-// (there is no padding design token to override), so the compact size tightens
-// the real Material padding classes. `::ng-deep` is required because the slot
-// content (`mat-card-header/content/actions`) is projected — it lives in the
-// consumer's view, not this wrapper's — so a plain scoped selector can't reach
-// it. The rules are anchored under `.app-card-sm`, a class only this component
-// applies, so the deep selector stays contained to compact cards.
-.app-card-sm {
-	::ng-deep .mat-mdc-card-header {
-		padding: 0.75rem 0.75rem 0;
-	}
-
-	::ng-deep .mat-mdc-card-content {
-		padding: 0 0.75rem;
-
-		&:first-child {
-			padding-top: 0.75rem;
-		}
-
-		&:last-child {
-			padding-bottom: 0.75rem;
-		}
-	}
-
-	::ng-deep .mat-mdc-card-actions {
-		padding: 0.75rem;
-	}
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/date-picker/date-picker.scss

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. two side-by-side pickers in a date-range filter,
-	 * or a picker beside an operator select). Without this, the default
-	 * `min-width: auto` on a flex item keeps each field at its content width and
-	 * the row overflows its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/date-range-picker/date-range-picker.scss

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item, so the row doesn't overflow its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/input/input.scss

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. two side-by-side inputs in a numeric/date
-	 * range). Without this, the default `min-width: auto` on a flex item keeps
-	 * each field at its content width and the row overflows its container.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/label/label.html

@@ -1,3 +0,0 @@
-<label [attr.for]="for()" class="text-sm leading-none font-medium select-none">
-	<ng-content />
-</label>

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/select/select.scss

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-@use '../field-size' as field-size;
-
-/*
- * Form-field-specific structural styling. Height comes from the `size` input
- * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
- * Here we only: give the outline our design-token radius, emit the size
- * classes, and collapse the empty hint/error subscript row.
- */
-@include field-size.sizes;
-
-:host {
-	display: block;
-	/*
-	 * Allow the host to shrink below the mat-form-field's intrinsic width when
-	 * used as a flex item (e.g. the operator select beside a date picker in a
-	 * date filter row). Without this, the default `min-width: auto` on a flex
-	 * item keeps each field at its content width and the row overflows.
-	 */
-	min-width: 0;
-}
-
-.mat-mdc-form-field {
-	--mdc-outlined-text-field-container-shape: var(--radius-md);
-	font-size: 0.875rem; /* text-sm, matches the React inputs */
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-	display: none;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/separator/separator.html

@@ -1 +0,0 @@
-<mat-divider role="presentation" [vertical]="isVertical()" [inset]="inset()" />

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/separator/separator.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * Material's `mat-divider` draws a full-height border for the vertical variant,
- * so its element must fill the host. The host itself carries `self-stretch`
- * (see component `hostClass`) to take the flex row's height; here we make the
- * inner divider fill that height. Horizontal needs nothing extra — the divider
- * is already `display:block; width:100%`.
- */
-:host {
-	// A vertical divider is a zero-width line; keep it out of flex growth math.
-	&[data-orientation='vertical'] {
-		display: flex;
-	}
-}
-
-.mat-divider-vertical {
-	height: 100%;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/skeleton/skeleton.html

@@ -1 +0,0 @@
-<ng-content />

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/skeleton/skeleton.scss

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * The skeleton is a block by default so call sites only need to supply a width
- * and height (`h-4 w-32`) — no `block` utility to repeat. The pulse lives here
- * (rather than Tailwind's `animate-pulse`) so it can be switched off for users
- * who ask for reduced motion.
- */
-:host {
-	display: block;
-	animation: app-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes app-skeleton-pulse {
-	50% {
-		opacity: 0.5;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	:host {
-		animation: none;
-	}
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-page.scss

@@ -1,7 +0,0 @@
-:host ::ng-deep .mat-expansion-panel {
-	box-shadow: none !important;
-}
-
-:host ::ng-deep .mat-expansion-panel-header:hover {
-	background-color: transparent !important;
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/pages/home/home-page.html

@@ -1,18 +0,0 @@
-<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-	<div class="flex items-center gap-6 mb-6">
-		<h1 class="text-2xl font-bold">Account Search</h1>
-		<app-button appearance="outlined" size="sm" (clicked)="browseAll()"
-			>Browse All Accounts</app-button
-		>
-	</div>
-	<form class="flex gap-2 items-center" (submit)="onSubmit($event)">
-		<app-input
-			class="flex-1"
-			type="text"
-			placeholder="Search by name, phone, or industry..."
-			label="Search"
-			[(value)]="term"
-		/>
-		<app-button type="submit">Search</app-button>
-	</form>
-</div>

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/pages/home/home-page.ts

@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
-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";
-import { InputComponent } from "../../components/ui/input/input";
-
-/**
- * Account-search landing page. Mirrors the React `Home` page: a single search
- * box plus a "Browse All Accounts" shortcut. Submitting navigates to the
- * `accounts` list, carrying the typed term as the `q` query param so the search
- * page's {@link ObjectSearchStateService} seeds the multi-field search filter.
- *
- * This is intentionally NOT the state-service-driven `app-search-bar` — Home
- * has no search state of its own; it just routes into the search page.
- */
-@Component({
-	selector: "app-home-page",
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [ButtonComponent, InputComponent],
-	templateUrl: "./home-page.html",
-})
-export class HomePageComponent {
-	private readonly router = inject(Router);
-
-	/** Bound to the search input; forwarded as `?q=` on submit. */
-	protected readonly term = signal<string>("");
-
-	/** Navigate to the search page, seeding the search term when present. */
-	protected onSubmit(event: Event): void {
-		event.preventDefault();
-		this.browseAll(this.term() || undefined);
-	}
-
-	/** Go to the accounts list, optionally with a seeded search term. */
-	protected browseAll(q?: string): void {
-		void this.router.navigate(["/accounts"], {
-			queryParams: q ? { q } : {},
-		});
-	}
-}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/theme.scss

@@ -1,39 +0,0 @@
-// 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/lib/templates/uiBundles/angularbasic/src/app/components/ui/_field-size.scss

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * Shared height scale for the form-field wrappers (app-input, app-select,
- * app-date-picker): sm = 24px, default = 32px, lg = 40px.
- *
- * Material's density scale only reaches 36px at its -5 floor, so these compact
- * heights can't come from `mat.form-field-density`. Instead we set the two M3
- * tokens that drive the height directly:
- *   --mat-form-field-container-height          -> `.mat-mdc-form-field-flex` min-height
- *   --mat-form-field-container-vertical-padding -> infix padding-top / -bottom
- *
- * These are CSS custom properties, so setting them on the wrapper's own
- * `mat-form-field` (an in-view element that matches under emulated
- * encapsulation) is enough — they INHERIT down to Material's internal flex /
- * infix elements. No `::ng-deep` and no global classes needed. This mirrors how
- * `app-button` sizes work (it sets `--mat-button-*-container-height` tokens).
- */
-@mixin apply($height, $vertical-padding) {
-	--mat-form-field-container-height: #{$height};
-	--mat-form-field-container-vertical-padding: #{$vertical-padding};
-}
-
-/*
- * Emit the three size classes. Consumers opt in via `size` on the wrapper,
- * which renders `size-sm | size-default | size-lg` on the mat-form-field.
- */
-@mixin sizes {
-	.size-sm {
-		@include apply(1.5rem, 0.25rem); // 24px, 4px
-	}
-	.size-default {
-		@include apply(2rem, 0.5rem); // 32px, 8px
-	}
-	.size-lg {
-		@include apply(2.5rem, 0.75rem); // 40px, 12px
-	}
-}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/button/button.scss

@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-@use '@angular/material' as mat;
-
-// Compact density themes — Material's canonical heights (36 / 32 / 28px).
-$-lg: mat.define-theme(
-	(
-		density: (
-			scale: -1,
-		),
-	)
-);
-$-md: mat.define-theme(
-	(
-		density: (
-			scale: -2,
-		),
-	)
-);
-$-sm: mat.define-theme(
-	(
-		density: (
-			scale: -3,
-		),
-	)
-);
-
-@mixin -height($h) {
-	--mat-button-filled-container-height: #{$h};
-	--mat-button-outlined-container-height: #{$h};
-	--mat-button-text-container-height: #{$h};
-	--mat-button-tonal-container-height: #{$h};
-	--mat-button-protected-container-height: #{$h};
-}
-
-@mixin -label-size($s) {
-	--mat-button-filled-label-text-size: #{$s};
-	--mat-button-outlined-label-text-size: #{$s};
-	--mat-button-text-label-text-size: #{$s};
-	--mat-button-tonal-label-text-size: #{$s};
-	--mat-button-protected-label-text-size: #{$s};
-}
-
-:host {
-	display: inline-flex;
-}
-
-.mat-mdc-button-base {
-	width: 100%;
-	font-weight: 500;
-	--mat-button-filled-container-shape: var(--radius-md);
-	--mat-button-outlined-container-shape: var(--radius-md);
-	--mat-button-text-container-shape: var(--radius-md);
-	--mat-button-tonal-container-shape: var(--radius-md);
-	--mat-button-protected-container-shape: var(--radius-md);
-}
-
-// Heights via Material's density scale; 24px (xs) sits below the button
-// density floor (-3 = 28px), so it sets the height token directly.
-.size-default,
-.size-icon {
-	@include mat.button-density($-md);
-}
-.size-sm,
-.size-icon-sm {
-	@include mat.button-density($-sm);
-}
-.size-lg,
-.size-icon-lg {
-	@include mat.button-density($-lg);
-}
-.size-xs,
-.size-icon-xs {
-	@include -height(1.5rem);
-}
-
-// Font-size isn't a density concern, so it stays a label token.
-.size-default,
-.size-lg {
-	@include -label-size(0.875rem);
-}
-.size-sm {
-	@include -label-size(0.8rem);
-}
-.size-xs {
-	@include -label-size(0.75rem);
-}
-
-// Icon-only: square, no min-width or horizontal padding. Material's leading-icon
-// margins assume a text label, so zero them to keep the icon centred.
-.size-icon,
-.size-icon-xs,
-.size-icon-sm,
-.size-icon-lg {
-	width: auto;
-	min-width: 0;
-	padding: 0;
-	aspect-ratio: 1;
-
-	.mat-icon {
-		margin: 0;
-	}
-}
-
-// Destructive: subtle red tint + red text, matching React's bg-destructive/10.
-.destructive {
-	--mat-button-filled-container-color: color-mix(in oklch, var(--destructive) 10%, transparent);
-	--mat-button-filled-label-text-color: var(--destructive);
-}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/card/card.scss

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-// `size="sm"` — compact padding. Material hardcodes the card's 16px padding
-// (there is no padding design token to override), so the compact size tightens
-// the real Material padding classes. `::ng-deep` is required because the slot
-// content (`mat-card-header/content/actions`) is projected — it lives in the
-// consumer's view, not this wrapper's — so a plain scoped selector can't reach
-// it. The rules are anchored under `.app-card-sm`, a class only this component
-// applies, so the deep selector stays contained to compact cards.
-.app-card-sm {
-	::ng-deep .mat-mdc-card-header {
-		padding: 0.75rem 0.75rem 0;
-	}
-
-	::ng-deep .mat-mdc-card-content {
-		padding: 0 0.75rem;
-
-		&:first-child {
-			padding-top: 0.75rem;
-		}
-
-		&:last-child {
-			padding-bottom: 0.75rem;
-		}
-	}
-
-	::ng-deep .mat-mdc-card-actions {
-		padding: 0.75rem;
-	}
-}