@ascentgl/ads-ui 21.111.0 → 21.113.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -6302,6 +6302,8 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         this.inputModifiedByKeyHandler = false;
         /** @ignore */
         this.elementRef = inject(ElementRef);
+        /** @ignore */
+        this.overlayContainerRef = inject(OverlayContainer);
     }
     /** @ignore */
     ngOnInit() {
@@ -6314,6 +6316,7 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.intersectionObserver?.disconnect();
+        this.teardownBackdropScrollPassthrough();
     }
     /** @ignore */
     setupIntersectionObserver() {
@@ -6330,6 +6333,69 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         });
         this.intersectionObserver.observe(this.elementRef.nativeElement);
     }
+    /**
+     * @ignore
+     * When the calendar overlay opens, the CDK backdrop (pointer-events: auto)
+     * covers the entire viewport and intercepts wheel events, preventing scroll
+     * on underlying containers. Forward those events to the nearest scrollable ancestor.
+     */
+    onOpened() {
+        super.onOpened();
+        this.setupBackdropScrollPassthrough();
+    }
+    /** @ignore */
+    onClosed() {
+        this.teardownBackdropScrollPassthrough();
+        super.onClosed();
+    }
+    /** @ignore */
+    setupBackdropScrollPassthrough() {
+        this.teardownBackdropScrollPassthrough();
+        const container = this.overlayContainerRef.getContainerElement();
+        const backdrop = container.querySelector('.cdk-overlay-backdrop');
+        if (!backdrop)
+            return;
+        const scrollTarget = this.findScrollableAncestor(this.elementRef.nativeElement);
+        if (!scrollTarget)
+            return;
+        const cleanupFns = [];
+        // Forward wheel events from the backdrop to the scrollable ancestor
+        // so that the page can still be scrolled while the calendar is open.
+        const onWheel = (event) => {
+            scrollTarget.scrollTop += event.deltaY;
+            scrollTarget.scrollLeft += event.deltaX;
+        };
+        backdrop.addEventListener('wheel', onWheel, { passive: true });
+        cleanupFns.push(() => backdrop.removeEventListener('wheel', onWheel));
+        // Reposition the calendar overlay when the scroll container scrolls,
+        // keeping the popup attached to the input (same behaviour as ads-dropdown).
+        // CDK ScrollDispatcher only detects window scroll and CdkScrollable directives,
+        // not arbitrary overflow containers, so we trigger the update manually.
+        const onScroll = () => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.picker?._popupRef?.updatePosition();
+        };
+        scrollTarget.addEventListener('scroll', onScroll, { passive: true });
+        cleanupFns.push(() => scrollTarget.removeEventListener('scroll', onScroll));
+        this.backdropWheelCleanup = () => cleanupFns.forEach((fn) => fn());
+    }
+    /** @ignore */
+    teardownBackdropScrollPassthrough() {
+        this.backdropWheelCleanup?.();
+        this.backdropWheelCleanup = undefined;
+    }
+    /** @ignore - Walk up the DOM to find the first ancestor with overflow-y: auto|scroll */
+    findScrollableAncestor(node) {
+        let current = node.parentElement;
+        while (current) {
+            const { overflowY } = getComputedStyle(current);
+            if (overflowY === 'auto' || overflowY === 'scroll') {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
     /** @ignore - Override to dispatch change event on blur when input was modified programmatically */
     touchControls() {
         // Mark controls as touched BEFORE dispatching the change event.
@@ -11727,6 +11793,8 @@ class AdsTabsComponent {
         this.tabGroup = viewChild.required('tabGroup');
         this.tabs = [];
         this.selectedIndex = 0;
+        /** When `true`, the border-bottom on inactive (non-active, non-disabled) tabs is hidden. Defaults to `false`. */
+        this.hideInactiveBorder = false;
         this.selectedIndexChange = new EventEmitter();
         this.tabChange = new EventEmitter();
     }
@@ -11753,11 +11821,11 @@ class AdsTabsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  [style.--ads-tab-width]=\"tabWidth || null\"\n  [style.--ads-tab-active-color]=\"_activeColorVar\"\n  class=\"custom-tabs\"\n  #tabGroup\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  [style.--ads-tab-width]=\"tabWidth || null\"\n  [style.--ads-tab-active-color]=\"_activeColorVar\"\n  class=\"custom-tabs\"\n  [class.hide-inactive-border]=\"hideInactiveBorder\"\n  #tabGroup\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  [style.--ads-tab-width]=\"tabWidth || null\"\n  [style.--ads-tab-active-color]=\"_activeColorVar\"\n  class=\"custom-tabs\"\n  #tabGroup\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
+            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  [style.--ads-tab-width]=\"tabWidth || null\"\n  [style.--ads-tab-active-color]=\"_activeColorVar\"\n  class=\"custom-tabs\"\n  [class.hide-inactive-border]=\"hideInactiveBorder\"\n  #tabGroup\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"] }]
         }], propDecorators: { tabGroup: [{ type: i0.ViewChild, args: ['tabGroup', { isSignal: true }] }], tabs: [{
                 type: Input
             }], selectedIndex: [{
@@ -11766,6 +11834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], activeColor: [{
                 type: Input
+            }], hideInactiveBorder: [{
+                type: Input
             }], selectedIndexChange: [{
                 type: Output
             }], tabChange: [{