update

Author: devnamdev2003

documentation/components/FormModelComponent.html

@@ -173,6 +173,12 @@ <h3>Metadata</h3>
             </tr>
 
 
+            <tr>
+                <td class="col-md-3">imports</td>
+                <td class="col-md-9">
+                            <code>CommonModule</code>
+                </td>
+            </tr>
 
 
 
@@ -228,6 +234,9 @@ <h6><b>Inputs</b></h6>
                             <li>
                                 <a href="#label" >label</a>
                             </li>
+                            <li>
+                                <a href="#labelAlignment" >labelAlignment</a>
+                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -269,16 +278,54 @@ <h3 id="inputs">Inputs</h3>
                         <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/component/form-model/form-model.component.ts:22</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/component/form-model/form-model.component.ts:23</a></div>
                             </td>
                         </tr>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>The label text displayed in the form modal.</p>
 <p>This property should be provided by the parent component.</p>
+</div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="labelAlignment"></a>
+                        <b>labelAlignment</b>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>&quot;left&quot; | &quot;center&quot; | &quot;right&quot;</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;left&#x27;</code>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/component/form-model/form-model.component.ts:29</a></div>
+                            </td>
+                        </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Alignment of the label text: &#39;left&#39;, &#39;center&#39;, or &#39;right&#39;.</p>
+<p>Default is &#39;left&#39;.</p>
 </div>
                     </td>
                 </tr>
@@ -303,7 +350,7 @@ <h3 id="outputs">Outputs</h3>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/component/form-model/form-model.component.ts:30</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/app/component/form-model/form-model.component.ts:37</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -344,8 +391,8 @@ <h3 id="methods">
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="38"
-                                    class="link-to-prism">src/app/component/form-model/form-model.component.ts:38</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="45"
+                                    class="link-to-prism">src/app/component/form-model/form-model.component.ts:45</a></div>
                         </td>
                     </tr>
 
@@ -371,7 +418,8 @@ <h3 id="methods">
 
 
     <div class="tab-pane fade  tab-source-code" id="source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, EventEmitter, Input, Output } from &#x27;@angular/core&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { CommonModule } from &#x27;@angular/common&#x27;;
+import { Component, EventEmitter, Input, Output } from &#x27;@angular/core&#x27;;
 
 /**
  * A reusable modal component for forms.
@@ -381,7 +429,7 @@ <h3 id="methods">
  */
 @Component({
   selector: &#x27;app-form-model&#x27;,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: &#x27;./form-model.component.html&#x27;,
   styleUrl: &#x27;./form-model.component.css&#x27;
 })
@@ -392,7 +440,13 @@ <h3 id="methods">
    * 
    * This property should be provided by the parent component.
    */
-  @Input() label!: string;
+  @Input() label: string &#x3D; &#x27;&#x27;;
+
+  /** Alignment of the label text: &#x27;left&#x27;, &#x27;center&#x27;, or &#x27;right&#x27;.
+   * 
+   * Default is &#x27;left&#x27;.
+   */
+  @Input() labelAlignment: &#x27;left&#x27; | &#x27;center&#x27; | &#x27;right&#x27; &#x3D; &#x27;left&#x27;;
 
   /**
    * Event emitted when the modal is closed.
@@ -417,14 +471,25 @@ <h3 id="methods">
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center&quot;&gt;
-    &lt;div class&#x3D;&quot;bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 max-h-[70vh] flex flex-col shadow-xl&quot;&gt;
-        &lt;div class&#x3D;&quot;flex justify-between items-center mb-3&quot;&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center&quot; [ngStyle]&#x3D;&quot;{ &#x27;z-index&#x27;: &#x27;99&#x27;}&quot;&gt;
+    &lt;div class&#x3D;&quot;bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/3 flex flex-col shadow-xl relative&quot;&gt;
+
+        &lt;!-- Header with dynamic text alignment --&gt;
+        &lt;div class&#x3D;&quot;mb-3&quot; [ngClass]&#x3D;&quot;{
+        &#x27;text-left&#x27;: labelAlignment &#x3D;&#x3D;&#x3D; &#x27;left&#x27;,
+        &#x27;text-center&#x27;: labelAlignment &#x3D;&#x3D;&#x3D; &#x27;center&#x27;,
+        &#x27;text-right&#x27;: labelAlignment &#x3D;&#x3D;&#x3D; &#x27;right&#x27;
+    }&quot;&gt;
             &lt;h2 class&#x3D;&quot;text-lg font-bold text-[var(--color-text)]&quot;&gt;
                 {{ label }}
             &lt;/h2&gt;
-            &lt;button (click)&#x3D;&quot;closeModel()&quot; class&#x3D;&quot;text-[var(--color-red)] font-bold text-xl&quot;&gt;&amp;times;&lt;/button&gt;
         &lt;/div&gt;
+
+        &lt;!-- Close Button (absolute top-right) --&gt;
+        &lt;button (click)&#x3D;&quot;closeModel()&quot; class&#x3D;&quot;absolute top-4 right-4 text-[var(--color-red)] font-bold text-xl&quot;&gt;
+            &amp;times;
+        &lt;/button&gt;
+
         &lt;ng-content&gt;&lt;/ng-content&gt;
     &lt;/div&gt;
 &lt;/div&gt;</code></pre>
@@ -456,7 +521,7 @@ <h3 id="methods">
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div class="fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">    <div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 max-h-[70vh] flex flex-col shadow-xl">        <div class="flex justify-between items-center mb-3">            <h2 class="text-lg font-bold text-[var(--color-text)]">                {{ label }}            </h2>            <button (click)="closeModel()" class="text-[var(--color-red)] font-bold text-xl">&times;</button>        </div>        <ng-content></ng-content>    </div></div></div>'
+        var COMPONENT_TEMPLATE = '<div><div class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center" [ngStyle]="{ \'z-index\': \'99\'}">    <div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/3 flex flex-col shadow-xl relative">        <!-- Header with dynamic text alignment -->        <div class="mb-3" [ngClass]="{        \'text-left\': labelAlignment === \'left\',        \'text-center\': labelAlignment === \'center\',        \'text-right\': labelAlignment === \'right\'    }">            <h2 class="text-lg font-bold text-[var(--color-text)]">                {{ label }}            </h2>        </div>        <!-- Close Button (absolute top-right) -->        <button (click)="closeModel()" class="absolute top-4 right-4 text-[var(--color-red)] font-bold text-xl">            &times;        </button>        <ng-content></ng-content>    </div></div></div>'
     var COMPONENTS = [{'name': 'AddExpenseComponent', 'selector': 'app-add-expense'},{'name': 'AiComponent', 'selector': 'app-ai'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BudgetComponent', 'selector': 'app-budget'},{'name': 'CalendarComponent', 'selector': 'app-calendar'},{'name': 'CategoryDropdownComponent', 'selector': 'app-category-dropdown'},{'name': 'DownloadComponentComponent', 'selector': 'app-download-component'},{'name': 'ExpenseDetailsModalComponent', 'selector': 'app-expense-details-modal'},{'name': 'ExpenseListComponent', 'selector': 'app-expense-list'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FormModelComponent', 'selector': 'app-form-model'},{'name': 'GlobalLoaderComponent', 'selector': 'app-global-loader'},{'name': 'GraphsComponent', 'selector': 'app-graphs'},{'name': 'HamburgerMenuComponent', 'selector': 'app-hamburger-menu'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'InstallAppPopupComponentComponent', 'selector': 'app-install-app-popup-component'},{'name': 'ListExpensesComponent', 'selector': 'app-list-expenses'},{'name': 'MusicComponent', 'selector': 'app-music'},{'name': 'NavbarComponent', 'selector': 'app-navbar'},{'name': 'PieChartComponent', 'selector': 'app-pie-chart'},{'name': 'SearchButtonComponent', 'selector': 'app-search-button'},{'name': 'SettingItemComponent', 'selector': 'app-setting-item'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'TemplatePlaygroundComponent', 'selector': 'template-playground-root'},{'name': 'ToastComponent', 'selector': 'app-toast'}];
     var DIRECTIVES = [];
     var ACTUAL_COMPONENT = {'name': 'FormModelComponent'};