OmegaML56/authnest-secure-user-sanctuary

1class DataModal extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        .modal-overlay {7          position: fixed;8          top: 0;9          left: 0;10          right: 0;11          bottom: 0;12          background-color: rgba(0, 0, 0, 0.5);13          display: flex;14          align-items: center;15          justify-content: center;16          z-index: 1000;17          opacity: 0;18          pointer-events: none;19          transition: opacity 0.3s ease;20        }21        22        .modal-overlay.active {23          opacity: 1;24          pointer-events: all;25        }26        27        .modal-content {28          background-color: white;29          border-radius: 0.5rem;30          width: 90%;31          max-width: 500px;32          padding: 1.5rem;33          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);34          transform: translateY(20px);35          transition: transform 0.3s ease;36        }37        38        .modal-overlay.active .modal-content {39          transform: translateY(0);40        }41        42        .modal-header {43          display: flex;44          justify-content: space-between;45          align-items: center;46          margin-bottom: 1rem;47          border-bottom: 1px solid #e5e7eb;48          padding-bottom: 1rem;49        }50        51        .modal-title {52          font-size: 1.25rem;53          font-weight: 600;54          color: #111827;55          margin: 0;56        }57        58        .close-btn {59          background: none;60          border: none;61          cursor: pointer;62          color: #6b7280;63          padding: 0.25rem;64        }65        66        .modal-body {67          margin-bottom: 1.5rem;68        }69        70        .detail-row {71          margin-bottom: 0.75rem;72        }73        74        .detail-label {75          font-weight: 500;76          color: #374151;77          margin-bottom: 0.25rem;78        }79        80        .detail-value {81          color: #4b5563;82          background-color: #f9fafb;83          padding: 0.5rem;84          border-radius: 0.25rem;85          word-break: break-word;86        }87      </style>88      <div class="modal-overlay">89        <div class="modal-content">90          <div class="modal-header">91            <h3 class="modal-title">Entry Details</h3>92            <button class="close-btn" id="close-modal">93              <i data-feather="x"></i>94            </button>95          </div>96          <div class="modal-body" id="modal-body">97            <!-- Details will be inserted here -->98          </div>99        </div>100      </div>101    `;102    103    this.closeModal = this.closeModal.bind(this);104    this.shadowRoot.getElementById('close-modal').addEventListener('click', this.closeModal);105    feather.replace();106  }107 108  showModal(entry) {109    const modalBody = this.shadowRoot.getElementById('modal-body');110    modalBody.innerHTML = `111      <div class="detail-row">112        <div class="detail-label">Company Name</div>113        <div class="detail-value">${entry.companyName}</div>114      </div>115      <div class="detail-row">116        <div class="detail-label">Employee Count</div>117        <div class="detail-value">${entry.employeeCount}</div>118      </div>119      <div class="detail-row">120        <div class="detail-label">Date</div>121        <div class="detail-value">${entry.date}</div>122      </div>123      <div class="detail-row">124        <div class="detail-label">Additional Notes</div>125        <div class="detail-value">${entry.notes || 'N/A'}</div>126      </div>127    `;128    129    this.shadowRoot.querySelector('.modal-overlay').classList.add('active');130    document.body.style.overflow = 'hidden';131  }132 133  closeModal() {134    this.shadowRoot.querySelector('.modal-overlay').classList.remove('active');135    document.body.style.overflow = '';136  }137}138 139customElements.define('data-modal', DataModal);