Merge pull request #54 from squidit/SQ-63546-adicionar-inputs-modal

SQ-63546 Adicionar inputs no modal do ngx
squidit · Apr 10, 2024 · e5a6ae9 · e5a6ae9
2 parents 86ade02 + 1dae470
commit e5a6ae9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/src/components/sq-modal/sq-modal.component.html b/src/components/sq-modal/sq-modal.component.html
@@ -17,20 +17,40 @@
         [ngClass]="{
           'without-header': !hasHeader
         }"
+        [ngStyle]="{
+          background: headerBackgroundColor,
+          padding: headerPadding
+        }"
       >
         <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,
+          padding: footerPadding
+        }"
+        *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
@@ -81,6 +81,36 @@ export class SqModalComponent implements OnChanges, OnDestroy {
    * Determines whether to display the close button.
    */
   @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.
+   */
+  @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
@@ -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",