@ngbase/adk 0.1.11 → 0.1.14

package/fesm2022/ngbase-adk-scroll-area.mjs

@@ -9,17 +9,17 @@ class NgbScrollBar {
         this.el = inject(ElementRef);
         this.scrollArea = inject(NgbScrollArea);
         this.drag = inject(Drag);
-        this.ngbScrollBar = input.required();
+        this.ngbScrollBar = input.required(...(ngDevMode ? [{ debugName: "ngbScrollBar" }] : []));
         this.visible = computed(() => {
             return this.ngbScrollBar() === 'vertical'
                 ? this.scrollArea.showVerticalScroll()
                 : this.scrollArea.showHorizontalScroll();
-        });
+        }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
         this.show = computed(() => {
             return this.ngbScrollBar() === 'vertical'
                 ? this.scrollArea.showVerticalBar()
                 : this.scrollArea.showHorizontalBar();
-        });
+        }, ...(ngDevMode ? [{ debugName: "show" }] : []));
         this.size = computed(() => {
             let sty = this.ngbScrollBar() === 'vertical'
                 ? `height: ${this.scrollArea.scrollbarHeight()}%;`
@@ -29,7 +29,7 @@ class NgbScrollBar {
                     ? 'width: 8px; top: 0; right: 0;'
                     : 'height: 8px; bottom: 0; left: 0;';
             return sty;
-        });
+        }, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.drag.events.subscribe(data => {
             if (this.ngbScrollBar() === 'vertical') {
                 this.scrollArea.startDraggingVertical(data);
@@ -39,10 +39,10 @@ class NgbScrollBar {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbScrollBar, isStandalone: true, selector: "[ngbScrollBar]", inputs: { ngbScrollBar: { classPropertyName: "ngbScrollBar", publicName: "ngbScrollBar", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "size()", "attr.data-visible": "visible()", "attr.data-active": "scrollArea.isDragging()", "hidden": "!show()" }, styleAttribute: "position: absolute; cursor: pointer; z-index: 100;" }, hostDirectives: [{ directive: i1.Drag }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbScrollBar, isStandalone: true, selector: "[ngbScrollBar]", inputs: { ngbScrollBar: { classPropertyName: "ngbScrollBar", publicName: "ngbScrollBar", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "size()", "attr.data-visible": "visible()", "attr.data-active": "scrollArea.isDragging()", "hidden": "!show()" }, styleAttribute: "position: absolute; cursor: pointer; z-index: 100;" }, hostDirectives: [{ directive: i1.Drag }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbScrollBar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbScrollBar]',
@@ -59,24 +59,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class NgbScrollArea {
     constructor() {
         this.scrollAreaViewport = viewChild.required('scrollAreaViewport');
-        this.scrollbars = contentChildren(NgbScrollBar);
+        this.scrollbars = contentChildren(NgbScrollBar, ...(ngDevMode ? [{ debugName: "scrollbars" }] : []));
         this.scrollbarVertical = computed(() => {
             const scrollbars = this.scrollbars();
             return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'vertical');
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollbarVertical" }] : []));
         this.scrollbarHorizontal = computed(() => {
             const scrollbars = this.scrollbars();
             return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'horizontal');
-        });
-        this.orientation = input('both');
-        this.hideDelay = input(1000); // Time in ms to hide scrollbar after scroll
-        this.alwaysShow = input(false); // Whether to always show the scrollbar
-        this.viewportHeight = signal(0);
-        this.viewportWidth = signal(0);
-        this.contentHeight = signal(0);
-        this.contentWidth = signal(0);
-        this.isScrolling = signal(false);
-        this.isDragging = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "scrollbarHorizontal" }] : []));
+        this.orientation = input('both', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.hideDelay = input(1000, ...(ngDevMode ? [{ debugName: "hideDelay" }] : [])); // Time in ms to hide scrollbar after scroll
+        this.alwaysShow = input(false, ...(ngDevMode ? [{ debugName: "alwaysShow" }] : [])); // Whether to always show the scrollbar
+        this.viewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : []));
+        this.viewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
+        this.contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : []));
+        this.contentWidth = signal(0, ...(ngDevMode ? [{ debugName: "contentWidth" }] : []));
+        this.isScrolling = signal(false, ...(ngDevMode ? [{ debugName: "isScrolling" }] : []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
         this.startY = 0;
         this.startX = 0;
         this.startScrollTop = 0;
@@ -84,21 +84,21 @@ class NgbScrollArea {
         this.client = isClient();
         this.showScrollbar = computed(() => {
             return this.alwaysShow() || this.isScrolling() || this.isDragging();
-        });
-        this.hasVertical = computed(() => this.contentHeight() > this.viewportHeight());
-        this.hasHorizontal = computed(() => this.contentWidth() > this.viewportWidth());
-        this.showVerticalBar = computed(() => this.hasVertical() && this.orientation() !== 'horizontal');
-        this.showHorizontalBar = computed(() => this.hasHorizontal() && this.orientation() !== 'vertical');
-        this.showVerticalScroll = computed(() => this.showVerticalBar() && this.showScrollbar());
-        this.showHorizontalScroll = computed(() => this.showHorizontalBar() && this.showScrollbar());
+        }, ...(ngDevMode ? [{ debugName: "showScrollbar" }] : []));
+        this.hasVertical = computed(() => this.contentHeight() > this.viewportHeight(), ...(ngDevMode ? [{ debugName: "hasVertical" }] : []));
+        this.hasHorizontal = computed(() => this.contentWidth() > this.viewportWidth(), ...(ngDevMode ? [{ debugName: "hasHorizontal" }] : []));
+        this.showVerticalBar = computed(() => this.hasVertical() && this.orientation() !== 'horizontal', ...(ngDevMode ? [{ debugName: "showVerticalBar" }] : []));
+        this.showHorizontalBar = computed(() => this.hasHorizontal() && this.orientation() !== 'vertical', ...(ngDevMode ? [{ debugName: "showHorizontalBar" }] : []));
+        this.showVerticalScroll = computed(() => this.showVerticalBar() && this.showScrollbar(), ...(ngDevMode ? [{ debugName: "showVerticalScroll" }] : []));
+        this.showHorizontalScroll = computed(() => this.showHorizontalBar() && this.showScrollbar(), ...(ngDevMode ? [{ debugName: "showHorizontalScroll" }] : []));
         this.scrollbarHeight = computed(() => {
             const viewportToContentRatio = this.viewportHeight() / this.contentHeight();
             return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% height
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollbarHeight" }] : []));
         this.scrollbarWidth = computed(() => {
             const viewportToContentRatio = this.viewportWidth() / this.contentWidth();
             return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% width
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : []));
         this.handleScroll = (event) => {
             const target = event.target;
             this.isScrolling.set(true);
@@ -190,8 +190,8 @@ class NgbScrollArea {
         const value = Math.max(0, Math.min(newScrollLeft, balance));
         this.scrollAreaViewport().nativeElement.scrollLeft = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbScrollArea, isStandalone: true, selector: "[ngbScrollArea]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "scrollbars", predicate: NgbScrollBar, isSignal: true }], viewQueries: [{ propertyName: "scrollAreaViewport", first: true, predicate: ["scrollAreaViewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: NgbScrollArea, isStandalone: true, selector: "[ngbScrollArea]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "scrollbars", predicate: NgbScrollBar, isSignal: true }], viewQueries: [{ propertyName: "scrollAreaViewport", first: true, predicate: ["scrollAreaViewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="scroll-area-viewport hide-scrollbar" #scrollAreaViewport>
       <div class="scroll-area-content" style="height: 100%;">
         <ng-content></ng-content>
@@ -206,7 +206,7 @@ class NgbScrollArea {
     }
   `, isInline: true, styles: [":host{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;min-height:0}.scroll-area-viewport{width:100%;height:100%;overflow:auto;flex:1;min-height:0}.scroll-area-viewport.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.scroll-area-viewport.hide-scrollbar::-webkit-scrollbar{display:none}.scroll-area-content{min-height:0;min-width:fit-content}.scroll-area-corner{position:absolute;right:0;bottom:0;width:8px;height:8px;background:#0000004d;border-radius:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbScrollArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbScrollArea, decorators: [{
             type: Component,
             args: [{ selector: '[ngbScrollArea]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="scroll-area-viewport hide-scrollbar" #scrollAreaViewport>

package/fesm2022/ngbase-adk-scroll-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngbase-adk-scroll-area.mjs","sources":["../../../projects/adk/scroll-area/scroll-area.ts","../../../projects/adk/scroll-area/ngbase-adk-scroll-area.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  computed,\n  signal,\n  ChangeDetectionStrategy,\n  viewChild,\n  effect,\n  Directive,\n  input,\n  inject,\n  contentChildren,\n} from '@angular/core';\nimport { Drag, DragData } from '@ngbase/adk/drag';\nimport { isClient } from '@ngbase/adk/utils';\n\nexport type ScrollBarOrientation = 'vertical' | 'horizontal' | 'both';\n\n@Directive({\n  selector: '[ngbScrollBar]',\n  hostDirectives: [Drag],\n  host: {\n    style: `position: absolute; cursor: pointer; z-index: 100;`,\n    '[style]': 'size()',\n    '[attr.data-visible]': 'visible()',\n    '[attr.data-active]': 'scrollArea.isDragging()',\n    '[hidden]': '!show()',\n  },\n})\nexport class NgbScrollBar {\n  readonly el = inject<ElementRef<HTMLDivElement>>(ElementRef);\n  readonly scrollArea = inject(NgbScrollArea);\n  readonly drag = inject(Drag);\n  readonly ngbScrollBar = input.required<'vertical' | 'horizontal'>();\n\n  readonly visible = computed(() => {\n    return this.ngbScrollBar() === 'vertical'\n      ? this.scrollArea.showVerticalScroll()\n      : this.scrollArea.showHorizontalScroll();\n  });\n\n  readonly show = computed(() => {\n    return this.ngbScrollBar() === 'vertical'\n      ? this.scrollArea.showVerticalBar()\n      : this.scrollArea.showHorizontalBar();\n  });\n\n  readonly size = computed(() => {\n    let sty =\n      this.ngbScrollBar() === 'vertical'\n        ? `height: ${this.scrollArea.scrollbarHeight()}%;`\n        : `width: ${this.scrollArea.scrollbarWidth()}%;`;\n    sty +=\n      this.ngbScrollBar() === 'vertical'\n        ? 'width: 8px; top: 0; right: 0;'\n        : 'height: 8px; bottom: 0; left: 0;';\n    return sty;\n  });\n\n  constructor() {\n    this.drag.events.subscribe(data => {\n      if (this.ngbScrollBar() === 'vertical') {\n        this.scrollArea.startDraggingVertical(data);\n      } else {\n        this.scrollArea.startDraggingHorizontal(data);\n      }\n    });\n  }\n}\n\n@Component({\n  selector: '[ngbScrollArea]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"scroll-area-viewport hide-scrollbar\" #scrollAreaViewport>\n      <div class=\"scroll-area-content\" style=\"height: 100%;\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <ng-content select=\"[ngbScrollBar]\"></ng-content>\n\n    <!-- Corner piece when both scrollbars are visible -->\n    @if (hasVertical() && hasHorizontal() && orientation() === 'both') {\n      <ng-content select=\".scroll-area-corner\"></ng-content>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .scroll-area-viewport {\n        width: 100%;\n        height: 100%;\n        overflow: auto;\n        flex: 1;\n        min-height: 0;\n      }\n\n      .scroll-area-viewport.hide-scrollbar {\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n      }\n\n      .scroll-area-viewport.hide-scrollbar::-webkit-scrollbar {\n        display: none;\n      }\n\n      .scroll-area-content {\n        min-height: 0;\n        min-width: fit-content;\n      }\n\n      .scroll-area-corner {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        width: 8px;\n        height: 8px;\n        background: rgba(0, 0, 0, 0.3);\n        border-radius: 4px;\n      }\n    `,\n  ],\n})\nexport class NgbScrollArea {\n  readonly scrollAreaViewport =\n    viewChild.required<ElementRef<HTMLDivElement>>('scrollAreaViewport');\n  readonly scrollbars = contentChildren(NgbScrollBar);\n  readonly scrollbarVertical = computed(() => {\n    const scrollbars = this.scrollbars();\n    return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'vertical');\n  });\n  readonly scrollbarHorizontal = computed(() => {\n    const scrollbars = this.scrollbars();\n    return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'horizontal');\n  });\n\n  readonly orientation = input<ScrollBarOrientation>('both');\n  readonly hideDelay = input(1000); // Time in ms to hide scrollbar after scroll\n  readonly alwaysShow = input(false); // Whether to always show the scrollbar\n\n  private viewportHeight = signal(0);\n  private viewportWidth = signal(0);\n  private contentHeight = signal(0);\n  private contentWidth = signal(0);\n  private isScrolling = signal(false);\n  private hideTimeout: any;\n  private isDragging = signal(false);\n  private startY = 0;\n  private startX = 0;\n  private startScrollTop = 0;\n  private startScrollLeft = 0;\n  private client = isClient();\n\n  protected readonly showScrollbar = computed(() => {\n    return this.alwaysShow() || this.isScrolling() || this.isDragging();\n  });\n\n  protected readonly hasVertical = computed(() => this.contentHeight() > this.viewportHeight());\n  protected readonly hasHorizontal = computed(() => this.contentWidth() > this.viewportWidth());\n\n  readonly showVerticalBar = computed(\n    () => this.hasVertical() && this.orientation() !== 'horizontal',\n  );\n  readonly showHorizontalBar = computed(\n    () => this.hasHorizontal() && this.orientation() !== 'vertical',\n  );\n\n  readonly showVerticalScroll = computed(() => this.showVerticalBar() && this.showScrollbar());\n  readonly showHorizontalScroll = computed(() => this.showHorizontalBar() && this.showScrollbar());\n\n  readonly scrollbarHeight = computed(() => {\n    const viewportToContentRatio = this.viewportHeight() / this.contentHeight();\n    return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% height\n  });\n\n  readonly scrollbarWidth = computed(() => {\n    const viewportToContentRatio = this.viewportWidth() / this.contentWidth();\n    return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% width\n  });\n\n  constructor() {\n    effect(cleanup => {\n      this.updateDimensions();\n      const viewport = this.scrollAreaViewport().nativeElement;\n\n      if (this.client) {\n        viewport.addEventListener('scroll', this.handleScroll);\n        // Set up resize observer\n        const resizeObserver = new ResizeObserver(() => {\n          this.updateDimensions();\n        });\n\n        resizeObserver.observe(viewport);\n        resizeObserver.observe(viewport.firstElementChild as Element);\n\n        cleanup(() => {\n          viewport.removeEventListener('scroll', this.handleScroll);\n          resizeObserver.disconnect();\n        });\n      }\n    });\n  }\n\n  private updateDimensions() {\n    const viewport = this.scrollAreaViewport().nativeElement;\n    this.viewportHeight.set(viewport.clientHeight);\n    this.viewportWidth.set(viewport.clientWidth);\n    this.contentHeight.set(viewport.scrollHeight);\n    this.contentWidth.set(viewport.scrollWidth);\n  }\n\n  private handleScroll = (event: Event) => {\n    const target = event.target as HTMLElement;\n    this.isScrolling.set(true);\n\n    this.scrollbarVerticalTransform(target.scrollTop);\n    this.scrollbarHorizontalTransform(target.scrollLeft);\n    // Clear existing timeout\n    if (this.hideTimeout) {\n      clearTimeout(this.hideTimeout);\n    }\n\n    // Set new timeout to hide scrollbar\n    this.hideTimeout = setTimeout(() => {\n      this.isScrolling.set(false);\n    }, this.hideDelay());\n  };\n\n  private scrollbarVerticalTransform(scrollTop: number) {\n    const scrollbar = this.scrollbarVertical()?.el.nativeElement;\n    if (!scrollbar) return;\n    const scrollRatio = scrollTop / (this.contentHeight() - this.viewportHeight());\n    const maxTranslate =\n      this.viewportHeight() - (this.viewportHeight() * this.scrollbarHeight()) / 100;\n    const translateY = scrollRatio * maxTranslate;\n    scrollbar.style.transform = `translateY(${translateY}px)`;\n  }\n\n  private scrollbarHorizontalTransform(scrollLeft: number) {\n    const scrollbar = this.scrollbarHorizontal()?.el.nativeElement;\n    if (!scrollbar) return;\n    const scrollRatio = scrollLeft / (this.contentWidth() - this.viewportWidth());\n    const maxTranslate =\n      this.viewportWidth() - (this.viewportWidth() * this.scrollbarWidth()) / 100;\n    const translateX = scrollRatio * maxTranslate;\n    scrollbar.style.transform = `translateX(${translateX}px)`;\n  }\n\n  startDraggingVertical(data: DragData) {\n    data.event?.preventDefault();\n    if (data.type === 'start') {\n      this.startScrollTop = this.scrollAreaViewport().nativeElement.scrollTop;\n      this.isDragging.set(true);\n      this.startY = data.clientY!;\n    } else if (data.type === 'end') {\n      this.isDragging.set(false);\n    }\n\n    const delta = data.clientY! - this.startY;\n    const scrollRatio =\n      delta / (this.viewportHeight() - (this.viewportHeight() * this.scrollbarHeight()) / 100);\n    const balance = this.contentHeight() - this.viewportHeight();\n    const newScrollTop = this.startScrollTop + scrollRatio * balance;\n\n    const value = Math.max(0, Math.min(newScrollTop, balance));\n\n    this.scrollAreaViewport().nativeElement.scrollTop = value;\n  }\n\n  startDraggingHorizontal(data: DragData) {\n    data.event?.preventDefault();\n    if (data.type === 'start') {\n      this.startScrollLeft = this.scrollAreaViewport().nativeElement.scrollLeft;\n      this.isDragging.set(true);\n      this.startX = data.clientX!;\n    } else if (data.type === 'end') {\n      this.isDragging.set(false);\n    }\n\n    const delta = data.clientX! - this.startX;\n    const scrollRatio =\n      delta / (this.viewportWidth() - (this.viewportWidth() * this.scrollbarWidth()) / 100);\n    const balance = this.contentWidth() - this.viewportWidth();\n    const newScrollLeft = this.startScrollLeft + scrollRatio * balance;\n\n    const value = Math.max(0, Math.min(newScrollLeft, balance));\n\n    this.scrollAreaViewport().nativeElement.scrollLeft = value;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MA6Ba,YAAY,CAAA;AA8BvB,IAAA,WAAA,GAAA;AA7BS,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAA6B,UAAU,CAAC;AACnD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC;AAClC,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AACnB,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,EAA6B;AAE1D,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,YAAA,OAAO,IAAI,CAAC,YAAY,EAAE,KAAK;AAC7B,kBAAE,IAAI,CAAC,UAAU,CAAC,kBAAkB;AACpC,kBAAE,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE;AAC5C,SAAC,CAAC;AAEO,QAAA,IAAA,CAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AAC5B,YAAA,OAAO,IAAI,CAAC,YAAY,EAAE,KAAK;AAC7B,kBAAE,IAAI,CAAC,UAAU,CAAC,eAAe;AACjC,kBAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE;AACzC,SAAC,CAAC;AAEO,QAAA,IAAA,CAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AAC5B,YAAA,IAAI,GAAG,GACL,IAAI,CAAC,YAAY,EAAE,KAAK;kBACpB,WAAW,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAI,EAAA;kBAChD,UAAU,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAA,EAAA,CAAI;YACpD,GAAG;AACD,gBAAA,IAAI,CAAC,YAAY,EAAE,KAAK;AACtB,sBAAE;sBACA,kCAAkC;AACxC,YAAA,OAAO,GAAG;AACZ,SAAC,CAAC;QAGA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,IAAG;AAChC,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,UAAU,EAAE;AACtC,gBAAA,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,IAAI,CAAC;;iBACtC;AACL,gBAAA,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,IAAI,CAAC;;AAEjD,SAAC,CAAC;;8GArCO,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,oDAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAXxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EAAE,CAAC,IAAI,CAAC;AACtB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,CAAoD,kDAAA,CAAA;AAC3D,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,oBAAoB,EAAE,yBAAyB;AAC/C,wBAAA,UAAU,EAAE,SAAS;AACtB,qBAAA;AACF,iBAAA;;MAyGY,aAAa,CAAA;AAyDxB,IAAA,WAAA,GAAA;AAxDS,QAAA,IAAA,CAAA,kBAAkB,GACzB,SAAS,CAAC,QAAQ,CAA6B,oBAAoB,CAAC;AAC7D,QAAA,IAAA,CAAA,UAAU,GAAG,eAAe,CAAC,YAAY,CAAC;AAC1C,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;AACzC,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AACpC,YAAA,OAAO,UAAU,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,YAAY,EAAE,KAAK,UAAU,CAAC;AAC9E,SAAC,CAAC;AACO,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;AAC3C,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AACpC,YAAA,OAAO,UAAU,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,YAAY,EAAE,KAAK,YAAY,CAAC;AAChF,SAAC,CAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAuB,MAAM,CAAC;AACjD,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AAE3B,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC;AAC1B,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;AAE3B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAM,CAAA,MAAA,GAAG,CAAC;QACV,IAAM,CAAA,MAAA,GAAG,CAAC;QACV,IAAc,CAAA,cAAA,GAAG,CAAC;QAClB,IAAe,CAAA,eAAA,GAAG,CAAC;QACnB,IAAM,CAAA,MAAA,GAAG,QAAQ,EAAE;AAER,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,YAAA,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;AACrE,SAAC,CAAC;AAEiB,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1E,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;AAEpF,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CACjC,MAAM,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,CAChE;AACQ,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CACnC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,UAAU,CAChE;AAEQ,QAAA,IAAA,CAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;AACnF,QAAA,IAAA,CAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;AAEvF,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;YACvC,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;AAC3E,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,sBAAsB,GAAG,GAAG,EAAE,EAAE,CAAC,CAAC;AACpD,SAAC,CAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;YACtC,MAAM,sBAAsB,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;AACzE,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,sBAAsB,GAAG,GAAG,EAAE,EAAE,CAAC,CAAC;AACpD,SAAC,CAAC;AAiCM,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AAE1B,YAAA,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,SAAS,CAAC;AACjD,YAAA,IAAI,CAAC,4BAA4B,CAAC,MAAM,CAAC,UAAU,CAAC;;AAEpD,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;;;AAIhC,YAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAK;AACjC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,aAAC,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AACtB,SAAC;QA7CC,MAAM,CAAC,OAAO,IAAG;YACf,IAAI,CAAC,gBAAgB,EAAE;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa;AAExD,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;AAEtD,gBAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;oBAC7C,IAAI,CAAC,gBAAgB,EAAE;AACzB,iBAAC,CAAC;AAEF,gBAAA,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC;AAChC,gBAAA,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,iBAA4B,CAAC;gBAE7D,OAAO,CAAC,MAAK;oBACX,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;oBACzD,cAAc,CAAC,UAAU,EAAE;AAC7B,iBAAC,CAAC;;AAEN,SAAC,CAAC;;IAGI,gBAAgB,GAAA;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa;QACxD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC;QAC5C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC7C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC;;AAoBrC,IAAA,0BAA0B,CAAC,SAAiB,EAAA;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAAE,CAAC,aAAa;AAC5D,QAAA,IAAI,CAAC,SAAS;YAAE;AAChB,QAAA,MAAM,WAAW,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9E,MAAM,YAAY,GAChB,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG;AAChF,QAAA,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY;QAC7C,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAc,WAAA,EAAA,UAAU,KAAK;;AAGnD,IAAA,4BAA4B,CAAC,UAAkB,EAAA;QACrD,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,CAAC,aAAa;AAC9D,QAAA,IAAI,CAAC,SAAS;YAAE;AAChB,QAAA,MAAM,WAAW,GAAG,UAAU,IAAI,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7E,MAAM,YAAY,GAChB,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG;AAC7E,QAAA,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY;QAC7C,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAc,WAAA,EAAA,UAAU,KAAK;;AAG3D,IAAA,qBAAqB,CAAC,IAAc,EAAA;AAClC,QAAA,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,SAAS;AACvE,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAQ;;AACtB,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;AAC9B,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;;QAG5B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAQ,GAAG,IAAI,CAAC,MAAM;QACzC,MAAM,WAAW,GACf,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,CAAC;QAC1F,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE;QAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,OAAO;AAEhE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAE1D,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,SAAS,GAAG,KAAK;;AAG3D,IAAA,uBAAuB,CAAC,IAAc,EAAA;AACpC,QAAA,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,UAAU;AACzE,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAQ;;AACtB,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;AAC9B,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;;QAG5B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAQ,GAAG,IAAI,CAAC,MAAM;QACzC,MAAM,WAAW,GACf,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,CAAC;QACvF,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;QAC1D,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,GAAG,WAAW,GAAG,OAAO;AAElE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;QAE3D,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,UAAU,GAAG,KAAK;;8GApKjD,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAGc,YAAY,EA/DxC,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ogBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA+CU,aAAa,EAAA,UAAA,EAAA,CAAA;kBA/DzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EACV,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,ogBAAA,CAAA,EAAA;;;ACtFH;;AAEG;;;;"}
+{"version":3,"file":"ngbase-adk-scroll-area.mjs","sources":["../../../projects/adk/scroll-area/scroll-area.ts","../../../projects/adk/scroll-area/ngbase-adk-scroll-area.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  computed,\n  signal,\n  ChangeDetectionStrategy,\n  viewChild,\n  effect,\n  Directive,\n  input,\n  inject,\n  contentChildren,\n} from '@angular/core';\nimport { Drag, DragData } from '@ngbase/adk/drag';\nimport { isClient } from '@ngbase/adk/utils';\n\nexport type ScrollBarOrientation = 'vertical' | 'horizontal' | 'both';\n\n@Directive({\n  selector: '[ngbScrollBar]',\n  hostDirectives: [Drag],\n  host: {\n    style: `position: absolute; cursor: pointer; z-index: 100;`,\n    '[style]': 'size()',\n    '[attr.data-visible]': 'visible()',\n    '[attr.data-active]': 'scrollArea.isDragging()',\n    '[hidden]': '!show()',\n  },\n})\nexport class NgbScrollBar {\n  readonly el = inject<ElementRef<HTMLDivElement>>(ElementRef);\n  readonly scrollArea = inject(NgbScrollArea);\n  readonly drag = inject(Drag);\n  readonly ngbScrollBar = input.required<'vertical' | 'horizontal'>();\n\n  readonly visible = computed(() => {\n    return this.ngbScrollBar() === 'vertical'\n      ? this.scrollArea.showVerticalScroll()\n      : this.scrollArea.showHorizontalScroll();\n  });\n\n  readonly show = computed(() => {\n    return this.ngbScrollBar() === 'vertical'\n      ? this.scrollArea.showVerticalBar()\n      : this.scrollArea.showHorizontalBar();\n  });\n\n  readonly size = computed(() => {\n    let sty =\n      this.ngbScrollBar() === 'vertical'\n        ? `height: ${this.scrollArea.scrollbarHeight()}%;`\n        : `width: ${this.scrollArea.scrollbarWidth()}%;`;\n    sty +=\n      this.ngbScrollBar() === 'vertical'\n        ? 'width: 8px; top: 0; right: 0;'\n        : 'height: 8px; bottom: 0; left: 0;';\n    return sty;\n  });\n\n  constructor() {\n    this.drag.events.subscribe(data => {\n      if (this.ngbScrollBar() === 'vertical') {\n        this.scrollArea.startDraggingVertical(data);\n      } else {\n        this.scrollArea.startDraggingHorizontal(data);\n      }\n    });\n  }\n}\n\n@Component({\n  selector: '[ngbScrollArea]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"scroll-area-viewport hide-scrollbar\" #scrollAreaViewport>\n      <div class=\"scroll-area-content\" style=\"height: 100%;\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <ng-content select=\"[ngbScrollBar]\"></ng-content>\n\n    <!-- Corner piece when both scrollbars are visible -->\n    @if (hasVertical() && hasHorizontal() && orientation() === 'both') {\n      <ng-content select=\".scroll-area-corner\"></ng-content>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .scroll-area-viewport {\n        width: 100%;\n        height: 100%;\n        overflow: auto;\n        flex: 1;\n        min-height: 0;\n      }\n\n      .scroll-area-viewport.hide-scrollbar {\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n      }\n\n      .scroll-area-viewport.hide-scrollbar::-webkit-scrollbar {\n        display: none;\n      }\n\n      .scroll-area-content {\n        min-height: 0;\n        min-width: fit-content;\n      }\n\n      .scroll-area-corner {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        width: 8px;\n        height: 8px;\n        background: rgba(0, 0, 0, 0.3);\n        border-radius: 4px;\n      }\n    `,\n  ],\n})\nexport class NgbScrollArea {\n  readonly scrollAreaViewport =\n    viewChild.required<ElementRef<HTMLDivElement>>('scrollAreaViewport');\n  readonly scrollbars = contentChildren(NgbScrollBar);\n  readonly scrollbarVertical = computed(() => {\n    const scrollbars = this.scrollbars();\n    return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'vertical');\n  });\n  readonly scrollbarHorizontal = computed(() => {\n    const scrollbars = this.scrollbars();\n    return scrollbars.find(scrollbar => scrollbar.ngbScrollBar() === 'horizontal');\n  });\n\n  readonly orientation = input<ScrollBarOrientation>('both');\n  readonly hideDelay = input(1000); // Time in ms to hide scrollbar after scroll\n  readonly alwaysShow = input(false); // Whether to always show the scrollbar\n\n  private viewportHeight = signal(0);\n  private viewportWidth = signal(0);\n  private contentHeight = signal(0);\n  private contentWidth = signal(0);\n  private isScrolling = signal(false);\n  private hideTimeout: any;\n  readonly isDragging = signal(false);\n  private startY = 0;\n  private startX = 0;\n  private startScrollTop = 0;\n  private startScrollLeft = 0;\n  private client = isClient();\n\n  protected readonly showScrollbar = computed(() => {\n    return this.alwaysShow() || this.isScrolling() || this.isDragging();\n  });\n\n  protected readonly hasVertical = computed(() => this.contentHeight() > this.viewportHeight());\n  protected readonly hasHorizontal = computed(() => this.contentWidth() > this.viewportWidth());\n\n  readonly showVerticalBar = computed(\n    () => this.hasVertical() && this.orientation() !== 'horizontal',\n  );\n  readonly showHorizontalBar = computed(\n    () => this.hasHorizontal() && this.orientation() !== 'vertical',\n  );\n\n  readonly showVerticalScroll = computed(() => this.showVerticalBar() && this.showScrollbar());\n  readonly showHorizontalScroll = computed(() => this.showHorizontalBar() && this.showScrollbar());\n\n  readonly scrollbarHeight = computed(() => {\n    const viewportToContentRatio = this.viewportHeight() / this.contentHeight();\n    return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% height\n  });\n\n  readonly scrollbarWidth = computed(() => {\n    const viewportToContentRatio = this.viewportWidth() / this.contentWidth();\n    return Math.max(viewportToContentRatio * 100, 10); // Minimum 10% width\n  });\n\n  constructor() {\n    effect(cleanup => {\n      this.updateDimensions();\n      const viewport = this.scrollAreaViewport().nativeElement;\n\n      if (this.client) {\n        viewport.addEventListener('scroll', this.handleScroll);\n        // Set up resize observer\n        const resizeObserver = new ResizeObserver(() => {\n          this.updateDimensions();\n        });\n\n        resizeObserver.observe(viewport);\n        resizeObserver.observe(viewport.firstElementChild as Element);\n\n        cleanup(() => {\n          viewport.removeEventListener('scroll', this.handleScroll);\n          resizeObserver.disconnect();\n        });\n      }\n    });\n  }\n\n  private updateDimensions() {\n    const viewport = this.scrollAreaViewport().nativeElement;\n    this.viewportHeight.set(viewport.clientHeight);\n    this.viewportWidth.set(viewport.clientWidth);\n    this.contentHeight.set(viewport.scrollHeight);\n    this.contentWidth.set(viewport.scrollWidth);\n  }\n\n  private handleScroll = (event: Event) => {\n    const target = event.target as HTMLElement;\n    this.isScrolling.set(true);\n\n    this.scrollbarVerticalTransform(target.scrollTop);\n    this.scrollbarHorizontalTransform(target.scrollLeft);\n    // Clear existing timeout\n    if (this.hideTimeout) {\n      clearTimeout(this.hideTimeout);\n    }\n\n    // Set new timeout to hide scrollbar\n    this.hideTimeout = setTimeout(() => {\n      this.isScrolling.set(false);\n    }, this.hideDelay());\n  };\n\n  private scrollbarVerticalTransform(scrollTop: number) {\n    const scrollbar = this.scrollbarVertical()?.el.nativeElement;\n    if (!scrollbar) return;\n    const scrollRatio = scrollTop / (this.contentHeight() - this.viewportHeight());\n    const maxTranslate =\n      this.viewportHeight() - (this.viewportHeight() * this.scrollbarHeight()) / 100;\n    const translateY = scrollRatio * maxTranslate;\n    scrollbar.style.transform = `translateY(${translateY}px)`;\n  }\n\n  private scrollbarHorizontalTransform(scrollLeft: number) {\n    const scrollbar = this.scrollbarHorizontal()?.el.nativeElement;\n    if (!scrollbar) return;\n    const scrollRatio = scrollLeft / (this.contentWidth() - this.viewportWidth());\n    const maxTranslate =\n      this.viewportWidth() - (this.viewportWidth() * this.scrollbarWidth()) / 100;\n    const translateX = scrollRatio * maxTranslate;\n    scrollbar.style.transform = `translateX(${translateX}px)`;\n  }\n\n  startDraggingVertical(data: DragData) {\n    data.event?.preventDefault();\n    if (data.type === 'start') {\n      this.startScrollTop = this.scrollAreaViewport().nativeElement.scrollTop;\n      this.isDragging.set(true);\n      this.startY = data.clientY!;\n    } else if (data.type === 'end') {\n      this.isDragging.set(false);\n    }\n\n    const delta = data.clientY! - this.startY;\n    const scrollRatio =\n      delta / (this.viewportHeight() - (this.viewportHeight() * this.scrollbarHeight()) / 100);\n    const balance = this.contentHeight() - this.viewportHeight();\n    const newScrollTop = this.startScrollTop + scrollRatio * balance;\n\n    const value = Math.max(0, Math.min(newScrollTop, balance));\n\n    this.scrollAreaViewport().nativeElement.scrollTop = value;\n  }\n\n  startDraggingHorizontal(data: DragData) {\n    data.event?.preventDefault();\n    if (data.type === 'start') {\n      this.startScrollLeft = this.scrollAreaViewport().nativeElement.scrollLeft;\n      this.isDragging.set(true);\n      this.startX = data.clientX!;\n    } else if (data.type === 'end') {\n      this.isDragging.set(false);\n    }\n\n    const delta = data.clientX! - this.startX;\n    const scrollRatio =\n      delta / (this.viewportWidth() - (this.viewportWidth() * this.scrollbarWidth()) / 100);\n    const balance = this.contentWidth() - this.viewportWidth();\n    const newScrollLeft = this.startScrollLeft + scrollRatio * balance;\n\n    const value = Math.max(0, Math.min(newScrollLeft, balance));\n\n    this.scrollAreaViewport().nativeElement.scrollLeft = value;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngbase-adk-select.mjs

@@ -14,14 +14,14 @@ class NgbOption {
         this.allyItem = inject(AccessibleItem);
         this.el = inject(ElementRef);
         // inputs
-        this.value = input();
-        this.disabled = input(false, { transform: booleanAttribute });
-        this.ayId = input();
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.ayId = input(...(ngDevMode ? [undefined, { debugName: "ayId" }] : []));
         // outputs
         this.onSelectionChange = output();
-        this.multiple = signal(false);
-        this.checked = signal(false);
-        this.active = signal(false);
+        this.multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this._ayId = linkedSignal({ source: this.ayId, computation: id => id || '' });
         this.allyItem._ayId = this._ayId;
         this.allyItem._disabled = this.disabled;
@@ -46,10 +46,10 @@ class NgbOption {
         }
         return this.value();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbOption, isStandalone: true, selector: "[ngbOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "selectOption()" } }, hostDirectives: [{ directive: i1.AccessibleItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbOption, isStandalone: true, selector: "[ngbOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "selectOption()" } }, hostDirectives: [{ directive: i1.AccessibleItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbOption]',
@@ -64,12 +64,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 
 class NgbSelectTarget {
     constructor() {
-        this.target = signal(null);
+        this.target = signal(null, ...(ngDevMode ? [{ debugName: "target" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectTarget, isStandalone: true, selector: "[ngbSelectTarget]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbSelectTarget, isStandalone: true, selector: "[ngbSelectTarget]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTarget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectTarget, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectTarget]',
@@ -82,26 +82,26 @@ class SelectBase {
         this.el = inject(ElementRef);
         this.dir = inject(Directionality);
         this.target = inject(NgbSelectTarget, { optional: true });
-        this.list = contentChildren(NgbOption, { descendants: true });
+        this.list = contentChildren(NgbOption, ...(ngDevMode ? [{ debugName: "list", descendants: true }] : [{ descendants: true }]));
         this.popover = ngbPopoverPortal();
-        this.optionsTemplate = viewChild('optionsTemplate', { read: TemplateRef });
-        this.container = viewChild('container', { read: ElementRef });
-        this.optionsGroup = viewChild('optionsGroup', { read: ElementRef });
+        this.optionsTemplate = viewChild('optionsTemplate', ...(ngDevMode ? [{ debugName: "optionsTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container", read: ElementRef }] : [{ read: ElementRef }]));
+        this.optionsGroup = viewChild('optionsGroup', ...(ngDevMode ? [{ debugName: "optionsGroup", read: ElementRef }] : [{ read: ElementRef }]));
         // inputs
-        this.value = model('');
-        this.disabled = model(false);
-        this.multiple = input(false, { transform: booleanAttribute });
-        this.noAutoClose = input(false, { transform: booleanAttribute });
-        this.options = input([]);
-        this.placeholder = input(' ');
-        this.size = input('free');
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.noAutoClose = input(false, ...(ngDevMode ? [{ debugName: "noAutoClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.placeholder = input(' ', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.size = input('free', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.opened = output();
         this.closed = output();
         // state
         this.defaultOptions = {};
-        this.panelOpen = signal(false);
-        this.values = signal([]);
-        this.status = signal('closed');
+        this.panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
+        this.values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : []));
+        this.status = signal('closed', ...(ngDevMode ? [{ debugName: "status" }] : []));
         this.previousValue = '';
         this.events = new Subject();
         this.ayId = uniqueId();
@@ -128,7 +128,7 @@ class SelectBase {
                 this.previousValue = values[0] || '';
             }
             return this.previousValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "cValue" }] : []));
         // used to determine whether the select is with in a popup
         this.withInPopup = false;
         this.clickHandler = (e) => {
@@ -177,7 +177,7 @@ class SelectBase {
         });
         // valueRef is required to destroy the effect when formControl is registered
         // so that it does not override the form value
-        this.valueRef = effect(() => this.updateValues(this.value()));
+        this.valueRef = effect(() => this.updateValues(this.value()), ...(ngDevMode ? [{ debugName: "valueRef" }] : []));
     }
     open() {
         // if the status is opened, return
@@ -306,10 +306,10 @@ class SelectBase {
     ngOnDestroy() {
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: SelectBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, noAutoClose: { classPropertyName: "noAutoClose", publicName: "noAutoClose", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", opened: "opened", closed: "closed" }, queries: [{ propertyName: "list", predicate: NgbOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsGroup", first: true, predicate: ["optionsGroup"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: SelectBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, noAutoClose: { classPropertyName: "noAutoClose", publicName: "noAutoClose", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", opened: "opened", closed: "closed" }, queries: [{ propertyName: "list", predicate: NgbOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsGroup", first: true, predicate: ["optionsGroup"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SelectBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }] });
 
@@ -317,10 +317,10 @@ class NgbSelectOption {
     constructor() {
         this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectOption, isStandalone: true, selector: "[ngbSelectOption]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbSelectOption, isStandalone: true, selector: "[ngbSelectOption]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectOption]',
@@ -330,13 +330,13 @@ class SelectValue {
     constructor() {
         this.select = inject((NgbSelect));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SelectValue, isStandalone: true, selector: "[ngbSelectValue]", host: { attributes: { "type": "button", "role": "combobox", "tabindex": "-1" }, properties: { "disabled": "select.disabled()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: SelectValue, isStandalone: true, selector: "button[ngbSelectValue]", host: { attributes: { "type": "button", "role": "combobox", "tabindex": "-1" }, properties: { "disabled": "select.disabled()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SelectValue, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngbSelectValue]',
+                    selector: 'button[ngbSelectValue]',
                     host: {
                         type: 'button',
                         role: 'combobox',
@@ -353,10 +353,10 @@ class NgbSelectOptionGroup {
         this.group._loop.set(false);
         this.group._ayId.set(this.select.ayId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectOptionGroup, isStandalone: true, selector: "[ngbSelectOptionGroup]", hostDirectives: [{ directive: i1.AccessibleGroup }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbSelectOptionGroup, isStandalone: true, selector: "[ngbSelectOptionGroup]", hostDirectives: [{ directive: i1.AccessibleGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectOptionGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectOptionGroup]',
@@ -366,18 +366,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class NgbSelect extends SelectBase {
     constructor() {
         super(true);
-        this.search = model('');
-        this.optionTemplate = contentChild((NgbSelectOption));
-        this.filterFn = input((option) => option);
-        this.queryFn = input();
-        this.filterOptions = input();
-        this.optionsFilter = filterFunction(this.options, computed(() => this.filterOptions() ??
-            { filter: this.filterFn(), query: this.queryFn() }));
+        this.optionTemplate = contentChild((NgbSelectOption), ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+        this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : []));
+        this.filterFn = input((option) => option, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+        this.filterOptions = input(...(ngDevMode ? [undefined, { debugName: "filterOptions" }] : []));
+        this.optionsFilter = filterFunction(this.options, computed(() => this.filterOptions() ?? { filter: this.filterFn() }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: NgbSelect, isStandalone: true, selector: "[ngbSelect]", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, queryFn: { classPropertyName: "queryFn", publicName: "queryFn", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange" }, host: { attributes: { "role": "listbox", "type": "button" }, listeners: { "click": "open()", "keydown.arrowdown": "open()", "keydown.arrowup": "open()", "keydown.enter": "open()", "keydown.space": "open()" }, properties: { "tabindex": "disabled() ? -1 : 0" } }, providers: [_provide(NgbSelect)], queries: [{ propertyName: "optionTemplate", first: true, predicate: (NgbSelectOption), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: NgbSelect, isStandalone: true, selector: "[ngbSelect]", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange" }, host: { attributes: { "role": "listbox", "type": "button" }, listeners: { "click": "open()", "keydown.arrowdown": "$event.preventDefault(); open()", "keydown.arrowup": "$event.preventDefault(); open()", "keydown.enter": "$event.preventDefault(); open()", "keydown.space": "$event.preventDefault(); open()" }, properties: { "tabindex": "disabled() ? -1 : 0" } }, providers: [_provide(NgbSelect)], queries: [{ propertyName: "optionTemplate", first: true, predicate: (NgbSelectOption), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelect]',
@@ -386,10 +384,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         role: 'listbox',
                         type: 'button',
                         '(click)': 'open()',
-                        '(keydown.arrowdown)': 'open()',
-                        '(keydown.arrowup)': 'open()',
-                        '(keydown.enter)': 'open()',
-                        '(keydown.space)': 'open()',
+                        '(keydown.arrowdown)': '$event.preventDefault(); open()',
+                        '(keydown.arrowup)': '$event.preventDefault(); open()',
+                        '(keydown.enter)': '$event.preventDefault(); open()',
+                        '(keydown.space)': '$event.preventDefault(); open()',
                         '[tabindex]': 'disabled() ? -1 : 0',
                     },
                 }]
@@ -404,13 +402,13 @@ function aliasSelect(select) {
 
 class NgbOptionGroup {
     constructor() {
-        this.label = input.required();
-        this.disabled = input(false);
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbOptionGroup, isStandalone: true, selector: "[ngbOptionGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbOptionGroup, isStandalone: true, selector: "[ngbOptionGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbOptionGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbOptionGroup]',
@@ -424,9 +422,9 @@ class NgbSelectInput {
         this.select = inject(NgbSelect, { optional: true });
         this.inputBase = inject(InputBase);
         // Inputs
-        this.placeholder = input('Search here');
-        this.options = input([]);
-        this.filterFn = input();
+        this.placeholder = input('Search here', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.filterFn = input(...(ngDevMode ? [undefined, { debugName: "filterFn" }] : []));
         // State
         this.filteredOptions = computed(() => {
             const fn = this.filterFn();
@@ -434,7 +432,7 @@ class NgbSelectInput {
             const search = this.inputBase.value();
             const values = search ? options.filter(v => fn(search, v, options)) : options;
             return values;
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
         this.select?.events.subscribe(event => {
             if (event === 'open') {
                 this.inputBase.value.set('');
@@ -445,13 +443,13 @@ class NgbSelectInput {
     updateSearch(value) {
         this.inputBase.value.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbSelectInput, isStandalone: true, selector: "[ngbSelectInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "placeholder": "placeholder()", "tabindex": "0" } }, exportAs: ["ngbSelectInput"], hostDirectives: [{ directive: i1.Autofocus }, { directive: i2.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbSelectInput, isStandalone: true, selector: "input[ngbSelectInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "placeholder": "placeholder()", "tabindex": "0" } }, exportAs: ["ngbSelectInput"], hostDirectives: [{ directive: i1.Autofocus }, { directive: i2.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngbSelectInput]',
+                    selector: 'input[ngbSelectInput]',
                     exportAs: 'ngbSelectInput',
                     hostDirectives: [
                         Autofocus,
@@ -464,10 +462,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 class NgbSelectTrigger {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectTrigger, isStandalone: true, selector: "[ngbSelectTrigger]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbSelectTrigger, isStandalone: true, selector: "[ngbSelectTrigger]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSelectTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectTrigger]',
@@ -478,10 +476,10 @@ class ListSelection extends SelectBase {
     constructor() {
         super(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ListSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ListSelection, isStandalone: true, selector: "[ngbListSelection]", providers: [provideValueAccessor(ListSelection)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ListSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: ListSelection, isStandalone: true, selector: "[ngbListSelection]", providers: [provideValueAccessor(ListSelection)], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ListSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ListSelection, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbListSelection]',