syscom-master-admin-ui/src/app/shared/components/modal/modal.html

<!-- @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)">
  <div class="fixed inset-0 pointer-events-auto bg-[#32325180] dark:bg-[#323251cc]" aria-hidden="true"
    (mousedown)="onBackdropClick($event)"></div>

  <div [class]="modalBoxClass()" role="dialog" aria-modal="true" [attr.aria-label]="title()" tabindex="-1"
    (mousedown)="$event.stopPropagation()">
    <div class="ti-modal-content border-defaultborder dark:border-defaultborder max-h-[90vh] overflow-hidden">
      @if (showHeader()) {
      <div class="ti-modal-header border-defaultborder dark:border-defaultborder">
        <div class="min-w-0">
          <h6 class="ti-modal-title m-0">
            {{ title() }}
          </h6>
        </div>

        @if (showCloseButton()) {
        <button type="button" class="ti-modal-close-btn cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
          aria-label="Close modal" [disabled]="loading()" (click)="close()">
          <i class="ri-close-line leading-none"></i>
        </button>
        }
      </div>
      }

      <div class="ti-modal-body px-4 min-h-0 overflow-y-auto">
        @if (subtitle()) {
        <p class="mb-4 text-[0.8125rem] leading-5 text-textmuted">
          {{ subtitle() }}
        </p>
        }

        <ng-content />
      </div>

      @if (showFooter()) {
      <div class="ti-modal-footer border-defaultborder dark:border-defaultborder">
        @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>
} -->

@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>
}