From f232aa1cbee447ecdccc3ba05d5a5a1bb3af9b66 Mon Sep 17 00:00:00 2001
From: JoaoBianco <joaops.bianco@gmail.com>
Date: Wed, 10 Apr 2024 09:40:40 -0300
Subject: [PATCH 1/2] Add new inputs to modal

---
 .../sq-modal/sq-modal.component.html          | 20 ++++++++++++++++---
 src/components/sq-modal/sq-modal.component.ts | 20 +++++++++++++++++++
 src/package.json                              |  2 +-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/sq-modal/sq-modal.component.html b/src/components/sq-modal/sq-modal.component.html
index e87cb33..96b32bf 100644
--- a/src/components/sq-modal/sq-modal.component.html
+++ b/src/components/sq-modal/sq-modal.component.html
@@ -17,20 +17,34 @@
         [ngClass]="{
           'without-header': !hasHeader
         }"
+        [ngStyle]="{ background: headerBackgroundColor }"
       >
         <ng-container *ngIf="headerTemplate">
           <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
         </ng-container>
-        <button *ngIf="buttonClose" type="button" class="close button-close" aria-label="Close" (click)="modalClose.emit()">
+        <button
+          *ngIf="buttonClose"
+          type="button"
+          class="close button-close"
+          aria-label="Close"
+          (click)="modalClose.emit()"
+        >
           <i class="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
 
-      <div class="modal-body scrollbar">
+      <div
+        class="modal-body scrollbar"
+        [ngStyle]="{ background: bodyBackgroundColor, padding: bodyPadding }"
+      >
         <ng-content></ng-content>
       </div>
 
-      <div class="modal-footer" *ngIf="footerTemplate">
+      <div
+        class="modal-footer"
+        [ngStyle]="{ background: footerBackgroundColor }"
+        *ngIf="footerTemplate"
+      >
         <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
       </div>
     </div>
diff --git a/src/components/sq-modal/sq-modal.component.ts b/src/components/sq-modal/sq-modal.component.ts
index a9fb0fd..d487b14 100644
--- a/src/components/sq-modal/sq-modal.component.ts
+++ b/src/components/sq-modal/sq-modal.component.ts
@@ -81,6 +81,26 @@ export class SqModalComponent implements OnChanges, OnDestroy {
    * Determines whether to display the close button.
    */
   @Input() buttonClose = true
+ 
+  /**
+   * Determines the body padding.
+   */
+  @Input() bodyPadding = '0 1rem'
+ 
+  /**
+   * Determines the header background color.
+   */
+  @Input() headerBackgroundColor = ''
+ 
+  /**
+   * Determines the body background color.
+   */
+  @Input() bodyBackgroundColor = ''
+ 
+  /**
+   * Determines the footer background color.
+   */
+  @Input() footerBackgroundColor = ''
 
   /**
    * Event emitted when the modal is closed.
diff --git a/src/package.json b/src/package.json
index aab3b49..311a789 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",

From 1dae470faec4325fffdd3d23ab2883c1b41b26f1 Mon Sep 17 00:00:00 2001
From: JoaoBianco <joaops.bianco@gmail.com>
Date: Wed, 10 Apr 2024 09:52:30 -0300
Subject: [PATCH 2/2] Add footer and header padding

---
 src/components/sq-modal/sq-modal.component.html | 10 ++++++++--
 src/components/sq-modal/sq-modal.component.ts   | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/sq-modal/sq-modal.component.html b/src/components/sq-modal/sq-modal.component.html
index 96b32bf..2ad985f 100644
--- a/src/components/sq-modal/sq-modal.component.html
+++ b/src/components/sq-modal/sq-modal.component.html
@@ -17,7 +17,10 @@
         [ngClass]="{
           'without-header': !hasHeader
         }"
-        [ngStyle]="{ background: headerBackgroundColor }"
+        [ngStyle]="{
+          background: headerBackgroundColor,
+          padding: headerPadding
+        }"
       >
         <ng-container *ngIf="headerTemplate">
           <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
@@ -42,7 +45,10 @@
 
       <div
         class="modal-footer"
-        [ngStyle]="{ background: footerBackgroundColor }"
+        [ngStyle]="{
+          background: footerBackgroundColor,
+          padding: footerPadding
+        }"
         *ngIf="footerTemplate"
       >
         <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
diff --git a/src/components/sq-modal/sq-modal.component.ts b/src/components/sq-modal/sq-modal.component.ts
index d487b14..b88fac5 100644
--- a/src/components/sq-modal/sq-modal.component.ts
+++ b/src/components/sq-modal/sq-modal.component.ts
@@ -82,11 +82,21 @@ export class SqModalComponent implements OnChanges, OnDestroy {
    */
   @Input() buttonClose = true
  
+  /**
+   * Determines the header padding.
+   */
+  @Input() headerPadding = ''
+ 
   /**
    * Determines the body padding.
    */
   @Input() bodyPadding = '0 1rem'
  
+  /**
+   * Determines the footer padding.
+   */
+  @Input() footerPadding = ''
+ 
   /**
    * Determines the header background color.
    */