@ruc-lib/virtual-scroll 2.0.1 → 3.1.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.
- package/README.md +47 -25
- package/fesm2022/ruc-lib-virtual-scroll.mjs +143 -0
- package/fesm2022/ruc-lib-virtual-scroll.mjs.map +1 -0
- package/index.d.ts +109 -2
- package/package.json +6 -18
- package/esm2020/index.mjs +0 -3
- package/esm2020/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.mjs +0 -123
- package/esm2020/lib/ruclib-virtual-scroll.module.mjs +0 -20
- package/esm2020/model/ruclib-virtual-scroll.model.mjs +0 -2
- package/esm2020/ruc-lib-virtual-scroll.mjs +0 -5
- package/fesm2015/ruc-lib-virtual-scroll.mjs +0 -154
- package/fesm2015/ruc-lib-virtual-scroll.mjs.map +0 -1
- package/fesm2020/ruc-lib-virtual-scroll.mjs +0 -146
- package/fesm2020/ruc-lib-virtual-scroll.mjs.map +0 -1
- package/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.d.ts +0 -62
- package/lib/ruclib-virtual-scroll.module.d.ts +0 -10
- package/model/ruclib-virtual-scroll.model.d.ts +0 -45
package/README.md
CHANGED
|
@@ -18,31 +18,37 @@ If you only need the Virtual Scroll component
|
|
|
18
18
|
npm install @ruc-lib/virtual-scroll
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
## Version Compatibility
|
|
22
|
+
|
|
23
|
+
Please ensure you install the correct version of `@ruc-lib/virtual-scroll` based on your Angular version.
|
|
24
|
+
|
|
25
|
+
| Angular Version | Compatible `@ruc-lib/virtual-scroll` Version |
|
|
26
|
+
|--------------------|---------------------------------------------|
|
|
27
|
+
| 15.x.x | `npm install @ruc-lib/virtual-scroll@^3.0.0` |
|
|
28
|
+
| 16.x.x | `npm install @ruc-lib/virtual-scroll@^3.0.0` |
|
|
24
29
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
import {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
],
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
### 1. Import the Component
|
|
33
|
+
In your Angular component file (e.g., `app.component.ts`), import the `RuclibVirtualScrollComponent`:
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { Component } from '@angular/core';
|
|
37
|
+
|
|
38
|
+
// For Complete Library
|
|
39
|
+
import { RuclibVirtualScrollComponent } from '@uxpractice/ruc-lib/virtual-scroll';
|
|
40
|
+
|
|
41
|
+
// For Individual Package
|
|
42
|
+
import { RuclibVirtualScrollComponent } from '@ruc-lib/virtual-scroll';
|
|
43
|
+
|
|
44
|
+
@Component({
|
|
45
|
+
selector: 'app-root',
|
|
46
|
+
imports: [RuclibVirtualScrollComponent],
|
|
47
|
+
templateUrl: './app.component.html',
|
|
48
|
+
})
|
|
49
|
+
export class AppComponent {
|
|
50
|
+
// Component code here
|
|
51
|
+
}
|
|
46
52
|
```
|
|
47
53
|
|
|
48
54
|
### 2. Use the Component
|
|
@@ -98,7 +104,7 @@ import { Component } from '@angular/core';
|
|
|
98
104
|
import { RucVirtualScrollInput } from '@uxpractice/ruc-lib/virtual-scroll';
|
|
99
105
|
|
|
100
106
|
// For Individual package
|
|
101
|
-
import { RucVirtualScrollInput } from '@
|
|
107
|
+
import { RucVirtualScrollInput } from '@ruc-lib/virtual-scroll';
|
|
102
108
|
|
|
103
109
|
@Component({
|
|
104
110
|
selector: 'app-root',
|
|
@@ -120,6 +126,22 @@ export class AppComponent {
|
|
|
120
126
|
}
|
|
121
127
|
```
|
|
122
128
|
|
|
129
|
+
> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
|
|
130
|
+
|
|
131
|
+
When implementing **custom themes**, such as:
|
|
132
|
+
|
|
133
|
+
```scss
|
|
134
|
+
.custom-theme-1 {
|
|
135
|
+
@include angular-material-theme($custom-theme);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
|
|
139
|
+
.custom-theme-1 {
|
|
140
|
+
@include angular-material-theme($custom-theme);
|
|
141
|
+
@include mat.typography-level($theme-custom-typography-name, body-1);
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
123
145
|
## Contribution
|
|
124
146
|
|
|
125
147
|
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/cdk/scrolling';
|
|
4
|
+
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
5
|
+
import * as i2 from '@angular/material/icon';
|
|
6
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
7
|
+
|
|
8
|
+
class RuclibVirtualScrollComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
// Configuration object, aligns with how other components might be fed data in your app
|
|
11
|
+
this.rucInputData = {};
|
|
12
|
+
this.itemSize = 10; // Default item size in pixels
|
|
13
|
+
this.viewportWidth = '100vw'; // Default viewport width
|
|
14
|
+
this.viewportHeight = '100vh'; // Default viewport height
|
|
15
|
+
this.clientHeight = 0;
|
|
16
|
+
// Optional: For theming, if your component needs to react to theme changes
|
|
17
|
+
this.customTheme = '';
|
|
18
|
+
}
|
|
19
|
+
ngOnInit() {
|
|
20
|
+
this.updateInternalState();
|
|
21
|
+
}
|
|
22
|
+
ngOnChanges(changes) {
|
|
23
|
+
// Re-process inputs if they change
|
|
24
|
+
if (changes['rucInputData']) {
|
|
25
|
+
this.updateInternalState();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
ngAfterViewChecked() {
|
|
29
|
+
const isDataLoading = this.rucInputData?.isLoad || false;
|
|
30
|
+
if (isDataLoading) {
|
|
31
|
+
this.scrollToIndex();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
updateInternalState() {
|
|
35
|
+
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
36
|
+
// Update itemSize from rucInputData if provided, otherwise keep current or default
|
|
37
|
+
this.itemSize =
|
|
38
|
+
this.rucInputData?.itemSize !== undefined
|
|
39
|
+
? this.rucInputData.itemSize
|
|
40
|
+
: this.itemSize;
|
|
41
|
+
// Update viewportWidth from rucInputData if provided, otherwise keep current or default
|
|
42
|
+
this.viewportWidth =
|
|
43
|
+
this.rucInputData?.viewportWidth !== undefined
|
|
44
|
+
? this.rucInputData.viewportWidth
|
|
45
|
+
: this.viewportWidth;
|
|
46
|
+
// Update viewportHeight from rucInputData if provided, otherwise keep current or default
|
|
47
|
+
this.viewportHeight =
|
|
48
|
+
this.rucInputData?.viewportHeight !== undefined
|
|
49
|
+
? this.rucInputData.viewportHeight
|
|
50
|
+
: this.viewportHeight;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Example public method that can be called by a parent component.
|
|
54
|
+
* Scrolls the virtual scroll viewport to the specified index.
|
|
55
|
+
* @param index The index of the item to scroll to.
|
|
56
|
+
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
57
|
+
*/
|
|
58
|
+
scrollToIndex() {
|
|
59
|
+
const newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
60
|
+
if (this.virtualScrollViewport) {
|
|
61
|
+
if (newClientHeight !== this.clientHeight) {
|
|
62
|
+
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
63
|
+
document
|
|
64
|
+
.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
|
|
65
|
+
.scrollIntoView({ behavior: 'auto', block: 'end' });
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* To handle the scroll position on top by using back to top icon
|
|
74
|
+
* @returns scroll position at top
|
|
75
|
+
*/
|
|
76
|
+
handleScroll() {
|
|
77
|
+
document
|
|
78
|
+
.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
|
|
79
|
+
.scrollIntoView({ behavior: 'auto', block: 'start' });
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* To get the icon of back to top icon
|
|
83
|
+
* @returns default: 'arrow_upward'
|
|
84
|
+
*/
|
|
85
|
+
getBackToTopIcon() {
|
|
86
|
+
return this.rucInputData?.backToTopIcon || 'arrow_upward';
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* To get the label of back to top icon
|
|
90
|
+
* @returns default: 'Back to Top'
|
|
91
|
+
*/
|
|
92
|
+
getBackToTopLabel() {
|
|
93
|
+
return this.rucInputData?.backToTopLabel || 'Back to Top';
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* To get the color of icon
|
|
97
|
+
* @returns default: false
|
|
98
|
+
*/
|
|
99
|
+
getIconColor() {
|
|
100
|
+
return this.rucInputData?.iconColor || 'primary';
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* To check wheteher back to top icon shold be there or not in view
|
|
104
|
+
* @returns default: false
|
|
105
|
+
*/
|
|
106
|
+
isBackToTopIcon() {
|
|
107
|
+
return this.rucInputData?.isBackToTopIcon || false;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* To get the thumb color of virtual scroll
|
|
111
|
+
* @returns default: '#888'
|
|
112
|
+
*/
|
|
113
|
+
getScrollbarThumbColor() {
|
|
114
|
+
return this.rucInputData?.thumbColor || '#888';
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* To get the track color of virtual scroll
|
|
118
|
+
* @returns default: '#f1f1f1'
|
|
119
|
+
*/
|
|
120
|
+
getScrollbarTrackColor() {
|
|
121
|
+
return this.rucInputData?.trackColor || '#f1f1f1';
|
|
122
|
+
}
|
|
123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibVirtualScrollComponent, isStandalone: true, selector: "uxp-ruclib-virtual-scroll", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n <div class=\"virtual-scrollar__back-to-top\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n </div>\r\n}", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
125
|
+
}
|
|
126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
|
|
127
|
+
type: Component,
|
|
128
|
+
args: [{ selector: 'uxp-ruclib-virtual-scroll', imports: [ScrollingModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n <div class=\"virtual-scrollar__back-to-top\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n </div>\r\n}", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"] }]
|
|
129
|
+
}], propDecorators: { rucInputData: [{
|
|
130
|
+
type: Input
|
|
131
|
+
}], customTheme: [{
|
|
132
|
+
type: Input
|
|
133
|
+
}], virtualScrollViewport: [{
|
|
134
|
+
type: ViewChild,
|
|
135
|
+
args: [CdkVirtualScrollViewport]
|
|
136
|
+
}] } });
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* Generated bundle index. Do not edit.
|
|
140
|
+
*/
|
|
141
|
+
|
|
142
|
+
export { RuclibVirtualScrollComponent };
|
|
143
|
+
//# sourceMappingURL=ruc-lib-virtual-scroll.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ruc-lib-virtual-scroll.mjs","sources":["../../src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.ts","../../src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.html","../../src/ruc-lib-virtual-scroll.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n ViewChild,\r\n} from '@angular/core';\r\n\r\nimport { RucVirtualScrollInput } from '../../model/ruclib-virtual-scroll.model';\r\nimport {\r\n CdkVirtualScrollViewport,\r\n ScrollingModule,\r\n} from '@angular/cdk/scrolling';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n@Component({\r\n selector: 'uxp-ruclib-virtual-scroll',\r\n imports: [ScrollingModule, MatIconModule],\r\n templateUrl: './ruclib-virtual-scroll.component.html',\r\n styleUrl: './ruclib-virtual-scroll.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class RuclibVirtualScrollComponent implements OnInit, OnChanges {\r\n // Configuration object, aligns with how other components might be fed data in your app\r\n @Input() rucInputData: RucVirtualScrollInput = {};\r\n itemSize = 10; // Default item size in pixels\r\n viewportWidth = '100vw'; // Default viewport width\r\n viewportHeight = '100vh'; // Default viewport height\r\n clientHeight = 0;\r\n\r\n // Optional: For theming, if your component needs to react to theme changes\r\n @Input() customTheme = '';\r\n\r\n @ViewChild(CdkVirtualScrollViewport) virtualScrollViewport:\r\n | CdkVirtualScrollViewport\r\n | undefined;\r\n\r\n ngOnInit(): void {\r\n this.updateInternalState();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // Re-process inputs if they change\r\n if (changes['rucInputData']) {\r\n this.updateInternalState();\r\n }\r\n }\r\n\r\n ngAfterViewChecked() {\r\n const isDataLoading = this.rucInputData?.isLoad || false;\r\n if (isDataLoading) {\r\n this.scrollToIndex();\r\n }\r\n }\r\n\r\n private updateInternalState(): void {\r\n this.clientHeight = document.getElementsByClassName(\r\n 'cdk-virtual-scroll-content-wrapper'\r\n )[0].clientHeight;\r\n\r\n // Update itemSize from rucInputData if provided, otherwise keep current or default\r\n this.itemSize =\r\n this.rucInputData?.itemSize !== undefined\r\n ? this.rucInputData.itemSize\r\n : this.itemSize;\r\n\r\n // Update viewportWidth from rucInputData if provided, otherwise keep current or default\r\n this.viewportWidth =\r\n this.rucInputData?.viewportWidth !== undefined\r\n ? this.rucInputData.viewportWidth\r\n : this.viewportWidth;\r\n\r\n // Update viewportHeight from rucInputData if provided, otherwise keep current or default\r\n this.viewportHeight =\r\n this.rucInputData?.viewportHeight !== undefined\r\n ? this.rucInputData.viewportHeight\r\n : this.viewportHeight;\r\n }\r\n\r\n /**\r\n * Example public method that can be called by a parent component.\r\n * Scrolls the virtual scroll viewport to the specified index.\r\n * @param index The index of the item to scroll to.\r\n * @param behavior Optional scroll behavior ('auto', 'smooth').\r\n */\r\n public scrollToIndex(): void {\r\n const newClientHeight = document.getElementsByClassName(\r\n 'cdk-virtual-scroll-content-wrapper'\r\n )[0].clientHeight;\r\n if (this.virtualScrollViewport) {\r\n if (newClientHeight !== this.clientHeight) {\r\n this.clientHeight = document.getElementsByClassName(\r\n 'cdk-virtual-scroll-content-wrapper'\r\n )[0].clientHeight;\r\n document\r\n .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]\r\n .scrollIntoView({ behavior: 'auto', block: 'end' });\r\n }\r\n } else {\r\n console.warn(\r\n 'RuclibVirtualScrollComponent: Viewport not available to scroll.'\r\n );\r\n }\r\n }\r\n\r\n /**\r\n * To handle the scroll position on top by using back to top icon\r\n * @returns scroll position at top\r\n */\r\n public handleScroll(): void {\r\n document\r\n .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]\r\n .scrollIntoView({ behavior: 'auto', block: 'start' });\r\n }\r\n\r\n /**\r\n * To get the icon of back to top icon\r\n * @returns default: 'arrow_upward'\r\n */\r\n getBackToTopIcon(): string {\r\n return this.rucInputData?.backToTopIcon || 'arrow_upward';\r\n }\r\n\r\n /**\r\n * To get the label of back to top icon\r\n * @returns default: 'Back to Top'\r\n */\r\n getBackToTopLabel(): string {\r\n return this.rucInputData?.backToTopLabel || 'Back to Top';\r\n }\r\n\r\n /**\r\n * To get the color of icon\r\n * @returns default: false\r\n */\r\n getIconColor(): string {\r\n return this.rucInputData?.iconColor || 'primary';\r\n }\r\n\r\n /**\r\n * To check wheteher back to top icon shold be there or not in view\r\n * @returns default: false\r\n */\r\n isBackToTopIcon(): boolean {\r\n return this.rucInputData?.isBackToTopIcon || false;\r\n }\r\n\r\n /**\r\n * To get the thumb color of virtual scroll\r\n * @returns default: '#888'\r\n */\r\n getScrollbarThumbColor(): string {\r\n return this.rucInputData?.thumbColor || '#888';\r\n }\r\n\r\n /**\r\n * To get the track color of virtual scroll\r\n * @returns default: '#f1f1f1'\r\n */\r\n getScrollbarTrackColor(): string {\r\n return this.rucInputData?.trackColor || '#f1f1f1';\r\n }\r\n}\r\n","<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n <div class=\"virtual-scrollar__back-to-top\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\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/index.d.ts
CHANGED
|
@@ -1,2 +1,109 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
|
3
|
+
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
*Interface for defining the Virtual Scroll Input
|
|
7
|
+
*/
|
|
8
|
+
interface RucVirtualScrollInput {
|
|
9
|
+
/**
|
|
10
|
+
* The size of each item in the list in pixels.
|
|
11
|
+
*/
|
|
12
|
+
itemSize?: number;
|
|
13
|
+
/**
|
|
14
|
+
* The width of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
|
|
15
|
+
*/
|
|
16
|
+
viewportWidth?: string;
|
|
17
|
+
/**
|
|
18
|
+
* The height of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
|
|
19
|
+
*/
|
|
20
|
+
viewportHeight?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The name of the Material icon to use for the 'back to top' button.
|
|
23
|
+
*/
|
|
24
|
+
backToTopIcon?: string;
|
|
25
|
+
/**
|
|
26
|
+
* The label text for the 'back to top' button.
|
|
27
|
+
*/
|
|
28
|
+
backToTopLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* The color of the 'back to top' icon (e.g., 'primary', 'accent', 'warn').
|
|
31
|
+
*/
|
|
32
|
+
iconColor?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Determines whether to display the 'back to top' icon.
|
|
35
|
+
*/
|
|
36
|
+
isBackToTopIcon?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* A flag to indicate if the virtual scroll is currently loading data.
|
|
39
|
+
*/
|
|
40
|
+
isLoad?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* The color of the scrollbar thumb.
|
|
43
|
+
*/
|
|
44
|
+
thumbColor?: string;
|
|
45
|
+
/**
|
|
46
|
+
* The color of the scrollbar track.
|
|
47
|
+
*/
|
|
48
|
+
trackColor?: string;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
declare class RuclibVirtualScrollComponent implements OnInit, OnChanges {
|
|
52
|
+
rucInputData: RucVirtualScrollInput;
|
|
53
|
+
itemSize: number;
|
|
54
|
+
viewportWidth: string;
|
|
55
|
+
viewportHeight: string;
|
|
56
|
+
clientHeight: number;
|
|
57
|
+
customTheme: string;
|
|
58
|
+
virtualScrollViewport: CdkVirtualScrollViewport | undefined;
|
|
59
|
+
ngOnInit(): void;
|
|
60
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
61
|
+
ngAfterViewChecked(): void;
|
|
62
|
+
private updateInternalState;
|
|
63
|
+
/**
|
|
64
|
+
* Example public method that can be called by a parent component.
|
|
65
|
+
* Scrolls the virtual scroll viewport to the specified index.
|
|
66
|
+
* @param index The index of the item to scroll to.
|
|
67
|
+
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
68
|
+
*/
|
|
69
|
+
scrollToIndex(): void;
|
|
70
|
+
/**
|
|
71
|
+
* To handle the scroll position on top by using back to top icon
|
|
72
|
+
* @returns scroll position at top
|
|
73
|
+
*/
|
|
74
|
+
handleScroll(): void;
|
|
75
|
+
/**
|
|
76
|
+
* To get the icon of back to top icon
|
|
77
|
+
* @returns default: 'arrow_upward'
|
|
78
|
+
*/
|
|
79
|
+
getBackToTopIcon(): string;
|
|
80
|
+
/**
|
|
81
|
+
* To get the label of back to top icon
|
|
82
|
+
* @returns default: 'Back to Top'
|
|
83
|
+
*/
|
|
84
|
+
getBackToTopLabel(): string;
|
|
85
|
+
/**
|
|
86
|
+
* To get the color of icon
|
|
87
|
+
* @returns default: false
|
|
88
|
+
*/
|
|
89
|
+
getIconColor(): string;
|
|
90
|
+
/**
|
|
91
|
+
* To check wheteher back to top icon shold be there or not in view
|
|
92
|
+
* @returns default: false
|
|
93
|
+
*/
|
|
94
|
+
isBackToTopIcon(): boolean;
|
|
95
|
+
/**
|
|
96
|
+
* To get the thumb color of virtual scroll
|
|
97
|
+
* @returns default: '#888'
|
|
98
|
+
*/
|
|
99
|
+
getScrollbarThumbColor(): string;
|
|
100
|
+
/**
|
|
101
|
+
* To get the track color of virtual scroll
|
|
102
|
+
* @returns default: '#f1f1f1'
|
|
103
|
+
*/
|
|
104
|
+
getScrollbarTrackColor(): string;
|
|
105
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RuclibVirtualScrollComponent, never>;
|
|
106
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RuclibVirtualScrollComponent, "uxp-ruclib-virtual-scroll", never, { "rucInputData": { "alias": "rucInputData"; "required": false; }; "customTheme": { "alias": "customTheme"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
export { RuclibVirtualScrollComponent };
|
package/package.json
CHANGED
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruc-lib/virtual-scroll",
|
|
3
|
-
"version": "
|
|
4
|
-
"license": "MIT",
|
|
3
|
+
"version": "3.1.0",
|
|
5
4
|
"peerDependencies": {
|
|
6
|
-
"@angular/common": "^
|
|
7
|
-
"@angular/core": "^
|
|
8
|
-
"@angular/material": "^15.
|
|
5
|
+
"@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
|
|
6
|
+
"@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
|
|
7
|
+
"@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
|
|
9
8
|
},
|
|
10
9
|
"dependencies": {
|
|
11
10
|
"tslib": "^2.3.0"
|
|
12
11
|
},
|
|
13
|
-
"publishConfig": {
|
|
14
|
-
"access": "public"
|
|
15
|
-
},
|
|
16
12
|
"sideEffects": false,
|
|
17
|
-
"module": "
|
|
18
|
-
"es2020": "fesm2020/ruc-lib-virtual-scroll.mjs",
|
|
19
|
-
"esm2020": "esm2020/ruc-lib-virtual-scroll.mjs",
|
|
20
|
-
"fesm2020": "fesm2020/ruc-lib-virtual-scroll.mjs",
|
|
21
|
-
"fesm2015": "fesm2015/ruc-lib-virtual-scroll.mjs",
|
|
13
|
+
"module": "fesm2022/ruc-lib-virtual-scroll.mjs",
|
|
22
14
|
"typings": "index.d.ts",
|
|
23
15
|
"exports": {
|
|
24
16
|
"./package.json": {
|
|
@@ -26,11 +18,7 @@
|
|
|
26
18
|
},
|
|
27
19
|
".": {
|
|
28
20
|
"types": "./index.d.ts",
|
|
29
|
-
"
|
|
30
|
-
"es2020": "./fesm2020/ruc-lib-virtual-scroll.mjs",
|
|
31
|
-
"es2015": "./fesm2015/ruc-lib-virtual-scroll.mjs",
|
|
32
|
-
"node": "./fesm2015/ruc-lib-virtual-scroll.mjs",
|
|
33
|
-
"default": "./fesm2020/ruc-lib-virtual-scroll.mjs"
|
|
21
|
+
"default": "./fesm2022/ruc-lib-virtual-scroll.mjs"
|
|
34
22
|
}
|
|
35
23
|
}
|
|
36
24
|
}
|
package/esm2020/index.mjs
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export * from './lib/ruclib-virtual-scroll.module';
|
|
2
|
-
export * from './lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component';
|
|
3
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi92aXJ0dWFsLXNjcm9sbC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLDZEQUE2RCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvcnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC9ydWNsaWItdmlydHVhbC1zY3JvbGwuY29tcG9uZW50JzsiXX0=
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { Component, Input, ChangeDetectionStrategy, ViewChild } from '@angular/core';
|
|
2
|
-
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/common";
|
|
5
|
-
import * as i2 from "@angular/cdk/scrolling";
|
|
6
|
-
import * as i3 from "@angular/material/icon";
|
|
7
|
-
export class RuclibVirtualScrollComponent {
|
|
8
|
-
constructor() {
|
|
9
|
-
// Configuration object, aligns with how other components might be fed data in your app
|
|
10
|
-
this.rucInputData = {};
|
|
11
|
-
// Optional: For theming, if your component needs to react to theme changes
|
|
12
|
-
this.customTheme = '';
|
|
13
|
-
this.itemSize = 10; // Default item size in pixels
|
|
14
|
-
this.viewportWidth = '100vw'; // Default viewport width
|
|
15
|
-
this.viewportHeight = '100vh'; // Default viewport height
|
|
16
|
-
this.clientHeight = 0;
|
|
17
|
-
}
|
|
18
|
-
ngOnInit() {
|
|
19
|
-
this.updateInternalState();
|
|
20
|
-
}
|
|
21
|
-
ngOnChanges(changes) {
|
|
22
|
-
// Re-process inputs if they change
|
|
23
|
-
if (changes['rucInputData']) {
|
|
24
|
-
this.updateInternalState();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
ngAfterViewChecked() {
|
|
28
|
-
const isDataLoading = this.rucInputData?.isLoad || false;
|
|
29
|
-
if (isDataLoading) {
|
|
30
|
-
this.scrollToIndex();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
updateInternalState() {
|
|
34
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
35
|
-
// Update itemSize from rucInputData if provided, otherwise keep current or default
|
|
36
|
-
this.itemSize = this.rucInputData?.itemSize !== undefined ? this.rucInputData.itemSize : this.itemSize;
|
|
37
|
-
// Update viewportWidth from rucInputData if provided, otherwise keep current or default
|
|
38
|
-
this.viewportWidth = this.rucInputData?.viewportWidth !== undefined ? this.rucInputData.viewportWidth : this.viewportWidth;
|
|
39
|
-
// Update viewportHeight from rucInputData if provided, otherwise keep current or default
|
|
40
|
-
this.viewportHeight = this.rucInputData?.viewportHeight !== undefined ? this.rucInputData.viewportHeight : this.viewportHeight;
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Example public method that can be called by a parent component.
|
|
44
|
-
* Scrolls the virtual scroll viewport to the specified index.
|
|
45
|
-
* @param index The index of the item to scroll to.
|
|
46
|
-
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
47
|
-
*/
|
|
48
|
-
scrollToIndex() {
|
|
49
|
-
let newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
50
|
-
if (this.virtualScrollViewport) {
|
|
51
|
-
if (newClientHeight !== this.clientHeight) {
|
|
52
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
53
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'end' });
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* To handle the scroll position on top by using back to top icon
|
|
62
|
-
* @returns scroll position at top
|
|
63
|
-
*/
|
|
64
|
-
handleScroll() {
|
|
65
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'start' });
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* To get the icon of back to top icon
|
|
69
|
-
* @returns default: 'arrow_upward'
|
|
70
|
-
*/
|
|
71
|
-
getBackToTopIcon() {
|
|
72
|
-
return this.rucInputData?.backToTopIcon || 'arrow_upward';
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* To get the label of back to top icon
|
|
76
|
-
* @returns default: 'Back to Top'
|
|
77
|
-
*/
|
|
78
|
-
getBackToTopLabel() {
|
|
79
|
-
return this.rucInputData?.backToTopLabel || 'Back to Top';
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* To get the color of icon
|
|
83
|
-
* @returns default: false
|
|
84
|
-
*/
|
|
85
|
-
getIconColor() {
|
|
86
|
-
return this.rucInputData?.iconColor || 'primary';
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* To check wheteher back to top icon shold be there or not in view
|
|
90
|
-
* @returns default: false
|
|
91
|
-
*/
|
|
92
|
-
isBackToTopIcon() {
|
|
93
|
-
return this.rucInputData?.isBackToTopIcon || false;
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* To get the thumb color of virtual scroll
|
|
97
|
-
* @returns default: '#888'
|
|
98
|
-
*/
|
|
99
|
-
getScrollbarThumbColor() {
|
|
100
|
-
return this.rucInputData?.thumbColor || '#888';
|
|
101
|
-
}
|
|
102
|
-
/**
|
|
103
|
-
* To get the track color of virtual scroll
|
|
104
|
-
* @returns default: '#f1f1f1'
|
|
105
|
-
*/
|
|
106
|
-
getScrollbarTrackColor() {
|
|
107
|
-
return this.rucInputData?.trackColor || '#f1f1f1';
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
RuclibVirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
RuclibVirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RuclibVirtualScrollComponent, selector: "uxp-ruclib-virtual-scroll", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
|
|
113
|
-
type: Component,
|
|
114
|
-
args: [{ selector: 'uxp-ruclib-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"] }]
|
|
115
|
-
}], ctorParameters: function () { return []; }, propDecorators: { rucInputData: [{
|
|
116
|
-
type: Input
|
|
117
|
-
}], customTheme: [{
|
|
118
|
-
type: Input
|
|
119
|
-
}], virtualScrollViewport: [{
|
|
120
|
-
type: ViewChild,
|
|
121
|
-
args: [CdkVirtualScrollViewport]
|
|
122
|
-
}] } });
|
|
123
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXZpcnR1YWwtc2Nyb2xsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3ZpcnR1YWwtc2Nyb2xsL3NyYy9saWIvcnVjbGliLXZpcnR1YWwtc2Nyb2xsL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi92aXJ0dWFsLXNjcm9sbC9zcmMvbGliL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC9ydWNsaWItdmlydHVhbC1zY3JvbGwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQW9DLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2SCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7QUFVbEUsTUFBTSxPQUFPLDRCQUE0QjtJQWN2QztRQWJBLHVGQUF1RjtRQUM5RSxpQkFBWSxHQUEwQixFQUFFLENBQUM7UUFFbEQsMkVBQTJFO1FBQ2xFLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBRWxDLGFBQVEsR0FBVyxFQUFFLENBQUMsQ0FBQyw4QkFBOEI7UUFDckQsa0JBQWEsR0FBVyxPQUFPLENBQUMsQ0FBQyx5QkFBeUI7UUFDMUQsbUJBQWMsR0FBVyxPQUFPLENBQUMsQ0FBQywwQkFBMEI7UUFDNUQsaUJBQVksR0FBVyxDQUFDLENBQUM7SUFJVixDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLG1DQUFtQztRQUNuQyxJQUFJLE9BQU8sQ0FBQyxjQUFjLENBQUMsRUFBRTtZQUMzQixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztTQUM1QjtJQUNILENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxNQUFNLElBQUksS0FBSyxDQUFDO1FBQ3pELElBQUcsYUFBYSxFQUFFO1lBQ2hCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFTyxtQkFBbUI7UUFDekIsSUFBSSxDQUFDLFlBQVksR0FBRyxRQUFRLENBQUMsc0JBQXNCLENBQUMsb0NBQW9DLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7UUFFMUcsbUZBQW1GO1FBQ25GLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxRQUFRLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUV2Ryx3RkFBd0Y7UUFDeEYsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLGFBQWEsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBRTNILHlGQUF5RjtRQUN6RixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsY0FBYyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDakksQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0ksYUFBYTtRQUNsQixJQUFJLGVBQWUsR0FBRyxRQUFRLENBQUMsc0JBQXNCLENBQUMsb0NBQW9DLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7UUFDNUcsSUFBSSxJQUFJLENBQUMscUJBQXFCLEVBQUU7WUFDOUIsSUFBRyxlQUFlLEtBQUssSUFBSSxDQUFDLFlBQVksRUFBRTtnQkFDeEMsSUFBSSxDQUFDLFlBQVksR0FBRyxRQUFRLENBQUMsc0JBQXNCLENBQUMsb0NBQW9DLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7Z0JBQzFHLFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxvQ0FBb0MsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7YUFDN0g7U0FDRjthQUFNO1lBQ0wsT0FBTyxDQUFDLElBQUksQ0FBQyxpRUFBaUUsQ0FBQyxDQUFDO1NBQ2pGO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNJLFlBQVk7UUFDakIsUUFBUSxDQUFDLHNCQUFzQixDQUFDLG9DQUFvQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsY0FBYyxDQUFDLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQztJQUNoSSxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsZ0JBQWdCO1FBQ2QsT0FBTyxJQUFJLENBQUMsWUFBWSxFQUFFLGFBQWEsSUFBSSxjQUFjLENBQUM7SUFDNUQsQ0FBQztJQUVEOzs7T0FHRztJQUNILGlCQUFpQjtRQUNmLE9BQU8sSUFBSSxDQUFDLFlBQVksRUFBRSxjQUFjLElBQUksYUFBYSxDQUFDO0lBQzVELENBQUM7SUFFRDs7O09BR0c7SUFDSCxZQUFZO1FBQ1YsT0FBTyxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsSUFBSSxTQUFTLENBQUM7SUFDbkQsQ0FBQztJQUVEOzs7T0FHRztJQUNILGVBQWU7UUFDYixPQUFPLElBQUksQ0FBQyxZQUFZLEVBQUUsZUFBZSxJQUFJLEtBQUssQ0FBQztJQUNyRCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsc0JBQXNCO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFlBQVksRUFBRSxVQUFVLElBQUksTUFBTSxDQUFDO0lBQ2pELENBQUM7SUFFRDs7O09BR0c7SUFDSCxzQkFBc0I7UUFDcEIsT0FBTyxJQUFJLENBQUMsWUFBWSxFQUFFLFVBQVUsSUFBSSxTQUFTLENBQUM7SUFDcEQsQ0FBQzs7MEhBdkhVLDRCQUE0Qjs4R0FBNUIsNEJBQTRCLDhMQVk1Qix3QkFBd0IscUVDdkJyQywwbkJBVU07NEZEQ08sNEJBQTRCO2tCQVB4QyxTQUFTOytCQUNFLDJCQUEyQixtQkFHcEIsdUJBQXVCLENBQUMsTUFBTTswRUFLdEMsWUFBWTtzQkFBcEIsS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLO2dCQU8rQixxQkFBcUI7c0JBQXpELFNBQVM7dUJBQUMsd0JBQXdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIE9uSW5pdCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3Njcm9sbGluZyc7XHJcbmltcG9ydCB7IFJ1Y1ZpcnR1YWxTY3JvbGxJbnB1dCB9IGZyb20gJy4uLy4uL21vZGVsL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3V4cC1ydWNsaWItdmlydHVhbC1zY3JvbGwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9ydWNsaWItdmlydHVhbC1zY3JvbGwuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5jb21wb25lbnQuc2NzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIFJ1Y2xpYlZpcnR1YWxTY3JvbGxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcbiAgLy8gQ29uZmlndXJhdGlvbiBvYmplY3QsIGFsaWducyB3aXRoIGhvdyBvdGhlciBjb21wb25lbnRzIG1pZ2h0IGJlIGZlZCBkYXRhIGluIHlvdXIgYXBwXHJcbiAgQElucHV0KCkgcnVjSW5wdXREYXRhOiBSdWNWaXJ0dWFsU2Nyb2xsSW5wdXQgPSB7fTtcclxuXHJcbiAgLy8gT3B0aW9uYWw6IEZvciB0aGVtaW5nLCBpZiB5b3VyIGNvbXBvbmVudCBuZWVkcyB0byByZWFjdCB0byB0aGVtZSBjaGFuZ2VzXHJcbiAgQElucHV0KCkgY3VzdG9tVGhlbWU6IHN0cmluZyA9ICcnO1xyXG5cclxuICBpdGVtU2l6ZTogbnVtYmVyID0gMTA7IC8vIERlZmF1bHQgaXRlbSBzaXplIGluIHBpeGVsc1xyXG4gIHZpZXdwb3J0V2lkdGg6IHN0cmluZyA9ICcxMDB2dyc7IC8vIERlZmF1bHQgdmlld3BvcnQgd2lkdGhcclxuICB2aWV3cG9ydEhlaWdodDogc3RyaW5nID0gJzEwMHZoJzsgLy8gRGVmYXVsdCB2aWV3cG9ydCBoZWlnaHRcclxuICBjbGllbnRIZWlnaHQ6IG51bWJlciA9IDA7XHJcblxyXG4gIEBWaWV3Q2hpbGQoQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0KSB2aXJ0dWFsU2Nyb2xsVmlld3BvcnQ6IENka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydCB8IHVuZGVmaW5lZDtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMudXBkYXRlSW50ZXJuYWxTdGF0ZSgpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICAgLy8gUmUtcHJvY2VzcyBpbnB1dHMgaWYgdGhleSBjaGFuZ2VcclxuICAgIGlmIChjaGFuZ2VzWydydWNJbnB1dERhdGEnXSkge1xyXG4gICAgICB0aGlzLnVwZGF0ZUludGVybmFsU3RhdGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3Q2hlY2tlZCgpIHtcclxuICAgIGNvbnN0IGlzRGF0YUxvYWRpbmcgPSB0aGlzLnJ1Y0lucHV0RGF0YT8uaXNMb2FkIHx8IGZhbHNlO1xyXG4gICAgaWYoaXNEYXRhTG9hZGluZykge1xyXG4gICAgICB0aGlzLnNjcm9sbFRvSW5kZXgoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgdXBkYXRlSW50ZXJuYWxTdGF0ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuY2xpZW50SGVpZ2h0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnY2RrLXZpcnR1YWwtc2Nyb2xsLWNvbnRlbnQtd3JhcHBlcicpWzBdLmNsaWVudEhlaWdodDtcclxuICAgIFxyXG4gICAgLy8gVXBkYXRlIGl0ZW1TaXplIGZyb20gcnVjSW5wdXREYXRhIGlmIHByb3ZpZGVkLCBvdGhlcndpc2Uga2VlcCBjdXJyZW50IG9yIGRlZmF1bHRcclxuICAgIHRoaXMuaXRlbVNpemUgPSB0aGlzLnJ1Y0lucHV0RGF0YT8uaXRlbVNpemUgIT09IHVuZGVmaW5lZCA/IHRoaXMucnVjSW5wdXREYXRhLml0ZW1TaXplIDogdGhpcy5pdGVtU2l6ZTtcclxuXHJcbiAgICAvLyBVcGRhdGUgdmlld3BvcnRXaWR0aCBmcm9tIHJ1Y0lucHV0RGF0YSBpZiBwcm92aWRlZCwgb3RoZXJ3aXNlIGtlZXAgY3VycmVudCBvciBkZWZhdWx0XHJcbiAgICB0aGlzLnZpZXdwb3J0V2lkdGggPSB0aGlzLnJ1Y0lucHV0RGF0YT8udmlld3BvcnRXaWR0aCAhPT0gdW5kZWZpbmVkID8gdGhpcy5ydWNJbnB1dERhdGEudmlld3BvcnRXaWR0aCA6IHRoaXMudmlld3BvcnRXaWR0aDtcclxuICAgIFxyXG4gICAgLy8gVXBkYXRlIHZpZXdwb3J0SGVpZ2h0IGZyb20gcnVjSW5wdXREYXRhIGlmIHByb3ZpZGVkLCBvdGhlcndpc2Uga2VlcCBjdXJyZW50IG9yIGRlZmF1bHRcclxuICAgIHRoaXMudmlld3BvcnRIZWlnaHQgPSB0aGlzLnJ1Y0lucHV0RGF0YT8udmlld3BvcnRIZWlnaHQgIT09IHVuZGVmaW5lZCA/IHRoaXMucnVjSW5wdXREYXRhLnZpZXdwb3J0SGVpZ2h0IDogdGhpcy52aWV3cG9ydEhlaWdodDtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEV4YW1wbGUgcHVibGljIG1ldGhvZCB0aGF0IGNhbiBiZSBjYWxsZWQgYnkgYSBwYXJlbnQgY29tcG9uZW50LlxyXG4gICAqIFNjcm9sbHMgdGhlIHZpcnR1YWwgc2Nyb2xsIHZpZXdwb3J0IHRvIHRoZSBzcGVjaWZpZWQgaW5kZXguXHJcbiAgICogQHBhcmFtIGluZGV4IFRoZSBpbmRleCBvZiB0aGUgaXRlbSB0byBzY3JvbGwgdG8uXHJcbiAgICogQHBhcmFtIGJlaGF2aW9yIE9wdGlvbmFsIHNjcm9sbCBiZWhhdmlvciAoJ2F1dG8nLCAnc21vb3RoJykuXHJcbiAgICovXHJcbiAgcHVibGljIHNjcm9sbFRvSW5kZXgoKTogdm9pZCB7XHJcbiAgICBsZXQgbmV3Q2xpZW50SGVpZ2h0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnY2RrLXZpcnR1YWwtc2Nyb2xsLWNvbnRlbnQtd3JhcHBlcicpWzBdLmNsaWVudEhlaWdodDtcclxuICAgIGlmICh0aGlzLnZpcnR1YWxTY3JvbGxWaWV3cG9ydCkge1xyXG4gICAgICBpZihuZXdDbGllbnRIZWlnaHQgIT09IHRoaXMuY2xpZW50SGVpZ2h0KSB7XHJcbiAgICAgICAgdGhpcy5jbGllbnRIZWlnaHQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdjZGstdmlydHVhbC1zY3JvbGwtY29udGVudC13cmFwcGVyJylbMF0uY2xpZW50SGVpZ2h0O1xyXG4gICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2Nkay12aXJ0dWFsLXNjcm9sbC1jb250ZW50LXdyYXBwZXInKVswXS5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnYXV0bycsIGJsb2NrOiAnZW5kJyB9KTtcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgY29uc29sZS53YXJuKCdSdWNsaWJWaXJ0dWFsU2Nyb2xsQ29tcG9uZW50OiBWaWV3cG9ydCBub3QgYXZhaWxhYmxlIHRvIHNjcm9sbC4nKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFRvIGhhbmRsZSB0aGUgc2Nyb2xsIHBvc2l0aW9uIG9uIHRvcCBieSB1c2luZyBiYWNrIHRvIHRvcCBpY29uXHJcbiAgICogQHJldHVybnMgc2Nyb2xsIHBvc2l0aW9uIGF0IHRvcCBcclxuICAgKi9cclxuICBwdWJsaWMgaGFuZGxlU2Nyb2xsKCk6IHZvaWQge1xyXG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnY2RrLXZpcnR1YWwtc2Nyb2xsLWNvbnRlbnQtd3JhcHBlcicpWzBdLnNjcm9sbEludG9WaWV3KHsgYmVoYXZpb3I6ICdhdXRvJywgYmxvY2s6ICdzdGFydCcgfSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBUbyBnZXQgdGhlIGljb24gb2YgYmFjayB0byB0b3AgaWNvblxyXG4gICAqIEByZXR1cm5zIGRlZmF1bHQ6ICdhcnJvd191cHdhcmQnIFxyXG4gICAqL1xyXG4gIGdldEJhY2tUb1RvcEljb24oKTogc3RyaW5nIHtcclxuICAgIHJldHVybiB0aGlzLnJ1Y0lucHV0RGF0YT8uYmFja1RvVG9wSWNvbiB8fCAnYXJyb3dfdXB3YXJkJztcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFRvIGdldCB0aGUgbGFiZWwgb2YgYmFjayB0byB0b3AgaWNvblxyXG4gICAqIEByZXR1cm5zIGRlZmF1bHQ6ICdCYWNrIHRvIFRvcCcgXHJcbiAgICovXHJcbiAgZ2V0QmFja1RvVG9wTGFiZWwoKTogc3RyaW5nIHsgXHJcbiAgICByZXR1cm4gdGhpcy5ydWNJbnB1dERhdGE/LmJhY2tUb1RvcExhYmVsIHx8ICdCYWNrIHRvIFRvcCc7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBUbyBnZXQgdGhlIGNvbG9yIG9mIGljb25cclxuICAgKiBAcmV0dXJucyBkZWZhdWx0OiBmYWxzZVxyXG4gICAqL1xyXG4gIGdldEljb25Db2xvcigpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRoaXMucnVjSW5wdXREYXRhPy5pY29uQ29sb3IgfHwgJ3ByaW1hcnknO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVG8gY2hlY2sgd2hldGVoZXIgYmFjayB0byB0b3AgaWNvbiBzaG9sZCBiZSB0aGVyZSBvciBub3QgaW4gdmlld1xyXG4gICAqIEByZXR1cm5zIGRlZmF1bHQ6IGZhbHNlXHJcbiAgICovXHJcbiAgaXNCYWNrVG9Ub3BJY29uKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMucnVjSW5wdXREYXRhPy5pc0JhY2tUb1RvcEljb24gfHwgZmFsc2U7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBUbyBnZXQgdGhlIHRodW1iIGNvbG9yIG9mIHZpcnR1YWwgc2Nyb2xsXHJcbiAgICogQHJldHVybnMgZGVmYXVsdDogJyM4ODgnXHJcbiAgICovXHJcbiAgZ2V0U2Nyb2xsYmFyVGh1bWJDb2xvcigpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRoaXMucnVjSW5wdXREYXRhPy50aHVtYkNvbG9yIHx8ICcjODg4JztcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFRvIGdldCB0aGUgdHJhY2sgY29sb3Igb2YgdmlydHVhbCBzY3JvbGxcclxuICAgKiBAcmV0dXJucyBkZWZhdWx0OiAnI2YxZjFmMSdcclxuICAgKi9cclxuICBnZXRTY3JvbGxiYXJUcmFja0NvbG9yKCk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gdGhpcy5ydWNJbnB1dERhdGE/LnRyYWNrQ29sb3IgfHwgJyNmMWYxZjEnO1xyXG4gIH1cclxufVxyXG4iLCI8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0XHJcbiAgW3N0eWxlLnNjcm9sbGJhci1jb2xvcl09XCJnZXRTY3JvbGxiYXJUaHVtYkNvbG9yKCkgKyAnICcgKyBnZXRTY3JvbGxiYXJUcmFja0NvbG9yKClcIlxyXG4gIGNsYXNzPVwidmlydHVhbC1zY3JvbGxhci13cmFwcGVyXCIgaXRlbVNpemU9XCJpdGVtU2l6ZVwiIFtzdHlsZS53aWR0aF09XCJ2aWV3cG9ydFdpZHRoXCIgW3N0eWxlLmhlaWdodF09XCJ2aWV3cG9ydEhlaWdodFwiPlxyXG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuPC9jZGstdmlydHVhbC1zY3JvbGwtdmlld3BvcnQ+XHJcblxyXG48ZGl2IGNsYXNzPVwidmlydHVhbC1zY3JvbGxhcl9fYmFjay10by10b3BcIiAqbmdJZj1cImlzQmFja1RvVG9wSWNvbigpXCI+XHJcbiAgPGJ1dHRvbiBjbGFzcz1cInZpcnR1YWwtc2Nyb2xsYXJfX2JhY2stdG8tdG9wLWJ0blwiIG1hdC1taW5pLWZhYiBhcmlhLWxhYmVsPVwiZ2V0QmFja1RvVG9wTGFiZWwoKVwiIChjbGljayk9XCJoYW5kbGVTY3JvbGwoKVwiPlxyXG4gICAgPG1hdC1pY29uIGNvbG9yPVwie3tnZXRJY29uQ29sb3IoKX19XCI+e3tnZXRCYWNrVG9Ub3BJY29uKCl9fTwvbWF0LWljb24+XHJcbiAgPC9idXR0b24+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { NgModule } from '@angular/core';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import { RuclibVirtualScrollComponent } from './ruclib-virtual-scroll/ruclib-virtual-scroll.component';
|
|
4
|
-
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
5
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
export class RuclibVirtualScrollModule {
|
|
8
|
-
}
|
|
9
|
-
RuclibVirtualScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
10
|
-
RuclibVirtualScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, declarations: [RuclibVirtualScrollComponent], imports: [CommonModule, ScrollingModule, MatIconModule], exports: [RuclibVirtualScrollComponent] });
|
|
11
|
-
RuclibVirtualScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, imports: [CommonModule, ScrollingModule, MatIconModule] });
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, decorators: [{
|
|
13
|
-
type: NgModule,
|
|
14
|
-
args: [{
|
|
15
|
-
imports: [CommonModule, ScrollingModule, MatIconModule],
|
|
16
|
-
declarations: [RuclibVirtualScrollComponent],
|
|
17
|
-
exports: [RuclibVirtualScrollComponent],
|
|
18
|
-
}]
|
|
19
|
-
}] });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3ZpcnR1YWwtc2Nyb2xsL3NyYy9saWIvcnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSx5REFBeUQsQ0FBQztBQUN2RyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQU92RCxNQUFNLE9BQU8seUJBQXlCOzt1SEFBekIseUJBQXlCO3dIQUF6Qix5QkFBeUIsaUJBSHJCLDRCQUE0QixhQURqQyxZQUFZLEVBQUUsZUFBZSxFQUFFLGFBQWEsYUFFNUMsNEJBQTRCO3dIQUUzQix5QkFBeUIsWUFKMUIsWUFBWSxFQUFFLGVBQWUsRUFBRSxhQUFhOzRGQUkzQyx5QkFBeUI7a0JBTHJDLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxhQUFhLENBQUM7b0JBQ3ZELFlBQVksRUFBRSxDQUFDLDRCQUE0QixDQUFDO29CQUM1QyxPQUFPLEVBQUUsQ0FBQyw0QkFBNEIsQ0FBQztpQkFDeEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBSdWNsaWJWaXJ0dWFsU2Nyb2xsQ29tcG9uZW50IH0gZnJvbSAnLi9ydWNsaWItdmlydHVhbC1zY3JvbGwvcnVjbGliLXZpcnR1YWwtc2Nyb2xsLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFNjcm9sbGluZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zY3JvbGxpbmcnO1xyXG5pbXBvcnQgeyBNYXRJY29uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFNjcm9sbGluZ01vZHVsZSwgTWF0SWNvbk1vZHVsZV0sXHJcbiAgZGVjbGFyYXRpb25zOiBbUnVjbGliVmlydHVhbFNjcm9sbENvbXBvbmVudF0sXHJcbiAgZXhwb3J0czogW1J1Y2xpYlZpcnR1YWxTY3JvbGxDb21wb25lbnRdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUnVjbGliVmlydHVhbFNjcm9sbE1vZHVsZSB7fVxyXG4iXX0=
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvdmlydHVhbC1zY3JvbGwvc3JjL21vZGVsL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXHJcbiAqSW50ZXJmYWNlIGZvciBkZWZpbmluZyB0aGUgVmlydHVhbCBTY3JvbGwgSW5wdXRcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgUnVjVmlydHVhbFNjcm9sbElucHV0IHtcclxuICAvKipcclxuICAgKiBUaGUgc2l6ZSBvZiBlYWNoIGl0ZW0gaW4gdGhlIGxpc3QgaW4gcGl4ZWxzLlxyXG4gICAqL1xyXG4gIGl0ZW1TaXplPzogbnVtYmVyO1xyXG4gIC8qKlxyXG4gICAqIFRoZSB3aWR0aCBvZiB0aGUgdmlydHVhbCBzY3JvbGwgdmlld3BvcnQuIENhbiBiZSBhIHBlcmNlbnRhZ2UsIHBpeGVscywgb3Igb3RoZXIgQ1NTIHVuaXQuXHJcbiAgICovXHJcbiAgdmlld3BvcnRXaWR0aD86IHN0cmluZztcclxuICAvKipcclxuICAgKiBUaGUgaGVpZ2h0IG9mIHRoZSB2aXJ0dWFsIHNjcm9sbCB2aWV3cG9ydC4gQ2FuIGJlIGEgcGVyY2VudGFnZSwgcGl4ZWxzLCBvciBvdGhlciBDU1MgdW5pdC5cclxuICAgKi9cclxuICB2aWV3cG9ydEhlaWdodD86IHN0cmluZztcclxuICAvKipcclxuICAgKiBUaGUgbmFtZSBvZiB0aGUgTWF0ZXJpYWwgaWNvbiB0byB1c2UgZm9yIHRoZSAnYmFjayB0byB0b3AnIGJ1dHRvbi5cclxuICAgKi9cclxuICBiYWNrVG9Ub3BJY29uPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIFRoZSBsYWJlbCB0ZXh0IGZvciB0aGUgJ2JhY2sgdG8gdG9wJyBidXR0b24uXHJcbiAgICovXHJcbiAgYmFja1RvVG9wTGFiZWw/OiBzdHJpbmc7XHJcbiAgLyoqXHJcbiAgICogVGhlIGNvbG9yIG9mIHRoZSAnYmFjayB0byB0b3AnIGljb24gKGUuZy4sICdwcmltYXJ5JywgJ2FjY2VudCcsICd3YXJuJykuXHJcbiAgICovXHJcbiAgaWNvbkNvbG9yPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIERldGVybWluZXMgd2hldGhlciB0byBkaXNwbGF5IHRoZSAnYmFjayB0byB0b3AnIGljb24uXHJcbiAgICovXHJcbiAgaXNCYWNrVG9Ub3BJY29uPzogYm9vbGVhbjtcclxuICAvKipcclxuICAgKiBBIGZsYWcgdG8gaW5kaWNhdGUgaWYgdGhlIHZpcnR1YWwgc2Nyb2xsIGlzIGN1cnJlbnRseSBsb2FkaW5nIGRhdGEuXHJcbiAgICovXHJcbiAgaXNMb2FkPzogYm9vbGVhbjtcclxuICAvKipcclxuICAgKiBUaGUgY29sb3Igb2YgdGhlIHNjcm9sbGJhciB0aHVtYi5cclxuICAgKi9cclxuICB0aHVtYkNvbG9yPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIFRoZSBjb2xvciBvZiB0aGUgc2Nyb2xsYmFyIHRyYWNrLlxyXG4gICAqL1xyXG4gIHRyYWNrQ29sb3I/OiBzdHJpbmc7XHJcbn0iXX0=
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generated bundle index. Do not edit.
|
|
3
|
-
*/
|
|
4
|
-
export * from './index';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjLWxpYi12aXJ0dWFsLXNjcm9sbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvcnVjbGliL3ZpcnR1YWwtc2Nyb2xsL3NyYy9ydWMtbGliLXZpcnR1YWwtc2Nyb2xsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i2 from '@angular/cdk/scrolling';
|
|
6
|
-
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
7
|
-
import * as i3 from '@angular/material/icon';
|
|
8
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
-
|
|
10
|
-
class RuclibVirtualScrollComponent {
|
|
11
|
-
constructor() {
|
|
12
|
-
// Configuration object, aligns with how other components might be fed data in your app
|
|
13
|
-
this.rucInputData = {};
|
|
14
|
-
// Optional: For theming, if your component needs to react to theme changes
|
|
15
|
-
this.customTheme = '';
|
|
16
|
-
this.itemSize = 10; // Default item size in pixels
|
|
17
|
-
this.viewportWidth = '100vw'; // Default viewport width
|
|
18
|
-
this.viewportHeight = '100vh'; // Default viewport height
|
|
19
|
-
this.clientHeight = 0;
|
|
20
|
-
}
|
|
21
|
-
ngOnInit() {
|
|
22
|
-
this.updateInternalState();
|
|
23
|
-
}
|
|
24
|
-
ngOnChanges(changes) {
|
|
25
|
-
// Re-process inputs if they change
|
|
26
|
-
if (changes['rucInputData']) {
|
|
27
|
-
this.updateInternalState();
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
ngAfterViewChecked() {
|
|
31
|
-
var _a;
|
|
32
|
-
const isDataLoading = ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.isLoad) || false;
|
|
33
|
-
if (isDataLoading) {
|
|
34
|
-
this.scrollToIndex();
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
updateInternalState() {
|
|
38
|
-
var _a, _b, _c;
|
|
39
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
40
|
-
// Update itemSize from rucInputData if provided, otherwise keep current or default
|
|
41
|
-
this.itemSize = ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.itemSize) !== undefined ? this.rucInputData.itemSize : this.itemSize;
|
|
42
|
-
// Update viewportWidth from rucInputData if provided, otherwise keep current or default
|
|
43
|
-
this.viewportWidth = ((_b = this.rucInputData) === null || _b === void 0 ? void 0 : _b.viewportWidth) !== undefined ? this.rucInputData.viewportWidth : this.viewportWidth;
|
|
44
|
-
// Update viewportHeight from rucInputData if provided, otherwise keep current or default
|
|
45
|
-
this.viewportHeight = ((_c = this.rucInputData) === null || _c === void 0 ? void 0 : _c.viewportHeight) !== undefined ? this.rucInputData.viewportHeight : this.viewportHeight;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Example public method that can be called by a parent component.
|
|
49
|
-
* Scrolls the virtual scroll viewport to the specified index.
|
|
50
|
-
* @param index The index of the item to scroll to.
|
|
51
|
-
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
52
|
-
*/
|
|
53
|
-
scrollToIndex() {
|
|
54
|
-
let newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
55
|
-
if (this.virtualScrollViewport) {
|
|
56
|
-
if (newClientHeight !== this.clientHeight) {
|
|
57
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
58
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'end' });
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* To handle the scroll position on top by using back to top icon
|
|
67
|
-
* @returns scroll position at top
|
|
68
|
-
*/
|
|
69
|
-
handleScroll() {
|
|
70
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'start' });
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* To get the icon of back to top icon
|
|
74
|
-
* @returns default: 'arrow_upward'
|
|
75
|
-
*/
|
|
76
|
-
getBackToTopIcon() {
|
|
77
|
-
var _a;
|
|
78
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.backToTopIcon) || 'arrow_upward';
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* To get the label of back to top icon
|
|
82
|
-
* @returns default: 'Back to Top'
|
|
83
|
-
*/
|
|
84
|
-
getBackToTopLabel() {
|
|
85
|
-
var _a;
|
|
86
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.backToTopLabel) || 'Back to Top';
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* To get the color of icon
|
|
90
|
-
* @returns default: false
|
|
91
|
-
*/
|
|
92
|
-
getIconColor() {
|
|
93
|
-
var _a;
|
|
94
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.iconColor) || 'primary';
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* To check wheteher back to top icon shold be there or not in view
|
|
98
|
-
* @returns default: false
|
|
99
|
-
*/
|
|
100
|
-
isBackToTopIcon() {
|
|
101
|
-
var _a;
|
|
102
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.isBackToTopIcon) || false;
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* To get the thumb color of virtual scroll
|
|
106
|
-
* @returns default: '#888'
|
|
107
|
-
*/
|
|
108
|
-
getScrollbarThumbColor() {
|
|
109
|
-
var _a;
|
|
110
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.thumbColor) || '#888';
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* To get the track color of virtual scroll
|
|
114
|
-
* @returns default: '#f1f1f1'
|
|
115
|
-
*/
|
|
116
|
-
getScrollbarTrackColor() {
|
|
117
|
-
var _a;
|
|
118
|
-
return ((_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.trackColor) || '#f1f1f1';
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
RuclibVirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
RuclibVirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RuclibVirtualScrollComponent, selector: "uxp-ruclib-virtual-scroll", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
|
|
124
|
-
type: Component,
|
|
125
|
-
args: [{ selector: 'uxp-ruclib-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"] }]
|
|
126
|
-
}], ctorParameters: function () { return []; }, propDecorators: { rucInputData: [{
|
|
127
|
-
type: Input
|
|
128
|
-
}], customTheme: [{
|
|
129
|
-
type: Input
|
|
130
|
-
}], virtualScrollViewport: [{
|
|
131
|
-
type: ViewChild,
|
|
132
|
-
args: [CdkVirtualScrollViewport]
|
|
133
|
-
}] } });
|
|
134
|
-
|
|
135
|
-
class RuclibVirtualScrollModule {
|
|
136
|
-
}
|
|
137
|
-
RuclibVirtualScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
138
|
-
RuclibVirtualScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, declarations: [RuclibVirtualScrollComponent], imports: [CommonModule, ScrollingModule, MatIconModule], exports: [RuclibVirtualScrollComponent] });
|
|
139
|
-
RuclibVirtualScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, imports: [CommonModule, ScrollingModule, MatIconModule] });
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, decorators: [{
|
|
141
|
-
type: NgModule,
|
|
142
|
-
args: [{
|
|
143
|
-
imports: [CommonModule, ScrollingModule, MatIconModule],
|
|
144
|
-
declarations: [RuclibVirtualScrollComponent],
|
|
145
|
-
exports: [RuclibVirtualScrollComponent],
|
|
146
|
-
}]
|
|
147
|
-
}] });
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* Generated bundle index. Do not edit.
|
|
151
|
-
*/
|
|
152
|
-
|
|
153
|
-
export { RuclibVirtualScrollComponent, RuclibVirtualScrollModule };
|
|
154
|
-
//# sourceMappingURL=ruc-lib-virtual-scroll.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ruc-lib-virtual-scroll.mjs","sources":["../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.ts","../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.html","../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll.module.ts","../../../../../libs/ruclib/virtual-scroll/src/ruc-lib-virtual-scroll.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, OnInit, OnChanges, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\r\nimport { RucVirtualScrollInput } from '../../model/ruclib-virtual-scroll.model';\r\n\r\n@Component({\r\n selector: 'uxp-ruclib-virtual-scroll',\r\n templateUrl: './ruclib-virtual-scroll.component.html',\r\n styleUrls: ['./ruclib-virtual-scroll.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\n\r\nexport class RuclibVirtualScrollComponent implements OnInit, OnChanges {\r\n // Configuration object, aligns with how other components might be fed data in your app\r\n @Input() rucInputData: RucVirtualScrollInput = {};\r\n\r\n // Optional: For theming, if your component needs to react to theme changes\r\n @Input() customTheme: string = '';\r\n\r\n itemSize: number = 10; // Default item size in pixels\r\n viewportWidth: string = '100vw'; // Default viewport width\r\n viewportHeight: string = '100vh'; // Default viewport height\r\n clientHeight: number = 0;\r\n\r\n @ViewChild(CdkVirtualScrollViewport) virtualScrollViewport: CdkVirtualScrollViewport | undefined;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n this.updateInternalState();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // Re-process inputs if they change\r\n if (changes['rucInputData']) {\r\n this.updateInternalState();\r\n }\r\n }\r\n\r\n ngAfterViewChecked() {\r\n const isDataLoading = this.rucInputData?.isLoad || false;\r\n if(isDataLoading) {\r\n this.scrollToIndex();\r\n }\r\n }\r\n\r\n private updateInternalState(): void {\r\n this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n \r\n // Update itemSize from rucInputData if provided, otherwise keep current or default\r\n this.itemSize = this.rucInputData?.itemSize !== undefined ? this.rucInputData.itemSize : this.itemSize;\r\n\r\n // Update viewportWidth from rucInputData if provided, otherwise keep current or default\r\n this.viewportWidth = this.rucInputData?.viewportWidth !== undefined ? this.rucInputData.viewportWidth : this.viewportWidth;\r\n \r\n // Update viewportHeight from rucInputData if provided, otherwise keep current or default\r\n this.viewportHeight = this.rucInputData?.viewportHeight !== undefined ? this.rucInputData.viewportHeight : this.viewportHeight;\r\n }\r\n\r\n /**\r\n * Example public method that can be called by a parent component.\r\n * Scrolls the virtual scroll viewport to the specified index.\r\n * @param index The index of the item to scroll to.\r\n * @param behavior Optional scroll behavior ('auto', 'smooth').\r\n */\r\n public scrollToIndex(): void {\r\n let newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n if (this.virtualScrollViewport) {\r\n if(newClientHeight !== this.clientHeight) {\r\n this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'end' });\r\n }\r\n } else {\r\n console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');\r\n }\r\n }\r\n\r\n /**\r\n * To handle the scroll position on top by using back to top icon\r\n * @returns scroll position at top \r\n */\r\n public handleScroll(): void {\r\n document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'start' });\r\n }\r\n\r\n /**\r\n * To get the icon of back to top icon\r\n * @returns default: 'arrow_upward' \r\n */\r\n getBackToTopIcon(): string {\r\n return this.rucInputData?.backToTopIcon || 'arrow_upward';\r\n }\r\n\r\n /**\r\n * To get the label of back to top icon\r\n * @returns default: 'Back to Top' \r\n */\r\n getBackToTopLabel(): string { \r\n return this.rucInputData?.backToTopLabel || 'Back to Top';\r\n }\r\n\r\n /**\r\n * To get the color of icon\r\n * @returns default: false\r\n */\r\n getIconColor(): string {\r\n return this.rucInputData?.iconColor || 'primary';\r\n }\r\n\r\n /**\r\n * To check wheteher back to top icon shold be there or not in view\r\n * @returns default: false\r\n */\r\n isBackToTopIcon(): boolean {\r\n return this.rucInputData?.isBackToTopIcon || false;\r\n }\r\n\r\n /**\r\n * To get the thumb color of virtual scroll\r\n * @returns default: '#888'\r\n */\r\n getScrollbarThumbColor(): string {\r\n return this.rucInputData?.thumbColor || '#888';\r\n }\r\n\r\n /**\r\n * To get the track color of virtual scroll\r\n * @returns default: '#f1f1f1'\r\n */\r\n getScrollbarTrackColor(): string {\r\n return this.rucInputData?.trackColor || '#f1f1f1';\r\n }\r\n}\r\n","<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RuclibVirtualScrollComponent } from './ruclib-virtual-scroll/ruclib-virtual-scroll.component';\r\nimport { ScrollingModule } from '@angular/cdk/scrolling';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n@NgModule({\r\n imports: [CommonModule, ScrollingModule, MatIconModule],\r\n declarations: [RuclibVirtualScrollComponent],\r\n exports: [RuclibVirtualScrollComponent],\r\n})\r\nexport class RuclibVirtualScrollModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i2 from '@angular/cdk/scrolling';
|
|
6
|
-
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
7
|
-
import * as i3 from '@angular/material/icon';
|
|
8
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
-
|
|
10
|
-
class RuclibVirtualScrollComponent {
|
|
11
|
-
constructor() {
|
|
12
|
-
// Configuration object, aligns with how other components might be fed data in your app
|
|
13
|
-
this.rucInputData = {};
|
|
14
|
-
// Optional: For theming, if your component needs to react to theme changes
|
|
15
|
-
this.customTheme = '';
|
|
16
|
-
this.itemSize = 10; // Default item size in pixels
|
|
17
|
-
this.viewportWidth = '100vw'; // Default viewport width
|
|
18
|
-
this.viewportHeight = '100vh'; // Default viewport height
|
|
19
|
-
this.clientHeight = 0;
|
|
20
|
-
}
|
|
21
|
-
ngOnInit() {
|
|
22
|
-
this.updateInternalState();
|
|
23
|
-
}
|
|
24
|
-
ngOnChanges(changes) {
|
|
25
|
-
// Re-process inputs if they change
|
|
26
|
-
if (changes['rucInputData']) {
|
|
27
|
-
this.updateInternalState();
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
ngAfterViewChecked() {
|
|
31
|
-
const isDataLoading = this.rucInputData?.isLoad || false;
|
|
32
|
-
if (isDataLoading) {
|
|
33
|
-
this.scrollToIndex();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
updateInternalState() {
|
|
37
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
38
|
-
// Update itemSize from rucInputData if provided, otherwise keep current or default
|
|
39
|
-
this.itemSize = this.rucInputData?.itemSize !== undefined ? this.rucInputData.itemSize : this.itemSize;
|
|
40
|
-
// Update viewportWidth from rucInputData if provided, otherwise keep current or default
|
|
41
|
-
this.viewportWidth = this.rucInputData?.viewportWidth !== undefined ? this.rucInputData.viewportWidth : this.viewportWidth;
|
|
42
|
-
// Update viewportHeight from rucInputData if provided, otherwise keep current or default
|
|
43
|
-
this.viewportHeight = this.rucInputData?.viewportHeight !== undefined ? this.rucInputData.viewportHeight : this.viewportHeight;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Example public method that can be called by a parent component.
|
|
47
|
-
* Scrolls the virtual scroll viewport to the specified index.
|
|
48
|
-
* @param index The index of the item to scroll to.
|
|
49
|
-
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
50
|
-
*/
|
|
51
|
-
scrollToIndex() {
|
|
52
|
-
let newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
53
|
-
if (this.virtualScrollViewport) {
|
|
54
|
-
if (newClientHeight !== this.clientHeight) {
|
|
55
|
-
this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
|
|
56
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'end' });
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* To handle the scroll position on top by using back to top icon
|
|
65
|
-
* @returns scroll position at top
|
|
66
|
-
*/
|
|
67
|
-
handleScroll() {
|
|
68
|
-
document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'start' });
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* To get the icon of back to top icon
|
|
72
|
-
* @returns default: 'arrow_upward'
|
|
73
|
-
*/
|
|
74
|
-
getBackToTopIcon() {
|
|
75
|
-
return this.rucInputData?.backToTopIcon || 'arrow_upward';
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* To get the label of back to top icon
|
|
79
|
-
* @returns default: 'Back to Top'
|
|
80
|
-
*/
|
|
81
|
-
getBackToTopLabel() {
|
|
82
|
-
return this.rucInputData?.backToTopLabel || 'Back to Top';
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* To get the color of icon
|
|
86
|
-
* @returns default: false
|
|
87
|
-
*/
|
|
88
|
-
getIconColor() {
|
|
89
|
-
return this.rucInputData?.iconColor || 'primary';
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* To check wheteher back to top icon shold be there or not in view
|
|
93
|
-
* @returns default: false
|
|
94
|
-
*/
|
|
95
|
-
isBackToTopIcon() {
|
|
96
|
-
return this.rucInputData?.isBackToTopIcon || false;
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* To get the thumb color of virtual scroll
|
|
100
|
-
* @returns default: '#888'
|
|
101
|
-
*/
|
|
102
|
-
getScrollbarThumbColor() {
|
|
103
|
-
return this.rucInputData?.thumbColor || '#888';
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* To get the track color of virtual scroll
|
|
107
|
-
* @returns default: '#f1f1f1'
|
|
108
|
-
*/
|
|
109
|
-
getScrollbarTrackColor() {
|
|
110
|
-
return this.rucInputData?.trackColor || '#f1f1f1';
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
RuclibVirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
-
RuclibVirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RuclibVirtualScrollComponent, selector: "uxp-ruclib-virtual-scroll", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
|
|
116
|
-
type: Component,
|
|
117
|
-
args: [{ selector: 'uxp-ruclib-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"] }]
|
|
118
|
-
}], ctorParameters: function () { return []; }, propDecorators: { rucInputData: [{
|
|
119
|
-
type: Input
|
|
120
|
-
}], customTheme: [{
|
|
121
|
-
type: Input
|
|
122
|
-
}], virtualScrollViewport: [{
|
|
123
|
-
type: ViewChild,
|
|
124
|
-
args: [CdkVirtualScrollViewport]
|
|
125
|
-
}] } });
|
|
126
|
-
|
|
127
|
-
class RuclibVirtualScrollModule {
|
|
128
|
-
}
|
|
129
|
-
RuclibVirtualScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
130
|
-
RuclibVirtualScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, declarations: [RuclibVirtualScrollComponent], imports: [CommonModule, ScrollingModule, MatIconModule], exports: [RuclibVirtualScrollComponent] });
|
|
131
|
-
RuclibVirtualScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, imports: [CommonModule, ScrollingModule, MatIconModule] });
|
|
132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibVirtualScrollModule, decorators: [{
|
|
133
|
-
type: NgModule,
|
|
134
|
-
args: [{
|
|
135
|
-
imports: [CommonModule, ScrollingModule, MatIconModule],
|
|
136
|
-
declarations: [RuclibVirtualScrollComponent],
|
|
137
|
-
exports: [RuclibVirtualScrollComponent],
|
|
138
|
-
}]
|
|
139
|
-
}] });
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* Generated bundle index. Do not edit.
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
export { RuclibVirtualScrollComponent, RuclibVirtualScrollModule };
|
|
146
|
-
//# sourceMappingURL=ruc-lib-virtual-scroll.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ruc-lib-virtual-scroll.mjs","sources":["../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.ts","../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.html","../../../../../libs/ruclib/virtual-scroll/src/lib/ruclib-virtual-scroll.module.ts","../../../../../libs/ruclib/virtual-scroll/src/ruc-lib-virtual-scroll.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, OnInit, OnChanges, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\r\nimport { RucVirtualScrollInput } from '../../model/ruclib-virtual-scroll.model';\r\n\r\n@Component({\r\n selector: 'uxp-ruclib-virtual-scroll',\r\n templateUrl: './ruclib-virtual-scroll.component.html',\r\n styleUrls: ['./ruclib-virtual-scroll.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\n\r\nexport class RuclibVirtualScrollComponent implements OnInit, OnChanges {\r\n // Configuration object, aligns with how other components might be fed data in your app\r\n @Input() rucInputData: RucVirtualScrollInput = {};\r\n\r\n // Optional: For theming, if your component needs to react to theme changes\r\n @Input() customTheme: string = '';\r\n\r\n itemSize: number = 10; // Default item size in pixels\r\n viewportWidth: string = '100vw'; // Default viewport width\r\n viewportHeight: string = '100vh'; // Default viewport height\r\n clientHeight: number = 0;\r\n\r\n @ViewChild(CdkVirtualScrollViewport) virtualScrollViewport: CdkVirtualScrollViewport | undefined;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n this.updateInternalState();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // Re-process inputs if they change\r\n if (changes['rucInputData']) {\r\n this.updateInternalState();\r\n }\r\n }\r\n\r\n ngAfterViewChecked() {\r\n const isDataLoading = this.rucInputData?.isLoad || false;\r\n if(isDataLoading) {\r\n this.scrollToIndex();\r\n }\r\n }\r\n\r\n private updateInternalState(): void {\r\n this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n \r\n // Update itemSize from rucInputData if provided, otherwise keep current or default\r\n this.itemSize = this.rucInputData?.itemSize !== undefined ? this.rucInputData.itemSize : this.itemSize;\r\n\r\n // Update viewportWidth from rucInputData if provided, otherwise keep current or default\r\n this.viewportWidth = this.rucInputData?.viewportWidth !== undefined ? this.rucInputData.viewportWidth : this.viewportWidth;\r\n \r\n // Update viewportHeight from rucInputData if provided, otherwise keep current or default\r\n this.viewportHeight = this.rucInputData?.viewportHeight !== undefined ? this.rucInputData.viewportHeight : this.viewportHeight;\r\n }\r\n\r\n /**\r\n * Example public method that can be called by a parent component.\r\n * Scrolls the virtual scroll viewport to the specified index.\r\n * @param index The index of the item to scroll to.\r\n * @param behavior Optional scroll behavior ('auto', 'smooth').\r\n */\r\n public scrollToIndex(): void {\r\n let newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n if (this.virtualScrollViewport) {\r\n if(newClientHeight !== this.clientHeight) {\r\n this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;\r\n document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'end' });\r\n }\r\n } else {\r\n console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');\r\n }\r\n }\r\n\r\n /**\r\n * To handle the scroll position on top by using back to top icon\r\n * @returns scroll position at top \r\n */\r\n public handleScroll(): void {\r\n document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].scrollIntoView({ behavior: 'auto', block: 'start' });\r\n }\r\n\r\n /**\r\n * To get the icon of back to top icon\r\n * @returns default: 'arrow_upward' \r\n */\r\n getBackToTopIcon(): string {\r\n return this.rucInputData?.backToTopIcon || 'arrow_upward';\r\n }\r\n\r\n /**\r\n * To get the label of back to top icon\r\n * @returns default: 'Back to Top' \r\n */\r\n getBackToTopLabel(): string { \r\n return this.rucInputData?.backToTopLabel || 'Back to Top';\r\n }\r\n\r\n /**\r\n * To get the color of icon\r\n * @returns default: false\r\n */\r\n getIconColor(): string {\r\n return this.rucInputData?.iconColor || 'primary';\r\n }\r\n\r\n /**\r\n * To check wheteher back to top icon shold be there or not in view\r\n * @returns default: false\r\n */\r\n isBackToTopIcon(): boolean {\r\n return this.rucInputData?.isBackToTopIcon || false;\r\n }\r\n\r\n /**\r\n * To get the thumb color of virtual scroll\r\n * @returns default: '#888'\r\n */\r\n getScrollbarThumbColor(): string {\r\n return this.rucInputData?.thumbColor || '#888';\r\n }\r\n\r\n /**\r\n * To get the track color of virtual scroll\r\n * @returns default: '#f1f1f1'\r\n */\r\n getScrollbarTrackColor(): string {\r\n return this.rucInputData?.trackColor || '#f1f1f1';\r\n }\r\n}\r\n","<cdk-virtual-scroll-viewport\r\n [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n<div class=\"virtual-scrollar__back-to-top\" *ngIf=\"isBackToTopIcon()\">\r\n <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n </button>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RuclibVirtualScrollComponent } from './ruclib-virtual-scroll/ruclib-virtual-scroll.component';\r\nimport { ScrollingModule } from '@angular/cdk/scrolling';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n@NgModule({\r\n imports: [CommonModule, ScrollingModule, MatIconModule],\r\n declarations: [RuclibVirtualScrollComponent],\r\n exports: [RuclibVirtualScrollComponent],\r\n})\r\nexport class RuclibVirtualScrollModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
3
|
-
import { RucVirtualScrollInput } from '../../model/ruclib-virtual-scroll.model';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class RuclibVirtualScrollComponent implements OnInit, OnChanges {
|
|
6
|
-
rucInputData: RucVirtualScrollInput;
|
|
7
|
-
customTheme: string;
|
|
8
|
-
itemSize: number;
|
|
9
|
-
viewportWidth: string;
|
|
10
|
-
viewportHeight: string;
|
|
11
|
-
clientHeight: number;
|
|
12
|
-
virtualScrollViewport: CdkVirtualScrollViewport | undefined;
|
|
13
|
-
constructor();
|
|
14
|
-
ngOnInit(): void;
|
|
15
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
16
|
-
ngAfterViewChecked(): void;
|
|
17
|
-
private updateInternalState;
|
|
18
|
-
/**
|
|
19
|
-
* Example public method that can be called by a parent component.
|
|
20
|
-
* Scrolls the virtual scroll viewport to the specified index.
|
|
21
|
-
* @param index The index of the item to scroll to.
|
|
22
|
-
* @param behavior Optional scroll behavior ('auto', 'smooth').
|
|
23
|
-
*/
|
|
24
|
-
scrollToIndex(): void;
|
|
25
|
-
/**
|
|
26
|
-
* To handle the scroll position on top by using back to top icon
|
|
27
|
-
* @returns scroll position at top
|
|
28
|
-
*/
|
|
29
|
-
handleScroll(): void;
|
|
30
|
-
/**
|
|
31
|
-
* To get the icon of back to top icon
|
|
32
|
-
* @returns default: 'arrow_upward'
|
|
33
|
-
*/
|
|
34
|
-
getBackToTopIcon(): string;
|
|
35
|
-
/**
|
|
36
|
-
* To get the label of back to top icon
|
|
37
|
-
* @returns default: 'Back to Top'
|
|
38
|
-
*/
|
|
39
|
-
getBackToTopLabel(): string;
|
|
40
|
-
/**
|
|
41
|
-
* To get the color of icon
|
|
42
|
-
* @returns default: false
|
|
43
|
-
*/
|
|
44
|
-
getIconColor(): string;
|
|
45
|
-
/**
|
|
46
|
-
* To check wheteher back to top icon shold be there or not in view
|
|
47
|
-
* @returns default: false
|
|
48
|
-
*/
|
|
49
|
-
isBackToTopIcon(): boolean;
|
|
50
|
-
/**
|
|
51
|
-
* To get the thumb color of virtual scroll
|
|
52
|
-
* @returns default: '#888'
|
|
53
|
-
*/
|
|
54
|
-
getScrollbarThumbColor(): string;
|
|
55
|
-
/**
|
|
56
|
-
* To get the track color of virtual scroll
|
|
57
|
-
* @returns default: '#f1f1f1'
|
|
58
|
-
*/
|
|
59
|
-
getScrollbarTrackColor(): string;
|
|
60
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RuclibVirtualScrollComponent, never>;
|
|
61
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<RuclibVirtualScrollComponent, "uxp-ruclib-virtual-scroll", never, { "rucInputData": "rucInputData"; "customTheme": "customTheme"; }, {}, never, ["*"], false, never>;
|
|
62
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
import * as i1 from "./ruclib-virtual-scroll/ruclib-virtual-scroll.component";
|
|
3
|
-
import * as i2 from "@angular/common";
|
|
4
|
-
import * as i3 from "@angular/cdk/scrolling";
|
|
5
|
-
import * as i4 from "@angular/material/icon";
|
|
6
|
-
export declare class RuclibVirtualScrollModule {
|
|
7
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RuclibVirtualScrollModule, never>;
|
|
8
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibVirtualScrollModule, [typeof i1.RuclibVirtualScrollComponent], [typeof i2.CommonModule, typeof i3.ScrollingModule, typeof i4.MatIconModule], [typeof i1.RuclibVirtualScrollComponent]>;
|
|
9
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<RuclibVirtualScrollModule>;
|
|
10
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*Interface for defining the Virtual Scroll Input
|
|
3
|
-
*/
|
|
4
|
-
export interface RucVirtualScrollInput {
|
|
5
|
-
/**
|
|
6
|
-
* The size of each item in the list in pixels.
|
|
7
|
-
*/
|
|
8
|
-
itemSize?: number;
|
|
9
|
-
/**
|
|
10
|
-
* The width of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
|
|
11
|
-
*/
|
|
12
|
-
viewportWidth?: string;
|
|
13
|
-
/**
|
|
14
|
-
* The height of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
|
|
15
|
-
*/
|
|
16
|
-
viewportHeight?: string;
|
|
17
|
-
/**
|
|
18
|
-
* The name of the Material icon to use for the 'back to top' button.
|
|
19
|
-
*/
|
|
20
|
-
backToTopIcon?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The label text for the 'back to top' button.
|
|
23
|
-
*/
|
|
24
|
-
backToTopLabel?: string;
|
|
25
|
-
/**
|
|
26
|
-
* The color of the 'back to top' icon (e.g., 'primary', 'accent', 'warn').
|
|
27
|
-
*/
|
|
28
|
-
iconColor?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Determines whether to display the 'back to top' icon.
|
|
31
|
-
*/
|
|
32
|
-
isBackToTopIcon?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* A flag to indicate if the virtual scroll is currently loading data.
|
|
35
|
-
*/
|
|
36
|
-
isLoad?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* The color of the scrollbar thumb.
|
|
39
|
-
*/
|
|
40
|
-
thumbColor?: string;
|
|
41
|
-
/**
|
|
42
|
-
* The color of the scrollbar track.
|
|
43
|
-
*/
|
|
44
|
-
trackColor?: string;
|
|
45
|
-
}
|