geonetwork-ui 2.1.0-initial → 2.2.0-dev.05d3ea32

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,34 +1,15 @@
-<p
-  class="text-[28px] text-title text-center mb-6 font-title sm:text-left"
-  translate
->
-  record.metadata.about
-</p>
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
-    <p
-      class="whitespace-pre-line break-words"
-      [innerHTML]="metadata.abstract | safe: 'html'"
-      *ngIf="metadata.abstract"
-    ></p>
+    <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
+      <div>
+        <gn-ui-markdown-parser
+          [textContent]="metadata.abstract"
+        ></gn-ui-markdown-parser>
+      </div>
+    </gn-ui-max-lines>
   </gn-ui-content-ghost>
 </div>
 
-<ng-container *ngIf="metadata.keywords?.length">
-  <p class="mb-3 font-medium text-primary text-sm" translate>
-    record.metadata.keywords
-  </p>
-  <div class="mb-9 sm:mb-16">
-    <gn-ui-badge
-      class="inline-block mr-2 mb-2 lowercase"
-      (click)="onKeywordClick(keyword)"
-      [clickable]="true"
-      *ngFor="let keyword of metadata.keywords"
-      >{{ keyword }}</gn-ui-badge
-    >
-  </div>
-</ng-container>
-
 <gn-ui-expandable-panel
   class="metadata-origin"
   *ngIf="
@@ -55,10 +36,14 @@
         {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
       </p>
     </div>
-    <div *ngIf="metadata.updateFrequency">
+    <div *ngIf="updateFrequency">
       <p class="text-sm" translate>record.metadata.updateFrequency</p>
-      <p class="text-primary font-medium mt-1" translate>
-        domain.record.updateFrequency.{{ metadata.updateFrequency }}
+      <p
+        class="text-primary font-medium mt-1 updateFrequency"
+        translate
+        [translateParams]="{ count: updatedTimes }"
+      >
+        {{ updateFrequency }}
       </p>
     </div>
     <div *ngIf="metadata.status">
@@ -90,16 +75,61 @@
   *ngIf="metadata.landingPage"
   [title]="'record.metadata.details' | translate"
 >
-  <div class="py-5 px-5 rounded bg-gray-100 text-gray-700">
-    <p class="text-sm" translate>record.metadata.sheet</p>
-    <p class="text-primary font-medium mt-1" translate>
-      <a [href]="metadata.landingPage" target="_blank">
-        <mat-icon
-          class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
-          >open_in_new</mat-icon
+  <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
+    <div *ngIf="metadata.recordUpdated">
+      <p class="text-sm" translate>record.metadata.updatedOn</p>
+      <p class="text-primary font-medium">
+        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+      </p>
+    </div>
+    <div *ngIf="metadata.landingPage">
+      <p class="text-sm" translate>record.metadata.sheet</p>
+      <p class="text-primary font-medium" translate>
+        <a [href]="metadata.landingPage" target="_blank">
+          <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
+        </a>
+      </p>
+    </div>
+    <div *ngIf="metadata.ownerOrganization">
+      <p class="text-sm" translate>record.metadata.owner</p>
+      <p class="text-primary font-medium">
+        {{ metadata.ownerOrganization.name }}
+      </p>
+    </div>
+    <div *ngIf="metadata.uniqueIdentifier">
+      <p class="text-sm" translate>record.metadata.uniqueId</p>
+      <div class="flex flex-row content-align items-end gap-1">
+        <gn-ui-copy-text-button
+          [text]="metadata.uniqueIdentifier"
+          [tooltipText]="'tooltip.id.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <p class="text-primary font-medium">
+          {{ metadata.uniqueIdentifier }}
+        </p>
+      </div>
+    </div>
+    <div *ngIf="metadata.themes?.length">
+      <p class="text-sm mb-1" translate>record.metadata.themes</p>
+      <div class="sm:pb-4 sm:pr-16">
+        <gn-ui-badge
+          class="inline-block mr-2 lowercase"
+          *ngFor="let theme of metadata.themes"
+          >{{ theme }}</gn-ui-badge
+        >
+      </div>
+    </div>
+    <div *ngIf="metadata.keywords?.length">
+      <p class="text-sm mb-1" translate>record.metadata.keywords</p>
+      <div class="sm:pb-4 sm:pr-16">
+        <gn-ui-badge
+          class="inline-block mr-2 mb-2 lowercase"
+          (click)="onKeywordClick(keyword)"
+          [clickable]="true"
+          *ngFor="let keyword of metadata.keywords"
+          >{{ keyword }}</gn-ui-badge
         >
-        <span class="break-all">{{ metadata.landingPage }}</span>
-      </a>
-    </p>
+      </div>
+    </div>
   </div>
 </gn-ui-expandable-panel>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -17,6 +17,7 @@ export class MetadataInfoComponent {
   @Input() metadata: Partial<DatasetRecord>
   @Input() incomplete: boolean
   @Output() keyword = new EventEmitter<string>()
+  updatedTimes: number
 
   get hasUsage() {
     return (
@@ -37,6 +38,17 @@ export class MetadataInfoComponent {
     return array
   }
 
+  get updateFrequency(): string {
+    if (this.metadata.updateFrequency instanceof Object) {
+      this.updatedTimes = this.metadata.updateFrequency.updatedTimes
+      return `domain.record.updateFrequency.${this.metadata.updateFrequency.per}`
+    } else if (typeof this.metadata.updateFrequency === 'string') {
+      return `domain.record.updateFrequency.${this.metadata.updateFrequency}`
+    } else {
+      return undefined
+    }
+  }
+
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }
@@ -44,4 +56,9 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: string) {
     this.keyword.emit(keyword)
   }
+
+  copyText() {
+    navigator.clipboard.writeText(this.metadata.uniqueIdentifier)
+    ;(event.target as HTMLElement).blur()
+  }
 }

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,5 +1,5 @@
 <div
-  *ngIf="metadataQualityDisplay?.widget === true"
+  *ngIf="metadataQualityDisplay"
   class="mb-6 metadata-quality"
   (mouseenter)="showMenu()"
   (mouseleave)="hideMenu()"

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -6,19 +6,7 @@ import {
   SimpleChanges,
 } from '@angular/core'
 import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-
-export interface MetadataQualityDisplay {
-  widget: boolean
-  title: boolean
-  description: boolean
-  topic: boolean
-  keywords: boolean
-  legalConstraints: boolean
-  organisation: boolean
-  contact: boolean
-  updateFrequency: boolean
-}
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
@@ -29,7 +17,7 @@ export interface MetadataQualityDisplay {
 export class MetadataQualityComponent implements OnChanges {
   @Input() metadata: Partial<CatalogRecord>
   @Input() smaller = false
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
 
   items: MetadataQualityItem[] = []
 

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon>{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

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

@@ -1,4 +1,22 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('record.metadata.quality.title.success')
+marker('record.metadata.quality.title.failed')
+marker('record.metadata.quality.description.success')
+marker('record.metadata.quality.description.failed')
+marker('record.metadata.quality.topic.success')
+marker('record.metadata.quality.topic.failed')
+marker('record.metadata.quality.keywords.success')
+marker('record.metadata.quality.keywords.failed')
+marker('record.metadata.quality.legalConstraints.success')
+marker('record.metadata.quality.legalConstraints.failed')
+marker('record.metadata.quality.contact.success')
+marker('record.metadata.quality.contact.failed')
+marker('record.metadata.quality.updateFrequency.success')
+marker('record.metadata.quality.updateFrequency.failed')
+marker('record.metadata.quality.organisation.success')
+marker('record.metadata.quality.organisation.failed')
 
 export interface MetadataQualityItem {
   name: string
@@ -15,7 +33,7 @@ export class MetadataQualityItemComponent implements MetadataQualityItem {
   @Input() value: boolean
 
   get icon() {
-    return this.value ? 'check' : 'warning_amber'
+    return this.value ? 'check' : 'warning'
   }
 
   get labelKey() {

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css

@@ -0,0 +1,22 @@
+:host ::ng-deep input {
+  color: black;
+  opacity: 1;
+}
+
+:host ::ng-deep gn-ui-copy-text-button input[type='text'] {
+  color: black;
+  background-color: white;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button,
+host ::ng-deep gn-ui-copy-text-button button:hover {
+  background-color: var(--color-secondary) !important;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+  color: white !important;
+  opacity: 1 !important;
+}
+:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon {
+  color: lightgrey !important;
+}

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -0,0 +1,75 @@
+<div class="flex flex-col gap-8">
+  <div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8">
+    <div class="flex flex-row">
+      <div class="text-[16px] text-black truncate font-title w-11/12" translate>
+        record.metadata.api.form.create
+      </div>
+      <button
+        (click)="resetUrl()"
+        class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
+      >
+        <p class="text-[13px] uppercase" translate>
+          record.metadata.api.form.reset
+        </p>
+      </button>
+    </div>
+    <div class="flex flex-row flex-wrap justify-between flex-grow gap-5">
+      <div class="flex flex-col gap-3">
+        <p class="text-[14px]" translate>record.metadata.api.form.limit</p>
+        <div class="flex flex-row items-center gap-2">
+          <gn-ui-text-input
+            class="mr-2 w-20"
+            (input)="setLimit($event.target.value)"
+            [value]="limit$ | async"
+            hint=""
+          >
+          </gn-ui-text-input>
+          <div class="flex items-center">
+            <input
+              class="mr-2 cursor-pointer"
+              type="checkbox"
+              [checked]="(limit$ | async) === ''"
+              (change)="setLimit('')"
+            />
+            <span class="text-sm" translate
+              >record.metadata.api.form.limit.all</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3">
+        <p class="text-sm" translate>record.metadata.api.form.offset</p>
+        <gn-ui-text-input
+          class="w-20"
+          [value]="offset$ | async"
+          (input)="setOffset($event.target.value)"
+          hint=""
+        >
+        </gn-ui-text-input>
+      </div>
+      <div class="flex flex-col gap-3">
+        <p class="text-sm" translate>record.metadata.api.form.type</p>
+        <gn-ui-dropdown-selector
+          #dropdown
+          [title]="''"
+          extraBtnClass="secondary min-w-full !w-40 !text-black"
+          [showTitle]="false"
+          class="text-black"
+          [choices]="formatsList"
+          (selectValue)="setFormat($event)"
+          [selected]="format$ | async"
+        ></gn-ui-dropdown-selector>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3 mb-3">
+    <div class="text-sm text-black truncate font-title w-11/12" translate>
+      record.metadata.api.form.customUrl
+    </div>
+    <div class="bg-white rounded-lg">
+      <gn-ui-copy-text-button
+        [text]="apiQueryUrl$ | async"
+      ></gn-ui-copy-text-button>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
+
+const DEFAULT_PARAMS = {
+  OFFSET: '',
+  LIMIT: '',
+  FORMAT: 'json',
+}
+@Component({
+  selector: 'gn-ui-record-api-form',
+  templateUrl: './record-api-form.component.html',
+  styleUrls: ['./record-api-form.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordApiFormComponent {
+  @Input() set apiLink(value: DatasetServiceDistribution) {
+    this.apiBaseUrl = value ? value.url.href : undefined
+    this.resetUrl()
+  }
+  offset$ = new BehaviorSubject('')
+  limit$ = new BehaviorSubject('')
+  format$ = new BehaviorSubject('')
+  apiBaseUrl: string
+  formatsList = [
+    { label: 'JSON', value: 'json' },
+    { label: 'CSV', value: 'csv' },
+  ]
+  apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(
+    map(([offset, limit, format]) => {
+      let outputUrl
+      if (this.apiBaseUrl) {
+        const url = new URL(this.apiBaseUrl)
+        const params = { offset: offset, limit: limit, f: format }
+        for (const [key, value] of Object.entries(params)) {
+          if (value && value !== '0') {
+            url.searchParams.set(key, value)
+          } else {
+            url.searchParams.delete(key)
+          }
+        }
+        outputUrl = url.toString()
+      }
+      return outputUrl
+    })
+  )
+
+  setOffset(value: string) {
+    this.offset$.next(value)
+  }
+
+  setLimit(value: string) {
+    this.limit$.next(value)
+  }
+
+  setFormat(value: string) {
+    this.format$.next(value)
+  }
+
+  resetUrl() {
+    this.offset$.next(DEFAULT_PARAMS.OFFSET)
+    this.limit$.next(DEFAULT_PARAMS.LIMIT)
+    this.format$.next(DEFAULT_PARAMS.FORMAT)
+  }
+}

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

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-related-record-card',

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html

@@ -12,7 +12,7 @@
     alt="thumbnail"
     loading="lazy"
     (load)="setObjectFit()"
-    [src]="imgUrl | safe: 'url'"
+    [src]="imgUrl"
     (error)="useFallback()"
   />
 </div>

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

@@ -27,6 +27,9 @@ import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
+import { MaxLinesComponent } from './max-lines/max-lines.component'
+import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
+import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 
 @NgModule({
   imports: [
@@ -61,6 +64,9 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
+    MaxLinesComponent,
+    RecordApiFormComponent,
+    MarkdownParserComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -80,6 +86,8 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
+    RecordApiFormComponent,
+    MarkdownParserComponent,
   ],
 })
 export class UiElementsModule {}

package/src/libs/ui/elements/src/lib/user-preview/user-preview.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { UserModel } from '../../../../../../libs/common/domain/src/lib/user.model'
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
 
 @Component({
   selector: 'gn-ui-user-preview',

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

@@ -16,3 +16,6 @@ export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/navigation-button/navigation-button.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/checkbox/checkbox.component'
+export * from './lib/search-input/search-input.component'
+export * from './lib/date-range-picker/date-range-picker.component'

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

@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -47,6 +48,7 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() autoFocus = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -65,6 +67,7 @@ export class AutocompleteComponent
 
   @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
 
+  constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
@@ -110,6 +113,10 @@ export class AutocompleteComponent
 
   ngAfterViewInit(): void {
     this.autocomplete.optionSelected.subscribe(this.selectionSubject)
+    if (this.autoFocus) {
+      this.inputRef.nativeElement.focus()
+      this.cdRef.detectChanges()
+    }
   }
 
   ngOnDestroy(): void {

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

@@ -14,57 +14,37 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
-  @Input() type: 'primary' | 'secondary' | 'default' | 'outline' | 'light' =
-    'default'
-  @Input() disabled = false
-  @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
-
-  get classList() {
-    return `${this.color} ${this.textColor} ${this.borderColor} ${this.extraClass}`
-  }
+  private btnClass: string
 
-  get color() {
-    switch (this.type) {
-      case 'default':
-        return 'bg-gray-700 hover:bg-gray-800 hover:bg-gray-800 active:bg-gray-900'
+  // btn-classes are explicited to allow tailwind recognize them and add it in css.
+  @Input() set type(
+    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+  ) {
+    switch (value) {
       case 'primary':
-        return 'bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest'
+        this.btnClass = 'btn-primary'
+        break
       case 'secondary':
-        return 'bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest'
+        this.btnClass = 'btn-secondary'
+        break
       case 'outline':
-        return 'bg-white'
+        this.btnClass = 'btn-outline'
+        break
       case 'light':
-        return 'bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100'
+        this.btnClass = 'btn-light'
+        break
+      default:
+        this.btnClass = 'btn-default'
+        break
     }
   }
 
-  get textColor() {
-    switch (this.type) {
-      case 'default':
-      case 'secondary':
-      case 'primary':
-        return 'text-white'
-      case 'outline':
-        return 'text-main hover:text-primary-darker focus:text-primary-darker active:text-primary-black'
-      case 'light':
-        return 'text-main'
-    }
-  }
+  @Input() disabled = false
+  @Input() extraClass = ''
+  @Output() buttonClick = new EventEmitter<void>()
 
-  get borderColor() {
-    switch (this.type) {
-      case 'default':
-        return 'border border-gray-700 focus:ring-4 focus:ring-gray-200'
-      case 'secondary':
-        return 'border border-secondary focus:ring-4 focus:ring-secondary-lightest'
-      case 'primary':
-        return 'border border-primary focus:ring-4 focus:ring-primary-lightest'
-      case 'outline':
-        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
-      case 'light':
-        return 'border border-white focus:ring-4 focus:ring-gray-300'
-    }
+  get classList() {
+    return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: Event) {

package/src/libs/ui/inputs/src/lib/checkbox/checkbox.component.css

@@ -0,0 +1,24 @@
+.default {
+  --gn-ui-checkbox-color: var(--color-main);
+}
+
+.secondary {
+  --gn-ui-checkbox-color: var(--color-secondary);
+}
+
+.primary {
+  --gn-ui-checkbox-color: var(--color-primary);
+}
+
+mat-checkbox {
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-state-layer-color: var(
+    --gn-ui-checkbox-color
+  );
+}

package/src/libs/ui/inputs/src/lib/checkbox/checkbox.component.html

@@ -0,0 +1,8 @@
+<mat-checkbox
+  class="cursor-pointer"
+  [class]="classList"
+  type="checkbox"
+  [checked]="checked"
+  [indeterminate]="indeterminate"
+  (click)="handleClick($event)"
+></mat-checkbox>

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

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckboxComponent {
+  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
+  @Input() checked = false
+  @Input() indeterminate? = false
+  @Output() changed = new EventEmitter<boolean>()
+
+  get classList() {
+    return `${this.type}`
+  }
+
+  handleClick(event: Event) {
+    event.stopPropagation()
+    this.checked = !this.checked
+    this.changed.emit(this.checked)
+  }
+}

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css

@@ -0,0 +1,3 @@
+mat-datepicker-toggle {
+  @apply text-primary;
+}