@ng-doc/app 16.12.1 → 16.13.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-doc/app",
-  "version": "16.12.1",
+  "version": "16.13.0-beta.1",
   "peerDependencies": {
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0",
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@ng-doc/core": "16.12.1",
-    "@ng-doc/ui-kit": "16.12.1",
+    "@ng-doc/core": "16.13.0-beta.1",
+    "@ng-doc/ui-kit": "16.13.0-beta.1",
     "@orama/plugin-match-highlight": "1.0.2",
     "@orama/stemmers": "1.0.2",
     "highlight.js": "11.5.1"
@@ -51,6 +51,12 @@
       "esm": "./esm2022/constants/ng-doc-app-constants.mjs",
       "default": "./fesm2022/ng-doc-app-constants.mjs"
     },
+    "./defaults": {
+      "types": "./defaults/index.d.ts",
+      "esm2022": "./esm2022/defaults/ng-doc-app-defaults.mjs",
+      "esm": "./esm2022/defaults/ng-doc-app-defaults.mjs",
+      "default": "./fesm2022/ng-doc-app-defaults.mjs"
+    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "esm2022": "./esm2022/directives/ng-doc-app-directives.mjs",
@@ -69,12 +75,6 @@
       "esm": "./esm2022/interfaces/ng-doc-app-interfaces.mjs",
       "default": "./fesm2022/ng-doc-app-interfaces.mjs"
     },
-    "./modules": {
-      "types": "./modules/index.d.ts",
-      "esm2022": "./esm2022/modules/ng-doc-app-modules.mjs",
-      "esm": "./esm2022/modules/ng-doc-app-modules.mjs",
-      "default": "./fesm2022/ng-doc-app-modules.mjs"
-    },
     "./pipes": {
       "types": "./pipes/index.d.ts",
       "esm2022": "./esm2022/pipes/ng-doc-app-pipes.mjs",
@@ -87,6 +87,12 @@
       "esm": "./esm2022/processors/ng-doc-app-processors.mjs",
       "default": "./fesm2022/ng-doc-app-processors.mjs"
     },
+    "./providers": {
+      "types": "./providers/index.d.ts",
+      "esm2022": "./esm2022/providers/ng-doc-app-providers.mjs",
+      "esm": "./esm2022/providers/ng-doc-app-providers.mjs",
+      "default": "./fesm2022/ng-doc-app-providers.mjs"
+    },
     "./services": {
       "types": "./services/index.d.ts",
       "esm2022": "./esm2022/services/ng-doc-app-services.mjs",
@@ -195,6 +201,12 @@
       "esm": "./esm2022/components/page-link/ng-doc-app-components-page-link.mjs",
       "default": "./fesm2022/ng-doc-app-components-page-link.mjs"
     },
+    "./components/page-navigation": {
+      "types": "./components/page-navigation/index.d.ts",
+      "esm2022": "./esm2022/components/page-navigation/ng-doc-app-components-page-navigation.mjs",
+      "esm": "./esm2022/components/page-navigation/ng-doc-app-components-page-navigation.mjs",
+      "default": "./fesm2022/ng-doc-app-components-page-navigation.mjs"
+    },
     "./components/playground": {
       "types": "./components/playground/index.d.ts",
       "esm2022": "./esm2022/components/playground/ng-doc-app-components-playground.mjs",
@@ -243,6 +255,18 @@
       "esm": "./esm2022/components/toc/ng-doc-app-components-toc.mjs",
       "default": "./fesm2022/ng-doc-app-components-toc.mjs"
     },
+    "./defaults/default-processors": {
+      "types": "./defaults/default-processors/index.d.ts",
+      "esm2022": "./esm2022/defaults/default-processors/ng-doc-app-defaults-default-processors.mjs",
+      "esm": "./esm2022/defaults/default-processors/ng-doc-app-defaults-default-processors.mjs",
+      "default": "./fesm2022/ng-doc-app-defaults-default-processors.mjs"
+    },
+    "./defaults/default-skeleton": {
+      "types": "./defaults/default-skeleton/index.d.ts",
+      "esm2022": "./esm2022/defaults/default-skeleton/ng-doc-app-defaults-default-skeleton.mjs",
+      "esm": "./esm2022/defaults/default-skeleton/ng-doc-app-defaults-default-skeleton.mjs",
+      "default": "./fesm2022/ng-doc-app-defaults-default-skeleton.mjs"
+    },
     "./directives/code-highlighter": {
       "types": "./directives/code-highlighter/index.d.ts",
       "esm2022": "./esm2022/directives/code-highlighter/ng-doc-app-directives-code-highlighter.mjs",
@@ -255,12 +279,6 @@
       "esm": "./esm2022/directives/route-active/ng-doc-app-directives-route-active.mjs",
       "default": "./fesm2022/ng-doc-app-directives-route-active.mjs"
     },
-    "./modules/root": {
-      "types": "./modules/root/index.d.ts",
-      "esm2022": "./esm2022/modules/root/ng-doc-app-modules-root.mjs",
-      "esm": "./esm2022/modules/root/ng-doc-app-modules-root.mjs",
-      "default": "./fesm2022/ng-doc-app-modules-root.mjs"
-    },
     "./pipes/extract-value": {
       "types": "./pipes/extract-value/index.d.ts",
       "esm2022": "./esm2022/pipes/extract-value/ng-doc-app-pipes-extract-value.mjs",
@@ -291,6 +309,36 @@
       "esm": "./esm2022/processors/processors/ng-doc-app-processors-processors.mjs",
       "default": "./fesm2022/ng-doc-app-processors-processors.mjs"
     },
+    "./providers/ng-doc-app": {
+      "types": "./providers/ng-doc-app/index.d.ts",
+      "esm2022": "./esm2022/providers/ng-doc-app/ng-doc-app-providers-ng-doc-app.mjs",
+      "esm": "./esm2022/providers/ng-doc-app/ng-doc-app-providers-ng-doc-app.mjs",
+      "default": "./fesm2022/ng-doc-app-providers-ng-doc-app.mjs"
+    },
+    "./providers/page-skeleton": {
+      "types": "./providers/page-skeleton/index.d.ts",
+      "esm2022": "./esm2022/providers/page-skeleton/ng-doc-app-providers-page-skeleton.mjs",
+      "esm": "./esm2022/providers/page-skeleton/ng-doc-app-providers-page-skeleton.mjs",
+      "default": "./fesm2022/ng-doc-app-providers-page-skeleton.mjs"
+    },
+    "./providers/playground-demo": {
+      "types": "./providers/playground-demo/index.d.ts",
+      "esm2022": "./esm2022/providers/playground-demo/ng-doc-app-providers-playground-demo.mjs",
+      "esm": "./esm2022/providers/playground-demo/ng-doc-app-providers-playground-demo.mjs",
+      "default": "./fesm2022/ng-doc-app-providers-playground-demo.mjs"
+    },
+    "./providers/search-engine": {
+      "types": "./providers/search-engine/index.d.ts",
+      "esm2022": "./esm2022/providers/search-engine/ng-doc-app-providers-search-engine.mjs",
+      "esm": "./esm2022/providers/search-engine/ng-doc-app-providers-search-engine.mjs",
+      "default": "./fesm2022/ng-doc-app-providers-search-engine.mjs"
+    },
+    "./providers/type-control": {
+      "types": "./providers/type-control/index.d.ts",
+      "esm2022": "./esm2022/providers/type-control/ng-doc-app-providers-type-control.mjs",
+      "esm": "./esm2022/providers/type-control/ng-doc-app-providers-type-control.mjs",
+      "default": "./fesm2022/ng-doc-app-providers-type-control.mjs"
+    },
     "./services/sidebar": {
       "types": "./services/sidebar/index.d.ts",
       "esm2022": "./esm2022/services/sidebar/ng-doc-app-services-sidebar.mjs",

package/processors/index.d.ts

@@ -1,3 +1,2 @@
-export * from './default-processors';
 export * from '@ng-doc/app/processors/page-processor';
 export * from '@ng-doc/app/processors/processors';

package/providers/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@ng-doc/app/providers/ng-doc-app';
+export * from '@ng-doc/app/providers/page-skeleton';
+export * from '@ng-doc/app/providers/playground-demo';
+export * from '@ng-doc/app/providers/search-engine';
+export * from '@ng-doc/app/providers/type-control';

package/providers/ng-doc-app/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-ng-doc-app';

package/providers/ng-doc-app/provide-ng-doc-app.d.ts

@@ -0,0 +1,27 @@
+import { Provider } from '@angular/core';
+import { NgDocTheme } from '@ng-doc/app/interfaces';
+import { NgDocUiConfig } from '@ng-doc/ui-kit';
+/**
+ * NgDoc application config.
+ */
+export interface NgDocApplicationConfig {
+    /**
+     * List of themes that will be registered in the application and can be used via `NgDocThemeService`.
+     */
+    themes?: NgDocTheme[];
+    /**
+     * Default theme id.
+     * You can use `auto` to automatically select the theme based on the user's operating system settings.
+     */
+    defaultThemeId?: string | 'auto';
+    /**
+     * UI Kit configuration.
+     */
+    uiKit?: NgDocUiConfig;
+}
+/**
+ * Provides the NgDoc application configuration.
+ *
+ * @param config - The optional application configuration.
+ */
+export declare function provideNgDocApp(config?: NgDocApplicationConfig): Provider[];

package/providers/page-skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-page-skeleton';

package/providers/page-skeleton/provide-page-skeleton.d.ts

@@ -0,0 +1,10 @@
+import { NgDocPageSkeleton } from '@ng-doc/app/interfaces';
+/**
+ * Provides the skeleton components for the page.
+ *
+ * @param skeleton - The skeleton for the page.
+ */
+export declare function providePageSkeleton(skeleton: NgDocPageSkeleton): {
+    provide: import("@angular/core").InjectionToken<NgDocPageSkeleton>;
+    useValue: NgDocPageSkeleton;
+}[];

package/providers/playground-demo/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-playground-demo';

package/{helpers → providers/playground-demo}/provide-playground-demo.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { Constructor } from '@ng-doc/core/types';
+import { Constructor } from '@ng-doc/core';
 /**
  *
  * @param type

package/providers/search-engine/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-search-engine';

package/providers/type-control/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-type-control';

package/{helpers → providers/type-control}/provide-type-control.d.ts

@@ -1,6 +1,6 @@
 import { InjectionToken, Provider } from '@angular/core';
 import { NgDocProvidedTypeControl, NgDocTypeControl, NgDocTypeControlProviderOptions } from '@ng-doc/app/interfaces';
-import { Constructor } from '@ng-doc/core/types/constructor';
+import { Constructor } from '@ng-doc/core';
 /**
  *
  * @param type

package/styles/global.css

@@ -2,6 +2,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600&display=swap");
 @import 'highlight.js/styles/github.css';
+body {
+  --ng-doc-code-margin: var(--ng-doc-page-block-margin);
+  --ng-doc-blockquote-margin: var(--ng-doc-page-block-margin);
+  --ng-doc-tabs-margin: var(--ng-doc-page-block-margin);
+  --ng-doc-demo-margin: var(--ng-doc-page-block-margin);
+  --ng-doc-demo-pane-margin: var(--ng-doc-page-block-margin);
+  --ng-doc-playground-margin: var(--ng-doc-page-block-margin);
+}
+
 html {
   -webkit-font-smoothing: antialiased;
 }
@@ -18,7 +27,7 @@ p.ngde {
 
 ul.ngde,
 ol.ngde {
-  margin: calc(var(--ng-doc-base-gutter) * 4) 0;
+  margin: var(--ng-doc-page-block-margin);
 }
 
 ul li.ngde,
@@ -37,8 +46,7 @@ ol ol.ngde {
 
 blockquote.ngde {
   line-height: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin: var(--ng-doc-page-block-margin);
 }
 
 h1.ngde,
@@ -122,7 +130,7 @@ h6.ngde {
 }
 
 pre.ngde {
-  margin: var(--ng-doc-code-margin);
+  margin: var(--ng-doc-page-block-margin);
 }
 pre.ngde code.ngde {
   position: relative;
@@ -149,14 +157,6 @@ pre.ngde code.ngde {
   white-space: nowrap;
 }
 
-.lead.ngde {
-  font-size: 1.414rem;
-}
-
-.hug.ngde {
-  margin-top: 0;
-}
-
 .ng-doc-table-wrapper {
   overflow-x: auto;
 }
@@ -164,7 +164,7 @@ pre.ngde code.ngde {
 table.ngde {
   width: 100%;
   border-spacing: 0;
-  margin: calc(var(--ng-doc-base-gutter) * 4) 0;
+  margin: var(--ng-doc-page-block-margin);
 }
 table.ngde thead tr th {
   padding: var(--ng-doc-base-gutter);
@@ -264,7 +264,6 @@ mark.ng-doc-mark {
   --ng-doc-code-font-size: 14px;
   --ng-doc-code-line-height: 20px;
   --ng-doc-code-font-weight: 600;
-  --ng-doc-code-margin: calc(var(--ng-doc-base-gutter) * 4) 0px;
   --ng-doc-text: var(--ng-doc-base-11);
   --ng-doc-text-inversed: var(--ng-doc-base-0);
   --ng-doc-text-muted: var(--ng-doc-base-8);
@@ -311,7 +310,7 @@ mark.ng-doc-mark {
   /* Tabs */
   --ng-doc-tabs-margin: calc(var(--ng-doc-base-gutter) * 4) 0px;
   --ng-doc-tabs-border: 1px solid var(--ng-doc-base-2);
-  --ng-doc-tabs-border-radius: var(--ng-doc-base-gutter) ;
+  --ng-doc-tabs-border-radius: var(--ng-doc-base-gutter);
 }
 
 .ng-doc-tooltip {
@@ -368,7 +367,7 @@ mark.ng-doc-mark {
   --ng-doc-red-70: rgba(255, 0, 0, 0.7);
   --ng-doc-red-80: rgba(255, 0, 0, 0.8);
   --ng-doc-red-90: rgba(255, 0, 0, 0.9);
-  --ng-doc-red-100: #FF0000;
+  --ng-doc-red-100: #ff0000;
   --ng-doc-red-110: rgb(249, 0, 0);
   --ng-doc-red-120: rgb(242, 0, 0);
   --ng-doc-red-130: rgb(233, 0, 0);
@@ -388,7 +387,7 @@ mark.ng-doc-mark {
   --ng-doc-pink-70: rgba(255, 0, 118, 0.7);
   --ng-doc-pink-80: rgba(255, 0, 114, 0.8);
   --ng-doc-pink-90: rgba(255, 0, 111, 0.9);
-  --ng-doc-pink-100: #FF0066;
+  --ng-doc-pink-100: #ff0066;
   --ng-doc-pink-110: rgb(249, 0, 94);
   --ng-doc-pink-120: rgb(242, 0, 86);
   --ng-doc-pink-130: rgb(233, 0, 77);
@@ -408,7 +407,7 @@ mark.ng-doc-mark {
   --ng-doc-purple-70: rgba(214, 0, 214, 0.7);
   --ng-doc-purple-80: rgba(212, 0, 212, 0.8);
   --ng-doc-purple-90: rgba(210, 0, 210, 0.9);
-  --ng-doc-purple-100: #CC00CC;
+  --ng-doc-purple-100: #cc00cc;
   --ng-doc-purple-110: rgb(195, 0, 195);
   --ng-doc-purple-120: rgb(186, 0, 186);
   --ng-doc-purple-130: rgb(176, 0, 176);
@@ -428,7 +427,7 @@ mark.ng-doc-mark {
   --ng-doc-deep-purple-70: rgba(168, 0, 214, 0.7);
   --ng-doc-deep-purple-80: rgba(165, 0, 212, 0.8);
   --ng-doc-deep-purple-90: rgba(162, 0, 210, 0.9);
-  --ng-doc-deep-purple-100: #9900CC;
+  --ng-doc-deep-purple-100: #9900cc;
   --ng-doc-deep-purple-110: rgb(143, 0, 195);
   --ng-doc-deep-purple-120: rgb(134, 0, 186);
   --ng-doc-deep-purple-130: rgb(124, 0, 176);
@@ -448,7 +447,7 @@ mark.ng-doc-mark {
   --ng-doc-indigo-70: rgba(118, 0, 214, 0.7);
   --ng-doc-indigo-80: rgba(114, 0, 212, 0.8);
   --ng-doc-indigo-90: rgba(111, 0, 210, 0.9);
-  --ng-doc-indigo-100: #6600CC;
+  --ng-doc-indigo-100: #6600cc;
   --ng-doc-indigo-110: rgb(94, 0, 195);
   --ng-doc-indigo-120: rgb(86, 0, 186);
   --ng-doc-indigo-130: rgb(77, 0, 176);
@@ -468,7 +467,7 @@ mark.ng-doc-mark {
   --ng-doc-blue-70: rgba(0, 118, 214, 0.7);
   --ng-doc-blue-80: rgba(0, 114, 212, 0.8);
   --ng-doc-blue-90: rgba(0, 111, 210, 0.9);
-  --ng-doc-blue-100: #0066CC;
+  --ng-doc-blue-100: #0066cc;
   --ng-doc-blue-110: rgb(0, 94, 195);
   --ng-doc-blue-120: rgb(0, 86, 186);
   --ng-doc-blue-130: rgb(0, 77, 176);
@@ -488,7 +487,7 @@ mark.ng-doc-mark {
   --ng-doc-light-blue-70: rgba(0, 168, 214, 0.7);
   --ng-doc-light-blue-80: rgba(0, 165, 212, 0.8);
   --ng-doc-light-blue-90: rgba(0, 162, 210, 0.9);
-  --ng-doc-light-blue-100: #0099CC;
+  --ng-doc-light-blue-100: #0099cc;
   --ng-doc-light-blue-110: rgb(0, 143, 195);
   --ng-doc-light-blue-120: rgb(0, 134, 186);
   --ng-doc-light-blue-130: rgb(0, 124, 176);
@@ -508,7 +507,7 @@ mark.ng-doc-mark {
   --ng-doc-cian-70: rgba(0, 214, 214, 0.7);
   --ng-doc-cian-80: rgba(0, 212, 212, 0.8);
   --ng-doc-cian-90: rgba(0, 210, 210, 0.9);
-  --ng-doc-cian-100: #00CCCC;
+  --ng-doc-cian-100: #00cccc;
   --ng-doc-cian-110: rgb(0, 195, 195);
   --ng-doc-cian-120: rgb(0, 186, 186);
   --ng-doc-cian-130: rgb(0, 176, 176);
@@ -528,7 +527,7 @@ mark.ng-doc-mark {
   --ng-doc-teal-70: rgba(5, 203, 155, 0.7);
   --ng-doc-teal-80: rgba(5, 201, 152, 0.8);
   --ng-doc-teal-90: rgba(5, 198, 148, 0.9);
-  --ng-doc-teal-100: #04BF8B;
+  --ng-doc-teal-100: #04bf8b;
   --ng-doc-teal-110: rgb(4, 181, 130);
   --ng-doc-teal-120: rgb(3, 172, 120);
   --ng-doc-teal-130: rgb(3, 162, 110);
@@ -548,7 +547,7 @@ mark.ng-doc-mark {
   --ng-doc-green-70: rgba(0, 214, 0, 0.7);
   --ng-doc-green-80: rgba(0, 212, 0, 0.8);
   --ng-doc-green-90: rgba(0, 210, 0, 0.9);
-  --ng-doc-green-100: #00CC00;
+  --ng-doc-green-100: #00cc00;
   --ng-doc-green-110: rgb(0, 195, 0);
   --ng-doc-green-120: rgb(0, 186, 0);
   --ng-doc-green-130: rgb(0, 176, 0);
@@ -568,7 +567,7 @@ mark.ng-doc-mark {
   --ng-doc-light-green-70: rgba(0, 214, 61, 0.7);
   --ng-doc-light-green-80: rgba(0, 212, 59, 0.8);
   --ng-doc-light-green-90: rgba(0, 210, 57, 0.9);
-  --ng-doc-light-green-100: #00CC33;
+  --ng-doc-light-green-100: #00cc33;
   --ng-doc-light-green-110: rgb(0, 195, 46);
   --ng-doc-light-green-120: rgb(0, 186, 41);
   --ng-doc-light-green-130: rgb(0, 176, 36);
@@ -588,7 +587,7 @@ mark.ng-doc-mark {
   --ng-doc-lime-70: rgba(168, 255, 0, 0.7);
   --ng-doc-lime-80: rgba(165, 255, 0, 0.8);
   --ng-doc-lime-90: rgba(162, 255, 0, 0.9);
-  --ng-doc-lime-100: #99FF00;
+  --ng-doc-lime-100: #99ff00;
   --ng-doc-lime-110: rgb(143, 249, 0);
   --ng-doc-lime-120: rgb(134, 242, 0);
   --ng-doc-lime-130: rgb(124, 233, 0);
@@ -608,7 +607,7 @@ mark.ng-doc-mark {
   --ng-doc-yellow-70: rgba(255, 255, 0, 0.7);
   --ng-doc-yellow-80: rgba(255, 255, 0, 0.8);
   --ng-doc-yellow-90: rgba(255, 255, 0, 0.9);
-  --ng-doc-yellow-100: #FFFF00;
+  --ng-doc-yellow-100: #ffff00;
   --ng-doc-yellow-110: rgb(249, 249, 0);
   --ng-doc-yellow-120: rgb(242, 242, 0);
   --ng-doc-yellow-130: rgb(233, 233, 0);
@@ -628,7 +627,7 @@ mark.ng-doc-mark {
   --ng-doc-ember-70: rgba(255, 214, 0, 0.7);
   --ng-doc-ember-80: rgba(255, 212, 0, 0.8);
   --ng-doc-ember-90: rgba(255, 210, 0, 0.9);
-  --ng-doc-ember-100: #FFCC00;
+  --ng-doc-ember-100: #ffcc00;
   --ng-doc-ember-110: rgb(249, 195, 0);
   --ng-doc-ember-120: rgb(242, 186, 0);
   --ng-doc-ember-130: rgb(233, 176, 0);
@@ -648,7 +647,7 @@ mark.ng-doc-mark {
   --ng-doc-orange-70: rgba(255, 168, 0, 0.7);
   --ng-doc-orange-80: rgba(255, 165, 0, 0.8);
   --ng-doc-orange-90: rgba(255, 162, 0, 0.9);
-  --ng-doc-orange-100: #FF9900;
+  --ng-doc-orange-100: #ff9900;
   --ng-doc-orange-110: rgb(249, 143, 0);
   --ng-doc-orange-120: rgb(242, 134, 0);
   --ng-doc-orange-130: rgb(233, 124, 0);
@@ -668,7 +667,7 @@ mark.ng-doc-mark {
   --ng-doc-deep-orange-70: rgba(255, 118, 0, 0.7);
   --ng-doc-deep-orange-80: rgba(255, 114, 0, 0.8);
   --ng-doc-deep-orange-90: rgba(255, 111, 0, 0.9);
-  --ng-doc-deep-orange-100: #FF6600;
+  --ng-doc-deep-orange-100: #ff6600;
   --ng-doc-deep-orange-110: rgb(249, 94, 0);
   --ng-doc-deep-orange-120: rgb(242, 86, 0);
   --ng-doc-deep-orange-130: rgb(233, 77, 0);
@@ -708,6 +707,7 @@ mark.ng-doc-mark {
   --ng-doc-code-background: var(--ng-doc-base-1);
   --ng-doc-page-padding: calc(var(--ng-doc-base-gutter) * 3) var(--ng-doc-app-horizontal-padding);
   --ng-doc-main-padding: var(--ng-doc-navbar-height) 0 0 0;
+  --ng-doc-page-block-margin: calc(var(--ng-doc-base-gutter) * 3) 0;
   --ng-doc-class-color: var(--ng-doc-pink-70);
   --ng-doc-class-background: var(--ng-doc-pink-10);
   --ng-doc-interface-color: var(--ng-doc-light-blue-90);
@@ -737,7 +737,9 @@ mark.ng-doc-mark {
   --ng-doc-navbar-background: var(--ng-doc-base-0);
   --ng-doc-navbar-height: calc(var(--ng-doc-base-gutter) * 7);
   --ng-doc-navbar-horizontal-padding: var(--ng-doc-app-horizontal-padding);
-  --ng-doc-navbar-left-width: calc(var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding));
+  --ng-doc-navbar-left-width: calc(
+  	var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding)
+  );
   --ng-doc-sidebar-width: 310px;
   --ng-doc-sidebar-background: var(--ng-doc-base-0);
   --ng-doc-sidebar-padding: calc(var(--ng-doc-base-gutter) * 2);
@@ -1025,17 +1027,29 @@ code.ng-doc-code-with-link {
   --ng-doc-inline-code-background: var(--ng-doc-blue-10);
 }
 
-article h1:hover .ng-doc-header-link, article h2:hover .ng-doc-header-link, article h3:hover .ng-doc-header-link,
-article h4:hover .ng-doc-header-link, article h5:hover .ng-doc-header-link, article h6:hover .ng-doc-header-link {
+article h1:hover .ng-doc-header-link,
+article h2:hover .ng-doc-header-link,
+article h3:hover .ng-doc-header-link,
+article h4:hover .ng-doc-header-link,
+article h5:hover .ng-doc-header-link,
+article h6:hover .ng-doc-header-link {
   opacity: 1;
 }
-article h1 .ng-doc-header-link, article h2 .ng-doc-header-link, article h3 .ng-doc-header-link,
-article h4 .ng-doc-header-link, article h5 .ng-doc-header-link, article h6 .ng-doc-header-link {
+article h1 .ng-doc-header-link,
+article h2 .ng-doc-header-link,
+article h3 .ng-doc-header-link,
+article h4 .ng-doc-header-link,
+article h5 .ng-doc-header-link,
+article h6 .ng-doc-header-link {
   opacity: 0;
   transition: var(--ng-doc-transition);
 }
-article .ng-doc-page-wrapper > h1:first-child, article .ng-doc-page-wrapper > h2:first-child, article .ng-doc-page-wrapper > h3:first-child,
-article .ng-doc-page-wrapper > h4:first-child, article .ng-doc-page-wrapper > h5:first-child, article .ng-doc-page-wrapper > h6:first-child {
+article .ng-doc-page-wrapper > h1:first-child,
+article .ng-doc-page-wrapper > h2:first-child,
+article .ng-doc-page-wrapper > h3:first-child,
+article .ng-doc-page-wrapper > h4:first-child,
+article .ng-doc-page-wrapper > h5:first-child,
+article .ng-doc-page-wrapper > h6:first-child {
   margin-top: 0;
 }
 article section.ngde {
@@ -1067,8 +1081,12 @@ article .ng-doc-inline-header {
   display: flex;
   align-items: center;
 }
-article .ng-doc-inline-header h1, article .ng-doc-inline-header h2, article .ng-doc-inline-header h3,
-article .ng-doc-inline-header h4, article .ng-doc-inline-header h5, article .ng-doc-inline-header h6 {
+article .ng-doc-inline-header h1,
+article .ng-doc-inline-header h2,
+article .ng-doc-inline-header h3,
+article .ng-doc-inline-header h4,
+article .ng-doc-inline-header h5,
+article .ng-doc-inline-header h6 {
   margin-right: var(--ng-doc-base-gutter);
 }
 article .ng-doc-inline-delimiter {
@@ -1084,11 +1102,6 @@ article .ng-doc-header-link {
 article pre code .ng-doc-code-anchor {
   color: inherit;
 }
-article ng-doc-demo,
-article ng-doc-demo-pane,
-article ng-doc-playground {
-  margin: calc(var(--ng-doc-base-gutter) * 4) 0;
-}
 
 html {
   overflow-y: scroll;