add status bar component

src/index.ts

@@ -27,3 +27,5 @@ export * from './lib/tables/listing-component.directive';
 export * from './lib/tables/models/table-column-config.model';
 export * from './lib/tables/table-column-name/table-column-name.component';
 export * from './lib/tables/table-header/table-header.component';
+export * from './lib/misc/status-bar/status-bar.component';
+export * from './lib/misc/status-bar/status-bar-config.model';

src/lib/common-ui.module.ts

@@ -15,6 +15,7 @@ import { QuickFiltersComponent } from './filtering/quick-filters/quick-filters.c
 import { TableHeaderComponent } from './tables/table-header/table-header.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { SyncWidthDirective } from './tables/sync-width.directive';
+import { StatusBarComponent } from './misc/status-bar/status-bar.component';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
@@ -24,7 +25,7 @@ const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
 
 const modules = [...matModules, TranslateModule];
 
-const components = [...buttons, ...inputs, TableColumnNameComponent, QuickFiltersComponent, TableHeaderComponent];
+const components = [...buttons, ...inputs, TableColumnNameComponent, QuickFiltersComponent, TableHeaderComponent, StatusBarComponent];
 
 const utils = [SortByPipe, HumanizePipe, SyncWidthDirective];
 

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

@@ -0,0 +1,6 @@
+export interface StatusBarConfig<T extends string> {
+    readonly length: number;
+    readonly color: T;
+    readonly label?: string;
+    readonly cssClass?: string;
+}

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

@@ -0,0 +1,11 @@
+<div [ngClass]="{ small: small }" class="rectangle-container">
+    <div *ngFor="let config of configs" [style]="'flex: ' + (config.length || 1) + ';'" class="section-wrapper">
+        <div
+            [className]="'rectangle ' + config.color"
+            [ngStyle]="{
+                'background-color': config.color.includes('#') ? config.color : ''
+            }"
+        ></div>
+        <div *ngIf="config.label" [class]="config.cssClass">{{ config.label }}</div>
+    </div>
+</div>

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

@@ -0,0 +1,44 @@
+.rectangle-container {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 12px;
+
+    &.small {
+        .rectangle {
+            width: 12px;
+            min-width: 12px;
+        }
+
+        .section-wrapper {
+            display: flex;
+            align-items: center;
+
+            > *:not(:last-child) {
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .section-wrapper:first-child {
+        .rectangle {
+            border-radius: 6px 0 0 6px;
+        }
+    }
+
+    .section-wrapper:last-child {
+        .rectangle {
+            border-radius: 0 6px 6px 0;
+        }
+
+        &:first-child {
+            .rectangle {
+                border-radius: 6px;
+            }
+        }
+    }
+
+    .rectangle {
+        height: 6px;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { StatusBarConfig } from './status-bar-config.model';
+
+@Component({
+    selector: 'iqser-status-bar',
+    templateUrl: './status-bar.component.html',
+    styleUrls: ['./status-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StatusBarComponent<T extends string> {
+    @Input() configs: readonly StatusBarConfig<T>[] = [];
+    @Input() small = false;
+}