🎨 button adjust

README.md

@@ -9,7 +9,7 @@
 
 | Angular Version | NPM Version |
 |-----------------|-------------|
-| ^15.0.4         | 15.0.3      |
+| ^15.0.4         | 15.0.4      |
 | 13.2.3          | 13.0.22     |
 | < 13.0.0        | 0.0.77      |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mprisma/components",
-  "version": "15.0.3",
+  "version": "15.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/gabriel-gn/prisma-components.git"

src/components/inputs/button/button.component.html

@@ -1,6 +1,11 @@
 <button
   [className]="getClassName()"
-  [ngClass]="{'disabled': disabled}" [disabled]="busy || disabled"
+  [ngClass]="{
+    'disabled': disabled,
+    'justify-content-center': justifyContent === 'center',
+    'justify-content-start': justifyContent === 'start'
+  }"
+  [disabled]="busy || disabled"
 >
   <ng-container *ngIf="busy; else buttonContent">
     <span class="spinner-border spinner-border-sm mx-2" role="status" aria-hidden="true"></span>
@@ -13,7 +18,7 @@
   <ng-container>
     <span
       class="align-self-center text-overflow"
-      [ngClass]="{'ms-2': iconClass && iconPosition === 'start', 'me-2': iconClass && iconPosition === 'end'}"
+      [ngClass]="{'ms-2': iconClass && label && iconPosition === 'start', 'me-2': iconClass && label && iconPosition === 'end'}"
     >
       <ng-container [ngSwitch]="!!label">
         <ng-container *ngSwitchCase="true">

src/components/inputs/button/button.component.ts

@@ -1,8 +1,9 @@
-import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
 import {MainColors} from '../../../models/colors';
 
 @Component({
   selector: 'pm-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss'],
   encapsulation: ViewEncapsulation.None
@@ -48,13 +49,17 @@ export class ButtonComponent {
    * Faz ou não o botão preencher a largura do container. (classe w-100)
    */
   @Input('fillWidth') fillWidth: boolean = false;
+  /**
+   * Alinha o conteúdo do botão
+   */
+  @Input('justifyContent') justifyContent: 'start' | 'center' = 'center';
 
   constructor() {
     this.componentClass = 'pm-button';
   }
 
   public getClassName(): string {
-    let name = 'text-overflow overflow-hidden btn';
+    let name = `d-flex align-items-center text-overflow overflow-hidden btn`;
     if (this.size !== 'md') {
       name += ` ${this.size}`;
     }

src/components/inputs/button/button.stories.ts

@@ -43,7 +43,8 @@ export const defaultArgs = {
   outline: false,
   disabled: false,
   size: 'md',
-  fillWidth: false
+  fillWidth: false,
+  justifyContent: 'center'
 };
 
 export const DefaultButton = Template.bind({});