geonetwork-ui 2.6.0-dev.c5432f39f → 2.6.0-dev.cfd9cd166

package/src/libs/feature/editor/src/lib/models/index.ts

@@ -1,3 +1 @@
-export * from './wizard-field.model'
-export * from './wizard-field.type'
 export * from './editor-config.model'

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 import {
   FeatureSearchModule,
   FIELDS_BRIEF,
+  FuzzySearchComponent,
   SearchFacade,
   SearchService,
 } from '../../../../../../libs/feature/search/src'
@@ -32,7 +33,7 @@ import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-l
       },
     },
   ],
-  imports: [FeatureSearchModule],
+  imports: [FeatureSearchModule, FuzzySearchComponent],
 })
 export class AddLayerFromCatalogComponent implements OnInit {
   constructor(private searchFacade: SearchFacade) {}

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.ts

@@ -2,8 +2,8 @@ import { ChangeDetectorRef, Component } from '@angular/core'
 import { MapFacade } from '../+state/map.facade'
 import { MapContextLayerGeojson } from '@geospatial-sdk/core'
 import { firstValueFrom } from 'rxjs'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { DragAndDropFileInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 
 const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
@@ -13,7 +13,12 @@ const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
   templateUrl: './add-layer-from-file.component.html',
   styleUrls: ['./add-layer-from-file.component.css'],
   standalone: true,
-  imports: [UiInputsModule, TranslateModule, CommonModule],
+  imports: [
+    TranslateDirective,
+    TranslatePipe,
+    CommonModule,
+    DragAndDropFileInputComponent,
+  ],
 })
 export class AddLayerFromFileComponent {
   errorMessage: string | null = null

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -8,11 +8,12 @@ import {
 } from '@angular/core'
 import { OgcApiEndpoint } from '@camptocamp/ogc-client'
 import { debounceTime, Subject } from 'rxjs'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import {
+  ButtonComponent,
   DropdownChoice,
+  DropdownSelectorComponent,
   TextInputComponent,
-  UiInputsModule,
 } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
@@ -22,7 +23,13 @@ import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
   templateUrl: './add-layer-from-ogc-api.component.html',
   styleUrls: ['./add-layer-from-ogc-api.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, UiInputsModule, TextInputComponent],
+  imports: [
+    CommonModule,
+    TextInputComponent,
+    DropdownSelectorComponent,
+    TranslatePipe,
+    ButtonComponent,
+  ],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
   @Input() ogcUrl: string

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.ts

@@ -5,7 +5,7 @@ import { MapFacade } from '../+state/map.facade'
 import { debounceTime } from 'rxjs/operators'
 import { MapContextLayer } from '@geospatial-sdk/core'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 
 @Component({
@@ -13,7 +13,13 @@ import { CommonModule } from '@angular/common'
   templateUrl: './add-layer-from-wfs.component.html',
   styleUrls: ['./add-layer-from-wfs.component.css'],
   standalone: true,
-  imports: [TextInputComponent, ButtonComponent, TranslateModule, CommonModule],
+  imports: [
+    TextInputComponent,
+    ButtonComponent,
+    TranslateDirective,
+    TranslatePipe,
+    CommonModule,
+  ],
 })
 export class AddLayerFromWfsComponent implements OnInit {
   wfsUrl = ''

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.ts

@@ -6,14 +6,20 @@ import { debounceTime } from 'rxjs/operators'
 import { MapContextLayer } from '@geospatial-sdk/core'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wms',
   templateUrl: './add-layer-from-wms.component.html',
   styleUrls: ['./add-layer-from-wms.component.css'],
   standalone: true,
-  imports: [TextInputComponent, CommonModule, TranslateModule, ButtonComponent],
+  imports: [
+    TextInputComponent,
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+  ],
 })
 export class AddLayerFromWmsComponent implements OnInit {
   wmsUrl = ''

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -1,29 +1,12 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { MatTabsModule } from '@angular/material/tabs'
-import { TranslateModule } from '@ngx-translate/core'
-import { FeatureSearchModule } from '../../../../../libs/feature/search/src'
 import { StoreModule } from '@ngrx/store'
 import * as fromMap from './+state/map.reducer'
 import { MapFacade } from './+state/map.facade'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { TextInputComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
-import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-from-ogc-api.component'
 
 @NgModule({
   imports: [
-    CommonModule,
-    UiLayoutModule,
-    MatTabsModule,
-    TranslateModule,
-    FeatureSearchModule,
     StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
-    UiElementsModule,
-    UiInputsModule,
-    AddLayerFromOgcApiComponent,
-    TextInputComponent,
   ],
   providers: [
     MapFacade,

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -4,8 +4,8 @@ import { debounceTime, switchMap } from 'rxjs/operators'
 import { GeocodingService } from '../geocoding.service'
 import { MapFacade } from '../+state/map.facade'
 import { CommonModule } from '@angular/common'
-import { SearchInputComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { SearchInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslatePipe } from '@ngx-translate/core'
 import { MapContextView } from '@geospatial-sdk/core'
 
 @Component({
@@ -13,12 +13,7 @@ import { MapContextView } from '@geospatial-sdk/core'
   templateUrl: './geocoding.component.html',
   styleUrls: ['./geocoding.component.css'],
   standalone: true,
-  imports: [
-    CommonModule,
-    UiInputsModule,
-    TranslateModule,
-    SearchInputComponent,
-  ],
+  imports: [CommonModule, SearchInputComponent, TranslatePipe],
 })
 export class GeocodingComponent implements OnDestroy {
   searchText = ''

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -9,7 +9,7 @@ import { AddLayerFromWfsComponent } from '../add-layer-from-wfs/add-layer-from-w
 import { AddLayerFromWmsComponent } from '../add-layer-from-wms/add-layer-from-wms.component'
 import { AddLayerFromCatalogComponent } from '../add-layer-from-catalog/add-layer-from-catalog.component'
 import { AddLayerFromFileComponent } from '../add-layer-from-file/add-layer-from-file.component'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 import {
   NgIconComponent,
@@ -35,7 +35,8 @@ import { matChevronRight } from '@ng-icons/material-icons/baseline'
     AddLayerFromWmsComponent,
     AddLayerFromCatalogComponent,
     AddLayerFromFileComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     CommonModule,
     NgIconComponent,
     ExpandablePanelButtonComponent,

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

@@ -12,7 +12,7 @@
       (selectValue)="selectLink($event)"
     ></gn-ui-dropdown-selector>
   </div>
-  <ng-container *ngIf="hidePreview; else dataView">
+  <ng-container *ngIf="hidePreview$ | async; else dataView">
     <gn-ui-popup-alert
       type="warning"
       icon="matErrorOutlineOutline"

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

@@ -1,22 +1,26 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   Output,
 } from '@angular/core'
 import { getLinkLabel, getLinkPriority } from '../../../../../../libs/util/shared/src'
-import { BehaviorSubject, combineLatest, of } from 'rxjs'
-import { catchError, finalize, map, switchMap, tap } from 'rxjs/operators'
+import { BehaviorSubject, combineLatest } from 'rxjs'
+import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  DatasetServiceDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import {
   ChartViewComponent,
   TableViewComponent,
 } from '../../../../../../libs/feature/dataviz/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 
 @Component({
@@ -29,7 +33,8 @@ import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
     CommonModule,
     DropdownSelectorComponent,
     TableViewComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     ChartViewComponent,
     PopupAlertComponent,
   ],
@@ -40,11 +45,16 @@ export class DataViewComponent {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  @Input() set selectedView(value: string) {
+    if (value !== 'map') {
+      this.linkSelected.emit(this.selectedLink$.value)
+    }
+  }
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
+  @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
   cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
     map((highF) => !highF)
   )
-  hidePreview = false
   excludeWfs$ = new BehaviorSubject(false)
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,
@@ -71,6 +81,10 @@ export class DataViewComponent {
   )
   selectedLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
+  hidePreview$ = this.excludeWfs$.pipe(
+    map((excludeWfs) => this.mode === 'chart' && excludeWfs)
+  )
+
   constructor(private mdViewFacade: MdViewFacade) {}
 
   setChartConfig(event: DatavizConfigurationModel) {
@@ -79,19 +93,8 @@ export class DataViewComponent {
 
   selectLink(linkAsString: string) {
     const link: DatasetOnlineResource = JSON.parse(linkAsString)
+    this.linkSelected.emit(link)
     link.url = new URL(link.url)
-    this.excludeWfs$
-      .pipe(
-        tap((excludeWfs) => {
-          this.hidePreview =
-            link['accessServiceProtocol'] === 'wfs' &&
-            excludeWfs &&
-            this.mode === 'chart'
-              ? true
-              : false
-          this.selectedLink$.next(link)
-        })
-      )
-      .subscribe()
+    this.selectedLink$.next(link)
   }
 }

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

@@ -11,7 +11,7 @@ import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
 
 export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
@@ -24,7 +24,7 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   styleUrls: ['./data-view-permalink.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CopyTextButtonComponent, TranslateModule],
+  imports: [CommonModule, CopyTextButtonComponent, TranslatePipe],
 })
 export class DataViewPermalinkComponent {
   viewType$ = new BehaviorSubject<string>('map')

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

@@ -12,7 +12,7 @@ import {
 import { MatTabsModule } from '@angular/material/tabs'
 import { CommonModule } from '@angular/common'
 import { DataViewWebComponentComponent } from '../data-view-web-component/data-view-web-component.component'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-data-view-share',
@@ -24,7 +24,7 @@ import { TranslateModule } from '@ngx-translate/core'
     MatTabsModule,
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
-    TranslateModule,
+    TranslateDirective,
   ],
   standalone: true,
 })

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

@@ -9,7 +9,7 @@ import { MdViewFacade } from '../state'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
 
 @Component({
@@ -18,7 +18,7 @@ import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
   styleUrls: ['./data-view-web-component.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CopyTextButtonComponent, TranslateModule],
+  imports: [CommonModule, CopyTextButtonComponent, TranslatePipe],
 })
 export class DataViewWebComponentComponent {
   viewType$ = new BehaviorSubject<string>('map')

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
@@ -31,7 +31,7 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
   styleUrls: ['./external-viewer-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent, NgIcon, TranslateModule],
+  imports: [CommonModule, ButtonComponent, NgIcon, TranslatePipe],
   viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class ExternalViewerButtonComponent {

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -2,13 +2,8 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
-import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { FeatureMapModule } from '../../../../../libs/feature/map/src'
-import {
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../libs/ui/inputs/src'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import {
@@ -16,8 +11,7 @@ import {
   reducer,
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
 import { DataTableComponent } from '../../../../../libs/ui/dataviz/src'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
@@ -27,14 +21,11 @@ import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
     CommonModule,
     StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
-    UiLayoutModule,
     FeatureMapModule,
     FeatureCatalogModule,
-    UiInputsModule,
-    UiElementsModule,
     MatTabsModule,
-    UiWidgetsModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     DataTableComponent,
     NgIconsModule,
     DropdownSelectorComponent,

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.ts

@@ -5,12 +5,12 @@ import {
   OnInit,
 } from '@angular/core'
 import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { BehaviorSubject, Observable, combineLatest, map, mergeMap } from 'rxjs'
+import { BehaviorSubject, combineLatest, map, mergeMap, Observable } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Choice, DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import axios from 'axios'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { GpfApiDlListItemComponent } from '../gpf-api-dl-list-item/gpf-api-dl-list-item.component'
 
 export interface Label {
@@ -57,7 +57,8 @@ export interface Field {
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     DropdownSelectorComponent,
     GpfApiDlListItemComponent,
   ],

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -1,16 +1,22 @@
 import { CommonModule } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, Input, OnInit } from '@angular/core'
-import { NgIconsModule } from '@ng-icons/core'
-import { TranslateModule } from '@ngx-translate/core'
-import { Observable, map, mergeMap } from 'rxjs'
+import { NgIconsModule, provideIcons } from '@ng-icons/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { map, mergeMap, Observable } from 'rxjs'
+import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-gpf-api-dl-list-item',
   templateUrl: './gpf-api-dl-list-item.component.html',
   styleUrls: ['./gpf-api-dl-list-item.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, NgIconsModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIconsModule],
+  providers: [
+    provideIcons({
+      matCloudDownloadOutline,
+    }),
+  ],
 })
 export class GpfApiDlListItemComponent implements OnInit {
   @Input() link

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

@@ -1,18 +1,36 @@
 <div class="w-full h-full flex flex-col gap-[13px]">
   <div
-    class="flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+    class="flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
   >
-    <div class="grow min-w-0">
+    <gn-ui-dropdown-selector
+      *ngIf="displaySource"
+      class="w-full md:flex-1 md:min-w-0"
+      extraBtnClass="font-sans font-bold"
+      [title]="'map.select.layer' | translate"
+      [choices]="dropdownChoices$ | async"
+      (selectValue)="selectLinkToDisplay($event)"
+    ></gn-ui-dropdown-selector>
+
+    <ng-container *ngIf="(styleLinks$ | async)?.length > 0; else styleDisabled">
       <gn-ui-dropdown-selector
-        [ngClass]="{ hidden: !displaySource }"
-        class="w-full"
+        class="w-full md:flex-1 md:min-w-0"
         extraBtnClass="font-sans font-bold"
-        [title]="'map.select.layer' | translate"
-        [choices]="dropdownChoices$ | async"
-        (selectValue)="selectLinkToDisplay($event)"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
-    </div>
-    <div class="self-end">
+    </ng-container>
+    <ng-template #styleDisabled>
+      <gn-ui-dropdown-selector
+        class="w-full md:flex-1 md:min-w-0 text-gray-400"
+        extraBtnClass="font-sans font-bold text-gray-400"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        [disabled]="true"
+      ></gn-ui-dropdown-selector>
+    </ng-template>
+
+    <div class="self-end md:ml-2">
       <gn-ui-external-viewer-button
         extraClass="w-[44px] h-[44px]"
         [link]="selectedLink$ | async"