new changes implemented ui

2026-07-22 17:06:24 +05:30
parent 7c4e34e478
commit 7f8ac71558
18 changed files with 24348 additions and 1286 deletions
@@ -1,4 +1,4 @@
-@if (open()) {
+<!-- @if (open()) {
 <div
  class="hs-overlay open hs-overlay-backdrop-open:!bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc] ti-modal pointer-events-none"
  (mousedown)="onBackdropClick($event)">
@@ -51,4 +51,126 @@
    </div>
  </div>
 </div>
-}
+} -->
+
+@if (open()) {
+<div
+  class="hs-overlay modal-overlay"
+  (mousedown)="onBackdropClick($event)">
+
+  <!-- Backdrop -->
+  <div
+    class="modal-backdrop"
+    aria-hidden="true"
+    (mousedown)="onBackdropClick($event)">
+  </div>
+
+  <!-- Modal -->
+  <div
+    [class]="modalBoxClass() + ' modern-modal-wrapper'"
+    role="dialog"
+    aria-modal="true"
+    [attr.aria-label]="title()"
+    tabindex="-1"
+    (mousedown)="$event.stopPropagation()">
+
+    <div class="modern-modal">
+
+      @if (showHeader()) {
+      <div class="modern-modal-header">
+
+        <!-- Decorative Background -->
+        <div class="modal-header-bg"></div>
+
+        <div class="modal-header-content">
+
+          <div class="modal-header-left">
+
+            <!-- Header Icon -->
+            <!-- <div class="modal-icon">
+
+              <div class="modal-icon-inner">
+                <i class="ri-layout-grid-fill"></i>
+              </div>
+
+            </div> -->
+
+            <!-- Title -->
+            <div class="modal-title-wrapper">
+
+              <h6 class="modern-modal-title">
+                {{ title() }}
+              </h6>
+
+              @if (subtitle()) {
+              <p class="modern-modal-subtitle">
+                {{ subtitle() }}
+              </p>
+              }
+
+            </div>
+
+          </div>
+
+          @if (showCloseButton()) {
+          <button
+            type="button"
+            class="modern-close-btn"
+            aria-label="Close modal"
+            [disabled]="loading()"
+            (click)="close()">
+
+            <i class="ri-close-line"></i>
+
+          </button>
+          }
+
+        </div>
+
+      </div>
+      }
+
+      <!-- Body -->
+      <div class="modern-modal-body">
+
+        <div class="modal-content-wrapper">
+
+          <ng-content />
+
+        </div>
+
+      </div>
+
+      <!-- Footer -->
+      @if (showFooter()) {
+      <div class="modern-modal-footer">
+
+        @if (showCancelButton()) {
+        <app-button
+          action="cancel"
+          [label]="cancelLabel()"
+          [showIcon]="true"
+          [disabled]="loading()"
+          (buttonClicked)="close()" />
+        }
+
+        @if (showSubmitButton()) {
+        <app-button
+          [action]="submitAction()"
+          [label]="submitLabel()"
+          [loadingLabel]="loadingLabel()"
+          [showIcon]="true"
+          [loading]="loading()"
+          [disabled]="submitDisabled()"
+          (buttonClicked)="submit()" />
+        }
+
+      </div>
+      }
+
+    </div>
+
+  </div>
+
+</div>
+}