@genesislcap/foundation-ui 14.340.3 → 14.342.0

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

@@ -1,9 +1,6 @@
 import { NotificationStructure } from '@genesislcap/foundation-notifications';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { DialogPosition, DialogType } from './dialog.types';
-/**
- * Focus trapping will be addressed as part of https://genesisglobal.atlassian.net/browse/FUI-2083
- */
 export declare const foundationDialogShadowOptions: ShadowRootInit;
 export declare const defaultDialogConfig: {};
 export declare abstract class DialogElement extends FoundationElement {
@@ -22,6 +19,18 @@ export declare abstract class DialogElement extends FoundationElement {
      * Whether or not to show the close icon
      */
     showCloseIcon: boolean;
+    /**
+     * Whether or not the dialog is resizable
+     */
+    resizable: boolean;
+    /**
+     * Minimum width for the dialog
+     */
+    minWidth: number;
+    /**
+     * Minimum height for the dialog
+     */
+    minHeight: number;
     /**
      * Callback to run *before* HTMLDialogElement is shown
      */
@@ -30,7 +39,23 @@ export declare abstract class DialogElement extends FoundationElement {
      * Callback to run *after* HTMLDialogElement is closed
      */
     onCloseCallback: () => void;
+    private isResizing;
+    private currentResizeHandle;
+    private startX;
+    private startY;
+    private startWidth;
+    private startHeight;
+    private startLeft;
+    private startTop;
+    private resizeOffsetX;
+    private resizeOffsetY;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupResizeHandlers;
+    private removeResizeHandlers;
+    private handleResizeStart;
+    private handleResizeMove;
+    private handleResizeEnd;
     /**
      * Determine if the dialog is showing or closed.
      */

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,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;IAiBjB;;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;AAWjE,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;IACgD,SAAS,EAAE,OAAO,CAAS;IAE9E;;OAEG;IAC+B,QAAQ,EAAE,MAAM,CAAa;IAE/D;;OAEG;IACgC,SAAS,EAAE,MAAM,CAAc;IAElE;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAGxC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,aAAa,CAAa;IAElC,iBAAiB;IAoBjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,iBAAiB;IAqEzB,OAAO,CAAC,gBAAgB;IA4FxB,OAAO,CAAC,eAAe;IAuBvB;;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/dialog/dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aA2EpC,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aAyNpC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,gEAwD/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,6DAEpC,CAAC"}
+{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,gEAqE/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,6DAEpC,CAAC"}

package/dist/dts/options-datasource/options-datasource.d.ts

@@ -8,6 +8,7 @@ export declare class OptionsDatasource extends BaseDatasource {
     emptyDataLabel: string;
     allowCustomOptions: boolean;
     labelFormatter: any;
+    labelRowFormatter: (any: any) => string;
     initialSelectedValue: string | number;
     initialSelectedValueChanged(oldValue: any, newValue: any): void;
     initalSelectedValueInitialized: boolean;

package/dist/dts/options-datasource/options-datasource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options-datasource.d.ts","sourceRoot":"","sources":["../../../src/options-datasource/options-datasource.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAG7D,qBAGa,iBAAkB,SAAQ,cAAc;IACf,UAAU,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAyB;IAC1B,kBAAkB,UAAS;IAC7E,cAAc,MAAC;IAEf,oBAAoB,EAAE,MAAM,GAAG,MAAM,CAAC;IAClD,2BAA2B,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAQ9C,8BAA8B,EAAE,OAAO,CAAS;IAEhD,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAQ;IAElC,SAAS,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAEnD,OAAO,CAAC,cAAc,CAAiB;IAEjC,iBAAiB;IAkBvB,oBAAoB;IAQpB,OAAO,CAAC,sBAAsB,CAI5B;IAEF,mBAAmB,GAAI,MAAC,UAQtB;IAEF,SAAS;IAcH,sBAAsB;IAY5B,SAAS,IAAI,IAAI;IAWjB,OAAO,CAAC,aAAa;IAYrB,iBAAiB,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE;IA6DtC,eAAe;IAcf,aAAa;IAMb,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI;IAI9C,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI;IAI7C,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI;CAG9C"}
+{"version":3,"file":"options-datasource.d.ts","sourceRoot":"","sources":["../../../src/options-datasource/options-datasource.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAG7D,qBAGa,iBAAkB,SAAQ,cAAc;IACf,UAAU,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAyB;IAC1B,kBAAkB,UAAS;IAC7E,cAAc,MAAC;IACf,iBAAiB,EAAE,CAAC,GAAG,KAAA,KAAK,MAAM,CAAC;IAEnC,oBAAoB,EAAE,MAAM,GAAG,MAAM,CAAC;IAClD,2BAA2B,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAQ9C,8BAA8B,EAAE,OAAO,CAAS;IAEhD,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAQ;IAElC,SAAS,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAEnD,OAAO,CAAC,cAAc,CAAiB;IAEjC,iBAAiB;IAkBvB,oBAAoB;IAQpB,OAAO,CAAC,sBAAsB,CAI5B;IAEF,mBAAmB,GAAI,MAAC,UAQtB;IAEF,SAAS;IAcH,sBAAsB;IAY5B,SAAS,IAAI,IAAI;IAWjB,OAAO,CAAC,aAAa;IAYrB,iBAAiB,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE;IA+DtC,eAAe;IAcf,aAAa;IAMb,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI;IAI9C,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI;IAI7C,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI;CAG9C"}

package/dist/esm/dialog/dialog.js

@@ -8,6 +8,8 @@ import { foundationDialogTemplate as template } from './dialog.template';
 /**
  * Focus trapping will be addressed as part of https://genesisglobal.atlassian.net/browse/FUI-2083
  */
+const MIN_WIDTH = 300;
+const MIN_HEIGHT = 200;
 // explicitly declaring for extensibility
 export const foundationDialogShadowOptions = {
     mode: 'open',
@@ -23,6 +25,29 @@ export class DialogElement extends FoundationElement {
          * Whether or not to show the close icon
          */
         this.showCloseIcon = true;
+        /**
+         * Whether or not the dialog is resizable
+         */
+        this.resizable = false;
+        /**
+         * Minimum width for the dialog
+         */
+        this.minWidth = MIN_WIDTH;
+        /**
+         * Minimum height for the dialog
+         */
+        this.minHeight = MIN_HEIGHT;
+        // Resize state
+        this.isResizing = false;
+        this.currentResizeHandle = null;
+        this.startX = 0;
+        this.startY = 0;
+        this.startWidth = 0;
+        this.startHeight = 0;
+        this.startLeft = 0;
+        this.startTop = 0;
+        this.resizeOffsetX = 0;
+        this.resizeOffsetY = 0;
     }
     notificationChanged() {
         if (this.notification)
@@ -41,6 +66,189 @@ export class DialogElement extends FoundationElement {
         if (this.hasAttribute('open')) {
             this.shadowRoot.querySelector('dialog').setAttribute('open', '');
         }
+        // Set up resize handlers
+        this.setupResizeHandlers();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeResizeHandlers();
+    }
+    setupResizeHandlers() {
+        if (!this.resizable)
+            return;
+        this.mainElement.style.minHeight = `${this.minHeight}px`;
+        this.mainElement.style.minWidth = `${this.minWidth}px`;
+        // Add event listeners for resize handles
+        const handles = this.shadowRoot.querySelectorAll('.resize-handle');
+        handles.forEach((handle) => {
+            handle.addEventListener('mousedown', this.handleResizeStart.bind(this));
+        });
+    }
+    removeResizeHandlers() {
+        document.removeEventListener('mousemove', this.handleResizeMove.bind(this));
+        document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
+    }
+    handleResizeStart(e) {
+        if (!this.resizable)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.isResizing = true;
+        const target = e.target;
+        this.currentResizeHandle = target.dataset.direction;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        const rect = this.mainElement.getBoundingClientRect();
+        this.startWidth = rect.width;
+        this.startHeight = rect.height;
+        this.startLeft = rect.left;
+        this.startTop = rect.top;
+        // Calculate offset from click position to actual edge
+        // This prevents the initial "jump" when starting to drag
+        this.resizeOffsetX = 0;
+        this.resizeOffsetY = 0;
+        switch (this.currentResizeHandle) {
+            case 'n':
+                this.resizeOffsetY = e.clientY - rect.top;
+                break;
+            case 's':
+                this.resizeOffsetY = e.clientY - rect.bottom;
+                break;
+            case 'e':
+                this.resizeOffsetX = e.clientX - rect.right;
+                break;
+            case 'w':
+                this.resizeOffsetX = e.clientX - rect.left;
+                break;
+            case 'ne':
+                this.resizeOffsetX = e.clientX - rect.right;
+                this.resizeOffsetY = e.clientY - rect.top;
+                break;
+            case 'nw':
+                this.resizeOffsetX = e.clientX - rect.left;
+                this.resizeOffsetY = e.clientY - rect.top;
+                break;
+            case 'se':
+                this.resizeOffsetX = e.clientX - rect.right;
+                this.resizeOffsetY = e.clientY - rect.bottom;
+                break;
+            case 'sw':
+                this.resizeOffsetX = e.clientX - rect.left;
+                this.resizeOffsetY = e.clientY - rect.bottom;
+                break;
+        }
+        // Convert to fixed positioning to allow precise position control
+        this.mainElement.style.position = 'fixed';
+        this.mainElement.style.left = `${rect.left}px`;
+        this.mainElement.style.top = `${rect.top}px`;
+        this.mainElement.style.margin = '0';
+        // Add document-level listeners for smooth resizing
+        document.addEventListener('mousemove', this.handleResizeMove.bind(this));
+        document.addEventListener('mouseup', this.handleResizeEnd.bind(this));
+        // Add resizing class for styling
+        this.mainElement.classList.add('resizing');
+    }
+    handleResizeMove(e) {
+        if (!this.isResizing || !this.currentResizeHandle)
+            return;
+        e.preventDefault();
+        // Apply the offset to eliminate initial jump
+        const deltaX = e.clientX - this.startX - this.resizeOffsetX;
+        const deltaY = e.clientY - this.startY - this.resizeOffsetY;
+        let newWidth = this.startWidth;
+        let newHeight = this.startHeight;
+        let newLeft = this.startLeft;
+        let newTop = this.startTop;
+        let shouldUpdatePosition = false;
+        // Calculate new dimensions and positions based on resize handle direction
+        switch (this.currentResizeHandle) {
+            case 'se': // bottom-right
+                newWidth = this.startWidth + deltaX;
+                newHeight = this.startHeight + deltaY;
+                break;
+            case 'sw': // bottom-left
+                newWidth = this.startWidth - deltaX;
+                newHeight = this.startHeight + deltaY;
+                newLeft = this.startLeft + deltaX;
+                shouldUpdatePosition = true;
+                break;
+            case 'ne': // top-right
+                newWidth = this.startWidth + deltaX;
+                newHeight = this.startHeight - deltaY;
+                newTop = this.startTop + deltaY;
+                shouldUpdatePosition = true;
+                break;
+            case 'nw': // top-left
+                newWidth = this.startWidth - deltaX;
+                newHeight = this.startHeight - deltaY;
+                newLeft = this.startLeft + deltaX;
+                newTop = this.startTop + deltaY;
+                shouldUpdatePosition = true;
+                break;
+            case 'e': // right
+                newWidth = this.startWidth + deltaX;
+                break;
+            case 'w': // left
+                newWidth = this.startWidth - deltaX;
+                newLeft = this.startLeft + deltaX;
+                shouldUpdatePosition = true;
+                break;
+            case 's': // bottom
+                newHeight = this.startHeight + deltaY;
+                break;
+            case 'n': // top
+                newHeight = this.startHeight - deltaY;
+                newTop = this.startTop + deltaY;
+                shouldUpdatePosition = true;
+                break;
+        }
+        // Apply minimum constraints only when resizable
+        if (this.resizable) {
+            // Apply minimum width constraint and adjust position if needed
+            if (newWidth < this.minWidth) {
+                const widthDiff = this.minWidth - newWidth;
+                newWidth = this.minWidth;
+                // If resizing from left edge, maintain the right edge position
+                if (this.currentResizeHandle.includes('w')) {
+                    newLeft = newLeft - widthDiff;
+                }
+            }
+            // Apply minimum height constraint and adjust position if needed
+            if (newHeight < this.minHeight) {
+                const heightDiff = this.minHeight - newHeight;
+                newHeight = this.minHeight;
+                // If resizing from top edge, maintain the bottom edge position
+                if (this.currentResizeHandle.includes('n')) {
+                    newTop = newTop - heightDiff;
+                }
+            }
+        }
+        // Apply new dimensions
+        this.mainElement.style.width = `${newWidth}px`;
+        this.mainElement.style.height = `${newHeight}px`;
+        // Always update position when using handles that move edges
+        if (shouldUpdatePosition) {
+            this.mainElement.style.left = `${newLeft}px`;
+            this.mainElement.style.top = `${newTop}px`;
+        }
+    }
+    handleResizeEnd(e) {
+        if (!this.isResizing)
+            return;
+        e.preventDefault();
+        this.isResizing = false;
+        this.currentResizeHandle = null;
+        this.resizeOffsetX = 0;
+        this.resizeOffsetY = 0;
+        // Remove document-level listeners
+        document.removeEventListener('mousemove', this.handleResizeMove.bind(this));
+        document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
+        // Remove resizing class
+        this.mainElement.classList.remove('resizing');
+        this.$emit('resize', {
+            width: this.mainElement.offsetWidth,
+            height: this.mainElement.offsetHeight,
+        });
     }
     /**
      * Determine if the dialog is showing or closed.
@@ -89,6 +297,15 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'show-close-icon' })
 ], DialogElement.prototype, "showCloseIcon", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'resizable' })
+], DialogElement.prototype, "resizable", void 0);
+__decorate([
+    attr({ attribute: 'min-width' })
+], DialogElement.prototype, "minWidth", void 0);
+__decorate([
+    attr({ attribute: 'min-height' })
+], DialogElement.prototype, "minHeight", void 0);
 __decorate([
     observable
 ], DialogElement.prototype, "onShowCallback", void 0);

package/dist/esm/dialog/dialog.styles.js

@@ -74,4 +74,146 @@ export const foundationDialogStyles = css `
     min-height: var(--notification-details-min-height);
     white-space: pre-line;
   }
+
+  :host([resizable]) dialog {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  :host([resizable]) dialog .content-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    resize: none;
+  }
+
+  /* Resize handles */
+  .resize-handle {
+    position: absolute;
+    z-index: 10;
+  }
+
+  /* Edge handles */
+  .resize-handle-n,
+  .resize-handle-s {
+    left: 0;
+    right: 0;
+    height: 8px;
+    cursor: ns-resize;
+  }
+
+  .resize-handle-n {
+    top: 0;
+  }
+
+  .resize-handle-s {
+    bottom: 0;
+  }
+
+  .resize-handle-e,
+  .resize-handle-w {
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    cursor: ew-resize;
+  }
+
+  .resize-handle-e {
+    right: 0;
+  }
+
+  .resize-handle-w {
+    left: 0;
+  }
+
+  /* Corner handles */
+  .resize-handle-ne,
+  .resize-handle-nw,
+  .resize-handle-se,
+  .resize-handle-sw {
+    width: 16px;
+    height: 16px;
+  }
+
+  .resize-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+  }
+
+  .resize-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .resize-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+
+  .resize-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  /* Visual indicator for corner handles */
+  .resize-handle-se::after,
+  .resize-handle-sw::after,
+  .resize-handle-ne::after,
+  .resize-handle-nw::after {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-style: solid;
+    border-color: var(--neutral-stroke-divider-rest);
+    opacity: 50%;
+    transition: opacity 0.2s;
+    margin: 2px;
+  }
+
+  .resize-handle-se::after {
+    bottom: 2px;
+    right: 2px;
+    border-width: 0 3px 3px 0;
+  }
+
+  .resize-handle-sw::after {
+    bottom: 2px;
+    left: 2px;
+    border-width: 0 0 3px 3px;
+  }
+
+  .resize-handle-ne::after {
+    top: 2px;
+    right: 2px;
+    border-width: 3px 3px 0 0;
+  }
+
+  .resize-handle-nw::after {
+    top: 2px;
+    left: 2px;
+    border-width: 3px 0 0 3px;
+  }
+
+  /* Hover effect */
+  .resize-handle:hover::after {
+    opacity: 100%;
+  }
+
+  /* Resizing state */
+  dialog.resizing {
+    user-select: none;
+    pointer-events: auto;
+  }
+
+  /* Fixed positioning support for resizable dialogs */
+  dialog[style*='position: fixed'] {
+    margin: 0;
+  }
 `;

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

@@ -43,6 +43,16 @@ export const getDialogTemplate = (prefix) => html `
         </slot>
       </div>
     </div>
+    ${when((x) => x.resizable, html `
+        <div class="resize-handle resize-handle-n" data-direction="n"></div>
+        <div class="resize-handle resize-handle-s" data-direction="s"></div>
+        <div class="resize-handle resize-handle-e" data-direction="e"></div>
+        <div class="resize-handle resize-handle-w" data-direction="w"></div>
+        <div class="resize-handle resize-handle-ne" data-direction="ne"></div>
+        <div class="resize-handle resize-handle-nw" data-direction="nw"></div>
+        <div class="resize-handle resize-handle-se" data-direction="se"></div>
+        <div class="resize-handle resize-handle-sw" data-direction="sw"></div>
+      `)}
   </dialog>
 `;
 export const foundationDialogTemplate = html `

package/dist/esm/options-datasource/options-datasource.js

@@ -112,9 +112,11 @@ let OptionsDatasource = OptionsDatasource_1 = class OptionsDatasource extends Ba
                 var _a;
                 return ({
                     value: row[this.valueField],
-                    label: this.labelFormatter
-                        ? this.labelFormatter(row[this.labelField])
-                        : this.getDefaultLabelFormat(row[this.labelField], (_a = this.getFieldMetadata(this.labelField)) === null || _a === void 0 ? void 0 : _a.type),
+                    label: this.labelRowFormatter
+                        ? this.labelRowFormatter(row)
+                        : this.labelFormatter
+                            ? this.labelFormatter(row[this.labelField])
+                            : this.getDefaultLabelFormat(row[this.labelField], (_a = this.getFieldMetadata(this.labelField)) === null || _a === void 0 ? void 0 : _a.type),
                 });
             });
             const listboxOptions = this.options.map(({ value, label }) => {
@@ -206,6 +208,9 @@ __decorate([
 __decorate([
     observable
 ], OptionsDatasource.prototype, "labelFormatter", void 0);
+__decorate([
+    observable
+], OptionsDatasource.prototype, "labelRowFormatter", void 0);
 __decorate([
     observable
 ], OptionsDatasource.prototype, "initialSelectedValue", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.340.3",
+  "version": "14.342.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.340.3",
-    "@genesislcap/genx": "14.340.3",
-    "@genesislcap/rollup-builder": "14.340.3",
-    "@genesislcap/ts-builder": "14.340.3",
-    "@genesislcap/uvu-playwright-builder": "14.340.3",
-    "@genesislcap/vite-builder": "14.340.3",
-    "@genesislcap/webpack-builder": "14.340.3",
+    "@genesislcap/foundation-testing": "14.342.0",
+    "@genesislcap/genx": "14.342.0",
+    "@genesislcap/rollup-builder": "14.342.0",
+    "@genesislcap/ts-builder": "14.342.0",
+    "@genesislcap/uvu-playwright-builder": "14.342.0",
+    "@genesislcap/vite-builder": "14.342.0",
+    "@genesislcap/webpack-builder": "14.342.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -98,15 +98,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.340.3",
-    "@genesislcap/foundation-comms": "14.340.3",
-    "@genesislcap/foundation-criteria": "14.340.3",
-    "@genesislcap/foundation-errors": "14.340.3",
-    "@genesislcap/foundation-events": "14.340.3",
-    "@genesislcap/foundation-logger": "14.340.3",
-    "@genesislcap/foundation-notifications": "14.340.3",
-    "@genesislcap/foundation-user": "14.340.3",
-    "@genesislcap/foundation-utils": "14.340.3",
+    "@genesislcap/expression-builder": "14.342.0",
+    "@genesislcap/foundation-comms": "14.342.0",
+    "@genesislcap/foundation-criteria": "14.342.0",
+    "@genesislcap/foundation-errors": "14.342.0",
+    "@genesislcap/foundation-events": "14.342.0",
+    "@genesislcap/foundation-logger": "14.342.0",
+    "@genesislcap/foundation-notifications": "14.342.0",
+    "@genesislcap/foundation-user": "14.342.0",
+    "@genesislcap/foundation-utils": "14.342.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "fcb79d9326bd391dccaf3d617703648095ae2aaf"
+  "gitHead": "bdc6df2edd12875ab7886e6d8808cf9b320de918"
 }