/src/@fuse folder was missing

transparency_dashboard_frontend/src/@fuse/animations/defaults.ts

+export class FuseAnimationCurves
+{
+    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+    static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';
+    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
+}
+
+export class FuseAnimationDurations
+{
+    static complex = '375ms';
+    static entering = '225ms';
+    static exiting = '195ms';
+}

transparency_dashboard_frontend/src/@fuse/animations/expand-collapse.ts

+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Expand / collapse
+// -----------------------------------------------------------------------------------------------------
+const expandCollapse = trigger('expandCollapse',
+    [
+        state('void, collapsed',
+            style({
+                height: '0'
+            })
+        ),
+
+        state('*, expanded',
+            style('*')
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void <=> false, collapsed <=> false, expanded <=> false', []),
+
+        // Transition
+        transition('void <=> *, collapsed <=> expanded',
+            animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { expandCollapse };

transparency_dashboard_frontend/src/@fuse/animations/fade.ts

+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in
+// -----------------------------------------------------------------------------------------------------
+const fadeIn = trigger('fadeIn',
+    [
+        state('void',
+            style({
+                opacity: 0
+            })
+        ),
+
+        state('*',
+            style({
+                opacity: 1
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in top
+// -----------------------------------------------------------------------------------------------------
+const fadeInTop = trigger('fadeInTop',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in bottom
+// -----------------------------------------------------------------------------------------------------
+const fadeInBottom = trigger('fadeInBottom',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in left
+// -----------------------------------------------------------------------------------------------------
+const fadeInLeft = trigger('fadeInLeft',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in right
+// -----------------------------------------------------------------------------------------------------
+const fadeInRight = trigger('fadeInRight',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out
+// -----------------------------------------------------------------------------------------------------
+const fadeOut = trigger('fadeOut',
+    [
+        state('*',
+            style({
+                opacity: 1
+            })
+        ),
+
+        state('void',
+            style({
+                opacity: 0
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out top
+// -----------------------------------------------------------------------------------------------------
+const fadeOutTop = trigger('fadeOutTop',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out bottom
+// -----------------------------------------------------------------------------------------------------
+const fadeOutBottom = trigger('fadeOutBottom',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out left
+// -----------------------------------------------------------------------------------------------------
+const fadeOutLeft = trigger('fadeOutLeft',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out right
+// -----------------------------------------------------------------------------------------------------
+const fadeOutRight = trigger('fadeOutRight',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };

transparency_dashboard_frontend/src/@fuse/animations/index.ts

+export * from '@fuse/animations/public-api';

transparency_dashboard_frontend/src/@fuse/animations/public-api.ts

+import { expandCollapse } from '@fuse/animations/expand-collapse';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
+import { shake } from '@fuse/animations/shake';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
+import { zoomIn, zoomOut } from '@fuse/animations/zoom';
+
+export const fuseAnimations = [
+    expandCollapse,
+    fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
+    fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
+    shake,
+    slideInTop, slideInBottom, slideInLeft, slideInRight,
+    slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
+    zoomIn, zoomOut
+];

transparency_dashboard_frontend/src/@fuse/animations/shake.ts

+import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Shake
+// -----------------------------------------------------------------------------------------------------
+const shake = trigger('shake',
+    [
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *, * => true',
+            [
+                animate('{{timings}}',
+                    keyframes([
+                        style({
+                            transform: 'translate3d(0, 0, 0)',
+                            offset   : 0
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.1
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.2
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.3
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.4
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.5
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.6
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.7
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.8
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.9
+                        }),
+                        style({
+                            transform: 'translate3d(0, 0, 0)',
+                            offset   : 1
+                        })
+                    ])
+                )
+            ],
+            {
+                params: {
+                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
+                }
+            }
+        )
+    ]
+);
+
+export { shake };

transparency_dashboard_frontend/src/@fuse/animations/slide.ts

+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in top
+// -----------------------------------------------------------------------------------------------------
+const slideInTop = trigger('slideInTop',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in bottom
+// -----------------------------------------------------------------------------------------------------
+const slideInBottom = trigger('slideInBottom',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in left
+// -----------------------------------------------------------------------------------------------------
+const slideInLeft = trigger('slideInLeft',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in right
+// -----------------------------------------------------------------------------------------------------
+const slideInRight = trigger('slideInRight',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out top
+// -----------------------------------------------------------------------------------------------------
+const slideOutTop = trigger('slideOutTop',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out bottom
+// -----------------------------------------------------------------------------------------------------
+const slideOutBottom = trigger('slideOutBottom',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out left
+// -----------------------------------------------------------------------------------------------------
+const slideOutLeft = trigger('slideOutLeft',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out right
+// -----------------------------------------------------------------------------------------------------
+const slideOutRight = trigger('slideOutRight',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };

transparency_dashboard_frontend/src/@fuse/animations/zoom.ts

+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Zoom in
+// -----------------------------------------------------------------------------------------------------
+const zoomIn = trigger('zoomIn',
+    [
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'scale(0.5)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'scale(1)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Zoom out
+// -----------------------------------------------------------------------------------------------------
+const zoomOut = trigger('zoomOut',
+    [
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'scale(1)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'scale(0.5)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { zoomIn, zoomOut };
+

transparency_dashboard_frontend/src/@fuse/components/alert/alert.component.html

+<div
+    class="fuse-alert-container"
+    *ngIf="!dismissible || dismissible && !dismissed"
+    [@fadeIn]="!dismissed"
+    [@fadeOut]="!dismissed">
+
+    <!-- Border -->
+    <div
+        class="fuse-alert-border"
+        *ngIf="appearance === 'border'"></div>
+
+    <!-- Icon -->
+    <div
+        class="fuse-alert-icon"
+        *ngIf="showIcon">
+
+        <!-- Custom icon -->
+        <div class="fuse-alert-custom-icon">
+            <ng-content select="[fuseAlertIcon]"></ng-content>
+        </div>
+
+        <!-- Default icons -->
+        <div class="fuse-alert-default-icon">
+
+            <mat-icon
+                *ngIf="type === 'primary'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'accent'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'warn'"
+                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'basic'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'info'"
+                [svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'success'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'warning'"
+                [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'error'"
+                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+        </div>
+
+    </div>
+
+    <!-- Content -->
+    <div class="fuse-alert-content">
+
+        <div class="fuse-alert-title">
+            <ng-content select="[fuseAlertTitle]"></ng-content>
+        </div>
+
+        <div class="fuse-alert-message">
+            <ng-content></ng-content>
+        </div>
+
+    </div>
+
+    <!-- Dismiss button -->
+    <button
+        class="fuse-alert-dismiss-button"
+        mat-icon-button
+        (click)="dismiss()">
+        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
+    </button>
+
+</div>

transparency_dashboard_frontend/src/@fuse/components/alert/alert.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { filter, Subject, takeUntil } from 'rxjs';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
+import { FuseAlertService } from '@fuse/components/alert/alert.service';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+
+@Component({
+    selector       : 'fuse-alert',
+    templateUrl    : './alert.component.html',
+    styleUrls      : ['./alert.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations     : fuseAnimations,
+    exportAs       : 'fuseAlert'
+})
+export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
+{
+    /* eslint-disable @typescript-eslint/naming-convention */
+    static ngAcceptInputType_dismissible: BooleanInput;
+    static ngAcceptInputType_dismissed: BooleanInput;
+    static ngAcceptInputType_showIcon: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
+
+    @Input() appearance: FuseAlertAppearance = 'soft';
+    @Input() dismissed: boolean = false;
+    @Input() dismissible: boolean = false;
+    @Input() name: string = this._fuseUtilsService.randomId();
+    @Input() showIcon: boolean = true;
+    @Input() type: FuseAlertType = 'primary';
+    @Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseAlertService: FuseAlertService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-alert-appearance-border' : this.appearance === 'border',
+            'fuse-alert-appearance-fill'   : this.appearance === 'fill',
+            'fuse-alert-appearance-outline': this.appearance === 'outline',
+            'fuse-alert-appearance-soft'   : this.appearance === 'soft',
+            'fuse-alert-dismissed'         : this.dismissed,
+            'fuse-alert-dismissible'       : this.dismissible,
+            'fuse-alert-show-icon'         : this.showIcon,
+            'fuse-alert-type-primary'      : this.type === 'primary',
+            'fuse-alert-type-accent'       : this.type === 'accent',
+            'fuse-alert-type-warn'         : this.type === 'warn',
+            'fuse-alert-type-basic'        : this.type === 'basic',
+            'fuse-alert-type-info'         : this.type === 'info',
+            'fuse-alert-type-success'      : this.type === 'success',
+            'fuse-alert-type-warning'      : this.type === 'warning',
+            'fuse-alert-type-error'        : this.type === 'error'
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Dismissed
+        if ( 'dismissed' in changes )
+        {
+            // Coerce the value to a boolean
+            this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
+
+            // Dismiss/show the alert
+            this._toggleDismiss(this.dismissed);
+        }
+
+        // Dismissible
+        if ( 'dismissible' in changes )
+        {
+            // Coerce the value to a boolean
+            this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
+        }
+
+        // Show icon
+        if ( 'showIcon' in changes )
+        {
+            // Coerce the value to a boolean
+            this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the dismiss calls
+        this._fuseAlertService.onDismiss
+            .pipe(
+                filter(name => this.name === name),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+
+                // Dismiss the alert
+                this.dismiss();
+            });
+
+        // Subscribe to the show calls
+        this._fuseAlertService.onShow
+            .pipe(
+                filter(name => this.name === name),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+
+                // Show the alert
+                this.show();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss the alert
+     */
+    dismiss(): void
+    {
+        // Return if the alert is already dismissed
+        if ( this.dismissed )
+        {
+            return;
+        }
+
+        // Dismiss the alert
+        this._toggleDismiss(true);
+    }
+
+    /**
+     * Show the dismissed alert
+     */
+    show(): void
+    {
+        // Return if the alert is already showing
+        if ( !this.dismissed )
+        {
+            return;
+        }
+
+        // Show the alert
+        this._toggleDismiss(false);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss/show the alert
+     *
+     * @param dismissed
+     * @private
+     */
+    private _toggleDismiss(dismissed: boolean): void
+    {
+        // Return if the alert is not dismissible
+        if ( !this.dismissible )
+        {
+            return;
+        }
+
+        // Set the dismissed
+        this.dismissed = dismissed;
+
+        // Execute the observable
+        this.dismissedChanged.next(this.dismissed);
+
+        // Notify the change detector
+        this._changeDetectorRef.markForCheck();
+    }
+}

transparency_dashboard_frontend/src/@fuse/components/alert/alert.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
+
+@NgModule({
+    declarations: [
+        FuseAlertComponent
+    ],
+    imports     : [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule
+    ],
+    exports     : [
+        FuseAlertComponent
+    ]
+})
+export class FuseAlertModule
+{
+}

transparency_dashboard_frontend/src/@fuse/components/alert/alert.service.ts

+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseAlertService
+{
+    private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
+    private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for onDismiss
+     */
+    get onDismiss(): Observable<any>
+    {
+        return this._onDismiss.asObservable();
+    }
+
+    /**
+     * Getter for onShow
+     */
+    get onShow(): Observable<any>
+    {
+        return this._onShow.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss the alert
+     *
+     * @param name
+     */
+    dismiss(name: string): void
+    {
+        // Return if the name is not provided
+        if ( !name )
+        {
+            return;
+        }
+
+        // Execute the observable
+        this._onDismiss.next(name);
+    }
+
+    /**
+     * Show the dismissed alert
+     *
+     * @param name
+     */
+    show(name: string): void
+    {
+        // Return if the name is not provided
+        if ( !name )
+        {
+            return;
+        }
+
+        // Execute the observable
+        this._onShow.next(name);
+    }
+
+}

transparency_dashboard_frontend/src/@fuse/components/alert/alert.types.ts

+export type FuseAlertAppearance =
+    | 'border'
+    | 'fill'
+    | 'outline'
+    | 'soft';
+
+export type FuseAlertType =
+    | 'primary'
+    | 'accent'
+    | 'warn'
+    | 'basic'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';

transparency_dashboard_frontend/src/@fuse/components/alert/index.ts

+export * from '@fuse/components/alert/public-api';

transparency_dashboard_frontend/src/@fuse/components/alert/public-api.ts

+export * from '@fuse/components/alert/alert.component';
+export * from '@fuse/components/alert/alert.module';
+export * from '@fuse/components/alert/alert.service';
+export * from '@fuse/components/alert/alert.types';

transparency_dashboard_frontend/src/@fuse/components/card/card.component.html

+<!-- Flippable card -->
+<ng-container *ngIf="flippable">
+
+    <!-- Front -->
+    <div class="fuse-card-front">
+        <ng-content select="[fuseCardFront]"></ng-content>
+    </div>
+
+    <!-- Back -->
+    <div class="fuse-card-back">
+        <ng-content select="[fuseCardBack]"></ng-content>
+    </div>
+
+</ng-container>
+
+<!-- Normal card -->
+<ng-container *ngIf="!flippable">
+
+    <!-- Content -->
+    <ng-content></ng-content>
+
+    <!-- Expansion -->
+    <div
+        class="fuse-card-expansion"
+        *ngIf="expanded"
+        [@expandCollapse]>
+        <ng-content select="[fuseCardExpansion]"></ng-content>
+    </div>
+
+</ng-container>

transparency_dashboard_frontend/src/@fuse/components/card/card.component.scss

+fuse-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    @apply rounded-2xl shadow bg-card;
+
+    /* Flippable */
+    &.fuse-card-flippable {
+        border-radius: 0;
+        overflow: visible;
+        transform-style: preserve-3d;
+        transition: transform 1s;
+        perspective: 600px;
+        background: transparent;
+        @apply shadow-none;
+
+        &.fuse-card-face-back {
+
+            .fuse-card-front {
+                visibility: hidden;
+                opacity: 0;
+                transform: rotateY(180deg);
+            }
+
+            .fuse-card-back {
+                visibility: visible;
+                opacity: 1;
+                transform: rotateY(360deg);
+            }
+        }
+
+        .fuse-card-front,
+        .fuse-card-back {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            z-index: 10;
+            transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
+            backface-visibility: hidden;
+            @apply rounded-2xl shadow bg-card;
+        }
+
+        .fuse-card-front {
+            position: relative;
+            opacity: 1;
+            visibility: visible;
+            transform: rotateY(0deg);
+            overflow: hidden;
+        }
+
+        .fuse-card-back {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 0;
+            visibility: hidden;
+            transform: rotateY(180deg);
+            overflow: hidden auto;
+        }
+    }
+}

transparency_dashboard_frontend/src/@fuse/components/card/card.component.ts

+import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseCardFace } from '@fuse/components/card/card.types';
+
+@Component({
+    selector     : 'fuse-card',
+    templateUrl  : './card.component.html',
+    styleUrls    : ['./card.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations,
+    exportAs     : 'fuseCard'
+})
+export class FuseCardComponent implements OnChanges
+{
+    /* eslint-disable @typescript-eslint/naming-convention */
+    static ngAcceptInputType_expanded: BooleanInput;
+    static ngAcceptInputType_flippable: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
+
+    @Input() expanded: boolean = false;
+    @Input() face: FuseCardFace = 'front';
+    @Input() flippable: boolean = false;
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-card-expanded'  : this.expanded,
+            'fuse-card-face-back' : this.flippable && this.face === 'back',
+            'fuse-card-face-front': this.flippable && this.face === 'front',
+            'fuse-card-flippable' : this.flippable
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Expanded
+        if ( 'expanded' in changes )
+        {
+            // Coerce the value to a boolean
+            this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
+        }
+
+        // Flippable
+        if ( 'flippable' in changes )
+        {
+            // Coerce the value to a boolean
+            this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
+        }
+    }
+}

transparency_dashboard_frontend/src/@fuse/components/card/card.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseCardComponent } from '@fuse/components/card/card.component';
+
+@NgModule({
+    declarations: [
+        FuseCardComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseCardComponent
+    ]
+})
+export class FuseCardModule
+{
+}