Merge branch 'RED-3796'

src/assets/styles/_common-mixins.scss

@@ -56,3 +56,12 @@
     cursor: pointer;
     outline: inherit;
 }
+
+@mixin clear-a {
+    text-decoration: none;
+    color: initial;
+
+    &:hover {
+        color: initial;
+    }
+}

src/assets/styles/common-base-screen.scss

@@ -1,3 +1,5 @@
+@use 'common-mixins';
+
 .top-bar {
     height: 61px;
     width: 100vw;
@@ -12,6 +14,7 @@
     }
 
     .logo {
+        @include common-mixins.clear-a;
         display: flex;
         align-items: center;
     }

src/assets/styles/common-layout.scss

@@ -9,6 +9,22 @@ body {
     color: var(--iqser-accent);
     font-size: 13px;
     line-height: 16px;
+    display: flex;
+    overflow: hidden;
+}
+
+redaction-root {
+    display: flex;
+    overflow: hidden;
+
+    router-outlet + * {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        overflow: auto;
+
+        @include common-mixins.scroll-bar;
+    }
 }
 
 section.settings {
@@ -98,33 +114,33 @@ section.settings {
 .content-container {
     overflow: hidden;
     position: relative;
-    width: 100%;
+    flex: 1;
+}
 
-    .dialog {
-        border-radius: 8px;
-        margin-top: 40px;
-        margin-bottom: 70px;
-        background-color: var(--iqser-white);
-        max-width: 650px;
-        height: fit-content;
-        box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
-        position: unset;
+.dialog:not(section) {
+    border-radius: 8px;
+    margin-top: 40px;
+    margin-bottom: 70px;
+    background-color: var(--iqser-white);
+    max-width: 650px;
+    height: fit-content;
+    box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
+    position: unset;
 
-        .heading-l {
-            margin-bottom: 16px;
+    .heading-l {
+        margin-bottom: 16px;
+    }
+
+    .dialog-content {
+        display: flex;
+
+        .dialog-content-left {
+            min-width: 300px;
+            margin-right: 64px;
         }
 
-        .dialog-content {
-            display: flex;
-
-            .dialog-content-left {
-                min-width: 300px;
-                margin-right: 64px;
-            }
-
-            .link-action {
-                margin-top: 8px;
-            }
+        .link-action {
+            margin-top: 8px;
         }
     }
 }
@@ -206,14 +222,6 @@ section.settings {
     align-items: center;
 }
 
-.flex-1 {
-    flex: 1;
-}
-
-.flex-2 {
-    flex: 2;
-}
-
 .w-100 {
     min-width: 100px !important;
     width: 100px !important;

src/assets/styles/common-menu.scss

@@ -77,6 +77,7 @@
 
             .checkmark {
                 display: flex;
+                margin-left: 16px;
             }
         }
 

src/assets/styles/common-tabs.scss

@@ -2,6 +2,7 @@
 
 .red-tab {
     @include mixins.clear-btn;
+    @include mixins.clear-a;
 
     &:not(:last-child) {
         margin-right: 2px;

src/assets/styles/common-texts.scss

@@ -1,14 +1,19 @@
 @use 'common-mixins' as mixins;
 
+.text-muted {
+    opacity: 0.7;
+}
+
 .all-caps-label {
     text-transform: uppercase;
-    opacity: 0.7;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0;
     line-height: 14px;
     transition: opacity 0.2s;
 
+    @extend .text-muted;
+
     &.cancel {
         cursor: pointer;
 
@@ -71,7 +76,7 @@ pre {
 .info {
     font-size: 13px;
     line-height: 18px;
-    opacity: 0.7;
+    @extend .text-muted;
 }
 
 .page-title {
@@ -83,10 +88,10 @@ pre {
 }
 
 .small-label {
-    opacity: 0.7;
     font-size: 11px;
     line-height: 14px;
     font-weight: initial;
+    @extend .text-muted;
 }
 
 .link-action {

src/assets/styles/common-utilities.scss

@@ -24,3 +24,11 @@ $sides: (top, bottom, left, right);
         }
     }
 }
+
+/* flex-${n} */
+
+@for $n from 1 through 5 {
+    .flex-#{$n} {
+        flex: #{$n};
+    }
+}

src/lib/dialog/base-dialog.component.ts

@@ -25,7 +25,7 @@ export interface SaveOptions {
 export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
     form!: FormGroup;
     initialFormValue;
-    private readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
+    private readonly _confirmationDialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
     private readonly _dialog: MatDialog = this._injector.get(MatDialog);
 
     constructor(
@@ -89,7 +89,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     }
 
     protected _openConfirmDialog() {
-        const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid });
+        const dialogRef = this._confirmationDialogService.openDialog({ disableConfirm: !this.valid });
         return firstValueFrom(dialogRef.afterClosed());
     }
 }

src/lib/listing/models/index.ts

@@ -2,4 +2,3 @@ export * from './listable';
 export * from './entity.model';
 export * from './table-column-config.model';
 export * from './listing-modes';
-export * from './routerPath';

src/lib/listing/models/routerPath.ts

@@ -1,5 +0,0 @@
-import { ITrackable } from './trackable';
-
-export interface IRouterPath extends ITrackable {
-    readonly routerPath: string;
-}

src/lib/listing/page-header/page-header.component.html

@@ -2,7 +2,13 @@
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
     <div *ngIf="filters$ | async as filters" class="filters">
-        <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
+        <ng-content select="[slot=beforeFilters]"></ng-content>
+
+        <div
+            *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters"
+            class="text-muted"
+            translate="filters.filter-by"
+        ></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
@@ -51,15 +57,15 @@
                     *ngIf="!config.hide"
                     [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
+                    [id]="config.id"
                     [iqserHelpMode]="config.helpModeKey"
                     [tooltip]="config.label"
-                    [id]="config.id"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>
 
             <!-- Extra custom actions here -->
-            <ng-content></ng-content>
+            <ng-content select="[slot=right]"></ng-content>
 
             <iqser-circle-button
                 (action)="closeAction.emit()"

src/lib/services/stats.service.ts

@@ -4,7 +4,6 @@ import { HttpClient } from '@angular/common/http';
 import { tap } from 'rxjs/operators';
 import { HeadersConfiguration, mapEach, RequiredParam, Validate } from '../utils';
 
-/* WIP, not used */
 @Injectable()
 export abstract class StatsService<E, I = E> {
     private readonly _http = this._injector.get(HttpClient);