From 0057b3c4b0ac32d937240bc9a5964478af7c6e68 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Sun, 19 Mar 2023 10:09:06 +0200 Subject: [PATCH] standalone scrollbar directive --- src/index.ts | 1 - src/lib/common-ui.module.ts | 5 +++-- .../has-scrollbar.directive.ts | 14 ++++++-------- src/lib/directives/index.ts | 1 + src/lib/inputs/inputs.module.ts | 2 -- src/lib/listing/listing.module.ts | 13 ++++++++++--- src/lib/scrollbar/index.ts | 2 -- src/lib/scrollbar/scrollbar.module.ts | 13 ------------- 8 files changed, 20 insertions(+), 31 deletions(-) rename src/lib/{scrollbar => directives}/has-scrollbar.directive.ts (79%) delete mode 100644 src/lib/scrollbar/index.ts delete mode 100644 src/lib/scrollbar/scrollbar.module.ts diff --git a/src/index.ts b/src/index.ts index 5e724a7..c088530 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index 50b87e3..d865d23 100644 --- a/src/lib/common-ui.module.ts +++ b/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 { diff --git a/src/lib/scrollbar/has-scrollbar.directive.ts b/src/lib/directives/has-scrollbar.directive.ts similarity index 79% rename from src/lib/scrollbar/has-scrollbar.directive.ts rename to src/lib/directives/has-scrollbar.directive.ts index bf66c6f..ce8150b 100644 --- a/src/lib/scrollbar/has-scrollbar.directive.ts +++ b/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(); } } diff --git a/src/lib/directives/index.ts b/src/lib/directives/index.ts index b8bc41b..635ff2f 100644 --- a/src/lib/directives/index.ts +++ b/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'; diff --git a/src/lib/inputs/inputs.module.ts b/src/lib/inputs/inputs.module.ts index fa406dd..3e71783 100644 --- a/src/lib/inputs/inputs.module.ts +++ b/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 {} diff --git a/src/lib/listing/listing.module.ts b/src/lib/listing/listing.module.ts index 5a848ab..dbac12b 100644 --- a/src/lib/listing/listing.module.ts +++ b/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 {} diff --git a/src/lib/scrollbar/index.ts b/src/lib/scrollbar/index.ts deleted file mode 100644 index 19629b5..0000000 --- a/src/lib/scrollbar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from '../scrollbar/has-scrollbar.directive'; -export * from './scrollbar.module'; diff --git a/src/lib/scrollbar/scrollbar.module.ts b/src/lib/scrollbar/scrollbar.module.ts deleted file mode 100644 index e9e9d0b..0000000 --- a/src/lib/scrollbar/scrollbar.module.ts +++ /dev/null @@ -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 {}