Alert

import { Component } from '@angular/core';
import {
  AvAlertImports,
  AvButtonComponent,
  AvCloseButtonComponent,
  AvSpinnerComponent,
} from '@avesra/angular';

@Component({
  selector: 'app-alert-basic-demo',
  imports: [
    AvAlertImports,
    AvButtonComponent,
    AvCloseButtonComponent,
    AvSpinnerComponent,
  ],
  template: `<div class="grid w-full max-w-xl gap-4">
      <!-- Default - General information -->
      <div av-alert>
        <div av-alert-indicator></div>
        <div av-alert-content>
          <p av-alert-title>New features available</p>
          <span av-alert-description>
            Check out our latest updates including dark mode support and improved accessibility
            features.
          </span>
        </div>
      </div>

      <!-- Accent - Important information with action -->
      <div av-alert status="accent">
        <div av-alert-indicator></div>
        <div av-alert-content>
          <p av-alert-title>Update available</p>
          <span av-alert-description>
            A new version of the application is available. Please refresh to get the latest features
            and bug fixes.
          </span>
          <button class="mt-2 sm:hidden" av-button size="sm" variant="primary">Refresh</button>
        </div>
        <button class="hidden sm:block" av-button size="sm" variant="primary">Refresh</button>
      </div>

      <!-- Danger - Error with detailed steps -->
      <div av-alert status="danger">
        <div av-alert-indicator></div>
        <div av-alert-content>
          <p av-alert-title>Unable to connect to server</p>
          <span av-alert-description>
            We're experiencing connection issues. Please try the following:
            <ul class="mt-2 list-inside list-disc space-y-1 text-sm">
              <li>Check your internet connection</li>
              <li>Refresh the page</li>
              <li>Clear your browser cache</li>
            </ul>
          </span>
          <button class="mt-2 sm:hidden" av-button size="sm" variant="danger">Retry</button>
        </div>
        <button class="hidden sm:block" av-button size="sm" variant="danger">Retry</button>
      </div>

      <!-- Without description -->
      <div av-alert status="success">
        <div av-alert-indicator></div>
        <div av-alert-content>
          <p av-alert-title>Profile updated successfully</p>
        </div>
        <button av-close-button aria-label="Dismiss"></button>
      </div>

      <!-- Custom indicator - Loading state -->
      <div av-alert status="accent">
        <div av-alert-indicator>
          <span av-spinner size="sm"></span>
        </div>
        <div av-alert-content>
          <p av-alert-title>Processing your request</p>
          <span av-alert-description>
            Please wait while we sync your data. This may take a few moments.
          </span>
        </div>
      </div>

      <!-- Without close button -->
      <div av-alert status="warning">
        <div av-alert-indicator></div>
        <div av-alert-content>
          <p av-alert-title>Scheduled maintenance</p>
          <span av-alert-description>
            Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for
            scheduled maintenance.
          </span>
        </div>
      </div>
    </div>`,
})
export class AlertBasicDemo {}

import { Component } from '@angular/core';
import {
  AvAlertImports,
  AvButtonComponent,
  AvCloseButtonComponent,
} from '@avesra/angular';

@Component({
  selector: 'app-alert-custom-styles-demo',
  imports: [
    AvAlertImports,
    AvButtonComponent,
    AvCloseButtonComponent,
  ],
  template: `<div class="w-full max-w-xl">
      <div
        av-alert
        status="warning"
        class="relative overflow-hidden rounded-xl border border-warning/20 bg-linear-to-br from-warning/10 via-surface to-surface-secondary shadow-sm dark:border-warning/30 dark:from-warning/15 dark:via-surface dark:to-warning/5"
      >
        <div
          aria-hidden="true"
          class="pointer-events-none absolute -top-8 -right-8 size-28 rounded-full bg-warning/15 blur-2xl dark:bg-warning/25"
        ></div>
        <div av-alert-indicator class="relative text-warning"></div>
        <div av-alert-content class="relative">
          <p av-alert-title>Payment method expires soon</p>
          <span av-alert-description>
            Your Visa ending in 4242 expires on March 28. Update billing to avoid interrupting your
            Pro subscription.
          </span>
          <button class="mt-3 sm:hidden" av-button size="sm" variant="tertiary" type="button">
            Update billing
          </button>
        </div>
        <button
          class="relative hidden shrink-0 sm:inline-flex"
          av-button
          size="sm"
          variant="tertiary"
          type="button"
        >
          Update billing
        </button>
        <button av-close-button class="relative" aria-label="Dismiss"></button>
      </div>
    </div>`,
})
export class AlertCustomStylesDemo {}