renamed expanding card component to entry card

src/app/components/table/expanded-row-card/entry-card.component.html

@@ -0,0 +1,6 @@
+<mat-icon svgIcon="{{ icon }}" class="icon is-info"></mat-icon>
+<h2 class="header">{{ field }}</h2>
+<p class="content">
+ <span [innerHTML]="entry | slice: 0:1 | uppercase | highlight: filter"></span
+ ><span [innerHTML]="entry | slice: 1 | highlight: filter"></span>
+</p>

src/app/components/table/expanded-row-card/entry-card.component.scss

@@ -0,0 +1,60 @@
+@use "palette" as *;
+@use "grid" as gr;
+@use "bem-mixin" as *;
+:host {
+ --expanded-row--header-font: var(--header-font), sans-serif;
+ --expanded-row--body-font: var(--body-font), sans-serif;
+ border-radius: 8px;
+ color: $primary-5;
+ background: white;
+ border: 1px solid $light-gray-4;
+ display: grid;
+ grid-template-columns: 1fr 2em;
+ grid-template-areas: "header icon" "content content";
+ padding: 1rem 1rem;
+ max-width: 450px;
+ position: relative;
+ gap: 0.35rem;
+ transition: border-color 300ms ease-in;
+ &:hover {
+ border-color: tint($primary-1, 20%);
+ }
+ @include hoverable-shadow(3);
+}
+.content {
+ grid-area: content;
+ margin: 0;
+ font-family: var(--expanded-row--body-font);
+ color: $gray-4;
+}
+
+.header {
+ color: $gray-5;
+ grid-area: header;
+ font: 500 1.2rem/1.4rem var(--expanded-row--header-font);
+ padding: 0.3rem 0;
+ margin: 0;
+}
+
+.icon {
+ grid-area: icon;
+ width: 2em;
+ height: 2em;
+ color: $gray-4;
+ transition: color 500ms ease-in;
+ &.is-info {
+ :host(:hover) & {
+ color: tint($primary-1, 20%);
+ }
+ }
+ &.is-error {
+ :host(:hover) &:hover {
+ color: $error-1;
+ }
+ }
+ &.is-warning {
+ :host(:hover) &:hover {
+ color: $complement-1;
+ }
+ }
+}

src/app/components/table/expanded-row-card/entry-card.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'elder-entry-card',
+ templateUrl: './entry-card.component.html',
+ styleUrls: ['./entry-card.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExpandedRowCardComponent {
+ @Input() field: string = '';
+ @Input() entry: string = '';
+ @Input() icon: string = '';
+ @Input() filter: string = '';
+ constructor() {}
+}