-
+
+
+
+
diff --git a/adev/src/app/features/not-found/not-found.scss b/adev/src/app/features/not-found/not-found.scss
new file mode 100644
index 000000000000..209dda0a5926
--- /dev/null
+++ b/adev/src/app/features/not-found/not-found.scss
@@ -0,0 +1,130 @@
+:host {
+ display: block;
+ padding-top: var(--layout-padding);
+ padding-bottom: var(--layout-padding);
+}
+
+.docs-viewer {
+ display: flex;
+ flex-direction: column;
+ padding: 0px;
+ box-sizing: border-box;
+ padding-inline: var(--layout-padding);
+}
+
+.enter-animation {
+ animation: slide-fade 1s;
+}
+@keyframes slide-fade {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.docs-search-results {
+ list-style-type: none;
+ padding-inline: 0;
+ padding-block-start: 1rem;
+ padding-block-end: 1rem;
+ margin: 0;
+ max-width: 750px;
+
+ .docs-search-result {
+ border-inline-start: 2px solid var(--senary-contrast);
+ margin-inline-start: 1rem;
+ display: block;
+ font-size: 0.875rem;
+
+ .docs-search-result-icon {
+ display: inline-block;
+
+ i {
+ display: flex;
+ align-items: center;
+ font-size: 1.2rem;
+ }
+ }
+
+ /**
+ * This rule needs ng-deep to be applied to elements that are created via a [innerHTML] binding
+ */
+ ::ng-deep {
+ mark {
+ background: #e62600;
+ background: var(--red-to-orange-horizontal-gradient);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+ }
+
+ a {
+ color: var(--secondary-contrast);
+ display: flex;
+ justify-content: space-between;
+ padding: 1rem;
+ gap: 0.5rem;
+ }
+
+ &__label,
+ &__sub-label,
+ &__content {
+ transition: color 0.3s ease;
+ }
+
+ &__label,
+ &__sub-label {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin: 0;
+ }
+
+ &__label {
+ font-weight: 600;
+ flex-wrap: wrap;
+
+ &__package {
+ font-size: 0.75rem;
+ }
+ }
+
+ &__content,
+ &__category {
+ margin: 0;
+ }
+
+ &__sub-label,
+ &__content {
+ margin-block-start: 0.375rem;
+ margin-inline-start: 2rem;
+ color: var(--quaternary-contrast);
+ }
+
+ &__category {
+ font-weight: 400;
+ color: var(--quaternary-contrast);
+ }
+
+ &.active {
+ background-color: var(--septenary-contrast); // stylelint-disable-line
+ }
+
+ &:hover,
+ &.active {
+ background-color: var(--octonary-contrast); // stylelint-disable-line
+ border-inline-start: 2px solid var(--primary-contrast);
+
+ .docs-search-result__label,
+ .docs-search-result__sub-label,
+ .docs-search-result__content {
+ color: var(--primary-contrast);
+ }
+ }
+ }
+}
diff --git a/adev/src/app/features/not-found/not-found.ts b/adev/src/app/features/not-found/not-found.ts
new file mode 100644
index 000000000000..a1563e8df963
--- /dev/null
+++ b/adev/src/app/features/not-found/not-found.ts
@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component, inject, signal} from '@angular/core';
+import {ActivatedRoute, RouterLink, UrlSegment} from '@angular/router';
+import {Search, SearchItem, RelativeLink, SearchResultItem} from '@angular/docs';
+
+@Component({
+ imports: [SearchItem, RouterLink, RelativeLink],
+ templateUrl: './not-found.html',
+ styleUrl: './not-found.scss',
+})
+export class NotFound {
+ private readonly search = inject(Search);
+ protected readonly searchResults = signal([]);
+
+ constructor() {
+ const activatedRoute = inject(ActivatedRoute);
+ const searchTerms = this.extractSearchTerm(activatedRoute.snapshot.url);
+ if (searchTerms) {
+ // We're using the one-shot query request to not interfere with the main search signal
+ this.search.searchWithQuery(searchTerms).then((results) => {
+ this.searchResults.set(results ?? []);
+ });
+ }
+ }
+
+ private extractSearchTerm(url: UrlSegment[]): string {
+ return url.join(' ').replace(/[-_/]/g, ' ');
+ }
+}
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.html b/adev/src/app/features/references/api-items-section/api-items-section.component.html
index 8df416950bc6..32d7f9386d8d 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.html
+++ b/adev/src/app/features/references/api-items-section/api-items-section.component.html
@@ -7,7 +7,7 @@
@if (apiItem.deprecated) {
<!>
}
- @if(apiItem.experimental) {
+ @if (apiItem.experimental) {
🧪
}
- @if(apiItem.developerPreview) {
+ @if (apiItem.developerPreview) {
🚧
}
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
index ee36fae6ccfe..ffed34e76aa8 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.scss
+++ b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
@@ -1,5 +1,3 @@
-@use '@angular/docs/styles/anchor' as anchor;
-
.adev-api-items-section-header {
display: flex;
@@ -92,6 +90,4 @@
.adev-api-anchor {
color: inherit;
-
- @include anchor.docs-anchor();
}
diff --git a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
index 60afa622e9a1..b2ed207e3be1 100644
--- a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
+++ b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
@@ -1,5 +1,6 @@
@if (docContent(); as docContent) {
-
Angular v21 is here!
🕹️ Start your adventure
diff --git a/adev/src/app/features/not-found/not-found.html b/adev/src/app/features/not-found/not-found.html new file mode 100644 index 000000000000..a4398293ef2f --- /dev/null +++ b/adev/src/app/features/not-found/not-found.html @@ -0,0 +1,81 @@ +
+
+ Page Not Found 🙃
++ We couldn't find what you were looking for. We have initiated a search for the term extracted + from the URL. +
++ If you think this is a mistake, please + + open an issue + so we can fix it. +
+ + + @if (searchResults().length > 0) { + +
+
+
+ }
++
Feeling lucky?
+Maybe what you're looking for is in the list below:
+ +-
+ @for (result of searchResults(); track $index) {
+
-
+
+ ++
+ + + + {{ result.type === 'code' ? 'code' : 'description' }} + + + + + + @if (result.package) { + + } +
+ + @if (result.subLabelHtml) { ++ + + grid_3x3 + + + +
+ } + + @if (result.contentHtml) { + + } ++ {{ result.category }} +
+ +
+ }
+
class="adev-api-anchor" tabindex="-1" > - {{group().title}} + {{ group().title }}
@@ -31,10 +31,10 @@
@if (apiItem.deprecated) {
<!>
}
- @if(apiItem.experimental) {
+ @if (apiItem.experimental) {
🧪
}
- @if(apiItem.developerPreview) {
+ @if (apiItem.developerPreview) {
🚧
}
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
index ee36fae6ccfe..ffed34e76aa8 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.scss
+++ b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
@@ -1,5 +1,3 @@
-@use '@angular/docs/styles/anchor' as anchor;
-
.adev-api-items-section-header {
display: flex;
@@ -92,6 +90,4 @@
.adev-api-anchor {
color: inherit;
-
- @include anchor.docs-anchor();
}
diff --git a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
index 60afa622e9a1..b2ed207e3be1 100644
--- a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
+++ b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.html
@@ -1,5 +1,6 @@
@if (docContent(); as docContent) {
- API Reference
- @for (stat of statuses | keyvalue:null; track $index) {
+ @for (stat of statuses | keyvalue: null; track $index) {
- {{statusLabels[stat.value]}}
+ {{ statusLabels[stat.value] }}
}
@@ -27,7 +27,7 @@ API Reference
(click)="setItemType(itemType)"
>
-
- @for (item of navigationItems; track $index) {
- -
-
- {{item.label}}
-
+
+
+ @for (item of navigationItems; track $index) {
+ -
+
+ {{ item.label }}
+
- @if (item.children && item.children.length > 0) {
-
}
-
- }
-
-
+
+
-Angular versions
@for (version of versions; track $index) {
-
-
@@ -40,7 +40,7 @@ Angular versions
@for (version of versions; track $index) {
-
-
@@ -70,7 +70,7 @@ Angular versions
}
- @if ((to.number - from.number > 150) && from.number > 240) {
+ @if (to.number - from.number > 150 && from.number > 240) {
Warning:
@@ -86,7 +86,7 @@
Application complexity
Basic
Medium
@@ -106,7 +106,7 @@ Other dependencies
I use {{option.name}} {{option.description}} I use {{ option.name }} {{ option.description }}
}
@@ -137,16 +137,23 @@ Package Manager
@if (
- beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0
+ beforeRecommendations.length > 0 ||
+ duringRecommendations.length > 0 ||
+ afterRecommendations.length > 0
) {
- {{title()}}
+ {{ title() }}
Before you update
- @for (r of beforeRecommendations; track $index) {
+ @for (r of beforeRecommendations; track $index) {
Update to the new version
@for (r of duringRecommendations; track $index) {
After you update
@for (r of afterRecommendations; track $index) {
;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [UpdateComponent],
+ providers: [provideRouter([]), provideHttpClient(), provideHttpClientTesting()],
+ });
+ fixture = TestBed.createComponent(UpdateComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('getComplexityLevelName', () => {
+ it('should return "Basic" for ApplicationComplexity.Basic', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Basic)).toBe('Basic');
+ });
+
+ it('should return "Medium" for ApplicationComplexity.Medium', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Medium)).toBe('Medium');
+ });
+
+ it('should return "Advanced" for ApplicationComplexity.Advanced', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Advanced)).toBe('Advanced');
+ });
+
+ it('should return "Unknown" for invalid complexity level', () => {
+ expect(component['getComplexityLevelName'](999 as ApplicationComplexity)).toBe('Unknown');
+ });
+ });
+
+ describe('complexity badges rendering', () => {
+ it('should display complexity badges for recommendations', async () => {
+ // Find the "Show me how to update!" button and click it to trigger recommendations
+ const showButton: HTMLElement = fixture.debugElement.query(
+ By.css('.show-button'),
+ )?.nativeElement;
+
+ expect(showButton).toBeTruthy();
+ showButton.click();
+ fixture.detectChanges();
+
+ // Wait for all async operations to complete (marked parsing, router navigation, etc.)
+ await fixture.whenStable();
+
+ // Additional wait for marked parsing
+ await new Promise((resolve) => setTimeout(resolve, 300));
+ fixture.detectChanges();
+
+ const badges = fixture.nativeElement.querySelectorAll('.adev-complexity-badge');
+
+ // For the default versions (20.0 -> 21.0) with level 1, verify badges are rendered
+ if (badges.length > 0) {
+ // Check the first badge
+ const badge = badges[0];
+ const badgeText = badge.textContent?.trim();
+
+ // Badge text should be one of the valid complexity levels
+ expect(['Basic', 'Medium', 'Advanced']).toContain(badgeText);
+
+ // Badge should have appropriate CSS class
+ const hasComplexityClass =
+ badge.classList.contains('adev-complexity-1') ||
+ badge.classList.contains('adev-complexity-2') ||
+ badge.classList.contains('adev-complexity-3');
+ expect(hasComplexityClass).toBe(true);
+ } else {
+ // If no recommendations exist for these versions, that's acceptable
+ // The test verifies the component renders without errors
+ expect(badges.length).toBe(0);
+ }
+ });
+ });
+});
diff --git a/adev/src/app/features/update/update.component.ts b/adev/src/app/features/update/update.component.ts
index 6ee0d2dee2fd..0b3539986f5b 100644
--- a/adev/src/app/features/update/update.component.ts
+++ b/adev/src/app/features/update/update.component.ts
@@ -7,7 +7,7 @@
*/
import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
-import {Step, RECOMMENDATIONS} from './recommendations';
+import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations';
import {Clipboard} from '@angular/cdk/clipboard';
import {CdkMenuModule} from '@angular/cdk/menu';
import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -294,6 +294,16 @@ export default class UpdateComponent {
}
}
+ protected getComplexityLevelName(level: ApplicationComplexity): string {
+ const names: Record = {
+ [ApplicationComplexity.Basic]: 'Basic',
+ [ApplicationComplexity.Medium]: 'Medium',
+ [ApplicationComplexity.Advanced]: 'Advanced',
+ };
+
+ return names[level] ?? 'Unknown';
+ }
+
private replaceVariables(action: string): string {
let newAction = action;
newAction = newAction.replace(
diff --git a/adev/src/app/routing/routes.ts b/adev/src/app/routing/routes.ts
index 79758cbb555a..5d199e478991 100644
--- a/adev/src/app/routing/routes.ts
+++ b/adev/src/app/routing/routes.ts
@@ -45,7 +45,10 @@ const referencePageRoutes = mapNavigationItemsToRoutes(
const updateGuidePageRoute: Route = {
path: referenceNavigationItems.find((r) => r.path === DEFAULT_PAGES.UPDATE)!.path,
loadComponent: () => import('../features/update/update.component'),
- data: commonReferenceRouteData,
+ data: {
+ ...commonReferenceRouteData,
+ label: 'Update guide',
+ },
};
const cliReferencePageRoutes = mapNavigationItemsToRoutes(
@@ -155,7 +158,7 @@ export const routes: Route[] = [
// Error page
{
path: '**',
- loadComponent: () => import('../features/docs/docs.component'),
- resolve: {'docContent': contentResolver('error')},
+ loadComponent: () => import('../features/not-found/not-found').then((m) => m.NotFound),
+ data: {label: 'Page not found'},
},
];
diff --git a/adev/src/app/routing/sub-navigation-data.ts b/adev/src/app/routing/sub-navigation-data.ts
index a859ab2e1aa1..a5f0cdd05a95 100644
--- a/adev/src/app/routing/sub-navigation-data.ts
+++ b/adev/src/app/routing/sub-navigation-data.ts
@@ -1,4 +1,4 @@
-/*!
+/**
* @license
* Copyright Google LLC All Rights Reserved.
*
@@ -9,7 +9,7 @@
import {isDevMode} from '@angular/core';
import {NavigationItem} from '@angular/docs';
-// These 2 imports are expected to be red because they are generated a build time
+// These imports are expected to be red because they are generated a build time
import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
@@ -94,6 +94,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
children: [
{
label: 'Signals',
+ status: 'updated',
children: [
{
label: 'Overview',
@@ -110,6 +111,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/signals/resource',
contentPath: 'guide/signals/resource',
},
+ {
+ label: 'Side effects for non-reactives APIs',
+ path: 'guide/signals/effect',
+ contentPath: 'guide/signals/effect',
+ status: 'new',
+ },
],
},
{
@@ -443,6 +450,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/forms/signals/models',
contentPath: 'guide/forms/signals/models',
},
+ {
+ label: 'Form model design',
+ path: 'guide/forms/signals/model-design',
+ contentPath: 'guide/forms/signals/designing-your-form-model',
+ },
{
label: 'Field state management',
path: 'guide/forms/signals/field-state-management',
diff --git a/adev/src/assets/BUILD.bazel b/adev/src/assets/BUILD.bazel
index 5835c283f5cd..ea9ca7f12955 100644
--- a/adev/src/assets/BUILD.bazel
+++ b/adev/src/assets/BUILD.bazel
@@ -12,7 +12,7 @@ copy_to_directory(
"//adev/src/content/best-practices",
"//adev/src/content/best-practices/runtime-performance",
"//adev/src/content/cdk:cdk_docs",
- "//adev/src/content/cli/help:cli_docs",
+ "//adev/src/content/cli:cli_docs",
"//adev/src/content/ecosystem",
"//adev/src/content/ecosystem/rxjs-interop",
"//adev/src/content/ecosystem/service-workers",
@@ -94,7 +94,7 @@ copy_to_directory(
"//tools/manual_api_docs/elements:elements_docs",
],
replace_prefixes = {
- "adev/src/content/cli/help/cli_docs_html": "cli/",
+ "adev/src/content/cli/cli_docs_html": "cli/",
"adev/src/content/aria/aria_docs_html": "api/",
"adev/src/content/cdk/cdk_docs_html": "api/",
"adev/src/content": "",
diff --git a/adev/src/content/ai/design-patterns.md b/adev/src/content/ai/design-patterns.md
index cdcd7530d318..d40582e24cdd 100644
--- a/adev/src/content/ai/design-patterns.md
+++ b/adev/src/content/ai/design-patterns.md
@@ -27,11 +27,14 @@ storyResource = resource({
loader: ({params}): Promise => {
// The params value is the current value of the storyInput signal
const url = this.endpoint();
- return runFlow({ url, input: {
- userInput: params,
- sessionId: this.storyService.sessionId() // Read from another signal
- }});
- }
+ return runFlow({
+ url,
+ input: {
+ userInput: params,
+ sessionId: this.storyService.sessionId(), // Read from another signal
+ },
+ });
+ },
});
```
@@ -56,7 +59,7 @@ storyParts = linkedSignal({
const existingStoryParts = previous?.value || [];
// Return a new array with the old and new parts
return [...existingStoryParts, ...newStoryParts];
- }
+ },
});
```
@@ -101,23 +104,23 @@ characters = resource({
// exposed by the Genkit client SDK
const response = streamFlow({
url: '/streamCharacters',
- input: 10
+ input: 10,
});
(async () => {
for await (const chunk of response.stream) {
data.update((prev) => {
if ('value' in prev) {
- return { value: `${prev.value} ${chunk}` };
+ return {value: `${prev.value} ${chunk}`};
} else {
- return { error: chunk as unknown as Error };
+ return {error: chunk as unknown as Error};
}
});
}
})();
return data;
- }
+ },
});
```
@@ -136,38 +139,39 @@ The `characters` member is updated asynchronously and can be displayed in the te
On the server side, in `server.ts` for example, the defined endpoint sends the data to be streamed to the client. The following code uses Gemini with the Genkit framework but this technique is applicable to other APIs that support streaming responses from LLMs:
```ts
-import { startFlowServer } from '@genkit-ai/express';
-import { genkit } from "genkit/beta";
-import { googleAI, gemini20Flash } from "@genkit-ai/googleai";
+import {startFlowServer} from '@genkit-ai/express';
+import {genkit} from 'genkit/beta';
+import {googleAI, gemini20Flash} from '@genkit-ai/googleai';
-const ai = genkit({ plugins: [googleAI()] });
+const ai = genkit({plugins: [googleAI()]});
-export const streamCharacters = ai.defineFlow({
+export const streamCharacters = ai.defineFlow(
+ {
name: 'streamCharacters',
inputSchema: z.number(),
outputSchema: z.string(),
streamSchema: z.string(),
},
- async (count, { sendChunk }) => {
- const { response, stream } = ai.generateStream({
- model: gemini20Flash,
- config: {
- temperature: 1,
- },
- prompt: `Generate ${count} different RPG game characters.`,
- });
-
- (async () => {
- for await (const chunk of stream) {
- sendChunk(chunk.content[0].text!);
- }
- })();
-
- return (await response).text;
-});
+ async (count, {sendChunk}) => {
+ const {response, stream} = ai.generateStream({
+ model: gemini20Flash,
+ config: {
+ temperature: 1,
+ },
+ prompt: `Generate ${count} different RPG game characters.`,
+ });
+
+ (async () => {
+ for await (const chunk of stream) {
+ sendChunk(chunk.content[0].text!);
+ }
+ })();
+
+ return (await response).text;
+ },
+);
startFlowServer({
flows: [streamCharacters],
});
-
```
diff --git a/adev/src/content/ai/mcp-server-setup.md b/adev/src/content/ai/mcp-server-setup.md
index 148c4311059d..7379067dfc78 100644
--- a/adev/src/content/ai/mcp-server-setup.md
+++ b/adev/src/content/ai/mcp-server-setup.md
@@ -19,9 +19,13 @@ The Angular CLI MCP server provides several tools to assist you in your developm
Some tools are provided in experimental / preview status since they are new or not fully tested. Enable them individually with the [`--experimental-tool`](#command-options) option and use them with caution.
-| Name | Description | `local-only` | `read-only` |
-| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations) | ✅ | ❌ |
+| Name | Description | `local-only` | `read-only` |
+| :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: |
+| `build` | Perform a one-off, non-watched build using `ng build`. | ✅ | ❌ |
+| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](/reference/migrations) | ✅ | ❌ |
+| `start_devserver` | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `stop_devserver` and `wait_for_devserver_build` tools. | ✅ | ✅ |
+| `stop_devserver` | Stops a development server started by `start_devserver`. | ✅ | ✅ |
+| `wait_for_devserver_build` | Returns the output logs of the most recent build in a running development server started by `start_devserver`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs. | ✅ | ✅ |
## Get Started
diff --git a/adev/src/content/aria/_build-info.json b/adev/src/content/aria/_build-info.json
index 1f748a425ad8..1ba210c257ac 100644
--- a/adev/src/content/aria/_build-info.json
+++ b/adev/src/content/aria/_build-info.json
@@ -1,4 +1,4 @@
{
"branchName": "refs/heads/main",
- "sha": "476f7b12a420eab0ce5d9c0844478019fa24d0e2"
+ "sha": "d03c36f1e107ac2a9db0b8b9cd962ab4630adc89"
}
\ No newline at end of file
diff --git a/adev/src/content/aria/aria-accordion.json b/adev/src/content/aria/aria-accordion.json
index c20aa8aecf84..a020eb71ac95 100755
--- a/adev/src/content/aria/aria-accordion.json
+++ b/adev/src/content/aria/aria-accordion.json
@@ -4,6 +4,31 @@
"moduleName": "@angular/aria/accordion",
"normalizedModuleName": "angular_aria_accordion",
"entries": [
+ {
+ "name": "AccordionContent",
+ "isAbstract": false,
+ "entryType": "undecorated_class",
+ "members": [],
+ "generics": [],
+ "description": "A structural directive that provides a mechanism for lazily rendering the content for an\n`ngAccordionPanel`.\n\nThis directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\nIt allows the content of the panel to be lazily rendered, improving performance\nby only creating the content when the panel is first expanded.\n\n```html\n\n \n This is the content that will be displayed inside the panel.
\n \n\n```",
+ "jsdocTags": [
+ {
+ "name": "developerPreview",
+ "comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
+ }
+ ],
+ "rawComment": "/**\n * A structural directive that provides a mechanism for lazily rendering the content for an\n * `ngAccordionPanel`.\n *\n * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\n * It allows the content of the panel to be lazily rendered, improving performance\n * by only creating the content when the panel is first expanded.\n *\n * ```html\n * \n * \n * This is the content that will be displayed inside the panel.
\n * \n * \n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
+ "implements": [],
+ "source": {
+ "filePath": "src/aria/accordion/accordion-content.ts",
+ "startLine": 31,
+ "endLine": 35
+ }
+ },
{
"name": "AccordionPanel",
"isAbstract": false,
@@ -11,7 +36,7 @@
"members": [
{
"name": "id",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -21,7 +46,7 @@
},
{
"name": "panelId",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -31,7 +56,7 @@
},
{
"name": "visible",
- "type": "any",
+ "type": "Signal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -145,14 +170,18 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * The content panel of an accordion item that is conditionally visible.\n *\n * This directive is a container for the content that is shown or hidden. It requires\n * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\n * The content within the panel should be provided using an `ng-template` with the\n * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger\n * is expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\n * its content from assistive technologies when not visible.\n *\n * ```html\n * \n * \n * This content is lazily rendered and will be shown when the panel is expanded.
\n * \n * \n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * The content panel of an accordion item that is conditionally visible.\n *\n * This directive is a container for the content that is shown or hidden. It requires\n * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\n * The content within the panel should be provided using an `ng-template` with the\n * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger\n * is expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\n * its content from assistive technologies when not visible.\n *\n * ```html\n * \n * \n * This content is lazily rendered and will be shown when the panel is expanded.
\n * \n * \n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 52,
- "endLine": 113
+ "filePath": "/src/aria/accordion/accordion-panel.ts",
+ "startLine": 42,
+ "endLine": 103
}
},
{
@@ -172,7 +201,7 @@
},
{
"name": "id",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly",
@@ -185,7 +214,7 @@
},
{
"name": "panelId",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly",
@@ -198,7 +227,7 @@
},
{
"name": "disabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -211,7 +240,7 @@
},
{
"name": "expanded",
- "type": "any",
+ "type": "ModelSignal",
"memberType": "property",
"memberTags": [
"readonly",
@@ -226,7 +255,7 @@
},
{
"name": "active",
- "type": "any",
+ "type": "Signal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -340,9 +369,13 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n *\n * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\n * controls. When clicked, it will expand or collapse the panel. It also handles keyboard\n * interactions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\n * The `disabled` input can be used to disable the trigger.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n *\n * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\n * controls. When clicked, it will expand or collapse the panel. It also handles keyboard\n * interactions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\n * The `disabled` input can be used to disable the trigger.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"isStandalone": true,
"selector": "[ngAccordionTrigger]",
@@ -350,9 +383,9 @@
"ngAccordionTrigger"
],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 132,
- "endLine": 197
+ "filePath": "/src/aria/accordion/accordion-trigger.ts",
+ "startLine": 42,
+ "endLine": 107
}
},
{
@@ -372,7 +405,7 @@
},
{
"name": "textDirection",
- "type": "any",
+ "type": "WritableSignal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -382,7 +415,7 @@
},
{
"name": "disabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -395,7 +428,7 @@
},
{
"name": "multiExpandable",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -408,7 +441,7 @@
},
{
"name": "softDisabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -421,7 +454,7 @@
},
{
"name": "wrap",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -505,9 +538,13 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * A container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\n * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\n * It supports both single and multiple expansion modes.\n *\n * ```html\n * \n * \n * \n * \n *
\n * \n * \n * Content for Item 1.
\n * \n * \n * \n * \n * \n * \n *
\n * \n * \n * Content for Item 2.
\n * \n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * A container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\n * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\n * It supports both single and multiple expansion modes.\n *\n * ```html\n * \n * \n * \n * \n *
\n * \n * \n * Content for Item 1.
\n * \n * \n * \n * \n * \n * \n *
\n * \n * \n * Content for Item 2.
\n * \n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"isStandalone": true,
"selector": "[ngAccordionGroup]",
@@ -515,30 +552,9 @@
"ngAccordionGroup"
],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 234,
- "endLine": 329
- }
- },
- {
- "name": "AccordionContent",
- "isAbstract": false,
- "entryType": "undecorated_class",
- "members": [],
- "generics": [],
- "description": "A structural directive that provides a mechanism for lazily rendering the content for an\n`ngAccordionPanel`.\n\nThis directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\nIt allows the content of the panel to be lazily rendered, improving performance\nby only creating the content when the panel is first expanded.\n\n```html\n\n \n This is the content that will be displayed inside the panel.
\n \n\n```",
- "jsdocTags": [
- {
- "name": "developerPreview",
- "comment": "21.0"
- }
- ],
- "rawComment": "/**\n * A structural directive that provides a mechanism for lazily rendering the content for an\n * `ngAccordionPanel`.\n *\n * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\n * It allows the content of the panel to be lazily rendered, improving performance\n * by only creating the content when the panel is first expanded.\n *\n * ```html\n * \n * \n * This is the content that will be displayed inside the panel.
\n * \n * \n * ```\n *\n * @developerPreview 21.0\n */",
- "implements": [],
- "source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 349,
- "endLine": 353
+ "filePath": "src/aria/accordion/accordion-group.ts",
+ "startLine": 62,
+ "endLine": 158
}
}
],
@@ -551,18 +567,10 @@
"input",
"@angular/core"
],
- [
- "ElementRef",
- "@angular/core"
- ],
[
"inject",
"@angular/core"
],
- [
- "contentChildren",
- "@angular/core"
- ],
[
"afterRenderEffect",
"@angular/core"
@@ -571,14 +579,6 @@
"signal",
"@angular/core"
],
- [
- "model",
- "@angular/core"
- ],
- [
- "booleanAttribute",
- "@angular/core"
- ],
[
"computed",
"@angular/core"
@@ -592,28 +592,28 @@
"@angular/cdk/a11y"
],
[
- "Directionality",
- "@angular/cdk/bidi"
+ "ElementRef",
+ "@angular/core"
],
[
- "DeferredContent",
- "@angular/aria/private"
+ "model",
+ "@angular/core"
],
[
- "DeferredContentAware",
- "@angular/aria/private"
+ "booleanAttribute",
+ "@angular/core"
],
[
- "AccordionGroupPattern",
- "@angular/aria/private"
+ "contentChildren",
+ "@angular/core"
],
[
- "AccordionPanelPattern",
- "@angular/aria/private"
+ "Directionality",
+ "@angular/cdk/bidi"
],
[
- "AccordionTriggerPattern",
- "@angular/aria/private"
+ "AccordionContent",
+ "@angular/aria/accordion"
],
[
"AccordionPanel",
@@ -734,10 +734,6 @@
[
"AccordionGroup.collapseAll",
"@angular/aria/accordion"
- ],
- [
- "AccordionContent",
- "@angular/aria/accordion"
]
]
}
\ No newline at end of file
diff --git a/adev/src/content/aria/aria-combobox.json b/adev/src/content/aria/aria-combobox.json
index 1ac7e96b4978..8669dc0c0ae8 100755
--- a/adev/src/content/aria/aria-combobox.json
+++ b/adev/src/content/aria/aria-combobox.json
@@ -5,153 +5,79 @@
"normalizedModuleName": "angular_aria_combobox",
"entries": [
{
- "name": "Combobox",
+ "name": "ComboboxPopupContainer",
"isAbstract": false,
"entryType": "undecorated_class",
- "members": [
- {
- "name": "textDirection",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "protected"
- ],
- "description": "A signal wrapper for directionality.",
- "jsdocTags": []
- },
- {
- "name": "element",
- "type": "HTMLElement",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "A reference to the combobox element.",
- "jsdocTags": []
- },
- {
- "name": "popup",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "The combobox popup.",
- "jsdocTags": []
- },
+ "members": [],
+ "generics": [],
+ "description": "A structural directive that marks the `ng-template` to be used as the popup\nfor a combobox. This content is conditionally rendered.\n\nThe content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\nflexible and complex combobox implementations. The consumer is responsible for\nimplementing the filtering logic based on the `ngComboboxInput`'s value.\n\n```html\n\n \n \n \n \n```\n\nWhen using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n\n```html\n\n \n \n \n\n```",
+ "jsdocTags": [
{
- "name": "filterMode",
- "type": "any",
- "memberType": "property",
- "memberTags": [],
- "description": "The filter mode for the combobox.\n- `manual`: The consumer is responsible for filtering the options.\n- `auto-select`: The combobox automatically selects the first matching option.\n- `highlight`: The combobox highlights matching text in the options without changing selection.",
- "jsdocTags": []
+ "name": "developerPreview",
+ "comment": "21.0"
},
{
- "name": "disabled",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is disabled.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Combobox](guide/aria/combobox)"
},
{
- "name": "readonly",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is read-only.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Select](guide/aria/select)"
},
{
- "name": "firstMatch",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "The value of the first matching item in the popup.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Multiselect](guide/aria/multiselect)"
},
{
- "name": "expanded",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is expanded.",
- "jsdocTags": []
- },
+ "name": "see",
+ "comment": "[Autocomplete](guide/aria/autocomplete)"
+ }
+ ],
+ "rawComment": "/**\n * A structural directive that marks the `ng-template` to be used as the popup\n * for a combobox. This content is conditionally rendered.\n *\n * The content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\n * flexible and complex combobox implementations. The consumer is responsible for\n * implementing the filtering logic based on the `ngComboboxInput`'s value.\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n *\n * @see [Combobox](guide/aria/combobox)\n * @see [Select](guide/aria/select)\n * @see [Multiselect](guide/aria/multiselect)\n * @see [Autocomplete](guide/aria/autocomplete)\n */",
+ "implements": [],
+ "source": {
+ "filePath": "src/aria/combobox/combobox-popup-container.ts",
+ "startLine": 47,
+ "endLine": 52
+ }
+ },
+ {
+ "name": "ComboboxDialog",
+ "isAbstract": false,
+ "entryType": "directive",
+ "members": [
{
- "name": "alwaysExpanded",
- "type": "any",
+ "name": "element",
+ "type": "HTMLElement",
"memberType": "property",
"memberTags": [
"readonly"
],
- "description": "Whether the combobox popup should always be expanded, regardless of user interaction.",
+ "description": "A reference to the dialog element.",
"jsdocTags": []
},
{
- "name": "inputElement",
- "type": "any",
+ "name": "combobox",
+ "type": "Combobox",
"memberType": "property",
"memberTags": [
"readonly"
],
- "description": "Input element connected to the combobox, if any.",
+ "description": "The combobox that the dialog belongs to.",
"jsdocTags": []
},
- {
- "name": "open",
- "signatures": [
- {
- "name": "open",
- "entryType": "function",
- "description": "Opens the combobox to the selected item.",
- "generics": [],
- "isNewType": false,
- "jsdocTags": [],
- "params": [],
- "rawComment": "/** Opens the combobox to the selected item. */",
- "returnType": "void"
- }
- ],
- "implementation": {
- "params": [],
- "isNewType": false,
- "returnType": "void",
- "generics": [],
- "name": "open",
- "description": "Opens the combobox to the selected item.",
- "entryType": "function",
- "jsdocTags": [],
- "rawComment": "/** Opens the combobox to the selected item. */"
- },
- "entryType": "function",
- "description": "Opens the combobox to the selected item.",
- "jsdocTags": [],
- "rawComment": "/** Opens the combobox to the selected item. */",
- "memberType": "method",
- "memberTags": []
- },
{
"name": "close",
"signatures": [
{
"name": "close",
"entryType": "function",
- "description": "Closes the combobox.",
+ "description": "",
"generics": [],
"isNewType": false,
"jsdocTags": [],
"params": [],
- "rawComment": "/** Closes the combobox. */",
+ "rawComment": "",
"returnType": "void"
}
],
@@ -161,41 +87,54 @@
"returnType": "void",
"generics": [],
"name": "close",
- "description": "Closes the combobox.",
+ "description": "",
"entryType": "function",
"jsdocTags": [],
- "rawComment": "/** Closes the combobox. */"
+ "rawComment": ""
},
"entryType": "function",
- "description": "Closes the combobox.",
+ "description": "",
"jsdocTags": [],
- "rawComment": "/** Closes the combobox. */",
+ "rawComment": "",
"memberType": "method",
"memberTags": []
}
],
- "generics": [
- {
- "name": "V"
- }
- ],
- "description": "The container element that wraps a combobox input and popup, and orchestrates its behavior.\n\nThe `ngCombobox` directive is the main entry point for creating a combobox and customizing its\nbehavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\nis defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n`CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n\n```html\n\n \n ",
+ "generics": [],
+ "description": "Integrates a native `\n \n\n```"
- },
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Combobox](guide/aria/combobox)"
+ },
+ {
+ "name": "see",
+ "comment": "[Select](guide/aria/select)"
+ },
+ {
+ "name": "see",
+ "comment": "[Multiselect](guide/aria/multiselect)"
+ },
+ {
+ "name": "see",
+ "comment": "[Autocomplete](guide/aria/autocomplete)"
}
],
- "rawComment": "/**\n * The container element that wraps a combobox input and popup, and orchestrates its behavior.\n *\n * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its\n * behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\n * is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n * `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n *\n * ```html\n * \n * \n * \n * @for (option of filteredOptions(); track option) {\n * \n * {{option}}\n * \n * }\n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * Integrates a native `
API Reference
(click)="setItemType(itemType)" >-
- @for (item of navigationItems; track $index) {
-
-
-
- {{item.label}}
-
+
+ -
+ @for (item of navigationItems; track $index) {
+
-
+
+ {{ item.label }}
+
- @if (item.children && item.children.length > 0) {
-
+ @if (item.children && item.children.length > 0) { + + } +
}
-
- }
- -
+
+ {{ item.label }}
+
- @if (item.children && item.children.length > 0) {
-
@if (embeddedEditorComponent) {
diff --git a/adev/src/app/features/update/recommendations.ts b/adev/src/app/features/update/recommendations.ts
index 60456e8abee0..a198a77cf8ec 100644
--- a/adev/src/app/features/update/recommendations.ts
+++ b/adev/src/app/features/update/recommendations.ts
@@ -2604,7 +2604,8 @@ export const RECOMMENDATIONS: Step[] = [
necessaryAsOf: 2000,
level: ApplicationComplexity.Medium,
step: '20.0.0_rename_rxResource_loader_to_stream',
- action: 'Rename the `loader` property passed in rxResources to `stream`.',
+ action:
+ 'Rename the `request` and `loader` properties passed in RxResource to `params` and `stream`.',
},
{
possibleIn: 2000,
diff --git a/adev/src/app/features/update/update.component.html b/adev/src/app/features/update/update.component.html
index 776ae55de6ee..5ebb3dcbb8c9 100644
--- a/adev/src/app/features/update/update.component.html
+++ b/adev/src/app/features/update/update.component.html
@@ -19,7 +19,7 @@ Angular versions
-
@for (version of versions; track $index) {
- - @@ -40,7 +40,7 @@
- - @@ -70,7 +70,7 @@
Angular versions
-
@for (version of versions; track $index) {
Angular versions
Warning: @@ -86,7 +86,7 @@
Application complexity
Other dependencies
Package Manager
@if ( - beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0 + beforeRecommendations.length > 0 || + duringRecommendations.length > 0 || + afterRecommendations.length > 0 ) {
-
;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [UpdateComponent],
+ providers: [provideRouter([]), provideHttpClient(), provideHttpClientTesting()],
+ });
+ fixture = TestBed.createComponent(UpdateComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('getComplexityLevelName', () => {
+ it('should return "Basic" for ApplicationComplexity.Basic', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Basic)).toBe('Basic');
+ });
+
+ it('should return "Medium" for ApplicationComplexity.Medium', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Medium)).toBe('Medium');
+ });
+
+ it('should return "Advanced" for ApplicationComplexity.Advanced', () => {
+ expect(component['getComplexityLevelName'](ApplicationComplexity.Advanced)).toBe('Advanced');
+ });
+
+ it('should return "Unknown" for invalid complexity level', () => {
+ expect(component['getComplexityLevelName'](999 as ApplicationComplexity)).toBe('Unknown');
+ });
+ });
+
+ describe('complexity badges rendering', () => {
+ it('should display complexity badges for recommendations', async () => {
+ // Find the "Show me how to update!" button and click it to trigger recommendations
+ const showButton: HTMLElement = fixture.debugElement.query(
+ By.css('.show-button'),
+ )?.nativeElement;
+
+ expect(showButton).toBeTruthy();
+ showButton.click();
+ fixture.detectChanges();
+
+ // Wait for all async operations to complete (marked parsing, router navigation, etc.)
+ await fixture.whenStable();
+
+ // Additional wait for marked parsing
+ await new Promise((resolve) => setTimeout(resolve, 300));
+ fixture.detectChanges();
+
+ const badges = fixture.nativeElement.querySelectorAll('.adev-complexity-badge');
+
+ // For the default versions (20.0 -> 21.0) with level 1, verify badges are rendered
+ if (badges.length > 0) {
+ // Check the first badge
+ const badge = badges[0];
+ const badgeText = badge.textContent?.trim();
+
+ // Badge text should be one of the valid complexity levels
+ expect(['Basic', 'Medium', 'Advanced']).toContain(badgeText);
+
+ // Badge should have appropriate CSS class
+ const hasComplexityClass =
+ badge.classList.contains('adev-complexity-1') ||
+ badge.classList.contains('adev-complexity-2') ||
+ badge.classList.contains('adev-complexity-3');
+ expect(hasComplexityClass).toBe(true);
+ } else {
+ // If no recommendations exist for these versions, that's acceptable
+ // The test verifies the component renders without errors
+ expect(badges.length).toBe(0);
+ }
+ });
+ });
+});
diff --git a/adev/src/app/features/update/update.component.ts b/adev/src/app/features/update/update.component.ts
index 6ee0d2dee2fd..0b3539986f5b 100644
--- a/adev/src/app/features/update/update.component.ts
+++ b/adev/src/app/features/update/update.component.ts
@@ -7,7 +7,7 @@
*/
import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
-import {Step, RECOMMENDATIONS} from './recommendations';
+import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations';
import {Clipboard} from '@angular/cdk/clipboard';
import {CdkMenuModule} from '@angular/cdk/menu';
import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -294,6 +294,16 @@ export default class UpdateComponent {
}
}
+ protected getComplexityLevelName(level: ApplicationComplexity): string {
+ const names: Record = {
+ [ApplicationComplexity.Basic]: 'Basic',
+ [ApplicationComplexity.Medium]: 'Medium',
+ [ApplicationComplexity.Advanced]: 'Advanced',
+ };
+
+ return names[level] ?? 'Unknown';
+ }
+
private replaceVariables(action: string): string {
let newAction = action;
newAction = newAction.replace(
diff --git a/adev/src/app/routing/routes.ts b/adev/src/app/routing/routes.ts
index 79758cbb555a..5d199e478991 100644
--- a/adev/src/app/routing/routes.ts
+++ b/adev/src/app/routing/routes.ts
@@ -45,7 +45,10 @@ const referencePageRoutes = mapNavigationItemsToRoutes(
const updateGuidePageRoute: Route = {
path: referenceNavigationItems.find((r) => r.path === DEFAULT_PAGES.UPDATE)!.path,
loadComponent: () => import('../features/update/update.component'),
- data: commonReferenceRouteData,
+ data: {
+ ...commonReferenceRouteData,
+ label: 'Update guide',
+ },
};
const cliReferencePageRoutes = mapNavigationItemsToRoutes(
@@ -155,7 +158,7 @@ export const routes: Route[] = [
// Error page
{
path: '**',
- loadComponent: () => import('../features/docs/docs.component'),
- resolve: {'docContent': contentResolver('error')},
+ loadComponent: () => import('../features/not-found/not-found').then((m) => m.NotFound),
+ data: {label: 'Page not found'},
},
];
diff --git a/adev/src/app/routing/sub-navigation-data.ts b/adev/src/app/routing/sub-navigation-data.ts
index a859ab2e1aa1..a5f0cdd05a95 100644
--- a/adev/src/app/routing/sub-navigation-data.ts
+++ b/adev/src/app/routing/sub-navigation-data.ts
@@ -1,4 +1,4 @@
-/*!
+/**
* @license
* Copyright Google LLC All Rights Reserved.
*
@@ -9,7 +9,7 @@
import {isDevMode} from '@angular/core';
import {NavigationItem} from '@angular/docs';
-// These 2 imports are expected to be red because they are generated a build time
+// These imports are expected to be red because they are generated a build time
import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
@@ -94,6 +94,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
children: [
{
label: 'Signals',
+ status: 'updated',
children: [
{
label: 'Overview',
@@ -110,6 +111,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/signals/resource',
contentPath: 'guide/signals/resource',
},
+ {
+ label: 'Side effects for non-reactives APIs',
+ path: 'guide/signals/effect',
+ contentPath: 'guide/signals/effect',
+ status: 'new',
+ },
],
},
{
@@ -443,6 +450,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'guide/forms/signals/models',
contentPath: 'guide/forms/signals/models',
},
+ {
+ label: 'Form model design',
+ path: 'guide/forms/signals/model-design',
+ contentPath: 'guide/forms/signals/designing-your-form-model',
+ },
{
label: 'Field state management',
path: 'guide/forms/signals/field-state-management',
diff --git a/adev/src/assets/BUILD.bazel b/adev/src/assets/BUILD.bazel
index 5835c283f5cd..ea9ca7f12955 100644
--- a/adev/src/assets/BUILD.bazel
+++ b/adev/src/assets/BUILD.bazel
@@ -12,7 +12,7 @@ copy_to_directory(
"//adev/src/content/best-practices",
"//adev/src/content/best-practices/runtime-performance",
"//adev/src/content/cdk:cdk_docs",
- "//adev/src/content/cli/help:cli_docs",
+ "//adev/src/content/cli:cli_docs",
"//adev/src/content/ecosystem",
"//adev/src/content/ecosystem/rxjs-interop",
"//adev/src/content/ecosystem/service-workers",
@@ -94,7 +94,7 @@ copy_to_directory(
"//tools/manual_api_docs/elements:elements_docs",
],
replace_prefixes = {
- "adev/src/content/cli/help/cli_docs_html": "cli/",
+ "adev/src/content/cli/cli_docs_html": "cli/",
"adev/src/content/aria/aria_docs_html": "api/",
"adev/src/content/cdk/cdk_docs_html": "api/",
"adev/src/content": "",
diff --git a/adev/src/content/ai/design-patterns.md b/adev/src/content/ai/design-patterns.md
index cdcd7530d318..d40582e24cdd 100644
--- a/adev/src/content/ai/design-patterns.md
+++ b/adev/src/content/ai/design-patterns.md
@@ -27,11 +27,14 @@ storyResource = resource({
loader: ({params}): Promise => {
// The params value is the current value of the storyInput signal
const url = this.endpoint();
- return runFlow({ url, input: {
- userInput: params,
- sessionId: this.storyService.sessionId() // Read from another signal
- }});
- }
+ return runFlow({
+ url,
+ input: {
+ userInput: params,
+ sessionId: this.storyService.sessionId(), // Read from another signal
+ },
+ });
+ },
});
```
@@ -56,7 +59,7 @@ storyParts = linkedSignal({
const existingStoryParts = previous?.value || [];
// Return a new array with the old and new parts
return [...existingStoryParts, ...newStoryParts];
- }
+ },
});
```
@@ -101,23 +104,23 @@ characters = resource({
// exposed by the Genkit client SDK
const response = streamFlow({
url: '/streamCharacters',
- input: 10
+ input: 10,
});
(async () => {
for await (const chunk of response.stream) {
data.update((prev) => {
if ('value' in prev) {
- return { value: `${prev.value} ${chunk}` };
+ return {value: `${prev.value} ${chunk}`};
} else {
- return { error: chunk as unknown as Error };
+ return {error: chunk as unknown as Error};
}
});
}
})();
return data;
- }
+ },
});
```
@@ -136,38 +139,39 @@ The `characters` member is updated asynchronously and can be displayed in the te
On the server side, in `server.ts` for example, the defined endpoint sends the data to be streamed to the client. The following code uses Gemini with the Genkit framework but this technique is applicable to other APIs that support streaming responses from LLMs:
```ts
-import { startFlowServer } from '@genkit-ai/express';
-import { genkit } from "genkit/beta";
-import { googleAI, gemini20Flash } from "@genkit-ai/googleai";
+import {startFlowServer} from '@genkit-ai/express';
+import {genkit} from 'genkit/beta';
+import {googleAI, gemini20Flash} from '@genkit-ai/googleai';
-const ai = genkit({ plugins: [googleAI()] });
+const ai = genkit({plugins: [googleAI()]});
-export const streamCharacters = ai.defineFlow({
+export const streamCharacters = ai.defineFlow(
+ {
name: 'streamCharacters',
inputSchema: z.number(),
outputSchema: z.string(),
streamSchema: z.string(),
},
- async (count, { sendChunk }) => {
- const { response, stream } = ai.generateStream({
- model: gemini20Flash,
- config: {
- temperature: 1,
- },
- prompt: `Generate ${count} different RPG game characters.`,
- });
-
- (async () => {
- for await (const chunk of stream) {
- sendChunk(chunk.content[0].text!);
- }
- })();
-
- return (await response).text;
-});
+ async (count, {sendChunk}) => {
+ const {response, stream} = ai.generateStream({
+ model: gemini20Flash,
+ config: {
+ temperature: 1,
+ },
+ prompt: `Generate ${count} different RPG game characters.`,
+ });
+
+ (async () => {
+ for await (const chunk of stream) {
+ sendChunk(chunk.content[0].text!);
+ }
+ })();
+
+ return (await response).text;
+ },
+);
startFlowServer({
flows: [streamCharacters],
});
-
```
diff --git a/adev/src/content/ai/mcp-server-setup.md b/adev/src/content/ai/mcp-server-setup.md
index 148c4311059d..7379067dfc78 100644
--- a/adev/src/content/ai/mcp-server-setup.md
+++ b/adev/src/content/ai/mcp-server-setup.md
@@ -19,9 +19,13 @@ The Angular CLI MCP server provides several tools to assist you in your developm
Some tools are provided in experimental / preview status since they are new or not fully tested. Enable them individually with the [`--experimental-tool`](#command-options) option and use them with caution.
-| Name | Description | `local-only` | `read-only` |
-| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations) | ✅ | ❌ |
+| Name | Description | `local-only` | `read-only` |
+| :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: |
+| `build` | Perform a one-off, non-watched build using `ng build`. | ✅ | ❌ |
+| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](/reference/migrations) | ✅ | ❌ |
+| `start_devserver` | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `stop_devserver` and `wait_for_devserver_build` tools. | ✅ | ✅ |
+| `stop_devserver` | Stops a development server started by `start_devserver`. | ✅ | ✅ |
+| `wait_for_devserver_build` | Returns the output logs of the most recent build in a running development server started by `start_devserver`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs. | ✅ | ✅ |
## Get Started
diff --git a/adev/src/content/aria/_build-info.json b/adev/src/content/aria/_build-info.json
index 1f748a425ad8..1ba210c257ac 100644
--- a/adev/src/content/aria/_build-info.json
+++ b/adev/src/content/aria/_build-info.json
@@ -1,4 +1,4 @@
{
"branchName": "refs/heads/main",
- "sha": "476f7b12a420eab0ce5d9c0844478019fa24d0e2"
+ "sha": "d03c36f1e107ac2a9db0b8b9cd962ab4630adc89"
}
\ No newline at end of file
diff --git a/adev/src/content/aria/aria-accordion.json b/adev/src/content/aria/aria-accordion.json
index c20aa8aecf84..a020eb71ac95 100755
--- a/adev/src/content/aria/aria-accordion.json
+++ b/adev/src/content/aria/aria-accordion.json
@@ -4,6 +4,31 @@
"moduleName": "@angular/aria/accordion",
"normalizedModuleName": "angular_aria_accordion",
"entries": [
+ {
+ "name": "AccordionContent",
+ "isAbstract": false,
+ "entryType": "undecorated_class",
+ "members": [],
+ "generics": [],
+ "description": "A structural directive that provides a mechanism for lazily rendering the content for an\n`ngAccordionPanel`.\n\nThis directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\nIt allows the content of the panel to be lazily rendered, improving performance\nby only creating the content when the panel is first expanded.\n\n```html\n",
"memberType": "property",
"memberTags": [
"readonly"
@@ -21,7 +46,7 @@
},
{
"name": "panelId",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -31,7 +56,7 @@
},
{
"name": "visible",
- "type": "any",
+ "type": "Signal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -145,14 +170,18 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * The content panel of an accordion item that is conditionally visible.\n *\n * This directive is a container for the content that is shown or hidden. It requires\n * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\n * The content within the panel should be provided using an `ng-template` with the\n * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger\n * is expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\n * its content from assistive technologies when not visible.\n *\n * ```html\n * ",
"memberType": "property",
"memberTags": [
"readonly",
@@ -185,7 +214,7 @@
},
{
"name": "panelId",
- "type": "any",
+ "type": "InputSignal",
"memberType": "property",
"memberTags": [
"readonly",
@@ -198,7 +227,7 @@
},
{
"name": "disabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -211,7 +240,7 @@
},
{
"name": "expanded",
- "type": "any",
+ "type": "ModelSignal",
"memberType": "property",
"memberTags": [
"readonly",
@@ -226,7 +255,7 @@
},
{
"name": "active",
- "type": "any",
+ "type": "Signal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -340,9 +369,13 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n *\n * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\n * controls. When clicked, it will expand or collapse the panel. It also handles keyboard\n * interactions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\n * The `disabled` input can be used to disable the trigger.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n *\n * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\n * controls. When clicked, it will expand or collapse the panel. It also handles keyboard\n * interactions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\n * The `disabled` input can be used to disable the trigger.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"isStandalone": true,
"selector": "[ngAccordionTrigger]",
@@ -350,9 +383,9 @@
"ngAccordionTrigger"
],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 132,
- "endLine": 197
+ "filePath": "/src/aria/accordion/accordion-trigger.ts",
+ "startLine": 42,
+ "endLine": 107
}
},
{
@@ -372,7 +405,7 @@
},
{
"name": "textDirection",
- "type": "any",
+ "type": "WritableSignal",
"memberType": "property",
"memberTags": [
"readonly"
@@ -382,7 +415,7 @@
},
{
"name": "disabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -395,7 +428,7 @@
},
{
"name": "multiExpandable",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -408,7 +441,7 @@
},
{
"name": "softDisabled",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -421,7 +454,7 @@
},
{
"name": "wrap",
- "type": "any",
+ "type": "InputSignalWithTransform",
"memberType": "property",
"memberTags": [
"readonly",
@@ -505,9 +538,13 @@
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
}
],
- "rawComment": "/**\n * A container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\n * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\n * It supports both single and multiple expansion modes.\n *\n * ```html\n * \n \n```\n\nWhen using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n\n```html\n\n \n * \n * ```\n *\n * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n *\n * ```html\n * \n * ",
"memberType": "property",
"memberTags": [
"readonly"
],
- "description": "Input element connected to the combobox, if any.",
+ "description": "The combobox that the dialog belongs to.",
"jsdocTags": []
},
- {
- "name": "open",
- "signatures": [
- {
- "name": "open",
- "entryType": "function",
- "description": "Opens the combobox to the selected item.",
- "generics": [],
- "isNewType": false,
- "jsdocTags": [],
- "params": [],
- "rawComment": "/** Opens the combobox to the selected item. */",
- "returnType": "void"
- }
- ],
- "implementation": {
- "params": [],
- "isNewType": false,
- "returnType": "void",
- "generics": [],
- "name": "open",
- "description": "Opens the combobox to the selected item.",
- "entryType": "function",
- "jsdocTags": [],
- "rawComment": "/** Opens the combobox to the selected item. */"
- },
- "entryType": "function",
- "description": "Opens the combobox to the selected item.",
- "jsdocTags": [],
- "rawComment": "/** Opens the combobox to the selected item. */",
- "memberType": "method",
- "memberTags": []
- },
{
"name": "close",
"signatures": [
{
"name": "close",
"entryType": "function",
- "description": "Closes the combobox.",
+ "description": "",
"generics": [],
"isNewType": false,
"jsdocTags": [],
"params": [],
- "rawComment": "/** Closes the combobox. */",
+ "rawComment": "",
"returnType": "void"
}
],
@@ -161,41 +87,54 @@
"returnType": "void",
"generics": [],
"name": "close",
- "description": "Closes the combobox.",
+ "description": "",
"entryType": "function",
"jsdocTags": [],
- "rawComment": "/** Closes the combobox. */"
+ "rawComment": ""
},
"entryType": "function",
- "description": "Closes the combobox.",
+ "description": "",
"jsdocTags": [],
- "rawComment": "/** Closes the combobox. */",
+ "rawComment": "",
"memberType": "method",
"memberTags": []
}
],
- "generics": [
- {
- "name": "V"
- }
- ],
- "description": "The container element that wraps a combobox input and popup, and orchestrates its behavior.\n\nThe `ngCombobox` directive is the main entry point for creating a combobox and customizing its\nbehavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\nis defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n`CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n\n```html\n
{{title()}}
+{{ title() }}
Before you update
- @for (r of beforeRecommendations; track $index) { + @for (r of beforeRecommendations; track $index) {
+
+
+ {{ getComplexityLevelName(r.level) }}
+
+
Update to the new version
@for (r of duringRecommendations; track $index) {
+
+
+ {{ getComplexityLevelName(r.level) }}
+
+
After you update
@for (r of afterRecommendations; track $index) {
+
+
+ {{ getComplexityLevelName(r.level) }}
+
+
\n \n \n
\n```",
+ "jsdocTags": [
+ {
+ "name": "developerPreview",
+ "comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Accordion](guide/aria/accordion)"
+ }
+ ],
+ "rawComment": "/**\n * A structural directive that provides a mechanism for lazily rendering the content for an\n * `ngAccordionPanel`.\n *\n * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\n * It allows the content of the panel to be lazily rendered, improving performance\n * by only creating the content when the panel is first expanded.\n *\n * ```html\n * This is the content that will be displayed inside the panel.
\n\n * \n * \n *
\n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
+ "implements": [],
+ "source": {
+ "filePath": "src/aria/accordion/accordion-content.ts",
+ "startLine": 31,
+ "endLine": 35
+ }
+ },
{
"name": "AccordionPanel",
"isAbstract": false,
@@ -11,7 +36,7 @@
"members": [
{
"name": "id",
- "type": "any",
+ "type": "InputSignalThis is the content that will be displayed inside the panel.
\n *\n * \n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * The content panel of an accordion item that is conditionally visible.\n *\n * This directive is a container for the content that is shown or hidden. It requires\n * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\n * The content within the panel should be provided using an `ng-template` with the\n * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger\n * is expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\n * its content from assistive technologies when not visible.\n *\n * ```html\n * This content is lazily rendered and will be shown when the panel is expanded.
\n *\n * \n * \n *
\n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 52,
- "endLine": 113
+ "filePath": "/src/aria/accordion/accordion-panel.ts",
+ "startLine": 42,
+ "endLine": 103
}
},
{
@@ -172,7 +201,7 @@
},
{
"name": "id",
- "type": "any",
+ "type": "InputSignalThis content is lazily rendered and will be shown when the panel is expanded.
\n *\n *
\n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * A container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\n * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\n * It supports both single and multiple expansion modes.\n *\n * ```html\n * \n *
\n * \n * \n *
\n *\n * \n * \n *
\n * Content for Item 1.
\n *\n *
\n * \n * \n *
\n *\n * \n * \n *
\n * Content for Item 2.
\n *\n *
\n * ```\n *\n * @developerPreview 21.0\n * @see [Accordion](guide/aria/accordion)\n */",
"implements": [],
"isStandalone": true,
"selector": "[ngAccordionGroup]",
@@ -515,30 +552,9 @@
"ngAccordionGroup"
],
"source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 234,
- "endLine": 329
- }
- },
- {
- "name": "AccordionContent",
- "isAbstract": false,
- "entryType": "undecorated_class",
- "members": [],
- "generics": [],
- "description": "A structural directive that provides a mechanism for lazily rendering the content for an\n`ngAccordionPanel`.\n\nThis directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\nIt allows the content of the panel to be lazily rendered, improving performance\nby only creating the content when the panel is first expanded.\n\n```html\n\n *
\n * \n * \n *
\n *\n * \n * \n *
\n * Content for Item 1.
\n *\n *
\n * \n * \n *
\n *\n * \n * \n *
\n * Content for Item 2.
\n *\n \n \n
\n```",
- "jsdocTags": [
- {
- "name": "developerPreview",
- "comment": "21.0"
- }
- ],
- "rawComment": "/**\n * A structural directive that provides a mechanism for lazily rendering the content for an\n * `ngAccordionPanel`.\n *\n * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\n * It allows the content of the panel to be lazily rendered, improving performance\n * by only creating the content when the panel is first expanded.\n *\n * ```html\n * This is the content that will be displayed inside the panel.
\n\n * \n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */",
- "implements": [],
- "source": {
- "filePath": "src/aria/accordion/accordion.ts",
- "startLine": 349,
- "endLine": 353
+ "filePath": "src/aria/accordion/accordion-group.ts",
+ "startLine": 62,
+ "endLine": 158
}
}
],
@@ -551,18 +567,10 @@
"input",
"@angular/core"
],
- [
- "ElementRef",
- "@angular/core"
- ],
[
"inject",
"@angular/core"
],
- [
- "contentChildren",
- "@angular/core"
- ],
[
"afterRenderEffect",
"@angular/core"
@@ -571,14 +579,6 @@
"signal",
"@angular/core"
],
- [
- "model",
- "@angular/core"
- ],
- [
- "booleanAttribute",
- "@angular/core"
- ],
[
"computed",
"@angular/core"
@@ -592,28 +592,28 @@
"@angular/cdk/a11y"
],
[
- "Directionality",
- "@angular/cdk/bidi"
+ "ElementRef",
+ "@angular/core"
],
[
- "DeferredContent",
- "@angular/aria/private"
+ "model",
+ "@angular/core"
],
[
- "DeferredContentAware",
- "@angular/aria/private"
+ "booleanAttribute",
+ "@angular/core"
],
[
- "AccordionGroupPattern",
- "@angular/aria/private"
+ "contentChildren",
+ "@angular/core"
],
[
- "AccordionPanelPattern",
- "@angular/aria/private"
+ "Directionality",
+ "@angular/cdk/bidi"
],
[
- "AccordionTriggerPattern",
- "@angular/aria/private"
+ "AccordionContent",
+ "@angular/aria/accordion"
],
[
"AccordionPanel",
@@ -734,10 +734,6 @@
[
"AccordionGroup.collapseAll",
"@angular/aria/accordion"
- ],
- [
- "AccordionContent",
- "@angular/aria/accordion"
]
]
}
\ No newline at end of file
diff --git a/adev/src/content/aria/aria-combobox.json b/adev/src/content/aria/aria-combobox.json
index 1ac7e96b4978..8669dc0c0ae8 100755
--- a/adev/src/content/aria/aria-combobox.json
+++ b/adev/src/content/aria/aria-combobox.json
@@ -5,153 +5,79 @@
"normalizedModuleName": "angular_aria_combobox",
"entries": [
{
- "name": "Combobox",
+ "name": "ComboboxPopupContainer",
"isAbstract": false,
"entryType": "undecorated_class",
- "members": [
- {
- "name": "textDirection",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "protected"
- ],
- "description": "A signal wrapper for directionality.",
- "jsdocTags": []
- },
- {
- "name": "element",
- "type": "HTMLElement",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "A reference to the combobox element.",
- "jsdocTags": []
- },
- {
- "name": "popup",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "The combobox popup.",
- "jsdocTags": []
- },
+ "members": [],
+ "generics": [],
+ "description": "A structural directive that marks the `ng-template` to be used as the popup\nfor a combobox. This content is conditionally rendered.\n\nThe content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\nflexible and complex combobox implementations. The consumer is responsible for\nimplementing the filtering logic based on the `ngComboboxInput`'s value.\n\n```html\nThis is the content that will be displayed inside the panel.
\n *\n \n
\n\n \n
\n\n```",
+ "jsdocTags": [
{
- "name": "filterMode",
- "type": "any",
- "memberType": "property",
- "memberTags": [],
- "description": "The filter mode for the combobox.\n- `manual`: The consumer is responsible for filtering the options.\n- `auto-select`: The combobox automatically selects the first matching option.\n- `highlight`: The combobox highlights matching text in the options without changing selection.",
- "jsdocTags": []
+ "name": "developerPreview",
+ "comment": "21.0"
},
{
- "name": "disabled",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is disabled.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Combobox](guide/aria/combobox)"
},
{
- "name": "readonly",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is read-only.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Select](guide/aria/select)"
},
{
- "name": "firstMatch",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "The value of the first matching item in the popup.",
- "jsdocTags": []
+ "name": "see",
+ "comment": "[Multiselect](guide/aria/multiselect)"
},
{
- "name": "expanded",
- "type": "any",
- "memberType": "property",
- "memberTags": [
- "readonly"
- ],
- "description": "Whether the combobox is expanded.",
- "jsdocTags": []
- },
+ "name": "see",
+ "comment": "[Autocomplete](guide/aria/autocomplete)"
+ }
+ ],
+ "rawComment": "/**\n * A structural directive that marks the `ng-template` to be used as the popup\n * for a combobox. This content is conditionally rendered.\n *\n * The content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\n * flexible and complex combobox implementations. The consumer is responsible for\n * implementing the filtering logic based on the `ngComboboxInput`'s value.\n *\n * ```html\n * \n * \n *
\n * \n * \n *
\n * \n * ```\n *\n * @developerPreview 21.0\n *\n * @see [Combobox](guide/aria/combobox)\n * @see [Select](guide/aria/select)\n * @see [Multiselect](guide/aria/multiselect)\n * @see [Autocomplete](guide/aria/autocomplete)\n */",
+ "implements": [],
+ "source": {
+ "filePath": "src/aria/combobox/combobox-popup-container.ts",
+ "startLine": 47,
+ "endLine": 52
+ }
+ },
+ {
+ "name": "ComboboxDialog",
+ "isAbstract": false,
+ "entryType": "directive",
+ "members": [
{
- "name": "alwaysExpanded",
- "type": "any",
+ "name": "element",
+ "type": "HTMLElement",
"memberType": "property",
"memberTags": [
"readonly"
],
- "description": "Whether the combobox popup should always be expanded, regardless of user interaction.",
+ "description": "A reference to the dialog element.",
"jsdocTags": []
},
{
- "name": "inputElement",
- "type": "any",
+ "name": "combobox",
+ "type": "Combobox\n \n \n
\n```"
- },
{
"name": "developerPreview",
"comment": "21.0"
+ },
+ {
+ "name": "see",
+ "comment": "[Combobox](guide/aria/combobox)"
+ },
+ {
+ "name": "see",
+ "comment": "[Select](guide/aria/select)"
+ },
+ {
+ "name": "see",
+ "comment": "[Multiselect](guide/aria/multiselect)"
+ },
+ {
+ "name": "see",
+ "comment": "[Autocomplete](guide/aria/autocomplete)"
}
],
- "rawComment": "/**\n * The container element that wraps a combobox input and popup, and orchestrates its behavior.\n *\n * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its\n * behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\n * is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n * `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n *\n * ```html\n * ",
+ "generics": [],
+ "description": "Integrates a native `
\n\n * \n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */",
+ "rawComment": "/**\n * Integrates a native `\n * @for (option of filteredOptions(); track option) {\n *
\n * \n * {{option}}\n *
\n * }\n *