geonetwork-ui 2.4.0-dev.7a893adc → 2.4.0-dev.80a79eca

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -4,6 +4,7 @@ import {
   EditorField,
   EditorSection,
 } from './models/editor-config.model'
+import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -104,6 +105,14 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   },
 }
 
+export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
+  model: 'onlineResources',
+  modelSpecifier: 'onlineResourceType:link',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.onlineLinkResources'),
+  },
+}
+
 /************************************************************
  ***************          SECTIONS          *****************
  ************************************************************
@@ -149,7 +158,7 @@ export const ASSOCIATED_RESOURCES_SECTION: EditorSection = {
 export const ANNEXES_SECTION: EditorSection = {
   labelKey: marker('editor.record.form.section.annexes.label'),
   hidden: false,
-  fields: [],
+  fields: [RECORD_ONLINE_LINK_RESOURCES],
 }
 
 export const CLASSIFICATION_SECTION: EditorSection = {
@@ -210,7 +219,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
 }
 
 /************************************************************
- ***************           LICENSES            *****************
+ ***************           LICENSES            **************
  ************************************************************
  */
 export const OPEN_DATA_LICENSES: string[] = [
@@ -220,3 +229,24 @@ export const OPEN_DATA_LICENSES: string[] = [
   'odc-by',
   'pddl',
 ]
+
+export const MAX_UPLOAD_SIZE_MB = 10
+/************************************************************
+ ***************        SPATIAL SCOPE            ************
+ ************************************************************
+ */
+
+export const SPATIAL_SCOPES: Keyword[] = [
+  {
+    key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/national',
+    label: 'National',
+    description: '',
+    type: 'theme',
+  },
+  {
+    key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/regional',
+    label: 'Regional',
+    description: '',
+    type: 'theme',
+  },
+]

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -16,12 +16,21 @@ export interface FormFieldConfig {
   invalidHintKey?: string
 }
 
+// Specifiers let us use specific components
+// This is used for instance to target only certain online resources in a field
+type OnlineLinkResourceSpecifier = `onlineResourceType:link`
+type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+export type FieldModelSpecifier =
+  | OnlineLinkResourceSpecifier
+  | DatasetDistributionsSpecifier
+
 export interface EditorField {
   // configuration of the form field used as presentation
   formFieldConfig: FormFieldConfig
 
   // name of the target field in the record; will not change the record directly if not defined
   model?: CatalogRecordKeys
+  modelSpecifier?: FieldModelSpecifier
 
   // a hidden field won't show but can still be used to modify the record
   // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity

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

@@ -13,7 +13,7 @@ import {
   MapContextLayerTypeEnum,
 } from '../../map-context/map-context.model'
 import {
-  DatasetDistribution,
+  DatasetOnlineResource,
   DatasetRecord,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
@@ -29,10 +29,10 @@ import { CommonModule } from '@angular/common'
   imports: [ThumbnailComponent, ButtonComponent, CommonModule],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
-  get mapLinks(): DatasetDistribution[] {
-    return (this.record as DatasetRecord).distributions.filter((link) =>
+  get mapLinks(): DatasetOnlineResource[] {
+    return (this.record as DatasetRecord).onlineResources.filter((link) =>
       this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
-    ) as DatasetDistribution[]
+    ) as DatasetOnlineResource[]
   }
 
   constructor(
@@ -44,13 +44,13 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     super(elementRef)
   }
 
-  async handleLinkClick(link: DatasetDistribution) {
+  async handleLinkClick(link: DatasetOnlineResource) {
     const layer = await this.getLayerFromLink(link).toPromise()
     this.mapFacade.addLayer({ ...layer, title: this.record.title })
   }
 
   getLayerFromLink(
-    link: DatasetDistribution
+    link: DatasetOnlineResource
   ): Observable<MapContextLayerModel> {
     if (link.type !== 'service')
       return throwError(
@@ -72,7 +72,7 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     return throwError(() => 'protocol not supported')
   }
 
-  getLinkLabel(link: DatasetDistribution) {
+  getLinkLabel(link: DatasetOnlineResource) {
     return getLinkLabel(link)
   }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.fixtures.ts

@@ -1,4 +1,4 @@
-import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from '../../../../../../libs/common/fixtures/src'
+import { polygonFeatureCollectionFixture } from '../../../../../../libs/common/fixtures/src'
 import { Extent } from 'ol/extent'
 import {
   MapContextLayerGeojsonModel,
@@ -8,44 +8,48 @@ import {
   MapContextViewModel,
 } from '../map-context/map-context.model'
 
-export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayerModel = {
+export const mapCtxLayerXyzFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.XYZ,
   url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-}
-export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayerModel = {
+})
+
+export const mapCtxLayerWmsFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.WMS,
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS',
   name: 'commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayerModel = {
+})
+
+export const mapCtxLayerWfsFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.WFS,
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=1.1.0',
   name: 'ms:commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojsonModel = {
+})
+
+export const mapCtxLayerGeojsonFixture = (): MapContextLayerGeojsonModel => ({
   type: MapContextLayerTypeEnum.GEOJSON,
-  data: FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
-}
-export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojsonModel =
-  {
+  data: polygonFeatureCollectionFixture(),
+})
+
+export const mapCtxLayerGeojsonRemoteFixture =
+  (): MapContextLayerGeojsonModel => ({
     type: MapContextLayerTypeEnum.GEOJSON,
     url: 'https://my.host.com/data/regions.json',
-  }
+  })
 
-export const MAP_CTX_VIEW_FIXTURE: MapContextViewModel = {
+export const mapCtxViewFixture = (): MapContextViewModel => ({
   center: [7.75, 48.6],
   zoom: 9,
-}
+})
 
-export const MAP_CTX_FIXTURE: MapContextModel = {
+export const mapCtxFixture = (): MapContextModel => ({
   layers: [
-    MAP_CTX_LAYER_XYZ_FIXTURE,
-    MAP_CTX_LAYER_WMS_FIXTURE,
-    MAP_CTX_LAYER_GEOJSON_FIXTURE,
+    mapCtxLayerXyzFixture(),
+    mapCtxLayerWmsFixture(),
+    mapCtxLayerGeojsonFixture(),
   ],
-  view: MAP_CTX_VIEW_FIXTURE,
-}
+  view: mapCtxViewFixture(),
+})
 
-export const MAP_CTX_EXTENT_FIXTURE: Extent = [
+export const mapCtxExtentFixture = (): Extent => [
   171083.69713494915, 6246047.945419401, 476970.39956295764, 6631079.362882684,
 ]

package/src/libs/feature/map/src/lib/style/map-style.fixtures.ts

@@ -4,42 +4,44 @@ const colorPrimary = 'blue'
 const colorSecondary = 'red'
 const colorStroke = 'white'
 
-export const DEFAULT_STYLE_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorPrimary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 2,
+      }),
+      radius: 5,
+    }),
     fill: new Fill({
-      color: colorPrimary,
+      color: 'rgba(0,0,255,0.25)',
     }),
     stroke: new Stroke({
       color: colorStroke,
       width: 2,
     }),
-    radius: 5,
-  }),
-  fill: new Fill({
-    color: 'rgba(0,0,255,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorStroke,
-    width: 2,
-  }),
-})
+  })
 
-export const DEFAULT_STYLE_HL_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleHlFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorSecondary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 3,
+      }),
+      radius: 6,
+    }),
     fill: new Fill({
-      color: colorSecondary,
+      color: 'rgba(255,0,0,0.25)',
     }),
     stroke: new Stroke({
-      color: colorStroke,
+      color: colorSecondary,
       width: 3,
     }),
-    radius: 6,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorSecondary,
-    width: 3,
-  }),
-})
+  })

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

@@ -9,7 +9,7 @@ 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 { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-data-view',
@@ -43,7 +43,7 @@ export class DataViewComponent {
       }))
     )
   )
-  selectedLink$ = new BehaviorSubject<DatasetDistribution>(null)
+  selectedLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
   constructor(private mdViewFacade: MdViewFacade) {}
 
@@ -52,7 +52,7 @@ export class DataViewComponent {
   }
 
   selectLink(linkAsString: string) {
-    const link: DatasetDistribution = JSON.parse(linkAsString)
+    const link: DatasetOnlineResource = JSON.parse(linkAsString)
     link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MapConfig } from '../../../../../../libs/util/app-config/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
@@ -14,7 +14,7 @@ marker('externalviewer.dataset.unnamed')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExternalViewerButtonComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() mapConfig: MapConfig
 
   get externalViewer() {

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

@@ -40,7 +40,7 @@ import {
 } 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'
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -183,7 +183,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
   }
 
   getLayerFromLink(
-    link: DatasetDistribution
+    link: DatasetOnlineResource
   ): Observable<MapContextLayerModel> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
       return of({

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

@@ -63,7 +63,11 @@ 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(

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

@@ -3,6 +3,7 @@
   [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
   (recordClick)="handleRecordClick($event)"
   (duplicateRecord)="handleDuplicateRecord($event)"
   (deleteRecord)="handleDeleteRecord($event)"

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

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -30,6 +36,9 @@ export class ResultsTableContainerComponent implements OnDestroy {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
     private searchFacade: SearchFacade,
     private searchService: SearchService,

package/src/libs/feature/search/src/lib/state/fixtures/search-state.fixtures.ts

@@ -1,4 +1,4 @@
-export const SEARCH_STATE_FILTERS_FIXTURE = {
+export const searchStateFiltersFixture = () => ({
   recursiveTerms: {
     resourceType: {
       service: {
@@ -26,4 +26,4 @@ export const SEARCH_STATE_FILTERS_FIXTURE = {
       availableInViewService: '+linkProtocol:/OGC:WMS.*/',
     },
   },
-}
+})

package/src/libs/ui/dataviz/src/lib/chart/chart.fixtures.ts

@@ -1,4 +1,4 @@
-export const CHART_ITEM_FIXTURE = [
+export const charItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -19,7 +19,7 @@ export const CHART_ITEM_FIXTURE = [
   },
 ]
 
-export const CHART_ITEM_FIXTURE_HAB = [
+export const chartItemHabFixture = () => [
   {
     name: 'France',
     id: '1',

package/src/libs/ui/dataviz/src/lib/table/table.fixtures.ts

@@ -1,4 +1,4 @@
-export const TABLE_ITEM_FIXTURE = [
+export const tableItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -16,7 +16,7 @@ export const TABLE_ITEM_FIXTURE = [
   },
 ]
 
-export const TABLE_ITEM_FIXTURE_HAB = [
+export const someHabTableItemFixture = () => [
   {
     name: 'France',
     id: '1',

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

@@ -19,7 +19,7 @@ export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/sortable-list/sortable-list.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'

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -1,11 +1,11 @@
 import {
-  Component,
   ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
   Input,
   Output,
-  EventEmitter,
 } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -14,7 +14,7 @@ import { DatasetDistribution } from '../../../../../../libs/common/domain/src/li
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadItemComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromWfs: boolean

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -19,11 +19,11 @@ type FilterFormat = typeof FILTER_FORMATS[number]
 export class DownloadsListComponent {
   constructor(private translateService: TranslateService) {}
 
-  @Input() links: DatasetDistribution[]
+  @Input() links: DatasetOnlineResource[]
 
   activeFilterFormats: FilterFormat[] = ['all']
 
-  get filteredLinks(): DatasetDistribution[] {
+  get filteredLinks(): DatasetOnlineResource[] {
     return this.links.filter((link) =>
       this.activeFilterFormats.some((format) =>
         this.isLinkOfFormat(link, format)
@@ -68,7 +68,7 @@ export class DownloadsListComponent {
     return format
   }
 
-  isLinkOfFormat(link: DatasetDistribution, format: FilterFormat): boolean {
+  isLinkOfFormat(link: DatasetOnlineResource, format: FilterFormat): boolean {
     if (format === 'all') {
       return true
     }
@@ -86,15 +86,15 @@ export class DownloadsListComponent {
     return getFileFormat(link).includes(format)
   }
 
-  getLinkFormat(link: DatasetDistribution) {
+  getLinkFormat(link: DatasetOnlineResource) {
     return getFileFormat(link)
   }
 
-  getLinkColor(link: DatasetDistribution) {
+  getLinkColor(link: DatasetOnlineResource) {
     return getBadgeColor(getFileFormat(link))
   }
 
-  isFromWfs(link: DatasetDistribution) {
+  isFromWfs(link: DatasetOnlineResource) {
     return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,5 +1,5 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common'
   imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() compact = false
 
   get title() {

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -29,6 +29,11 @@
   @apply text-title font-title font-bold;
 }
 
+/** No margin for first child/heading, that cannot be detected by getBoundingClientRect() **/
+:host ::ng-deep .markdown-body :first-child {
+  margin-top: 0;
+}
+
 :host ::ng-deep .markdown-body h1 {
   margin: 0.67em 0;
   padding-bottom: 0.3em;

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

@@ -22,3 +22,6 @@ export * from './lib/ui-inputs.module'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.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/file-input/file-input.component.html

@@ -57,7 +57,7 @@
             ? 'font-bold text-primary cursor-pointer'
             : 'font-medium text-gray-500'
         "
-        (click)="handleSecondaryTextClick()"
+        (click)="handleSecondaryTextClick($event)"
       >
         {{ getSecondaryText() | translate }}
       </p>

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

@@ -79,9 +79,10 @@ export class FileInputComponent {
     this.urlChange.emit(url)
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

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

@@ -112,7 +112,7 @@
               ? 'font-bold text-blue-500 cursor-pointer'
               : 'font-medium text-gray-500'
           "
-          (click)="handleSecondaryTextClick()"
+          (click)="handleSecondaryTextClick($event)"
         >
           {{ getSecondaryText() | translate }}
         </p>

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

@@ -144,11 +144,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.html

@@ -6,7 +6,6 @@
   <mat-button-toggle
     *ngFor="let option of options"
     [aria-label]="option.label"
-    [value]="option.value"
     [checked]="option.checked"
     (change)="onChange(option)"
     [class]="extraClasses"

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -10,7 +10,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle'
 
 export type SwitchToggleOption = {
   label: string
-  value: string
   checked: boolean
 }
 
@@ -30,7 +29,7 @@ export class SwitchToggleComponent {
 
   onChange(selectedOption: SwitchToggleOption) {
     this.options.find(
-      (option) => option.value === selectedOption.value
+      (option) => option.label === selectedOption.label
     ).checked = true
 
     this.selectedValue.emit(selectedOption)

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.html

@@ -6,7 +6,7 @@
     [ngClass]="extraClass"
     [disabled]="disabled"
     [placeholder]="placeholder"
-    [value]="value"
+    [value]="value ?? ''"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
     [attr.required]="required || null"

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.ts

@@ -20,7 +20,7 @@ export class TextAreaComponent implements AfterViewInit {
   @Input() value = ''
   @Input() disabled = false
   @Input() extraClass = ''
-  @Input() placeholder: string
+  @Input() placeholder = ''
   @Input() required = false
 
   rawChange = new Subject<string>()