### Demo Application Setup

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Instructions for setting up and running the demo application, including cloning the repository, installing dependencies, and starting the development server.

```bash
# Clone the repository
git clone https://github.com/dotted-labs/ngx-tailwind-modal.git
cd ngx-tailwind-modal

# Install dependencies
npm install

# Start demo application
ng serve demo
```

--------------------------------

### Install @dotted-labs/ngx-tailwind-modal

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Installs the ngx-tailwind-modal library using npm.

```bash
npm install @dotted-labs/ngx-tailwind-modal
```

--------------------------------

### Installation

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Installs the ngx-tailwind-modal package using npm.

```bash
npm install @dotted-labs/ngx-tailwind-modal
```

--------------------------------

### Install Dependencies

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Installs Tailwind CSS and DaisyUI, which are required for styling the modals.

```bash
npm install tailwindcss daisyui
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Installs the required peer dependencies, tailwindcss and daisyui.

```bash
npm install tailwindcss daisyui
```

--------------------------------

### Run Demo Application

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Command to start the demo application, allowing users to see the ngx-tailwind-modal library in action.

```bash
npm run start:demo
```

--------------------------------

### Provider Setup

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Configures the NgxTailwindModalService within the Angular application's providers.

```typescript
// app.config.ts
import { provideNgxTailwindModal } from '@dotted-labs/ngx-tailwind-modal';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgxTailwindModal()
  ]
};
```

--------------------------------

### Modal Content Component Example

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

An example of a custom modal content component that extends NgxTailwindModalViewComponent and interacts with its modal instance.

```typescript
@Component({
  template: `
    <div class="modal-box">
      <h3>Enhanced Modal</h3>
      <p>Modal ID: {{ modalId }}</p>
      <button (click)="closeModal()">Close</button>
    </div>
  `
})
export class MyModalComponent extends NgxTailwindModalViewComponent {
  closeModal() {
    this.modalInstance.close();
  }
}
```

--------------------------------

### Data Passing in Modals

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Demonstrates how to set and get data for modals using the modal service. This is crucial for passing information between components and modal instances.

```typescript
this.modalService.setModalData({ user: 'John' }, 'modal-id');

// Get data in modal component
ngOnInit() {
  const data = this.modalInstance.getData();
}
```

--------------------------------

### Programmatic Modal Creation

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Demonstrates how to programmatically create and open a modal using the NgxTailwindModalService.

```typescript
import { NgxTailwindModalService } from '@dotted-labs/ngx-tailwind-modal';

constructor(private modalService: NgxTailwindModalService) {}

openModal() {
  this.modalService
    .create('my-modal', MyModalComponent, {
      dismissable: true,
      customClass: 'custom-modal'
    })
    .open();
}
```

--------------------------------

### ngx-tailwind-modal Dependencies

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Specifies the required dependencies for using the ngx-tailwind-modal library, including Angular, Tailwind CSS, DaisyUI, and RxJS versions.

```APIDOC
Dependencies:

- Angular 19+
- Tailwind CSS 4.x
- DaisyUI 5.x
- RxJS 7.x
```

--------------------------------

### INgxTailwindModalOptions Interface

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Defines the interface for optional configuration settings when creating or managing modals.

```typescript
interface INgxTailwindModalOptions {
  closable?: boolean;
  escapable?: boolean; 
  dismissable?: boolean;
  customClass?: string;
  backdrop?: boolean;
  force?: boolean;
  hideDelay?: number;
  autostart?: boolean;
  target?: string;
  ariaLabel?: string;
  ariaLabelledBy?: string;
  ariaDescribedBy?: string;
  refocus?: boolean;
}
```

--------------------------------

### Common Patterns for AI Agents with ngx-tailwind-modal

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Provides common patterns and best practices for AI agents interacting with the ngx-tailwind-modal library, covering modal creation, content components, data management, lifecycle handling, stack management, accessibility, and cleanup.

```APIDOC
Common Patterns for AI Agents:

1. Modal Creation: Always use unique IDs and proper options
2. Content Components: Extend NgxTailwindModalViewComponent for modal access
3. Data Management: Use setModalData/getModalData for state sharing
4. Lifecycle Handling: Subscribe to events for complex workflows
5. Stack Management: Use force parameter for modal priority
6. Accessibility: Always include ARIA attributes
7. Cleanup: Modals auto-cleanup on component destroy
```

--------------------------------

### DaisyUI Themes

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

All DaisyUI themes work automatically without additional setup. You can apply themes at the document level or to specific modal content using the `data-theme` attribute.

```html
<!-- Apply theme at document level - modal backdrop styles automatically -->
<html data-theme="dark">

<!-- Or apply theme to specific modal content -->
<div data-theme="cyberpunk" class="modal-box">
  <!-- Only content needs theme styling - modal structure is automatic -->
  <h3 class="font-bold text-lg">Cyberpunk Modal</h3>
  <p>Backdrop and positioning are handled by the library!</p>
</div>
```

--------------------------------

### Testing Considerations for ngx-tailwind-modal

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Lists key considerations for testing applications that use ngx-tailwind-modal, including mocking the service, testing lifecycle events, accessibility attributes, keyboard interactions, and browser event systems.

```APIDOC
Testing Considerations:

- Mock NgxTailwindModalService in tests
- Test modal lifecycle events
- Verify accessibility attributes
- Test keyboard interactions
- Mock browser event system for unit tests
```

--------------------------------

### Tailwind CSS and DaisyUI Configuration

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Shows the necessary configuration in `tailwind.config.js` to integrate ngx-tailwind-modal with Tailwind CSS and DaisyUI. This includes safelisting modal-related classes and including DaisyUI as a plugin.

```javascript
module.exports = {
  safelist: ['modal', 'modal-backdrop', 'modal-box'],
  plugins: [require('daisyui')]
};
```

--------------------------------

### Open Modal Example

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/demo/src/app/components/child-modal/child-modal.component.html

Demonstrates how to open the ngx-tailwind-modal component in an Angular application.

```TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<modal [isOpen]="isModalOpen" (onClose)="closeModal()"></modal>
             <button (click)="openModal()">Open Modal</button>',
})
export class AppComponent {
  isModalOpen = false;

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }
}
```

```HTML
<modal [isOpen]="isModalOpen" (onClose)="closeModal()"></modal>
<button (click)="openModal()">Open Modal</button>
```

--------------------------------

### ngx-tailwind-modal Stack Management

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Details the modal layering system, including the base z-index, auto-incrementing for stacking, focus management for the top modal, and keyboard event handling for closing the top modal.

```APIDOC
Stack Management:

Modal layering system with z-index management:
- Base z-index: 1041
- Auto-incrementing for stacked modals
- Top modal receives focus and keyboard events
- Escape key closes top modal only
```

--------------------------------

### ngx-tailwind-modal Accessibility Features

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Outlines the accessibility features provided by the library, such as ARIA attributes, focus trapping and restoration, keyboard navigation, role assignment, and screen reader compatibility.

```APIDOC
Accessibility Features:

- ARIA attributes support
- Focus trapping within modal
- Focus restoration after close
- Keyboard navigation (Escape, Tab)
- Role="dialog" assignment
- Screen reader compatible
```

--------------------------------

### NgxTailwindModalService API

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Provides the primary API for modal operations, including creation, basic operations, data management, stack inspection, and lifecycle management.

```typescript
create<T>(id: string, content: Content<T>, options?: INgxTailwindModalOptions): NgxTailwindModalComponent
open(id: string, force?: boolean): boolean
close(id: string): boolean
toggle(id: string, force?: boolean): boolean
closeAll(): void
setModalData(data: unknown, id: string, force?: boolean): boolean
getModalData(id: string): unknown
resetModalData(id: string): unknown | boolean
getModal(id: string): NgxTailwindModalComponent
getModalStack(): ModalInstance[]
getOpenedModals(): ModalInstance[]
getTopOpenedModal(): NgxTailwindModalComponent
getHigherIndex(): number
getModalStackCount(): number
removeModal(id: string): void
```

--------------------------------

### Opening Modals Programmatically

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Demonstrates how to open modals using the NgxTailwindModalService in Angular. Includes examples for opening a simple modal and a modal with data passed to it.

```typescript
import { Component, inject, ViewContainerRef } from '@angular/core';
import { NgxTailwindModalService } from '@dotted-labs/ngx-tailwind-modal';
import { ExampleModalComponent } from './example-modal.component';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `
    <div class="space-y-4 p-8">
      <button class="btn btn-primary" (click)="openSimpleModal()">
        Open Simple Modal
      </button>
      
      <button class="btn btn-secondary" (click)="openModalWithData()">
        Open Modal with Data
      </button>
    </div>
  `
})
export class DemoComponent {
  private readonly modalService = inject(NgxTailwindModalService);
  private readonly vcr = inject(ViewContainerRef);

  openSimpleModal() {
    this.modalService
      .create('example-modal', ExampleModalComponent, this.vcr, {
        dismissable: true,
        escapable: true
      })
      .open();
  }
  
  openModalWithData() {
    this.modalService
      .create('data-modal', ExampleModalComponent, this.vcr)
      .setData({ message: 'Hello from parent!', timestamp: Date.now() })
      .open();
  }
}
```

--------------------------------

### ModalInstance Interface

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

A wrapper interface that holds the ID and component reference for a modal instance.

```typescript
export class ModalInstance {
  id: string;
  modal: NgxTailwindModalComponent;
}
```

--------------------------------

### ngx-tailwind-modal Event System

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Lists the custom browser events emitted by the ngx-tailwind-modal library, prefixed with `ngx-tailwind-modal.`. These events can be used to track modal lifecycle states.

```APIDOC
Event System:

Custom browser events with prefix `ngx-tailwind-modal.`: 
- `ngx-tailwind-modal.create`
- `ngx-tailwind-modal.open`
- `ngx-tailwind-modal.close`
- `ngx-tailwind-modal.dismiss`
- `ngx-tailwind-modal.toggle`
- `ngx-tailwind-modal.delete`
```

--------------------------------

### Template Declaration of Modal

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

Shows how to declare a modal directly within an Angular template using the ngx-tailwind-modal component.

```html
<ngx-tailwind-modal 
  identifier="template-modal"
  [closable]="true"
  [dismissable]="true">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal Title</h3>
    <p>Modal content...</p>
  </div>
</ngx-tailwind-modal>
```

--------------------------------

### Enhanced Modal Component Example

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

An example of a custom modal component that extends `NgxTailwindModalViewComponent`, allowing direct control over the modal instance's methods like `close()` and `toggle()`.

```typescript
import { Component } from '@angular/core';
import { NgxTailwindModalViewComponent } from '@ngx-tailwind-modal';

@Component({
  selector: 'app-my-enhanced-modal',
  standalone: true,
  template: `
    <div class="modal-box">
      <h3 class="font-bold text-lg">Enhanced Modal</h3>
      <p class="py-4">Modal ID: {{ modalId }}</p>
      <p class="py-4">You can now control the modal from within the component!</p>
      <div class="modal-action">
        <button class="btn btn-secondary" (click)="closeModal()">Close</button>
        <button class="btn btn-primary" (click)="toggleModal()">Toggle</button>
      </div>
    </div>
  `,
})
export class MyEnhancedModalComponent extends NgxTailwindModalViewComponent {
  closeModal() {
    // Close the modal using the modal instance
    this.modalInstance.close();
  }

  toggleModal() {
    // Toggle the modal using the modal instance
    this.modalInstance.toggle();
  }

  // You can also access other modal methods like:
  // this.modalInstance.open()
  // this.modalInstance.setData(data)
  // this.modalInstance.getData()
}
```

--------------------------------

### Basic Modal Component Implementation

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

An example of a custom modal component that extends NgxTailwindModalViewComponent. It demonstrates how to close the modal and handle actions within the modal content.

```typescript
import { Component } from '@angular/core';
import { NgxTailwindModalViewComponent } from '@dotted-labs/ngx-tailwind-modal';

@Component({
  selector: 'app-example-modal',
  standalone: true,
  template: `
    <!-- Only content styling needed - modal structure is automatic -->
    <div class="modal-box">
      <h3 class="font-bold text-lg">Welcome!</h3>
      <p class="py-4">Focus on your content - the modal backdrop, positioning, and animations are handled automatically!</p>
      <div class="modal-action">
        <button class="btn btn-ghost" (click)="closeModal()">Cancel</button>
        <button class="btn btn-primary" (click)="confirmAction()">Confirm</button>
      </div>
    </div>
  `
})
export class ExampleModalComponent extends NgxTailwindModalViewComponent {
  closeModal() {
    this.modalInstance.close();
  }
  
  confirmAction() {
    // Perform action then close
    console.log('Action confirmed!');
    this.modalInstance.close();
  }
}
```

--------------------------------

### NgxTailwindModalComponent Properties and Methods

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

The core modal component with lifecycle management, configurable properties for appearance and behavior, accessibility attributes, and event handlers.

```typescript
Properties:
- identifier: string
- closable: boolean = true
- escapable: boolean = true
- dismissable: boolean = true
- customClass: string
- backdrop: boolean = true
- force: boolean = true
- hideDelay: number = 500
- autostart: boolean = false
- target: string
- refocus: boolean = true
- ariaLabel: string
- ariaLabelledBy: string
- ariaDescribedBy: string

Events:
- onOpen/onOpenFinished
- onClose/onCloseFinished
- onDismiss/onDismissFinished
- onEscape
- onDataAdded/onDataRemoved

Methods:
open(top?: boolean): NgxTailwindModalComponent
close(): NgxTailwindModalComponent
dismiss(e: MouseEvent): NgxTailwindModalComponent
toggle(top?: boolean): NgxTailwindModalComponent
setData(data: unknown, force?: boolean): NgxTailwindModalComponent
getData(): unknown
removeData(): NgxTailwindModalComponent
isVisible(): boolean
hasData(): boolean
```

--------------------------------

### NgxTailwindModalViewComponent Base Class

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llms.txt

A base class for custom modal content components, providing access to modal ID and instance for interaction.

```typescript
export class MyModalComponent extends NgxTailwindModalViewComponent {
  // Automatically provided:
  // this.modalId: string
  // this.modalInstance: NgxTailwindModalComponent
  
  closeModal() {
    this.modalInstance.close();
  }
}
```

--------------------------------

### Create a custom modal component with DaisyUI styles

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

Define a standalone Angular component to serve as the content of your modal. This example demonstrates a basic modal structure with DaisyUI classes and a close button.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-modal',
  standalone: true,

```

--------------------------------

### Manage Modals with NgxTailwindModalService

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

Demonstrates various methods provided by NgxTailwindModalService to open, close, toggle, get, set data, and create modals programmatically, offering full control over modal lifecycle.

```typescript
// Open a modal
this.modalService.open('myModal');

// Close a modal
this.modalService.close('myModal');

// Toggle a modal
this.modalService.toggle('myModal');

// Close all modals
this.modalService.closeAll();

// Get a modal instance
const modal = this.modalService.getModal('myModal');

// Set data to a modal
this.modalService.setModalData({ key: 'value' }, 'myModal');

// Get data from a modal
const data = this.modalService.getModalData('myModal');

// Create a modal programmatically
this.modalService.create('dynamicModal', MyComponent, viewContainerRef);
```

--------------------------------

### Development Commands

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Provides essential commands for building, testing, and linting the Angular library, as well as serving the demo application.

```bash
# Build library for production
ng build @dotted-labs/ngx-tailwind-modal

# Build library in watch mode
ng build @dotted-labs/ngx-tailwind-modal --watch --configuration development

# Run tests
ng test @dotted-labs/ngx-tailwind-modal

# Run linting
ng lint @dotted-labs/ngx-tailwind-modal

# Start demo application
ng serve demo
```

--------------------------------

### Library Structure Overview

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Visual representation of the project's directory structure, detailing the organization of source files, components, services, interfaces, and the demo application.

```text
projects/ngx-tailwind-modal/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ngx-tailwind-modal.component.ts
│   │   │   └── ngx-tailwind-modal-view.component.ts
│   │   ├── services/
│   │   │   ├── ngx-tailwind-modal.service.ts
│   │   │   └── ngx-tailwind-modal-stack.service.ts
│   │   ├── interfaces/
│   │   │   └── ngx-tailwind-modal.interface.ts
│   │   ├── classes/
│   │   │   └── modal-instance.ts
│   │   └── providers/
│   │       └── ngx-tailwind-modal.provider.ts
│   └── public-api.ts
projects/demo/           # Demo application
```

--------------------------------

### Angular Build and Development Commands

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/CLAUDE.md

Provides essential Angular CLI commands for building the library in production or watch mode, serving the demo application, and running tests and linters.

```bash
# Build library for production
ng build --project @dotted-labs/ngx-tailwind-modal

# Build library in watch mode for development
ng build --project @dotted-labs/ngx-tailwind-modal --watch --configuration development

# Build demo application
ng build --project demo

# Start demo application (not configured in package.json)
ng serve demo

# Development with library rebuild
ng build --project @dotted-labs/ngx-tailwind-modal --watch --configuration development

# Run tests
ng test

# Run tests for specific project
ng test @dotted-labs/ngx-tailwind-modal

# Run linter
ng lint

# Run linter with auto-fix
ng lint --fix
```

--------------------------------

### Configure Providers (Standalone)

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Configures the NgxTailwindModal service providers in the application's configuration file for standalone Angular applications.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideNgxTailwindModal } from '@ngx-tailwind-modal';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideNgxTailwindModal(),
  ],
};
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/demo/src/index.html

Demonstrates the fundamental implementation of opening and closing a modal using the NGX Smart Modal service in an Angular component.

```typescript
import { Component } from '@angular/core';
import { NgxSmartModalService } from 'ngx-smart-modal';

@Component({
  selector: 'app-modal-demo',
  templateUrl: './modal-demo.component.html',
  styleUrls: ['./modal-demo.component.css']
})
export class ModalDemoComponent {

  constructor(public ngxSmartModalService: NgxSmartModalService) {
    // Subscribe to modal events if needed
    this.ngxSmartModalService.getModal('myModal').onOpen.subscribe(modal => {
      console.log('myModal opened', modal);
    });
  }

  openModal(modalId: string): void {
    this.ngxSmartModalService.getModal(modalId).open();
  }

  closeModal(modalId: string): void {
    this.ngxSmartModalService.getModal(modalId).close();
  }
}
```

--------------------------------

### Creating Dynamic Modals

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/CLAUDE.md

Demonstrates how to programmatically create and open a modal using the `NgxTailwindModalService` in an Angular application. It shows the basic syntax for creating a modal with a specified ID, component, view container reference, and optional configuration.

```typescript
this.modalService.create('modal-id', ComponentClass, viewContainerRef, options).open()
```

--------------------------------

### Testing Modal Service Integration

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Illustrates how to integrate and test the modal service within Angular unit tests. It covers setting up the testing module and verifying modal creation and visibility.

```typescript
// Test modal service in your unit tests
import { TestBed } from '@angular/core/testing';
import { NgxTailwindModalService } from '@dotted-labs/ngx-tailwind-modal';

describe('Modal Integration', () => {
  let modalService: NgxTailwindModalService;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [NgxTailwindModalService]
    });
    modalService = TestBed.inject(NgxTailwindModalService);
  });
  
  it('should create and open modal', () => {
    const modal = modalService.create('test-modal', TestComponent, vcr);
    modal.open();
    expect(modal.isVisible()).toBe(true);
  });
});
```

--------------------------------

### NgxTailwindModalService API Reference

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Provides a comprehensive reference for the NgxTailwindModalService, covering methods for modal creation, management, data handling, and inspection. Also details configuration options for modals.

```APIDOC
NgxTailwindModalService:
  create(id: string, component: Type<any>, vcr: ViewContainerRef, options?: INgxTailwindModalOptions): NgxTailwindModalComponent
    - Creates a modal instance.
    - Parameters:
      - id: Unique identifier for the modal.
      - component: The Angular component to render inside the modal.
      - vcr: The ViewContainerRef where the modal will be rendered.
      - options: Optional configuration for the modal.
    - Returns: The created NgxTailwindModalComponent instance.

  open(id: string): void
    - Opens a previously created modal.
    - Parameters:
      - id: The ID of the modal to open.

  close(id: string): void
    - Closes a specific modal.
    - Parameters:
      - id: The ID of the modal to close.

  toggle(id: string): void
    - Toggles the visibility of a modal.
    - Parameters:
      - id: The ID of the modal to toggle.

  closeAll(): void
    - Closes all currently open modals.

  setModalData(data: any, id?: string): void
    - Sets data for a specific modal or the top modal if no ID is provided.
    - Parameters:
      - data: The data to pass to the modal.
      - id: Optional ID of the target modal.

  getModalData(id?: string): any
    - Retrieves data from a specific modal or the top modal.
    - Parameters:
      - id: Optional ID of the target modal.
    - Returns: The data associated with the modal.

  resetModalData(id?: string): void
    - Clears the data for a specific modal or the top modal.
    - Parameters:
      - id: Optional ID of the target modal.

  getModal(id: string): NgxTailwindModalComponent | undefined
    - Retrieves a modal instance by its ID.
    - Parameters:
      - id: The ID of the modal to retrieve.
    - Returns: The NgxTailwindModalComponent instance or undefined if not found.

  getModalStack(): NgxTailwindModalComponent[]
    - Returns an array of all modal instances.

  getOpenedModals(): NgxTailwindModalComponent[]
    - Returns an array of currently open modal instances.

  getTopOpenedModal(): NgxTailwindModalComponent | undefined
    - Returns the topmost open modal instance.

Configuration Options (INgxTailwindModalOptions):
  closable?: boolean;         // Show close button (default: true)
  escapable?: boolean;        // Close on Escape key (default: true)
  dismissable?: boolean;      // Close on backdrop click (default: true)
  customClass?: string;       // Additional CSS classes
  backdrop?: boolean;         // Show backdrop (default: true)
  force?: boolean;            // Override existing modal (default: true)
  hideDelay?: number;         // Close animation delay (default: 500)
  autostart?: boolean;        // Auto-open on creation (default: false)
  target?: string;            // Position relative to element
  ariaLabel?: string;         // ARIA accessibility label
  ariaLabelledBy?: string;    // ARIA labelledby reference
  ariaDescribedBy?: string;   // ARIA describedby reference
  refocus?: boolean;          // Return focus after close (default: true)
```

--------------------------------

### NgxTailwindModalService API

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Provides an overview of the methods available in the NgxTailwindModalService for managing modals, including opening, closing, toggling, and data manipulation.

```APIDOC
NgxTailwindModalService:
  open(modalId: string): void
    - Opens a modal with the specified ID.

  close(modalId: string): void
    - Closes a modal with the specified ID.

  toggle(modalId: string): void
    - Toggles the visibility of a modal with the specified ID.

  closeAll(): void
    - Closes all currently open modals.

  getModal(modalId: string): ModalInstance | undefined
    - Retrieves a modal instance by its ID.
    - Returns: The modal instance or undefined if not found.

  setModalData<T>(data: T, modalId: string): void
    - Sets data for a specific modal.
    - Parameters:
      - data: The data to set.
      - modalId: The ID of the modal to set data for.

  getModalData<T>(modalId: string): T | undefined
    - Retrieves data associated with a specific modal.
    - Returns: The modal data or undefined if not found.

  create(modalId: string, component: Type<any>, viewContainerRef: ViewContainerRef, options?: ModalOptions): ModalInstance
    - Creates a modal programmatically.
    - Parameters:
      - modalId: A unique identifier for the modal.
      - component: The Angular component to render inside the modal.
      - viewContainerRef: The ViewContainerRef where the modal will be attached.
      - options: Optional configuration for the modal (e.g., dismissable).
    - Returns: The created ModalInstance.
```

--------------------------------

### Responsive Modal Sizes

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

The library automatically handles responsive positioning and sizing. You only need to specify content dimensions using Tailwind CSS classes within the `modal-box`.

```typescript
// The library handles modal positioning - you only style content dimensions
@Component({
  template: `
    <!-- Library provides responsive modal backdrop and positioning -->
    <div class="modal-box w-11/12 max-w-5xl lg:max-w-3xl md:max-w-2xl sm:max-w-sm">
      <!-- Focus only on your content layout -->
      <h3 class="font-bold text-lg">Responsive Content</h3>
      <p>The modal backdrop, positioning, and z-index are handled automatically!</p>
    </div>
  `
})
export class ResponsiveModalComponent {}
```

--------------------------------

### Modal Template Structure

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/demo/src/index.html

Shows the HTML structure for a modal defined using the NGX Smart Modal component, including basic content and close button.

```html
<ngx-smart-modal #myModal label="My First Modal" customClass="my-custom-modal">
  <div class="p-4">
    <h2 class="text-lg font-bold mb-2">Modal Title</h2>
    <p>This is the content of the modal.</p>
    <button (click)="myModal.close()" class="mt-4 px-4 py-2 bg-gray-200 rounded">Close</button>
  </div>
</ngx-smart-modal>

<button (click)="myModal.open()" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
```

--------------------------------

### Configure Angular Providers

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Sets up the NgxTailwindModalService in the Angular application's providers using the provideNgxTailwindModal function.

```typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideNgxTailwindModal } from '@dotted-labs/ngx-tailwind-modal';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideNgxTailwindModal()
  ]
};
```

--------------------------------

### Open a basic modal using NgxTailwindModalService

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

Demonstrates how to inject `NgxTailwindModalService` and `ViewContainerRef` to programmatically create and open a modal instance using the previously defined `MyModalComponent`.

```typescript
import { Component, inject, ViewContainerRef } from '@angular/core';
import { NgxTailwindModalService } from '@ngx-tailwind-modal';
import { MyModalComponent } from './my-modal.component';

@Component({
  selector: 'app-root',
  standalone: true,
  template: ` <button class="btn btn-primary" (click)="openModal()">Open Modal</button> `,
})
export class AppComponent {
  private readonly modalService = inject(NgxTailwindModalService);
  private readonly vcr = inject(ViewContainerRef);

  public openModal() {
    this.modalService
      .create(`modal-${Math.random()}`, MyModalComponent, this.vcr, {
        dismissable: true,
      })
      .open();
  }
}
```

--------------------------------

### Configure Tailwind CSS

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Configures tailwind.config.js to include the library's modal styles and DaisyUI plugin. The safelist ensures that modal-related classes are not purged during the build process.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@dotted-labs/ngx-tailwind-modal/**/*.{js,ts}"
  ],
  // These classes provide complete modal styling - no additional CSS needed
  safelist: ['modal', 'modal-backdrop', 'modal-box'], 
  plugins: [require('daisyui')]
};
```

--------------------------------

### Template Declaration

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Declare modals directly in your templates. The library automatically handles modal backdrop, positioning, z-index management, and animations. You only need to style your content inside `modal-box`.

```html
<!-- The library handles all modal infrastructure automatically -->
<ngx-tailwind-modal 
  identifier="settings-modal"
  [closable]="true"
  [dismissable]="true"
  [escapable]="true">
  
  <!-- Only style your content - backdrop and positioning are automatic -->
  <div class="modal-box max-w-2xl">
    <h3 class="font-bold text-lg mb-4">Application Settings</h3>
    
    <!-- Settings form content -->
    <form class="space-y-4">
      <div class="form-control">
        <label class="label">
          <span class="label-text">Theme</span>
        </label>
        <select class="select select-bordered">
          <option>Light</option>
          <option>Dark</option>
          <option>Auto</option>
        </select>
      </div>
    </form>
    
    <div class="modal-action">
      <button class="btn" (click)="closeModal()">Cancel</button>
      <button class="btn btn-primary" (click)="saveSettings()">Save Changes</button>
    </div>
  </div>
</ngx-tailwind-modal>

<!-- Open the modal using the service -->
<button class="btn btn-outline" (click)="openSettings()">
  Open Settings
</button>
```

--------------------------------

### Create a Modal Component

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Defines a custom modal component with DaisyUI styling for its content and provides a closeModal method.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-modal',
  standalone: true,
  template: `
    <div class="modal-box">
      <h3 class="font-bold text-lg">Hello!</h3>
      <p class="py-4">This is a modal with DaisyUI styles</p>
      <div class="modal-action">
        <button class="btn" (click)="closeModal()">Close</button>
      </div>
    </div>
  `,
})
export class MyModalComponent {
  closeModal() {
    // Modal will be closed automatically when component is destroyed
  }
}
```

--------------------------------

### Modal Stacking

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Illustrates how to open multiple modals in sequence. The `onClose` event of a modal can be used to trigger the opening of another modal, allowing for complex workflows.

```typescript
// Open multiple modals in sequence
openConfirmationFlow() {
  // First modal
  const userModal = this.modalService.create('user-form', UserFormComponent, this.vcr);
  
  userModal.onClose.subscribe(() => {
    // Open confirmation modal on top
    this.modalService
      .create('confirm-save', ConfirmationComponent, this.vcr, {
        backdrop: false  // Don't block the previous modal
      })
      .open();
  });
  
  userModal.open();
}
```

--------------------------------

### Modal Event System

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Explains how to subscribe to modal lifecycle events at both the component level (using Observables) and globally via browser event listeners for comprehensive event handling.

```javascript
// Component-level events
modal.onOpen.subscribe(() => console.log('Modal opened'));
modal.onClose.subscribe(() => console.log('Modal closed'));
modal.onDataAdded.subscribe(data => console.log('Data added:', data));

// Global browser events
document.addEventListener('ngx-tailwind-modal.open', (e) => {
  console.log('Modal opened:', e.detail);
});

// Available Events:
// - onOpen / onOpenFinished - Modal opening lifecycle
// - onClose / onCloseFinished - Modal closing lifecycle  
// - onDismiss / onDismissFinished - Modal dismissal (backdrop/escape)
// - onDataAdded / onDataRemoved - Data management events
// - onEscape - Escape key pressed
```

--------------------------------

### Open a Modal from Main Component

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/ngx-tailwind-modal/README.md

Demonstrates how to inject NgxTailwindModalService and ViewContainerRef in an Angular component to open a dynamically created modal.

```typescript
import { Component, inject, ViewContainerRef } from '@angular/core';
import { NgxTailwindModalService } from '@ngx-tailwind-modal';
import { MyModalComponent } from './my-modal.component';

@Component({
  selector: 'app-root',
  standalone: true,
  template: ` <button class="btn btn-primary" (click)="openModal()">Open Modal</button> `,
})
export class AppComponent {
  private readonly modalService = inject(NgxTailwindModalService);
  private readonly vcr = inject(ViewContainerRef);

  public openModal() {
    this.modalService
      .create(`modal-${Math.random()}`, MyComponent, this.vcr, {
        dismissable: true,
      })
      .open();
  }
}
```

--------------------------------

### Import NgxTailwindModalComponent

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

Demonstrates how to import and use the NgxTailwindModalComponent in an Angular standalone component.

```typescript
import { Component } from '@angular/core';
import { NgxTailwindModalComponent } from '@dotted-labs/ngx-tailwind-modal';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxTailwindModalComponent],
  templateUrl: './app.component.html'
})
export class AppComponent {}
```

--------------------------------

### Configure ngx-tailwind-modal providers in Angular

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

For standalone Angular applications, import `provideNgxTailwindModal` and add it to the `providers` array in `app.config.ts` to enable the modal service.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideNgxTailwindModal } from '@ngx-tailwind-modal';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideNgxTailwindModal(),
  ],
};
```

--------------------------------

### Modal Styling with Tailwind CSS

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/demo/src/index.html

Illustrates how to apply Tailwind CSS classes directly to the modal's content and structure for custom styling.

```css
.my-custom-modal {
  /* Example custom styles */
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.my-custom-modal h2 {
  color: #333;
}

.my-custom-modal p {
  color: #555;
}
```

--------------------------------

### Accessibility Features

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/README.md

The library provides comprehensive accessibility features including ARIA support, focus management, keyboard navigation, semantic HTML, and screen reader compatibility.

```typescript
// Example with accessibility options
this.modalService.create('accessible-modal', ContentComponent, this.vcr, {
  ariaLabel: 'User profile settings dialog',
  ariaLabelledBy: 'modal-title',
  ariaDescribedBy: 'modal-description',
  refocus: true  // Return focus to trigger element
});
```

--------------------------------

### NgxTailwindModalService API Reference

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

The `NgxTailwindModalService` provides a comprehensive set of methods for programmatically managing modals, including opening, closing, toggling, and retrieving modal instances or data.

```APIDOC
NgxTailwindModalService:
  open(modalId: string): void
    Description: Opens a modal.
    Parameters:
      modalId: string - The unique identifier of the modal to open.
  close(modalId: string): void
    Description: Closes a modal.
    Parameters:
      modalId: string - The unique identifier of the modal to close.
  toggle(modalId: string): void
    Description: Toggles the open/closed state of a modal.
    Parameters:
      modalId: string - The unique identifier of the modal to toggle.
  closeAll(): void
    Description: Closes all currently open modals.
  getModal(modalId: string): ModalInstance | undefined
    Description: Retrieves a modal instance.
    Parameters:
      modalId: string - The unique identifier of the modal to retrieve.
    Returns: ModalInstance | undefined - The modal instance if found, otherwise undefined.
  setModalData(data: any, modalId: string): void
    Description: Sets data to a modal.
    Parameters:
      data: any - The data object to set for the modal.
      modalId: string - The unique identifier of the modal.
  getModalData(modalId: string): any
    Description: Retrieves data from a modal.
    Parameters:
      modalId: string - The unique identifier of the modal.
    Returns: any - The data associated with the modal.
  create(modalId: string, component: Type<any>, viewContainerRef: ViewContainerRef, options?: ModalOptions): ModalInstance
    Description: Creates a modal programmatically.
    Parameters:
      modalId: string - A unique identifier for the new modal.
      component: Type<any> - The Angular component to be rendered inside the modal.
      viewContainerRef: ViewContainerRef - The ViewContainerRef to attach the modal to.
      options?: ModalOptions - Optional configuration for the modal (e.g., dismissable).
    Returns: ModalInstance - The created modal instance.
```

--------------------------------

### Modal Component Logic

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/projects/demo/src/app/app.component.html

This TypeScript code demonstrates the component logic for opening a modal. It includes a method to toggle the modal's visibility, which would be bound to the button click event.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-modal-demo',
  templateUrl: './modal-demo.component.html',
  styleUrls: ['./modal-demo.component.css']
})
export class ModalDemoComponent {
  isModalOpen = false;

  openModal(): void {
    this.isModalOpen = true;
  }

  closeModal(): void {
    this.isModalOpen = false;
  }
}
```

--------------------------------

### Open a custom modal using NgxTailwindModalService

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

Inject `NgxTailwindModalService` and `ViewContainerRef` into your main component. Use the `create` method to instantiate your custom modal component and then call `open()` to display it.

```typescript
import { Component, inject, ViewContainerRef } from '@angular/core';
import { NgxTailwindModalService } from '@ngx-tailwind-modal';
import { MyModalComponent } from './my-modal.component';

@Component({
  selector: 'app-root',
  standalone: true,
  template: ` <button class="btn btn-primary" (click)="openModal()">Open Modal</button> `,
})
export class AppComponent {
  private readonly modalService = inject(NgxTailwindModalService);
  private readonly vcr = inject(ViewContainerRef);

  public openModal() {
    this.modalService
      .create(`modal-${Math.random()}`, MyModalComponent, this.vcr, {
        dismissable: true,
      })
      .open();
  }
}
```

--------------------------------

### Configure NgxTailwindModal providers in Angular

Source: https://github.com/dotted-labs/ngx-tailwind-modal/blob/master/llm.txt

Adds `provideNgxTailwindModal()` to the `providers` array in `app.config.ts` for standalone Angular applications to enable the modal service.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideNgxTailwindModal } from '@ngx-tailwind-modal';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideNgxTailwindModal(),
  ],
};
```