angular-overflow-indicator 18.0.7 → 19.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,70 +1,70 @@
1
- # angular-overflow-indicator
2
-
3
- This library includes a simple and performant component that displays a given button if the content of the component overflows.
4
-
5
- ## Features
6
-
7
- ### Button that displays/hides accordingly
8
-
9
- ![Overflow indicator example](./example-overflow-indicator.gif)
10
-
11
- ### Observe the scroll state
12
-
13
- ![Overflow indicator example](./example-scroll-state.gif)
14
-
15
-
16
- ## Basic Usage
17
-
18
- **Step 1: Install the package**
19
-
20
- ```console
21
- yarn add angular-overflow-indicator
22
- ```
23
- or
24
- ```console
25
- npm install angular-overflow-indicator
26
- ```
27
-
28
- **Step 2: Install the package**
29
-
30
- ```ts
31
- import { ScrollViewWithIndicatorComponent } from 'angular-overflow-indicator';
32
- ```
33
-
34
- **Step 3: Create a container with a maximum/fixed size**
35
-
36
- ```html
37
- <div [style]="{ height: '300px', width: '500px' }">
38
- // ...
39
- </div>
40
- ```
41
-
42
- **Step 4: Add a template that includes the indicator-button**
43
-
44
- ```html
45
- <div [style]="{ height: '300px', width: '500px' }">
46
- <ng-template #customButton>
47
- <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
48
- </ng-template>
49
-
50
- // ...
51
- </div>
52
- ```
53
-
54
- **Step 5: Add the overflow-indicator-component with a list larger than the outer container and pass the template reference of the indicator-button**
55
-
56
- ```html
57
- <div [style]="{ height: '300px', width: '500px' }">
58
- <ng-template #customButton>
59
- <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
60
- </ng-template>
61
-
62
- <ng-scroll-view-with-indicator #view [indicatorButton]="customButton">
63
- <ul>
64
- <li *ngFor="let item of items()">List item {{ item }}</li>
65
- </ul>
66
- </ng-scroll-view-with-indicator>
67
- </div>
68
- ```
69
-
70
-
1
+ # angular-overflow-indicator
2
+
3
+ This library includes a simple and performant component that displays a given button if the content of the component overflows.
4
+
5
+ ## Features
6
+
7
+ ### Button that displays/hides accordingly
8
+
9
+ ![Overflow indicator example](./example-overflow-indicator.gif)
10
+
11
+ ### Observe the scroll state
12
+
13
+ ![Overflow indicator example](./example-scroll-state.gif)
14
+
15
+
16
+ ## Basic Usage
17
+
18
+ **Step 1: Install the package**
19
+
20
+ ```console
21
+ yarn add angular-overflow-indicator
22
+ ```
23
+ or
24
+ ```console
25
+ npm install angular-overflow-indicator
26
+ ```
27
+
28
+ **Step 2: Install the package**
29
+
30
+ ```ts
31
+ import { ScrollViewWithIndicatorComponent } from 'angular-overflow-indicator';
32
+ ```
33
+
34
+ **Step 3: Create a container with a maximum/fixed size**
35
+
36
+ ```html
37
+ <div [style]="{ height: '300px', width: '500px' }">
38
+ // ...
39
+ </div>
40
+ ```
41
+
42
+ **Step 4: Add a template that includes the indicator-button**
43
+
44
+ ```html
45
+ <div [style]="{ height: '300px', width: '500px' }">
46
+ <ng-template #customButton>
47
+ <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
48
+ </ng-template>
49
+
50
+ // ...
51
+ </div>
52
+ ```
53
+
54
+ **Step 5: Add the overflow-indicator-component with a list larger than the outer container and pass the template reference of the indicator-button**
55
+
56
+ ```html
57
+ <div [style]="{ height: '300px', width: '500px' }">
58
+ <ng-template #customButton>
59
+ <button (click)="view.scrollToBottom()">There is more below <i>👇</i></button>
60
+ </ng-template>
61
+
62
+ <ng-scroll-view-with-indicator #view [indicatorButton]="customButton">
63
+ <ul>
64
+ <li *ngFor="let item of items()">List item {{ item }}</li>
65
+ </ul>
66
+ </ng-scroll-view-with-indicator>
67
+ </div>
68
+ ```
69
+
70
+
@@ -7,19 +7,19 @@ class DefaultIndicatorButtonComponent {
7
7
  constructor() {
8
8
  this.buttonClicked = output();
9
9
  }
10
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
12
- <button class="default-button" (click)="buttonClicked.emit()">
13
- <span>There is more content</span>
14
- </button>
10
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
12
+ <button class="default-button" (click)="buttonClicked.emit()">
13
+ <span>There is more content</span>
14
+ </button>
15
15
  `, 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 }); }
16
16
  }
17
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
18
18
  type: Component,
19
- args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
20
- <button class="default-button" (click)="buttonClicked.emit()">
21
- <span>There is more content</span>
22
- </button>
19
+ args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
20
+ <button class="default-button" (click)="buttonClicked.emit()">
21
+ <span>There is more content</span>
22
+ </button>
23
23
  `, 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"] }]
24
24
  }] });
25
25
 
@@ -67,12 +67,12 @@ class ScrollViewWithIndicatorComponent {
67
67
  this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);
68
68
  this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));
69
69
  }
70
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
71
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: ScrollViewWithIndicatorComponent, isStandalone: true, selector: "ng-scroll-view-with-indicator", inputs: { indicatorButton: { classPropertyName: "indicatorButton", publicName: "indicatorButton", isSignal: true, isRequired: true, transformFunction: null } }, 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 />\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\n\n <ng-template #defaultButton>\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\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 }); }
70
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
71
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: ScrollViewWithIndicatorComponent, isStandalone: true, selector: "ng-scroll-view-with-indicator", inputs: { indicatorButton: { classPropertyName: "indicatorButton", publicName: "indicatorButton", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { scrollState: "scrollState" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\r\n <ng-content />\r\n</div>\r\n\r\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\r\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\r\n\r\n <ng-template #defaultButton>\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n </ng-template>\r\n</div>\r\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 }); }
72
72
  }
73
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
74
74
  type: Component,
75
- 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 />\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\n\n <ng-template #defaultButton>\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\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"] }]
75
+ args: [{ selector: 'ng-scroll-view-with-indicator', imports: [CommonModule, DefaultIndicatorButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\r\n <ng-content />\r\n</div>\r\n\r\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\r\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\r\n\r\n <ng-template #defaultButton>\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n </ng-template>\r\n</div>\r\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"] }]
76
76
  }], propDecorators: { contentWrapper: [{
77
77
  type: ViewChild,
78
78
  args: ['contentWrapper']
@@ -1 +1 @@
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, 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 buttonClicked = output();\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\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 scrollState = output<number>();\n\n readonly indicatorButton = input.required<TemplateRef<unknown>>();\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 />\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\n\n <ng-template #defaultButton>\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\n </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAwBa,+BAA+B,CAAA;AAtB5C,IAAA,WAAA,GAAA;QAuBE,IAAa,CAAA,aAAA,GAAG,MAAM,EAAE,CAAC;AAC1B,KAAA;8GAFY,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA/B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,EApBhC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAgBU,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAtB3C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yCAAyC,EACzC,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,UAAA,EAaW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,mJAAA,CAAA,EAAA,CAAA;;;MCGpC,gCAAgC,CAAA;AAR7C,IAAA,WAAA,GAAA;QAUE,IAAW,CAAA,WAAA,GAAG,MAAM,EAAU,CAAC;AAEtB,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAwB,CAAC;AACzD,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAEnB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACzC,IAAc,CAAA,cAAA,GAA0B,IAAI,CAAC;AA2CtD,KAAA;IAzCC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC5C,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACzB,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;AAC3B,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;KAChE;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;KACnC;AAED;;AAEG;IACH,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,YAAY,CAAC;KAC9F;AAED;;;AAGG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAEO,mBAAmB,GAAA;AACzB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC;QAClD,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;AAC9D,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;KACtG;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC;QAClD,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;AAC9D,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,IAAI,SAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,SAAS,KAAK,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KAChF;8GAnDU,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gCAAgC,ECzB7C,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,mbAWA,EDUY,MAAA,EAAA,CAAA,6QAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,0SAAE,+BAA+B,EAAA,QAAA,EAAA,yCAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAI5C,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAR5C,SAAS;+BACE,+BAA+B,EAAA,OAAA,EAGhC,CAAC,YAAY,EAAE,+BAA+B,CAAC,EAAA,UAAA,EAC5C,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mbAAA,EAAA,MAAA,EAAA,CAAA,6QAAA,CAAA,EAAA,CAAA;8BAGlB,cAAc,EAAA,CAAA;sBAA1C,SAAS;uBAAC,gBAAgB,CAAA;;;AE1B7B;;AAEG;;;;"}
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, output } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ng-scroll-view-default-indicator-button',\r\n template: `\r\n <button class=\"default-button\" (click)=\"buttonClicked.emit()\">\r\n <span>There is more content</span>\r\n </button>\r\n `,\r\n styles: `\r\n button {\r\n border: none;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n padding: 0.4rem 0.6rem;\r\n background-color: #444444;\r\n color: #ffffff;\r\n border-radius: 1rem;\r\n margin-bottom: 0.4rem;\r\n }\r\n `,\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class DefaultIndicatorButtonComponent {\r\n buttonClicked = output();\r\n}\r\n","import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ElementRef,\r\n inject,\r\n input,\r\n OnDestroy,\r\n output,\r\n signal,\r\n TemplateRef,\r\n ViewChild\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { DefaultIndicatorButtonComponent } from '../default-indicator-button';\r\n\r\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 changeDetection: ChangeDetectionStrategy.OnPush\n})\r\nexport class ScrollViewWithIndicatorComponent implements AfterViewInit, OnDestroy {\r\n @ViewChild('contentWrapper') contentWrapper!: ElementRef<HTMLDivElement>;\r\n scrollState = output<number>();\r\n\r\n readonly indicatorButton = input.required<TemplateRef<unknown>>();\r\n readonly isOverflowing = signal(false);\r\n readonly isAtBottom = signal(false);\r\n\r\n private readonly cdr = inject(ChangeDetectorRef);\r\n private resizeObserver: ResizeObserver | null = null;\r\n\r\n ngAfterViewInit(): void {\r\n this.resizeObserver = new ResizeObserver(() => {\r\n this.updateOverflowState();\r\n this.updateScrollState();\r\n this.cdr.detectChanges();\r\n });\r\n\r\n this.resizeObserver.observe(this.contentWrapper.nativeElement);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n /**\r\n * Manually scrolls the content-container to the bottom\r\n */\r\n scrollToBottom(): void {\r\n this.contentWrapper.nativeElement.scrollTop = this.contentWrapper.nativeElement.scrollHeight;\r\n }\r\n\r\n /**\r\n * If the user scrolled all the way to the end of the container,\r\n * the indicator button can be hidden\r\n */\r\n onScroll(): void {\r\n this.updateScrollState();\r\n }\r\n\r\n private updateOverflowState(): void {\r\n const element = this.contentWrapper.nativeElement;\r\n const maxScroll = element.scrollHeight - element.offsetHeight;\r\n this.isOverflowing.set(element.offsetHeight < element.scrollHeight && element.scrollTop < maxScroll);\r\n }\r\n\r\n private updateScrollState(): void {\r\n const element = this.contentWrapper.nativeElement;\r\n const maxScroll = element.scrollHeight - element.offsetHeight;\r\n this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);\r\n this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));\r\n }\r\n}\r\n","<div class=\"content-wrapper\" #contentWrapper (scroll)=\"onScroll()\">\r\n <ng-content />\r\n</div>\r\n\r\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\r\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\r\n\r\n <ng-template #defaultButton>\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n </ng-template>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "angular-overflow-indicator",
3
- "version": "18.0.7",
3
+ "version": "19.0.1",
4
4
  "description": "A simple and performant component that displays a given button if the content of the component overflows",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -9,11 +9,11 @@
9
9
  "directory": "libs/angular-overflow-indicator"
10
10
  },
11
11
  "peerDependencies": {
12
- "@angular/common": "^18.0.0",
13
- "@angular/core": "^18.0.0"
12
+ "@angular/common": "^19.0.0",
13
+ "@angular/core": "^19.0.0"
14
14
  },
15
15
  "dependencies": {
16
- "tslib": "^2.3.0"
16
+ "tslib": "^2.6.2"
17
17
  },
18
18
  "sideEffects": false,
19
19
  "keywords": [
@@ -31,8 +31,6 @@
31
31
  },
32
32
  ".": {
33
33
  "types": "./index.d.ts",
34
- "esm2022": "./esm2022/angular-overflow-indicator.mjs",
35
- "esm": "./esm2022/angular-overflow-indicator.mjs",
36
34
  "default": "./fesm2022/angular-overflow-indicator.mjs"
37
35
  }
38
36
  }
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './index';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9hbmd1bGFyLW92ZXJmbG93LWluZGljYXRvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
package/esm2022/index.mjs DELETED
@@ -1,2 +0,0 @@
1
- export * from './lib/scroll-view-with-indicator';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtDQUFrQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3InO1xuIl19
@@ -1,22 +0,0 @@
1
- import { ChangeDetectionStrategy, Component, output } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export class DefaultIndicatorButtonComponent {
4
- constructor() {
5
- this.buttonClicked = output();
6
- }
7
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
9
- <button class="default-button" (click)="buttonClicked.emit()">
10
- <span>There is more content</span>
11
- </button>
12
- `, 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 }); }
13
- }
14
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
15
- type: Component,
16
- args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
17
- <button class="default-button" (click)="buttonClicked.emit()">
18
- <span>There is more content</span>
19
- </button>
20
- `, 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"] }]
21
- }] });
22
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3Ivc3JjL2xpYi9kZWZhdWx0LWluZGljYXRvci1idXR0b24vZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUF3QjNFLE1BQU0sT0FBTywrQkFBK0I7SUF0QjVDO1FBdUJFLGtCQUFhLEdBQUcsTUFBTSxFQUFFLENBQUM7S0FDMUI7OEdBRlksK0JBQStCO2tHQUEvQiwrQkFBK0IsZ0pBcEJoQzs7OztHQUlUOzsyRkFnQlUsK0JBQStCO2tCQXRCM0MsU0FBUzsrQkFDRSx5Q0FBeUMsWUFDekM7Ozs7R0FJVCxjQWFXLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIG91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZy1zY3JvbGwtdmlldy1kZWZhdWx0LWluZGljYXRvci1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxidXR0b24gY2xhc3M9XCJkZWZhdWx0LWJ1dHRvblwiIChjbGljayk9XCJidXR0b25DbGlja2VkLmVtaXQoKVwiPlxuICAgICAgPHNwYW4+VGhlcmUgaXMgbW9yZSBjb250ZW50PC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICBgLFxuICBzdHlsZXM6IGBcbiAgICBidXR0b24ge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgZm9udC1zaXplOiAwLjhyZW07XG4gICAgICBmb250LXdlaWdodDogNTAwO1xuICAgICAgcGFkZGluZzogMC40cmVtIDAuNnJlbTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ0NDQ7XG4gICAgICBjb2xvcjogI2ZmZmZmZjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDFyZW07XG4gICAgICBtYXJnaW4tYm90dG9tOiAwLjRyZW07XG4gICAgfVxuICBgLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBEZWZhdWx0SW5kaWNhdG9yQnV0dG9uQ29tcG9uZW50IHtcbiAgYnV0dG9uQ2xpY2tlZCA9IG91dHB1dCgpO1xufVxuIl19
@@ -1,2 +0,0 @@
1
- export { DefaultIndicatorButtonComponent } from './default-indicator-button.component';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9saWIvZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgRGVmYXVsdEluZGljYXRvckJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vZGVmYXVsdC1pbmRpY2F0b3ItYnV0dG9uLmNvbXBvbmVudCc7XG4iXX0=
@@ -1,2 +0,0 @@
1
- export { ScrollViewWithIndicatorComponent } from './scroll-view-with-indicator.component';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItb3ZlcmZsb3ctaW5kaWNhdG9yL3NyYy9saWIvc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sd0NBQXdDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBTY3JvbGxWaWV3V2l0aEluZGljYXRvckNvbXBvbmVudCB9IGZyb20gJy4vc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50JztcbiJdfQ==
@@ -1,60 +0,0 @@
1
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, input, output, signal, ViewChild } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { DefaultIndicatorButtonComponent } from '../default-indicator-button';
4
- import * as i0 from "@angular/core";
5
- import * as i1 from "@angular/common";
6
- export class ScrollViewWithIndicatorComponent {
7
- constructor() {
8
- this.scrollState = output();
9
- this.indicatorButton = input.required();
10
- this.isOverflowing = signal(false);
11
- this.isAtBottom = signal(false);
12
- this.cdr = inject(ChangeDetectorRef);
13
- this.resizeObserver = null;
14
- }
15
- ngAfterViewInit() {
16
- this.resizeObserver = new ResizeObserver(() => {
17
- this.updateOverflowState();
18
- this.updateScrollState();
19
- this.cdr.detectChanges();
20
- });
21
- this.resizeObserver.observe(this.contentWrapper.nativeElement);
22
- }
23
- ngOnDestroy() {
24
- this.resizeObserver?.disconnect();
25
- }
26
- /**
27
- * Manually scrolls the content-container to the bottom
28
- */
29
- scrollToBottom() {
30
- this.contentWrapper.nativeElement.scrollTop = this.contentWrapper.nativeElement.scrollHeight;
31
- }
32
- /**
33
- * If the user scrolled all the way to the end of the container,
34
- * the indicator button can be hidden
35
- */
36
- onScroll() {
37
- this.updateScrollState();
38
- }
39
- updateOverflowState() {
40
- const element = this.contentWrapper.nativeElement;
41
- const maxScroll = element.scrollHeight - element.offsetHeight;
42
- this.isOverflowing.set(element.offsetHeight < element.scrollHeight && element.scrollTop < maxScroll);
43
- }
44
- updateScrollState() {
45
- const element = this.contentWrapper.nativeElement;
46
- const maxScroll = element.scrollHeight - element.offsetHeight;
47
- this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);
48
- this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));
49
- }
50
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
51
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: ScrollViewWithIndicatorComponent, isStandalone: true, selector: "ng-scroll-view-with-indicator", inputs: { indicatorButton: { classPropertyName: "indicatorButton", publicName: "indicatorButton", isSignal: true, isRequired: true, transformFunction: null } }, 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 />\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\n\n <ng-template #defaultButton>\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\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 }); }
52
- }
53
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
54
- type: Component,
55
- 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 />\n</div>\n\n<div class=\"scroll-indicator\" *ngIf=\"isOverflowing() && !isAtBottom()\">\n <ng-container *ngIf=\"indicatorButton(); else defaultButton\" [ngTemplateOutlet]=\"indicatorButton()\" />\n\n <ng-template #defaultButton>\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\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"] }]
56
- }], propDecorators: { contentWrapper: [{
57
- type: ViewChild,
58
- args: ['contentWrapper']
59
- }] } });
60
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyLW92ZXJmbG93LWluZGljYXRvci9zcmMvbGliL3Njcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yL3Njcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1vdmVyZmxvdy1pbmRpY2F0b3Ivc3JjL2xpYi9zY3JvbGwtdmlldy13aXRoLWluZGljYXRvci9zY3JvbGwtdmlldy13aXRoLWluZGljYXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxFQUNOLE1BQU0sRUFFTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7QUFVOUUsTUFBTSxPQUFPLGdDQUFnQztJQVI3QztRQVVFLGdCQUFXLEdBQUcsTUFBTSxFQUFVLENBQUM7UUFFdEIsb0JBQWUsR0FBRyxLQUFLLENBQUMsUUFBUSxFQUF3QixDQUFDO1FBQ3pELGtCQUFhLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlCLGVBQVUsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFbkIsUUFBRyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ3pDLG1CQUFjLEdBQTBCLElBQUksQ0FBQztLQTJDdEQ7SUF6Q0MsZUFBZTtRQUNiLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxjQUFjLENBQUMsR0FBRyxFQUFFO1lBQzVDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0IsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGNBQWMsRUFBRSxVQUFVLEVBQUUsQ0FBQztJQUNwQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxjQUFjO1FBQ1osSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztJQUMvRixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUM7UUFDbEQsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDO1FBQzlELElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDLFlBQVksSUFBSSxPQUFPLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQyxDQUFDO0lBQ3ZHLENBQUM7SUFFTyxpQkFBaUI7UUFDdkIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUM7UUFDbEQsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDO1FBQzlELElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLFNBQVMsQ0FBQyxDQUFDO1FBQ3hELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEdBQUcsU0FBUyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNqRixDQUFDOzhHQW5EVSxnQ0FBZ0M7a0dBQWhDLGdDQUFnQyxxWkN6QjdDLG1iQVdBLG9VRFVZLFlBQVksMFNBQUUsK0JBQStCOzsyRkFJNUMsZ0NBQWdDO2tCQVI1QyxTQUFTOytCQUNFLCtCQUErQixXQUdoQyxDQUFDLFlBQVksRUFBRSwrQkFBK0IsQ0FBQyxjQUM1QyxJQUFJLG1CQUNDLHVCQUF1QixDQUFDLE1BQU07OEJBR2xCLGNBQWM7c0JBQTFDLFNBQVM7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIGluamVjdCxcbiAgaW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgb3V0cHV0LFxuICBzaWduYWwsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRGVmYXVsdEluZGljYXRvckJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2RlZmF1bHQtaW5kaWNhdG9yLWJ1dHRvbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25nLXNjcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Njcm9sbC12aWV3LXdpdGgtaW5kaWNhdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2Nyb2xsLXZpZXctd2l0aC1pbmRpY2F0b3IuY29tcG9uZW50LnNjc3MnXSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRGVmYXVsdEluZGljYXRvckJ1dHRvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFNjcm9sbFZpZXdXaXRoSW5kaWNhdG9yQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQFZpZXdDaGlsZCgnY29udGVudFdyYXBwZXInKSBjb250ZW50V3JhcHBlciE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBzY3JvbGxTdGF0ZSA9IG91dHB1dDxudW1iZXI+KCk7XG5cbiAgcmVhZG9ubHkgaW5kaWNhdG9yQnV0dG9uID0gaW5wdXQucmVxdWlyZWQ8VGVtcGxhdGVSZWY8dW5rbm93bj4+KCk7XG4gIHJlYWRvbmx5IGlzT3ZlcmZsb3dpbmcgPSBzaWduYWwoZmFsc2UpO1xuICByZWFkb25seSBpc0F0Qm90dG9tID0gc2lnbmFsKGZhbHNlKTtcblxuICBwcml2YXRlIHJlYWRvbmx5IGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyIHwgbnVsbCA9IG51bGw7XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIoKCkgPT4ge1xuICAgICAgdGhpcy51cGRhdGVPdmVyZmxvd1N0YXRlKCk7XG4gICAgICB0aGlzLnVwZGF0ZVNjcm9sbFN0YXRlKCk7XG4gICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfSk7XG5cbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyLm9ic2VydmUodGhpcy5jb250ZW50V3JhcHBlci5uYXRpdmVFbGVtZW50KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXI/LmRpc2Nvbm5lY3QoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBNYW51YWxseSBzY3JvbGxzIHRoZSBjb250ZW50LWNvbnRhaW5lciB0byB0aGUgYm90dG9tXG4gICAqL1xuICBzY3JvbGxUb0JvdHRvbSgpOiB2b2lkIHtcbiAgICB0aGlzLmNvbnRlbnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsVG9wID0gdGhpcy5jb250ZW50V3JhcHBlci5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodDtcbiAgfVxuXG4gIC8qKlxuICAgKiBJZiB0aGUgdXNlciBzY3JvbGxlZCBhbGwgdGhlIHdheSB0byB0aGUgZW5kIG9mIHRoZSBjb250YWluZXIsXG4gICAqIHRoZSBpbmRpY2F0b3IgYnV0dG9uIGNhbiBiZSBoaWRkZW5cbiAgICovXG4gIG9uU2Nyb2xsKCk6IHZvaWQge1xuICAgIHRoaXMudXBkYXRlU2Nyb2xsU3RhdGUoKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlT3ZlcmZsb3dTdGF0ZSgpOiB2b2lkIHtcbiAgICBjb25zdCBlbGVtZW50ID0gdGhpcy5jb250ZW50V3JhcHBlci5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IG1heFNjcm9sbCA9IGVsZW1lbnQuc2Nyb2xsSGVpZ2h0IC0gZWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgdGhpcy5pc092ZXJmbG93aW5nLnNldChlbGVtZW50Lm9mZnNldEhlaWdodCA8IGVsZW1lbnQuc2Nyb2xsSGVpZ2h0ICYmIGVsZW1lbnQuc2Nyb2xsVG9wIDwgbWF4U2Nyb2xsKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlU2Nyb2xsU3RhdGUoKTogdm9pZCB7XG4gICAgY29uc3QgZWxlbWVudCA9IHRoaXMuY29udGVudFdyYXBwZXIubmF0aXZlRWxlbWVudDtcbiAgICBjb25zdCBtYXhTY3JvbGwgPSBlbGVtZW50LnNjcm9sbEhlaWdodCAtIGVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xuICAgIHRoaXMuaXNBdEJvdHRvbS5zZXQoZWxlbWVudC5zY3JvbGxUb3AgKyAxID49IG1heFNjcm9sbCk7XG4gICAgdGhpcy5zY3JvbGxTdGF0ZS5lbWl0KE1hdGgucm91bmQoKDEwMCAvIG1heFNjcm9sbCkgKiAoZWxlbWVudC5zY3JvbGxUb3AgKyAxKSkpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGVudC13cmFwcGVyXCIgI2NvbnRlbnRXcmFwcGVyIChzY3JvbGwpPVwib25TY3JvbGwoKVwiPlxuICA8bmctY29udGVudCAvPlxuPC9kaXY+XG5cbjxkaXYgY2xhc3M9XCJzY3JvbGwtaW5kaWNhdG9yXCIgKm5nSWY9XCJpc092ZXJmbG93aW5nKCkgJiYgIWlzQXRCb3R0b20oKVwiPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiaW5kaWNhdG9yQnV0dG9uKCk7IGVsc2UgZGVmYXVsdEJ1dHRvblwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImluZGljYXRvckJ1dHRvbigpXCIgLz5cblxuICA8bmctdGVtcGxhdGUgI2RlZmF1bHRCdXR0b24+XG4gICAgPG5nLXNjcm9sbC12aWV3LWRlZmF1bHQtaW5kaWNhdG9yLWJ1dHRvbiAoYnV0dG9uQ2xpY2tlZCk9XCJzY3JvbGxUb0JvdHRvbSgpXCIgLz5cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuIl19