sa-modals/README.md

Angular Modal Library: A versatile and accessible modal component for Angular applications, designed to enhance user experience with smooth animations and responsive design. This library leverages Angular's CDK to create dynamic overlays, ensuring seamles

# Space-A Modal Component

The `sa-modal` component is an Angular component designed to create modals with ease and flexibility. It allows customization through inputs and CSS variables.

## Installation

```bash
npm install sa-modals
```

## Usage

### 1. Import the directive

First, you need to import the directive into your Angular project, either in your module or in your standalone component

To use the `sa-modal` component, make sure to import the necessary Angular CDK styles in your global styles or component styles:

```scss
@import "@angular/cdk/overlay-prebuilt.css";
```

```ts

import { SaModalModule } from 'sa-modal';

@NgModule({

  imports: [
    SaModalModule,
    // other modules
  ],

})


```

## Configuration

### Global Configuration

You can set default properties for all `Modal` components in your app by providing a configuration in your module:

```typescript
import { ModalConfig, SaModalService } from "sa-modal";

providers: [
  {
    provide: SaModalService,
    useValue: {
      config: {
        saWidth: 300,
        hasBackdrop: true,
        extraClass: "",
        staticBackdrop: false,
        closeWithESC: true,
      } as ModalConfig,
    },
  },
];
```

Here’s a basic example of how to use the `sa-modal` component in your Angular application:

```html
<button (click)="modal.open()">Open Modal</button>
<sa-modal #modal>
  <modal-header header="Modal header"></modal-header>
  <modal-body>
    <!-- Modal body content goes here -->
  </modal-body>
  <modal-footer justify="flex-end">
    <button (click)="modal.close()">Close</button>
    <button>Add</button>
  </modal-footer>
</sa-modal>
```

## Inputs of `Modal`

| Input            | Type    | Default | Description                                            |
| ---------------- | ------- | ------- | ------------------------------------------------------ |
| `center`         | boolean | false   | Centers the modal on the screen.                       |
| `extraClass`     | string  | ''      | Additional CSS classes for the modal.                  |
| `saWidth`        | number  | 600     | Width of the modal in pixels.                          |
| `hasBackdrop`    | boolean | true    | Shows a backdrop behind the modal.                     |
| `staticBackdrop` | boolean | false   | Prevents closing the modal when clicking the backdrop. |
| `closeWithESC`   | boolean | true    | Closes the modal when the ESC key is pressed.          |
| `hideCLoseBtn`   | boolean | false   | Hides the close button in the header.                  |

## Outputs

| Output            | Type         | Description                         |
| ----------------- | ------------ | ----------------------------------- |
| `onOpen`          | EventEmitter | Emits when the modal is opened.     |
| `onClose`         | EventEmitter | Emits when the modal is closed.     |
| `backdropClicked` | EventEmitter | Emits when the backdrop is clicked. |

## CSS Customization

You can easily customize the modal's appearance using CSS variables. Here are some of the available variables you can modify:

```scss
:root {
  --modal-bg-color: #fff;
  --modal-border-color: #e5e5e5;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --modal-transition: 0.3s;
  --radius: 8px;
}
```

Adjust these variables in your styles to change the modal's background color, border color, and other properties.

## modal-header

| Input          | Type    | Default | Description                                                                             |
| -------------- | ------- | ------- | --------------------------------------------------------------------------------------- |
| `header`       | string  | ''      | CentersThe title or header text displayed in the modal. This is a required input.       |
| `custom`       | boolean | false   | If true, uses a custom header template instead of the default header. Default is false. |
| `hideCLoseBtn` | boolean | false   | Hides If true, the close button will be hidden. Default is false.                       |

### Example on custom header

```html
<sa-modal [center]="true" [saWidth]="400" #modal>
  <modal-header [custom]="true">
    <div class="flex flex-center justify-between">
      <h3 class="text-2xl">Hello from custom</h3>
      <button (click)="modal.close()" class="size-10 border">X</button>
    </div>
  </modal-header>
  <modal-body>
    <!-- Modal body content goes here -->
  </modal-body>
  <modal-footer>
    <button (click)="modal.open()">close</button>
  </modal-footer>
</sa-modal>
```

## modal-footer

| Input     | Type   | Default         | Description                                                                                      |
| --------- | ------ | --------------- | ------------------------------------------------------------------------------------------------ |
| `justify` | string | 'space-between' | Defines how the content in the footer is justified. Accepts values like space-between, end, etc. |

### Example on custom header

```html
<sa-modal #modal>
  <modal-header header="Modal header"></modal-header>
  <modal-body>
    <!-- Modal body content goes here -->
  </modal-body>
  <modal-footer justify="flex-end">
    <button (click)="modal.close()">Close</button>
    <button>Add</button>
  </modal-footer>
</sa-modal>
```

## Conclusion

The `sa-modal` component is a powerful tool for creating modals in your Angular application. With its customizable inputs and CSS variables, you can easily adapt it to fit your design needs.

## License

MIT License