geonetwork-ui 2.11.0-dev.2478042b2 → 2.11.0-dev.30db8c2d6

package/src/libs/ui/inputs/src/lib/spatial-extent-dropdown/spatial-extent-dropdown.component.html

@@ -0,0 +1,117 @@
+<gn-ui-button
+  type="outline"
+  extraClass="bg-background w-full !p-[8px] !pl-[16px]"
+  [title]="title"
+  (buttonClick)="toggleOverlay()"
+  cdkOverlayOrigin
+  #overlayOrigin="cdkOverlayOrigin"
+>
+  <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
+    <div class="text-left font-medium truncate py-1">
+      {{ title }}
+    </div>
+    @if (hasSelection) {
+      <div
+        class="bg-primary-lighter text-white shrink-0 rounded-full font-bold text-[12px] w-[22px] h-[22px] flex items-center justify-center"
+      >
+        1
+      </div>
+    }
+  </div>
+  <button class="h-6 w-6 flex items-center" data-cy="clearSelection">
+    @if (hasSelection && !overlayOpen) {
+      <ng-icon
+        class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+        (click)="removeSelection($event)"
+        name="matClose"
+      ></ng-icon>
+    }
+  </button>
+  <ng-icon
+    [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
+    class="shrink-0 opacity-40"
+  >
+  </ng-icon>
+</gn-ui-button>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="bg-white border border-gray-400 rounded shadow-lg pt-[12px] px-[16px] overlay-container w-[280px] flex flex-col gap-2"
+    [style.min-width]="overlayMinWidth"
+  >
+    <div class="text-xs text-black">
+      {{ 'search.filters.spatialExtent.helpText' | translate }}
+    </div>
+
+    <div
+      [class]="
+        (hasSelection
+          ? 'border-b-[1px] border-gray-400 pb-[20px]'
+          : 'pb-[12px]') + ' text-black flex flex-col gap-[8px]'
+      "
+      style="
+        --gn-ui-text-input-rounded: 8px;
+        --gn-ui-text-input-border-size: 1px;
+        --gn-ui-text-input-padding: 6px;
+      "
+    >
+      <gn-ui-drag-and-drop-file-input
+        accept=".json,.geojson"
+        [placeholder]="'search.filters.spatialExtent.import' | translate"
+        [maxFileSizeMb]="maxFileSizeMb"
+        [showFileName]="false"
+        textClass="text-black truncate"
+        dropzoneBackgroundColor="transparent"
+        icon="iconoirUpload"
+        extraClass="gn-ui-gray-outline-input w-full !h-[32px] px-[8px] py-[4px] justify-between"
+        (fileChange)="handleFileSelected($event)"
+        (errorChange)="handleFileError($event)"
+        data-cy="importGeojson"
+      ></gn-ui-drag-and-drop-file-input>
+      <ng-content></ng-content>
+    </div>
+
+    @if (hasSelection) {
+      <gn-ui-button
+        [type]="'primary-light'"
+        [title]="selectionDeleteLabelKey | translate: selectionLabelParams"
+        (buttonClick)="removeSelection($event)"
+        extraClass="group gap-x-2 w-full h-[28px] px-[8px] py-[4px] mb-[12px] bg-primary-lighter text-white"
+        data-test="spatial-extent-selected-item"
+      >
+        <ng-icon
+          name="iconoirSquareDashed"
+          class="shrink-0"
+          size="15px"
+        ></ng-icon>
+        <span class="group-hover:hidden truncate text-sm m-auto">
+          {{ selectionLabelKey | translate: selectionLabelParams }}
+        </span>
+        <span class="hidden group-hover:block truncate text-sm m-auto">
+          {{ selectionDeleteLabelKey | translate: selectionLabelParams }}
+        </span>
+        <ng-icon
+          name="iconoirCheckCircle"
+          class="group-hover:hidden shrink-0"
+          size="14px"
+        ></ng-icon>
+        <ng-icon
+          name="iconoirTrash"
+          class="!hidden group-hover:!block shrink-0"
+          size="15px"
+        ></ng-icon>
+      </gn-ui-button>
+    }
+  </div>
+</ng-template>

package/src/libs/ui/inputs/src/lib/spatial-extent-dropdown/spatial-extent-dropdown.component.ts

@@ -0,0 +1,244 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core'
+import {
+  CdkConnectedOverlay,
+  CdkOverlayOrigin,
+  ConnectedPosition,
+  OverlayModule,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirSquareDashed,
+  iconoirTrash,
+  iconoirUpload,
+} from '@ng-icons/iconoir'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
+import { TranslatePipe } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  BoundingBox,
+  getGeometryBoundingBox,
+  getGeometryFromGeoJSON,
+  isBoundingBoxWithinWorldExtent,
+  propagateToDocumentOnly,
+  readFileAsText,
+} from '../../../../../../libs/util/shared/src'
+import {
+  DragAndDropFileInputComponent,
+  DragAndDropFileInputError,
+} from '../drag-and-drop-file-input/drag-and-drop-file-input.component'
+
+marker('search.filters.spatialExtent.import')
+marker('search.filters.spatialExtent.helpText')
+marker('search.filters.spatialExtent.error.title')
+marker('search.filters.spatialExtent.error.outOfBounds')
+
+const LABEL_FROM_FILE = marker('search.filters.spatialExtent.bboxFromFile')
+const LABEL_FROM_FILE_DELETE = marker(
+  'search.filters.spatialExtent.bboxFromFileDelete'
+)
+const LABEL_FROM_LOCATION = marker(
+  'search.filters.spatialExtent.bboxFromLocation'
+)
+const LABEL_FROM_LOCATION_DELETE = marker(
+  'search.filters.spatialExtent.bboxFromLocationDelete'
+)
+const LABEL_INITIAL = marker('search.filters.spatialExtent.bboxInitial')
+const LABEL_INITIAL_DELETE = marker(
+  'search.filters.spatialExtent.bboxInitialDelete'
+)
+
+export interface SpatialExtentDropdownError {
+  key: string
+  params?: Record<string, string | number>
+}
+
+@Component({
+  selector: 'gn-ui-spatial-extent-dropdown',
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    TranslatePipe,
+    DragAndDropFileInputComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirCheckCircle,
+      iconoirSquareDashed,
+      iconoirTrash,
+      iconoirUpload,
+      matClose,
+      matExpandLess,
+      matExpandMore,
+    }),
+  ],
+  templateUrl: './spatial-extent-dropdown.component.html',
+  styleUrls: ['./spatial-extent-dropdown.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpatialExtentDropdownComponent {
+  private cd = inject(ChangeDetectorRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+
+  @Input() title: string
+  @Input() maxFileSizeMb: number | null = null
+  @Input() set initialBbox(value: BoundingBox | null) {
+    if (!this.bbox && value) {
+      this.bbox = value
+    }
+  }
+
+  @Output() bboxChange = new EventEmitter<BoundingBox | null>()
+  @Output() errorChange = new EventEmitter<SpatialExtentDropdownError>()
+
+  bbox: BoundingBox | null = null
+  fileName = ''
+  locationName = ''
+
+  @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
+  @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
+  @ViewChild(DragAndDropFileInputComponent)
+  fileInput: DragAndDropFileInputComponent
+
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 8,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -8,
+    },
+  ]
+  scrollStrategy = this.scrollStrategies.reposition()
+  overlayOpen = false
+  overlayMinWidth = 'none'
+
+  errorKey: string | null = null
+
+  get hasSelection() {
+    return !!this.bbox
+  }
+
+  get selectionLabelKey() {
+    if (this.fileName) return LABEL_FROM_FILE
+    if (this.locationName) return LABEL_FROM_LOCATION
+    return LABEL_INITIAL
+  }
+
+  get selectionDeleteLabelKey() {
+    if (this.fileName) return LABEL_FROM_FILE_DELETE
+    if (this.locationName) return LABEL_FROM_LOCATION_DELETE
+    return LABEL_INITIAL_DELETE
+  }
+
+  get selectionLabelParams() {
+    return { fileName: this.fileName, locationName: this.locationName }
+  }
+
+  openOverlay() {
+    this.overlayMinWidth =
+      this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
+        .width + 'px'
+    this.overlayOpen = true
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+
+  toggleOverlay() {
+    if (this.overlayOpen) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  async handleFileSelected(file: File) {
+    this.errorKey = null
+    let content: string
+    try {
+      content = await readFileAsText(file)
+      const parsed = JSON.parse(content)
+      const geometry = getGeometryFromGeoJSON(parsed)
+      if (!geometry) {
+        this.setError(marker('search.filters.spatialExtent.error.noGeometry'))
+        return
+      }
+      const bbox = getGeometryBoundingBox(geometry)
+      if (!isBoundingBoxWithinWorldExtent(bbox)) {
+        this.setError(marker('search.filters.spatialExtent.error.outOfBounds'))
+        return
+      }
+      this.bbox = bbox
+      this.fileName = file.name
+      this.locationName = ''
+      this.bboxChange.emit(bbox)
+      this.cd.markForCheck()
+    } catch {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+      return
+    }
+  }
+
+  setLocationBbox(bbox: BoundingBox, name: string) {
+    this.errorKey = null
+    this.bbox = bbox
+    this.locationName = name
+    this.fileName = ''
+    this.fileInput?.clear()
+    this.bboxChange.emit(bbox)
+    this.cd.markForCheck()
+  }
+
+  handleFileError(error: DragAndDropFileInputError) {
+    if (error === 'file-too-large') {
+      this.setError(marker('search.filters.spatialExtent.error.fileTooLarge'), {
+        maxSize: this.maxFileSizeMb,
+      })
+    } else {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+    }
+  }
+
+  private setError(errorKey: string, params?: Record<string, string | number>) {
+    this.errorKey = errorKey
+    this.errorChange.emit({ key: errorKey, params })
+    this.cd.markForCheck()
+  }
+
+  removeSelection(event: Event) {
+    this.bbox = null
+    this.fileName = ''
+    this.locationName = ''
+    this.errorKey = null
+    this.fileInput?.clear()
+    this.bboxChange.emit(null)
+    propagateToDocumentOnly(event)
+  }
+}

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

@@ -3,6 +3,7 @@
 }
 
 :host {
+  display: block;
   position: relative;
 }
 

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -29,11 +29,11 @@ import {
   MapExtentChangeEvent,
   MapExtentChangeEventType,
   MapContext,
-  MapContextLayerXyz,
   MapContextView,
   MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
+  MapContextLayerMapLibreStyle,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -55,10 +55,11 @@ import {
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
 import { transformExtent } from 'ol/proj.js'
 
-const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
-  type: 'xyz',
-  url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+export const DEFAULT_BASEMAP_LAYER: MapContextLayerMapLibreStyle = {
+  type: 'maplibre-style',
+  styleUrl: `https://basemaps.cartocdn.com/gl/positron-gl-style/style.json`,
+  clickable: false,
+  hoverable: false,
 }
 
 const DEFAULT_VIEW: MapContextView = {

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

@@ -252,6 +252,10 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
           'search_preset',
           'advanced_filters',
           'limit',
+          'spatial_extent_max_file_size',
+          'geocoding_provider',
+          'geocoding_provider_options',
+          'geocoding_provider_labels',
         ],
         warnings,
         errors
@@ -264,6 +268,18 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
         warnings,
         errors
       )
+      const parsedCustomFilters = parseMultiConfigSection(
+        parsed,
+        'custom_filter',
+        ['name', 'base_filter'],
+        ['exclude_values', 'include_values', 'label_key'],
+        warnings,
+        errors
+      )
+      const parsedGeocodingProviderLabels =
+        parsedSearchSection?.geocoding_provider_labels as
+          | Record<string, string>
+          | undefined
       searchConfig =
         parsedSearchSection === null
           ? null
@@ -280,7 +296,28 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
                 filters: param.filters,
               })),
               ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
+              CUSTOM_FILTERS: (parsedCustomFilters ?? []).map(
+                (customFilter) => ({
+                  name: customFilter.name,
+                  baseFilter: customFilter.base_filter,
+                  excludeValues: customFilter.exclude_values,
+                  includeValues: customFilter.include_values,
+                  labelKey: customFilter.label_key,
+                })
+              ),
               LIMIT: parsedSearchSection.limit,
+              SPATIAL_EXTENT_MAX_FILE_SIZE:
+                parsedSearchSection.spatial_extent_max_file_size,
+              GEOCODING_PROVIDER: parsedSearchSection.geocoding_provider,
+              GEOCODING_PROVIDER_OPTIONS:
+                parsedSearchSection.geocoding_provider_options,
+              GEOCODING_PROVIDER_LABELS: parsedGeocodingProviderLabels
+                ? {
+                    MAIN: parsedGeocodingProviderLabels.main,
+                    SECONDARY: parsedGeocodingProviderLabels.secondary,
+                    TERTIARY: parsedGeocodingProviderLabels.tertiary,
+                  }
+                : undefined,
             } as SearchConfig)
 
       const parsedMetadataQualitySection = parseConfigSection(

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

@@ -41,7 +41,26 @@ fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans"
 record_kind_quick_filter = false
 filter_geometry_url = 'https://my.domain.org/geom.json'
 do_not_use_default_search_preset = false
-advanced_filters = ['publicationYear', 'documentStandard', 'inspireKeyword', 'topic', 'license']
+geocoding_provider = "geoplateforme"
+geocoding_provider_options.index = "poi"
+geocoding_provider_options.category = "administratif"
+geocoding_provider_options.limit = 5
+geocoding_provider_labels.main = '/properties/name/0'
+geocoding_provider_labels.secondary = '/properties/citycode/0'
+geocoding_provider_labels.tertiary = '/properties/category/1'
+advanced_filters = ['publicationYear', 'documentStandard', 'inspireKeyword', 'topic', 'license', 'myOrg:firstCustomFilter', 'myOrg:secondCustomFilter']
+
+[[custom_filter]]
+name = 'myOrg:firstCustomFilter'
+base_filter = 'keyword'
+exclude_values = ['my keyword 1', 'my keyword 2']
+label_key = 'myOrg.firstCustomFilter'
+
+[[custom_filter]]
+name = 'myOrg:secondCustomFilter'
+base_filter = 'keyword'
+include_values = ['my keyword 3', 'my keyword 4']
+label_key = 'myOrg.secondCustomFilter'
 
 [[search_preset]]
 sort = "-createDate"
@@ -81,6 +100,23 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
+export const customFilterMissingMandatoryConfigFixture = () => `
+[global]
+geonetwork4_api_url = "/geonetwork/srv/api"
+
+[theme]
+primary_color = "#093564"
+secondary_color = "#c2e9dc"
+main_color = "#212029" # All-purpose text color
+background_color = "#fdfbff"
+
+[search]
+advanced_filters = ['myOrg:firstCustomFilter']
+
+[[custom_filter]]
+name = 'myOrg:firstCustomFilter'
+`
+
 export const mapConfigFixture = (): MapConfig => ({
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],

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

@@ -55,14 +55,38 @@ export interface SearchPreset {
   filters: Record<string, string[] | string>
 }
 
+export type GeocodingProviderName = 'geoadmin' | 'geonames' | 'geoplateforme'
+
+export interface CustomSearchFieldConfig {
+  name: string
+  baseFilter: string
+  excludeValues?: string[]
+  includeValues?: string[]
+  labelKey?: string
+}
+
+export interface GeocodingProviderLabelsConfig {
+  MAIN?: string
+  SECONDARY?: string
+  TERTIARY?: string
+}
+
 export interface SearchConfig {
   RECORD_KIND_QUICK_FILTER?: boolean
   FILTER_GEOMETRY_URL?: string
   FILTER_GEOMETRY_DATA?: string
   DO_NOT_USE_DEFAULT_SEARCH_PRESET?: boolean
   SEARCH_PRESET?: SearchPreset[]
-  ADVANCED_FILTERS?: []
+  ADVANCED_FILTERS?: string[]
+  CUSTOM_FILTERS?: CustomSearchFieldConfig[]
   LIMIT?: number
+  SPATIAL_EXTENT_MAX_FILE_SIZE?: number
+  GEOCODING_PROVIDER?: GeocodingProviderName
+  GEOCODING_PROVIDER_OPTIONS?: Record<
+    string,
+    string | number | boolean | string[]
+  >
+  GEOCODING_PROVIDER_LABELS?: GeocodingProviderLabelsConfig
 }
 
 export interface MetadataQualityConfig {

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

@@ -1,6 +1,7 @@
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
+export * from './lib/autofocus.directive'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
 export * from './lib/record'

package/src/libs/util/shared/src/lib/autofocus.directive.ts

@@ -0,0 +1,26 @@
+import {
+  Directive,
+  ElementRef,
+  Injector,
+  Input,
+  afterNextRender,
+  booleanAttribute,
+  inject,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiAutofocus]',
+  standalone: true,
+})
+export class AutofocusDirective {
+  private el = inject<ElementRef<HTMLElement>>(ElementRef)
+  private injector = inject(Injector)
+
+  @Input({ alias: 'gnUiAutofocus', transform: booleanAttribute })
+  set autofocus(active: boolean) {
+    if (!active) return
+    afterNextRender(() => this.el.nativeElement.focus(), {
+      injector: this.injector,
+    })
+  }
+}

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

@@ -344,7 +344,11 @@ export function getLinkLabel(
   return format ? `${label} (${format})` : label
 }
 
-export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
+export async function getLayers(
+  url: string,
+  serviceProtocol: ServiceProtocol,
+  deep = false
+) {
   switch (serviceProtocol) {
     case 'ogcFeatures': {
       const layers = await new OgcApiEndpoint(url).allCollections
@@ -352,7 +356,10 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
     }
     case 'wfs': {
       const endpointWfs = await new WfsEndpoint(url).isReady()
-      const featureTypes = await endpointWfs.getFeatureTypes()
+      const featureTypes = endpointWfs.getFeatureTypes()
+      if (!deep) {
+        return featureTypes
+      }
       const layers = (
         await Promise.allSettled(
           featureTypes.map((collection) => {
@@ -366,14 +373,16 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
     }
     case 'wms': {
       const endpointWms = await new WmsEndpoint(url).isReady()
-      const layers = (
-        await endpointWms
-          .getLayers()
-          .flatMap(wmsLayerFlatten)
-          .filter((l) => l.name)
-      ).map((collection) => {
-        return endpointWms.getLayerByName(collection.name)
-      })
+      const layersSummary = endpointWms
+        .getLayers()
+        .flatMap(wmsLayerFlatten)
+        .filter((l) => l.name)
+      if (!deep) {
+        return layersSummary
+      }
+      const layers = layersSummary.map((collection) =>
+        endpointWms.getLayerByName(collection.name)
+      )
       return layers
     }
     case 'wmts': {

package/src/libs/util/shared/src/lib/services/date.service.ts

@@ -35,10 +35,10 @@ export class DateService {
     return { locale, dateObj }
   }
 
-  private async getDateLocale(): Promise<Locale> {
+  async getDateFnsLocale(): Promise<Locale> {
     const lang = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE
     const locales = await this.dateLocales
-    return locales[lang]
+    return locales[lang] ?? locales[DEFAULT_LANGUAGE]
   }
 
   formatDate(
@@ -61,7 +61,7 @@ export class DateService {
     const dateObj = this.getDateObject(date)
 
     const now = new Date()
-    const locale = await this.getDateLocale()
+    const locale = await this.getDateFnsLocale()
 
     return formatDistance(dateObj, now, {
       addSuffix: true,

package/src/libs/util/shared/src/lib/utils/file.ts

@@ -0,0 +1,15 @@
+export function isFileExtensionValid(
+  fileName: string,
+  acceptedExtensions: string[]
+): boolean {
+  return acceptedExtensions.some((ext) => fileName.toLowerCase().endsWith(ext))
+}
+
+export function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}