standalone scrollbar directive

src/index.ts

@@ -15,7 +15,6 @@ export * from './lib/error';
 export * from './lib/search';
 export * from './lib/upload-file';
 export * from './lib/empty-state';
-export * from './lib/scrollbar';
 export * from './lib/caching';
 export * from './lib/users';
 export * from './lib/translations';

src/lib/common-ui.module.ts

@@ -9,7 +9,6 @@ import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
 import { IqserListingModule } from './listing';
 import { IqserFiltersModule } from './filtering';
 import { IqserInputsModule } from './inputs';
-import { IqserScrollbarModule } from './scrollbar';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
@@ -23,6 +22,7 @@ import { CircleButtonComponent, IconButtonComponent } from './buttons';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ICONS } from './utils/constants';
 import { StopPropagationDirective } from './directives';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 const matModules = [
     MatIconModule,
@@ -33,7 +33,7 @@ const matModules = [
     MatTooltipModule,
     MatProgressBarModule,
 ];
-const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, IqserScrollbarModule, HttpClientModule];
+const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, HttpClientModule];
 const components = [ConnectionStatusComponent, FullPageErrorComponent, ConfirmationDialogComponent, ToastComponent];
 
 @NgModule({
@@ -56,6 +56,7 @@ const components = [ConnectionStatusComponent, FullPageErrorComponent, Confirmat
             multi: true,
             useClass: ApiPathInterceptor,
         },
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
     ],
 })
 export class CommonUiModule {

src/lib/directives/has-scrollbar.directive.ts

@@ -2,26 +2,24 @@ import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, On
 
 @Directive({
     selector: '[iqserHasScrollbar]',
-    exportAs: 'iqserHasScrollbar',
+    standalone: true,
 })
 export class HasScrollbarDirective implements OnInit, OnChanges {
     @HostBinding('class') class = '';
 
     constructor(protected readonly _elementRef: ElementRef, protected readonly _changeDetector: ChangeDetectorRef) {}
 
-    get hasScrollbar(): boolean {
+    get hasScrollbar() {
         const element = this._elementRef?.nativeElement as HTMLElement;
         return element.clientHeight < element.scrollHeight;
     }
 
-    ngOnInit(): void {
-        setTimeout(() => {
-            this.process();
-        }, 0);
+    ngOnInit() {
+        setTimeout(() => this.process(), 0);
     }
 
     @HostListener('window:resize')
-    process(): void {
+    process() {
         const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
         if (this.class !== newClass) {
             this.class = newClass;
@@ -29,7 +27,7 @@ export class HasScrollbarDirective implements OnInit, OnChanges {
         }
     }
 
-    ngOnChanges(): void {
+    ngOnChanges() {
         this.process();
     }
 }

src/lib/directives/index.ts

@@ -1,3 +1,4 @@
 export * from './hidden-action.directive';
 export * from './stop-propagation.directive';
 export * from './prevent-default.directive';
+export * from './has-scrollbar.directive';

src/lib/inputs/inputs.module.ts

@@ -9,7 +9,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { DynamicInputComponent } from './dynamic-input/dynamic-input.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { CircleButtonComponent } from '../buttons';
 import { MatIconModule } from '@angular/material/icon';
 import { StopPropagationDirective } from '../directives';
@@ -32,6 +31,5 @@ const deleteThisWhenAllComponentsAreStandalone = [InputWithActionComponent];
         CircleButtonComponent,
         StopPropagationDirective,
     ],
-    providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
 })
 export class IqserInputsModule {}

src/lib/listing/listing.module.ts

@@ -10,7 +10,6 @@ import { ScrollButtonComponent } from './scroll-button/scroll-button.component';
 import { TableComponent } from './table/table.component';
 import { SyncWidthDirective } from './sync-width.directive';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { IqserScrollbarModule } from '../scrollbar';
 import { RouterModule } from '@angular/router';
 import { WorkflowComponent } from './workflow/workflow.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -22,6 +21,7 @@ import { ColumnHeaderComponent } from './workflow/column-header/column-header.co
 import { CircleButtonComponent, IconButtonComponent } from '../buttons';
 import { MatIconModule } from '@angular/material/icon';
 import { EmptyStateComponent } from '../empty-state';
+import { HasScrollbarDirective } from '../scrollbar';
 
 const matModules = [MatTooltipModule];
 const components = [
@@ -41,7 +41,6 @@ const modules = [
     IqserFiltersModule,
     IqserInputsModule,
     MatIconModule,
-    IqserScrollbarModule,
     ScrollingModule,
     RouterModule,
     IqserHelpModeModule,
@@ -51,6 +50,14 @@ const utils = [SyncWidthDirective];
 @NgModule({
     declarations: [...components, ...utils],
     exports: [...components, ...utils],
-    imports: [CommonModule, ...modules, ...matModules, CircleButtonComponent, IconButtonComponent, EmptyStateComponent],
+    imports: [
+        CommonModule,
+        ...modules,
+        ...matModules,
+        CircleButtonComponent,
+        IconButtonComponent,
+        EmptyStateComponent,
+        HasScrollbarDirective,
+    ],
 })
 export class IqserListingModule {}

src/lib/scrollbar/index.ts

@@ -1,2 +0,0 @@
-export * from '../scrollbar/has-scrollbar.directive';
-export * from './scrollbar.module';

src/lib/scrollbar/scrollbar.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HasScrollbarDirective } from './has-scrollbar.directive';
-
-const utils = [HasScrollbarDirective];
-
-@NgModule({
-    declarations: [...utils],
-    exports: [...utils],
-    imports: [CommonModule],
-    providers: [HasScrollbarDirective],
-})
-export class IqserScrollbarModule {}