-
+
diff --git a/docs/src/app/pages/system-variables/system-variables.html b/docs/src/app/pages/system-variables/system-variables.html
index a3174523f806..613e900b60d2 100644
--- a/docs/src/app/pages/system-variables/system-variables.html
+++ b/docs/src/app/pages/system-variables/system-variables.html
@@ -130,7 +130,7 @@
Colors
Alternative Theme Colors
-
+
Surface Colors
@@ -145,7 +145,7 @@
Surface Colors
and icons placed within.
-
+
Fixed Colors
@@ -154,7 +154,7 @@
Fixed Colors
by any Angular Material components.
-
+
diff --git a/docs/src/app/routes.ts b/docs/src/app/routes.ts
index 0c206987ea5a..af7844550f20 100644
--- a/docs/src/app/routes.ts
+++ b/docs/src/app/routes.ts
@@ -9,6 +9,13 @@
import {Routes} from '@angular/router';
import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
+function externalRedirect(target: string) {
+ return () => {
+ window.location.href = target;
+ return ''; // unused due to redirect above
+ };
+}
+
export const MATERIAL_DOCS_ROUTES: Routes = [
{
path: '',
@@ -25,6 +32,31 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
// Since https://github.com/angular/components/pull/9574, the cdk-table guide became the overview
// document for the cdk table. To avoid any dead / broken links, we redirect to the new location.
{path: 'guide/cdk-table', redirectTo: '/cdk/table/overview'},
+ // Component harness, drag & drop docs have moved to angular.dev
+ {
+ path: 'cdk/testing',
+ redirectTo: externalRedirect('https://angular.dev/guide/testing/component-harnesses-overview'),
+ },
+ {
+ path: 'cdk/testing/api',
+ redirectTo: externalRedirect('https://angular.dev/api#angular_cdk_testing'),
+ },
+ {
+ path: 'cdk/testing/:tab',
+ redirectTo: externalRedirect('https://angular.dev/guide/testing/component-harnesses-overview'),
+ },
+ {
+ path: 'cdk/drag-drop',
+ redirectTo: externalRedirect('https://angular.dev/guide/drag-drop'),
+ },
+ {
+ path: 'cdk/drag-drop/api',
+ redirectTo: externalRedirect('https://angular.dev/api#angular_cdk_drag-drop'),
+ },
+ {
+ path: 'cdk/drag-drop/:tab',
+ redirectTo: externalRedirect('https://angular.dev/guide/drag-drop'),
+ },
// In v19, the theming system became based on system variables and the mat.theme mixin.
// The following guides were consolidated into the main theming guide, which redirects
// users to v18 docs if they are looking for this content.
diff --git a/docs/src/app/shared/carousel/carousel.html b/docs/src/app/shared/carousel/carousel.html
index 36c80b36775d..9881f3c037e6 100644
--- a/docs/src/app/shared/carousel/carousel.html
+++ b/docs/src/app/shared/carousel/carousel.html
@@ -8,7 +8,7 @@
diff --git a/docs/src/app/shared/carousel/carousel.spec.ts b/docs/src/app/shared/carousel/carousel.spec.ts
index cc1f55661384..098b0bc60d12 100644
--- a/docs/src/app/shared/carousel/carousel.spec.ts
+++ b/docs/src/app/shared/carousel/carousel.spec.ts
@@ -1,7 +1,7 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, provideZoneChangeDetection, ViewChild} from '@angular/core';
import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
-import {Carousel, CarouselItem} from './carousel';
import {provideRouter} from '@angular/router';
+import {Carousel, CarouselItem} from './carousel';
describe('HorizontalCarousel', () => {
let fixture: ComponentFixture
;
@@ -9,7 +9,7 @@ describe('HorizontalCarousel', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
- providers: [provideRouter([])],
+ providers: [provideRouter([]), provideZoneChangeDetection()],
});
fixture = TestBed.createComponent(CarouselTestComponent);
fixture.nativeElement.style.width = '1300px';
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts b/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
index 9c500951c83b..2328ec7f85f5 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
@@ -1,14 +1,14 @@
+import {Clipboard} from '@angular/cdk/clipboard';
+import {provideHttpClient} from '@angular/common/http';
import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
-import {Component} from '@angular/core';
+import {Component, provideZoneChangeDetection} from '@angular/core';
import {TestBed} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
-import {DocViewer} from './doc-viewer';
-import {ExampleViewer} from '../example-viewer/example-viewer';
-import {MatTooltip} from '@angular/material/tooltip';
import {MatIconButton} from '@angular/material/button';
-import {Clipboard} from '@angular/cdk/clipboard';
-import {provideHttpClient} from '@angular/common/http';
+import {MatTooltip} from '@angular/material/tooltip';
+import {By} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
+import {ExampleViewer} from '../example-viewer/example-viewer';
+import {DocViewer} from './doc-viewer';
describe('DocViewer', () => {
let http: HttpTestingController;
@@ -22,6 +22,7 @@ describe('DocViewer', () => {
provideRouter([]),
provideHttpClient(),
provideHttpClientTesting(),
+ provideZoneChangeDetection(),
],
});
@@ -215,7 +216,7 @@ describe('DocViewer', () => {
@Component({
selector: 'test',
- template: ``,
+ template: ``,
imports: [DocViewer],
})
class DocViewerTestComponent {
@@ -270,7 +271,7 @@ class TestComponent {}
@Component({
selector: 'test',
- template: ``,
+ template: ``,
imports: [DocViewer, TestComponent],
})
class DocViewerWithCompTestComponent {
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.ts b/docs/src/app/shared/doc-viewer/doc-viewer.ts
index ed1b7b05f682..93eb369c1227 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.ts
@@ -59,7 +59,7 @@ class DocFetcher {
selector: 'doc-viewer',
template: `
@if (portal) {
-
+
} @else {
Loading document...
}
diff --git a/docs/src/app/shared/example-viewer/code-snippet.html b/docs/src/app/shared/example-viewer/code-snippet.html
index 61de6b253b15..e0a16f8be887 100644
--- a/docs/src/app/shared/example-viewer/code-snippet.html
+++ b/docs/src/app/shared/example-viewer/code-snippet.html
@@ -1,3 +1,3 @@
diff --git a/docs/src/app/shared/example-viewer/example-viewer.html b/docs/src/app/shared/example-viewer/example-viewer.html
index 96b7f0877c96..5d6683a4bafa 100644
--- a/docs/src/app/shared/example-viewer/example-viewer.html
+++ b/docs/src/app/shared/example-viewer/example-viewer.html
@@ -5,76 +5,110 @@
@if (view() === 'snippet') {
- }
-
- @else {
+ } @else {
-
{{exampleData?.title}}
+
{{exampleData?.title}}
+
+
+
-
+ @if (showCompactToggle()) {
+
+ }
- @if (showCompactToggle()) {
-
@if (view() === 'full') {
-
+
@for (tabName of _exampleTabNames(); track tabName) {
-
+
content_copy
-
+
}
@@ -87,7 +121,7 @@
@let componentType = _exampleComponentType();
@if (componentType && !example?.includes('harness')) {
-
+
} @else {
This example contains tests. Open in Stackblitz to run the tests.
}
diff --git a/docs/src/app/shared/example-viewer/example-viewer.scss b/docs/src/app/shared/example-viewer/example-viewer.scss
index 9f04f3ea9edb..2044036ec64b 100644
--- a/docs/src/app/shared/example-viewer/example-viewer.scss
+++ b/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -13,21 +13,23 @@
}
.docs-example-viewer-title {
- align-content: center;
align-items: center;
display: flex;
- justify-content: center;
+ justify-content: space-between;
padding: 16px 16px 0 24px;
color: var(--mat-sys-on-surface-variant);
}
+.docs-example-viewer-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
.docs-example-viewer-source code-snippet {
border-bottom: 1px solid var(--mat-sys-outline-variant);
}
-.docs-example-viewer-title-spacer {
- flex: 1 1 auto;
-}
.docs-example-viewer-body {
padding: 16px 24px;
diff --git a/docs/src/app/shared/footer/footer.html b/docs/src/app/shared/footer/footer.html
index 3fe8c97a702b..337d1f227680 100644
--- a/docs/src/app/shared/footer/footer.html
+++ b/docs/src/app/shared/footer/footer.html
@@ -2,15 +2,17 @@