maverick-wave 3.0.0

package/src/partials/item-lists-container.html

@@ -0,0 +1,413 @@
+<h3 class="mw-section-subtitle">Item Lists</h3>
+
+<div class="mw-grid-2-lg">
+  <div>
+    <h4 class="mw-mb-3">Interactive Card List</h4>
+    <div class="mw-item-list-cards mw-mb-6">
+      <div class="mw-card mw-card-simple">Card with hover lift</div>
+      <div class="mw-card mw-card-simple">Another hoverable card</div>
+      <div class="mw-card mw-card-simple">Third interactive element</div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Menu Style List</h4>
+    <div class="mw-item-list-menu mw-mb-6">
+      <div>🏠 Dashboard</div>
+      <div>📊 Analytics</div>
+      <div>👥 Team Management</div>
+      <div>⚙️ Settings</div>
+      <div>❓ Help & Support</div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Sliding Border List</h4>
+    <div class="mw-item-list-slide mw-mb-6">
+      <div>
+        <strong>Dashboard Overview</strong>
+        <p class="mw-text-sm mw-text-muted mw-mb-0">
+          Monitor your key metrics and performance indicators.
+        </p>
+      </div>
+      <div>
+        <strong>Analytics Reports</strong>
+        <p class="mw-text-sm mw-text-muted mw-mb-0">
+          Detailed insights into your data and user behavior.
+        </p>
+      </div>
+      <div>
+        <strong>Settings & Preferences</strong>
+        <p class="mw-text-sm mw-text-muted mw-mb-0">
+          Customize your experience and configure options.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Sliding Border List - Secondary</h4>
+    <div class="mw-item-list-slide mw-item-list-slide-secondary mw-mb-6">
+      <div>
+        <strong>Dashboard Overview</strong>
+        <p class="mw-text-sm mw-text-muted mw-mb-0">
+          Monitor your key metrics and performance indicators.
+        </p>
+      </div>
+      <div>
+        <strong>Analytics Reports</strong>
+        <p class="mw-text-sm mw-text-muted mw-mb-0">
+          Detailed insights into your data and user behavior.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Compact List</h4>
+    <div class="mw-item-list-compact mw-mb-6">
+      <div>Quick Settings</div>
+      <div>Account Preferences</div>
+      <div>
+        Privacy Options
+        <div class="mw-item-list-compact">
+          <div>Data Collection</div>
+          <div>Cookie Preferences</div>
+          <div>Third-party Services</div>
+          <div>Advanced Privacy</div>
+        </div>
+      </div>
+      <div>
+        Notification Settings
+        <div class="mw-item-list-compact">
+          <div>Email Notifications</div>
+          <div>Push Notifications</div>
+          <div>SMS Alerts</div>
+          <div>Desktop Notifications</div>
+        </div>
+      </div>
+      <div>Security & Login</div>
+    </div>
+  </div>
+</div>
+
+<!-- New Checkbox Lists Section -->
+<div class="mw-grid-3-lg">
+  <div>
+    <h4 class="mw-mb-3">Basic Checkbox List</h4>
+    <ul class="mw-item-list-checkbox">
+      <li onclick="toggleCheckbox(this)">
+        <div class="mw-checkbox">
+          <input type="checkbox" id="task-mgmt" />
+          <label for="task-mgmt" class="mw-checkbox-box"></label>
+          <div class="mw-checkbox-content">
+            <h4 class="mw-checkbox-header">📋 Task Management</h4>
+            <p class="mw-checkbox-label">
+              Organize and track your daily tasks and projects
+            </p>
+          </div>
+        </div>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <div class="mw-checkbox">
+          <input type="checkbox" id="analytics" checked />
+          <label for="analytics" class="mw-checkbox-box"></label>
+          <div class="mw-checkbox-content">
+            <h4 class="mw-checkbox-header">📊 Analytics Dashboard</h4>
+            <p class="mw-checkbox-label">
+              View detailed reports and performance metrics
+            </p>
+          </div>
+        </div>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <div class="mw-checkbox">
+          <input type="checkbox" id="simple-option" />
+          <label for="simple-option" class="mw-checkbox-box"></label>
+          <div class="mw-checkbox-content">
+            <p class="mw-checkbox-label">📧 Email Notifications</p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Large Checkbox List</h4>
+    <ul class="mw-item-list-checkbox mw-item-list-checkbox-large mw-mb-6">
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-lg">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🎯 Project Alpha</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-lg">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🚀 Project Beta</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)" class="mw-selected">
+        <label class="mw-checkbox mw-checkbox-lg">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">⭐ Project Gamma</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-lg">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔥 Project Delta</span>
+        </label>
+      </li>
+    </ul>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-3">Secondary Checkbox List</h4>
+    <ul class="mw-item-list-checkbox mw-item-list-checkbox-secondary mw-mb-6">
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-secondary">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">Feature Request #1</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-secondary">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">Feature Request #2</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)" class="mw-selected">
+        <label class="mw-checkbox mw-checkbox-secondary">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">Feature Request #3</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox mw-checkbox-secondary">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">Feature Request #4</span>
+        </label>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="mw-grid-1 mw-mb-4">
+  <div>
+    <h4 class="mw-mb-3">Scrollable Checkbox List</h4>
+    <ul class="mw-item-list-checkbox-scroll mw-mb-4">
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🎨 Design System Components</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🛠️ Development Tools</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)" class="mw-selected">
+        <label class="mw-checkbox">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">📱 Mobile Responsive Design</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔐 Authentication System</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">📊 Analytics Integration</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🌐 Multi-language Support</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">⚡ Performance Optimization</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔄 Real-time Updates</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🎯 A/B Testing Framework</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🚀 Deployment Pipeline</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔍 Advanced Search Features</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">💾 Data Export Tools</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔔 Notification Center</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🏗️ Modular Architecture</span>
+        </label>
+      </li>
+      <li onclick="toggleCheckbox(this)">
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
+          <span class="mw-checkbox-label">🔧 Custom Configuration</span>
+        </label>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="mw-grid-1 mw-mb-4">
+  <div>
+    <h4 class="mw-mb-3">Basic Scrollable List</h4>
+    <div class="mw-item-list-scroll mw-mb-4">
+      <div>Dashboard Overview</div>
+      <div>User Management</div>
+      <div>Analytics & Reports</div>
+      <div>Settings & Configuration</div>
+      <div>Security Center</div>
+      <div>API Documentation</div>
+      <div>Billing & Subscriptions</div>
+      <div>Support & Help</div>
+      <div>Integration Options</div>
+      <div>Data Export Tools</div>
+      <div>Audit Logs</div>
+      <div>Team Collaboration</div>
+      <div>Custom Fields</div>
+      <div>Workflow Automation</div>
+      <div>Notification Center</div>
+      <div>Performance Monitoring</div>
+      <div>Backup & Recovery</div>
+      <div>Advanced Analytics</div>
+    </div>
+  </div>
+</div>
+
+<div class="mw-grid-4-lg">
+  <div>
+    <h4 class="mw-mb-3">Small Height</h4>
+    <div class="mw-item-list-scroll-sm mw-mb-4">
+      <div>Quick Action 1</div>
+      <div>Quick Action 2</div>
+      <div>Quick Action 3</div>
+      <div>Quick Action 4</div>
+      <div>Quick Action 5</div>
+      <div>Quick Action 6</div>
+      <div>Quick Action 7</div>
+      <div>Quick Action 8</div>
+      <div>Quick Action 9</div>
+      <div>Quick Action 10</div>
+    </div>
+  </div>
+  <div>
+    <h4 class="mw-mb-3">Custom Height (160px)</h4>
+    <div class="mw-item-list-scroll mw-mb-6" style="max-height: 160px">
+      <div>Custom sized container</div>
+      <div>Flexible height control</div>
+      <div>Adaptable to needs</div>
+      <div>Perfect for any use case</div>
+      <div>Responsive design</div>
+      <div>Scalable solution</div>
+      <div>Versatile component</div>
+    </div>
+  </div>
+  <div>
+    <h4 class="mw-mb-3">Large Height</h4>
+    <div class="mw-item-list-scroll-lg mw-mb-4">
+      <div>Quick Action 1</div>
+      <div>Quick Action 2</div>
+      <div>Quick Action 3</div>
+      <div>Quick Action 4</div>
+      <div>Quick Action 5</div>
+      <div>Quick Action 6</div>
+      <div>Quick Action 7</div>
+      <div>Quick Action 8</div>
+      <div>Quick Action 9</div>
+      <div>Quick Action 10</div>
+      <div>Quick Action 11</div>
+      <div>Quick Action 12</div>
+      <div>Quick Action 13</div>
+      <div>Quick Action 14</div>
+    </div>
+  </div>
+  <div>
+    <h4 class="mw-mb-3">Xtra Large Height</h4>
+    <div class="mw-item-list-scroll-xl mw-mb-4">
+      <div>Quick Action 1</div>
+      <div>Quick Action 2</div>
+      <div>Quick Action 3</div>
+      <div>Quick Action 4</div>
+      <div>Quick Action 5</div>
+      <div>Quick Action 6</div>
+      <div>Quick Action 7</div>
+      <div>Quick Action 8</div>
+      <div>Quick Action 9</div>
+      <div>Quick Action 10</div>
+      <div>Quick Action 11</div>
+      <div>Quick Action 12</div>
+      <div>Quick Action 13</div>
+      <div>Quick Action 14</div>
+      <div>Quick Action 15</div>
+      <div>Quick Action 16</div>
+      <div>Quick Action 17</div>
+      <div>Quick Action 18</div>
+    </div>
+  </div>
+</div>

package/src/partials/login-container.html

@@ -0,0 +1,61 @@
+<h3 class="mw-section-subtitle">Login</h3>
+
+<p class="mw-text-muted mw-my-0">
+  Click "Login" to simulate a failure and see the red border. It will
+  automatically clear after 4 seconds.
+</p>
+
+<div class="mw-mb-4">
+  <div class="mw-login mw-my-8">
+    <div class="mw-login-logo">
+      <img src="https://m1well.com/images/header_logo.svg" alt="Your Logo" />
+    </div>
+    <div class="mw-login-message">
+      This is an internal area that can only be accessed with a valid account.
+    </div>
+    <div class="mw-form" id="login-form">
+      <div class="mw-grid-1">
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="login-email"
+            >Email</label
+          >
+          <div class="mw-input-group">
+            <span class="mw-input-group-prefix"
+              ><i class="fas fa-envelope"></i
+            ></span>
+            <input
+              id="login-email"
+              type="email"
+              class="mw-input"
+              placeholder="you@example.com"
+              required
+            />
+          </div>
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="login-password"
+            >Password</label
+          >
+          <div class="mw-input-group">
+            <span class="mw-input-group-prefix"
+              ><i class="fas fa-lock"></i
+            ></span>
+            <input
+              id="login-password"
+              type="password"
+              class="mw-input"
+              placeholder="••••••••"
+              required
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="mw-form-actions mw-form-actions-full-width">
+        <button type="submit" class="mw-btn mw-btn-primary">
+          <i class="fas fa-sign-in-alt"></i> Login
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/meta-info-container.html

@@ -0,0 +1,16 @@
+<h3 class="mw-section-subtitle">Meta Info</h3>
+
+<div class="mw-meta-header">
+  <div class="mw-meta-item">
+    <i class="fas fa-list"></i>
+    <span>Amount: 5</span>
+  </div>
+  <div class="mw-meta-item">
+    <i class="fas fa-play"></i>
+    <span>Started: 1</span>
+  </div>
+  <div class="mw-meta-item">
+    <i class="fas fa-ban"></i>
+    <span>Deactivated: 1</span>
+  </div>
+</div>

package/src/partials/modals-container.html

@@ -0,0 +1,136 @@
+<h3 class="mw-section-subtitle">Simple Modals</h3>
+<p class="mw-text-muted mw-mb-6">
+  JavaScript-controlled modals - perfect for e.g. Angular apps using class
+  toggling.
+</p>
+
+<!-- Modal Triggers -->
+<div class="mw-grid-3 mw-mb-8">
+  <button onclick="openModal('modal-basic')" class="mw-btn mw-btn-primary">
+    Open Basic Modal
+  </button>
+  <button onclick="openModal('modal-confirm')" class="mw-btn mw-btn-secondary">
+    Open Confirmation
+  </button>
+  <button onclick="openModal('modal-form')" class="mw-btn mw-btn-outline">
+    Open Form Modal
+  </button>
+</div>
+
+<!-- Basic Modal -->
+<div id="modal-basic" class="mw-modal-overlay">
+  <div class="mw-modal">
+    <div class="mw-modal-header">
+      <h4 class="mw-modal-title">JavaScript Modal</h4>
+      <button onclick="closeModal('modal-basic')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <p>This modal works with minimal JavaScript - perfect for Angular!</p>
+      <p>
+        Uses CSS classes for show/hide animations that you can easily control
+        from Angular components.
+      </p>
+    </div>
+    <div class="mw-modal-footer">
+      <button onclick="closeModal('modal-basic')" class="mw-btn mw-btn-outline">
+        Cancel
+      </button>
+      <button onclick="closeModal('modal-basic')" class="mw-btn mw-btn-primary">
+        Confirm
+      </button>
+    </div>
+  </div>
+  <!-- Click outside to close -->
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-basic')"></div>
+</div>
+
+<!-- Confirmation Modal -->
+<div id="modal-confirm" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-sm">
+    <div class="mw-modal-header">
+      <h3 class="mw-modal-title">Delete Confirmation</h3>
+      <button onclick="closeModal('modal-confirm')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <p class="mw-text-center">
+        <strong>Are you really sure you want to delete this item?</strong>
+      </p>
+      <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
+    </div>
+    <div class="mw-modal-footer">
+      <button
+        onclick="closeModal('modal-confirm')"
+        class="mw-btn mw-btn-outline"
+      >
+        Cancel
+      </button>
+      <button
+        onclick="closeModal('modal-confirm')"
+        class="mw-btn mw-btn-secondary"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-confirm')"></div>
+</div>
+
+<!-- Form Modal -->
+<div id="modal-form" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-lg">
+    <div class="mw-modal-header">
+      <h3 class="mw-modal-title">Contact Form</h3>
+      <button onclick="closeModal('modal-form')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <div class="mw-mb-4">
+        <label for="modal-name">
+          <span>Name</span>
+          <input
+            id="modal-name"
+            type="text"
+            class="mw-input-sm"
+            placeholder="Your Name"
+          />
+        </label>
+      </div>
+      <div class="mw-mb-4">
+        <label for="modal-email">
+          <span>Email</span>
+          <input
+            id="modal-email"
+            type="email"
+            class="mw-input-sm"
+            placeholder="Your Email"
+          />
+        </label>
+      </div>
+      <div class="mw-mb-4">
+        <label for="modal-message">
+          <span>Message</span>
+          <textarea
+            id="modal-message"
+            rows="5"
+            class="mw-textarea mw-textarea-sm"
+            placeholder="Your message..."
+          ></textarea>
+        </label>
+      </div>
+    </div>
+    <div class="mw-modal-footer">
+      <button onclick="closeModal('modal-form')" class="mw-btn mw-btn-outline">
+        Cancel
+      </button>
+      <button onclick="closeModal('modal-form')" class="mw-btn mw-btn-primary">
+        Send Message
+      </button>
+    </div>
+  </div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-form')"></div>
+</div>

package/src/partials/pagination-container.html

@@ -0,0 +1,27 @@
+<h3 class="mw-section-subtitle">Simple Pagination</h3>
+<p class="mw-text-muted">
+  This is without functionality here - but you can easily use it with vanilla JS
+  or frameworks like Angular etc.
+</p>
+
+<div class="mw-pagination" id="weekPagination">
+  <div class="mw-pagination-header">
+    <button class="mw-pagination-nav" id="prevBtn" onclick="navigateWeek(-1)">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+
+    <h3 class="mw-pagination-title" id="weekTitle">Week 10</h3>
+
+    <button class="mw-pagination-nav" id="nextBtn" onclick="navigateWeek(1)">
+      <i class="fas fa-arrow-right"></i>
+    </button>
+  </div>
+
+  <div class="mw-pagination-content" id="weekContent">
+    <h4>Week 10 Content</h4>
+    <p>
+      This is the content for week 10. You can put any content here - text,
+      forms, images, etc.
+    </p>
+  </div>
+</div>