refactor(modal): refactor modal component template files

libs/flowbite-angular/src/lib/components/modal/modal-body.component.html

@@ -0,0 +1,3 @@
+<div class="p-6 space-y-6">
+  <ng-content></ng-content>
+</div>

libs/flowbite-angular/src/lib/components/modal/modal-body.component.ts

@@ -4,10 +4,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   selector: 'flowbite-modal-body',
-  template: `
-    <div class="p-6 space-y-6">
-      <ng-content></ng-content>
-    </div>
-  `,
+  templateUrl: './modal-body.component.html',
 })
 export class ModalBodyComponent {}

libs/flowbite-angular/src/lib/components/modal/modal-footer.component.html

@@ -0,0 +1,5 @@
+<div
+  class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600"
+>
+  <ng-content></ng-content>
+</div>

libs/flowbite-angular/src/lib/components/modal/modal-footer.component.ts

@@ -5,13 +5,7 @@ import { ModalComponent } from './modal.component';
   standalone: true,
   imports: [],
   selector: 'flowbite-modal-footer',
-  template: `
-    <div
-      class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600"
-    >
-      <ng-content></ng-content>
-    </div>
-  `,
+  templateUrl: './modal-footer.component.html',
 })
 export class ModalFooterComponent {
   constructor(public modal: ModalComponent) {}

libs/flowbite-angular/src/lib/components/modal/modal-header.component.html

@@ -0,0 +1,28 @@
+<div
+  class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600"
+>
+  <h3 class="text-xl font-medium text-gray-900 dark:text-white">
+    <ng-content></ng-content>
+  </h3>
+  <button
+    type="button"
+    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    data-modal-hide="medium-modal"
+    (click)="modal.close()"
+  >
+    <svg
+      aria-hidden="true"
+      class="w-5 h-5"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+    <span class="sr-only">Close modal</span>
+  </button>
+</div>

libs/flowbite-angular/src/lib/components/modal/modal-header.component.ts

@@ -5,36 +5,7 @@ import { ModalComponent } from './modal.component';
   standalone: true,
   imports: [],
   selector: 'flowbite-modal-header',
-  template: `
-    <div
-      class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600"
-    >
-      <h3 class="text-xl font-medium text-gray-900 dark:text-white">
-        <ng-content></ng-content>
-      </h3>
-      <button
-        type="button"
-        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-        data-modal-hide="medium-modal"
-        (click)="modal.close()"
-      >
-        <svg
-          aria-hidden="true"
-          class="w-5 h-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-        <span class="sr-only">Close modal</span>
-      </button>
-    </div>
-  `,
+  templateUrl: './modal-header.component.html',
 })
 export class ModalHeaderComponent {
   constructor(readonly modal: ModalComponent) {}

libs/flowbite-angular/src/lib/components/modal/modal.component.html

@@ -0,0 +1,25 @@
+<div
+  tabindex="-1"
+  aria-hidden="true"
+  [ngClass]="{
+    hidden: !isOpen
+  }"
+  class="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full flex {{
+    positionClasses
+  }}"
+  (click)="onBackdropClick($event)"
+>
+  <div
+    class="relative w-full h-full md:h-auto"
+    [ngClass]="{
+      'max-w-md': size === 'sm',
+      'max-w-lg': size === 'md',
+      'max-w-4xl': size === 'lg',
+      'max-w-7xl': size === 'xl'
+    }"
+  >
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

libs/flowbite-angular/src/lib/components/modal/modal.component.ts

@@ -5,33 +5,7 @@ import { NgClass } from '@angular/common';
   standalone: true,
   imports: [NgClass],
   selector: 'flowbite-modal',
-  template: `
-    <div
-      tabindex="-1"
-      aria-hidden="true"
-      [ngClass]="{
-        hidden: !isOpen
-      }"
-      class="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full flex {{
-        positionClasses
-      }}"
-      (click)="onBackdropClick($event)"
-    >
-      <div
-        class="relative w-full h-full md:h-auto"
-        [ngClass]="{
-          'max-w-md': size === 'sm',
-          'max-w-lg': size === 'md',
-          'max-w-4xl': size === 'lg',
-          'max-w-7xl': size === 'xl'
-        }"
-      >
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
-  `,
+  templateUrl: './modal.component.html',
 })
 export class ModalComponent {
   @Input() dismissable?: boolean = false;