@libs-ui/components-scroll-overlay 0.2.321-0 → 0.2.323-0

package/esm2022/demo/scroll-overlay.demo.mjs

@@ -74,10 +74,10 @@ export class LibsUiComponentsScrollOverlayDemoComponent {
     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>\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"] }] });
+    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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDemoComponent, decorators: [{
+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"] }]
         }] });

package/esm2022/scroll-overlay.directive.mjs

@@ -362,10 +362,10 @@ export class LibsUiComponentsScrollOverlayDirective {
         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: { 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 });
+    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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, decorators: [{
+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

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

@@ -365,10 +365,10 @@ class LibsUiComponentsScrollOverlayDirective {
         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: { 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 });
+    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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDirective, decorators: [{
+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
@@ -448,10 +448,10 @@ class LibsUiComponentsScrollOverlayDemoComponent {
     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>\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"] }] });
+    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.13", ngImport: i0, type: LibsUiComponentsScrollOverlayDemoComponent, decorators: [{
+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"] }]
         }] });

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-scroll-overlay",
-  "version": "0.2.321-0",
+  "version": "0.2.323-0",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/utils": "0.2.321-0",
+    "@libs-ui/utils": "0.2.323-0",
     "rxjs": "~7.8.0"
   },
   "sideEffects": false,