geonetwork-ui 2.6.0-dev.b306f1194 → 2.6.0-dev.d216c4dea

package/src/libs/feature/search/src/lib/record-url.token.ts

@@ -1,4 +1,13 @@
 import { InjectionToken } from '@angular/core'
 
 // expects the replacement key ${uuid}
-export const RECORD_URL_TOKEN = new InjectionToken<string>('record-url-token')
+export const RECORD_DATASET_URL_TOKEN = new InjectionToken<string>(
+  'record-dataset-url-token'
+)
+export const RECORD_SERVICE_URL_TOKEN = new InjectionToken<string>(
+  'record-service-url-token'
+)
+
+export const RECORD_REUSE_URL_TOKEN = new InjectionToken<string>(
+  'record-reuse-url-token'
+)

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.css

@@ -0,0 +1,6 @@
+:host {
+  --gn-ui-button-height: 24px;
+  --gn-ui-button-width: 24px;
+  --gn-ui-button-color: var(--color-secondary);
+  --gn-ui-button-border-width: 0px;
+}

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -16,6 +16,7 @@
         type="secondary"
         (buttonClick)="onShowMore()"
         extraClass="m-auto !p-[22px]"
+        [style.--gn-ui-button-width]="!auto"
       >
         <span class="uppercase font-medium tracking-widest" translate
           >results.showMore</span

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -17,7 +17,11 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '../../../../../../libs/ui/search/src'
-import { RECORD_URL_TOKEN } from '../record-url.token'
+import {
+  RECORD_DATASET_URL_TOKEN,
+  RECORD_SERVICE_URL_TOKEN,
+  RECORD_REUSE_URL_TOKEN,
+} from '../record-url.token'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
@@ -49,8 +53,12 @@ export class ResultsListContainerComponent implements OnInit {
     @Inject(RESULTS_LAYOUT_CONFIG)
     private resultsLayoutConfig: ResultsLayoutConfigModel,
     @Optional()
-    @Inject(RECORD_URL_TOKEN)
-    private recordUrlTemplate: string
+    @Inject(RECORD_DATASET_URL_TOKEN)
+    private recordDatasetUrlTemplate: string,
+    @Inject(RECORD_SERVICE_URL_TOKEN)
+    private recordServiceUrlTemplate: string,
+    @Inject(RECORD_REUSE_URL_TOKEN)
+    private recordReuseUrlTemplate: string
   ) {}
 
   ngOnInit(): void {
@@ -103,7 +111,18 @@ export class ResultsListContainerComponent implements OnInit {
   }
 
   getRecordUrl(metadata: CatalogRecord) {
-    if (!this.recordUrlTemplate) return null
-    return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier)
+    const tokenMap = {
+      dataset: this.recordDatasetUrlTemplate,
+      service: this.recordServiceUrlTemplate,
+      reuse: this.recordReuseUrlTemplate,
+    }
+    if (
+      !this.recordDatasetUrlTemplate &&
+      !this.recordServiceUrlTemplate &&
+      !this.recordReuseUrlTemplate
+    )
+      return null
+    const urlKind = tokenMap[metadata.kind]
+    return urlKind.replace('${uuid}', metadata.uniqueIdentifier)
   }
 }

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,6 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
-  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1"
+  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1 rounded-lg"
 >
 </gn-ui-dropdown-selector>

package/src/libs/ui/elements/src/index.ts

@@ -24,3 +24,4 @@ export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
+export * from './lib/service-capabilities/service-capabilities.component'

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.ts

@@ -37,7 +37,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { fromEvent, Subscription } from 'rxjs'
 
-marker('record.kind.dataset')
+marker('record.kind.data')
 marker('record.kind.reuse')
 marker('record.kind.service')
 
@@ -178,7 +178,7 @@ export class InternalLinkCardComponent implements OnInit {
 
     switch (this.record.kind.toLowerCase()) {
       case 'dataset':
-        return { text: 'record.kind.dataset', icon: 'iconoirDatabase' }
+        return { text: 'record.kind.data', icon: 'iconoirDatabase' }
       case 'reuse':
         return { text: 'record.kind.reuse', icon: 'iconoirMap' }
       case 'service':

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html

@@ -1,4 +1,4 @@
-<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
+<div class="py-5 px-5 rounded bg-gray-100 text-black">
   <div class="grid gap-3 overflow-hidden">
     <div>
       <p class="text-sm font-medium" translate>record.metadata.contact</p>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.css

@@ -11,3 +11,12 @@
 :host ::ng-deep gn-ui-copy-text-button button ng-icon {
   transform: scale(0.8);
 }
+
+:host {
+  --gn-ui-badge-background-color: var(--color-primary-white);
+  --gn-ui-badge-text-color: var(--color-primary-darkest);
+}
+
+:host ::ng-deep gn-ui-badge:hover {
+  --gn-ui-badge-text-color: white;
+}

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -13,7 +13,7 @@
   </gn-ui-content-ghost>
 
   <p
-    class="mt-6 mb-3 font-medium text-primary text-sm"
+    class="mt-6 mb-3 font-medium text-black text-sm"
     translate
     *ngIf="!fieldReady('keywords') || metadata.keywords?.length"
   >
@@ -96,10 +96,10 @@
 </gn-ui-expandable-panel>
 <gn-ui-expandable-panel
   *ngIf="
-    metadata.lineage ||
+    (metadata.kind === 'dataset' && metadata.lineage) ||
     metadata.resourceUpdated ||
     metadata.updateFrequency ||
-    metadata.status
+    (metadata.kind === 'dataset' && metadata.status)
   "
   [title]="'record.metadata.details' | translate"
 >
@@ -225,9 +225,18 @@
     </div>
   </div>
 </gn-ui-expandable-panel>
+<gn-ui-expandable-panel
+  *ngIf="metadata.kind !== 'dataset' && metadata.spatialExtents"
+  [title]="'service.metadata.spatialExtent' | translate"
+>
+  <gn-ui-spatial-extent
+    class="flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6"
+    [spatialExtents]="metadata.spatialExtents"
+  ></gn-ui-spatial-extent>
+</gn-ui-expandable-panel>
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
-  [title]="'record.metadata.technical' | translate"
+  [title]="'service.metadata.other' | translate"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -6,7 +6,7 @@ import {
   Output,
 } from '@angular/core'
 import {
-  DatasetRecord,
+  CatalogRecord,
   Keyword,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DateService, getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
@@ -22,12 +22,17 @@ import {
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { CommonModule } from '@angular/common'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 
+import { CommonModule } from '@angular/common'
+import {
+  MapContainerComponent,
+  SpatialExtentComponent,
+} from '../../../../../../libs/ui/map/src'
+
 @Component({
   selector: 'gn-ui-metadata-info',
   templateUrl: './metadata-info.component.html',
@@ -46,6 +51,8 @@ import { GnUiLinkifyDirective } from './linkify.directive'
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
+    MapContainerComponent,
+    SpatialExtentComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -55,7 +62,7 @@ import { GnUiLinkifyDirective } from './linkify.directive'
   ],
 })
 export class MetadataInfoComponent {
-  @Input() metadata: Partial<DatasetRecord>
+  @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
   @Output() keyword = new EventEmitter<Keyword>()
   updatedTimes: number
@@ -122,7 +129,8 @@ export class MetadataInfoComponent {
   }
 
   get temporalExtent(): { start: string; end: string } {
-    const temporalExtents = this.metadata.temporalExtents
+    const temporalExtents =
+      this.metadata.kind === 'dataset' ? this.metadata.temporalExtents : []
     return getTemporalRangeUnion(temporalExtents, this.dateService)
   }
 

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -0,0 +1,96 @@
+<div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
+  <div class="bg-primary-opacity-10 overflow-visible" style="height: 512px">
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div class="gn-ui-section-title mb-6" translate>
+          service.metadata.capabilities
+        </div>
+        <div
+          *ngIf="loading"
+          class="flex justify-center w-full h-[200px] items-center"
+        >
+          <gn-ui-spinning-loader></gn-ui-spinning-loader>
+        </div>
+        <div *ngIf="!loading">
+          <div class="flex flex-row gap-5">
+            <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
+              <gn-ui-text-input
+                class="w-full"
+                [extraClass]="getExtraInputClass()"
+                [placeholder]="'service.metadata.search' | translate"
+                (input)="onSearchChange($event)"
+                (keydown.enter)="onSearchEnter($event)"
+              >
+              </gn-ui-text-input>
+              <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
+                <gn-ui-button
+                  #inputBtn
+                  type="outline"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1"
+                  (buttonClick)="searchLayers()"
+                >
+                  <ng-icon name="iconoirSearch"></ng-icon>
+                </gn-ui-button>
+              </div>
+            </div>
+            <gn-ui-popover
+              [content]="popoverItems"
+              theme="light"
+              class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
+            >
+              <ng-icon name="matInfoOutline" class="w-6 h-6 pt-0.5"></ng-icon>
+            </gn-ui-popover>
+          </div>
+          <div
+            style="height: 500px"
+            class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
+          >
+            <div
+              class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
+              data-test="layer-list"
+            >
+              <gn-ui-button
+                *ngFor="let layerItem of filteredLayers"
+                type="outline"
+                [extraClass]="getExtraClass(layerItem)"
+                (buttonClick)="selectLayer(layerItem)"
+              >
+                {{ layerItem.title || layerItem.name }}
+              </gn-ui-button>
+              <span *ngIf="filteredLayers.length === 0" class="text-gray-800">
+                {{ 'service.metadata.filter.noLayers' | translate }}
+              </span>
+            </div>
+            <div
+              data-test="layer-information"
+              class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
+            >
+              <div
+                *ngFor="let item of layerInformation"
+                class="flex flex-row gap-4 border-b border-gray-200"
+              >
+                <span class="font-semibold w-24">{{ item.displayName }}</span>
+                <div *ngIf="isList(item.value)">
+                  <div
+                    *ngFor="let subItem of item.value"
+                    class="flex flex-row break-words max-w-72"
+                  >
+                    {{ subItem }}
+                  </div>
+                </div>
+                <div class="break-words max-w-72" *ngIf="!isList(item.value)">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
+    <div translate>service.metadata.filter</div>
+  </div>
+</ng-template>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -0,0 +1,183 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { getLayers } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import {
+  PopoverComponent,
+  SpinningLoaderComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import {
+  WfsFeatureTypeFull,
+  WmsLayerFull,
+  WmtsLayer,
+} from '@camptocamp/ogc-client'
+
+marker(`service.metadata.search`)
+marker(`service.metadata.capabilities.title`)
+marker(`service.metadata.capabilities.abstract`)
+marker(`service.metadata.capabilities.name`)
+marker(`service.metadata.capabilities.defaultCrs`)
+marker(`service.metadata.capabilities.availableCrs`)
+marker(`service.metadata.capabilities.otherCrs`)
+marker(`service.metadata.capabilities.objectCount`)
+marker(`service.metadata.capabilities.geometryName`)
+marker(`service.metadata.capabilities.geometryType`)
+marker(`service.metadata.capabilities.keywords`)
+marker(`service.metadata.capabilities.outputFormats`)
+marker(`service.metadata.capabilities.resourceLinks`)
+marker(`service.metadata.capabilities.attribution`)
+
+@Component({
+  selector: 'gn-ui-service-capabilities',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ButtonComponent,
+    TextInputComponent,
+    NgIcon,
+    PopoverComponent,
+    SpinningLoaderComponent,
+  ],
+  viewProviders: [
+    provideIcons({
+      iconoirSearch,
+      matInfoOutline,
+    }),
+  ],
+  templateUrl: './service-capabilities.component.html',
+  styleUrl: './service-capabilities.component.css',
+})
+export class ServiceCapabilitiesComponent implements OnInit {
+  @Input() apiLinks = []
+  availableLayers = []
+  filteredLayers = []
+  selectedLayer = null
+  layerInformation = []
+  searchQuery = ''
+  loading = false
+  searchActive
+
+  capabilitiesKeys = [
+    'title',
+    'abstract',
+    'name',
+    'defaultCrs',
+    'availableCrs',
+    'otherCrs',
+    'objectCount',
+    'geometryName',
+    'geometryType',
+    'keywords',
+    'outputFormats',
+    'resourceLinks',
+    'attribution',
+  ]
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.loadLayers()
+  }
+
+  onSearchChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.searchQuery = input.value
+    if (!input.value) {
+      this.searchActive = false
+      this.filteredLayers = this.availableLayers
+    }
+  }
+
+  onSearchEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.searchActive = true
+      this.searchLayers()
+    }
+  }
+
+  async loadLayers() {
+    if (
+      this.apiLinks.length > 0 &&
+      this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures'
+    ) {
+      this.loading = true
+      this.availableLayers = await getLayers(
+        this.apiLinks[0].url.href,
+        this.apiLinks[0].accessServiceProtocol
+      )
+      this.loading = false
+      this.cdr.detectChanges()
+      this.filteredLayers = this.availableLayers
+    } else {
+      this.availableLayers = []
+    }
+  }
+
+  selectLayer(layer: WfsFeatureTypeFull | WmsLayerFull | WmtsLayer) {
+    if (layer === this.selectedLayer) {
+      this.selectedLayer = null
+      this.layerInformation = []
+      return
+    }
+
+    this.selectedLayer = layer
+    const filteredInfo = []
+    Object.keys(layer).map((key) => {
+      if (this.capabilitiesKeys.includes(key)) {
+        const displayName = this.translateService.instant(
+          `service.metadata.capabilities.${key}`
+        )
+        if (key in layer && layer[key]?.length) {
+          filteredInfo.push({ displayName, value: layer[key] })
+        }
+      }
+    })
+
+    this.layerInformation = filteredInfo
+  }
+
+  isList(value: string | string[]) {
+    return Array.isArray(value)
+  }
+
+  getExtraInputClass() {
+    if (this.searchActive) {
+      return 'h-14 border rounded-lg border-primary text-primary focus:border-primary hover:border-primary'
+    }
+    return 'h-14 border rounded-lg'
+  }
+
+  searchLayers() {
+    this.searchActive = true
+    this.filteredLayers = this.availableLayers.filter((layer) => {
+      const query = this.searchQuery.toLowerCase()
+      if (layer.title) {
+        return (
+          layer.title.toLowerCase().includes(query) ||
+          layer.abstract?.toLowerCase().includes(query)
+        )
+      } else {
+        return layer.name.toLowerCase().includes(query)
+      }
+    })
+    if (!this.filteredLayers.includes(this.selectedLayer)) {
+      this.selectedLayer = null
+      this.layerInformation = []
+    }
+  }
+
+  getExtraClass(layerItem) {
+    return layerItem.title === this.selectedLayer?.title
+      ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
+      : `h-8 rounded-lg`
+  }
+}

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -21,6 +21,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
+import { ServiceCapabilitiesComponent } from './service-capabilities/service-capabilities.component'
 
 @NgModule({
   imports: [
@@ -44,6 +45,7 @@ import { InternalLinkCardComponent } from './internal-link-card/internal-link-ca
     ImageInputComponent,
     ApplicationBannerComponent,
     InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -59,6 +61,7 @@ import { InternalLinkCardComponent } from './internal-link-card/internal-link-ca
     ImageInputComponent,
     ApplicationBannerComponent,
     InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
   ],
 })
 export class UiElementsModule {}

package/src/libs/ui/inputs/src/index.ts

@@ -15,7 +15,6 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
-export * from './lib/navigation-button/navigation-button.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html

@@ -1,17 +1,17 @@
 <div class="inline-block relative align-middle" style="line-height: 0.7em">
-  <button
-    type="button"
+  <gn-ui-button
+    [type]="'outline'"
     class="-m-[8px] p-[8px]"
-    (click)="toggle($event)"
+    (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      'disabled opacity-45': !toggled,
+      disabled: !toggled,
       'transition hover:scale-125 will-change-transform': !disabled,
       'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-  </button>
+  </gn-ui-button>
   <svg
     #starOverlay
     class="star-toggle-overlay"

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.ts

@@ -11,6 +11,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-star-toggle',
@@ -18,7 +19,7 @@ import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [CommonModule, NgIcon, ButtonComponent],
   viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Directive,
   HostBinding,
@@ -11,20 +12,34 @@ import {
 @Directive({
   selector: '[gnUiAnchorLink]',
 })
-export class AnchorLinkDirective implements OnInit, OnDestroy {
+export class AnchorLinkDirective
+  implements OnInit, AfterViewChecked, OnDestroy
+{
   @Input('gnUiAnchorLink') targetId: string
   @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
   @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
+  @Input('gnUiAnchorLinkInViewClass') inViewClass: string
+  @Input('gnUiAnchorLinkOutOfViewClass') outOfViewClass: string
 
   @HostBinding('class')
   get elementClass(): string {
-    return this.disabled ? this.disabledClass : this.enabledClass
+    if (this.disabled) {
+      return this.disabledClass
+    }
+    if (this.inView) {
+      return `${this.inViewClass} ${this.enabledClass}`
+    } else {
+      return `${this.outOfViewClass} ${this.enabledClass}`
+    }
   }
 
   disabled = false
   observer = new MutationObserver(() => {
     this.refreshDisabledState()
   })
+  inView = false
+  intersectionObserver: IntersectionObserver
+  initialized = false
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -36,8 +51,37 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
     this.refreshDisabledState()
   }
 
+  ngAfterViewChecked() {
+    if (!this.initialized && !this.disabled) {
+      const target = document.getElementById(this.targetId)
+      if (target) {
+        this.initializeIntersectionObserver(target)
+        this.initialized = true
+      }
+    }
+  }
+
+  initializeIntersectionObserver(target: HTMLElement) {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.inView = entry.isIntersecting
+          this.changeDetector.detectChanges()
+        })
+      },
+      {
+        root: null,
+        rootMargin: '-30% 0% -60% 0%',
+      }
+    )
+    this.intersectionObserver.observe(target)
+  }
+
   ngOnDestroy() {
     this.observer.disconnect()
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect()
+    }
   }
 
   refreshDisabledState() {