bitwarden-estensione-browser/angular/src/directives/cipherListVirtualScroll.directive.ts

import {
    CdkFixedSizeVirtualScroll,
    FixedSizeVirtualScrollStrategy,
    VIRTUAL_SCROLL_STRATEGY,
} from '@angular/cdk/scrolling';
import {
    Directive,
    forwardRef,
} from '@angular/core';

// Custom virtual scroll strategy for cdk-virtual-scroll
// Uses a sample list item to set the itemSize for FixedSizeVirtualScrollStrategy
// The use case is the same as FixedSizeVirtualScrollStrategy, but it avoids locking in pixel sizes in the template.
export class CipherListVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
    private checkItemSizeCallback: any;
    private timeout: any;

    constructor(itemSize: number, minBufferPx: number, maxBufferPx: number, checkItemSizeCallback: any) {
        super(itemSize, minBufferPx, maxBufferPx);
        this.checkItemSizeCallback = checkItemSizeCallback;
    }

    onContentRendered() {
        if (this.timeout != null) {
            clearTimeout(this.timeout);
        }

        this.timeout = setTimeout(this.checkItemSizeCallback, 500);
    }
}

export function _cipherListVirtualScrollStrategyFactory(cipherListDir: CipherListVirtualScroll) {
    return cipherListDir._scrollStrategy;
}

@Directive({
    selector: 'cdk-virtual-scroll-viewport[itemSize]',
    providers: [{
        provide: VIRTUAL_SCROLL_STRATEGY,
        useFactory: _cipherListVirtualScrollStrategyFactory,
        deps: [forwardRef(() => CipherListVirtualScroll)],
    }],
})
export class CipherListVirtualScroll extends CdkFixedSizeVirtualScroll {
    _scrollStrategy: CipherListVirtualScrollStrategy;

    constructor() {
        super();
        this._scrollStrategy = new CipherListVirtualScrollStrategy(this.itemSize, this.minBufferPx, this.maxBufferPx,
            this.checkAndUpdateItemSize);
    }

    checkAndUpdateItemSize = () => {
        const sampleItem = document.querySelector('cdk-virtual-scroll-viewport .virtual-scroll-item') as HTMLElement;
        const newItemSize = sampleItem?.offsetHeight;

        if (newItemSize != null && newItemSize !== this.itemSize) {
            this.itemSize = newItemSize;
            this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);
        }
    }
}