feat(button): adiciona input type

projects/ui/src/lib/components/po-button/index.ts

@@ -1,3 +1,5 @@
 export * from './po-button.component';
 
 export * from './po-button.module';
+
+export * from './po-button-type.enum';

projects/ui/src/lib/components/po-button/po-button-base.component.ts

@@ -4,6 +4,7 @@ import { convertToBoolean } from '../../utils/util';
 
 import { PoButtonKind } from './po-button-kind.enum';
 import { PoButtonSize } from './po-button-size.enum';
+import { PoButtonType } from './po-button-type.enum';
 /**
  * @description
  *
@@ -106,6 +107,16 @@ export class PoButtonBaseComponent {
    */
   @Input('p-icon') icon?: string | TemplateRef<void>;
 
+  /**
+   * @optional
+   *
+   * @description
+   * Define o tipo do botão.
+   *
+   * @default `PoButtonType.Button`
+   */
+  @Input('p-type') type?: PoButtonType = PoButtonType.Button;
+
   /** Ação que será executada quando o usuário clicar sobre o `po-button`. */
   @Output('p-click') click = new EventEmitter<null>();
 

projects/ui/src/lib/components/po-button/po-button-type.enum.ts

@@ -0,0 +1,36 @@
+/**
+ * @usedBy PoButtonComponent
+ *
+ * @description
+ *
+ * Enumeração que define os tipos possíveis para o `PoButtonComponent`. Estes tipos estão relacionados ao comportamento
+ * do botão quando utilizado dentro de um formulário HTML.
+ *
+ * @example
+ * No uso com o `PoButtonComponent`, a propriedade `p-type` pode ser utilizada para configurar o comportamento:
+ *
+ * ```
+ * <po-button p-label="Enviar" p-type="submit"></po-button>
+ * <po-button p-label="Cancelar" p-type="button"></po-button>
+ * <po-button p-label="Redefinir" p-type="reset"></po-button>
+ * ```
+ */
+export enum PoButtonType {
+  /**
+   * Define o botão como do tipo `submit`. Quando clicado, o formulário é enviado automaticamente,
+   * disparando o evento `submit`.
+   */
+  Submit = 'submit',
+
+  /**
+   * Define o botão como do tipo `button`. Este tipo de botão não possui comportamento padrão associado
+   * e é utilizado principalmente para ações programáticas como cliques e disparos de eventos customizados.
+   */
+  Button = 'button',
+
+  /**
+   * Define o botão como do tipo `reset`. Quando clicado, redefine os campos do formulário ao qual pertence
+   * para seus valores iniciais.
+   */
+  Reset = 'reset'
+}

projects/ui/src/lib/components/po-button/po-button.component.html

@@ -1,7 +1,7 @@
 <button
   #button
   class="po-button"
-  type="button"
+  [type]="type"
   [attr.p-size]="size"
   [attr.p-kind]="kind"
   [attr.p-danger]="danger"

projects/ui/src/lib/components/po-button/po-button.component.spec.ts

@@ -9,6 +9,7 @@ import { PoButtonComponent } from './po-button.component';
 import { PoButtonBaseComponent } from './po-button-base.component';
 
 import { expectPropertiesValues } from '../../util-test/util-expect.spec';
+import { PoButtonType } from './po-button-type.enum';
 
 describe('PoButtonComponent: ', () => {
   let component: PoButtonComponent;
@@ -66,6 +67,25 @@ describe('PoButtonComponent: ', () => {
     expect(component.click.emit).toHaveBeenCalled();
   });
 
+  it('button type should default to `button`.', () => {
+    fixture.detectChanges();
+    expect(nativeElement.querySelector('button').getAttribute('type')).toBe(PoButtonType.Button);
+  });
+
+  it('should set type to `submit`.', () => {
+    component.type = PoButtonType.Submit;
+    fixture.detectChanges();
+
+    expect(nativeElement.querySelector('button').getAttribute('type')).toBe(PoButtonType.Submit);
+  });
+
+  it('should set type to `reset`.', () => {
+    component.type = PoButtonType.Reset;
+    fixture.detectChanges();
+
+    expect(nativeElement.querySelector('button').getAttribute('type')).toBe(PoButtonType.Reset);
+  });
+
   describe('Properties: ', () => {
     it('p-loading: should attribute the propertie when set valid values.', () => {
       const booleanTrueValues = [true, 'true', 1, ''];

projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html

@@ -10,6 +10,7 @@
     [p-danger]="properties.includes('danger')"
     [p-kind]="kind"
     (p-click)="buttonClick()"
+    [p-type]="type"
   >
   </po-button>
 </div>
@@ -57,6 +58,9 @@
       (p-change)="verifyDisabled($event)"
     >
     </po-radio-group>
+
+    <po-radio-group class="po-lg-12" name="type" [(ngModel)]="type" p-label="Type" [p-options]="typeOptions">
+    </po-radio-group>
   </div>
 
   <div class="po-row">

projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { PoCheckboxGroupOption, PoRadioGroupOption, PoDialogService } from '@po-ui/ng-components';
+import { PoCheckboxGroupOption, PoRadioGroupOption, PoDialogService, PoButtonType } from '@po-ui/ng-components';
 
 @Component({
   selector: 'sample-po-button-labs',
@@ -12,6 +12,7 @@ export class SamplePoButtonLabsComponent implements OnInit {
   icon: string;
   size: string;
   properties: Array<string>;
+  type: string;
 
   propertiesOptions: Array<PoCheckboxGroupOption> = [
     { value: 'disabled', label: 'Disabled' },
@@ -37,6 +38,12 @@ export class SamplePoButtonLabsComponent implements OnInit {
     { label: 'large', value: 'large' }
   ];
 
+  typeOptions: Array<PoRadioGroupOption> = [
+    { label: 'button', value: PoButtonType.Button },
+    { label: 'submit', value: PoButtonType.Submit },
+    { label: 'reset', value: PoButtonType.Reset }
+  ];
+
   constructor(private poDialog: PoDialogService) {}
 
   ngOnInit() {
@@ -78,6 +85,7 @@ export class SamplePoButtonLabsComponent implements OnInit {
     this.kind = 'secondary';
     this.size = 'medium';
     this.icon = undefined;
+    this.type = PoButtonType.Button;
     this.properties = [];
     this.kindsOptions[2] = { ...this.kindsOptions[2], disabled: false };
     this.sizesOptions[0] = { ...this.sizesOptions[0], disabled: false };