diff --git a/projects/ui/src/lib/components/po-button/index.ts b/projects/ui/src/lib/components/po-button/index.ts index 4f4800d18..19c3409bd 100644 --- a/projects/ui/src/lib/components/po-button/index.ts +++ b/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'; diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts index 888932504..2510e85e6 100644 --- a/projects/ui/src/lib/components/po-button/po-button-base.component.ts +++ b/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; + /** + * @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(); diff --git a/projects/ui/src/lib/components/po-button/po-button-type.enum.ts b/projects/ui/src/lib/components/po-button/po-button-type.enum.ts new file mode 100644 index 000000000..87b8507d2 --- /dev/null +++ b/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: + * + * ``` + * + * + * + * ``` + */ +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' +} diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html index 9c26d7583..c62049a1a 100644 --- a/projects/ui/src/lib/components/po-button/po-button.component.html +++ b/projects/ui/src/lib/components/po-button/po-button.component.html @@ -1,7 +1,7 @@