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

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:

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

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:

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:

<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:

: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

<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

<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