angular-overflow-indicator 19.0.1 → 19.0.5
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { output,
|
|
2
|
+
import { output, ChangeDetectionStrategy, Component, input, signal, inject, ChangeDetectorRef, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -7,20 +7,20 @@ class DefaultIndicatorButtonComponent {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
this.buttonClicked = output();
|
|
9
9
|
}
|
|
10
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
10
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
|
|
12
12
|
<button class="default-button" (click)="buttonClicked.emit()">
|
|
13
13
|
<span>There is more content</span>
|
|
14
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: "19.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'ng-scroll-view-default-indicator-button', template: `
|
|
20
20
|
<button class="default-button" (click)="buttonClicked.emit()">
|
|
21
21
|
<span>There is more content</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,
|
|
23
|
+
`, 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
|
|
|
26
26
|
class ScrollViewWithIndicatorComponent {
|
|
@@ -67,10 +67,10 @@ 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: "19.
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
70
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.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: "19.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
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: [{
|
|
@@ -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';\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
|
|
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 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({\r\n selector: 'ng-scroll-view-with-indicator',\r\n templateUrl: './scroll-view-with-indicator.component.html',\r\n styleUrls: ['./scroll-view-with-indicator.component.css'],\r\n imports: [CommonModule, DefaultIndicatorButtonComponent],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\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