fix: Modal height example issues. Close icon fix. (#1483)

* Add classes to component created dynamically. Add support for max-height. Fix close icon

* Change classes adding style

apps/docs/src/app/core/component-docs/modal/examples/component-as-content/modal-component-as-content-example.component.ts

@@ -24,7 +24,9 @@ export class ModalComponentAsContentExampleComponent {
                     'nearly one-third of the world\'s production of pineapples.',
                 thirdParagraph: 'The flesh and juice of the pineapple are used in cuisines around the world.'
             },
-            maxWidth: '300px'
+            maxWidth: '300px',
+            height: '300px',
+            maxHeight: '100vh'
         });
 
         // TODO Subscribe to result

apps/docs/src/app/core/component-docs/modal/examples/component-as-content/modal-content.component.ts

@@ -8,7 +8,7 @@ import { ModalRef } from '@fundamental-ngx/core';
             <h1 fd-modal-title>{{modalRef.data.title}}</h1>
             <button fd-modal-close-btn (click)="modalRef.dismiss('x')"></button>
         </fd-modal-header>
-        <fd-modal-body style="max-height: 100px;">
+        <fd-modal-body>
             <p>{{modalRef.data.firstParagraph}}</p>
             <p>{{modalRef.data.secondParagraph}}</p>
             <p>{{modalRef.data.thirdParagraph}}</p>

libs/core/src/lib/modal/modal-utils/modal-directives.ts

@@ -33,11 +33,23 @@ export class ModalTitleDirective {
 })
 export class ModalCloseButtonDirective {
 
+    /** @hidden */
+    @HostBinding('attr.aria-label')
+    ariaLabel: string = 'close';
+
+    /** @hidden */
+    @HostBinding('class.sap-icon--decline')
+    sapIconDeclineClass: boolean = true;
+
+    /** @hidden */
+    @HostBinding('class.sap-icon--l')
+    sapIconLClass: boolean = true;
+
     /** @hidden */
     @HostBinding('class.fd-button--light')
-    lightButton = true;
+    lightButtonClass: boolean = true;
 
     /** @hidden */
     @HostBinding('class.fd-modal__close')
-    modalClose = true;
+    modalCloseClass: boolean = true;
 }

libs/core/src/lib/modal/modal.component.scss

@@ -5,6 +5,7 @@
     max-width: none;
     z-index: 1000;
     position: absolute;
+    max-height: 100vh;
 
     &:focus {
         outline: none;
@@ -22,3 +23,7 @@
     display: flex;
     flex-direction: column;
 }
+
+.fd-modal__body {
+    max-height: none;
+}

libs/core/src/lib/modal/modal.component.ts

@@ -44,6 +44,13 @@ import { ModalRef } from './modal-utils/modal-ref';
 })
 export class ModalComponent extends AbstractFdNgxClass implements OnInit, AfterViewInit, OnDestroy {
 
+    /** List of classes that will be added to component, when load from component option is picked. */
+    readonly HOST_COMPONENT_CLASS_LIST: string[] = [
+        'fd-modal__content--overrides',
+        'fd-modal__content',
+    ];
+
+
     @ViewChild('vc', { read: ViewContainerRef, static: false  })
     containerRef: ViewContainerRef;
 
@@ -122,6 +129,7 @@ export class ModalComponent extends AbstractFdNgxClass implements OnInit, AfterV
         this.containerRef.clear();
         const componentFactory = this.componentFactoryResolver.resolveComponentFactory(content);
         this.componentRef = this.containerRef.createComponent(componentFactory);
+        this.addClassesToComponent(this.componentRef.location);
     }
 
     private loadFromTemplate(content: TemplateRef<any>): void {
@@ -132,6 +140,13 @@ export class ModalComponent extends AbstractFdNgxClass implements OnInit, AfterV
         this.componentRef = this.containerRef.createEmbeddedView(content, context);
     }
 
+    private addClassesToComponent(elementRef: ElementRef): void {
+        if (!elementRef) {
+            return;
+        }
+        elementRef.nativeElement.classList.add(...this.HOST_COMPONENT_CLASS_LIST);
+    }
+
     _setProperties(): void {
         if (this.modalPanelClass) {
             this._addClassToElement(this.modalPanelClass);