@ruc-lib/virtual-scroll 3.1.0 → 3.1.1

package/fesm2022/ruc-lib-virtual-scroll.mjs

@@ -1,143 +0,0 @@
-import * as i0 from '@angular/core';
-import { ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@angular/cdk/scrolling';
-import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-
-class RuclibVirtualScrollComponent {
-    constructor() {
-        // Configuration object, aligns with how other components might be fed data in your app
-        this.rucInputData = {};
-        this.itemSize = 10; // Default item size in pixels
-        this.viewportWidth = '100vw'; // Default viewport width
-        this.viewportHeight = '100vh'; // Default viewport height
-        this.clientHeight = 0;
-        // Optional: For theming, if your component needs to react to theme changes
-        this.customTheme = '';
-    }
-    ngOnInit() {
-        this.updateInternalState();
-    }
-    ngOnChanges(changes) {
-        // Re-process inputs if they change
-        if (changes['rucInputData']) {
-            this.updateInternalState();
-        }
-    }
-    ngAfterViewChecked() {
-        const isDataLoading = this.rucInputData?.isLoad || false;
-        if (isDataLoading) {
-            this.scrollToIndex();
-        }
-    }
-    updateInternalState() {
-        this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
-        // Update itemSize from rucInputData if provided, otherwise keep current or default
-        this.itemSize =
-            this.rucInputData?.itemSize !== undefined
-                ? this.rucInputData.itemSize
-                : this.itemSize;
-        // Update viewportWidth from rucInputData if provided, otherwise keep current or default
-        this.viewportWidth =
-            this.rucInputData?.viewportWidth !== undefined
-                ? this.rucInputData.viewportWidth
-                : this.viewportWidth;
-        // Update viewportHeight from rucInputData if provided, otherwise keep current or default
-        this.viewportHeight =
-            this.rucInputData?.viewportHeight !== undefined
-                ? this.rucInputData.viewportHeight
-                : this.viewportHeight;
-    }
-    /**
-     * Example public method that can be called by a parent component.
-     * Scrolls the virtual scroll viewport to the specified index.
-     * @param index The index of the item to scroll to.
-     * @param behavior Optional scroll behavior ('auto', 'smooth').
-     */
-    scrollToIndex() {
-        const newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
-        if (this.virtualScrollViewport) {
-            if (newClientHeight !== this.clientHeight) {
-                this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
-                document
-                    .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
-                    .scrollIntoView({ behavior: 'auto', block: 'end' });
-            }
-        }
-        else {
-            console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
-        }
-    }
-    /**
-     * To handle the scroll position on top by using back to top icon
-     * @returns scroll position at top
-     */
-    handleScroll() {
-        document
-            .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
-            .scrollIntoView({ behavior: 'auto', block: 'start' });
-    }
-    /**
-     * To get the icon of back to top icon
-     * @returns default: 'arrow_upward'
-     */
-    getBackToTopIcon() {
-        return this.rucInputData?.backToTopIcon || 'arrow_upward';
-    }
-    /**
-     * To get the label of back to top icon
-     * @returns default: 'Back to Top'
-     */
-    getBackToTopLabel() {
-        return this.rucInputData?.backToTopLabel || 'Back to Top';
-    }
-    /**
-     * To get the color of icon
-     * @returns default: false
-     */
-    getIconColor() {
-        return this.rucInputData?.iconColor || 'primary';
-    }
-    /**
-     * To check wheteher back to top icon shold be there or not in view
-     * @returns default: false
-     */
-    isBackToTopIcon() {
-        return this.rucInputData?.isBackToTopIcon || false;
-    }
-    /**
-     * To get the thumb color of virtual scroll
-     * @returns default: '#888'
-     */
-    getScrollbarThumbColor() {
-        return this.rucInputData?.thumbColor || '#888';
-    }
-    /**
-     * To get the track color of virtual scroll
-     * @returns default: '#f1f1f1'
-     */
-    getScrollbarTrackColor() {
-        return this.rucInputData?.trackColor || '#f1f1f1';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
-            type: Component,
-            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"] }]
-        }], propDecorators: { rucInputData: [{
-                type: Input
-            }], customTheme: [{
-                type: Input
-            }], virtualScrollViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RuclibVirtualScrollComponent };
-//# sourceMappingURL=ruc-lib-virtual-scroll.mjs.map

package/fesm2022/ruc-lib-virtual-scroll.mjs.map

@@ -1 +0,0 @@
-{"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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"}