@libs-ui/components-scroll-overlay 0.1.1-1

package/fesm2022/libs-ui-components-scroll-overlay.mjs

@@ -0,0 +1,464 @@
+import * as i0 from '@angular/core';
+import { computed, signal, input, output, inject, ElementRef, Renderer2, effect, untracked, Directive, Component } from '@angular/core';
+import { getDragEventByElement, checkMouseOverInContainer } from '@libs-ui/utils';
+import { Subscription, Subject, fromEvent, tap, takeUntil, switchMap, interval } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsScrollOverlayDirective {
+    // #region PROPERTY
+    styles = computed(() => `
+      .scrollbar-track{
+         background-color:${this.scrollbarColor()};
+      }
+      .scrollbar-track:hover{
+        background-color:${this.scrollbarHoverColor()};
+      }
+      .scrollbar-track-X {
+        width:100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        visibility: hidden;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+      }
+
+      .scrollbar-track-Y {
+        height:100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        visibility: hidden;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+      }
+
+      .scrollbar-thumb{
+        background-color:${this.scrollThumbColor()};
+      }
+      .scrollbar-thumb:hover{
+        background-color:${this.scrollThumbHoverColor()};
+      }
+
+      .scrollbar-thumb-X {
+        height: calc(100% - ${this.scrollbarPadding() * 2}px);
+        bottom: ${this.scrollbarPadding()}px;
+        border-radius: 4px;
+        cursor: grabbing;
+        transition: background-color 0.3s;
+        position: absolute;
+      }
+
+      .scrollbar-thumb-Y {
+        width: calc(100% - ${this.scrollbarPadding() * 2}px);
+        right: ${this.scrollbarPadding()}px;
+        border-radius: 4px;
+        cursor: grabbing;
+        transition: background-color 0.3s;
+        position: absolute;
+      }
+  `, {});
+    isScrollThumb = signal(false);
+    keepDisplayThumb = signal(false);
+    subsX = new Subscription();
+    subsY = new Subscription();
+    scrollbarWidth = computed(() => this.options()?.scrollbarWidth ?? 10); // Chiều rộng thanh cuộn
+    scrollbarPadding = computed(() => this.options()?.scrollbarPadding ?? 2); // Chiều rộng thanh cuộn
+    scrollbarColor = computed(() => this.options()?.scrollbarColor ?? '');
+    scrollbarHoverColor = computed(() => this.options()?.scrollbarColor ?? '#CDD0D640');
+    scrollThumbColor = computed(() => this.options()?.scrollThumbColor ?? '#CDD0D6');
+    scrollThumbHoverColor = computed(() => this.options()?.scrollThumbHoverColor ?? '#9CA2AD');
+    divContainer = document.createElement('div');
+    trackX = document.createElement('div');
+    thumbX = document.createElement('div');
+    trackY = document.createElement('div');
+    thumbY = document.createElement('div');
+    onDestroy = new Subject();
+    // #region INPUT
+    debugMode = input(false);
+    ignoreInit = input(false);
+    classContainer = input('', { transform: (value) => value ?? '' });
+    options = input(Object.assign({}));
+    elementCheckScrollX = input();
+    elementCheckScrollY = input();
+    elementScroll = input();
+    // #region OUTPUT
+    outScroll = output();
+    outScrollX = output();
+    outScrollY = output();
+    outScrollTop = output();
+    outScrollBottom = output();
+    // #region INJECT
+    element = inject(ElementRef);
+    render2 = inject(Renderer2);
+    constructor() {
+        effect(() => {
+            if (this.ignoreInit()) {
+                return;
+            }
+            const options = this.options();
+            this.divContainer.className = '';
+            this.classContainer()
+                ?.split(' ')
+                .forEach((className) => {
+                if (!className) {
+                    return;
+                }
+                this.divContainer.classList.add(className);
+            });
+            untracked(() => {
+                this.Element.classList.toggle('overflow-hidden', options?.scrollX === 'hidden' && options?.scrollY === 'hidden');
+                if (options?.scrollX !== 'hidden') {
+                    this.subsX.unsubscribe();
+                    this.trackX.className = '';
+                    this.thumbX.className = '';
+                    this.trackX.style.height = `${this.scrollbarWidth()}px`;
+                    this.createScrollbar('X', this.trackX, this.thumbX);
+                    this.bindEventsScrollBar('X', this.trackX);
+                    this.handlerDragAndDropThumb('X');
+                    this.handlerClickTrack('X');
+                }
+                if (options?.scrollY !== 'hidden') {
+                    this.trackY.className = '';
+                    this.thumbY.className = '';
+                    this.trackY.style.width = `${this.scrollbarWidth()}px`;
+                    this.subsY.unsubscribe();
+                    this.createScrollbar('Y', this.trackY, this.thumbY);
+                    this.bindEventsScrollBar('Y', this.trackY);
+                    this.handlerDragAndDropThumb('Y');
+                    this.handlerClickTrack('Y');
+                }
+            });
+        });
+    }
+    // #region FUNCTIONS
+    get Element() {
+        return this.elementScroll() || this.element.nativeElement;
+    }
+    createScrollbar(scrollDirection, trackEl, thumbEl) {
+        const idStyleTag = '#id-style-tag-custom-scroll-overlay';
+        const styleElCustomScrollOverlay = document.getElementById(idStyleTag);
+        if (!styleElCustomScrollOverlay) {
+            const styleEl = document.createElement('style');
+            styleEl.setAttribute('id', idStyleTag);
+            styleEl.innerHTML = this.styles();
+            document.head.append(styleEl);
+        }
+        const stylesProperty = {
+            'box-sizing': 'border-box',
+            'scrollbar-width': 'none',
+            'scrollbar-color': 'transparent transparent',
+            overflow: 'hidden',
+            'overflow-x': `${this.options()?.scrollX || 'scroll'}`,
+            'overflow-y': `${this.options()?.scrollY || 'scroll'}`,
+        };
+        Object.keys(stylesProperty).forEach((key) => {
+            this.render2.setStyle(this.Element, key, stylesProperty[key], 1);
+        });
+        trackEl.classList.add(`scrollbar-track`);
+        trackEl.classList.add(`scrollbar-track-${scrollDirection}`);
+        thumbEl.classList.add(`scrollbar-thumb`);
+        thumbEl.classList.add(`scrollbar-thumb-${scrollDirection}`);
+        trackEl.appendChild(thumbEl);
+        if (this.Element.className) {
+            this.Element.className.split(' ').forEach((className) => {
+                if (className &&
+                    (['w-full', 'w-screen', 'h-full', 'h-screen', 'shrink-0'].includes(className) || className.includes('min-h-') || className.includes('min-w-') || /^(!?)(h|w)-\[[0-9]+px\]$/.test(className)) &&
+                    !this.divContainer.classList.contains(className)) {
+                    this.divContainer.classList.add(className);
+                }
+            });
+            if (!this.Element.className.includes('min-h-')) {
+                this.divContainer.classList.add('min-h-0');
+            }
+            if (!this.Element.className.includes('min-w-')) {
+                this.divContainer.classList.add('min-w-0');
+            }
+        }
+        this.divContainer.appendChild(trackEl);
+        if (!this.divContainer.style.position) {
+            this.Element.parentElement?.insertBefore(this.divContainer, this.Element);
+            this.divContainer.style.position = 'relative';
+        }
+        this.divContainer.append(this.Element);
+        this.updateScrollbarSize(scrollDirection);
+    }
+    bindEventsScrollBar(scrollDirection, trackEl) {
+        let scrollLeft = this.Element.scrollLeft;
+        let scrollTop = this.Element.scrollTop;
+        const subs = fromEvent(this.Element, 'scroll')
+            .pipe(tap((event) => {
+            const target = this.Element;
+            this.outScroll.emit(event);
+            if (scrollDirection === 'X') {
+                if (target.scrollLeft && target.scrollLeft + target.offsetWidth >= target.scrollWidth) {
+                    target.scrollLeft = target.scrollWidth - target.offsetWidth - (target.offsetWidth - target.clientWidth);
+                }
+                if (target.scrollLeft !== scrollLeft) {
+                    this.outScrollX.emit(event);
+                }
+                scrollLeft = target.scrollLeft;
+                this.updateScrollbarPosition(scrollDirection);
+                return;
+            }
+            if (target.scrollTop === scrollTop) {
+                return;
+            }
+            this.updateScrollbarPosition(scrollDirection);
+            scrollTop = target.scrollTop;
+            this.outScrollY.emit(event);
+            if (target.scrollTop === 0) {
+                return this.outScrollTop.emit(event);
+            }
+            if (target.scrollHeight <= target.scrollTop + target.offsetHeight + 3) {
+                return this.outScrollBottom.emit(event);
+            }
+        }), takeUntil(this.onDestroy))
+            .subscribe();
+        subs.add(fromEvent(document, 'resize')
+            .pipe(tap(this.updateScrollbarSize.bind(this, scrollDirection)), takeUntil(this.onDestroy))
+            .subscribe());
+        const mouseLeave = fromEvent(this.divContainer, 'mouseleave');
+        const mouseenter = fromEvent(this.divContainer, 'mouseenter');
+        subs.add(mouseenter
+            .pipe(tap(() => {
+            if ((scrollDirection === 'X' && !this.options()?.scrollXOpacity0) || (scrollDirection === 'Y' && !this.options()?.scrollYOpacity0)) {
+                trackEl.style.visibility = 'visible';
+                trackEl.style.opacity = '1';
+            }
+            this.updateScrollbarSize(scrollDirection);
+        }), switchMap(() => interval(1000).pipe(takeUntil(mouseLeave))), tap(this.updateScrollbarSize.bind(this, scrollDirection)), takeUntil(this.onDestroy))
+            .subscribe());
+        subs.add(mouseLeave
+            .pipe(tap(() => {
+            if (this.keepDisplayThumb()) {
+                return;
+            }
+            trackEl.style.visibility = 'hidden';
+            trackEl.style.opacity = '0';
+        }), takeUntil(this.onDestroy))
+            .subscribe());
+        if (scrollDirection === 'X') {
+            this.subsX = subs;
+            return;
+        }
+        if (scrollDirection === 'Y') {
+            this.subsY = subs;
+            return;
+        }
+    }
+    handlerClickTrack(scrollDirection) {
+        const elementTrack = scrollDirection === 'X' ? this.trackX : this.trackY;
+        const elementThumb = scrollDirection === 'X' ? this.thumbX : this.thumbY;
+        const subs = scrollDirection === 'X' ? this.subsX : this.subsY;
+        subs.add(fromEvent(elementTrack, 'click').subscribe((e) => {
+            if (this.isScrollThumb()) {
+                return;
+            }
+            if ((scrollDirection === 'X' && e.clientX < elementThumb.getBoundingClientRect().left) || (scrollDirection === 'Y' && e.clientY < elementThumb.getBoundingClientRect().top)) {
+                this.updateScrollPositionByUserAction(scrollDirection, e, 'smooth', 0);
+                return;
+            }
+            if (scrollDirection === 'X') {
+                this.updateScrollPositionByUserAction(scrollDirection, e, 'smooth', -1 * elementThumb.getBoundingClientRect().width);
+                return;
+            }
+            this.updateScrollPositionByUserAction(scrollDirection, e, 'smooth', -1 * elementThumb.getBoundingClientRect().height);
+        }));
+    }
+    handlerDragAndDropThumb(scrollDirection) {
+        const elementTrack = scrollDirection === 'X' ? this.trackX : this.trackY;
+        const elementThumb = scrollDirection === 'X' ? this.thumbX : this.thumbY;
+        const subs = scrollDirection === 'X' ? this.subsX : this.subsY;
+        let lengthThumbToPointClick = 0;
+        subs.add(getDragEventByElement({
+            elementMouseDown: elementThumb,
+            functionMouseDown: (mouseEvent) => {
+                this.isScrollThumb.set(true);
+                this.keepDisplayThumb.set(true);
+                if (scrollDirection === 'X') {
+                    lengthThumbToPointClick = elementThumb.getBoundingClientRect().left - mouseEvent.clientX;
+                    return;
+                }
+                lengthThumbToPointClick = elementThumb.getBoundingClientRect().top - mouseEvent.clientY;
+            },
+            functionMouseUp: (mouseEvent) => {
+                this.keepDisplayThumb.set(false);
+                lengthThumbToPointClick = 0;
+                if (!checkMouseOverInContainer(mouseEvent, this.Element)) {
+                    elementTrack.style.visibility = 'hidden';
+                    elementTrack.style.opacity = '0';
+                }
+                setTimeout(() => {
+                    this.isScrollThumb.set(false);
+                }, 250);
+            },
+            onDestroy: this.onDestroy,
+        }).subscribe((mouseEvent) => {
+            this.updateScrollPositionByUserAction(scrollDirection, mouseEvent, 'auto', lengthThumbToPointClick);
+        }));
+    }
+    updateScrollPositionByUserAction(scrollDirection, e, behavior, lengthThumbToPointClick = 0) {
+        e.stopPropagation();
+        if (scrollDirection === 'X') {
+            const containerWidth = this.Element.offsetWidth;
+            const contentWidth = (this.elementCheckScrollX() || this.Element).scrollWidth;
+            const thumbPosition = e.clientX - this.Element.getBoundingClientRect().left + lengthThumbToPointClick;
+            const scrollLeft = (thumbPosition / (containerWidth - this.thumbX.offsetWidth)) * (contentWidth - containerWidth);
+            this.Element.scroll({ left: scrollLeft, behavior });
+            return;
+        }
+        const containerHeight = this.Element.offsetHeight;
+        const contentHeight = (this.elementCheckScrollY() || this.Element).scrollHeight;
+        const thumbPosition = e.clientY - this.Element.getBoundingClientRect().top + lengthThumbToPointClick;
+        const scrollTop = (thumbPosition / (containerHeight - this.thumbY.offsetHeight)) * (contentHeight - containerHeight);
+        this.Element.scroll({ top: scrollTop, behavior });
+    }
+    updateScrollbarSize(scrollDirection) {
+        if (scrollDirection === 'X') {
+            const containerWidth = this.Element.offsetWidth;
+            const contentWidth = (this.elementCheckScrollX() || this.Element).scrollWidth;
+            const thumbWidth = (containerWidth / contentWidth) * containerWidth;
+            this.thumbX.style.width = `${Math.max(20, thumbWidth)}px`;
+            this.trackX.style.display = 'none';
+            if (contentWidth > containerWidth) {
+                this.trackX.style.display = 'block';
+            }
+            this.updateScrollbarPosition(scrollDirection);
+            return;
+        }
+        const containerHeight = this.Element.offsetHeight;
+        const contentHeight = (this.elementCheckScrollY() || this.Element).scrollHeight;
+        const thumbHeight = (containerHeight / contentHeight) * containerHeight;
+        this.thumbY.style.height = `${Math.max(20, thumbHeight)}px`;
+        this.trackY.style.display = 'none';
+        if (contentHeight > containerHeight) {
+            this.trackY.style.display = 'block';
+        }
+        this.updateScrollbarPosition('Y');
+    }
+    updateScrollbarPosition(scrollDirection) {
+        if (scrollDirection === 'X') {
+            const containerWidth = this.Element.offsetWidth;
+            const contentWidth = (this.elementCheckScrollX() || this.Element).scrollWidth;
+            const scrollLeft = this.Element.scrollLeft;
+            const thumbPosition = (scrollLeft / (contentWidth - containerWidth)) * (containerWidth - this.thumbX.offsetWidth);
+            this.thumbX.style.left = `${thumbPosition}px`;
+            return;
+        }
+        const containerHeight = this.Element.offsetHeight;
+        const contentHeight = (this.elementCheckScrollY() || this.Element).scrollHeight;
+        const scrollTop = this.Element.scrollTop;
+        const thumbPosition = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - this.thumbY.offsetHeight);
+        this.thumbY.style.top = `${thumbPosition}px`;
+    }
+    ngOnDestroy() {
+        this.divContainer.remove();
+        this.subsX.unsubscribe();
+        this.subsY.unsubscribe();
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsScrollOverlayDirective, isStandalone: true, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: { debugMode: { classPropertyName: "debugMode", publicName: "debugMode", isSignal: true, isRequired: false, transformFunction: null }, ignoreInit: { classPropertyName: "ignoreInit", publicName: "ignoreInit", isSignal: true, isRequired: false, transformFunction: null }, classContainer: { classPropertyName: "classContainer", publicName: "classContainer", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, elementCheckScrollX: { classPropertyName: "elementCheckScrollX", publicName: "elementCheckScrollX", isSignal: true, isRequired: false, transformFunction: null }, elementCheckScrollY: { classPropertyName: "elementCheckScrollY", publicName: "elementCheckScrollY", isSignal: true, isRequired: false, transformFunction: null }, elementScroll: { classPropertyName: "elementScroll", publicName: "elementScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outScroll: "outScroll", outScrollX: "outScrollX", outScrollY: "outScrollY", outScrollTop: "outScrollTop", outScrollBottom: "outScrollBottom" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsScrollOverlayDirective]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class LibsUiComponentsScrollOverlayDemoComponent {
+    // Demo text content: generate 5000 words for vertical scrolling
+    longContent = signal(Array.from({ length: 5000 }, (_, i) => `Lorem${i + 1}`).join(' '));
+    // Demo horizontal content: generate 5000 words for horizontal scrolling
+    longHorizontalContent = signal(Array.from({ length: 5000 }, (_, i) => `Word${i + 1}`).join(' '));
+    // Scenario selection
+    scenarioOptions = ['default', 'customStyle', 'autoHide', 'horizontal'];
+    selectedScenario = 'default';
+    // Options signals
+    customStyleOptions = signal({ scrollbarWidth: 12, scrollbarColor: '#f3f4f6', scrollbarHoverColor: '#e5e7eb', scrollThumbColor: '#3b82f6', scrollThumbHoverColor: '#2563eb', scrollbarPadding: 4 });
+    autoHideOptions = signal({ scrollYOpacity0: true, scrollbarWidth: 8, scrollbarColor: 'transparent', scrollThumbColor: '#9ca3af', scrollThumbHoverColor: '#6b7280' });
+    horizontalOptions = signal({ scrollX: 'scroll', scrollY: 'hidden', scrollbarWidth: 8, scrollbarColor: '#f3f4f6', scrollThumbColor: '#3b82f6' });
+    // Scroll event log
+    lastEvent = signal('No events yet');
+    // Helpers
+    get options() {
+        switch (this.selectedScenario) {
+            case 'customStyle':
+                return this.customStyleOptions();
+            case 'autoHide':
+                return this.autoHideOptions();
+            case 'horizontal':
+                return this.horizontalOptions();
+            default:
+                return undefined;
+        }
+    }
+    get content() {
+        return this.selectedScenario === 'horizontal' ? this.longHorizontalContent() : this.longContent();
+    }
+    // Event handlers
+    onScroll() {
+        this.lastEvent.set('Scroll event fired');
+    }
+    onScrollTop() {
+        this.lastEvent.set('Reached top');
+    }
+    onScrollBottom() {
+        this.lastEvent.set('Reached bottom');
+    }
+    // API docs
+    inputsDoc = [
+        { name: 'options', type: 'IScrollOverlayOptions', default: 'undefined', description: 'Cấu hình tuỳ chỉnh scrollbar' },
+        { name: 'debugMode', type: 'boolean', default: 'false', description: 'Bật chế độ debug' },
+        { name: 'notShowScrollBarX', type: 'boolean', default: 'false', description: 'Ẩn scrollbar ngang' },
+        { name: 'notShowScrollBarY', type: 'boolean', default: 'false', description: 'Ẩn scrollbar dọc' },
+    ];
+    outputsDoc = [
+        { name: 'outScroll', type: 'Event', description: 'Bắn ra khi scroll bất kỳ' },
+        { name: 'outScrollTop', type: 'Event', description: 'Bắn ra khi scroll đến top' },
+        { name: 'outScrollBottom', type: 'Event', description: 'Bắn ra khi scroll đến bottom' },
+    ];
+    optionsDoc = [
+        { name: 'scrollbarWidth', type: 'number', default: 'undefined', description: 'Chiều rộng scrollbar (px)' },
+        { name: 'scrollbarColor', type: 'string', default: 'undefined', description: 'Màu track scrollbar' },
+        { name: 'scrollbarHoverColor', type: 'string', default: 'undefined', description: 'Màu track khi hover' },
+        { name: 'scrollThumbColor', type: 'string', default: 'undefined', description: 'Màu thumb' },
+        { name: 'scrollThumbHoverColor', type: 'string', default: 'undefined', description: 'Màu thumb khi hover' },
+        { name: 'scrollbarPadding', type: 'number', default: 'undefined', description: 'Padding scrollbar' },
+        { name: 'scrollX', type: `'hidden' | 'scroll'`, default: 'undefined', description: 'Kiểu scroll X' },
+        { name: 'scrollXOpacity0', type: 'boolean', default: 'undefined', description: 'Ẩn track X khi không hover' },
+        { name: 'scrollY', type: `'hidden' | 'scroll'`, default: 'undefined', description: 'Kiểu scroll Y' },
+        { name: 'scrollYOpacity0', type: 'boolean', default: 'undefined', description: 'Ẩn track Y khi không hover' },
+    ];
+    interfacesDoc = [{ name: 'IScrollOverlayOptions', type: 'interface', description: 'Các tuỳ chọn cấu hình scroll-overlay' }];
+    // Installation commands
+    installCommandNpm = 'npm install @libs-ui/components-scroll-overlay';
+    installCommandYarn = 'yarn add @libs-ui/components-scroll-overlay';
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => console.log('Copied:', text));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsScrollOverlayDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LibsUiComponentsScrollOverlayDemoComponent, isStandalone: true, selector: "lib-scroll-overlay-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold mb-2\">Demo Scroll Overlay</h1>\n    <p class=\"text-xl text-gray-500\">&#64;libs-ui/components-scroll-overlay</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code>scroll-overlay</code>\n        l\u00E0 m\u1ED9t directive gi\u00FAp tu\u1EF3 bi\u1EBFn scrollbar tr\u00EAn b\u1EA5t k\u1EF3 ph\u1EA7n t\u1EED n\u00E0o trong Angular, h\u1ED7 tr\u1EE3 tu\u1EF3 ch\u1EC9nh m\u00E0u, k\u00EDch th\u01B0\u1EDBc, \u1EA9n/hi\u1EC7n v\u00E0 s\u1EF1 ki\u1EC7n scroll.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-4\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>{{ installCommandNpm }}</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\"\n          (click)=\"copyToClipboard(installCommandNpm)\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>{{ installCommandYarn }}</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\"\n          (click)=\"copyToClipboard(installCommandYarn)\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <!-- Demo Tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n      <div class=\"grid grid-cols-4 gap-4 mb-6\">\n        <button\n          *ngFor=\"let sc of scenarioOptions\"\n          (click)=\"selectedScenario = sc\"\n          class=\"px-3 py-1 border rounded\"\n          [class.bg-blue-500]=\"selectedScenario === sc\"\n          [class.text-white]=\"selectedScenario === sc\">\n          {{ sc }}\n        </button>\n      </div>\n      <div class=\"p-4 bg-gray-50 rounded-lg h-[300px]\">\n        <div\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"options\"\n          (outScroll)=\"onScroll()\"\n          (outScrollTop)=\"onScrollTop()\"\n          (outScrollBottom)=\"onScrollBottom()\"\n          class=\"w-full h-full\">\n          <div\n            class=\"p-2\"\n            [innerText]=\"content\"\n            [class.whitespace-pre-wrap]=\"selectedScenario !== 'horizontal'\"\n            [class.whitespace-nowrap]=\"selectedScenario === 'horizontal'\"></div>\n        </div>\n      </div>\n      <p class=\"mt-4 text-gray-700\">S\u1EF1 ki\u1EC7n: {{ lastEvent() }}</p>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <pre class=\"bg-gray-100 p-4 rounded-lg overflow-auto text-sm\">\n        <code ngNonBindable>&lt;div LibsUiComponentsScrollOverlayDirective [options]=\"&#123; scrollbarWidth:12, scrollThumbColor:'#3b82f6' &#125;\" style=\"width:300px;height:200px;overflow:auto;\"&gt;\n  N\u1ED9i dung d\u00E0i...\n&lt;/div&gt;</code>\n      </pre>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">API Reference</h2>\n      <h3 class=\"text-xl font-semibold mb-3\">Inputs</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">T\u00EAn</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u1EB7c \u0111\u1ECBnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let input of inputsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ input.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ input.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ input.default }}</td>\n            <td class=\"py-2 px-4 border-b\">{{ input.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Outputs</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">T\u00EAn</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let output of outputsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ output.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ output.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ output.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Options</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Thu\u1ED9c t\u00EDnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u1EB7c \u0111\u1ECBnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let opt of optionsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ opt.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ opt.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ opt.default }}</td>\n            <td class=\"py-2 px-4 border-b\">{{ opt.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div\n          *ngFor=\"let intf of interfacesDoc\"\n          class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"font-semibold mb-2\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-auto text-sm mb-3\"><code>{{ intf.type }}</code></pre>\n          <p>{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";.demo-container{padding:24px;font-family:system-ui,-apple-system,sans-serif;max-width:1200px;margin:0 auto}.demo-intro{margin-bottom:32px}.demo-intro h3{color:#333;margin-bottom:16px}.demo-intro ul{list-style:none;padding:0}.demo-intro ul li{margin-bottom:8px;padding-left:20px;position:relative}.demo-intro ul li:before{content:\"\\2022\";position:absolute;left:0;color:#3b82f6}.demo-features{margin-bottom:32px}.demo-features h3{color:#333;margin-bottom:16px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.feature-item{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0}.feature-item h4{color:#1e40af;margin:0 0 8px}.feature-item p{margin:0;color:#64748b}.demo-api{margin-bottom:48px}.demo-api h3{color:#333;margin-bottom:24px}.api-section{margin-bottom:32px}.api-section h4{color:#1e40af;margin-bottom:16px}.api-table{overflow-x:auto}.api-table table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.api-table table th,.api-table table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e2e8f0}.api-table table th{background:#f8fafc;font-weight:600;color:#1e40af}.api-table table td{color:#64748b}.api-table table td:first-child{font-family:Fira Code,monospace;color:#334155}.api-table table td:nth-child(2){font-family:Fira Code,monospace;color:#3b82f6}.api-table table tr:last-child td{border-bottom:none}.demo-section{margin-bottom:48px}.demo-section h3{color:#333;margin-bottom:16px}.demo-description{margin-bottom:16px}.demo-description p{color:#64748b;margin-bottom:12px}.demo-description pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.demo-description pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155}.demo-box{display:flex;gap:16px;align-items:flex-start}.event-log{padding:16px;background:#f5f5f5;border-radius:4px;min-width:200px}.event-log p{margin:0;font-size:14px;color:#666}.demo-notes{margin-top:48px;padding:24px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.demo-notes h3{color:#333;margin-bottom:16px}.demo-notes ul{list-style:none;padding:0;margin:0}.demo-notes ul li{color:#64748b;margin-bottom:12px;padding-left:24px;position:relative}.demo-notes ul li:before{content:\"\\2192\";position:absolute;left:0;color:#3b82f6}.demo-notes ul li:last-child{margin-bottom:0}.interface-description{margin-bottom:24px}.interface-description p{color:#64748b;margin-bottom:16px}.interface-description pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.interface-description pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155;line-height:1.6}.interface-usage{margin-bottom:24px}.interface-usage h5{color:#1e40af;margin-bottom:12px;font-size:16px}.interface-usage pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.interface-usage pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155;line-height:1.6}.interface-usage pre code .comment{color:#64748b}.interface-notes{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0}.interface-notes h5{color:#1e40af;margin-bottom:12px;font-size:16px}.interface-notes ul{list-style:none;padding:0;margin:0}.interface-notes ul li{color:#64748b;margin-bottom:8px;padding-left:20px;position:relative}.interface-notes ul li:before{content:\"\\2022\";position:absolute;left:0;color:#3b82f6}.interface-notes ul li:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsScrollOverlayDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-scroll-overlay-demo', standalone: true, imports: [CommonModule, LibsUiComponentsScrollOverlayDirective], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold mb-2\">Demo Scroll Overlay</h1>\n    <p class=\"text-xl text-gray-500\">&#64;libs-ui/components-scroll-overlay</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code>scroll-overlay</code>\n        l\u00E0 m\u1ED9t directive gi\u00FAp tu\u1EF3 bi\u1EBFn scrollbar tr\u00EAn b\u1EA5t k\u1EF3 ph\u1EA7n t\u1EED n\u00E0o trong Angular, h\u1ED7 tr\u1EE3 tu\u1EF3 ch\u1EC9nh m\u00E0u, k\u00EDch th\u01B0\u1EDBc, \u1EA9n/hi\u1EC7n v\u00E0 s\u1EF1 ki\u1EC7n scroll.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-4\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>{{ installCommandNpm }}</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\"\n          (click)=\"copyToClipboard(installCommandNpm)\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>{{ installCommandYarn }}</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\"\n          (click)=\"copyToClipboard(installCommandYarn)\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <!-- Demo Tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n      <div class=\"grid grid-cols-4 gap-4 mb-6\">\n        <button\n          *ngFor=\"let sc of scenarioOptions\"\n          (click)=\"selectedScenario = sc\"\n          class=\"px-3 py-1 border rounded\"\n          [class.bg-blue-500]=\"selectedScenario === sc\"\n          [class.text-white]=\"selectedScenario === sc\">\n          {{ sc }}\n        </button>\n      </div>\n      <div class=\"p-4 bg-gray-50 rounded-lg h-[300px]\">\n        <div\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"options\"\n          (outScroll)=\"onScroll()\"\n          (outScrollTop)=\"onScrollTop()\"\n          (outScrollBottom)=\"onScrollBottom()\"\n          class=\"w-full h-full\">\n          <div\n            class=\"p-2\"\n            [innerText]=\"content\"\n            [class.whitespace-pre-wrap]=\"selectedScenario !== 'horizontal'\"\n            [class.whitespace-nowrap]=\"selectedScenario === 'horizontal'\"></div>\n        </div>\n      </div>\n      <p class=\"mt-4 text-gray-700\">S\u1EF1 ki\u1EC7n: {{ lastEvent() }}</p>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <pre class=\"bg-gray-100 p-4 rounded-lg overflow-auto text-sm\">\n        <code ngNonBindable>&lt;div LibsUiComponentsScrollOverlayDirective [options]=\"&#123; scrollbarWidth:12, scrollThumbColor:'#3b82f6' &#125;\" style=\"width:300px;height:200px;overflow:auto;\"&gt;\n  N\u1ED9i dung d\u00E0i...\n&lt;/div&gt;</code>\n      </pre>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold mb-5 pb-3 border-b border-gray-200\">API Reference</h2>\n      <h3 class=\"text-xl font-semibold mb-3\">Inputs</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">T\u00EAn</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u1EB7c \u0111\u1ECBnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let input of inputsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ input.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ input.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ input.default }}</td>\n            <td class=\"py-2 px-4 border-b\">{{ input.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Outputs</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">T\u00EAn</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let output of outputsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ output.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ output.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ output.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Options</h3>\n      <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n        <thead>\n          <tr>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Thu\u1ED9c t\u00EDnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">Ki\u1EC3u</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u1EB7c \u0111\u1ECBnh</th>\n            <th class=\"py-2 px-4 border-b bg-gray-100\">M\u00F4 t\u1EA3</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let opt of optionsDoc\">\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ opt.name }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">\n              <code>{{ opt.type }}</code>\n            </td>\n            <td class=\"py-2 px-4 border-b\">{{ opt.default }}</td>\n            <td class=\"py-2 px-4 border-b\">{{ opt.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <h3 class=\"text-xl font-semibold mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div\n          *ngFor=\"let intf of interfacesDoc\"\n          class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"font-semibold mb-2\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-auto text-sm mb-3\"><code>{{ intf.type }}</code></pre>\n          <p>{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";.demo-container{padding:24px;font-family:system-ui,-apple-system,sans-serif;max-width:1200px;margin:0 auto}.demo-intro{margin-bottom:32px}.demo-intro h3{color:#333;margin-bottom:16px}.demo-intro ul{list-style:none;padding:0}.demo-intro ul li{margin-bottom:8px;padding-left:20px;position:relative}.demo-intro ul li:before{content:\"\\2022\";position:absolute;left:0;color:#3b82f6}.demo-features{margin-bottom:32px}.demo-features h3{color:#333;margin-bottom:16px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.feature-item{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0}.feature-item h4{color:#1e40af;margin:0 0 8px}.feature-item p{margin:0;color:#64748b}.demo-api{margin-bottom:48px}.demo-api h3{color:#333;margin-bottom:24px}.api-section{margin-bottom:32px}.api-section h4{color:#1e40af;margin-bottom:16px}.api-table{overflow-x:auto}.api-table table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.api-table table th,.api-table table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e2e8f0}.api-table table th{background:#f8fafc;font-weight:600;color:#1e40af}.api-table table td{color:#64748b}.api-table table td:first-child{font-family:Fira Code,monospace;color:#334155}.api-table table td:nth-child(2){font-family:Fira Code,monospace;color:#3b82f6}.api-table table tr:last-child td{border-bottom:none}.demo-section{margin-bottom:48px}.demo-section h3{color:#333;margin-bottom:16px}.demo-description{margin-bottom:16px}.demo-description p{color:#64748b;margin-bottom:12px}.demo-description pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.demo-description pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155}.demo-box{display:flex;gap:16px;align-items:flex-start}.event-log{padding:16px;background:#f5f5f5;border-radius:4px;min-width:200px}.event-log p{margin:0;font-size:14px;color:#666}.demo-notes{margin-top:48px;padding:24px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.demo-notes h3{color:#333;margin-bottom:16px}.demo-notes ul{list-style:none;padding:0;margin:0}.demo-notes ul li{color:#64748b;margin-bottom:12px;padding-left:24px;position:relative}.demo-notes ul li:before{content:\"\\2192\";position:absolute;left:0;color:#3b82f6}.demo-notes ul li:last-child{margin-bottom:0}.interface-description{margin-bottom:24px}.interface-description p{color:#64748b;margin-bottom:16px}.interface-description pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.interface-description pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155;line-height:1.6}.interface-usage{margin-bottom:24px}.interface-usage h5{color:#1e40af;margin-bottom:12px;font-size:16px}.interface-usage pre{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;overflow-x:auto}.interface-usage pre code{font-family:Fira Code,monospace;font-size:14px;color:#334155;line-height:1.6}.interface-usage pre code .comment{color:#64748b}.interface-notes{background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0}.interface-notes h5{color:#1e40af;margin-bottom:12px;font-size:16px}.interface-notes ul{list-style:none;padding:0;margin:0}.interface-notes ul li{color:#64748b;margin-bottom:8px;padding-left:20px;position:relative}.interface-notes ul li:before{content:\"\\2022\";position:absolute;left:0;color:#3b82f6}.interface-notes ul li:last-child{margin-bottom:0}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsScrollOverlayDemoComponent, LibsUiComponentsScrollOverlayDirective };
+//# sourceMappingURL=libs-ui-components-scroll-overlay.mjs.map