diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index b39ab59..fdaab9c 100644 --- a/src/lib/common-ui.module.ts +++ b/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 {} diff --git a/src/lib/misc/index.ts b/src/lib/misc/index.ts index 51d631c..45bd5ec 100644 --- a/src/lib/misc/index.ts +++ b/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'; diff --git a/src/lib/misc/progress-bar/progress-bar-config.model.ts b/src/lib/misc/progress-bar/progress-bar-config.model.ts new file mode 100644 index 0000000..5723a9b --- /dev/null +++ b/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; +} diff --git a/src/lib/misc/progress-bar/progress-bar.component.html b/src/lib/misc/progress-bar/progress-bar.component.html new file mode 100644 index 0000000..bc871ed --- /dev/null +++ b/src/lib/misc/progress-bar/progress-bar.component.html @@ -0,0 +1,8 @@ +
+ {{ config.count }} {{ config.label | translate }} + +
+ +
+
+
diff --git a/src/lib/misc/progress-bar/progress-bar.component.scss b/src/lib/misc/progress-bar/progress-bar.component.scss new file mode 100644 index 0000000..826fc2f --- /dev/null +++ b/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; + } +} diff --git a/src/lib/misc/progress-bar/progress-bar.component.ts b/src/lib/misc/progress-bar/progress-bar.component.ts new file mode 100644 index 0000000..8045426 --- /dev/null +++ b/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; +}