@malva-ui/core 0.1.12

package/esm2022/drawer/lib/drawer/drawer.js

@@ -0,0 +1,180 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, inject, input, viewChild, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { A11yModule } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvOverlayHostBase } from '@malva-ui/cdk/overlay';
+import { MLV_DRAWER_I18N } from '@malva-ui/i18n';
+import { MlvDrawerSectionsService } from '../drawer-sections.service';
+import { MlvDrawerContent } from '../drawer-content';
+import { MlvDrawerResize } from '../drawer-resize';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+const HIDDEN_TRANSFORMS = {
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)',
+};
+export class MlvDrawer extends MlvOverlayHostBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_DRAWER_I18N);
+    /** @protected Base CSS class of the drawer backdrop. */
+    _backdropClass = 'mlv-drawer-backdrop';
+    /** Which edge of the viewport the drawer slides from. */
+    position = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the drawer dialog surface. Used as the `aria-label`
+     * when no `ariaLabelledBy` is provided. When both are omitted, the drawer
+     * falls back to the localized default ("Drawer") so the `role="dialog"`
+     * is never left without an accessible name.
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of a visible element (typically a projected `[mlvDrawerHeader]`) that
+     * labels the drawer. When set, it takes precedence over `ariaLabel` and the
+     * i18n fallback via `aria-labelledby` — mirroring how `mlv-dialog` labels
+     * itself by its projected header.
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved `aria-label` for the dialog surface: the explicit
+     * `ariaLabel` input, or the localized fallback. Suppressed (null) when
+     * `ariaLabelledBy` is set so the two naming methods never conflict.
+     */
+    _resolvedAriaLabel = computed(() => this.ariaLabelledBy() ? null : (this.ariaLabel() ?? this._i18n().drawer), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS width (left/right drawers) or height (top/bottom drawers) of the panel.
+     * Used as the initial size when `resizable` is false or no `defaultSnap` is set.
+     */
+    size = input('300px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, renders a drag handle on the inward-facing edge.
+     * Enables drag-to-resize and swipe-to-dismiss.
+     */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Sorted array of viewport-percentage snap points (0–100).
+     * After drag ends, the panel animates to the nearest snap point.
+     * If empty, the panel stays at its released position.
+     * Only effective when `resizable` is true.
+     */
+    snapPoints = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Initial snap point percentage (0–100) applied when the drawer opens.
+     * Defaults to 100 (full size). Only used when `resizable` is true.
+     */
+    defaultSnap = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSnap" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS min-size floor applied during drag resize.
+     * Only used when `resizable` is true.
+     */
+    minSize = input('0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS max-size ceiling for the panel's sizing axis (width for `left`/`right`,
+     * height for `top`/`bottom`).
+     *
+     * Honoured whether or not the drawer is `resizable` — a fixed `size` is
+     * clamped by it too. The resolved ceiling is always additionally clamped to
+     * the viewport (`100dvw`/`100dvh`), so a `size="36rem"` drawer can never be
+     * wider than a 375 px phone.
+     */
+    maxSize = input('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    hiddenTransform = computed(() => HIDDEN_TRANSFORMS[this.position()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenTransform" }] : /* istanbul ignore next */ []));
+    /** @protected Projected drawer content directive, rendered into the overlay panel. */
+    contentRef = contentChild(MlvDrawerContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /** @protected The `#drawerTemplate` view template attached to the CDK overlay portal. */
+    drawerTemplate = viewChild('drawerTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Computes the initial panel size string.
+     * When resizable, uses `defaultSnap` as a dvh/dvw percentage;
+     * otherwise falls back to the `size` input.
+     */
+    _initialPanelSize = computed(() => {
+        if (!this.resizable())
+            return this.size();
+        const snap = this.defaultSnap();
+        const pos = this.position();
+        const isVertical = pos === 'bottom' || pos === 'top';
+        return isVertical ? `${snap}dvh` : `${snap}dvw`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialPanelSize" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Combines the configured `maxSize` with the viewport ceiling for
+     * the sizing axis.
+     *
+     * The viewport ceiling is unconditional: without it a fixed `size` larger
+     * than the screen (`size="36rem"` on a 375 px phone) renders a panel that
+     * hangs off the edge. `maxSize` is folded in through CSS `min()` so it is
+     * honoured on the non-resizable path too. The `'100%'` default is dropped
+     * rather than nested — it resolves against the overlay pane, which is itself
+     * sized by this panel, so it would add nothing but an indirection.
+     */
+    _resolveMaxSize(viewportCeiling) {
+        const maxSize = this.maxSize();
+        return !maxSize || maxSize === '100%'
+            ? viewportCeiling
+            : `min(${maxSize}, ${viewportCeiling})`;
+    }
+    /**
+     * Resolved inline geometry for the panel element: the sizing-axis `size`, the
+     * cross-axis viewport fill, and the max ceilings on both axes.
+     */
+    get drawerDimensions() {
+        const pos = this.position();
+        const size = this.resizable()
+            ? `var(--mlv-drawer-current-size, ${this._initialPanelSize()})`
+            : this._initialPanelSize();
+        if (pos === 'left' || pos === 'right') {
+            return {
+                width: size,
+                height: '100dvh',
+                maxWidth: this._resolveMaxSize('100dvw'),
+                maxHeight: '100dvh',
+            };
+        }
+        return {
+            height: size,
+            width: '100dvw',
+            maxHeight: this._resolveMaxSize('100dvh'),
+            maxWidth: '100dvw',
+        };
+    }
+    /** @protected Returns the drawer surface template to attach to the overlay. */
+    _getOverlayTemplate() {
+        return this.drawerTemplate();
+    }
+    /** @protected Anchors the drawer to the configured viewport edge. */
+    _buildPositionStrategy() {
+        const positionStrategy = this._overlay.position().global();
+        const pos = this.position();
+        if (pos === 'left')
+            positionStrategy.left('0').top('0');
+        else if (pos === 'right')
+            positionStrategy.right('0').top('0');
+        else if (pos === 'top')
+            positionStrategy.top('0').left('0');
+        else
+            positionStrategy.bottom('0').left('0');
+        return positionStrategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDrawer, isStandalone: true, selector: "mlv-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null }, defaultSnap: { classPropertyName: "defaultSnap", publicName: "defaultSnap", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [MlvDrawerSectionsService], queries: [{ propertyName: "contentRef", first: true, predicate: MlvDrawerContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #drawerTemplate>\n  <div class=\"mlv-drawer__backdrop\"></div>\n  <div\n    class=\"mlv-drawer\"\n    [class]=\"'mlv-drawer--' + position()\"\n    [class.mlv-drawer--enter]=\"animationState() === 'enter'\"\n    [class.mlv-drawer--leave]=\"animationState() === 'leave'\"\n    [class.mlv-drawer--resizable]=\"resizable()\"\n    [style.width]=\"drawerDimensions['width']\"\n    [style.height]=\"drawerDimensions['height']\"\n    [style.max-width]=\"drawerDimensions['maxWidth']\"\n    [style.max-height]=\"drawerDimensions['maxHeight']\"\n    [style.--mlv-drawer-hidden-transform]=\"hiddenTransform()\"\n    (animationend)=\"onAnimationEnd()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n  >\n    @if (resizable()) {\n    <div\n      class=\"mlv-drawer__handle\"\n      mlvDrawerResize\n      [position]=\"position()\"\n      [snapPoints]=\"snapPoints()\"\n      (dismissed)=\"close()\"\n    >\n      <span class=\"mlv-drawer__handle-pill\" aria-hidden=\"true\"></span>\n    </div>\n    } @if (contentRef(); as contentTpl) {\n    <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n    }\n  </div>\n</ng-template>\n", styles: [".mlv-drawer{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer *{box-sizing:border-box}.mlv-drawer{background-color:var(--mlv-elevation-bg-2);box-shadow:var(--mlv-shadow-3);color:var(--mlv-text-primary);will-change:transform;display:flex;flex-direction:column;max-inline-size:100dvw;max-block-size:100dvh}.mlv-drawer__spacer{flex-grow:1}.mlv-drawer__header{display:flex;align-items:center;padding:var(--mlv-padding-l);border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-drawer__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-drawer__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3) var(--mlv-spacing-6)}.mlv-drawer__footer{padding:var(--mlv-padding-l);flex-shrink:0;border-top:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;min-height:3rem;min-width:3rem}.mlv-drawer__handle:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-drawer__handle-pill{display:block;width:2rem;height:.25rem;border-radius:.125rem;background-color:var(--mlv-border-normal);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default);pointer-events:none}.mlv-drawer__handle:hover .mlv-drawer__handle-pill,.mlv-drawer__handle:focus-visible .mlv-drawer__handle-pill{background-color:var(--mlv-text-tertiary)}.mlv-drawer--bottom .mlv-drawer__handle,.mlv-drawer--top .mlv-drawer__handle{cursor:ns-resize}.mlv-drawer--left .mlv-drawer__handle,.mlv-drawer--right .mlv-drawer__handle{cursor:ew-resize;min-height:unset;min-width:3rem;height:100%}.mlv-drawer--bottom .mlv-drawer__handle{order:-1}.mlv-drawer--top .mlv-drawer__handle{order:1}.mlv-drawer--right .mlv-drawer__handle{order:-1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle{order:1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle-pill,.mlv-drawer--right .mlv-drawer__handle-pill{width:.25rem;height:2rem}.mlv-drawer--dragging{transition:none!important;will-change:height,width}@media(prefers-reduced-motion:no-preference){.mlv-drawer--snapping{transition:height var(--mlv-drawer-snap-duration, .35s) var(--mlv-drawer-snap-easing, cubic-bezier(.34, 1.56, .64, 1)),width var(--mlv-drawer-snap-duration, .35s) var(--mlv-drawer-snap-easing, cubic-bezier(.34, 1.56, .64, 1))}}.mlv-drawer-backdrop{background-color:var(--mlv-background-overlay);opacity:1;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem);transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),backdrop-filter var(--mlv-duration-normal) var(--mlv-ease-out-strong)}@starting-style{.mlv-drawer-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-drawer-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MlvDrawerResize, selector: "[mlvDrawerResize]", inputs: ["position", "snapPoints"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-drawer', imports: [OverlayModule, A11yModule, NgTemplateOutlet, MlvDrawerResize], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MlvDrawerSectionsService], template: "<ng-template #drawerTemplate>\n  <div class=\"mlv-drawer__backdrop\"></div>\n  <div\n    class=\"mlv-drawer\"\n    [class]=\"'mlv-drawer--' + position()\"\n    [class.mlv-drawer--enter]=\"animationState() === 'enter'\"\n    [class.mlv-drawer--leave]=\"animationState() === 'leave'\"\n    [class.mlv-drawer--resizable]=\"resizable()\"\n    [style.width]=\"drawerDimensions['width']\"\n    [style.height]=\"drawerDimensions['height']\"\n    [style.max-width]=\"drawerDimensions['maxWidth']\"\n    [style.max-height]=\"drawerDimensions['maxHeight']\"\n    [style.--mlv-drawer-hidden-transform]=\"hiddenTransform()\"\n    (animationend)=\"onAnimationEnd()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n  >\n    @if (resizable()) {\n    <div\n      class=\"mlv-drawer__handle\"\n      mlvDrawerResize\n      [position]=\"position()\"\n      [snapPoints]=\"snapPoints()\"\n      (dismissed)=\"close()\"\n    >\n      <span class=\"mlv-drawer__handle-pill\" aria-hidden=\"true\"></span>\n    </div>\n    } @if (contentRef(); as contentTpl) {\n    <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n    }\n  </div>\n</ng-template>\n", styles: [".mlv-drawer{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer *{box-sizing:border-box}.mlv-drawer{background-color:var(--mlv-elevation-bg-2);box-shadow:var(--mlv-shadow-3);color:var(--mlv-text-primary);will-change:transform;display:flex;flex-direction:column;max-inline-size:100dvw;max-block-size:100dvh}.mlv-drawer__spacer{flex-grow:1}.mlv-drawer__header{display:flex;align-items:center;padding:var(--mlv-padding-l);border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-drawer__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-drawer__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3) var(--mlv-spacing-6)}.mlv-drawer__footer{padding:var(--mlv-padding-l);flex-shrink:0;border-top:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;min-height:3rem;min-width:3rem}.mlv-drawer__handle:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-drawer__handle-pill{display:block;width:2rem;height:.25rem;border-radius:.125rem;background-color:var(--mlv-border-normal);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default);pointer-events:none}.mlv-drawer__handle:hover .mlv-drawer__handle-pill,.mlv-drawer__handle:focus-visible .mlv-drawer__handle-pill{background-color:var(--mlv-text-tertiary)}.mlv-drawer--bottom .mlv-drawer__handle,.mlv-drawer--top .mlv-drawer__handle{cursor:ns-resize}.mlv-drawer--left .mlv-drawer__handle,.mlv-drawer--right .mlv-drawer__handle{cursor:ew-resize;min-height:unset;min-width:3rem;height:100%}.mlv-drawer--bottom .mlv-drawer__handle{order:-1}.mlv-drawer--top .mlv-drawer__handle{order:1}.mlv-drawer--right .mlv-drawer__handle{order:-1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle{order:1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle-pill,.mlv-drawer--right .mlv-drawer__handle-pill{width:.25rem;height:2rem}.mlv-drawer--dragging{transition:none!important;will-change:height,width}@media(prefers-reduced-motion:no-preference){.mlv-drawer--snapping{transition:height var(--mlv-drawer-snap-duration, .35s) var(--mlv-drawer-snap-easing, cubic-bezier(.34, 1.56, .64, 1)),width var(--mlv-drawer-snap-duration, .35s) var(--mlv-drawer-snap-easing, cubic-bezier(.34, 1.56, .64, 1))}}.mlv-drawer-backdrop{background-color:var(--mlv-background-overlay);opacity:1;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem);transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),backdrop-filter var(--mlv-duration-normal) var(--mlv-ease-out-strong)}@starting-style{.mlv-drawer-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-drawer-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], defaultSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSnap", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], contentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvDrawerContent), { isSignal: true }] }], drawerTemplate: [{ type: i0.ViewChild, args: ['drawerTemplate', { isSignal: true }] }] } });
+//# sourceMappingURL=drawer.js.map

package/esm2022/drawer/lib/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../../../../libs/core/drawer/src/lib/drawer/drawer.ts","../../../../../../../libs/core/drawer/src/lib/drawer/drawer.html"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateRef } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  inject,\n  input,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport type { PositionStrategy } from '@angular/cdk/overlay';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvOverlayHostBase } from '@malva-ui/cdk/overlay';\nimport { MLV_DRAWER_I18N } from '@malva-ui/i18n';\nimport { MlvDrawerSectionsService } from '../drawer-sections.service';\nimport { MlvDrawerContent } from '../drawer-content';\nimport { MlvDrawerResize } from '../drawer-resize';\nimport type { MlvDrawerPosition } from '../drawer.service';\n\nconst HIDDEN_TRANSFORMS: Record<MlvDrawerPosition, string> = {\n  left: 'translateX(-100%)',\n  right: 'translateX(100%)',\n  top: 'translateY(-100%)',\n  bottom: 'translateY(100%)',\n};\n\n@Component({\n  selector: 'mlv-drawer',\n  imports: [OverlayModule, A11yModule, NgTemplateOutlet, MlvDrawerResize],\n  templateUrl: './drawer.html',\n  styleUrl: './drawer.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [MlvDrawerSectionsService],\n})\nexport class MlvDrawer extends MlvOverlayHostBase {\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_DRAWER_I18N);\n\n  /** @protected Base CSS class of the drawer backdrop. */\n  protected override readonly _backdropClass = 'mlv-drawer-backdrop';\n\n  /** Which edge of the viewport the drawer slides from. */\n  readonly position = input<MlvDrawerPosition>('right');\n\n  /**\n   * Accessible name for the drawer dialog surface. Used as the `aria-label`\n   * when no `ariaLabelledBy` is provided. When both are omitted, the drawer\n   * falls back to the localized default (\"Drawer\") so the `role=\"dialog\"`\n   * is never left without an accessible name.\n   */\n  readonly ariaLabel = input<string>();\n\n  /**\n   * Id of a visible element (typically a projected `[mlvDrawerHeader]`) that\n   * labels the drawer. When set, it takes precedence over `ariaLabel` and the\n   * i18n fallback via `aria-labelledby` — mirroring how `mlv-dialog` labels\n   * itself by its projected header.\n   */\n  readonly ariaLabelledBy = input<string>();\n\n  /**\n   * @protected Resolved `aria-label` for the dialog surface: the explicit\n   * `ariaLabel` input, or the localized fallback. Suppressed (null) when\n   * `ariaLabelledBy` is set so the two naming methods never conflict.\n   */\n  protected readonly _resolvedAriaLabel = computed(() =>\n    this.ariaLabelledBy() ? null : (this.ariaLabel() ?? this._i18n().drawer),\n  );\n\n  /**\n   * CSS width (left/right drawers) or height (top/bottom drawers) of the panel.\n   * Used as the initial size when `resizable` is false or no `defaultSnap` is set.\n   */\n  readonly size = input('300px');\n\n  /**\n   * When true, renders a drag handle on the inward-facing edge.\n   * Enables drag-to-resize and swipe-to-dismiss.\n   */\n  readonly resizable = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Sorted array of viewport-percentage snap points (0–100).\n   * After drag ends, the panel animates to the nearest snap point.\n   * If empty, the panel stays at its released position.\n   * Only effective when `resizable` is true.\n   */\n  readonly snapPoints = input<number[]>([]);\n\n  /**\n   * Initial snap point percentage (0–100) applied when the drawer opens.\n   * Defaults to 100 (full size). Only used when `resizable` is true.\n   */\n  readonly defaultSnap = input<number>(100);\n\n  /**\n   * CSS min-size floor applied during drag resize.\n   * Only used when `resizable` is true.\n   */\n  readonly minSize = input('0px');\n\n  /**\n   * CSS max-size ceiling for the panel's sizing axis (width for `left`/`right`,\n   * height for `top`/`bottom`).\n   *\n   * Honoured whether or not the drawer is `resizable` — a fixed `size` is\n   * clamped by it too. The resolved ceiling is always additionally clamped to\n   * the viewport (`100dvw`/`100dvh`), so a `size=\"36rem\"` drawer can never be\n   * wider than a 375 px phone.\n   */\n  readonly maxSize = input('100%');\n\n  readonly hiddenTransform = computed(() => HIDDEN_TRANSFORMS[this.position()]);\n\n  /** @protected Projected drawer content directive, rendered into the overlay panel. */\n  protected readonly contentRef = contentChild(MlvDrawerContent);\n\n  /** @protected The `#drawerTemplate` view template attached to the CDK overlay portal. */\n  protected readonly drawerTemplate =\n    viewChild<TemplateRef<unknown>>('drawerTemplate');\n\n  /**\n   * @protected Computes the initial panel size string.\n   * When resizable, uses `defaultSnap` as a dvh/dvw percentage;\n   * otherwise falls back to the `size` input.\n   */\n  protected readonly _initialPanelSize = computed(() => {\n    if (!this.resizable()) return this.size();\n    const snap = this.defaultSnap();\n    const pos = this.position();\n    const isVertical = pos === 'bottom' || pos === 'top';\n    return isVertical ? `${snap}dvh` : `${snap}dvw`;\n  });\n\n  /**\n   * @private Combines the configured `maxSize` with the viewport ceiling for\n   * the sizing axis.\n   *\n   * The viewport ceiling is unconditional: without it a fixed `size` larger\n   * than the screen (`size=\"36rem\"` on a 375 px phone) renders a panel that\n   * hangs off the edge. `maxSize` is folded in through CSS `min()` so it is\n   * honoured on the non-resizable path too. The `'100%'` default is dropped\n   * rather than nested — it resolves against the overlay pane, which is itself\n   * sized by this panel, so it would add nothing but an indirection.\n   */\n  private _resolveMaxSize(viewportCeiling: string): string {\n    const maxSize = this.maxSize();\n    return !maxSize || maxSize === '100%'\n      ? viewportCeiling\n      : `min(${maxSize}, ${viewportCeiling})`;\n  }\n\n  /**\n   * Resolved inline geometry for the panel element: the sizing-axis `size`, the\n   * cross-axis viewport fill, and the max ceilings on both axes.\n   */\n  get drawerDimensions(): Record<string, string> {\n    const pos = this.position();\n    const size = this.resizable()\n      ? `var(--mlv-drawer-current-size, ${this._initialPanelSize()})`\n      : this._initialPanelSize();\n\n    if (pos === 'left' || pos === 'right') {\n      return {\n        width: size,\n        height: '100dvh',\n        maxWidth: this._resolveMaxSize('100dvw'),\n        maxHeight: '100dvh',\n      };\n    }\n    return {\n      height: size,\n      width: '100dvw',\n      maxHeight: this._resolveMaxSize('100dvh'),\n      maxWidth: '100dvw',\n    };\n  }\n\n  /** @protected Returns the drawer surface template to attach to the overlay. */\n  protected override _getOverlayTemplate(): TemplateRef<unknown> | undefined {\n    return this.drawerTemplate();\n  }\n\n  /** @protected Anchors the drawer to the configured viewport edge. */\n  protected override _buildPositionStrategy(): PositionStrategy {\n    const positionStrategy = this._overlay.position().global();\n    const pos = this.position();\n\n    if (pos === 'left') positionStrategy.left('0').top('0');\n    else if (pos === 'right') positionStrategy.right('0').top('0');\n    else if (pos === 'top') positionStrategy.top('0').left('0');\n    else positionStrategy.bottom('0').left('0');\n\n    return positionStrategy;\n  }\n}\n","<ng-template #drawerTemplate>\n  <div class=\"mlv-drawer__backdrop\"></div>\n  <div\n    class=\"mlv-drawer\"\n    [class]=\"'mlv-drawer--' + position()\"\n    [class.mlv-drawer--enter]=\"animationState() === 'enter'\"\n    [class.mlv-drawer--leave]=\"animationState() === 'leave'\"\n    [class.mlv-drawer--resizable]=\"resizable()\"\n    [style.width]=\"drawerDimensions['width']\"\n    [style.height]=\"drawerDimensions['height']\"\n    [style.max-width]=\"drawerDimensions['maxWidth']\"\n    [style.max-height]=\"drawerDimensions['maxHeight']\"\n    [style.--mlv-drawer-hidden-transform]=\"hiddenTransform()\"\n    (animationend)=\"onAnimationEnd()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n  >\n    @if (resizable()) {\n    <div\n      class=\"mlv-drawer__handle\"\n      mlvDrawerResize\n      [position]=\"position()\"\n      [snapPoints]=\"snapPoints()\"\n      (dismissed)=\"close()\"\n    >\n      <span class=\"mlv-drawer__handle-pill\" aria-hidden=\"true\"></span>\n    </div>\n    } @if (contentRef(); as contentTpl) {\n    <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n    }\n  </div>\n</ng-template>\n"]}

package/esm2022/drawer/lib/drawer-body.js

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from '@angular/core';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import * as i0 from "@angular/core";
+/** Scrollable body region used by declarative and service-opened drawers. */
+export class MlvDrawerBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerBody, isStandalone: true, selector: "[mlvDrawerBody]", host: { classAttribute: "mlv-drawer__body" }, ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-drawer__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerBody, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute-selector component intentionally enhances the consumer's body container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[mlvDrawerBody]',
+                    template: `
+    <mlv-scrollbar class="mlv-drawer__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `,
+                    imports: [MlvScrollbar],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mlv-drawer__body' },
+                }]
+        }] });
+/** Backwards-compatible public name retained for existing imports. */
+export { MlvDrawerBody as DrawerBodyDirective };
+//# sourceMappingURL=drawer-body.js.map

package/esm2022/drawer/lib/drawer-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../../../../libs/core/drawer/src/lib/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;;AAExD,6EAA6E;AAe7E,MAAM,OAAO,aAAa;uGAAb,aAAa;2FAAb,aAAa,yHAVd;;;;GAIT,4DACS,YAAY;;2FAKX,aAAa;kBAdzB,SAAS;mBAAC;oBACT,qFAAqF;oBACrF,8DAA8D;oBAC9D,QAAQ,EAAE,iBAAiB;oBAC3B,QAAQ,EAAE;;;;GAIT;oBACD,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,IAAI,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;iBACpC;;AAGD,sEAAsE;AACtE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvScrollbar } from '@malva-ui/core/scrollbar';\n\n/** Scrollable body region used by declarative and service-opened drawers. */\n@Component({\n  // Attribute-selector component intentionally enhances the consumer's body container.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: '[mlvDrawerBody]',\n  template: `\n    <mlv-scrollbar class=\"mlv-drawer__body-scrollbar\">\n      <ng-content />\n    </mlv-scrollbar>\n  `,\n  imports: [MlvScrollbar],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'mlv-drawer__body' },\n})\nexport class MlvDrawerBody {}\n\n/** Backwards-compatible public name retained for existing imports. */\nexport { MlvDrawerBody as DrawerBodyDirective };\n"]}

package/esm2022/drawer/lib/drawer-content.js

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+export class MlvDrawerContent extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerContent, isStandalone: true, selector: "[mlvDrawerContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerContent]',
+                }]
+        }] });
+//# sourceMappingURL=drawer-content.js.map

package/esm2022/drawer/lib/drawer-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-content.js","sourceRoot":"","sources":["../../../../../../libs/core/drawer/src/lib/drawer-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAKpD,MAAM,OAAO,gBAAiB,SAAQ,aAAa;uGAAtC,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAH5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;iBAC/B","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({\n  selector: '[mlvDrawerContent]',\n})\nexport class MlvDrawerContent extends MlvStructural {}\n"]}

package/esm2022/drawer/lib/drawer-footer.js

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MlvDrawerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerFooter, isStandalone: true, selector: "[mlvDrawerFooter]", host: { classAttribute: "mlv-drawer__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerFooter]',
+                    host: { class: 'mlv-drawer__footer' },
+                }]
+        }] });
+//# sourceMappingURL=drawer-footer.js.map

package/esm2022/drawer/lib/drawer-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-footer.js","sourceRoot":"","sources":["../../../../../../libs/core/drawer/src/lib/drawer-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAM1C,MAAM,OAAO,eAAe;uGAAf,eAAe;2FAAf,eAAe;;2FAAf,eAAe;kBAJ3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE;iBACtC","sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[mlvDrawerFooter]',\n  host: { class: 'mlv-drawer__footer' },\n})\nexport class MlvDrawerFooter {}\n"]}

package/esm2022/drawer/lib/drawer-header.js

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MlvDrawerHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerHeader, isStandalone: true, selector: "[mlvDrawerHeader]", host: { classAttribute: "mlv-drawer__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerHeader]',
+                    host: { class: 'mlv-drawer__header' },
+                }]
+        }] });
+//# sourceMappingURL=drawer-header.js.map

package/esm2022/drawer/lib/drawer-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-header.js","sourceRoot":"","sources":["../../../../../../libs/core/drawer/src/lib/drawer-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAM1C,MAAM,OAAO,eAAe;uGAAf,eAAe;2FAAf,eAAe;;2FAAf,eAAe;kBAJ3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE;iBACtC","sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[mlvDrawerHeader]',\n  host: { class: 'mlv-drawer__header' },\n})\nexport class MlvDrawerHeader {}\n"]}

package/esm2022/drawer/lib/drawer-ref.js

@@ -0,0 +1,31 @@
+import { MlvOverlayRef } from '@malva-ui/cdk/overlay';
+/**
+ * Reference to an imperatively opened drawer; exposes `close()`, `afterClosed()`,
+ * and `beforeClose()`.
+ *
+ * Thin subclass of {@link MlvOverlayRef} that supplies the drawer surface's
+ * leave-animation class names and fallback duration; all close/afterClosed/
+ * beforeClose logic is inherited.
+ *
+ * @typeParam R - The result type emitted by `afterClosed()`. Defaults to `unknown`.
+ */
+export class MlvDrawerRef extends MlvOverlayRef {
+    _position;
+    _animationDuration;
+    /** @protected Backdrop leave-animation class for drawers. */
+    _backdropLeavingClass = 'mlv-drawer-backdrop--leaving';
+    /** @protected Panel leave-animation class for drawers. */
+    _panelLeaveClass = 'mlv-drawer--leave';
+    /** @protected Fallback close-animation duration (ms) for drawers. */
+    _leaveFallbackMs = 350;
+    constructor(overlayRef, 
+    /** @private The edge the drawer slides from. */
+    _position = 'right', 
+    /** @private Configured close-animation duration in milliseconds. */
+    _animationDuration = 300) {
+        super(overlayRef);
+        this._position = _position;
+        this._animationDuration = _animationDuration;
+    }
+}
+//# sourceMappingURL=drawer-ref.js.map

package/esm2022/drawer/lib/drawer-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-ref.js","sourceRoot":"","sources":["../../../../../../libs/core/drawer/src/lib/drawer-ref.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;;;;;;;;GASG;AACH,MAAM,OAAO,YAA0B,SAAQ,aAAgB;IAY1C;IAEA;IAbnB,6DAA6D;IACjC,qBAAqB,GAC/C,8BAA8B,CAAC;IACjC,0DAA0D;IAC9B,gBAAgB,GAAG,mBAAmB,CAAC;IACnE,qEAAqE;IACzC,gBAAgB,GAAG,GAAG,CAAC;IAEnD,YACE,UAAsB;IACtB,gDAAgD;IAC/B,YAAY,OAAO;IACpC,oEAAoE;IACnD,qBAAqB,GAAG;QAEzC,KAAK,CAAC,UAAU,CAAC,CAAC;QAJD,cAAS,GAAT,SAAS,CAAU;QAEnB,uBAAkB,GAAlB,kBAAkB,CAAM;IAG3C,CAAC;CACF","sourcesContent":["import type { OverlayRef } from '@angular/cdk/overlay';\nimport { MlvOverlayRef } from '@malva-ui/cdk/overlay';\n\n/**\n * Reference to an imperatively opened drawer; exposes `close()`, `afterClosed()`,\n * and `beforeClose()`.\n *\n * Thin subclass of {@link MlvOverlayRef} that supplies the drawer surface's\n * leave-animation class names and fallback duration; all close/afterClosed/\n * beforeClose logic is inherited.\n *\n * @typeParam R - The result type emitted by `afterClosed()`. Defaults to `unknown`.\n */\nexport class MlvDrawerRef<R = unknown> extends MlvOverlayRef<R> {\n  /** @protected Backdrop leave-animation class for drawers. */\n  protected override readonly _backdropLeavingClass =\n    'mlv-drawer-backdrop--leaving';\n  /** @protected Panel leave-animation class for drawers. */\n  protected override readonly _panelLeaveClass = 'mlv-drawer--leave';\n  /** @protected Fallback close-animation duration (ms) for drawers. */\n  protected override readonly _leaveFallbackMs = 350;\n\n  constructor(\n    overlayRef: OverlayRef,\n    /** @private The edge the drawer slides from. */\n    private readonly _position = 'right',\n    /** @private Configured close-animation duration in milliseconds. */\n    private readonly _animationDuration = 300,\n  ) {\n    super(overlayRef);\n  }\n}\n"]}

package/esm2022/drawer/lib/drawer-resize.js

@@ -0,0 +1,243 @@
+import { Directive, DestroyRef, ElementRef, NgZone, input, output, inject, } from '@angular/core';
+import { fromEvent, switchMap, takeUntil, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+/** Velocity threshold (px/s) for swipe-to-dismiss. */
+const DISMISS_VELOCITY_THRESHOLD = 500;
+/** Step size as a fraction of viewport size for keyboard resize. */
+const KEYBOARD_STEP_FRACTION = 0.1;
+/**
+ * Internal directive that powers drag-to-resize on `mlv-drawer__handle`.
+ * Applied by `MlvDrawer` when `resizable=true`; not intended for
+ * direct external use.
+ *
+ * @internal
+ */
+export class MlvDrawerResize {
+    /** @private Host element ref — the drawer resize handle. */
+    _el = inject((ElementRef));
+    /** @private DestroyRef used for observable and listener cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private NgZone used to re-enter Angular after out-of-zone pointer handling. */
+    _zone = inject(NgZone);
+    /**
+     * Drawer edge position — determines drag axis and dismiss direction.
+     */
+    position = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Sorted snap point percentages (0–100). Empty means free resize with no
+     * snapping. The handle snaps to the nearest point after drag ends.
+     */
+    snapPoints = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the user swipes past the velocity dismiss threshold or
+     * navigates the handle to zero size via keyboard.
+     */
+    dismissed = output();
+    /** @protected Current panel size as an integer percentage, exposed for ARIA aria-valuenow. */
+    _currentPercent = 100;
+    /** @private Last pointer position (px) sampled for velocity tracking. */
+    _lastPos = 0;
+    /** @private Timestamp of the last pointer sample for velocity tracking. */
+    _lastTime = 0;
+    /** @private Current drag velocity (px/s) used for swipe-to-dismiss. */
+    _velocity = 0;
+    constructor() {
+        const handle = this._el.nativeElement;
+        fromEvent(handle, 'pointerdown')
+            .pipe(takeUntilDestroyed(this._destroyRef), filter((e) => e.button === 0), switchMap((startEvent) => {
+            startEvent.preventDefault();
+            handle.setPointerCapture(startEvent.pointerId);
+            const panel = this._getPanelElement();
+            if (!panel)
+                return [];
+            const pos = this.position();
+            const isVertical = pos === 'bottom' || pos === 'top';
+            const viewportSize = isVertical
+                ? window.innerHeight
+                : window.innerWidth;
+            const rect = panel.getBoundingClientRect();
+            const startPanelSize = isVertical ? rect.height : rect.width;
+            const startPointerPos = isVertical
+                ? startEvent.clientY
+                : startEvent.clientX;
+            this._lastPos = startPointerPos;
+            this._lastTime = performance.now();
+            this._velocity = 0;
+            // Remove snap transition during drag for direct tracking
+            panel.classList.add('mlv-drawer--dragging');
+            return fromEvent(handle, 'pointermove').pipe(takeUntil(fromEvent(handle, 'pointerup').pipe(tap(() => {
+                panel.classList.remove('mlv-drawer--dragging');
+                this._zone.run(() => this._onPointerUp(panel, pos, isVertical, viewportSize));
+            }))), tap((moveEvent) => {
+                const currentPos = isVertical
+                    ? moveEvent.clientY
+                    : moveEvent.clientX;
+                const now = performance.now();
+                const dt = now - this._lastTime;
+                if (dt > 0) {
+                    this._velocity = (currentPos - this._lastPos) / (dt / 1000);
+                }
+                this._lastPos = currentPos;
+                this._lastTime = now;
+                const delta = currentPos - startPointerPos;
+                // For bottom/right drawers: moving pointer toward viewport edge (positive delta)
+                // means dragging the panel closed, so size decreases.
+                let newSize = pos === 'bottom' || pos === 'right'
+                    ? startPanelSize - delta
+                    : startPanelSize + delta;
+                newSize = Math.max(0, Math.min(viewportSize, newSize));
+                this._updatePanelSize(panel, newSize, viewportSize);
+            }));
+        }))
+            .subscribe();
+    }
+    /**
+     * @private Gets the drawer panel element — the direct parent of the handle.
+     */
+    _getPanelElement() {
+        return this._el.nativeElement.parentElement;
+    }
+    /**
+     * @private Applies snap logic (or dismiss) after pointer is released.
+     */
+    _onPointerUp(panel, pos, isVertical, viewportSize) {
+        // Determine effective dismiss velocity: positive means "closing direction"
+        const dismissVelocity = pos === 'bottom'
+            ? this._velocity
+            : pos === 'top'
+                ? -this._velocity
+                : pos === 'right'
+                    ? this._velocity
+                    : -this._velocity;
+        if (dismissVelocity > DISMISS_VELOCITY_THRESHOLD) {
+            this.dismissed.emit();
+            return;
+        }
+        const snapPoints = this.snapPoints();
+        if (snapPoints.length === 0)
+            return;
+        const currentSizePx = isVertical
+            ? panel.getBoundingClientRect().height
+            : panel.getBoundingClientRect().width;
+        const currentPercent = (currentSizePx / viewportSize) * 100;
+        // Find nearest snap point by absolute distance
+        let nearestSnap = snapPoints[0];
+        let minDist = Math.abs(currentPercent - snapPoints[0]);
+        for (const sp of snapPoints) {
+            const dist = Math.abs(currentPercent - sp);
+            if (dist < minDist) {
+                minDist = dist;
+                nearestSnap = sp;
+            }
+        }
+        if (nearestSnap === 0) {
+            this.dismissed.emit();
+            return;
+        }
+        // Animate panel to snap target
+        panel.classList.add('mlv-drawer--snapping');
+        const snapSizePx = (viewportSize * nearestSnap) / 100;
+        this._updatePanelSize(panel, snapSizePx, viewportSize);
+        this._currentPercent = nearestSnap;
+        const onTransitionEnd = () => {
+            panel.classList.remove('mlv-drawer--snapping');
+            panel.removeEventListener('transitionend', onTransitionEnd);
+        };
+        panel.addEventListener('transitionend', onTransitionEnd);
+    }
+    /**
+     * @private Sets the `--mlv-drawer-current-size` CSS variable on the panel
+     * element and updates the ARIA value.
+     */
+    _updatePanelSize(panel, size, viewportSize) {
+        panel.style.setProperty('--mlv-drawer-current-size', `${size}px`);
+        this._currentPercent = Math.round((size / viewportSize) * 100);
+    }
+    /**
+     * @protected Handles keyboard interaction on the resize handle.
+     *
+     * Arrow Up / Right — increase by 10% of viewport
+     * Arrow Down / Left — decrease by 10% (or dismiss if size would reach zero)
+     * Home — snap to smallest snap point (or dismiss if zero)
+     * End — snap to largest snap point (or full viewport)
+     * Escape — dismiss
+     */
+    _onKeydown(event) {
+        const pos = this.position();
+        const isVertical = pos === 'bottom' || pos === 'top';
+        const panel = this._getPanelElement();
+        if (!panel)
+            return;
+        const viewportSize = isVertical ? window.innerHeight : window.innerWidth;
+        const currentSizePx = isVertical
+            ? panel.getBoundingClientRect().height
+            : panel.getBoundingClientRect().width;
+        const stepPx = viewportSize * KEYBOARD_STEP_FRACTION;
+        const snapPoints = this.snapPoints();
+        let newSize = null;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowRight':
+                newSize = currentSizePx + stepPx;
+                break;
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                newSize = currentSizePx - stepPx;
+                if (newSize <= 0) {
+                    event.preventDefault();
+                    this.dismissed.emit();
+                    return;
+                }
+                break;
+            case 'Home':
+                if (snapPoints.length > 0) {
+                    newSize = (viewportSize * snapPoints[0]) / 100;
+                    if (newSize <= 0) {
+                        event.preventDefault();
+                        this.dismissed.emit();
+                        return;
+                    }
+                }
+                break;
+            case 'End':
+                newSize =
+                    snapPoints.length > 0
+                        ? (viewportSize * snapPoints[snapPoints.length - 1]) / 100
+                        : viewportSize;
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.dismissed.emit();
+                return;
+            default:
+                return;
+        }
+        if (newSize !== null) {
+            event.preventDefault();
+            newSize = Math.max(0, Math.min(viewportSize, newSize));
+            this._updatePanelSize(panel, newSize, viewportSize);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvDrawerResize, isStandalone: true, selector: "[mlvDrawerResize]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { attributes: { "role": "separator", "tabindex": "0", "aria-label": "Resize panel" }, listeners: { "keydown": "_onKeydown($event)" }, properties: { "attr.aria-valuenow": "_currentPercent", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerResize, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerResize]',
+                    host: {
+                        role: 'separator',
+                        tabindex: '0',
+                        'aria-label': 'Resize panel',
+                        '[attr.aria-valuenow]': '_currentPercent',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+//# sourceMappingURL=drawer-resize.js.map