@genesislcap/foundation-ui 14.256.0 → 14.257.0

package/dist/dts/base-components.d.ts

@@ -175,13 +175,13 @@ export declare const baseComponents: {
     foundationMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").MenuItemOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationModal: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
-        styles: import("@microsoft/fast-element").ElementStyles;
         template: import("@microsoft/fast-element").ViewTemplate<import("./modal").Modal, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
         shadowOptions: ShadowRootInit;
     }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
         baseName: string;
-        styles: import("@microsoft/fast-element").ElementStyles;
         template: import("@microsoft/fast-element").ViewTemplate<import("./modal").Modal, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
         shadowOptions: ShadowRootInit;
     }, typeof import("./modal").Modal>;
     foundationMultiselect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{

package/dist/dts/dialog/dialog.d.ts

@@ -1,6 +1,6 @@
 import { NotificationStructure } from '@genesislcap/foundation-notifications';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import type { DialogType, DialogPosition } from './dialog.types';
+import type { DialogPosition, DialogType } from './dialog.types';
 /**
  * Focus trapping will be addressed as part of https://genesisglobal.atlassian.net/browse/FUI-2083
  */
@@ -12,6 +12,8 @@ export declare abstract class DialogElement extends FoundationElement {
      * in the component Shadow DOM.
      */
     mainElement: HTMLDialogElement;
+    topElement: HTMLElement;
+    topElementSlot: HTMLSlotElement;
     notification: NotificationStructure;
     notificationChanged(): void;
     type: DialogType;

package/dist/dts/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;GAEG;AAGH,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IACpB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAExC,iBAAiB;IAgBjB;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACI,OAAO;IAOd;;OAEG;IACI,WAAW,IAAI,IAAI;CAQ3B;AAED;;GAEG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;GAEG;AAGH,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IAChC,UAAU,EAAG,WAAW,CAAC;IACzB,cAAc,EAAG,eAAe,CAAC;IACrB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAExC,iBAAiB;IAgBjB;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACI,OAAO;IAOd;;OAEG;IACI,WAAW,IAAI,IAAI;CAQ3B;AAED;;GAEG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}

package/dist/dts/modal/modal.d.ts

@@ -5,7 +5,26 @@ export declare const defaultModalConfig: {};
  * @tagname %%prefix%%-modal
  */
 export declare class Modal extends DialogElement {
+    private isDragging;
+    private offsetX;
+    private offsetY;
+    private modalWidth;
+    private modalHeight;
+    private onMouseDownBound;
+    private onMouseMoveBound;
+    private onMouseUpBound;
+    draggable: boolean;
+    draggableChanged(ignore: any, newValue: boolean): void;
     show(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onCloseCallback: () => void;
+    private isEventTargetInDraggableTarget;
+    private isInsideTopSlot;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private removeDraggableEventListeners;
 }
 /**
  * The Foundation Modal
@@ -16,13 +35,13 @@ export declare class Modal extends DialogElement {
  */
 export declare const foundationModal: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
     baseName: string;
-    styles: import("@microsoft/fast-element").ElementStyles;
     template: import("@microsoft/fast-element").ViewTemplate<Modal, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
     shadowOptions: ShadowRootInit;
 }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
     baseName: string;
-    styles: import("@microsoft/fast-element").ElementStyles;
     template: import("@microsoft/fast-element").ViewTemplate<Modal, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
     shadowOptions: ShadowRootInit;
 }, typeof Modal>;
 //# sourceMappingURL=modal.d.ts.map

package/dist/dts/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC;AAEF,eAAO,MAAM,kBAAkB,IAAK,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,aAAa;IACtC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;gBAM1B,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC;AAEF,eAAO,MAAM,kBAAkB,IAAK,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,aAAa;IACtC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,gBAAgB,CAA8C;IACtE,OAAO,CAAC,gBAAgB,CAA8C;IACtE,OAAO,CAAC,cAAc,CAA6B;IAExB,SAAS,UAAS;IAC7C,gBAAgB,CAAC,MAAM,KAAA,EAAE,QAAQ,EAAE,OAAO;IAa1C,IAAI,IAAI,IAAI;IAKZ,iBAAiB;IASjB,oBAAoB;IAUpB,eAAe,aASb;IAEF,OAAO,CAAC,8BAA8B;IAMtC,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,6BAA6B;CAWtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;gBAM1B,CAAC"}

package/dist/dts/modal/modal.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,eAAO,MAAM,qBAAqB,EAAE,aAEnC,CAAC"}
+{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,eAAO,MAAM,qBAAqB,EAAE,aAMnC,CAAC"}

package/dist/esm/dialog/dialog.template.js

@@ -3,8 +3,8 @@ import { getPrefix } from '../utils';
 export const getDialogTemplate = (prefix) => html `
   <dialog ${ref('mainElement')} part="dialog" type=${(x) => x.type}>
     <div class="content-wrapper" part="content">
-      <div part="top" class="top">
-        <slot name="top">
+      <div part="top" class="top" ${ref('topElement')}>
+        <slot name="top" ${ref('topElementSlot')}>
           <h2 slot="top" class="title">${(x) => { var _a; return (_a = x.notification) === null || _a === void 0 ? void 0 : _a.title; }}</h2>
         </slot>
         ${when((x) => x.showCloseIcon, html `

package/dist/esm/modal/modal.js

@@ -1,3 +1,5 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DialogElement } from '../dialog';
 import { foundationModalStyles as styles } from './modal.styles';
 import { foundationModalTemplate as template } from './modal.template';
@@ -11,12 +13,126 @@ export const defaultModalConfig = {};
  * @tagname %%prefix%%-modal
  */
 export class Modal extends DialogElement {
+    constructor() {
+        super(...arguments);
+        this.isDragging = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.modalWidth = 0;
+        this.modalHeight = 0;
+        this.onMouseDownBound = null;
+        this.onMouseMoveBound = null;
+        this.onMouseUpBound = null;
+        this.draggable = false;
+        this.onCloseCallback = () => {
+            if (this.draggable && this.mainElement instanceof HTMLElement) {
+                Object.assign(this.mainElement.style, {
+                    position: '',
+                    left: '',
+                    top: '',
+                    margin: '',
+                });
+            }
+        };
+    }
+    draggableChanged(ignore, newValue) {
+        var _a, _b;
+        if (newValue) {
+            this.onMouseDownBound = this.onMouseDown.bind(this);
+            (_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', this.onMouseDownBound);
+        }
+        else {
+            if (this.onMouseDownBound) {
+                (_b = this.mainElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.onMouseDownBound);
+                this.onMouseDownBound = null;
+            }
+            this.removeDraggableEventListeners();
+        }
+    }
     show() {
-        if (this.onShowCallback)
-            this.onShowCallback();
-        this.mainElement['showModal']();
+        var _a, _b;
+        (_a = this.onShowCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.mainElement) === null || _b === void 0 ? void 0 : _b.showModal();
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        if (this.draggable) {
+            this.onMouseDownBound = this.onMouseDown.bind(this);
+            (_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', this.onMouseDownBound);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        this.removeDraggableEventListeners();
+        if (this.onMouseDownBound) {
+            (_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.onMouseDownBound);
+            this.onMouseDownBound = null;
+        }
+    }
+    isEventTargetInDraggableTarget(event) {
+        var _a;
+        return (((_a = this.topElement) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || this.isInsideTopSlot(event.target));
+    }
+    isInsideTopSlot(target) {
+        if (!this.topElementSlot)
+            return false;
+        const assignedNodes = this.topElementSlot.assignedNodes();
+        return assignedNodes.some((node) => node === target || node.contains(target));
+    }
+    onMouseDown(event) {
+        if (!this.topElement || !this.isEventTargetInDraggableTarget(event))
+            return;
+        this.isDragging = true;
+        const rect = this.mainElement.getBoundingClientRect();
+        this.offsetX = event.clientX - rect.left;
+        this.offsetY = event.clientY - rect.top;
+        // Store the modal’s width and height to minimize calls to getBoundingClientRect
+        this.modalWidth = rect.width;
+        this.modalHeight = rect.height;
+        this.onMouseMoveBound = this.onMouseMove.bind(this);
+        this.onMouseUpBound = this.onMouseUp.bind(this);
+        document.addEventListener('mousemove', this.onMouseMoveBound);
+        document.addEventListener('mouseup', this.onMouseUpBound);
+    }
+    onMouseMove(event) {
+        if (!this.isDragging || !this.mainElement)
+            return;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let newLeft = event.clientX - this.offsetX;
+        let newTop = event.clientY - this.offsetY;
+        // Ensure modal stays within screen boundaries
+        newLeft = Math.max(0, Math.min(viewportWidth - this.modalWidth, newLeft));
+        newTop = Math.max(0, Math.min(viewportHeight - this.modalHeight, newTop));
+        requestAnimationFrame(() => {
+            Object.assign(this.mainElement.style, {
+                position: 'absolute',
+                left: `${newLeft}px`,
+                top: `${newTop}px`,
+                margin: '0',
+            });
+        });
+    }
+    onMouseUp() {
+        this.isDragging = false;
+        this.removeDraggableEventListeners();
+    }
+    removeDraggableEventListeners() {
+        if (this.onMouseMoveBound) {
+            document.removeEventListener('mousemove', this.onMouseMoveBound);
+            this.onMouseMoveBound = null;
+        }
+        if (this.onMouseUpBound) {
+            document.removeEventListener('mouseup', this.onMouseUpBound);
+            this.onMouseUpBound = null;
+        }
     }
 }
+__decorate([
+    attr({ mode: 'boolean' })
+], Modal.prototype, "draggable", void 0);
 /**
  * The Foundation Modal
  *
@@ -24,5 +140,5 @@ export class Modal extends DialogElement {
  * @remarks
  * HTML Element: \<foundation-modal\>
  */
-export const foundationModal = Modal.compose(Object.assign({ baseName: 'modal', styles,
-    template, shadowOptions: foundationModalShadowOptions }, defaultModalConfig));
+export const foundationModal = Modal.compose(Object.assign({ baseName: 'modal', template,
+    styles, shadowOptions: foundationModalShadowOptions }, defaultModalConfig));

package/dist/esm/modal/modal.styles.js

@@ -2,4 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { foundationDialogStyles } from '../dialog';
 export const foundationModalStyles = css `
   ${foundationDialogStyles}
+
+  :host([draggable])::part(top) {
+    cursor: move;
+  }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.256.0",
+  "version": "14.257.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.256.0",
-    "@genesislcap/genx": "14.256.0",
-    "@genesislcap/rollup-builder": "14.256.0",
-    "@genesislcap/ts-builder": "14.256.0",
-    "@genesislcap/uvu-playwright-builder": "14.256.0",
-    "@genesislcap/vite-builder": "14.256.0",
-    "@genesislcap/webpack-builder": "14.256.0",
+    "@genesislcap/foundation-testing": "14.257.0",
+    "@genesislcap/genx": "14.257.0",
+    "@genesislcap/rollup-builder": "14.257.0",
+    "@genesislcap/ts-builder": "14.257.0",
+    "@genesislcap/uvu-playwright-builder": "14.257.0",
+    "@genesislcap/vite-builder": "14.257.0",
+    "@genesislcap/webpack-builder": "14.257.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.0",
     "rxjs": "^7.5.4"
@@ -100,15 +100,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.256.0",
-    "@genesislcap/foundation-comms": "14.256.0",
-    "@genesislcap/foundation-criteria": "14.256.0",
-    "@genesislcap/foundation-errors": "14.256.0",
-    "@genesislcap/foundation-events": "14.256.0",
-    "@genesislcap/foundation-logger": "14.256.0",
-    "@genesislcap/foundation-notifications": "14.256.0",
-    "@genesislcap/foundation-user": "14.256.0",
-    "@genesislcap/foundation-utils": "14.256.0",
+    "@genesislcap/expression-builder": "14.257.0",
+    "@genesislcap/foundation-comms": "14.257.0",
+    "@genesislcap/foundation-criteria": "14.257.0",
+    "@genesislcap/foundation-errors": "14.257.0",
+    "@genesislcap/foundation-events": "14.257.0",
+    "@genesislcap/foundation-logger": "14.257.0",
+    "@genesislcap/foundation-notifications": "14.257.0",
+    "@genesislcap/foundation-user": "14.257.0",
+    "@genesislcap/foundation-utils": "14.257.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -130,5 +130,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "bd99b542c14e7f402e36373b566888f24e4a8c7b"
+  "gitHead": "111a319fad6178b896179e8fef9bb79b9da31867"
 }