geonetwork-ui 2.4.0-dev.e1bb65c4 → 2.4.0-dev.e4dc8777

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -5,7 +5,6 @@ import {
   MeApiService,
   RegistriesApiService,
   SiteApiService,
-  ThesaurusInfoApiModel,
   ToolsApiService,
   UserfeedbackApiService,
   UsersApiService,
@@ -25,6 +24,7 @@ import {
   KeywordApiResponse,
   ThesaurusApiResponse,
 } from '../../../../../../../libs/api/metadata-converter/src'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 const minApiVersion = '4.2.2'
 
@@ -146,25 +146,36 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     )
     .pipe(
       map((thesaurus) => {
-        // FIXME: find a better way to exclude place keywords
-        // thesaurus[0].filter((thes) => thes.dname !== 'place')
         return thesaurus[0] as ThesaurusApiResponse[]
       }),
       shareReplay(1)
     )
 
-  searchKeywords(query: string): Observable<Keyword[]> {
-    const keywords$: Observable<KeywordApiResponse[]> =
-      this.registriesApiService.searchKeywords(
-        query,
-        this.langService.iso3,
-        10,
-        0,
-        null,
-        null,
-        null,
-        `*${query}*`
-      ) as Observable<KeywordApiResponse[]>
+  searchKeywords(
+    query: string,
+    keywordTypes: KeywordType[]
+  ): Observable<Keyword[]> {
+    const keywords$: Observable<KeywordApiResponse[]> = this.allThesaurus$.pipe(
+      switchMap((thesaurus) => {
+        const selectedThesauri = []
+        keywordTypes.map((keywordType) => {
+          selectedThesauri.push(
+            ...thesaurus.filter((thes) => thes.dname === keywordType)
+          )
+        })
+
+        return this.registriesApiService.searchKeywords(
+          query,
+          this.langService.iso3,
+          10,
+          0,
+          null,
+          selectedThesauri.map((thes) => thes.key),
+          null,
+          `*${query}*`
+        ) as Observable<KeywordApiResponse[]>
+      })
+    )
 
     return combineLatest([keywords$, this.allThesaurus$]).pipe(
       map(([keywords, thesaurus]) => {

package/src/libs/common/domain/src/lib/model/record/organization.model.ts

@@ -1,5 +1,6 @@
 export interface Organization {
   name: string
+  email?: string
   description?: string
   website?: URL
   logoUrl?: URL

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -2,6 +2,7 @@ import type { Observable } from 'rxjs'
 import type { UserModel } from './model/user/user.model'
 import type { Organization } from './model/record/organization.model'
 import { Keyword, UserFeedback } from './model/record'
+import { KeywordType } from './model/thesaurus'
 
 export abstract class PlatformServiceInterface {
   abstract getType(): string
@@ -15,7 +16,10 @@ export abstract class PlatformServiceInterface {
   ): Observable<UserModel[]>
   abstract getOrganizations(): Observable<Organization[]>
   abstract translateKey(key: string): Observable<string>
-  abstract searchKeywords(query: string): Observable<Keyword[]>
+  abstract searchKeywords(
+    query: string,
+    keywordTypes: KeywordType[]
+  ): Observable<Keyword[]>
   abstract getKeywordsByUri(uri: string): Observable<Keyword[]>
   abstract getUserFeedbacks(recordUuid: string): Observable<UserFeedback[]>
   abstract postUserFeedbacks(recordUuid: UserFeedback): Observable<void>

package/src/libs/common/fixtures/src/lib/organisations.fixture.ts

@@ -5,84 +5,112 @@ export const ORGANISATIONS_FIXTURE: Organization[] = deepFreeze([
   {
     name: 'I Data Org',
     description: 'one org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo1.png'),
     recordCount: 12,
   },
   {
     name: 'H Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo2.png'),
     recordCount: 15,
   },
   {
     name: 'J Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo3.png'),
     recordCount: 6,
   },
   {
     name: 'G Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo4.png'),
     recordCount: 8,
   },
   {
     name: 'B Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo5.png'),
     recordCount: 2,
   },
   {
     name: 'D Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo6.png'),
     recordCount: 17,
   },
   {
     name: 'F Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo7.png'),
     recordCount: 14,
   },
   {
     name: 'A Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo8.png'),
     recordCount: 3,
   },
   {
     name: 'C Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo9.png'),
     recordCount: 9,
   },
   {
     name: 'E Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo10.png'),
     recordCount: 1,
   },
   {
     name: 'é Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo10.png'),
     recordCount: 2,
   },
   {
     name: 'wizard-org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo11.png'),
     recordCount: 2,
   },
   {
     name: "Université de l'Ingénierie",
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo12.png'),
     recordCount: 2,
   },
   {
     name: 'ARS / Agence régionale de santé',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo12.png'),
     recordCount: 2,
   },

package/src/libs/data-access/datafeeder/src/openapi/model/datasetMetadata.api.model.ts

@@ -38,4 +38,8 @@ export interface DatasetMetadataApiModel {
    * textual description of dataset lineage
    */
   creationProcessDescription?: string
+  /**
+   * Optional, additional options for the dataset
+   */
+  options: any
 }

package/src/libs/data-access/datafeeder/src/openapi/model/datasetUploadStatus.api.model.ts

@@ -34,4 +34,6 @@ export interface DatasetUploadStatusApiModel {
    * detected charset
    */
   encoding?: string
+  format?: 'CSV' | 'SHAPEFILE'
+  options?: any
 }

package/src/libs/data-access/gn4/src/openapi/model/user.api.model.ts

@@ -21,7 +21,7 @@ export interface UserApiModel {
   emailAddresses?: Set<string>
   addresses?: Set<AddressApiModel>
   primaryAddress?: AddressApiModel
-  organisation?: string
+  organization?: string
   kind?: string
   lastLoginDate?: string
   authorities?: Array<GrantedAuthorityApiModel>

package/src/libs/feature/catalog/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/feature-catalog.module'
+export * from './lib/organization-url.token'
 export * from './lib/sources/sources.service'
 export * from './lib/sources/sources.model'
 export * from './lib/records/records.service'

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

@@ -4,7 +4,6 @@ import { UiCatalogModule } from '../../../../../libs/ui/catalog/src'
 import {
   GroupsApiService,
   SearchApiService,
-  SiteApiService,
 } from '../../../../../libs/data-access/gn4/src'
 import { CommonModule } from '@angular/common'
 import { SourceLabelComponent } from './source-label/source-label.component'

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -19,7 +19,7 @@
     [showContent]="!!organisation.name"
   >
     <gn-ui-organisation-preview
-      [organisation]="organisation"
+      [organization]="organisation"
       [organisationUrl]="getOrganisationUrl(organisation)"
       (clickedOrganisation)="orgSelect.emit($event)"
     ></gn-ui-organisation-preview>

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -10,10 +10,10 @@ import {
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
 import { map, startWith, tap } from 'rxjs/operators'
-import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { ORGANIZATION_PAGE_URL_TOKEN } from '../organization-url.token'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -28,7 +28,7 @@ export class OrganisationsComponent {
   constructor(
     private organisationsService: OrganizationsServiceInterface,
     @Optional()
-    @Inject(ORGANIZATION_URL_TOKEN)
+    @Inject(ORGANIZATION_PAGE_URL_TOKEN)
     private urlTemplate: string
   ) {}
 

package/src/libs/feature/catalog/src/lib/organization-url.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core'
+
+// expects the replacement key ${name}
+export const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken<string>(
+  'organization-page-url-token'
+)

package/src/libs/feature/catalog/src/lib/records/records.service.ts

@@ -1,18 +1,16 @@
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
-import { catchError, shareReplay } from 'rxjs/operators'
+import { Observable, of, switchMap } from 'rxjs'
+import { shareReplay } from 'rxjs/operators'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecordsService {
-  recordsCount$: Observable<number> = this.recordsRepository
-    .getMatchesCount({})
-    .pipe(
-      shareReplay(1),
-      catchError(() => of(0))
-    )
+  recordsCount$: Observable<number> = of(true).pipe(
+    switchMap(() => this.recordsRepository.getMatchesCount({})),
+    shareReplay(1)
+  )
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -35,13 +35,15 @@ export class FormFieldKeywordsComponent {
   }
 
   autoCompleteAction = (query: string) => {
-    return this.platformService.searchKeywords(query).pipe(
-      map((keywords) =>
-        keywords.map((keyword) => {
-          return { title: keyword.label, value: keyword }
-        })
+    return this.platformService
+      .searchKeywords(query, ['temporal', 'theme', 'other'])
+      .pipe(
+        map((keywords) =>
+          keywords.map((keyword) => {
+            return { title: keyword.label, value: keyword }
+          })
+        )
       )
-    )
   }
 
   constructor(private platformService: PlatformServiceInterface) {}

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

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import {
+  catchError,
   defaultIfEmpty,
   filter,
   map,
   mergeMap,
-  scan,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -119,7 +119,11 @@ export class MdViewFacade {
                     ? link
                     : null
                 }),
-                defaultIfEmpty(null)
+                defaultIfEmpty(null),
+                catchError((e) => {
+                  console.error(e)
+                  return of(null)
+                })
               )
             } else {
               return of(link)

package/src/libs/feature/router/src/lib/default/constants.ts

@@ -2,6 +2,7 @@ export const ROUTER_STATE_KEY = 'router'
 
 export const ROUTER_ROUTE_SEARCH = 'search'
 export const ROUTER_ROUTE_DATASET = 'dataset'
+export const ROUTER_ROUTE_ORGANIZATION = 'organization'
 
 export enum ROUTE_PARAMS {
   SORT = '_sort',

package/src/libs/feature/router/src/lib/default/router.config.ts

@@ -4,6 +4,7 @@ export interface RouterConfigModel {
   searchStateId: string
   searchRouteComponent: Type<any>
   recordRouteComponent: Type<any>
+  organizationRouteComponent: Type<any>
 }
 
 export const ROUTER_CONFIG = new InjectionToken<RouterConfigModel>(

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -1,5 +1,9 @@
 import { Inject, Injectable } from '@angular/core'
-import { ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH } from '.'
+import {
+  ROUTER_ROUTE_DATASET,
+  ROUTER_ROUTE_ORGANIZATION,
+  ROUTER_ROUTE_SEARCH,
+} from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
 
@@ -30,10 +34,18 @@ export class RouterService {
         path: `${ROUTER_ROUTE_DATASET}/:metadataUuid`,
         component: this.routerConfig.recordRouteComponent,
       },
+      {
+        path: `${ROUTER_ROUTE_ORGANIZATION}/:name`,
+        component: this.routerConfig.organizationRouteComponent,
+      },
     ]
   }
 
   getSearchRoute(): string {
     return ROUTER_ROUTE_SEARCH
   }
+
+  getOrganizationPageRoute(): string {
+    return ROUTER_ROUTE_ORGANIZATION
+  }
 }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -3,7 +3,7 @@ import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import { RouterService } from '../router.service'
 import { RouterReducerState } from '@ngrx/router-store'
 import { select, Store } from '@ngrx/store'
-import { distinctUntilChanged, filter, map, take } from 'rxjs/operators'
+import { distinctUntilChanged, filter, map, take, tap } from 'rxjs/operators'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_SEARCH,
@@ -51,6 +51,14 @@ export class RouterFacade {
       })
   }
 
+  goToOrganization(organizationName: string) {
+    const path = `${this.routerService.getOrganizationPageRoute()}/${organizationName}`
+    this.go({
+      path,
+      queryParamsHandling: '',
+    })
+  }
+
   updateSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -37,6 +37,7 @@ import {
   getSearchResultsLoading,
   getSearchSortBy,
   getSpatialFilterEnabled,
+  isBeginningOfResults,
   isEndOfResults,
   totalPages,
 } from './selectors'
@@ -58,6 +59,7 @@ export class SearchFacade {
   layout$: Observable<string>
   sortBy$: Observable<SortByField>
   isLoading$: Observable<boolean>
+  isBeginningOfResults$: Observable<boolean>
   isEndOfResults$: Observable<boolean>
   totalPages$: Observable<number>
   currentPage$: Observable<number>
@@ -98,6 +100,9 @@ export class SearchFacade {
     this.isLoading$ = this.store.pipe(select(getSearchResultsLoading, searchId))
     this.searchFilters$ = this.store.pipe(select(getSearchFilters, searchId))
     this.resultsHits$ = this.store.pipe(select(getSearchResultsHits, searchId))
+    this.isBeginningOfResults$ = this.store.pipe(
+      select(isBeginningOfResults, searchId)
+    )
     this.isEndOfResults$ = this.store.pipe(select(isEndOfResults, searchId))
     this.totalPages$ = this.store.pipe(select(totalPages, searchId))
     this.currentPage$ = this.store.pipe(select(currentPage, searchId))

package/src/libs/feature/search/src/lib/state/selectors.ts

@@ -50,6 +50,13 @@ export const getSearchResultsHits = createSelector(
   (state: SearchStateSearch) => state.results.count
 )
 
+export const isBeginningOfResults = createSelector(
+  getSearchStateSearch,
+  (state: SearchStateSearch) => {
+    return state.params.currentPage === 0
+  }
+)
+
 export const isEndOfResults = createSelector(
   getSearchStateSearch,
   (state: SearchStateSearch) => {

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -25,19 +25,21 @@ marker('search.filters.keyword')
 marker('search.filters.isSpatial')
 marker('search.filters.license')
 marker('search.filters.publicationYear')
-marker('search.filters.publisher')
+marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')
+marker('search.filters.producerOrg')
+marker('search.filters.publisherOrg')
 
 @Injectable({
   providedIn: 'root',
 })
 export class FieldsService {
   protected fields = {
-    publisher: new OrganizationSearchField(this.injector),
+    organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new TranslatedSearchField(
       'resourceType',
@@ -70,6 +72,18 @@ export class FieldsService {
     q: new FullTextSearchField(),
     license: new LicenseSearchField(this.injector),
     owner: new OwnerSearchField(this.injector),
+    producerOrg: new MultilingualSearchField(
+      'originatorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
+    publisherOrg: new MultilingualSearchField(
+      'distributorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -1,14 +1,14 @@
 <a href (click)="clickOrganisation($event)" [attr.href]="organisationUrl">
   <div
     class="group cursor-pointer rounded-lg h-full flex flex-col"
-    [title]="organisation.name"
+    [title]="organization.name"
   >
     <div
       class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
+        [thumbnailUrl]="organization.logoUrl"
         [fit]="'contain'"
       >
       </gn-ui-thumbnail>
@@ -18,22 +18,24 @@
         class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
-        {{ organisation.name }}</span
+        {{ organization.name }}</span
       >
       <p
         class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
-        {{ organisation.description }}
+        {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
-          organisation.recordCount
+          organization.recordCount
         }}</span>
-        <span translate>record.metadata.publications</span>
+        <span translate [translateParams]="{ count: organization.recordCount }"
+          >record.metadata.publications</span
+        >
       </div>
     </div>
   </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -14,12 +14,12 @@ import { Organization } from '../../../../../../libs/common/domain/src/lib/model
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrganisationPreviewComponent {
-  @Input() organisation: Organization
+  @Input() organization: Organization
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organization>()
 
   clickOrganisation(event: Event) {
     event.preventDefault()
-    this.clickedOrganisation.emit(this.organisation)
+    this.clickedOrganisation.emit(this.organization)
   }
 }

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

@@ -9,6 +9,7 @@ import { OrganisationsFilterComponent } from './organisations-filter/organisatio
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
 import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
+import { RouterLink } from '@angular/router'
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { OrganisationsResultComponent } from './organisations-result/organisatio
     UiElementsModule,
     UiInputsModule,
     MatIconModule,
+    RouterLink,
   ],
   exports: [
     CatalogTitleComponent,

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

@@ -1,7 +1,13 @@
 <div
-  translate
   class="flex flex-row justify-start items-center overflow-hidden"
-  [title]="hoverTitle"
+  data-test="figureTitle"
+  [title]="
+    figure.toString() +
+    ' ' +
+    unit +
+    ' ' +
+    (title | translate: { count: figure })
+  "
 >
   <mat-icon
     class="material-symbols-outlined {{ bgClass }} {{
@@ -13,7 +19,9 @@
   </mat-icon>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
-      <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
+      <span class="figure font-medium mr-[0.3em]" data-test="figure">{{
+        figure
+      }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
     <div translate class="title truncate" [translateParams]="{ count: figure }">

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-figure',
@@ -10,17 +10,13 @@ export class FigureComponent {
   @Input() icon!: string
   @Input() title!: string
   @Input() figure!: string | number
-  @Input() unit?: string
+  @Input() unit = ''
   @Input() color: 'primary' | 'secondary' = 'primary'
 
-  get hoverTitle() {
-    return `${this.figure.toString()} ${this.unit || ''}
-${this.title}`
-  }
-
   get textClass() {
     return this.color === 'primary' ? 'text-primary' : 'text-secondary'
   }
+
   get bgClass() {
     return this.color === 'primary' ? 'bg-primary-white' : 'bg-secondary-white'
   }