geonetwork-ui 2.6.0-dev.582b4530a → 2.6.0-dev.70b25ba3b

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -5,7 +5,9 @@ import {
   Component,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   Input,
+  Output,
   QueryList,
   ViewChild,
 } from '@angular/core'
@@ -13,6 +15,7 @@ import { CommonModule } from '@angular/common'
 import { Paginable } from '../paginable.interface'
 import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
+type ComponentSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
   selector: 'gn-ui-block-list',
   templateUrl: './block-list.component.html',
@@ -22,15 +25,16 @@ import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.comp
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class BlockListComponent implements AfterViewInit, Paginable {
-  @Input() pageSize = 5
+  pageSize = 4
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
   @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
     ElementRef<HTMLElement>
   >
   @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
-
   protected minHeight = 0
+  @Output() listChanges = new EventEmitter<BlockListComponent>()
+  subComponentSize: ComponentSize = 'M'
 
   protected currentPage_ = 0
   protected get pages() {
@@ -47,18 +51,26 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
   get currentPage() {
-    return this.currentPage_ + 1 // this is 1-based
+    return this.currentPage_ + 1
   }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
-    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.blocks.changes.subscribe(() => {
+      this.updateSizes()
+      this.refreshBlocksVisibility()
+      this.goToPage(1)
+      this.changeDetector.detectChanges()
+      this.listChanges.emit(this)
+    })
+    this.updateSizes()
     this.refreshBlocksVisibility()
 
     // we store the first height as the min-height of the list container
     this.minHeight = this.blockContainer.nativeElement.clientHeight
     this.changeDetector.detectChanges()
+    this.listChanges.emit(this)
   }
 
   protected refreshBlocksVisibility = () => {
@@ -71,7 +83,33 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     })
   }
 
-  // pageIndex is 1-based
+  protected updateSizes() {
+    this.subComponentSize = this.computeSubComponentSize()
+    this.pageSize = this.computePageSize()
+  }
+
+  protected computeSubComponentSize(): ComponentSize {
+    if (!this.blocks) return 'M'
+    const subComponentsCount = this.blocks.length
+    if (subComponentsCount <= 3) return 'L'
+    if (subComponentsCount <= 12) return 'M'
+    if (subComponentsCount <= 18) return 'S'
+    return 'XS'
+  }
+
+  protected computePageSize(): number {
+    switch (this.subComponentSize) {
+      case 'L':
+        return 3
+      case 'S':
+        return 6
+      case 'XS':
+        return 8
+      default:
+        return 4
+    }
+  }
+
   public goToPage(pageIndex: number) {
     this.currentPage_ = Math.max(
       Math.min(pageIndex - 1, this.pagesCount - 1),

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,4 +1,3 @@
 :host {
   position: relative;
-  display: block;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,4 +1,4 @@
-<div #carouselOverflowContainer class="w-full">
+<div #carouselOverflowContainer class="w-full block">
   <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -31,11 +31,7 @@
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
     data-cy="table-row"
-    [title]="
-      !item.extras?.edit && !isDraftPage
-        ? ('editor.record.lock.reason' | translate)
-        : ''
-    "
+    [title]="getItemTitle(item) | translate"
   >
     <div
       class="relative h-0"
@@ -52,9 +48,9 @@
         class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
         [ngClass]="{
           'text-purple-light cursor-default':
-            !item.extras?.edit && !isDraftPage,
+            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
           'group-hover:text-main group-hover:bg-gray-50':
-            item.extras?.edit || isDraftPage,
+            (item.extras?.edit || isDraftPage) && item.kind === 'dataset',
         }"
       >
         <ng-container

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts

@@ -12,7 +12,11 @@ import { CommonModule } from '@angular/common'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
+marker('editor.record.lock.reason')
+marker('editor.record.lock.format')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -44,6 +48,15 @@ export class InteractiveTableComponent {
     }
   }
 
+  getItemTitle(item: CatalogRecord) {
+    if (!item.extras?.edit && !this.isDraftPage && item.kind === 'dataset') {
+      return 'editor.record.lock.reason'
+    } else if (item.kind !== 'dataset') {
+      return 'editor.record.lock.format'
+    }
+    return ''
+  }
+
   handleRowClick(item: unknown) {
     this.itemClick.emit(item)
   }

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -1,18 +1,30 @@
-<div class="flex flex-row gap-x-4 items-center">
+<div class="flex flex-row gap-x-1 items-center">
   <gn-ui-button
     data-test="previousButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isFirstPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
-    <ng-icon name="matArrowBack"></ng-icon>
+    <ng-icon name="matArrowBackIos"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isLastPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
-    <ng-icon name="matArrowForward"></ng-icon>
+    <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -5,8 +5,8 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
-  matArrowBack,
-  matArrowForward,
+  matArrowBackIos,
+  matArrowForwardIos,
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -18,7 +18,7 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   standalone: true,
   imports: [ButtonComponent, NgIconComponent],
   providers: [
-    provideIcons({ matArrowForward, matArrowBack }),
+    provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
       size: '0.875em',
     }),

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

@@ -3,3 +3,4 @@ export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
 export * from './lib/components/map-legend/map-legend.component'
 export * from './lib/map-utils'
+export * from './lib/components/spatial-extent/spatial-extent.component'

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.html

@@ -0,0 +1,4 @@
+<gn-ui-map-container
+  class="h-full w-full"
+  [context]="mapContext$ | async"
+></gn-ui-map-container>

package/src/libs/{feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.ts → ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts}

@@ -1,27 +1,26 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Geometry } from 'geojson'
 import GeoJSON, { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
-import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { Polygon } from 'ol/geom'
 import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
 } from '@geospatial-sdk/core'
-import { MapContainerComponent } from '../../../../../../../../../libs/ui/map/src'
+import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
+import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
-  selector: 'gn-ui-form-field-map-container',
+  selector: 'gn-ui-spatial-extent',
   standalone: true,
   imports: [CommonModule, MapContainerComponent],
-  templateUrl: './form-field-map-container.component.html',
-  styleUrls: ['./form-field-map-container.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './spatial-extent.component.html',
+  styleUrl: './spatial-extent.component.css',
 })
-export class FormFieldMapContainerComponent {
+export class SpatialExtentComponent {
   @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
     this.spatialExtents$.next(value)
   }

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

@@ -16,5 +16,6 @@ export * from './lib/record-preview-text/record-preview-text.component'
 export * from './lib/record-preview-title/record-preview-title.component'
 export * from './lib/record-metric/record-metric.component'
 export * from './lib/results-list-item/results-list-item.component'
+export * from './lib/results-hits-search-kind/results-hits-search-kind.component'
 export * from './lib/results-hits-number/results-hits-number.component'
 export * from './lib/results-table/results-table.component'

package/src/libs/ui/search/src/lib/results-hits-number/results-hits-number.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="!loading" class="w-full">
-  <span translate [translateParams]="{ hits: hits }"
+  <span data-cy="resultsHitsFound" translate [translateParams]="{ hits: hits }"
     >results.records.hits.found</span
   >
   <p

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.html

@@ -0,0 +1,24 @@
+<gn-ui-inline-filter
+  [choices]="availableChoices"
+  [selected]="selected"
+  (selectValues)="onSelectedValues($event)"
+>
+  <ng-template let-choice>
+    <gn-ui-kind-badge
+      [kind]="choice.value"
+      [contentTemplate]="customTemplate"
+      class="gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black"
+      [ngClass]="{
+        '!bg-primary-lightest hover:bg-primary-lightest':
+          isSelectedChoice(choice.value) || isAllChoice(choice.value),
+      }"
+    >
+      <ng-template #customTemplate>
+        {{ 'search.filters.recordKind.' + choice.value | translate
+        }}<span class="ml-1" *ngIf="isSelectedChoice(choice.value)"
+          >({{ choice.count }})</span
+        >
+      </ng-template>
+    </gn-ui-kind-badge>
+  </ng-template>
+</gn-ui-inline-filter>

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  Output,
+} from '@angular/core'
+import { Choice } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-results-hits-search-kind',
+  templateUrl: './results-hits-search-kind.component.html',
+})
+export class ResultsHitsSearchKindComponent implements OnChanges {
+  @Input() selected: string[] = []
+  @Input() choices: Choice[] = []
+  @Output() selectionChanged = new EventEmitter<string[]>()
+
+  availableChoices: Choice[] = []
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.choices && changes.choices.currentValue) {
+      this.availableChoices = this.buildFilterChoices(this.choices)
+    }
+  }
+
+  buildFilterChoices(availableValues: Choice[]) {
+    return [
+      ...[
+        {
+          label: 'all',
+          value: 'all',
+        },
+      ],
+      ...availableValues,
+    ]
+  }
+
+  onSelectedValues(values: string[]) {
+    const selectedValues = values.includes('all') ? [] : values
+
+    this.selectionChanged.emit(selectedValues)
+  }
+
+  isSelectedChoice(choiceValue: string) {
+    return this.selected.includes(choiceValue)
+  }
+
+  isAllChoice(choiceValue: string) {
+    return this.selected.length === 0 && choiceValue === 'all'
+  }
+}

package/src/libs/ui/search/src/lib/results-table/results-table.component.html

@@ -9,10 +9,10 @@
       <ng-icon
         name="iconoirLock"
         class="text-purple"
-        *ngIf="!item.extras?.edit && !isDraftPage"
+        *ngIf="(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'"
       ></ng-icon>
       <gn-ui-checkbox
-        *ngIf="item.extras?.edit || isDraftPage"
+        *ngIf="(item.extras?.edit || isDraftPage) && item.kind === 'dataset'"
         [checked]="isChecked(item)"
         (changed)="handleRecordSelectedChange($event, item)"
         class="-m-2"
@@ -149,11 +149,14 @@
         (buttonClick)="openActionMenu(item, template)"
         type="light"
         data-test="record-menu-button"
-        [disabled]="!item.extras?.edit && !isDraftPage"
+        [disabled]="
+          (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'
+        "
       >
         <ng-icon
           [ngClass]="{
-            'text-purple-light': !item.extras?.edit && !isDraftPage,
+            'text-purple-light':
+              (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
           }"
           name="matMoreVert"
         ></ng-icon>

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -174,8 +174,9 @@ export class ResultsTableComponent {
   }
 
   handleRecordClick(item: CatalogRecord) {
-    if (item?.extras?.edit || this.isDraftPage)
+    if ((item?.extras?.edit || this.isDraftPage) && item.kind === 'dataset') {
       this.recordClick.emit(item as CatalogRecord)
+    }
   }
 
   handleDuplicate(item: unknown) {

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

@@ -11,6 +11,7 @@ import { RecordPreviewRowComponent } from './record-preview-row/record-preview-r
 import { RecordPreviewTextComponent } from './record-preview-text/record-preview-text.component'
 import { RecordPreviewTitleComponent } from './record-preview-title/record-preview-title.component'
 import { ResultsHitsNumberComponent } from './results-hits-number/results-hits-number.component'
+import { ResultsHitsSearchKindComponent } from './results-hits-search-kind/results-hits-search-kind.component'
 import {
   DEFAULT_RESULTS_LAYOUT_CONFIG,
   RESULTS_LAYOUT_CONFIG,
@@ -24,6 +25,7 @@ import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import {
   MetadataQualityComponent,
   UiElementsModule,
+  KindBadgeComponent,
 } from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { CommonModule } from '@angular/common'
@@ -48,6 +50,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     RecordMetricComponent,
     ResultsListComponent,
     ResultsHitsNumberComponent,
+    ResultsHitsSearchKindComponent,
     ResultsListItemComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
@@ -74,6 +77,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
       matFace,
       matHomeWorkOutline,
     }),
+    KindBadgeComponent,
     MetadataQualityComponent,
   ],
   exports: [
@@ -86,6 +90,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     FacetsModule,
     RecordPreviewComponent,
     ResultsHitsNumberComponent,
+    ResultsHitsSearchKindComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
   ],

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -3,8 +3,9 @@
   <ng-container *ngSwitchCase="'light'">
     <div class="flex items-center relative">
       <div
-        class="flex-shrink-0 {{ color.text }} text-xs font-medium mr-2
+        class="flex-shrink-0 {{ color.text }} font-medium mr-2
              text-opacity-100 !text-slate-800"
+        data-cy="progressPercentage"
       >
         {{ progress }}%
       </div>

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -99,6 +99,7 @@ export function loadAppConfig() {
           'metadata_language',
           'login_url',
           'logout_url',
+          'settings_url',
           'web_component_embedder_url',
           'languages',
           'contact_email',

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -7,6 +7,7 @@ proxy_path = "/proxy/?url="
 metadata_language = "fre"
 login_url = "/cas/login?service="
 logout_url = "/geonetwork/signout"
+settings_url = "/geonetwork/settings"
 web_component_embedder_url = "/datahub/wc-embedder.html"
 
 [map]

package/src/libs/util/shared/src/index.ts

@@ -3,3 +3,4 @@ export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
 export * from './lib/image-fallback.directive'
+export * from './lib/gn-ui-version'

package/src/libs/util/shared/src/lib/gn-ui-version.ts

@@ -0,0 +1,8 @@
+import packageJson from '../../../../../package.json'
+
+export const GEONETWORK_UI_VERSION = packageJson.version
+
+export const GEONETWORK_UI_TAG_NAME =
+  GEONETWORK_UI_VERSION.split('-')[1] === 'dev'
+    ? 'main'
+    : `v${packageJson.version}`

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  ServiceOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
 
 export enum LinkUsage {
@@ -16,8 +19,11 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
+  getUsagesForLink(
+    link: DatasetOnlineResource | ServiceOnlineResource
+  ): LinkUsage[] {
     switch (link.type) {
+      case 'endpoint':
       case 'service': {
         switch (link.accessServiceProtocol) {
           case 'esriRest':
@@ -54,7 +60,10 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
+  hasUsage(
+    link: DatasetOnlineResource | ServiceOnlineResource,
+    usage: LinkUsage
+  ) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,6 +1,7 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   DatasetOnlineResource,
+  ServiceOnlineResource,
   ServiceProtocol,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -140,7 +141,9 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetOnlineResource): number {
+export function getLinkPriority(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -164,7 +167,9 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetOnlineResource): FileFormat {
+export function getFileFormat(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -181,7 +186,7 @@ export function getFileFormat(link: DatasetOnlineResource): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetOnlineResource,
+  link: DatasetOnlineResource | ServiceOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -203,7 +208,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetOnlineResource,
+  link: DatasetOnlineResource | ServiceOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -225,7 +230,9 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetOnlineResource): string {
+export function getLinkLabel(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): string {
   let format = ''
   switch (link.type) {
     case 'service':
@@ -249,7 +256,7 @@ export function getLinkLabel(link: DatasetOnlineResource): string {
     default:
       format = getFileFormat(link)
   }
-  const label = link.description || link.name
+  const label = link.description || ('name' in link ? link.name : '')
   return format ? `${label} (${format})` : label
 }
 
@@ -261,14 +268,25 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
     }
     case 'wfs': {
       const endpointWfs = await new WfsEndpoint(url).isReady()
-      return endpointWfs.getFeatureTypes()
+      const featureTypes = await endpointWfs.getFeatureTypes()
+      const layers = await Promise.all(
+        featureTypes.map(async (collection) => {
+          return await endpointWfs.getFeatureTypeFull(collection.name)
+        })
+      )
+      return layers
     }
     case 'wms': {
       const endpointWms = await new WmsEndpoint(url).isReady()
-      return endpointWms
-        .getLayers()
-        .flatMap(wmsLayerFlatten)
-        .filter((l) => l.name)
+      const layers = (
+        await endpointWms
+          .getLayers()
+          .flatMap(wmsLayerFlatten)
+          .filter((l) => l.name)
+      ).map((collection) => {
+        return endpointWms.getLayerByName(collection.name)
+      })
+      return layers
     }
     case 'wmts': {
       const endpointWmts = await new WmtsEndpoint(url).isReady()
@@ -279,7 +297,7 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
   }
 }
 
-function wmsLayerFlatten(layerFull) {
+export function wmsLayerFlatten(layerFull) {
   const layer = {
     title: layerFull.title,
     name: layerFull.name,

package/tailwind.base.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   theme: {
     extend: {
+      screens: {
+        xs: '320px',
+      },
       colors: {
         'primary-white': 'var(--color-primary-white)',
         'primary-lightest': 'var(--color-primary-lightest)',