WIP

README.md

@@ -1,10 +1,12 @@
-# common-ui
+## Installation
 
-### Setup:
+Install submodule at `libs/common-ui`.
 
-* `yarn add keycloak-angular ngx-toastr @biesbjerg/ngx-translate-extract-marker @ngx-translate/core @ngx-translate/http-loader dayjs lodash-es ngx-translate-messageformat-compiler`
-* `yarn add @types/lodash-es -D`
-* `ng add @angular/material`
+Install dependencies:
+
+-   `yarn add keycloak-angular keycloak-js ngx-toastr @biesbjerg/ngx-translate-extract-marker @ngx-translate/core @ngx-translate/http-loader dayjs lodash-es ngx-translate-messageformat-compiler`
+-   `yarn add @types/lodash-es -D`
+-   `ng add @angular/material`
 
 In `app.module.ts` add:
 
@@ -35,14 +37,15 @@ export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigS
 })
 ```
 
-Update `tsconfig.json`:
+Rename `tsconfig.json` in root directory to `tsconfig.base.json`, and add the following to the `compilerOptions`
+section:
 
 ```
 "compilerOptions": {
    ...
     "paths": {
       ...
-      "@iqser/common-ui": ["projects/common-ui/src/index.ts"]
+      "@iqser/common-ui": ["libs/common-ui/src/index.ts"]
     },
     "allowSyntheticDefaultImports": true
   },

src/lib/common-ui.module.ts

@@ -70,5 +70,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/listing/workflow/models/entity-wrapper.model.ts

@@ -19,7 +19,7 @@ export class EntityWrapper<T extends IListable> {
                 classes[key] = this._itemClasses[key](entity);
             }
         }
-        classes.item = true;
+        classes['item'] = true;
         return classes;
     }
 }

src/lib/listing/workflow/workflow.component.ts

@@ -25,7 +25,7 @@ import { WorkflowColumn } from './models/workflow-column.model';
 import { EntityWrapper } from './models/entity-wrapper.model';
 
 @Component({
-    selector: 'iqser-workflow [itemTemplate] [config]',
+    selector: 'iqser-workflow [itemTemplate] [config] [addElementIcon]',
     templateUrl: './workflow.component.html',
     styleUrls: ['./workflow.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -35,7 +35,7 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     @Input() itemTemplate!: TemplateRef<T>;
     @Input() config!: WorkflowConfig<T, K>;
     @Input() itemClasses!: Record<string, (e: T) => boolean>;
-    @Input() addElementIcon?: string;
+    @Input() addElementIcon!: string;
     @Input() addElementColumn?: K;
     @Input() noDataText?: string;
     @Input() noDataIcon?: string;

src/lib/misc/confirmation-dialog/confirmation-dialog.component.html

@@ -3,7 +3,7 @@
         {{ config.title }}
     </div>
 
-    <div *ngIf="showToast" class="inline-dialog-toast toast-error">
+    <div *ngIf="showToast && config.toastMessage" class="inline-dialog-toast toast-error">
         <div [translate]="config.toastMessage"></div>
         <a (click)="showToast = false" class="toast-close-button">
             <mat-icon svgIcon="iqser:close"></mat-icon>
@@ -34,8 +34,8 @@
             (click)="confirm(ConfirmOptions.CONFIRM)"
             [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
             color="primary"
-            mat-flat-button
             id="confirm"
+            mat-flat-button
         >
             {{ config.confirmationText }}
         </button>

src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts

@@ -19,7 +19,7 @@ export enum ConfirmOptions {
 interface CheckBox {
     value: boolean;
     label: string;
-    extraContent?: TemplateRef<unknown>;
+    extraContent: TemplateRef<unknown> | null;
     extraContentData?: Record<string, unknown>;
 }
 
@@ -35,7 +35,7 @@ export class ConfirmationDialogInput {
     disableConfirm?: boolean;
     denyText?: string;
     translateParams?: Record<string, unknown>;
-    checkboxes?: CheckBox[];
+    checkboxes: CheckBox[];
     toastMessage?: string;
 
     constructor(options?: ConfirmationDialogInput) {

src/lib/utils/pruning-translation-loader.ts

@@ -8,7 +8,8 @@ interface T {
 }
 
 export class PruningTranslationLoader implements TranslateLoader {
-    constructor(private _http: HttpClient, private _prefix: string, private _suffix: string) {}
+    constructor(private _http: HttpClient, private _prefix: string, private _suffix: string) {
+    }
 
     getTranslation(lang: string): Observable<T> {
         return this._http.get(`${this._prefix}${lang}${this._suffix}`).pipe(map(result => this._process(result as T)));