geonetwork-ui 2.4.1-dev.7a0dc5e3f → 2.4.1-dev.89bb09dfa

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

@@ -38,9 +38,6 @@ export class ResultsTableContainerComponent implements OnDestroy {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
-  isUnsavedDraft = (record: CatalogRecord): boolean =>
-    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
-
   constructor(
     protected searchFacade: SearchFacade,
     private searchService: SearchService,

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -10,6 +10,7 @@
   "
 >
   <div
+    data-test="icon-container"
     class="{{ bgClass }} {{
       textClass
     }} text-[1.875em] rounded-full mr-[0.55em] flex justify-center items-center w-[2.2em] h-[2.2em] shrink-0"

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

@@ -5,6 +5,7 @@ export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
+export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -19,5 +20,5 @@ export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
-export * from './lib/user-preview/user-preview.component'
 export * from './lib/user-feedback-item/user-feedback-item.component'
+export * from './lib/user-preview/user-preview.component'

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.html

@@ -2,31 +2,16 @@
 </ng-container>
 
 <ng-template #withImage>
-  <div class="w-full h-full flex flex-col gap-2">
-    <div class="flex-1 group relative">
-      <img
-        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
-        [alt]="altText"
-        loading="lazy"
-        [src]="previewUrl"
-      />
-      <gn-ui-button
-        type="outline"
-        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
-        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
-        (buttonClick)="handleDelete()"
-        [disabled]="disabled"
-      >
-        <ng-icon name="iconoirBin"></ng-icon>
-      </gn-ui-button>
-    </div>
+  <div class="w-80 h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+    </gn-ui-image-overlay-preview>
     <gn-ui-text-input
       *ngIf="showAltTextInput"
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
-      [disabled]="disabled"
+      [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
       <gn-ui-button type="gray" (buttonClick)="handleDelete()">

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.ts

@@ -9,27 +9,30 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
-import { firstValueFrom } from 'rxjs'
-import { ButtonComponent } from '../button/button.component'
-import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { UrlInputComponent } from '../url-input/url-input.component'
-import { TextInputComponent } from '../text-input/text-input.component'
+import {
+  ButtonComponent,
+  FilesDropDirective,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
+  iconoirBin,
   iconoirFramePlusIn,
+  iconoirLink,
   iconoirMediaImage,
   iconoirMediaImageXmark,
-  iconoirBin,
   iconoirPlus,
-  iconoirLink,
 } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { firstValueFrom } from 'rxjs'
+import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-overlay-preview.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -46,6 +49,7 @@ import {
     UrlInputComponent,
     TextInputComponent,
     NgIconComponent,
+    ImageOverlayPreviewComponent,
   ],
   providers: [
     provideIcons({

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

@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
-import { RouterModule } from '@angular/router'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { ThumbnailComponent } from './thumbnail/thumbnail.component'
+import { RouterModule } from '@angular/router'
 import {
   BadgeComponent,
   TextInputComponent,
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
-import { FormsModule } from '@angular/forms'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import { provideNgIconsConfig } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
-import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { ImageInputComponent } from './image-input/image-input.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
-import { provideNgIconsConfig } from '@ng-icons/core'
+import { UserPreviewComponent } from './user-preview/user-preview.component'
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     BadgeComponent,
     MaxLinesComponent,
     TextInputComponent,
+    ImageInputComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -50,6 +52,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     AvatarComponent,
     UserPreviewComponent,
     MarkdownParserComponent,
+    ImageInputComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -6,23 +6,22 @@ export * from './lib/checkbox/checkbox.component'
 export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
-export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'
+export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
 export * from './lib/dropdown-selector/dropdown-selector.component'
 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'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/switch-toggle/switch-toggle.component'
-export * from './lib/file-input/file-input.component'
-export * from './lib/image-input/image-input.component'
-export * from './lib/url-input/url-input.component'

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -62,9 +62,10 @@ export class ButtonComponent {
     return `${this.btnClass} ${this.extraClass}`
   }
 
-  handleClick(event: Event) {
+  handleClick(event: MouseEvent) {
     this.buttonClick.emit()
     event.preventDefault()
+    ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)
   }
 }

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.ts

@@ -48,10 +48,10 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
 export class FileInputComponent {
   @Input() maxSizeMB: number
   @Input() uploadProgress?: number
-  @Input() disabled? = false
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
   @Output() urlChange: EventEmitter<string> = new EventEmitter()
   @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+  @Input() disabled? = false
 
   dragFilesOver = false
 

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

@@ -1,32 +1,16 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { TagInputModule } from 'ngx-chips'
-import { NgxDropzoneModule } from 'ngx-dropzone'
-import { ButtonComponent } from './button/button.component'
-import { BadgeComponent } from './badge/badge.component'
-import { ChipsInputComponent } from './chips-input/chips-input.component'
-import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
-import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
-import { TextAreaComponent } from './text-area/text-area.component'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { OverlayModule } from '@angular/cdk/overlay'
 import { MatCheckboxModule } from '@angular/material/checkbox'
-import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
-import { CheckToggleComponent } from './check-toggle/check-toggle.component'
-import { MatTooltipModule } from '@angular/material/tooltip'
-import { CommonModule } from '@angular/common'
-import { CheckboxComponent } from './checkbox/checkbox.component'
-import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatNativeDateModule } from '@angular/material/core'
-import { EditableLabelDirective } from './editable-label/editable-label.directive'
-import { ImageInputComponent } from './image-input/image-input.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
@@ -37,6 +21,21 @@ import {
   matExpandLess,
   matExpandMore,
 } from '@ng-icons/material-icons/baseline'
+import { TranslateModule } from '@ngx-translate/core'
+import { TagInputModule } from 'ngx-chips'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { BadgeComponent } from './badge/badge.component'
+import { ButtonComponent } from './button/button.component'
+import { CheckToggleComponent } from './check-toggle/check-toggle.component'
+import { CheckboxComponent } from './checkbox/checkbox.component'
+import { ChipsInputComponent } from './chips-input/chips-input.component'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
+import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
+import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
+import { TextAreaComponent } from './text-area/text-area.component'
+import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 
 @NgModule({
   declarations: [
@@ -66,7 +65,6 @@ import {
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
-    ImageInputComponent,
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
@@ -95,7 +93,6 @@ import {
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
-    ImageInputComponent,
     BadgeComponent,
   ],
 })

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -1,7 +1,7 @@
 <span class="w-full inline-block relative">
   <input
     #input
-    class="gn-ui-text-input px-[var(--text-padding)]"
+    class="gn-ui-text-input gn-ui-url-input px-[var(--text-padding)]"
     [ngClass]="extraClass"
     type="url"
     [value]="inputValue"
@@ -21,12 +21,14 @@
     <ng-icon name="iconoirLink"></ng-icon>
   </div>
   <gn-ui-button
-    *ngIf="showUploadButton"
+    *ngIf="showValidateButton"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
     type="primary"
     [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
     (buttonClick)="handleUpload(input)"
   >
-    <ng-icon name="iconoirArrowUp"> </ng-icon>
+    <ng-content>
+      <ng-icon name="iconoirArrowUp"></ng-icon>
+    </ng-content>
   </gn-ui-button>
 </span>

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -45,7 +45,7 @@ export class UrlInputComponent {
   @Input() extraClass = ''
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
-  @Input() showUploadButton = true
+  @Input() showValidateButton = true
 
   /**
    * This will emit null if the field is emptied

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

@@ -31,6 +31,11 @@
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
     data-cy="table-row"
+    [title]="
+      !item.extras?.edit && !isDraftPage
+        ? ('editor.record.lock.reason' | translate)
+        : ''
+    "
   >
     <div
       class="relative h-0"
@@ -44,7 +49,13 @@
     </div>
     <ng-container *ngFor="let column of columns">
       <div
-        class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+        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,
+          'group-hover:text-main group-hover:bg-gray-50':
+            item.extras?.edit || isDraftPage,
+        }"
       >
         <ng-container
           *ngTemplateOutlet="column.cell; context: { $implicit: item }"

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

@@ -9,12 +9,9 @@ import {
 } from '@angular/core'
 import { InteractiveTableColumnComponent } from './interactive-table-column/interactive-table-column.component'
 import { CommonModule } from '@angular/common'
-import {
-  NgIconComponent,
-  provideIcons,
-  provideNgIconsConfig,
-} from '@ng-icons/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-interactive-table',
@@ -22,7 +19,7 @@ import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
   styleUrls: ['./interactive-table.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, InteractiveTableColumnComponent, NgIconComponent],
+  imports: [CommonModule, NgIconComponent, TranslateModule],
   providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })],
 })
 export class InteractiveTableComponent {
@@ -30,6 +27,7 @@ export class InteractiveTableComponent {
   columns: QueryList<InteractiveTableColumnComponent>
 
   @Input() items: unknown[] = []
+  @Input() isDraftPage = false
   @Output() itemClick = new EventEmitter<unknown>()
 
   get gridStyle() {

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

@@ -1,11 +1,18 @@
 <gn-ui-interactive-table
   [items]="records"
+  [isDraftPage]="isDraftPage"
   (itemClick)="handleRecordClick($event)"
 >
   <!-- SELECTED COLUMN -->
   <gn-ui-interactive-table-column [width]="'3rem'">
-    <ng-template #cell let-item>
+    <ng-template #cell let-item let-i="index">
+      <ng-icon
+        name="iconoirLock"
+        class="text-purple"
+        *ngIf="!item.extras?.edit && !isDraftPage"
+      ></ng-icon>
       <gn-ui-checkbox
+        *ngIf="item.extras?.edit || isDraftPage"
         [checked]="isChecked(item)"
         (changed)="handleRecordSelectedChange($event, item)"
         class="-m-2"
@@ -102,9 +109,9 @@
     <ng-template #cell let-item>
       <span class="text-xs">
         {{
-          (isUnsavedDraft(item)
-            ? 'record.metadata.status.notPublished'
-            : 'record.metadata.status.published'
+          (item.extras?.['isPublishedToAll']
+            ? 'record.metadata.status.published'
+            : 'record.metadata.status.notPublished'
           ) | translate
         }}</span
       >
@@ -123,7 +130,11 @@
     </ng-template>
     <ng-template #cell let-item>
       <div class="flex text-left w-full text-xs">
-        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+        {{
+          item.extras?.['isPublishedToAll']
+            ? dateToString(item.recordUpdated)
+            : '-'
+        }}
       </div>
     </ng-template>
   </gn-ui-interactive-table-column>
@@ -138,8 +149,14 @@
         (buttonClick)="openActionMenu(item, template)"
         type="light"
         data-test="record-menu-button"
+        [disabled]="!item.extras?.edit && !isDraftPage"
       >
-        <ng-icon name="matMoreVert"></ng-icon>
+        <ng-icon
+          [ngClass]="{
+            'text-purple-light': !item.extras?.edit && !isDraftPage,
+          }"
+          name="matMoreVert"
+        ></ng-icon>
       </gn-ui-button>
       <ng-template #template>
         <gn-ui-action-menu

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

@@ -30,7 +30,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core'
 import { ActionMenuComponent } from './action-menu/action-menu.component'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
-import { iconoirUser } from '@ng-icons/iconoir'
+import { iconoirUser, iconoirLock } from '@ng-icons/iconoir'
 import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
@@ -55,9 +55,8 @@ import { matMoreVert } from '@ng-icons/material-icons/baseline'
     ActionMenuComponent,
     NgIconComponent,
     CdkOverlayOrigin,
-    CdkConnectedOverlay,
   ],
-  providers: [provideIcons({ iconoirUser, matMoreVert })],
+  providers: [provideIcons({ iconoirUser, iconoirLock, matMoreVert })],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
@@ -65,8 +64,8 @@ export class ResultsTableComponent {
   @Input() sortOrder: SortByField = null
   @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
   @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
-  @Input() isUnsavedDraft: (record: CatalogRecord) => boolean = () => true
   @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+  @Input() isDraftPage = false
 
   // emits the column (field) as well as the order
   @Output() sortByChange = new EventEmitter<[string, 'asc' | 'desc']>()
@@ -170,8 +169,9 @@ export class ResultsTableComponent {
     return getBadgeColor(format)
   }
 
-  handleRecordClick(item: unknown) {
-    this.recordClick.emit(item as CatalogRecord)
+  handleRecordClick(item: CatalogRecord) {
+    if (item?.extras?.edit || this.isDraftPage)
+      this.recordClick.emit(item as CatalogRecord)
   }
 
   handleDuplicate(item: unknown) {

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

@@ -1,5 +1,14 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  ServiceProtocol,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  OgcApiEndpoint,
+  WfsEndpoint,
+  WmsEndpoint,
+  WmtsEndpoint,
+} from '@camptocamp/ogc-client'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -242,6 +251,47 @@ export function getLinkLabel(link: DatasetOnlineResource): string {
   return format ? `${label} (${format})` : label
 }
 
+export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
+  switch (serviceProtocol) {
+    case 'ogcFeatures': {
+      const layers = await new OgcApiEndpoint(url).allCollections
+      return layers
+    }
+    case 'wfs': {
+      const endpointWfs = new WfsEndpoint(url)
+      await endpointWfs.isReady()
+      return endpointWfs.getFeatureTypes()
+    }
+    case 'wms': {
+      const endpointWms = new WmsEndpoint(url)
+      await endpointWms.isReady()
+      return endpointWms
+        .getLayers()
+        .flatMap(wmsLayerFlatten)
+        .filter((l) => l.name)
+    }
+    case 'wmts': {
+      const endpointWmts = new WmtsEndpoint(url)
+      await endpointWmts.isReady()
+      return endpointWmts.getLayers()
+    }
+    default:
+      return undefined
+  }
+}
+
+function wmsLayerFlatten(layerFull) {
+  const layer = {
+    title: layerFull.title,
+    name: layerFull.name,
+    abstract: layerFull.abstract,
+  }
+
+  return 'children' in layerFull && Array.isArray(layerFull.children)
+    ? [layer, ...layerFull.children.flatMap(wmsLayerFlatten)]
+    : [layer]
+}
+
 export function getMimeTypeForFormat(format: FileFormat): string | null {
   return format in FORMATS ? FORMATS[format.toLowerCase()].mimeTypes[0] : null
 }

package/tailwind.base.config.js

@@ -44,6 +44,8 @@ module.exports = {
           800: '#8a2c0d',
           900: '#73230d',
         },
+        purple: '#9747FF',
+        'purple-light': '#DDC3FF',
       },
       fontFamily: {
         sans: 'var(--font-family-main, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")',