docs(modal): add positioned

Author: MGREMY

apps/docs/docs/components/modal/_position.component.html

@@ -0,0 +1,45 @@
+<button
+  flowbiteButton
+  [ngpDialogTrigger]="dialog">
+  Modal
+</button>
+
+<ng-template
+  #dialog
+  let-close="close">
+  <div
+    flowbiteModalOverlay
+    position="top-left">
+    <div flowbiteModal>
+      <h3 flowbiteModalHeader>Terms of Service</h3>
+      <div flowbiteModalContent>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          With less than a month to go before the European Union enacts new consumer privacy laws
+          for its citizens, companies around the world are updating their terms of service
+          agreements to comply.
+        </p>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
+          25 and is meant to ensure a common set of data rights in the European Union. It requires
+          organizations to notify users as soon as possible of high-risk data breaches that could
+          personally affect them.
+        </p>
+      </div>
+      <div flowbiteModalFooter>
+        <button
+          flowbiteButton
+          (click)="close()"
+          color="info">
+          I accept
+        </button>
+        <button
+          flowbiteButton
+          (click)="close()"
+          color="default"
+          outline>
+          Decline
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template>

apps/docs/docs/components/modal/_position.component.ts

@@ -0,0 +1,20 @@
+import { Button } from 'flowbite-angular/button';
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from 'flowbite-angular/modal';
+
+import { Component } from '@angular/core';
+import { NgpDialogTrigger } from 'ng-primitives/dialog';
+
+@Component({
+  imports: [Button, NgpDialogTrigger, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay],
+  templateUrl: './_position.component.html',
+  host: {
+    class: 'flex flex-wrap flex-row gap-3 p-6',
+  },
+})
+export class FlowbitePositionComponent {}

apps/docs/docs/components/modal/index.md

@@ -25,3 +25,15 @@ keyword: ModalPage
 ```angular-ts file="./_open-programatically.component.ts" group="openProgramatically" name="typescript"
 
 ```
+
+## Positioned modal
+
+{{ NgDocActions.demo('flowbitePositionComponent', {container: false}) }}
+
+```angular-html file="./_position.component.html" group="position" name="html"
+
+```
+
+```angular-ts file="./_position.component.ts" group="position" name="typescript"
+
+```

apps/docs/docs/components/modal/ng-doc.page.ts

@@ -1,6 +1,7 @@
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteOpenprogramaticallyComponent } from './_open-programatically.component';
+import { FlowbitePositionComponent } from './_position.component';
 
 import type { NgDocPage } from '@ng-doc/core';
 
@@ -14,6 +15,7 @@ const Modal: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
     flowbiteOpenprogramaticallyComponent: FlowbiteOpenprogramaticallyComponent,
+    flowbitePositionComponent: FlowbitePositionComponent,
   },
 };