add upload file, loading & shared modules

src/index.ts

@@ -10,10 +10,11 @@ export * from './lib/inputs';
 export * from './lib/utils';
 export * from './lib/sorting';
 export * from './lib/services';
-export * from './lib/misc';
+export * from './lib/shared';
 export * from './lib/loading';
 export * from './lib/error';
 export * from './lib/search';
+export * from './lib/upload-file';
 export * from './lib/empty-states';
 export * from './lib/scrollbar';
 export * from './lib/caching';

src/lib/common-ui.module.ts

@@ -1,20 +1,11 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { SortByPipe } from './sorting';
 import { CommonUiOptions, IqserAppConfig, ModuleWithOptions } from './utils';
-import {
-    HiddenActionComponent,
-    LogoComponent,
-    ProgressBarComponent,
-    SideNavComponent,
-    SmallChipComponent,
-    StatusBarComponent,
-    ToastComponent,
-} from './misc';
-import { FullPageLoadingIndicatorComponent, ProgressLoadingComponent } from './loading';
+import { HiddenActionComponent, LogoComponent, ToastComponent } from './shared';
 import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
 import { IqserListingModule } from './listing';
 import { IqserFiltersModule } from './filtering';
@@ -27,8 +18,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { UploadFileComponent } from './upload-file/upload-file.component';
-import { DragDropFileUploadDirective } from './upload-file/drag-drop-file-upload.directive';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ConfirmationDialogComponent } from './dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -56,20 +45,12 @@ const modules = [
     HttpClientModule,
 ];
 const components = [
-    StatusBarComponent,
-    FullPageLoadingIndicatorComponent,
-    ProgressLoadingComponent,
     ConnectionStatusComponent,
     FullPageErrorComponent,
     LogoComponent,
     HiddenActionComponent,
     ConfirmationDialogComponent,
-    SideNavComponent,
     ToastComponent,
-    SmallChipComponent,
-    ProgressBarComponent,
-    UploadFileComponent,
-    DragDropFileUploadDirective,
 ];
 
 const pipes = [SortByPipe];
@@ -87,6 +68,13 @@ const pipes = [SortByPipe];
     ],
 })
 export class CommonUiModule extends ModuleWithOptions {
+    constructor(@Optional() @SkipSelf() parentModule?: CommonUiModule) {
+        super();
+        if (parentModule) {
+            throw new Error('CommonUiModule is already loaded. Import it in the AppModule only!');
+        }
+    }
+
     static forRoot<
         UserPreference extends IqserUserPreferenceService,
         Config extends IqserConfigService<AppConfig>,

src/lib/loading/index.ts

@@ -1,3 +1,6 @@
 export * from './loading.service';
 export * from './full-page-loading-indicator/full-page-loading-indicator.component';
 export * from './progress-loading/progress-loading.component';
+export * from './loading.module';
+export * from './progress-bar/progress-bar-config.model';
+export * from './progress-bar/progress-bar.component';

src/lib/loading/loading.module.ts

@@ -0,0 +1,26 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FullPageLoadingIndicatorComponent } from './full-page-loading-indicator/full-page-loading-indicator.component';
+import { ProgressLoadingComponent } from './progress-loading/progress-loading.component';
+import { LoadingService } from './loading.service';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { ProgressBarComponent } from './progress-bar/progress-bar.component';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+
+const components = [FullPageLoadingIndicatorComponent, ProgressLoadingComponent, ProgressBarComponent];
+
+@NgModule({
+    declarations: components,
+    exports: components,
+    imports: [MatProgressSpinnerModule, CommonModule, MatProgressBarModule, MatIconModule, TranslateModule],
+})
+export class IqserLoadingModule {
+    static forRoot(): ModuleWithProviders<IqserLoadingModule> {
+        return {
+            ngModule: IqserLoadingModule,
+            providers: [LoadingService],
+        };
+    }
+}

src/lib/loading/loading.service.ts

@@ -10,7 +10,7 @@ export interface ILoadingConfig {
     readonly remainingTime?: string;
 }
 
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class LoadingService {
     readonly #loadingEvent$ = new BehaviorSubject<ILoadingConfig | undefined>(undefined);
     readonly isLoading$ = this.#loadingEvent$.asObservable();

src/lib/shared/index.ts

@@ -3,7 +3,6 @@ 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';
+export * from './shared.module';

src/lib/shared/shared.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { SideNavComponent, SmallChipComponent, StatusBarComponent } from './index';
+import { CommonModule } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+const components = [SmallChipComponent, StatusBarComponent, SideNavComponent];
+
+@NgModule({
+    declarations: [...components],
+    exports: [...components],
+    imports: [CommonModule, MatTooltipModule],
+})
+export class IqserSharedModule {}

src/lib/shared/small-chip/small-chip.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: 'redaction-small-chip [color]',
+    selector: 'iqser-small-chip [color]',
     templateUrl: './small-chip.component.html',
     styleUrls: ['./small-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -6,6 +6,7 @@
                 'background-color': config.color.includes('#') ? config.color : ''
             }"
         ></div>
+
         <div *ngIf="config.label" [class]="config.cssClass + ' clamp-1'" [matTooltip]="config.label" matTooltipPosition="above">
             {{ config.label }}
         </div>

src/lib/upload-file/index.ts

@@ -0,0 +1,3 @@
+export * from './drag-drop-file-upload.directive';
+export * from './upload-file.component';
+export * from './upload-file.module';

src/lib/upload-file/upload-file.component.html

@@ -1,13 +1,16 @@
 <div>
-    <div class="upload-area" *ngIf="!file" (click)="triggerAttachFile()" iqserDragDropFileUpload (fileDropped)="attachFile($event)">
+    <div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" *ngIf="!file" class="upload-area" iqserDragDropFileUpload>
         <mat-icon svgIcon="iqser:upload"></mat-icon>
+
         <div translate="import-redactions-dialog.upload-area-text"></div>
     </div>
-    <div class="file-area" *ngIf="file">
+    <div *ngIf="file" class="file-area">
         <mat-icon svgIcon="iqser:document"></mat-icon>
+
         <p>{{ file.name }}</p>
-        <mat-icon *ngIf="!readonly" svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
+
+        <mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
     </div>
 
-    <input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" [accept]="accept" />
+    <input #attachFileInput (change)="attachFile($event)" [accept]="accept" [hidden]="true" class="file-upload-input" type="file" />
 </div>

src/lib/upload-file/upload-file.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { UploadFileComponent } from './upload-file.component';
+import { DragDropFileUploadDirective } from './drag-drop-file-upload.directive';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+
+const components = [UploadFileComponent, DragDropFileUploadDirective];
+
+@NgModule({
+    declarations: [...components],
+    exports: [...components],
+    imports: [MatIconModule, CommonModule],
+})
+export class IqserUploadFileModule {}