angular-overflow-indicator 21.0.5 → 22.0.0

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.
@@ -7,14 +7,14 @@ class DefaultIndicatorButtonComponent {
7
7
  constructor() {
8
8
  this.buttonClicked = output();
9
9
  }
10
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: DefaultIndicatorButtonComponent, isStandalone: true, selector: "ng-scroll-view-default-indicator-button", outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: `
10
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DefaultIndicatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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: "21.2.6", ngImport: i0, type: DefaultIndicatorButtonComponent, decorators: [{
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.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()">
@@ -26,9 +26,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
26
26
  class ScrollViewWithIndicatorComponent {
27
27
  constructor() {
28
28
  this.scrollState = output();
29
- this.indicatorButton = input.required(...(ngDevMode ? [{ debugName: "indicatorButton" }] : /* istanbul ignore next */ []));
30
- this.isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : /* istanbul ignore next */ []));
31
- this.isAtBottom = signal(false, ...(ngDevMode ? [{ debugName: "isAtBottom" }] : /* istanbul ignore next */ []));
29
+ this.indicatorButton = input.required(/* @ts-ignore */
30
+ ...(ngDevMode ? [{ debugName: "indicatorButton" }] : /* istanbul ignore next */ []));
31
+ this.isOverflowing = signal(false, /* @ts-ignore */
32
+ ...(ngDevMode ? [{ debugName: "isOverflowing" }] : /* istanbul ignore next */ []));
33
+ this.isAtBottom = signal(false, /* @ts-ignore */
34
+ ...(ngDevMode ? [{ debugName: "isAtBottom" }] : /* istanbul ignore next */ []));
32
35
  this.cdr = inject(ChangeDetectorRef);
33
36
  this.resizeObserver = null;
34
37
  }
@@ -67,10 +70,10 @@ class ScrollViewWithIndicatorComponent {
67
70
  this.isAtBottom.set(element.scrollTop + 1 >= maxScroll);
68
71
  this.scrollState.emit(Math.round((100 / maxScroll) * (element.scrollTop + 1)));
69
72
  }
70
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
71
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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@if (isOverflowing() && !isAtBottom()) {\r\n <div class=\"scroll-indicator\">\r\n @if (indicatorButton()) {\r\n <ng-container [ngTemplateOutlet]=\"indicatorButton()\" />\r\n } @else {\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n }\r\n </div>\r\n}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DefaultIndicatorButtonComponent, selector: "ng-scroll-view-default-indicator-button", outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
73
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
74
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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@if (isOverflowing() && !isAtBottom()) {\r\n <div class=\"scroll-indicator\">\r\n @if (indicatorButton()) {\r\n <ng-container [ngTemplateOutlet]=\"indicatorButton()\" />\r\n } @else {\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n }\r\n </div>\r\n}\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.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
75
  }
73
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
76
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewWithIndicatorComponent, decorators: [{
74
77
  type: Component,
75
78
  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@if (isOverflowing() && !isAtBottom()) {\r\n <div class=\"scroll-indicator\">\r\n @if (indicatorButton()) {\r\n <ng-container [ngTemplateOutlet]=\"indicatorButton()\" />\r\n } @else {\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n }\r\n </div>\r\n}\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
79
  }], 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 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@if (isOverflowing() && !isAtBottom()) {\r\n <div class=\"scroll-indicator\">\r\n @if (indicatorButton()) {\r\n <ng-container [ngTemplateOutlet]=\"indicatorButton()\" />\r\n } @else {\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n }\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
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@if (isOverflowing() && !isAtBottom()) {\r\n <div class=\"scroll-indicator\">\r\n @if (indicatorButton()) {\r\n <ng-container [ngTemplateOutlet]=\"indicatorButton()\" />\r\n } @else {\r\n <ng-scroll-view-default-indicator-button (buttonClicked)=\"scrollToBottom()\" />\r\n }\r\n </div>\r\n}\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": "21.0.5",
3
+ "version": "22.0.0",
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,8 +9,8 @@
9
9
  "directory": "libs/angular-overflow-indicator"
10
10
  },
11
11
  "peerDependencies": {
12
- "@angular/common": "^21.0.0",
13
- "@angular/core": "^21.0.0"
12
+ "@angular/common": "^22.0.0",
13
+ "@angular/core": "^22.0.0"
14
14
  },
15
15
  "dependencies": {
16
16
  "tslib": "^2.6.2"