Merge pull request #31 from klippa-app/extract-button-variants-to-types

refactor: extract button variants into type for reuse and full exposure
klippa-app · Aug 16, 2023 · 1419be9 · 1419be9
2 parents 23ae0b0 + a4fa8e1
commit 1419be9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.7.1",
+  "version": "14.7.2",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/button/button.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/button/button.component.ts
@@ -1,21 +1,22 @@
 import { Component, HostBinding, Input } from '@angular/core';
 import {isValueSet} from "../../util/values";
 
-@Component({
-	selector: 'klp-form-button',
-	templateUrl: './button.component.html',
-	styleUrls: ['./button.component.scss'],
-})
-export class ButtonComponent {
-	@Input() variant:
-		| 'white'
+export type ButtonVariant = 'white'
 		| 'greenFilled'
 		| 'greenOutlined'
 		| 'greenLink'
 		| 'contextMenuItem'
 		| 'redFilled'
 		| 'redOutlined'
-		| 'orangeFilled' = 'white';
+		| 'orangeFilled';
+
+@Component({
+	selector: 'klp-form-button',
+	templateUrl: './button.component.html',
+	styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent {
+	@Input() variant: ButtonVariant = 'white';
 	@Input() size: 'small' | 'medium' | 'large' = 'medium';
 	@Input() fullWidth = false;
 	@Input() hasBorder = true;

diff --git a/.../klippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.ts b/.../klippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.ts
@@ -1,6 +1,14 @@
 import { Component, Host, HostBinding, Input, Optional } from '@angular/core';
 import {FormComponent, invalidFieldsSymbol} from '../form.component';
 import {isNullOrUndefined} from '../../util/values';
+import { ButtonVariant } from '../../elements/button/button.component';
+
+export type SubmitButtonVariant = Extract<ButtonVariant,
+	| 'greenFilled'
+	| 'redFilled'
+	| 'greenOutlined'
+	| 'white'
+>;
 
 @Component({
 	selector: 'klp-form-submit-button',
@@ -10,7 +18,7 @@ import {isNullOrUndefined} from '../../util/values';
 export class FormSubmitButtonComponent {
 	@Input() public isLoading = false;
 	@Input() fullWidth = false;
-	@Input() variant: 'greenFilled' | 'redFilled' | 'greenOutlined' = 'greenFilled';
+	@Input() variant: SubmitButtonVariant = 'greenFilled';
 	@Input() public before: () => Promise<any> = () => Promise.resolve();
 	@Input() public after: () => Promise<any> = () => Promise.resolve();
 	@Input() public submitCallback: (renderedAndEnabledValues: object, renderedButDisabledValues: object) => Promise<any>;