mn-angular-lib 0.0.81 → 0.0.82

package/fesm2022/mn-angular-lib.mjs

@@ -2895,9 +2895,9 @@ class BaseModalBuilder {
         this.config.sizeWidth = size;
         return this;
     }
-    /** Set the height of the modal (e.g. '400px', '50vh', '90vh') */
-    sizeHeight(height) {
-        this.config.sizeHeight = height;
+    /** Set the height of the modal */
+    sizeHeight(size) {
+        this.config.sizeHeight = size;
         return this;
     }
     closeMode(mode) {
@@ -4681,11 +4681,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (left-positioned, e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions (right-positioned) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (left-positioned, e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions (right-positioned) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (left-positioned, e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions (right-positioned) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\" [class.h-full]=\"config.sizeHeight\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (left-positioned, e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions (right-positioned) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -4951,7 +4951,16 @@ class MnModalShellComponent {
         if (this.config.sizeWidth === ModalSize.FULL && !this.config.sizeHeight) {
             return '95vh';
         }
-        return this.config.sizeHeight || null;
+        if (!this.config.sizeHeight)
+            return null;
+        switch (this.config.sizeHeight) {
+            case ModalSize.SM: return '30vh';
+            case ModalSize.MD: return '50vh';
+            case ModalSize.LG: return '70vh';
+            case ModalSize.XL: return '85vh';
+            case ModalSize.FULL: return '95vh';
+            default: return null;
+        }
     }
     get showCloseButton() {
         return this.config.closeMode !== CloseMode.DISABLED;