angular-overflow-indicator 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# angular-overflow-indicator
+
+This library includes a simple and performant component that displays a given button if the content of the component overflows.
+
+## Features
+
+### Button that displays/hides accordingly
+
+![Overflow indicator example](./example-overflow-indicator.gif)
+
+### Observe the scroll state
+
+![Overflow indicator example](./example-scroll-state.gif)
+
+
+## Basic Usage
+
+**Step 1: Install the package**
+
+```console
+yarn add angular-overflow-indicator
+```
+or
+```console
+npm install angular-overflow-indicator
+```
+
+**Step 2: Install the package**
+
+```ts
+import { ScrollViewWithIndicatorComponent } from 'angular-overflow-indicator';
+```
+
+**Step 3: Create a container with a maximum/fixed size**
+
+```html
+<div [style]="{ height: '300px', width: '500px' }">
+ // ...
+</div>
+```
+
+**Step 4: Add a template that includes the indicator-button**
+
+```html
+<div [style]="{ height: '300px', width: '500px' }">
+  <ng-template #customButton>
+    <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
+  </ng-template>
+  
+  // ...
+</div>
+```
+
+**Step 5: Add the overflow-indicator-component with a list larger than the outer container and pass the template reference of the indicator-button**
+
+```html
+<div [style]="{ height: '300px', width: '500px' }">
+  <ng-template #customButton>
+    <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
+  </ng-template>
+
+  <ng-scroll-view-with-indicator #view [indicatorButton]="customButton">
+    <ul>
+      <li *ngFor="let item of items()">List item {{ item }}</li>
+    </ul>
+  </ng-scroll-view-with-indicator>
+</div>
+```
+
+

package/esm2022/angular-overflow-indicator.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9hbmd1bGFyLW92ZXJmbG93LWluZGljYXRvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './lib/scroll-view-with-indicator';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtDQUFrQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3InO1xuIl19

package/esm2022/lib/default-indicator-button/default-indicator-button.component.mjs

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DefaultIndicatorButtonComponent {
+    constructor() {
+        this.buttonClicked = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
+    <button class="default-button" (click)="buttonClicked.emit()">
+      <span>There is more content</span>
+    </button>
+  `, isInline: true, styles: ["button{border:none;font-size:.8rem;font-weight:500;padding:.4rem .6rem;background-color:#444;color:#fff;border-radius:1rem;margin-bottom:.4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
+    <button class="default-button" (click)="buttonClicked.emit()">
+      <span>There is more content</span>
+    </button>
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["button{border:none;font-size:.8rem;font-weight:500;padding:.4rem .6rem;background-color:#444;color:#fff;border-radius:1rem;margin-bottom:.4rem}\n"] }]
+        }], propDecorators: { buttonClicked: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3Ivc3JjL2xpYi9kZWZhdWx0LWluZGljYXRvci1idXR0b24vZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBd0J6RixNQUFNLE9BQU8sK0JBQStCO0lBdEI1QztRQXVCWSxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7S0FDOUM7OEdBRlksK0JBQStCO2tHQUEvQiwrQkFBK0IsZ0pBcEJoQzs7OztHQUlUOzsyRkFnQlUsK0JBQStCO2tCQXRCM0MsU0FBUzsrQkFDRSx5Q0FBeUMsWUFDekM7Ozs7R0FJVCxjQWFXLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTTs4QkFHckMsYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25nLXNjcm9sbC12aWV3LWRlZmF1bHQtaW5kaWNhdG9yLWJ1dHRvbicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGJ1dHRvbiBjbGFzcz1cImRlZmF1bHQtYnV0dG9uXCIgKGNsaWNrKT1cImJ1dHRvbkNsaWNrZWQuZW1pdCgpXCI+XG4gICAgICA8c3Bhbj5UaGVyZSBpcyBtb3JlIGNvbnRlbnQ8L3NwYW4+XG4gICAgPC9idXR0b24+XG4gIGAsXG4gIHN0eWxlczogYFxuICAgIGJ1dHRvbiB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBmb250LXNpemU6IDAuOHJlbTtcbiAgICAgIGZvbnQtd2VpZ2h0OiA1MDA7XG4gICAgICBwYWRkaW5nOiAwLjRyZW0gMC42cmVtO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDQ0NDtcbiAgICAgIGNvbG9yOiAjZmZmZmZmO1xuICAgICAgYm9yZGVyLXJhZGl1czogMXJlbTtcbiAgICAgIG1hcmdpbi1ib3R0b206IDAuNHJlbTtcbiAgICB9XG4gIGAsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIERlZmF1bHRJbmRpY2F0b3JCdXR0b25Db21wb25lbnQge1xuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbn1cbiJdfQ==

package/esm2022/lib/default-indicator-button/index.mjs

@@ -0,0 +1,2 @@
+export { DefaultIndicatorButtonComponent } from './default-indicator-button.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9saWIvZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgRGVmYXVsdEluZGljYXRvckJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudCc7XG4iXX0=

package/esm2022/lib/scroll-view-with-indicator/index.mjs

@@ -0,0 +1,2 @@
+export { ScrollViewWithIndicatorComponent } from './scroll-view-with-indicator.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9saWIvc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sd0NBQXdDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBTY3JvbGxWaWV3V2l0aEluZGljYXRvckNvbXBvbmVudCB9IGZyb20gJy4vc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50JztcbiJdfQ==

package/esm2022/lib/scroll-view-with-indicator/scroll-view-with-indicator.component.mjs

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, inject, Input, Output, signal, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DefaultIndicatorButtonComponent } from '../default-indicator-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class ScrollViewWithIndicatorComponent {
+    constructor() {
+        this.indicatorButton = null;
+        this.scrollState = new EventEmitter();
+        this.isOverflowing = signal(false);
+        this.isAtBottom = signal(false);
+        this.cdr = inject(ChangeDetectorRef);
+        this.resizeObserver = null;
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateOverflowState();
+            this.updateScrollState();
+            this.cdr.detectChanges();
+        });
+        this.resizeObserver.observe(this.contentWrapper.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Manually scrolls the content-container to the bottom
+     */
+    scrollToBottom() {
+        this.contentWrapper.nativeElement.scrollTop = this.contentWrapper.nativeElement.scrollHeight;
+    }
+    /**
+     * If the user scrolled all the way to the end of the container,
+     * the indicator button can be hidden
+     */
+    onScroll() {
+        this.updateScrollState();
+    }
+    updateOverflowState() {
+        const element = this.contentWrapper.nativeElement;
+        const maxScroll = element.scrollHeight - element.offsetHeight;
+        this.isOverflowing.set(element.offsetHeight < element.scrollHeight && element.scrollTop < maxScroll);
+    }
+    updateScrollState() {
+        const element = this.contentWrapper.nativeElement;
+        const maxScroll = element.scrollHeight - element.offsetHeight;
+        this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);
+        this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: ScrollViewWithIndicatorComponent, isStandalone: true, selector: "ng-scroll-view-with-indicator", inputs: { indicatorButton: "indicatorButton" }, outputs: { scrollState: "scrollState" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n  <ng-container *ngIf=\"indicatorButton; else defaultButton\" [ngTemplateOutlet]=\"indicatorButton\"></ng-container>\n\n  <ng-template #defaultButton>\n    <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\">\n    </ng-scroll-view-default-indicator-button>\n  </ng-template>\n</div>\n", styles: [":host{height:100%;max-height:100%;position:relative;min-height:0;display:flex}.content-wrapper{flex:1;max-height:100%;min-height:0;overflow-y:auto;box-sizing:border-box}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DefaultIndicatorButtonComponent, selector: "ng-scroll-view-default-indicator-button", outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-scroll-view-with-indicator', imports: [CommonModule, DefaultIndicatorButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n  <ng-container *ngIf=\"indicatorButton; else defaultButton\" [ngTemplateOutlet]=\"indicatorButton\"></ng-container>\n\n  <ng-template #defaultButton>\n    <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\">\n    </ng-scroll-view-default-indicator-button>\n  </ng-template>\n</div>\n", styles: [":host{height:100%;max-height:100%;position:relative;min-height:0;display:flex}.content-wrapper{flex:1;max-height:100%;min-height:0;overflow-y:auto;box-sizing:border-box}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { contentWrapper: [{
+                type: ViewChild,
+                args: ['contentWrapper']
+            }], indicatorButton: [{
+                type: Input,
+                args: [{ required: true }]
+            }], scrollState: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyLW92ZXJmbG93LWluZGljYXRvci9zcmMvbGliL3Njcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yL3Njcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3Ivc3JjL2xpYi9zY3JvbGwtdmlldy13aXRoLWluZGljYXRvci9zY3JvbGwtdmlldy13aXRoLWluZGljYXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUVMLE1BQU0sRUFDTixNQUFNLEVBRU4sU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsK0JBQStCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7O0FBVTlFLE1BQU0sT0FBTyxnQ0FBZ0M7SUFSN0M7UUFVNkIsb0JBQWUsR0FBZ0MsSUFBSSxDQUFDO1FBQ3JFLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUxQyxrQkFBYSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QixlQUFVLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRW5CLFFBQUcsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUN6QyxtQkFBYyxHQUEwQixJQUFJLENBQUM7S0EyQ3REO0lBekNDLGVBQWU7UUFDYixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtZQUM1QyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztZQUN6QixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxjQUFjLEVBQUUsVUFBVSxFQUFFLENBQUM7SUFDcEMsQ0FBQztJQUVEOztPQUVHO0lBQ0gsY0FBYztRQUNaLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7SUFDL0YsQ0FBQztJQUVEOzs7T0FHRztJQUNILFFBQVE7UUFDTixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRU8sbUJBQW1CO1FBQ3pCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDO1FBQ2xELE1BQU0sU0FBUyxHQUFHLE9BQU8sQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDLFlBQVksQ0FBQztRQUM5RCxJQUFJLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsWUFBWSxHQUFHLE9BQU8sQ0FBQyxZQUFZLElBQUksT0FBTyxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUMsQ0FBQztJQUN2RyxDQUFDO0lBRU8saUJBQWlCO1FBQ3ZCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDO1FBQ2xELE1BQU0sU0FBUyxHQUFHLE9BQU8sQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDLFlBQVksQ0FBQztRQUM5RCxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxTQUFTLENBQUMsQ0FBQztRQUN4RCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsR0FBRyxHQUFHLFNBQVMsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakYsQ0FBQzs4R0FuRFUsZ0NBQWdDO2tHQUFoQyxnQ0FBZ0Msb1NDMUI3QyxxZkFZQSxvVURVWSxZQUFZLDBTQUFFLCtCQUErQjs7MkZBSTVDLGdDQUFnQztrQkFSNUMsU0FBUzsrQkFDRSwrQkFBK0IsV0FHaEMsQ0FBQyxZQUFZLEVBQUUsK0JBQStCLENBQUMsY0FDNUMsSUFBSSxtQkFDQyx1QkFBdUIsQ0FBQyxNQUFNOzhCQUdsQixjQUFjO3NCQUExQyxTQUFTO3VCQUFDLGdCQUFnQjtnQkFDQSxlQUFlO3NCQUF6QyxLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFDZixXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgaW5qZWN0LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIHNpZ25hbCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBEZWZhdWx0SW5kaWNhdG9yQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmctc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3InLFxuICB0ZW1wbGF0ZVVybDogJy4vc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zY3JvbGwtdmlldy13aXRoLWluZGljYXRvci5jb21wb25lbnQuc2NzcyddLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBEZWZhdWx0SW5kaWNhdG9yQnV0dG9uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgU2Nyb2xsVmlld1dpdGhJbmRpY2F0b3JDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBAVmlld0NoaWxkKCdjb250ZW50V3JhcHBlcicpIGNvbnRlbnRXcmFwcGVyITogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIGluZGljYXRvckJ1dHRvbjogVGVtcGxhdGVSZWY8dW5rbm93bj4gfCBudWxsID0gbnVsbDtcbiAgQE91dHB1dCgpIHNjcm9sbFN0YXRlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgcmVhZG9ubHkgaXNPdmVyZmxvd2luZyA9IHNpZ25hbChmYWxzZSk7XG4gIHJlYWRvbmx5IGlzQXRCb3R0b20gPSBzaWduYWwoZmFsc2UpO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgY2RyID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcbiAgcHJpdmF0ZSByZXNpemVPYnNlcnZlcjogUmVzaXplT2JzZXJ2ZXIgfCBudWxsID0gbnVsbDtcblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcigoKSA9PiB7XG4gICAgICB0aGlzLnVwZGF0ZU92ZXJmbG93U3RhdGUoKTtcbiAgICAgIHRoaXMudXBkYXRlU2Nyb2xsU3RhdGUoKTtcbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICB9KTtcblxuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmNvbnRlbnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIE1hbnVhbGx5IHNjcm9sbHMgdGhlIGNvbnRlbnQtY29udGFpbmVyIHRvIHRoZSBib3R0b21cbiAgICovXG4gIHNjcm9sbFRvQm90dG9tKCk6IHZvaWQge1xuICAgIHRoaXMuY29udGVudFdyYXBwZXIubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLmNvbnRlbnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xuICB9XG5cbiAgLyoqXG4gICAqIElmIHRoZSB1c2VyIHNjcm9sbGVkIGFsbCB0aGUgd2F5IHRvIHRoZSBlbmQgb2YgdGhlIGNvbnRhaW5lcixcbiAgICogdGhlIGluZGljYXRvciBidXR0b24gY2FuIGJlIGhpZGRlblxuICAgKi9cbiAgb25TY3JvbGwoKTogdm9pZCB7XG4gICAgdGhpcy51cGRhdGVTY3JvbGxTdGF0ZSgpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVPdmVyZmxvd1N0YXRlKCk6IHZvaWQge1xuICAgIGNvbnN0IGVsZW1lbnQgPSB0aGlzLmNvbnRlbnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQ7XG4gICAgY29uc3QgbWF4U2Nyb2xsID0gZWxlbWVudC5zY3JvbGxIZWlnaHQgLSBlbGVtZW50Lm9mZnNldEhlaWdodDtcbiAgICB0aGlzLmlzT3ZlcmZsb3dpbmcuc2V0KGVsZW1lbnQub2Zmc2V0SGVpZ2h0IDwgZWxlbWVudC5zY3JvbGxIZWlnaHQgJiYgZWxlbWVudC5zY3JvbGxUb3AgPCBtYXhTY3JvbGwpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVTY3JvbGxTdGF0ZSgpOiB2b2lkIHtcbiAgICBjb25zdCBlbGVtZW50ID0gdGhpcy5jb250ZW50V3JhcHBlci5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IG1heFNjcm9sbCA9IGVsZW1lbnQuc2Nyb2xsSGVpZ2h0IC0gZWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgdGhpcy5pc0F0Qm90dG9tLnNldChlbGVtZW50LnNjcm9sbFRvcCArIDEgPj0gbWF4U2Nyb2xsKTtcbiAgICB0aGlzLnNjcm9sbFN0YXRlLmVtaXQoTWF0aC5yb3VuZCgoMTAwIC8gbWF4U2Nyb2xsKSAqIChlbGVtZW50LnNjcm9sbFRvcCArIDEpKSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb250ZW50LXdyYXBwZXJcIiAjY29udGVudFdyYXBwZXIgKHNjcm9sbCk9XCJvblNjcm9sbCgpXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwic2Nyb2xsLWluZGljYXRvclwiICpuZ0lmPVwiaXNPdmVyZmxvd2luZygpICYmICFpc0F0Qm90dG9tKClcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImluZGljYXRvckJ1dHRvbjsgZWxzZSBkZWZhdWx0QnV0dG9uXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW5kaWNhdG9yQnV0dG9uXCI+PC9uZy1jb250YWluZXI+XG5cbiAgPG5nLXRlbXBsYXRlICNkZWZhdWx0QnV0dG9uPlxuICAgIDxuZy1zY3JvbGwtdmlldy1kZWZhdWx0LWluZGljYXRvci1idXR0b24gKGJ1dHRvbkNsaWNrZWQpPVwic2Nyb2xsVG9Cb3R0b20oKVwiPlxuICAgIDwvbmctc2Nyb2xsLXZpZXctZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uPlxuICA8L25nLXRlbXBsYXRlPlxuPC9kaXY+XG4iXX0=

package/fesm2022/angular-overflow-indicator.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Output, signal, ChangeDetectorRef, inject, ViewChild, Input } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class DefaultIndicatorButtonComponent {
+    constructor() {
+        this.buttonClicked = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
+    <button class="default-button" (click)="buttonClicked.emit()">
+      <span>There is more content</span>
+    </button>
+  `, isInline: true, styles: ["button{border:none;font-size:.8rem;font-weight:500;padding:.4rem .6rem;background-color:#444;color:#fff;border-radius:1rem;margin-bottom:.4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
+    <button class="default-button" (click)="buttonClicked.emit()">
+      <span>There is more content</span>
+    </button>
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["button{border:none;font-size:.8rem;font-weight:500;padding:.4rem .6rem;background-color:#444;color:#fff;border-radius:1rem;margin-bottom:.4rem}\n"] }]
+        }], propDecorators: { buttonClicked: [{
+                type: Output
+            }] } });
+
+class ScrollViewWithIndicatorComponent {
+    constructor() {
+        this.indicatorButton = null;
+        this.scrollState = new EventEmitter();
+        this.isOverflowing = signal(false);
+        this.isAtBottom = signal(false);
+        this.cdr = inject(ChangeDetectorRef);
+        this.resizeObserver = null;
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateOverflowState();
+            this.updateScrollState();
+            this.cdr.detectChanges();
+        });
+        this.resizeObserver.observe(this.contentWrapper.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Manually scrolls the content-container to the bottom
+     */
+    scrollToBottom() {
+        this.contentWrapper.nativeElement.scrollTop = this.contentWrapper.nativeElement.scrollHeight;
+    }
+    /**
+     * If the user scrolled all the way to the end of the container,
+     * the indicator button can be hidden
+     */
+    onScroll() {
+        this.updateScrollState();
+    }
+    updateOverflowState() {
+        const element = this.contentWrapper.nativeElement;
+        const maxScroll = element.scrollHeight - element.offsetHeight;
+        this.isOverflowing.set(element.offsetHeight < element.scrollHeight && element.scrollTop < maxScroll);
+    }
+    updateScrollState() {
+        const element = this.contentWrapper.nativeElement;
+        const maxScroll = element.scrollHeight - element.offsetHeight;
+        this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);
+        this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: ScrollViewWithIndicatorComponent, isStandalone: true, selector: "ng-scroll-view-with-indicator", inputs: { indicatorButton: "indicatorButton" }, outputs: { scrollState: "scrollState" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n  <ng-container *ngIf=\"indicatorButton; else defaultButton\" [ngTemplateOutlet]=\"indicatorButton\"></ng-container>\n\n  <ng-template #defaultButton>\n    <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\">\n    </ng-scroll-view-default-indicator-button>\n  </ng-template>\n</div>\n", styles: [":host{height:100%;max-height:100%;position:relative;min-height:0;display:flex}.content-wrapper{flex:1;max-height:100%;min-height:0;overflow-y:auto;box-sizing:border-box}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DefaultIndicatorButtonComponent, selector: "ng-scroll-view-default-indicator-button", outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-scroll-view-with-indicator', imports: [CommonModule, DefaultIndicatorButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n  <ng-container *ngIf=\"indicatorButton; else defaultButton\" [ngTemplateOutlet]=\"indicatorButton\"></ng-container>\n\n  <ng-template #defaultButton>\n    <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\">\n    </ng-scroll-view-default-indicator-button>\n  </ng-template>\n</div>\n", styles: [":host{height:100%;max-height:100%;position:relative;min-height:0;display:flex}.content-wrapper{flex:1;max-height:100%;min-height:0;overflow-y:auto;box-sizing:border-box}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { contentWrapper: [{
+                type: ViewChild,
+                args: ['contentWrapper']
+            }], indicatorButton: [{
+                type: Input,
+                args: [{ required: true }]
+            }], scrollState: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ScrollViewWithIndicatorComponent };
+//# sourceMappingURL=angular-overflow-indicator.mjs.map

package/fesm2022/angular-overflow-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-overflow-indicator.mjs","sources":["../../../../libs/angular-overflow-indicator/src/lib/default-indicator-button/default-indicator-button.component.ts","../../../../libs/angular-overflow-indicator/src/lib/scroll-view-with-indicator/scroll-view-with-indicator.component.ts","../../../../libs/angular-overflow-indicator/src/lib/scroll-view-with-indicator/scroll-view-with-indicator.component.html","../../../../libs/angular-overflow-indicator/src/angular-overflow-indicator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';\n\n@Component({\n  selector: 'ng-scroll-view-default-indicator-button',\n  template: `\n    <button class=\"default-button\" (click)=\"buttonClicked.emit()\">\n      <span>There is more content</span>\n    </button>\n  `,\n  styles: `\n    button {\n      border: none;\n      font-size: 0.8rem;\n      font-weight: 500;\n      padding: 0.4rem 0.6rem;\n      background-color: #444444;\n      color: #ffffff;\n      border-radius: 1rem;\n      margin-bottom: 0.4rem;\n    }\n  `,\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DefaultIndicatorButtonComponent {\n  @Output() buttonClicked = new EventEmitter();\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  inject,\n  Input,\n  OnDestroy,\n  Output,\n  signal,\n  TemplateRef,\n  ViewChild\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DefaultIndicatorButtonComponent } from '../default-indicator-button';\n\n@Component({\n  selector: 'ng-scroll-view-with-indicator',\n  templateUrl: './scroll-view-with-indicator.component.html',\n  styleUrls: ['./scroll-view-with-indicator.component.scss'],\n  imports: [CommonModule, DefaultIndicatorButtonComponent],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ScrollViewWithIndicatorComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('contentWrapper') contentWrapper!: ElementRef<HTMLDivElement>;\n  @Input({ required: true }) indicatorButton: TemplateRef<unknown> | null = null;\n  @Output() scrollState = new EventEmitter<number>();\n\n  readonly isOverflowing = signal(false);\n  readonly isAtBottom = signal(false);\n\n  private readonly cdr = inject(ChangeDetectorRef);\n  private resizeObserver: ResizeObserver | null = null;\n\n  ngAfterViewInit(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateOverflowState();\n      this.updateScrollState();\n      this.cdr.detectChanges();\n    });\n\n    this.resizeObserver.observe(this.contentWrapper.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Manually scrolls the content-container to the bottom\n   */\n  scrollToBottom(): void {\n    this.contentWrapper.nativeElement.scrollTop = this.contentWrapper.nativeElement.scrollHeight;\n  }\n\n  /**\n   * If the user scrolled all the way to the end of the container,\n   * the indicator button can be hidden\n   */\n  onScroll(): void {\n    this.updateScrollState();\n  }\n\n  private updateOverflowState(): void {\n    const element = this.contentWrapper.nativeElement;\n    const maxScroll = element.scrollHeight - element.offsetHeight;\n    this.isOverflowing.set(element.offsetHeight < element.scrollHeight && element.scrollTop < maxScroll);\n  }\n\n  private updateScrollState(): void {\n    const element = this.contentWrapper.nativeElement;\n    const maxScroll = element.scrollHeight - element.offsetHeight;\n    this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);\n    this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));\n  }\n}\n","<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n  <ng-container *ngIf=\"indicatorButton; else defaultButton\" [ngTemplateOutlet]=\"indicatorButton\"></ng-container>\n\n  <ng-template #defaultButton>\n    <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\">\n    </ng-scroll-view-default-indicator-button>\n  </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/scroll-view-with-indicator';

package/lib/default-indicator-button/default-indicator-button.component.d.ts

@@ -0,0 +1,7 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DefaultIndicatorButtonComponent {
+    buttonClicked: EventEmitter<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultIndicatorButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultIndicatorButtonComponent, "ng-scroll-view-default-indicator-button", never, {}, { "buttonClicked": "buttonClicked"; }, never, never, true, never>;
+}

package/lib/default-indicator-button/index.d.ts

@@ -0,0 +1 @@
+export { DefaultIndicatorButtonComponent } from './default-indicator-button.component';

package/lib/scroll-view-with-indicator/index.d.ts

@@ -0,0 +1 @@
+export { ScrollViewWithIndicatorComponent } from './scroll-view-with-indicator.component';

package/lib/scroll-view-with-indicator/scroll-view-with-indicator.component.d.ts

@@ -0,0 +1,26 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ScrollViewWithIndicatorComponent implements AfterViewInit, OnDestroy {
+    contentWrapper: ElementRef<HTMLDivElement>;
+    indicatorButton: TemplateRef<unknown> | null;
+    scrollState: EventEmitter<number>;
+    readonly isOverflowing: import("@angular/core").WritableSignal<boolean>;
+    readonly isAtBottom: import("@angular/core").WritableSignal<boolean>;
+    private readonly cdr;
+    private resizeObserver;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Manually scrolls the content-container to the bottom
+     */
+    scrollToBottom(): void;
+    /**
+     * If the user scrolled all the way to the end of the container,
+     * the indicator button can be hidden
+     */
+    onScroll(): void;
+    private updateOverflowState;
+    private updateScrollState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewWithIndicatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewWithIndicatorComponent, "ng-scroll-view-with-indicator", never, { "indicatorButton": { "alias": "indicatorButton"; "required": true; }; }, { "scrollState": "scrollState"; }, never, ["*"], true, never>;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular-overflow-indicator",
+  "version": "0.1.0",
+  "description": "A simple and performant component that displays a given button if the content of the component overflows",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hansireit/angular-lib",
+    "directory": "libs/angular-overflow-indicator"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "angular",
+    "overflow",
+    "indicator",
+    "button",
+    "scroll"
+  ],
+  "module": "fesm2022/angular-overflow-indicator.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/angular-overflow-indicator.mjs",
+      "esm": "./esm2022/angular-overflow-indicator.mjs",
+      "default": "./fesm2022/angular-overflow-indicator.mjs"
+    }
+  }
+}