@datarailsshared/datarailsshared 1.6.340 → 1.6.344

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -11,7 +11,7 @@ import { OverlayConfig, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/c
 import * as i4 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortalOutlet, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { transition, style, animate, trigger, state } from '@angular/animations';
-import { BehaviorSubject, noop as noop$3, Subject, from, merge, fromEvent, Observable, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, delay, combineLatest, map as map$1, takeUntil as takeUntil$1, filter as filter$2, switchMap as switchMap$1, observeOn, asyncScheduler, withLatestFrom, first as first$1, interval, throwError, finalize as finalize$1, tap as tap$1, defer, firstValueFrom, throttleTime } from 'rxjs';
+import { BehaviorSubject, noop as noop$3, Subject, from, merge, fromEvent, Observable, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, delay, combineLatest, map as map$1, takeUntil as takeUntil$1, filter as filter$2, switchMap as switchMap$1, observeOn, asyncScheduler, withLatestFrom, first as first$1, interval, throwError, tap as tap$1, finalize as finalize$1, EMPTY, defer, firstValueFrom, throttleTime } from 'rxjs';
 import { skip, debounceTime, filter, distinctUntilChanged, startWith, switchMap, takeUntil, map, tap, shareReplay, first, catchError, finalize, take } from 'rxjs/operators';
 import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
 import * as i3 from '@ng-select/ng-select';
@@ -15684,6 +15684,10 @@ class DrawerConfig {
         this.disableClose = false;
         /** Aria label to assign to the drawer element. */
         this.ariaLabel = null;
+        /** Aria role for the drawer container */
+        this.role = 'dialog';
+        /** Whether the drawer should be treated as a modal dialog */
+        this.isModal = true;
         /**
          * Whether the drawer should close when the user goes backwards/forwards in history.
          * Note that this usually doesn't include clicking on links (unless the user is using
@@ -15705,6 +15709,8 @@ class DrawerConfig {
         this.position = 'bottom';
         /** Whether to render the drawer without default container styles and handle. */
         this.unstyled = false;
+        /** Drag behavior for bottom drawer. */
+        this.dragMode = 'dismiss';
     }
 }
 
@@ -15725,23 +15731,112 @@ const drDrawerAnimations = {
     ]),
 };
 
-class BottomPositionStrategy {
+class BottomDismissPositionStrategy {
+    constructor() {
+        this.startMouseY = null;
+        this.deltaY = 0;
+    }
     extractMousePosition(event) {
         return event.clientY;
     }
-    calculateTransform(currentPosition, containerPosition) {
-        return currentPosition > containerPosition
-            ? `translate3d(0px, ${currentPosition - containerPosition}px, 0px)`
-            : `translate3d(0px, 0px, 0px)`;
+    onDragStart(container) {
+        this.startMouseY = null;
+        this.deltaY = 0;
     }
-    shouldClose(currentPosition, initPosition, lastPosition) {
-        return Math.abs(currentPosition - initPosition) <= currentPosition - lastPosition;
+    onDragMove(mouseY, container) {
+        if (this.startMouseY === null) {
+            this.startMouseY = mouseY;
+            return;
+        }
+        this.deltaY = mouseY - this.startMouseY;
+        if (this.deltaY < 0) {
+            this.deltaY = 0;
+        }
+        container.style.transition = 'none';
+        container.style.transform = `translate3d(0px, ${this.deltaY}px, 0px)`;
+    }
+    onDragEnd(container) {
+        const containerHeight = container.getBoundingClientRect().height;
+        const shouldClose = this.deltaY > containerHeight / 2;
+        if (!shouldClose) {
+            container.style.transition = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
+            container.style.transform = `translate3d(0px, 0px, 0px)`;
+        }
+        return { shouldClose };
+    }
+}
+class BottomResizePositionStrategy {
+    constructor(config) {
+        this.config = config;
+        this.startMouseY = null;
+        this.startHeightPx = 0;
+        this.currentHeightPx = 0;
+        const viewportH = window.innerHeight;
+        this.minHeightPx = this.toPx(config.minHeight ?? '10vh', viewportH);
+        this.maxHeightPx = this.toPx(config.maxHeight ?? '90vh', viewportH);
+        this.minHeightPx = Math.max(0, this.minHeightPx);
+        this.maxHeightPx = Math.max(this.minHeightPx, this.maxHeightPx);
+    }
+    extractMousePosition(event) {
+        return event.clientY;
+    }
+    onDragStart(container, overlayElement) {
+        this.startMouseY = null;
+        const rect = overlayElement.getBoundingClientRect();
+        this.startHeightPx = rect.height;
+        this.currentHeightPx = this.startHeightPx;
+        overlayElement.style.transition = 'none';
+        overlayElement.style.height = `${this.startHeightPx}px`;
+        overlayElement.style.maxHeight = 'none';
+        container.style.height = '100%';
+    }
+    onDragMove(mouseY, container, overlayElement) {
+        if (this.startMouseY === null) {
+            this.startMouseY = mouseY;
+            return;
+        }
+        const delta = this.startMouseY - mouseY;
+        let nextHeight = this.startHeightPx + delta;
+        nextHeight = Math.max(this.minHeightPx, Math.min(this.maxHeightPx, nextHeight));
+        this.currentHeightPx = nextHeight;
+        overlayElement.style.height = `${nextHeight}px`;
+    }
+    onDragEnd(container, overlayElement) {
+        let height = this.currentHeightPx || overlayElement.getBoundingClientRect().height;
+        height = Math.max(this.minHeightPx, Math.min(this.maxHeightPx, height));
+        overlayElement.style.transition = 'height 200ms cubic-bezier(0.32, 0.72, 0, 1)';
+        overlayElement.style.height = `${height}px`;
+        this.startMouseY = NaN;
+        this.currentHeightPx = height;
+        return { shouldClose: false, height };
+    }
+    toPx(value, viewportH) {
+        if (typeof value === 'number') {
+            return value;
+        }
+        const raw = String(value).trim();
+        if (!raw) {
+            return 0;
+        }
+        if (raw.endsWith('vh')) {
+            const n = parseFloat(raw);
+            return Number.isFinite(n) ? (n / 100) * viewportH : 0;
+        }
+        if (raw.endsWith('px')) {
+            const n = parseFloat(raw);
+            return Number.isFinite(n) ? n : 0;
+        }
+        const asNumber = parseFloat(raw);
+        return Number.isFinite(asNumber) ? asNumber : 0;
     }
 }
 
 const _c0$k = ["handleRef"];
 function DrawerContainer_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 3, 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("handle--resize", ctx_r0._config.dragMode === "resize")("handle--dismiss", ctx_r0._config.dragMode === "dismiss");
 } }
 function DrawerContainer_ng_template_2_Template(rf, ctx) { }
 /**
@@ -15755,6 +15850,8 @@ class DrawerContainer extends CdkDialogContainer {
     constructor(elementRef, focusTrapFactory, document, config, checker, ngZone, overlayRef, focusMonitor) {
         super(elementRef, focusTrapFactory, document, config, checker, ngZone, overlayRef, focusMonitor);
         this.overlayRef = overlayRef;
+        /** Emits final height (px) after resize. Available only in resize mode. */
+        this.afterResized = new EventEmitter();
         /** The state of the drawer animations. */
         this._animationState = 'void';
         /** Emits whenever the state of the animation changes. */
@@ -15795,45 +15892,35 @@ class DrawerContainer extends CdkDialogContainer {
     resolvePositionStrategy() {
         switch (this._config.position) {
             case 'bottom':
-                return new BottomPositionStrategy();
+                return this._config.dragMode === 'resize'
+                    ? new BottomResizePositionStrategy(this._config)
+                    : new BottomDismissPositionStrategy();
+            default:
+                return undefined;
         }
     }
     setupDragListener() {
+        const strategy = this.positionStrategy;
+        if (!strategy)
+            return;
         const mousedown$ = fromEvent(this._handleRef.nativeElement, 'mousedown');
         const mousemove$ = fromEvent(document, 'mousemove');
         const mouseup$ = fromEvent(document, 'mouseup');
-        let lastPosition = 0;
-        let initPosition = 0;
-        let currentPosition = 0;
         const container = this._elementRef.nativeElement;
-        setTimeout(() => {
-            lastPosition = this.getContainerPosition(container);
-            initPosition = lastPosition;
-        });
+        const overlayElement = this.overlayRef.overlayElement;
         mousedown$
-            .pipe(switchMap$1(() => mousemove$.pipe(finalize$1(() => {
-            const container = this._elementRef.nativeElement;
-            if (this.positionStrategy.shouldClose(currentPosition, initPosition, lastPosition)) {
+            .pipe(tap$1(() => strategy.onDragStart(container, overlayElement)), switchMap$1(() => mousemove$.pipe(takeUntil$1(mouseup$), finalize$1(() => {
+            const result = strategy.onDragEnd(container, overlayElement);
+            if (result.shouldClose) {
                 this.overlayRef.dispose();
                 return;
             }
-            container.style.transition = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
-            container.style.transform = `translate3d(0px, 0px, 0px)`;
-        }), takeUntil$1(mouseup$))), map$1((event) => this.positionStrategy.extractMousePosition(event)), distinctUntilChanged$1(), tap$1((position) => {
-            let containerPosition = this.getContainerPosition(container);
-            containerPosition = Math.min(containerPosition, lastPosition);
-            lastPosition = Math.min(containerPosition, lastPosition);
-            currentPosition = position;
-            container.style.transition = 'none';
-            container.style.transform = this.positionStrategy.calculateTransform(position, containerPosition);
-        }), takeUntil$1(this.destroy$))
+            if (result.height !== undefined) {
+                this.afterResized.emit(result.height);
+            }
+        }))), map$1((event) => strategy.extractMousePosition(event)), distinctUntilChanged$1(), tap$1((position) => strategy.onDragMove(position, container, overlayElement)), takeUntil$1(this.destroy$))
             .subscribe();
     }
-    getContainerPosition(container) {
-        return this._config.position === 'bottom' || this._config.position === 'top'
-            ? container.getBoundingClientRect().top
-            : container.getBoundingClientRect().left;
-    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.destroy$.next();
@@ -15866,8 +15953,8 @@ class DrawerContainer extends CdkDialogContainer {
             i0.ɵɵsyntheticHostProperty("@state", ctx._animationState);
             i0.ɵɵclassMap(ctx._drawerPosition);
             i0.ɵɵclassProp("dr-drawer-container", !ctx._config.unstyled);
-        } }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 3, consts: [["class", "handle", 4, "ngIf"], [1, "dr-drawer-container__wrapper"], ["cdkPortalOutlet", ""], [1, "handle"], ["handleRef", ""]], template: function DrawerContainer_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, DrawerContainer_div_0_Template, 2, 0, "div", 0);
+        } }, outputs: { afterResized: "afterResized" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 3, consts: [["class", "handle", 3, "handle--resize", "handle--dismiss", 4, "ngIf"], [1, "dr-drawer-container__wrapper"], ["cdkPortalOutlet", ""], [1, "handle"], ["handleRef", ""]], template: function DrawerContainer_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, DrawerContainer_div_0_Template, 2, 4, "div", 0);
             i0.ɵɵelementStart(1, "div", 1);
             i0.ɵɵtemplate(2, DrawerContainer_ng_template_2_Template, 0, 0, "ng-template", 2);
             i0.ɵɵelementEnd();
@@ -15875,7 +15962,7 @@ class DrawerContainer extends CdkDialogContainer {
             i0.ɵɵproperty("ngIf", ctx._config.position === "bottom" && !ctx._config.unstyled);
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("unstyled-wrapper", ctx._config.unstyled);
-        } }, dependencies: [PortalModule, i4.CdkPortalOutlet, DialogModule, MatCommonModule, CommonModule, i1.NgIf], styles: [".dr-drawer-container{display:flex;flex-direction:column;width:100%;overflow:auto;outline:0;box-sizing:border-box;background-color:#fff;box-shadow:0 4px 14px #d8d9de80}.dr-drawer-container__wrapper{flex:1;overflow:auto}.dr-drawer-container__wrapper.unstyled-wrapper{flex:unset;overflow:unset}.cdk-high-contrast-active .dr-drawer-container{outline:1px solid}.handle{position:relative;height:24px;cursor:pointer}.handle:after{content:\"\";position:absolute;top:16px;left:50%;transform:translate(-50%,-50%);background-color:#dfe0e3;height:4px;width:64px;border-radius:16px}.dr-drawer-right{transform:translate(100%);border-top-left-radius:16px;border-bottom-left-radius:16px}.dr-drawer-left{transform:translate(-100%);border-top-right-radius:16px;border-bottom-right-radius:16px}.dr-drawer-bottom{transform:translateY(100%);border-top-left-radius:16px;border-top-right-radius:16px}.dr-drawer-top{transform:translateY(-100%);border-bottom-left-radius:16px;border-bottom-right-radius:16px}\n"], encapsulation: 2, data: { animation: [drDrawerAnimations.drawerState] } }); }
+        } }, dependencies: [PortalModule, i4.CdkPortalOutlet, DialogModule, MatCommonModule, CommonModule, i1.NgIf], styles: [".dr-drawer-container{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;outline:0;box-sizing:border-box;background-color:#fff;box-shadow:0 4px 14px #d8d9de80}.dr-drawer-container__wrapper{flex:1;overflow:auto}.dr-drawer-container__wrapper.unstyled-wrapper{flex:unset;overflow:unset}.cdk-high-contrast-active .dr-drawer-container{outline:1px solid}.handle{position:relative;height:24px;user-select:none;-webkit-user-select:none;flex-shrink:0}.handle--resize{cursor:ns-resize}.handle--dismiss{cursor:pointer}.handle:after{content:\"\";position:absolute;top:16px;left:50%;transform:translate(-50%,-50%);background-color:#dfe0e3;height:4px;width:64px;border-radius:16px;transition:background-color .2s ease}.handle:hover:after{background-color:#b6b8bf}.handle:active:after{background-color:#9b9ea8}.dr-drawer-right{transform:translate(100%);border-top-left-radius:16px;border-bottom-left-radius:16px}.dr-drawer-left{transform:translate(-100%);border-top-right-radius:16px;border-bottom-right-radius:16px}.dr-drawer-bottom{transform:translateY(100%);border-top-left-radius:16px;border-top-right-radius:16px}.dr-drawer-top{transform:translateY(-100%);border-bottom-left-radius:16px;border-bottom-right-radius:16px}\n"], encapsulation: 2, data: { animation: [drDrawerAnimations.drawerState] } }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawerContainer, [{
         type: Component,
@@ -15890,7 +15977,7 @@ class DrawerContainer extends CdkDialogContainer {
                     '[@state]': '_animationState',
                     '(@state.start)': '_onAnimationStart($event)',
                     '(@state.done)': '_onAnimationDone($event)',
-                }, standalone: true, imports: [PortalModule, DialogModule, MatCommonModule, CommonModule], template: "<div *ngIf=\"_config.position === 'bottom' && !_config.unstyled\" #handleRef class=\"handle\"></div>\n<div class=\"dr-drawer-container__wrapper\" [class.unstyled-wrapper]=\"_config.unstyled\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [".dr-drawer-container{display:flex;flex-direction:column;width:100%;overflow:auto;outline:0;box-sizing:border-box;background-color:#fff;box-shadow:0 4px 14px #d8d9de80}.dr-drawer-container__wrapper{flex:1;overflow:auto}.dr-drawer-container__wrapper.unstyled-wrapper{flex:unset;overflow:unset}.cdk-high-contrast-active .dr-drawer-container{outline:1px solid}.handle{position:relative;height:24px;cursor:pointer}.handle:after{content:\"\";position:absolute;top:16px;left:50%;transform:translate(-50%,-50%);background-color:#dfe0e3;height:4px;width:64px;border-radius:16px}.dr-drawer-right{transform:translate(100%);border-top-left-radius:16px;border-bottom-left-radius:16px}.dr-drawer-left{transform:translate(-100%);border-top-right-radius:16px;border-bottom-right-radius:16px}.dr-drawer-bottom{transform:translateY(100%);border-top-left-radius:16px;border-top-right-radius:16px}.dr-drawer-top{transform:translateY(-100%);border-bottom-left-radius:16px;border-bottom-right-radius:16px}\n"] }]
+                }, standalone: true, imports: [PortalModule, DialogModule, MatCommonModule, CommonModule], template: "<div\n    *ngIf=\"_config.position === 'bottom' && !_config.unstyled\"\n    #handleRef\n    class=\"handle\"\n    [class.handle--resize]=\"_config.dragMode === 'resize'\"\n    [class.handle--dismiss]=\"_config.dragMode === 'dismiss'\"></div>\n<div class=\"dr-drawer-container__wrapper\" [class.unstyled-wrapper]=\"_config.unstyled\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [".dr-drawer-container{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;outline:0;box-sizing:border-box;background-color:#fff;box-shadow:0 4px 14px #d8d9de80}.dr-drawer-container__wrapper{flex:1;overflow:auto}.dr-drawer-container__wrapper.unstyled-wrapper{flex:unset;overflow:unset}.cdk-high-contrast-active .dr-drawer-container{outline:1px solid}.handle{position:relative;height:24px;user-select:none;-webkit-user-select:none;flex-shrink:0}.handle--resize{cursor:ns-resize}.handle--dismiss{cursor:pointer}.handle:after{content:\"\";position:absolute;top:16px;left:50%;transform:translate(-50%,-50%);background-color:#dfe0e3;height:4px;width:64px;border-radius:16px;transition:background-color .2s ease}.handle:hover:after{background-color:#b6b8bf}.handle:active:after{background-color:#9b9ea8}.dr-drawer-right{transform:translate(100%);border-top-left-radius:16px;border-bottom-left-radius:16px}.dr-drawer-left{transform:translate(-100%);border-top-right-radius:16px;border-bottom-right-radius:16px}.dr-drawer-bottom{transform:translateY(100%);border-top-left-radius:16px;border-top-right-radius:16px}.dr-drawer-top{transform:translateY(-100%);border-bottom-left-radius:16px;border-bottom-right-radius:16px}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i1$6.FocusTrapFactory }, { type: Document, decorators: [{
                 type: Optional
             }, {
@@ -15902,6 +15989,8 @@ class DrawerContainer extends CdkDialogContainer {
         }], _handleRef: [{
             type: ViewChild,
             args: ['handleRef']
+        }], afterResized: [{
+            type: Output
         }] }); })();
 
 /**
@@ -15957,6 +16046,7 @@ class DrawerRef {
                 this.dismiss();
             }
         });
+        this._afterResized$ = containerInstance?.afterResized?.asObservable() ?? EMPTY;
     }
     /**
      * Dismisses the drawer.
@@ -15997,6 +16087,10 @@ class DrawerRef {
     afterOpened() {
         return this._afterOpened;
     }
+    /** Gets an observable that emits the final height (px) after resize. Available only in resize mode. */
+    afterResized() {
+        return this._afterResized$;
+    }
     /**
      * Gets an observable that emits when the overlay's backdrop has been clicked.
      */