@libs-ui/components-scroll-overlay 0.2.29 → 0.2.30-6.2

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

@@ -1,84 +1,107 @@
 import * as i0 from '@angular/core';
-import { signal, computed, input, output, inject, ElementRef, Renderer2, effect, untracked, Directive } from '@angular/core';
-import { Subject, debounceTime, fromEvent, tap, takeUntil } from 'rxjs';
+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 {
-    /* PROPERTY */
-    styles = signal(`
+    // #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;
-        height: 8px;
-        pointer-events: none;
         visibility: hidden;
+        cursor: pointer;
         opacity: 0;
+        z-index: 1;
         transition: opacity 0.3s ease, visibility 0.3s ease;
       }
 
-      .scrollbar-thumb-X {
-        height: 100%;
-        background-color: #CDD0D6;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: background-color 0.3s;
-        pointer-events: auto;
-        position: absolute;
-      }
-      
       .scrollbar-track-Y {
+        height:100%;
         position: absolute;
         top: 0;
         right: 0;
-        width: 8px;
-        pointer-events: none;
         visibility: hidden;
+        cursor: pointer;
         opacity: 0;
+        z-index: 1;
         transition: opacity 0.3s ease, visibility 0.3s ease;
       }
 
-      .scrollbar-thumb-Y {
-        width: 100%;
-        background-color: #CDD0D6;
+      .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: pointer;
+        cursor: grabbing;
         transition: background-color 0.3s;
-        pointer-events: auto;
         position: absolute;
       }
 
-      .scrollbar-thumb:hover {
-        background-color: #9CA2AD;
+      .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;
       }
-  `, {}).asReadonly();
-    subsX;
-    subsY;
-    mutationObserverSubjectX = new Subject();
-    mutationObserverSubjectY = new Subject();
-    scrollbarWidth = computed(() => this.options()?.scrollbarWidth || 8); // Chiều rộng thanh cuộn
-    scrollbarColor = computed(() => this.options()?.scrollbarColor || '#CDD0D6'); // Màu sắc thanh cuộn
-    mutationObserverX = signal(undefined);
-    mutationObserverY = signal(undefined);
+  `, {});
+    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();
-    /* INPUT */
+    // #region INPUT
+    debugMode = input(false);
+    ignoreInit = input(false);
     classContainer = input('', { transform: value => value ?? '' });
     options = input(Object.assign({}));
-    /* OUTPUT */
+    elementCheckScrollX = input();
+    elementCheckScrollY = input();
+    elementScroll = input();
+    // #region OUTPUT
+    outScroll = output();
     outScrollX = output();
     outScrollY = output();
     outScrollTop = output();
     outScrollBottom = output();
-    /* INJECT */
+    // #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 => {
@@ -88,30 +111,33 @@ class LibsUiComponentsScrollOverlayDirective {
                 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.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.mutationObserverY()?.disconnect();
-                    this.subsX?.add(this.mutationObserverSubjectX.pipe(debounceTime(250)).subscribe(this.updateScrollbarSize.bind(this, 'X')));
-                    this.mutationObserverX.set(new MutationObserver(() => this.mutationObserverSubjectX.next()));
-                    this.mutationObserverX()?.observe(this.Element, { attributes: true, childList: true, subtree: true });
+                    this.handlerDragAndDropThumb('X');
+                    this.handlerClickTrack('X');
                 }
                 if (options?.scrollY !== 'hidden') {
-                    this.subsY?.unsubscribe();
+                    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.mutationObserverY()?.disconnect();
-                    this.subsY?.add(this.mutationObserverSubjectY.pipe(debounceTime(250)).subscribe(this.updateScrollbarSize.bind(this, 'Y')));
-                    this.mutationObserverY.set(new MutationObserver(() => this.mutationObserverSubjectY.next()));
-                    this.mutationObserverY()?.observe(this.Element, { attributes: true, childList: true, subtree: true });
+                    this.handlerDragAndDropThumb('Y');
+                    this.handlerClickTrack('Y');
                 }
             });
         });
     }
-    /* FUNCTIONS*/
+    // #region FUNCTIONS
     get Element() {
-        return this.element.nativeElement;
+        return this.elementScroll() || this.element.nativeElement;
     }
     createScrollbar(scrollDirection, trackEl, thumbEl) {
         const idStyleTag = "#id-style-tag-custom-scroll-overlay";
@@ -133,28 +159,27 @@ class LibsUiComponentsScrollOverlayDirective {
         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}`);
-        if (scrollDirection === 'X') {
-            trackEl.style.width = `100%`;
-            trackEl.style.height = `${this.scrollbarWidth()}px`;
-        }
-        if (scrollDirection === 'Y') {
-            trackEl.style.height = `100%`;
-            trackEl.style.width = `${this.scrollbarWidth()}px`;
-        }
+        thumbEl.classList.add(`scrollbar-thumb`);
         thumbEl.classList.add(`scrollbar-thumb-${scrollDirection}`);
-        thumbEl.style.backgroundColor = this.scrollbarColor();
         trackEl.appendChild(thumbEl);
         if (this.Element.className) {
             this.Element.className.split(' ').forEach((className) => {
-                if (className && (['w-full', 'w-screen', 'h-full', 'h-screen'].includes(className) || /^(h|w)-\[[0-9]+px\]$/.test(className)) && !this.divContainer.classList.contains(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.Element.parentElement?.insertBefore(this.divContainer, this.Element);
             this.divContainer.style.position = 'relative';
         }
         this.divContainer.append(this.Element);
@@ -165,6 +190,7 @@ class LibsUiComponentsScrollOverlayDirective {
         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);
@@ -189,13 +215,20 @@ class LibsUiComponentsScrollOverlayDirective {
                 return this.outScrollBottom.emit(event);
             }
         }), takeUntil(this.onDestroy)).subscribe();
-        subs.add(fromEvent(this.Element, 'resize').pipe(tap(this.updateScrollbarSize.bind(this, scrollDirection)), takeUntil(this.onDestroy)).subscribe());
-        subs.add(fromEvent(this.Element, 'mouseenter').pipe(tap(() => {
-            trackEl.style.visibility = 'visible';
-            trackEl.style.opacity = '1';
+        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);
-        }), takeUntil(this.onDestroy)).subscribe());
-        subs.add(fromEvent(this.Element, 'mouseleave').pipe(tap(() => {
+        }), 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());
@@ -208,12 +241,79 @@ class LibsUiComponentsScrollOverlayDirective {
             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.Element.scrollWidth;
+            const contentWidth = (this.elementCheckScrollX() || this.Element).scrollWidth;
             const thumbWidth = (containerWidth / contentWidth) * (containerWidth);
-            this.thumbX.style.width = `${thumbWidth}px`;
+            this.thumbX.style.width = `${Math.max(20, thumbWidth)}px`;
             this.trackX.style.display = 'none';
             if (contentWidth > containerWidth) {
                 this.trackX.style.display = 'block';
@@ -222,9 +322,9 @@ class LibsUiComponentsScrollOverlayDirective {
             return;
         }
         const containerHeight = this.Element.offsetHeight;
-        const contentHeight = this.Element.scrollHeight;
+        const contentHeight = (this.elementCheckScrollY() || this.Element).scrollHeight;
         const thumbHeight = (containerHeight / contentHeight) * (containerHeight);
-        this.thumbY.style.height = `${thumbHeight}px`;
+        this.thumbY.style.height = `${Math.max(20, thumbHeight)}px`;
         this.trackY.style.display = 'none';
         if (contentHeight > containerHeight) {
             this.trackY.style.display = 'block';
@@ -234,26 +334,27 @@ class LibsUiComponentsScrollOverlayDirective {
     updateScrollbarPosition(scrollDirection) {
         if (scrollDirection === 'X') {
             const containerWidth = this.Element.offsetWidth;
-            const contentWidth = this.Element.scrollWidth;
+            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.Element.scrollHeight;
+        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.mutationObserverX()?.disconnect();
-        this.mutationObserverY()?.disconnect();
+        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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsScrollOverlayDirective, isStandalone: true, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: { classContainer: { classPropertyName: "classContainer", publicName: "classContainer", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outScrollX: "outScrollX", outScrollY: "outScrollY", outScrollTop: "outScrollTop", outScrollBottom: "outScrollBottom" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", 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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, decorators: [{
             type: Directive,
@@ -266,9 +367,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 ;
 
+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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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><code>scroll-overlay</code> 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.</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 class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\" (click)=\"copyToClipboard(installCommandNpm)\">Sao ch\u00E9p</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 class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\" (click)=\"copyToClipboard(installCommandYarn)\">Sao ch\u00E9p</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 *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 LibsUiComponentsScrollOverlayDirective\n             [options]=\"options\"\n             (outScroll)=\"onScroll()\"\n             (outScrollTop)=\"onScrollTop()\"\n             (outScrollBottom)=\"onScrollBottom()\"\n             class=\"w-full h-full\">\n          <div 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\"><code>{{ input.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ input.type }}</code></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\"><code>{{ output.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ output.type }}</code></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\"><code>{{ opt.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ opt.type }}</code></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 *ngFor=\"let intf of interfacesDoc\" 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.13", 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><code>scroll-overlay</code> 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.</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 class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\" (click)=\"copyToClipboard(installCommandNpm)\">Sao ch\u00E9p</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 class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\" (click)=\"copyToClipboard(installCommandYarn)\">Sao ch\u00E9p</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 *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 LibsUiComponentsScrollOverlayDirective\n             [options]=\"options\"\n             (outScroll)=\"onScroll()\"\n             (outScrollTop)=\"onScrollTop()\"\n             (outScrollBottom)=\"onScrollBottom()\"\n             class=\"w-full h-full\">\n          <div 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\"><code>{{ input.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ input.type }}</code></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\"><code>{{ output.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ output.type }}</code></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\"><code>{{ opt.name }}</code></td>\n            <td class=\"py-2 px-4 border-b\"><code>{{ opt.type }}</code></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 *ngFor=\"let intf of interfacesDoc\" 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 { LibsUiComponentsScrollOverlayDirective };
+export { LibsUiComponentsScrollOverlayDemoComponent, LibsUiComponentsScrollOverlayDirective };
 //# sourceMappingURL=libs-ui-components-scroll-overlay.mjs.map