geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.73bac9979

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end mb-7 mt-1">
+  <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
-      class="truncate p-1 -mx-1"
+      class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
@@ -10,33 +10,71 @@
     <gn-ui-external-viewer-button
       class="shrink-0 py-1 place-self-end"
       [link]="selectedLink$ | async"
-      [mapConfig]="mapConfig"
     >
     </gn-ui-external-viewer-button>
   </div>
   <div
     class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
   >
-    <gn-ui-map-context
+    <gn-ui-map-container
+      #mapContainer
       [context]="mapContext$ | async"
-      [mapConfig]="mapConfig"
-    ></gn-ui-map-context>
+      (featuresClick)="onMapFeatureSelect($event)"
+    ></gn-ui-map-container>
     <div
       class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
       [class.hidden]="!selection"
     >
-      <button
-        (click)="resetSelection()"
-        class="rounded bg-primary-opacity-25 text-white absolute right-[0.5em]"
+      <gn-ui-button
+        type="light"
+        (buttonClick)="resetSelection()"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        extraClass="absolute right-[0.5em] ml-[8px] mr-[10px]"
       >
-        <mat-icon
-          class="material-symbols-outlined align-middle text-sm"
-          style="height: 21px"
-          >close</mat-icon
-        >
-      </button>
+        <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+      </gn-ui-button>
       <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
     </div>
+
+    <div
+      class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+      [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
+      [hidden]="!showLegend || !legendExists"
+    >
+      <div class="flex justify-between items-center mb-2">
+        <div class="text-primary font-bold">Legend</div>
+        <gn-ui-button
+          type="light"
+          (buttonClick)="toggleLegend()"
+          style="
+            --gn-ui-button-padding: 0px;
+            --gn-ui-button-width: 24px;
+            --gn-ui-button-height: 24px;
+          "
+          extraClass="ml-[8px] mr-[10px]"
+        >
+          <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+        </gn-ui-button>
+      </div>
+      <gn-ui-map-legend
+        [context]="mapContext$ | async"
+        (legendStatusChange)="onLegendStatusChange($event)"
+      ></gn-ui-map-legend>
+    </div>
+
+    <gn-ui-button
+      *ngIf="!showLegend && legendExists && !selection"
+      type="outline"
+      (buttonClick)="toggleLegend()"
+      extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+    >
+      Legend
+    </gn-ui-button>
+
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"
@@ -45,7 +83,7 @@
     <gn-ui-popup-alert
       *ngIf="error"
       type="warning"
-      icon="error_outline"
+      icon="matErrorOutlineOutline"
       class="absolute m-2 inset-0"
     >
       <span translate>{{ error }}</span>

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -1,31 +1,20 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
-  OnInit,
+  Input,
+  ViewChild,
 } from '@angular/core'
-import {
-  FeatureInfoService,
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
-  MapStyleService,
-  MapUtilsService,
-} from '../../../../../../libs/feature/map/src'
-import { getOptionalMapConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
+import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkLabel } from '../../../../../../libs/util/shared/src'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
   from,
   Observable,
   of,
-  Subscription,
+  startWith,
   throwError,
   withLatestFrom,
 } from 'rxjs'
@@ -34,25 +23,85 @@ import {
   distinctUntilChanged,
   finalize,
   map,
-  startWith,
+  shareReplay,
   switchMap,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  createViewFromLayer,
+  MapContext,
+  MapContextLayer,
+} from '@geospatial-sdk/core'
+import {
+  FeatureDetailComponent,
+  MapContainerComponent,
+  prioritizePageScroll,
+  MapLegendComponent,
+} from '../../../../../../libs/ui/map/src'
+import { Feature } from 'geojson'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matClose } from '@ng-icons/material-icons/baseline'
+import { CommonModule } from '@angular/common'
+import {
+  ButtonComponent,
+  DropdownSelectorComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('map.dropdown.placeholder')
+marker('wfs.feature.limit')
 
 @Component({
   selector: 'gn-ui-map-view',
   templateUrl: './map-view.component.html',
   styleUrls: ['./map-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropdownSelectorComponent,
+    MapContainerComponent,
+    FeatureDetailComponent,
+    PopupAlertComponent,
+    TranslateModule,
+    LoadingMaskComponent,
+    NgIconComponent,
+    ExternalViewerButtonComponent,
+    ButtonComponent,
+    MapLegendComponent,
+  ],
+  viewProviders: [provideIcons({ matClose })],
 })
-export class MapViewComponent implements OnInit, OnDestroy {
-  mapConfig: MapConfig = getOptionalMapConfig()
-  selection: Feature<Geometry>
-  private subscription = new Subscription()
-  private selectionStyle: StyleLike
+export class MapViewComponent implements AfterViewInit {
+  @Input() set excludeWfs(value: boolean) {
+    this.excludeWfs$.next(value)
+  }
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
+
+  excludeWfs$ = new BehaviorSubject(false)
+  selection: Feature
+  showLegend = true
+  legendExists = false
+
+  toggleLegend() {
+    this.showLegend = !this.showLegend
+  }
+
+  onLegendStatusChange(status: boolean) {
+    this.legendExists = status
+    if (!status) {
+      this.showLegend = false
+    }
+  }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
@@ -70,7 +119,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
             label: getLinkLabel(link),
             value: index,
           }))
-        : [{ label: 'No preview layer', value: 0 }]
+        : [{ label: 'map.dropdown.placeholder', value: 0 }]
     )
   )
   selectedLinkIndex$ = new BehaviorSubject(0)
@@ -83,11 +132,15 @@ export class MapViewComponent implements OnInit, OnDestroy {
     this.selectedLinkIndex$.pipe(distinctUntilChanged()),
   ]).pipe(map(([links, index]) => links[index]))
 
-  currentLayers$ = this.selectedLink$.pipe(
-    switchMap((link) => {
+  currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
+    switchMap(([link, excludeWfs]) => {
       if (!link) {
         return of([])
       }
+      if (excludeWfs && link.accessServiceProtocol === 'wfs') {
+        this.error = 'wfs.feature.limit'
+        return of([])
+      }
       this.loading = true
       this.error = null
       return this.getLayerFromLink(link).pipe(
@@ -102,93 +155,71 @@ export class MapViewComponent implements OnInit, OnDestroy {
     })
   )
 
-  mapContext$ = this.currentLayers$.pipe(
+  mapContext$: Observable<MapContext> = this.currentLayers$.pipe(
     switchMap((layers) =>
-      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
-        catchError(() => {
-          this.error = 'The layer has no extent'
-          return of(undefined)
-        }),
-        map(
-          (extent) =>
-            ({
-              layers,
-              view: {
-                extent,
-              },
-            } as MapContextModel)
-        ),
-        tap((res) => {
+      from(createViewFromLayer(layers[0])).pipe(
+        catchError(() => of(null)), // could not zoom on the layer: use the record extent
+        map((view) => ({
+          layers,
+          view,
+        })),
+        tap(() => {
           this.resetSelection()
         })
       )
     ),
     startWith({
       layers: [],
-      view: {},
-    } as MapContextModel),
+      view: null,
+    }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view.extent) return context
+      if (context.view) return context
       const extent = this.mapUtils.getRecordExtent(metadata)
+      const view = extent ? { extent } : null
       return {
         ...context,
-        view: {
-          ...context.view,
-          extent,
-        },
+        view,
       }
-    })
+    }),
+    shareReplay(1)
   )
 
   constructor(
     private mdViewFacade: MdViewFacade,
-    private mapManager: MapManagerService,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private featureInfo: FeatureInfoService,
-    private changeRef: ChangeDetectorRef,
-    private styleService: MapStyleService
+    private changeRef: ChangeDetectorRef
   ) {}
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.mapUtils.prioritizePageScroll(this.mapManager.map.getInteractions())
-    this.selectionStyle = this.styleService.styles.defaultHL
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
+  async ngAfterViewInit() {
+    const map = await this.mapContainer.openlayersMap
+    prioritizePageScroll(map.getInteractions())
   }
 
-  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+  onMapFeatureSelect(features: Feature[]): void {
     this.resetSelection()
     this.selection = features?.length > 0 && features[0]
     if (this.selection) {
-      this.selection.setStyle(this.selectionStyle)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(this.selectionStyle)
     }
     this.changeRef.detectChanges()
   }
 
   resetSelection(): void {
     if (this.selection) {
-      this.selection.setStyle(null)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(null)
     }
     this.selection = null
   }
 
-  getLayerFromLink(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerModel> {
+  getLayerFromLink(link: DatasetOnlineResource): Observable<MapContextLayer> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMS,
+        type: 'wms',
         name: link.name,
       })
     } else if (
@@ -197,7 +228,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMTS,
+        type: 'wmts',
         name: link.name,
       })
     } else if (
@@ -209,7 +240,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return this.dataService.readAsGeoJson(link).pipe(
         map((data) => ({
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data,
         }))
       )

package/src/libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+} from '@angular/core'
+import { Meta } from '@angular/platform-browser'
+import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'gn-ui-record-meta',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class RecordMetaComponent implements OnDestroy, OnChanges {
+  @Input() metadata: DatasetRecord
+
+  constructor(private meta: Meta) {}
+
+  ngOnChanges() {
+    if (this.metadata?.title) {
+      this.meta.addTag({ property: 'og:title', content: this.metadata.title })
+      this.meta.addTag({
+        property: 'og:url',
+        content: window.location.href.toString(),
+      })
+      if (this.metadata?.overviews?.length > 0) {
+        for (const overview of this.metadata.overviews) {
+          this.meta.addTag({
+            property: 'og:image',
+            content: overview.url.toString(),
+          })
+        }
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    this.meta.removeTag('property="og:image"')
+    this.meta.removeTag('property="og:url"')
+    this.meta.removeTag('property="og:title"')
+  }
+}

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -15,6 +15,7 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
+  DatasetServiceDistribution,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
@@ -63,12 +64,24 @@ export class MdViewFacade {
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('distributions' in record ? record.distributions : []))
+    map((record) =>
+      record.kind === 'dataset' && 'onlineResources' in record
+        ? record.onlineResources
+        : []
+    )
   )
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+      links
+        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+        // Put links to IGN Géoplateforme first
+        .sort((dd1, dd2) => {
+          return (dd2 as DatasetServiceDistribution).accessServiceProtocol ===
+            'GPFDL'
+            ? 1
+            : undefined // do not change the sorting otherwise
+        })
     )
   )
 

package/src/libs/feature/router/src/lib/default/constants.ts

@@ -1,3 +1,5 @@
+import { DateRange } from '../../../../../../libs/api/repository/src'
+
 export const ROUTER_STATE_KEY = 'router'
 
 export const ROUTER_ROUTE_SEARCH = 'search'
@@ -9,4 +11,7 @@ export enum ROUTE_PARAMS {
   PUBLISHER = 'publisher', // FIXME: this shouldn't be here as it is a search field
   PAGE = '_page',
 }
-export type SearchRouteParams = Record<string, string | string[] | number>
+export type SearchRouteParams = Record<
+  string,
+  string | string[] | number | DateRange
+>

package/src/libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -0,0 +1,61 @@
+import {
+  DateRange,
+  formatDate,
+  isDateRange,
+} from '../../../../../../../libs/api/repository/src'
+import { ROUTE_PARAMS, SearchRouteParams } from '../constants'
+
+export function flattenQueryParams(
+  params: SearchRouteParams
+): Record<string, unknown> {
+  const flattened = { ...params }
+  for (const key in params) {
+    if (
+      Array.isArray(flattened[key]) &&
+      (flattened[key] as string[]).length > 0
+    ) {
+      flattened[key] = [(flattened[key] as string[]).join(',')]
+    } else if (isDateRange(flattened[key] as DateRange)) {
+      const start = (flattened[key] as DateRange).start
+      const end = (flattened[key] as DateRange).end
+      flattened[key] = [
+        `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
+      ]
+    }
+  }
+
+  return flattened
+}
+
+export function expandQueryParams(
+  params: Record<string, unknown>
+): SearchRouteParams {
+  const expanded = { ...params }
+  for (const key in params) {
+    const value: string = Array.isArray(expanded[key])
+      ? expanded[key][0]
+      : (expanded[key] as string)
+    if (typeof value === 'string') {
+      if (
+        Object.values(ROUTE_PARAMS).includes(key as ROUTE_PARAMS) &&
+        key !== 'publisher' //FIXME: temporary workaround as publisher shouldn't be in ROUTE_PARAMS as it is a search field
+      ) {
+        //do nothing
+      } else if (isDateUrl(value)) {
+        const [start, end] = value.split('..')
+        expanded[key] = {
+          ...(start && { start: new Date(`${start}T00:00:00`) }),
+          ...(end && { end: new Date(`${end}T00:00:00`) }),
+        }
+      } else {
+        expanded[key] = value.split(',')
+      }
+    }
+  }
+  return expanded
+}
+
+// this only matches if the separator ".." is present only once and no dots are present elsewhere
+function isDateUrl(value: string) {
+  return value.match(/^[^.]*(\.\.)[^.]*$/)
+}

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -61,7 +61,7 @@ export class RouterEffects {
         let sortBy =
           ROUTE_PARAMS.SORT in newParams
             ? sortByFromString(newParams[ROUTE_PARAMS.SORT])
-            : SortByEnum.RELEVANCY
+            : SortByEnum.CHANGE_DATE
         let pageNumber =
           ROUTE_PARAMS.PAGE in newParams
             ? parseInt(newParams[ROUTE_PARAMS.PAGE])
@@ -70,7 +70,7 @@ export class RouterEffects {
           const oldSort =
             ROUTE_PARAMS.SORT in oldParams
               ? sortByFromString(oldParams[ROUTE_PARAMS.SORT])
-              : SortByEnum.RELEVANCY
+              : SortByEnum.CHANGE_DATE
           if (JSON.stringify(sortBy) === JSON.stringify(oldSort)) {
             sortBy = null
           }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -3,7 +3,7 @@ import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import { RouterService } from '../router.service'
 import { RouterReducerState } from '@ngrx/router-store'
 import { select, Store } from '@ngrx/store'
-import { distinctUntilChanged, filter, map, take, tap } from 'rxjs/operators'
+import { distinctUntilChanged, filter, map, take } from 'rxjs/operators'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_SEARCH,
@@ -17,6 +17,7 @@ import {
 } from './router.actions'
 import { selectCurrentRoute, selectRouteParams } from './router.selectors'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { expandQueryParams, flattenQueryParams } from './query-params.utils'
 
 @Injectable()
 export class RouterFacade {
@@ -27,7 +28,8 @@ export class RouterFacade {
     filter((route) => !!route),
     filter((route) => route.url[0]?.path.startsWith(ROUTER_ROUTE_SEARCH)),
     map((route) => route.queryParams),
-    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    map(expandQueryParams)
   )
 
   constructor(
@@ -62,7 +64,7 @@ export class RouterFacade {
   updateSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),
-      ...(query && { query }),
+      ...(query && { query: flattenQueryParams(query) }),
       queryParamsHandling: 'merge',
     })
   }
@@ -70,7 +72,7 @@ export class RouterFacade {
   setSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),
-      ...(query && { query }),
+      ...(query && { query: flattenQueryParams(query) }),
     })
   }
 

package/src/libs/feature/search/src/index.ts

@@ -22,3 +22,5 @@ export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'
 export * from './lib/results-table/results-table-container.component'
+export * from './lib/search-filters-summary/search-filters-summary.component'
+export * from './lib/search-filters-summary-item/search-filters-summary-item.component'

package/src/libs/feature/search/src/lib/constants.ts

@@ -19,9 +19,9 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
-  'tag',
   'MD_LegalConstraintsUseLimitationObject',
   'qualityScore',
+  'allKeywords',
 ]
 
 export const FIELDS_BRIEF: FieldName[] = [

package/src/libs/feature/search/src/lib/facets/facets.service.ts

@@ -72,19 +72,19 @@ export class FacetsService {
               for (let p = 0; p < entries.length; p++) {
                 const entry: [string, AggEntry] = entries[p] as [
                   string,
-                  AggEntry
+                  AggEntry,
                 ]
                 const nextEntry: [string, AggEntry] = entries[p + 1] as [
                   string,
-                  AggEntry
+                  AggEntry,
                 ]
                 const lowerBound = entry[1].key
                 const onlyOneBucket = entries.length === 1
                 const upperBound = onlyOneBucket
                   ? lowerBound + Number(requestAgg['histogram'].interval)
                   : nextEntry
-                  ? nextEntry[1].key
-                  : '*'
+                    ? nextEntry[1].key
+                    : '*'
                 const value = lowerBound + '-' + upperBound
                 const itemPath = [...blockModel.path, lowerBound + '']
                 const itemModel = {

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -16,12 +16,15 @@ import { Observable, Subscription } from 'rxjs'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { AuthService, FavoritesService } from '../../../../../../../libs/api/repository/src'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-favorite-star',
   templateUrl: './favorite-star.component.html',
   styleUrls: ['./favorite-star.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, StarToggleComponent],
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   @Input() displayCount? = true