feat(overlay): support min width and min height (#2063)

Author: kara

src/lib/core/overlay/overlay-directives.spec.ts

@@ -85,6 +85,24 @@ describe('Overlay directives', () => {
       expect(pane.style.height).toEqual('100vh');
     });
 
+    it('should set the min width', () => {
+      fixture.componentInstance.minWidth = 250;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.minWidth).toEqual('250px');
+    });
+
+    it('should set the min height', () => {
+      fixture.componentInstance.minHeight = '500px';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.minHeight).toEqual('500px');
+    });
+
     it('should create the backdrop if designated', () => {
       fixture.componentInstance.hasBackdrop = true;
       fixture.componentInstance.isOpen = true;
@@ -219,14 +237,16 @@ describe('Overlay directives', () => {
             [hasBackdrop]="hasBackdrop" backdropClass="md-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
             (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
-            (detach)="detachHandler()">
+            (detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight">
     <p>Menu content</p>
   </template>`,
 })
 class ConnectedOverlayDirectiveTest {
   isOpen = false;
   width: number | string;
   height: number | string;
+  minWidth: number | string;
+  minHeight: number | string;
   offsetX: number = 0;
   offsetY: number = 0;
   hasBackdrop: boolean;

src/lib/core/overlay/overlay-directives.ts

@@ -106,6 +106,12 @@ export class ConnectedOverlayDirective implements OnDestroy {
   /** The height of the overlay panel. */
   @Input() height: number | string;
 
+  /** The min width of the overlay panel. */
+  @Input() minWidth: number | string;
+
+  /** The min height of the overlay panel. */
+  @Input() minHeight: number | string;
+
   /** The custom class to be set on the backdrop element. */
   @Input() backdropClass: string;
 
@@ -180,6 +186,14 @@ export class ConnectedOverlayDirective implements OnDestroy {
       overlayConfig.height = this.height;
     }
 
+    if (this.minWidth || this.minWidth === 0) {
+      overlayConfig.minWidth = this.minWidth;
+    }
+
+    if (this.minHeight || this.minHeight === 0) {
+      overlayConfig.minHeight = this.minHeight;
+    }
+
     overlayConfig.hasBackdrop = this.hasBackdrop;
 
     if (this.backdropClass) {

src/lib/core/overlay/overlay-ref.ts

@@ -85,6 +85,14 @@ export class OverlayRef implements PortalHost {
     if (this._state.height || this._state.height === 0) {
       this._pane.style.height = formatCssUnit(this._state.height);
     }
+
+    if (this._state.minWidth || this._state.minWidth === 0) {
+      this._pane.style.minWidth = formatCssUnit(this._state.minWidth);
+    }
+
+    if (this._state.minHeight || this._state.minHeight === 0) {
+      this._pane.style.minHeight = formatCssUnit(this._state.minHeight);
+    }
   }
 
   /** Attaches a backdrop for this overlay. */

src/lib/core/overlay/overlay-state.ts

@@ -22,6 +22,12 @@ export class OverlayState {
   /** The height of the overlay panel. If a number is provided, pixel units are assumed. **/
   height: number | string;
 
+  /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. **/
+  minWidth: number | string;
+
+  /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. **/
+  minHeight: number | string;
+
   /** The direction of the text in the overlay panel. */
   direction: LayoutDirection = 'ltr';
 

src/lib/core/overlay/overlay.spec.ts

@@ -147,6 +147,24 @@ describe('Overlay', () => {
       expect(pane.style.height).toEqual('100vh');
     });
 
+    it('should apply the min width set in the config', () => {
+      state.minWidth = 200;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.minWidth).toEqual('200px');
+    });
+
+
+    it('should apply the min height set in the config', () => {
+      state.minHeight = 500;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.minHeight).toEqual('500px');
+    });
+
+
     it('should support zero widths and heights', () => {
       state.width = 0;
       state.height = 0;