Progress bar

src/lib/common-ui.module.ts

@@ -9,7 +9,9 @@ import {
     ConfirmationDialogComponent,
     HiddenActionComponent,
     LogoComponent,
+    ProgressBarComponent,
     SideNavComponent,
+    SmallChipComponent,
     StatusBarComponent,
     ToastComponent,
 } from './misc';
@@ -29,7 +31,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
 import { KeycloakAngularModule } from 'keycloak-angular';
-import { SmallChipComponent } from './misc/small-chip/small-chip.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
 const modules = [
@@ -54,6 +55,7 @@ const components = [
     SideNavComponent,
     ToastComponent,
     SmallChipComponent,
+    ProgressBarComponent,
 ];
 const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
 
@@ -62,5 +64,4 @@ const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
     imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule],
     exports: [...components, ...pipes, ...modules, LogPipe],
 })
-export class CommonUiModule {
-}
+export class CommonUiModule {}

src/lib/misc/index.ts

@@ -4,4 +4,7 @@ export * from './logo/logo.component';
 export * from './side-nav/side-nav.component';
 export * from './status-bar/status-bar.component';
 export * from './status-bar/status-bar-config.model';
+export * from './progress-bar/progress-bar.component';
+export * from './progress-bar/progress-bar-config.model';
 export * from './toast/toast.component';
+export * from './small-chip/small-chip.component';

src/lib/misc/progress-bar/progress-bar-config.model.ts

@@ -0,0 +1,6 @@
+export interface ProgressBarConfigModel {
+    label: string;
+    icon: string;
+    count: number;
+    total: number;
+}

src/lib/misc/progress-bar/progress-bar.component.html

@@ -0,0 +1,8 @@
+<div class="details mb-6">
+    <span>{{ config.count }} {{ config.label | translate }}</span>
+    <mat-icon [svgIcon]="config.icon"></mat-icon>
+</div>
+
+<div class="wrapper">
+    <div [style.--count]="config.count" [style.--total]="config.total" class="indicator"></div>
+</div>

src/lib/misc/progress-bar/progress-bar.component.scss

@@ -0,0 +1,27 @@
+:host {
+    display: block;
+}
+
+.wrapper {
+    background-color: var(--iqser-grey-6);
+
+    .indicator {
+        width: calc(100% / var(--total) * var(--count));
+        background-color: var(--iqser-grey-7);
+    }
+}
+
+.wrapper, .indicator {
+    height: 8px;
+    border-radius: 6px;
+}
+
+.details {
+    display: flex;
+    justify-content: space-between;
+
+    mat-icon {
+        width: 10px;
+        height: 10px;
+    }
+}

src/lib/misc/progress-bar/progress-bar.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ProgressBarConfigModel } from './progress-bar-config.model';
+
+@Component({
+    selector: 'iqser-progress-bar [config]',
+    templateUrl: './progress-bar.component.html',
+    styleUrls: ['./progress-bar.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarComponent {
+    @Input() config!: ProgressBarConfigModel;
+}