Merge pull request #103 from RiskChallenger/min-max-width

feat: configure min-width and max-width sizes

Author: NetanelBasal

README.md

@@ -230,6 +230,8 @@ In the `forRoot` method when importing the dialog module in the app module you c
 - `size` - Set the modal size according to your global [custom sizes](#custom-sizes) (default is `md`).
 - `windowClass` - Add a custom class to the modal container.
 - `width` - Set a custom width (default unit is `px`).
+- `minWidth` - Set a custom min-width (default unit is `px`).
+- `maxWidth` - Set a custom max-width (default unit is `px`).
 - `height` - Set a custom height (default unit is `px`).
 - `minHeight` - Set a custom min-height (default unit is `px`).
 - `maxHeight` - Set a custom max-height (default unit is `px`).
@@ -251,6 +253,8 @@ bootstrapApplication(AppComponent, {
       size: sm | md | lg | fullScreen | string,
       windowClass: string,
       width: string | number,
+      minWidth: string | number,
+      maxWidth: string | number,
       height: string | number,
       minHeight: string | number,
       maxHeight: string | number,

projects/ngneat/dialog/src/lib/dialog.component.ts

@@ -55,6 +55,8 @@ export class DialogComponent implements OnInit, OnDestroy {
   private size = this.config.sizes?.[this.config.size || 'md'];
   styles = {
     width: coerceCssPixelValue(this.config.width || this.size?.width),
+    minWidth: coerceCssPixelValue(this.config.minWidth || this.size?.minWidth),
+    maxWidth: coerceCssPixelValue(this.config.maxWidth || this.size?.maxWidth),
     height: coerceCssPixelValue(this.config.height || this.size?.height),
     minHeight: coerceCssPixelValue(this.config.minHeight || this.size?.minHeight),
     maxHeight: coerceCssPixelValue(this.config.maxHeight || this.size?.maxHeight),

projects/ngneat/dialog/src/lib/providers.ts

@@ -33,6 +33,8 @@ export function defaultGlobalConfig(): Partial<GlobalDialogConfig & DialogConfig
     size: 'md',
     windowClass: undefined,
     width: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
     height: undefined,
     minHeight: undefined,
     maxHeight: undefined,

projects/ngneat/dialog/src/lib/types.ts

@@ -8,7 +8,14 @@ export interface GlobalDialogConfig {
   sizes: Partial<
     Record<
       Sizes,
-      { width?: string | number; height?: string | number; minHeight?: string | number; maxHeight?: string | number }
+      {
+        width?: string | number;
+        minWidth?: string | number;
+        maxWidth?: string | number;
+        height?: string | number;
+        minHeight?: string | number;
+        maxHeight?: string | number;
+      }
     >
   >;
   backdrop: boolean;
@@ -19,6 +26,8 @@ export interface GlobalDialogConfig {
   enableClose: boolean | 'onlyLastStrategy';
   resizable: boolean;
   width: string | number;
+  minWidth: string | number;
+  maxWidth: string | number;
   height: string | number;
   minHeight: string | number;
   maxHeight: string | number;