geonetwork-ui 2.6.0-dev.f073bbb4e → 2.7.0-dev.30c4f9cfa

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

@@ -13,7 +13,8 @@ import {
   TextInputComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -32,7 +33,8 @@ const DEFAULT_PARAMS = {
     TextInputComponent,
     DropdownSelectorComponent,
     CopyTextButtonComponent,
-    TranslateModule,
+    TranslateDirective,
+    MatTooltipModule,
   ],
 })
 export class RecordApiFormComponent {
@@ -162,7 +164,7 @@ export class RecordApiFormComponent {
       limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
       outputCrs:
-        format === ('application/json' || 'geojson') ? 'EPSG:4326' : undefined,
+        format.toLowerCase().indexOf('json') > -1 ? 'EPSG:4326' : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {
@@ -170,6 +172,7 @@ export class RecordApiFormComponent {
       options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
       return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
     } else {
+      delete options.outputCrs
       return await this.endpoint.getCollectionItemsUrl(
         this.apiFeatureType,
         options

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -0,0 +1,107 @@
+<div
+  cdkScrollable
+  class="h-[562px] relative overflow-y-auto overflow-hidden"
+  data-cy="feat-catalog-scrollable"
+>
+  <div #scrollContainer class="flex flex-col gap-2 py-5 px-5">
+    <div
+      *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+      class="rounded shadow bg-white"
+    >
+      <gn-ui-expandable-panel
+        #expanel
+        [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+        iconColor="black"
+      >
+        <ng-template #titleTemplate>
+          <div class="px-2">
+            <div class="text-lg font-bold">{{ featureType.name }}</div>
+            <div class="text-sm" *ngIf="featureType.definition">
+              {{ featureType.definition }}
+            </div>
+          </div>
+        </ng-template>
+        <div
+          *ngIf="expanel && !expanel.collapsed"
+          class="grid gap-0"
+          [style.grid-template-columns]="
+            getGridTemplateColumns(featureType.attributes)
+          "
+          data-cy="feature-type-content"
+        >
+          <div
+            class="py-1 px-2 text-sm font-bold text-left border-t break-all"
+            [class.border-l]="i > 0"
+            [class.border-gray-300]="i > 0"
+            [ngClass]="col.class || ''"
+            *ngFor="
+              let col of getColumnsDefinition(featureType.attributes);
+              trackBy: trackByColumn;
+              let i = index
+            "
+            data-test="column-label"
+          >
+            {{ 'feature.catalog.attribute.' + col.key | translate }}
+          </div>
+          <ng-container *ngIf="expanel && !expanel.collapsed">
+            <ng-container *ngFor="let row of featureType.attributes">
+              <div
+                class="bg-white text-sm font-normal text-left border-t"
+                [class.border-l]="i > 0"
+                [class.border-gray-300]="i > 0"
+                *ngFor="
+                  let col of getColumnsDefinition(featureType.attributes);
+                  trackBy: trackByColumn;
+                  let i = index
+                "
+                data-test="cell-content"
+              >
+                <ng-container
+                  *ngIf="col.key === 'values'; then tplValues; else defaultTpl"
+                ></ng-container>
+
+                <ng-template #defaultTpl>
+                  <gn-ui-truncated-text
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    [text]="row[col.key]"
+                  ></gn-ui-truncated-text>
+                </ng-template>
+
+                <ng-template #tplValues>
+                  <gn-ui-cell-popin
+                    #popinRef
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    *ngIf="row.values?.length > 0"
+                  >
+                    <div cellContent data-cy="values-cell-popin-trigger">
+                      <gn-ui-button
+                        type="light"
+                        extraClass="bg-transparent border-none"
+                        (buttonClick)="popinRef.openOverlay()"
+                      >
+                        <ng-icon name="iconoirList" size="24"></ng-icon>
+                      </gn-ui-button>
+                    </div>
+                    <div
+                      popinContent
+                      class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
+                      style="scrollbar-width: thin"
+                    >
+                      <ul class="list-disc list-inside mr-4">
+                        <li *ngFor="let v of row.values">
+                          {{ v.label || v.code }}
+                        </li>
+                      </ul>
+                    </div>
+                  </gn-ui-cell-popin>
+                </ng-template>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </gn-ui-expandable-panel>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,82 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslatePipe } from '@ngx-translate/core'
+import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    CellPopinComponent,
+    CommonModule,
+    TranslatePipe,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
+  ],
+  providers: [provideIcons({ iconoirList })],
+})
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '25%' },
+    { key: 'name', width: '40%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
+  ]
+
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
+
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
+  }
+}

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -0,0 +1,110 @@
+<div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
+  <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div class="gn-ui-section-title mb-6" translate>
+          service.metadata.capabilities
+        </div>
+        <div
+          *ngIf="loading"
+          class="flex justify-center w-full h-[200px] items-center"
+        >
+          <gn-ui-spinning-loader></gn-ui-spinning-loader>
+        </div>
+        <div *ngIf="!loading">
+          <div class="flex flex-row gap-5">
+            <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
+              <gn-ui-text-input
+                class="w-full"
+                [(value)]="searchQuery"
+                [extraClass]="getExtraInputClass()"
+                [placeholder]="'service.metadata.search' | translate"
+                (input)="onSearchChange($event)"
+                (keydown.enter)="onSearchEnter($event)"
+              >
+              </gn-ui-text-input>
+              <div
+                class="absolute right-14 h-14 w-14 flex items-center justify-center"
+              >
+                <button
+                  #inputBtn
+                  *ngIf="searchQuery"
+                  [aria-label]="'service.metadata.search.clear' | translate"
+                  (click)="clearSearch()"
+                  class="h-12 w-12 border-0 flex items-center justify-center"
+                >
+                  <ng-icon name="matClose"></ng-icon>
+                </button>
+              </div>
+              <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
+                <gn-ui-button
+                  #inputBtn
+                  type="outline"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
+                  (buttonClick)="searchLayers()"
+                >
+                  <ng-icon name="iconoirSearch"></ng-icon>
+                </gn-ui-button>
+              </div>
+            </div>
+            <gn-ui-popover
+              [content]="popoverItems"
+              theme="light"
+              class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
+            >
+              <ng-icon name="matInfoOutline" class="w-6 h-6 pt-0.5"></ng-icon>
+            </gn-ui-popover>
+          </div>
+          <div
+            style="height: 500px"
+            class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
+          >
+            <div
+              class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
+              data-test="layer-list"
+            >
+              <gn-ui-button
+                *ngFor="let layerItem of filteredLayers"
+                type="outline"
+                [extraClass]="getExtraClass(layerItem)"
+                (buttonClick)="selectLayer(layerItem)"
+              >
+                {{ layerItem.title || layerItem.name }}
+              </gn-ui-button>
+              <span *ngIf="filteredLayers.length === 0" class="text-gray-800">
+                {{ 'service.metadata.filter.noLayers' | translate }}
+              </span>
+            </div>
+            <div
+              data-test="layer-information"
+              class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
+            >
+              <div
+                *ngFor="let item of layerInformation"
+                class="flex flex-row gap-4 border-b border-gray-200"
+              >
+                <span class="font-semibold w-24">{{ item.displayName }}</span>
+                <div *ngIf="isList(item.value)">
+                  <div
+                    *ngFor="let subItem of item.value"
+                    class="flex flex-row break-words max-w-72"
+                  >
+                    {{ subItem }}
+                  </div>
+                </div>
+                <div class="break-words max-w-72" *ngIf="!isList(item.value)">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
+    <div translate>service.metadata.filter</div>
+  </div>
+</ng-template>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -0,0 +1,196 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { getLayers } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import {
+  PopoverComponent,
+  SpinningLoaderComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import {
+  WfsFeatureTypeFull,
+  WmsLayerFull,
+  WmtsLayer,
+} from '@camptocamp/ogc-client'
+import { matClose } from '@ng-icons/material-icons/baseline'
+
+marker(`service.metadata.search`)
+marker(`service.metadata.capabilities.title`)
+marker(`service.metadata.capabilities.abstract`)
+marker(`service.metadata.capabilities.name`)
+marker(`service.metadata.capabilities.defaultCrs`)
+marker(`service.metadata.capabilities.availableCrs`)
+marker(`service.metadata.capabilities.otherCrs`)
+marker(`service.metadata.capabilities.objectCount`)
+marker(`service.metadata.capabilities.geometryName`)
+marker(`service.metadata.capabilities.geometryType`)
+marker(`service.metadata.capabilities.keywords`)
+marker(`service.metadata.capabilities.outputFormats`)
+marker(`service.metadata.capabilities.resourceLinks`)
+marker(`service.metadata.capabilities.attribution`)
+
+@Component({
+  selector: 'gn-ui-service-capabilities',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+    TextInputComponent,
+    NgIcon,
+    PopoverComponent,
+    SpinningLoaderComponent,
+  ],
+  viewProviders: [
+    provideIcons({
+      iconoirSearch,
+      matInfoOutline,
+      matClose,
+    }),
+  ],
+  templateUrl: './service-capabilities.component.html',
+  styleUrl: './service-capabilities.component.css',
+})
+export class ServiceCapabilitiesComponent implements OnInit {
+  @Input() apiLinks = []
+  availableLayers = []
+  filteredLayers = []
+  selectedLayer = null
+  layerInformation = []
+  searchQuery = ''
+  loading = false
+  searchActive
+
+  capabilitiesKeys = [
+    'title',
+    'abstract',
+    'name',
+    'defaultCrs',
+    'availableCrs',
+    'otherCrs',
+    'objectCount',
+    'geometryName',
+    'geometryType',
+    'keywords',
+    'outputFormats',
+    'resourceLinks',
+    'attribution',
+  ]
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.loadLayers()
+  }
+
+  onSearchChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.searchQuery = input.value
+    if (!input.value) {
+      this.searchActive = false
+      this.filteredLayers = this.availableLayers
+    }
+  }
+
+  onSearchEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.searchActive = true
+      this.searchLayers()
+    }
+  }
+
+  clearSearch() {
+    this.searchActive = false
+    this.searchQuery = ''
+    this.filteredLayers = this.availableLayers
+  }
+
+  async loadLayers() {
+    if (
+      this.apiLinks.length > 0 &&
+      this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures'
+    ) {
+      this.loading = true
+      this.availableLayers = await getLayers(
+        this.apiLinks[0].url.href,
+        this.apiLinks[0].accessServiceProtocol
+      )
+      this.loading = false
+      this.cdr.detectChanges()
+      this.filteredLayers = this.availableLayers
+    } else {
+      this.availableLayers = []
+    }
+  }
+
+  selectLayer(layer: WfsFeatureTypeFull | WmsLayerFull | WmtsLayer) {
+    if (layer === this.selectedLayer) {
+      this.selectedLayer = null
+      this.layerInformation = []
+      return
+    }
+
+    this.selectedLayer = layer
+    const filteredInfo = []
+    Object.keys(layer).map((key) => {
+      if (this.capabilitiesKeys.includes(key)) {
+        const displayName = this.translateService.instant(
+          `service.metadata.capabilities.${key}`
+        )
+        if (key in layer && layer[key]?.length) {
+          filteredInfo.push({ displayName, value: layer[key] })
+        }
+      }
+    })
+
+    this.layerInformation = filteredInfo
+  }
+
+  isList(value: string | string[]) {
+    return Array.isArray(value)
+  }
+
+  getExtraInputClass() {
+    if (this.searchActive) {
+      return 'h-14 border rounded-lg border-primary text-primary focus:border-primary hover:border-primary'
+    }
+    return 'h-14 border rounded-lg'
+  }
+
+  searchLayers() {
+    this.searchActive = true
+    this.filteredLayers = this.availableLayers.filter((layer) => {
+      const query = this.searchQuery.toLowerCase()
+      if (layer.title) {
+        return (
+          layer.title.toLowerCase().includes(query) ||
+          layer.abstract?.toLowerCase().includes(query)
+        )
+      } else {
+        return layer.name.toLowerCase().includes(query)
+      }
+    })
+    if (!this.filteredLayers.includes(this.selectedLayer)) {
+      this.selectedLayer = null
+      this.layerInformation = []
+    }
+  }
+
+  getExtraClass(layerItem) {
+    return layerItem === this.selectedLayer
+      ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
+      : `h-8 rounded-lg`
+  }
+}

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

@@ -14,7 +14,7 @@ import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/us
 import { TimeSincePipe } from './time-since.pipe'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matSendOutline } from '@ng-icons/material-icons/outline'
@@ -29,7 +29,7 @@ import { matSendOutline } from '@ng-icons/material-icons/outline'
     CommonModule,
     TimeSincePipe,
     TextAreaComponent,
-    TranslateModule,
+    TranslatePipe,
     ButtonComponent,
     SpinningLoaderComponent,
     NgIcon,

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

@@ -1,10 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
+import { AvatarComponent } from '../avatar/avatar.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
   selector: 'gn-ui-user-preview',
   templateUrl: './user-preview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AvatarComponent, MatTooltipModule],
+  standalone: true,
 })
 export class UserPreviewComponent {
   @Input() user: UserModel

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

@@ -15,12 +15,12 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
-export * from './lib/navigation-button/navigation-button.component'
+export * from './lib/inline-filter/inline-filter.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
-export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/search-feature-catalog/search-feature-catalog.component'

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

@@ -14,7 +14,7 @@
       [placeholder]="placeholder"
       [formControl]="control"
       [matAutocomplete]="auto"
-      (keyup.enter)="handleEnter(searchInput.value)"
+      (keyup.enter)="handleSearch()"
       [ngClass]="{
         'text-primary': searchActive && enterButton,
         'text-gray-900': !searchActive,
@@ -54,7 +54,7 @@
     aria-label="Trigger search"
     *ngIf="allowSubmit"
     data-test="autocomplete-submit-btn"
-    (buttonClick)="handleClickSearch()"
+    (buttonClick)="handleSearch()"
   >
     <ng-icon name="iconoirSearch"></ng-icon>
   </gn-ui-button>
@@ -79,7 +79,7 @@
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
-    class="p-2 suggestion"
+    class="p-2 suggestion text-start"
   >
     {{ displayWithFnInternal(suggestion) }}
   </mat-option>

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

@@ -34,7 +34,7 @@ import {
 } from 'rxjs/operators'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -56,7 +56,7 @@ export type AutocompleteItem = unknown
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
     ReactiveFormsModule,
     ButtonComponent,
     NgIconComponent,
@@ -183,7 +183,7 @@ export class AutocompleteComponent
       switchMap((value) => this.action(value)),
       tap((suggestions) => {
         // forcing the panel to open if there are suggestions
-        if (suggestions.length > 0) {
+        if (suggestions.length > 0 && !this.searchActive) {
           this.triggerRef?.openPanel()
         }
       }),
@@ -296,16 +296,13 @@ export class AutocompleteComponent
     this.inputRef.nativeElement.focus()
   }
 
-  handleEnter(any: string) {
+  handleSearch() {
     if (!this.cancelEnter && this.allowSubmit) {
       this.isSearchActive.emit(true)
       this.searchActive = true
-      this.inputSubmitted.emit(any)
+      this.inputSubmitted.emit(this.inputRef.nativeElement.value)
     }
-  }
-
-  handleClickSearch() {
-    this.inputSubmitted.emit(this.inputRef.nativeElement.value)
+    this.triggerRef?.closePanel()
   }
 
   /**

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

@@ -56,14 +56,14 @@ export class ButtonComponent {
 
   @Input() disabled = false
   @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
+  @Output() buttonClick = new EventEmitter<Event>()
 
   get classList() {
     return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: MouseEvent) {
-    this.buttonClick.emit()
+    this.buttonClick.emit(event)
     event.preventDefault()
     ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)