@ev-core/aurelia-v1-sheet 1.0.0 → 2.0.0

package/dist/commonjs/au-drag.d.ts

@@ -1,30 +1 @@
-import { IPosition } from "./interfaces";
-type positionType = 'client' | 'page' | 'screen';
-interface IAuDragConfig {
-    positionType: positionType;
-    passiveListeners: boolean;
-}
-export declare class DragEventHandler<T extends object> {
-    private readonly element;
-    static create<T extends object>(element: Element, config?: IAuDragConfig): DragEventHandler<T>;
-    private xKey;
-    private yKey;
-    private listenerOptions;
-    private isDragging;
-    startPosition: IPosition;
-    private _data;
-    getData(): T;
-    onStart: (startPosition: IPosition, event: MouseEvent | TouchEvent | Event, data?: T) => T | void;
-    onMove: (endPosition: IPosition, startPosition: IPosition, event: MouseEvent | TouchEvent | Event, data?: T) => T | void;
-    onEnd: (currentPosition: IPosition, startPosition: IPosition, event: MouseEvent | TouchEvent | Event, data?: T) => T | void;
-    setPositionType(type: positionType): void;
-    constructor(element: Element, config?: IAuDragConfig);
-    private startEvent;
-    private dragEvent;
-    private endEvent;
-    stop(): void;
-    private getPosition;
-    start(): void;
-    dispose(): void;
-}
-export {};
+export { DragEventHandler } from '@ev-core/au-core-sheet';

package/dist/commonjs/au-drag.js

@@ -1,75 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragEventHandler = void 0;
-const startEvents = ['mousedown', 'touchstart'];
-const moveEvents = ['mousemove', 'touchmove'];
-const endEvents = ['mouseup', 'touchend'];
-class DragEventHandler {
-    static create(element, config) { return new DragEventHandler(element, config); }
-    getData() { return this._data; }
-    setPositionType(type) {
-        this.xKey = type + 'X';
-        this.yKey = type + 'Y';
-    }
-    constructor(element, config) {
-        this.element = element;
-        this.listenerOptions = { passive: true };
-        this.isDragging = false;
-        this._data = {};
-        this.startEvent = (event) => {
-            this.isDragging = true;
-            const pos = this.getPosition(event);
-            this.startPosition = pos;
-            const data = this.onStart?.(pos, event, this._data);
-            if (data) {
-                this._data = data;
-            }
-        };
-        this.dragEvent = (event) => {
-            if (this.isDragging) {
-                const pos = this.getPosition(event);
-                const data = this.onMove?.(pos, this.startPosition, event, this._data);
-                if (data) {
-                    this._data = data;
-                }
-            }
-        };
-        this.endEvent = (event) => {
-            if (this.isDragging) {
-                this.isDragging = false;
-                const pos = this.getPosition(event);
-                const data = this.onEnd?.(pos, this.startPosition, event, this._data);
-                if (data) {
-                    this._data = data;
-                }
-            }
-        };
-        if (!config) {
-            config = { positionType: 'client', passiveListeners: true };
-        }
-        this.setPositionType(config.positionType);
-        this.listenerOptions.passive = config.passiveListeners;
-    }
-    stop() { this.isDragging = false; }
-    getPosition(event) {
-        if ('touches' in event && event.touches.length > 0) {
-            return { x: event.touches[0][this.xKey], y: event.touches[0][this.yKey] };
-        }
-        else {
-            return { x: event[this.xKey], y: event[this.yKey] };
-        }
-    }
-    start() {
-        startEvents.forEach(event => { this.element.addEventListener(event, this.startEvent, this.listenerOptions); });
-        moveEvents.forEach(event => { document.addEventListener(event, this.dragEvent, this.listenerOptions); });
-        endEvents.forEach(event => { document.addEventListener(event, this.endEvent, this.listenerOptions); });
-    }
-    dispose() {
-        startEvents.forEach(event => { this.element.removeEventListener(event, this.startEvent); });
-        moveEvents.forEach(event => { document.removeEventListener(event, this.dragEvent); });
-        endEvents.forEach(event => { document.removeEventListener(event, this.endEvent); });
-    }
-}
-exports.DragEventHandler = DragEventHandler;
+var au_core_sheet_1 = require("@ev-core/au-core-sheet");
+Object.defineProperty(exports, "DragEventHandler", { enumerable: true, get: function () { return au_core_sheet_1.DragEventHandler; } });
 
 //# sourceMappingURL=au-drag.js.map

package/dist/commonjs/au-drag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/au-drag.ts"],"names":[],"mappings":";;;AAQA,MAAM,WAAW,GAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAC7D,MAAM,UAAU,GAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3D,MAAM,SAAS,GAAgB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AASvD,MAAa,gBAAgB;IACpB,MAAM,CAAC,MAAM,CAAmB,OAAgB,EAAE,MAAsB,IAAI,OAAO,IAAI,gBAAgB,CAAI,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAS9H,OAAO,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAOvC,eAAe,CAAC,IAAkB;QAChC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IACzB,CAAC;IAGD,YACmB,OAAgB,EACjC,MAAsB;QADL,YAAO,GAAP,OAAO,CAAS;QAnB3B,oBAAe,GAA4B,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAC7D,eAAU,GAAG,KAAK,CAAC;QAGnB,UAAK,GAAM,EAAO,CAAC;QAyBnB,eAAU,GAAkB,CAAC,KAAK,EAAQ,EAAE;YAClD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACpD,IAAI,IAAI,EAAE,CAAC;gBAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAAC,CAAC;QAClC,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,KAAsC,EAAQ,EAAE;YACnE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACpC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACvE,IAAI,IAAI,EAAE,CAAC;oBAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QAEM,aAAQ,GAAG,CAAC,KAAsC,EAAQ,EAAE;YAClE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACtE,IAAI,IAAI,EAAE,CAAC;oBAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QA9BA,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAC9D,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC;IACzD,CAAC;IA6BM,IAAI,KAAK,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;IAElC,WAAW,CAAC,KAAsC;QAExD,IAAI,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,CAAC,EAAG,KAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAG,KAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QACtF,CAAC;IACH,CAAC;IAEM,KAAK;QACV,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/G,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzG,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzG,CAAC;IAEM,OAAO;QACZ,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5F,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtF,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtF,CAAC;CAEF;AApFD,4CAoFC","file":"au-drag.js","sourceRoot":"../../src/"}
+{"version":3,"sources":["../src/au-drag.ts"],"names":[],"mappings":";;;AAAA,wDAA0D;AAAjD,iHAAA,gBAAgB,OAAA","file":"au-drag.js","sourceRoot":"../../src/"}

package/dist/commonjs/elements/au-sheet-component.css

@@ -1,108 +1,108 @@
-.au-sheet {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100dvw;
-    height: 100dvh;
-    display: flex;
-    opacity: 0;
-    pointer-events: none;
-    align-items: center;
-    flex-direction: column;
-    justify-content: flex-end;
-    transition: 0.1s linear;
-  }
-  
-    .au-sheet.show {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  
-  
-    .au-sheet .au-sheet-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      opacity: 0.2;
-      background: #000;
-    }
-  
-    .au-sheet .au-sheet-title {
-      padding: 0 12px;
-    }
-  
-    .au-sheet .au-sheet-content {
-      width: 100%;
-      position: relative;
-      background: #fff;
-      max-height: 100dvh;
-      max-width: 1150px;
-      /* padding: 10px; */
-      transform: translateY(100%);
-      border-radius: 12px 12px 0 0;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
-      transition: 0.3s ease;
-      display: flex;
-      flex-direction: column;
-    }
-  
-    .au-sheet.show .au-sheet-content {
-      transform: translateY(0%);
-    }
-  
-    .au-sheet.dragging .au-sheet-content {
-      transition: none;
-    }
-  
-    .au-sheet.fullscreen .au-sheet-content {
-      border-radius: 0;
-      overflow-y: hidden;
-    }
-  
-    .au-sheet .au-sheet-content {
-      display: flex;
-      justify-content: center;
-    }
-  
-  .au-sheet-content .au-sheet-draghandle {
-    cursor: grab;
-    user-select: none;
-    padding: 12px;
-  }
-  
-  .au-sheet-draghandle span {
-    margin: 0 auto;
-    height: 4px;
-    width: 40px;
-    display: block;
-    background: #C7D0E1;
-    border-radius: 50px;
-  }
-  
-  .au-sheet-content .au-sheet-body {
-    height: 100%;
-    overflow-y: auto;
-    padding: 0 12px 12px 12px;
-    scrollbar-width: none;
-    overscroll-behavior: contain;
-  }
-  
-    .au-sheet-content .au-sheet-body::-webkit-scrollbar {
-      width: 0;
-    }
-  
-  .au-sheet-content .au-sheet-footer {
-    padding: 10px;
-  }
-  
-  /* .au-sheet-content .au-sheet-body h2 {
-    font-size: 1.8rem;
-  }
-  .au-sheet-content .au-sheet-body p {
-    margin-top: 20px;
-    font-size: 1.05rem;
-  } */
+.au-sheet {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    height: 100dvh;
+    display: flex;
+    opacity: 0;
+    pointer-events: none;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-end;
+    transition: 0.1s linear;
+  }
+  
+    .au-sheet.show {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  
+  
+    .au-sheet .au-sheet-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      opacity: 0.2;
+      background: #000;
+    }
+  
+    .au-sheet .au-sheet-title {
+      padding: 0 12px;
+    }
+  
+    .au-sheet .au-sheet-content {
+      width: 100%;
+      position: relative;
+      background: #fff;
+      max-height: 100dvh;
+      max-width: 1150px;
+      /* padding: 10px; */
+      transform: translateY(100%);
+      border-radius: 12px 12px 0 0;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
+      transition: 0.3s ease;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    .au-sheet.show .au-sheet-content {
+      transform: translateY(0%);
+    }
+  
+    .au-sheet.dragging .au-sheet-content {
+      transition: none;
+    }
+  
+    .au-sheet.fullscreen .au-sheet-content {
+      border-radius: 0;
+      overflow-y: hidden;
+    }
+  
+    .au-sheet .au-sheet-content {
+      display: flex;
+      justify-content: center;
+    }
+  
+  .au-sheet-content .au-sheet-draghandle {
+    cursor: grab;
+    user-select: none;
+    padding: 12px;
+  }
+  
+  .au-sheet-draghandle span {
+    margin: 0 auto;
+    height: 4px;
+    width: 40px;
+    display: block;
+    background: #C7D0E1;
+    border-radius: 50px;
+  }
+  
+  .au-sheet-content .au-sheet-body {
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 12px 12px 12px;
+    scrollbar-width: none;
+    overscroll-behavior: contain;
+  }
+  
+    .au-sheet-content .au-sheet-body::-webkit-scrollbar {
+      width: 0;
+    }
+  
+  .au-sheet-content .au-sheet-footer {
+    padding: 10px;
+  }
+  
+  /* .au-sheet-content .au-sheet-body h2 {
+    font-size: 1.8rem;
+  }
+  .au-sheet-content .au-sheet-body p {
+    margin-top: 20px;
+    font-size: 1.05rem;
+  } */
   

package/dist/commonjs/elements/au-sheet-component.d.ts

@@ -1,7 +1,7 @@
-import { Direction, IAuSheetOptions, IPosition, ISize, IStep, Placement } from '../interfaces';
+import { type IAuSheetOptions, type IStep, type Placement } from '@ev-core/au-core-sheet';
 import './au-sheet-component.css';
 export declare class AuSheetComponent {
-    currentSize: Partial<ISize>;
+    private readonly host;
     options: IAuSheetOptions;
     title: string;
     placement: Placement;
@@ -15,19 +15,17 @@ export declare class AuSheetComponent {
     beforeOpen: (sheet: AuSheetComponent) => boolean | void | Promise<boolean | void>;
     afterOpen: (sheet: AuSheetComponent) => void;
     steps: IStep[];
-    private currentStep;
-    private template;
     private bodyHandler;
     private dragHandler;
-    private pushElement;
     private readonly sheetElement;
     private readonly overlayElement;
     private readonly contentElement;
     private readonly dragHandleElement;
     private readonly bodyElement;
-    bodyStartSize: ISize;
-    constructor();
+    pusher: ResizeObserver;
+    iosWorkaround: () => void;
     initialPad: Partial<CSSStyleDeclaration>;
+    constructor();
     attachPadToElement(): void;
     detachPadToElement(): void;
     bind(context: any): void;
@@ -39,17 +37,6 @@ export declare class AuSheetComponent {
     open(): Promise<void>;
     private startListening;
     private stopListening;
-    pusher: ResizeObserver;
-    iosWorkaround: () => void;
     private setupBodyHandler;
     private setupDragHandler;
-    findStep(direction: Direction): IStep;
-    findDirection(position: IPosition, startPosition: IPosition): Direction;
-    private findRelativePosition;
-    private calculate;
-    private update;
-    findClosestStep(size: Partial<ISize>): IStep;
-    findPrevStep(): IStep;
-    findNextStep(): IStep;
-    snap(step: IStep): void;
 }

package/dist/commonjs/elements/au-sheet-component.html

@@ -1,27 +1,27 @@
-<template>
-    <div class="au-sheet" 
-         ref="sheetElement">
-      <div class="au-sheet-overlay" 
-           ref="overlayElement"
-           click.trigger="overlayClick()"></div>
-      <div class="au-sheet-content" 
-           ref="contentElement" 
-           css.bind="css">
-        <div if.bind="showDragHandle" 
-             class="au-sheet-draghandle" 
-             ref="dragHandleElement">
-          <span></span>
-        </div>
-        <div if.bind="title" class="au-sheet-title">${title}</div>
-        <div class="au-sheet-body slim-scroll" ref="bodyElement">
-          <slot></slot>
-        </div>
-        <div show.bind="showFooter" 
-             class="au-sheet-footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </div>
-  
-  </template>
+<template>
+    <div class="au-sheet" 
+         ref="sheetElement">
+      <div class="au-sheet-overlay" 
+           ref="overlayElement"
+           click.trigger="overlayClick()"></div>
+      <div class="au-sheet-content" 
+           ref="contentElement" 
+           css.bind="css">
+        <div if.bind="showDragHandle" 
+             class="au-sheet-draghandle" 
+             ref="dragHandleElement">
+          <span></span>
+        </div>
+        <div if.bind="title" class="au-sheet-title">${title}</div>
+        <div class="au-sheet-body slim-scroll" ref="bodyElement">
+          <slot></slot>
+        </div>
+        <div show.bind="showFooter" 
+             class="au-sheet-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  
+  </template>
   

package/dist/commonjs/elements/au-sheet-component.js

@@ -3,21 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuSheetComponent = void 0;
 const tslib_1 = require("tslib");
 const aurelia_framework_1 = require("aurelia-framework");
-const au_drag_1 = require("../au-drag");
+const au_core_sheet_1 = require("@ev-core/au-core-sheet");
 const options_1 = require("../options");
 require("./au-sheet-component.css");
-const steps = [
-    { minDim: 200, dim: 40, dynamic: true },
-    { minDim: 200, dim: 100 }
-];
 let AuSheetComponent = class AuSheetComponent {
     constructor() {
+        this.host = new au_core_sheet_1.SheetHost();
         this.isOpen = false;
-        this.steps = steps;
+        this.steps = au_core_sheet_1.defaultSteps;
         this.iosWorkaround = () => {
-            const vv = aurelia_framework_1.PLATFORM.global.visualViewport;
-            console.log("instan apple");
-            console.log(vv);
+            aurelia_framework_1.PLATFORM.global.visualViewport;
         };
         this.pusher = new aurelia_framework_1.PLATFORM.global.ResizeObserver(() => {
             this.attachPadToElement();
@@ -54,7 +49,7 @@ let AuSheetComponent = class AuSheetComponent {
     }
     attached() {
         const step = this.steps[0];
-        this.snap(step);
+        this.host.snap(this.contentElement, this.placement, step);
         this.setupDragHandler();
         this.setupBodyHandler();
         this.sheetElement.style.zIndex = `${this.zIndex}`;
@@ -110,7 +105,7 @@ let AuSheetComponent = class AuSheetComponent {
         if (!element) {
             return;
         }
-        const handler = au_drag_1.DragEventHandler.create(element, { positionType: 'client', passiveListeners: false });
+        const handler = au_core_sheet_1.DragEventHandler.create(element, { positionType: 'client', passiveListeners: false });
         handler.onStart = (start, event, data) => {
             const scrollTopLog = [element.scrollTop];
             const positionLog = [];
@@ -142,7 +137,7 @@ let AuSheetComponent = class AuSheetComponent {
             const lastPosition = data.positionLog[data.positionLog.length - 1];
             const posDelta = firstPosition.y - lastPosition.y;
             const direction = posDelta > 0 ? 'expand' : 'shrink';
-            const step = this.findStep(direction);
+            const step = this.host.findStep(this.steps, direction);
             if (element.scrollTop < 0) {
                 element.scrollTop = 0;
             }
@@ -150,7 +145,7 @@ let AuSheetComponent = class AuSheetComponent {
                 element.scrollTop = element.clientHeight;
             }
             if (step) {
-                this.snap(step);
+                this.host.snap(this.contentElement, this.placement, step);
             }
         };
         this.bodyHandler = handler;
@@ -159,115 +154,28 @@ let AuSheetComponent = class AuSheetComponent {
         if (!this.dragHandleElement) {
             return;
         }
-        const handler = au_drag_1.DragEventHandler.create(this.dragHandleElement, { positionType: 'client', passiveListeners: false });
+        const handler = au_core_sheet_1.DragEventHandler.create(this.dragHandleElement, { positionType: 'client', passiveListeners: false });
         handler.onStart = (position, event) => {
-            const handle = this.findRelativePosition(this.dragHandleElement);
+            const handle = this.host.findRelativePosition(this.dragHandleElement);
             this.sheetElement.classList.add("dragging");
             return { handle };
         };
         handler.onMove = (position, startPosition, event, data) => {
             event.preventDefault();
-            const size = this.calculate(position, startPosition, data);
-            this.update(size);
+            const size = this.host.calculate(this.placement, position, startPosition, data);
+            this.host.update(this.contentElement, this.placement, size);
         };
         handler.onEnd = (position, startPosition, data) => {
             this.sheetElement.classList.remove("dragging");
-            const direction = this.findDirection(position, startPosition);
-            let step = this.findStep(direction);
+            const direction = this.host.findDirection(this.placement, position, startPosition);
+            let step = this.host.findStep(this.steps, direction);
             if (!step) {
-                step = this.findClosestStep(this.currentSize);
+                step = this.host.findClosestStep(this.steps, this.placement, this.host.currentSize);
             }
-            this.snap(step);
+            this.host.snap(this.contentElement, this.placement, step);
         };
         this.dragHandler = handler;
     }
-    findStep(direction) {
-        return direction === 'expand' ? this.findNextStep() : this.findPrevStep();
-    }
-    findDirection(position, startPosition) {
-        let direction;
-        switch (this.placement) {
-            case 'top':
-                break;
-            case 'right':
-                break;
-            case 'bottom':
-                direction = position.y > startPosition.y ? 'shrink' : 'expand';
-                break;
-            case 'left':
-                break;
-        }
-        return direction;
-    }
-    findRelativePosition(el) {
-        const dims = { h: 0, w: 0 };
-        if (el) {
-            dims.h = el.clientHeight + el.offsetTop;
-            dims.w = el.clientWidth + el.offsetLeft;
-        }
-        return dims;
-    }
-    calculate(current, start, data) {
-        const size = {};
-        if (this.placement == 'bottom') {
-            const innerHeight = window.innerHeight;
-            const handle = ((data?.handle?.h ?? 0) / 2) / innerHeight;
-            const delta = start.y - current.y;
-            const moveHeight = (delta / innerHeight) - handle;
-            const startHeight = 1 - (start.y / innerHeight);
-            size.h = (startHeight + moveHeight) * 100;
-        }
-        return size;
-    }
-    update(size, snap = false) {
-        switch (this.placement) {
-            case 'top':
-            case 'bottom':
-                this.contentElement.style.height = `${size.h}dvh`;
-                break;
-            case 'right':
-            case 'left':
-                this.contentElement.style.width = `${size.w}dvw`;
-                break;
-        }
-        this.currentSize = size;
-    }
-    findClosestStep(size) {
-        const dim = (this.placement === 'top' || this.placement === 'bottom') ? size.h : size.w;
-        return this.steps.reduce((prev, curr) => Math.abs(curr.dim - dim) < Math.abs(prev.dim - dim) ? curr : prev);
-    }
-    findPrevStep() {
-        let step;
-        const index = this.steps.indexOf(this.currentStep);
-        if (index > 0) {
-            step = this.steps[index - 1];
-        }
-        return step;
-    }
-    findNextStep() {
-        let step;
-        const index = this.steps.indexOf(this.currentStep);
-        if (index < this.steps.length - 1) {
-            step = this.steps[index + 1];
-        }
-        return step;
-    }
-    snap(step) {
-        switch (this.placement) {
-            case 'top':
-            case 'bottom':
-                console.log("dynamic: " + step.dynamic);
-                this.contentElement.style.minHeight = step.minDim ? `${step.minDim}px` : '';
-                this.contentElement.style.height = step.dynamic ? '' : `${step.dim}dvh`;
-                break;
-            case 'right':
-            case 'left':
-                this.contentElement.style.minWidth = step.minDim ? `${step.minDim}px` : '';
-                this.contentElement.style.width = `${step.dim}dvw`;
-                break;
-        }
-        this.currentStep = step;
-    }
 };
 exports.AuSheetComponent = AuSheetComponent;
 tslib_1.__decorate([
@@ -323,7 +231,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Object)
 ], AuSheetComponent.prototype, "steps", void 0);
 exports.AuSheetComponent = AuSheetComponent = tslib_1.__decorate([
-    (0, aurelia_framework_1.inject)(aurelia_framework_1.DOM.Element),
     (0, aurelia_framework_1.customElement)('au-sheet'),
     tslib_1.__metadata("design:paramtypes", [])
 ], AuSheetComponent);