@skyux/docs-tools 13.0.0-alpha.7 → 13.0.0-alpha.8

package/fesm2022/skyux-docs-tools.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, makeEnvironmentProviders, Pipe, ElementRef, numberAttribute, InjectionToken, DestroyRef, ChangeDetectorRef, contentChild, effect } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, makeEnvironmentProviders, Pipe, ElementRef, numberAttribute, InjectionToken, DestroyRef, DOCUMENT, effect, ChangeDetectorRef, contentChild } from '@angular/core';
 import * as i5 from '@skyux/core';
 import { SkyAppWindowRef, SkyIdModule, SkyHelpService, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService, SkyLogService } from '@skyux/core';
 import { SkyToastService } from '@skyux/toast';
@@ -1022,6 +1022,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * @internal
  */
 class SkyDocsTableOfContentsPageComponent {
+    #anchors;
+    #destroyRef;
+    #elementRef;
+    #scrollableHostSvc;
+    #activeAnchorIdOnScroll;
+    #scrollOffset;
+    #routeFragment;
+    #doc;
     constructor() {
         this.#anchors = toSignal(inject(SkyDocsHeadingAnchorService).anchorsChange);
         this.#destroyRef = inject(DestroyRef);
@@ -1043,13 +1051,17 @@ class SkyDocsTableOfContentsPageComponent {
                 return link;
             }) ?? []);
         });
+        this.#routeFragment = toSignal(inject(ActivatedRoute).fragment);
+        this.#doc = inject(DOCUMENT);
+        effect(() => {
+            const fragment = this.#routeFragment();
+            const links = this.links();
+            if (fragment &&
+                links.some((link) => link.anchorId === fragment && !link.active)) {
+                setTimeout(() => this.#doc.getElementById(fragment)?.scrollIntoView());
+            }
+        });
     }
-    #anchors;
-    #destroyRef;
-    #elementRef;
-    #scrollableHostSvc;
-    #activeAnchorIdOnScroll;
-    #scrollOffset;
     ngAfterViewInit() {
         const scrollEl = this.#scrollableHostSvc.getScrollableHost(this.#elementRef);
         this.#scrollOffset = this.#getScrollOffset(scrollEl);
@@ -1098,7 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.sky-docs-toc-page-with-links]': 'links().length > 0',
                     }, imports: [SkyDocsTableOfContentsComponent], selector: 'sky-docs-toc-page', template: "@if (links().length > 0) {\n  <div class=\"sky-docs-toc-menu\">\n    <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n  </div>\n}\n<div class=\"sky-docs-toc-body\">\n  <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:var(--sky-viewport-top);flex-shrink:1;max-width:40%;min-width:20%}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * @internal