diff --git a/docs_app/src/app/app.module.ts b/docs_app/src/app/app.module.ts
index 4ff6a8ff82..5384d73c6e 100644
--- a/docs_app/src/app/app.module.ts
+++ b/docs_app/src/app/app.module.ts
@@ -6,9 +6,9 @@ import { ServiceWorkerModule } from '@angular/service-worker';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
diff --git a/docs_app/src/app/custom-elements/code/code-tabs.module.ts b/docs_app/src/app/custom-elements/code/code-tabs.module.ts
index f9edb67d24..79aafb238e 100644
--- a/docs_app/src/app/custom-elements/code/code-tabs.module.ts
+++ b/docs_app/src/app/custom-elements/code/code-tabs.module.ts
@@ -1,15 +1,15 @@
import { NgModule, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CodeTabsComponent } from './code-tabs.component';
-import { MatCardModule } from '@angular/material/card';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
import { CodeModule } from './code.module';
import { WithCustomElementComponent } from '../element-registry';
@NgModule({
- imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ],
- declarations: [ CodeTabsComponent ],
- exports: [ CodeTabsComponent ]
+ imports: [CommonModule, MatCardModule, MatTabsModule, CodeModule],
+ declarations: [CodeTabsComponent],
+ exports: [CodeTabsComponent],
})
export class CodeTabsModule implements WithCustomElementComponent {
customElementComponent: Type
= CodeTabsComponent;
diff --git a/docs_app/src/app/custom-elements/code/code.component.ts b/docs_app/src/app/custom-elements/code/code.component.ts
index a509106681..ec66231dc4 100644
--- a/docs_app/src/app/custom-elements/code/code.component.ts
+++ b/docs_app/src/app/custom-elements/code/code.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChil
import { Logger } from 'app/shared/logger.service';
import { PrettyPrinter } from './pretty-printer.service';
import { CopierService } from 'app/shared/copier.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { tap } from 'rxjs/operators';
import { StackblitzService } from 'app/shared/stackblitz.service';
import version from '../../../../tools/stackblitz/rxjs.version';
diff --git a/docs_app/src/app/custom-elements/code/code.module.ts b/docs_app/src/app/custom-elements/code/code.module.ts
index cc272d795a..bffcba19eb 100644
--- a/docs_app/src/app/custom-elements/code/code.module.ts
+++ b/docs_app/src/app/custom-elements/code/code.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CodeComponent } from './code.component';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
import { PrettyPrinter } from './pretty-printer.service';
import { CopierService } from 'app/shared/copier.service';
diff --git a/docs_app/src/app/custom-elements/operator-decision-tree/operator-decision-tree.module.ts b/docs_app/src/app/custom-elements/operator-decision-tree/operator-decision-tree.module.ts
index 7ba7aa2d68..be572fe936 100644
--- a/docs_app/src/app/custom-elements/operator-decision-tree/operator-decision-tree.module.ts
+++ b/docs_app/src/app/custom-elements/operator-decision-tree/operator-decision-tree.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule, Type } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatRippleModule } from '@angular/material/core';
import { ScrollService } from 'app/shared/scroll.service';
import { WithCustomElementComponent } from '../element-registry';
diff --git a/docs_app/src/app/layout/doc-viewer/doc-viewer.component.ts b/docs_app/src/app/layout/doc-viewer/doc-viewer.component.ts
index 301bd91b8d..0cef6388a4 100644
--- a/docs_app/src/app/layout/doc-viewer/doc-viewer.component.ts
+++ b/docs_app/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -9,7 +9,6 @@ import { Logger } from 'app/shared/logger.service';
import { TocService } from 'app/shared/toc.service';
import { ElementsLoader } from 'app/custom-elements/elements-loader';
-
// Constants
export const NO_ANIMATIONS = 'no-animations';
@@ -19,7 +18,7 @@ const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElemen
@Component({
selector: 'aio-doc-viewer',
- template: ''
+ template: '',
// TODO(robwormald): shadow DOM and emulated don't work here (?!)
// encapsulation: ViewEncapsulation.Native
})
@@ -62,12 +61,13 @@ export class DocViewerComponent implements OnDestroy {
@Output() docRendered = new EventEmitter();
constructor(
- elementRef: ElementRef,
- private logger: Logger,
- private titleService: Title,
- private metaService: Meta,
- private tocService: TocService,
- private elementsLoader: ElementsLoader) {
+ elementRef: ElementRef,
+ private logger: Logger,
+ private titleService: Title,
+ private metaService: Meta,
+ private tocService: TocService,
+ private elementsLoader: ElementsLoader
+ ) {
this.hostElement = elementRef.nativeElement;
// Security: the initialDocViewerContent comes from the prerendered DOM and is considered to be secure
this.hostElement.innerHTML = initialDocViewerContent;
@@ -77,12 +77,12 @@ export class DocViewerComponent implements OnDestroy {
}
this.docContents$
- .pipe(
- observeOn(asapScheduler),
- switchMap(newDoc => this.render(newDoc)),
- takeUntil(this.onDestroy$),
- )
- .subscribe();
+ .pipe(
+ observeOn(asapScheduler),
+ switchMap((newDoc) => this.render(newDoc)),
+ takeUntil(this.onDestroy$)
+ )
+ .subscribe();
}
ngOnDestroy() {
@@ -109,13 +109,13 @@ export class DocViewerComponent implements OnDestroy {
return () => {
this.tocService.reset();
- let title: string|null = '';
- let description: string|null = '';
+ let title: string | null = '';
+ let description: string | null = '';
// Only create ToC for docs with an `` heading.
// If you don't want a ToC, add "no-toc" class to ``.
if (titleEl) {
- title = (typeof titleEl.innerText === 'string') ? titleEl.innerText : titleEl.textContent;
+ title = typeof titleEl.innerText === 'string' ? titleEl.innerText : titleEl.textContent;
if (needsToc) {
this.tocService.genToc(targetElem, docId);
@@ -139,21 +139,21 @@ export class DocViewerComponent implements OnDestroy {
this.setNoIndex(doc.id === FILE_NOT_FOUND_ID || doc.id === FETCHING_ERROR_ID);
return this.void$.pipe(
- // Security: `doc.contents` is always authored by the documentation team
- // and is considered to be safe.
- tap(() => this.nextViewContainer.innerHTML = doc.contents || ''),
- tap(() => addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id)),
- switchMap(() => this.elementsLoader.loadContainedCustomElements(this.nextViewContainer)),
- tap(() => this.docReady.emit()),
- switchMap(() => this.swapViews(addTitleAndToc)),
- tap(() => this.docRendered.emit()),
- catchError(err => {
- const errorMessage = (err instanceof Error) ? err.stack : err;
- this.logger.error(new Error(`[DocViewer] Error preparing document '${doc.id}': ${errorMessage}`));
- this.nextViewContainer.innerHTML = '';
- this.setNoIndex(true);
- return this.void$;
- }),
+ // Security: `doc.contents` is always authored by the documentation team
+ // and is considered to be safe.
+ tap(() => (this.nextViewContainer.innerHTML = doc.contents || '')),
+ tap(() => (addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id))),
+ switchMap(() => this.elementsLoader.loadContainedCustomElements(this.nextViewContainer)),
+ tap(() => this.docReady.emit()),
+ switchMap(() => this.swapViews(addTitleAndToc)),
+ tap(() => this.docRendered.emit()),
+ catchError((err) => {
+ const errorMessage = err instanceof Error ? err.stack : err;
+ this.logger.error(new Error(`[DocViewer] Error preparing document '${doc.id}': ${errorMessage}`));
+ this.nextViewContainer.innerHTML = '';
+ this.setNoIndex(true);
+ return this.void$;
+ })
);
}
@@ -178,7 +178,7 @@ export class DocViewerComponent implements OnDestroy {
* the element has been attached to the DOM.
*/
protected swapViews(onInsertedCb = () => {}): Observable {
- const raf$ = new Observable(subscriber => {
+ const raf$ = new Observable((subscriber) => {
const rafId = requestAnimationFrame(() => {
subscriber.next();
subscriber.complete();
@@ -194,28 +194,37 @@ export class DocViewerComponent implements OnDestroy {
const seconds = Number(cssValue.replace(/s$/, ''));
return 1000 * seconds;
};
- const animateProp =
- (elem: HTMLElement, prop: keyof CSSStyleDeclaration, from: string, to: string, duration = 200) => {
- const animationsDisabled = !DocViewerComponent.animationsEnabled
- || this.hostElement.classList.contains(NO_ANIMATIONS);
- if (prop === 'length' || prop === 'parentRule') {
- // We cannot animate length or parentRule properties because they are readonly
- return this.void$;
- }
- elem.style.transition = '';
- return animationsDisabled
- ? this.void$.pipe(tap(() => elem.style[`${prop}`] = to))
- : this.void$.pipe(
- // In order to ensure that the `from` value will be applied immediately (i.e.
- // without transition) and that the `to` value will be affected by the
- // `transition` style, we need to ensure an animation frame has passed between
- // setting each style.
- switchMap(() => raf$), tap(() => elem.style[`${prop}`] = from),
- switchMap(() => raf$), tap(() => elem.style.transition = `all ${duration}ms ease-in-out`),
- switchMap(() => raf$), tap(() => elem.style[`${prop}`] = to),
- switchMap(() => timer(getActualDuration(elem))), switchMap(() => this.void$),
- );
- };
+
+ // Some properties are not assignable and thus cannot be animated.
+ // Example methods, readonly and CSS properties:
+ // "length", "parentRule", "getPropertyPriority", "getPropertyValue", "item", "removeProperty",
+ // "setProperty"
+ type StringValueCSSStyleDeclaration = Exclude<
+ {
+ [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never;
+ }[keyof CSSStyleDeclaration],
+ number
+ >;
+ const animateProp = (elem: HTMLElement, prop: StringValueCSSStyleDeclaration, from: string, to: string, duration = 200) => {
+ const animationsDisabled = this.hostElement.classList.contains(NO_ANIMATIONS);
+ elem.style.transition = '';
+ return animationsDisabled
+ ? this.void$.pipe(tap(() => (elem.style[prop] = to)))
+ : this.void$.pipe(
+ // In order to ensure that the `from` value will be applied immediately (i.e.
+ // without transition) and that the `to` value will be affected by the
+ // `transition` style, we need to ensure an animation frame has passed between
+ // setting each style.
+ switchMap(() => raf$),
+ tap(() => (elem.style[prop] = from)),
+ switchMap(() => raf$),
+ tap(() => (elem.style.transition = `all ${duration}ms ease-in-out`)),
+ switchMap(() => raf$),
+ tap(() => (elem.style[prop] = to)),
+ switchMap(() => timer(getActualDuration(elem))),
+ switchMap(() => this.void$)
+ );
+ };
const animateLeave = (elem: HTMLElement) => animateProp(elem, 'opacity', '1', '0.1');
const animateEnter = (elem: HTMLElement) => animateProp(elem, 'opacity', '0.1', '1');
@@ -224,26 +233,26 @@ export class DocViewerComponent implements OnDestroy {
if (this.currViewContainer.parentElement) {
done$ = done$.pipe(
- // Remove the current view from the viewer.
- switchMap(() => animateLeave(this.currViewContainer)),
- tap(() => this.currViewContainer.parentElement!.removeChild(this.currViewContainer)),
- tap(() => this.docRemoved.emit()),
+ // Remove the current view from the viewer.
+ switchMap(() => animateLeave(this.currViewContainer)),
+ tap(() => this.currViewContainer.parentElement!.removeChild(this.currViewContainer)),
+ tap(() => this.docRemoved.emit())
);
}
return done$.pipe(
- // Insert the next view into the viewer.
- tap(() => this.hostElement.appendChild(this.nextViewContainer)),
- tap(() => onInsertedCb()),
- tap(() => this.docInserted.emit()),
- switchMap(() => animateEnter(this.nextViewContainer)),
- // Update the view references and clean up unused nodes.
- tap(() => {
- const prevViewContainer = this.currViewContainer;
- this.currViewContainer = this.nextViewContainer;
- this.nextViewContainer = prevViewContainer;
- this.nextViewContainer.innerHTML = ''; // Empty to release memory.
- }),
+ // Insert the next view into the viewer.
+ tap(() => this.hostElement.appendChild(this.nextViewContainer)),
+ tap(() => onInsertedCb()),
+ tap(() => this.docInserted.emit()),
+ switchMap(() => animateEnter(this.nextViewContainer)),
+ // Update the view references and clean up unused nodes.
+ tap(() => {
+ const prevViewContainer = this.currViewContainer;
+ this.currViewContainer = this.nextViewContainer;
+ this.nextViewContainer = prevViewContainer;
+ this.nextViewContainer.innerHTML = ''; // Empty to release memory.
+ })
);
}
@@ -255,7 +264,7 @@ export class DocViewerComponent implements OnDestroy {
if (description) {
const formattedDescription = description.replace(/<\/?\w*>/gm, '');
- this.metaService.updateTag({ name: 'twitter:description', content: formattedDescription});
+ this.metaService.updateTag({ name: 'twitter:description', content: formattedDescription });
this.metaService.updateTag({ property: 'og:description', content: formattedDescription });
}
}
diff --git a/docs_app/src/app/layout/footer/footer.component.ts b/docs_app/src/app/layout/footer/footer.component.ts
index 859822d111..227a64717d 100644
--- a/docs_app/src/app/layout/footer/footer.component.ts
+++ b/docs_app/src/app/layout/footer/footer.component.ts
@@ -12,5 +12,5 @@ import { NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
})
export class FooterComponent {
@Input() nodes: NavigationNode[];
- @Input() versionInfo: VersionInfo;
+ @Input() versionInfo?: VersionInfo;
}
diff --git a/docs_app/src/app/layout/mode-banner/mode-banner.component.ts b/docs_app/src/app/layout/mode-banner/mode-banner.component.ts
index 366a0154e9..b87ec5c465 100644
--- a/docs_app/src/app/layout/mode-banner/mode-banner.component.ts
+++ b/docs_app/src/app/layout/mode-banner/mode-banner.component.ts
@@ -4,13 +4,13 @@ import { VersionInfo } from 'app/navigation/navigation.service';
@Component({
selector: 'aio-mode-banner',
template: `
-
- This is the
archived documentation for Angular v{{version?.major}}.
- Please visit
angular.io to see documentation for the current version of Angular.
-
+ This is the
archived documentation for Angular v{{ version?.major }}. Please visit
+
angular.io to see documentation for the current version of Angular.
+