fix: issue with angular build

db-ui · Apr 12, 2024 · f69bd38 · f69bd38
1 parent 2071584
commit f69bd38
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 22 deletions.
diff --git a/packages/components/docs/Validation.md b/packages/components/docs/Validation.md
@@ -1,7 +1,7 @@
 # Validation
 
 -   The form components `checkbox`, `radio`, `input`, `textarea` & `select` have some sort of "auto-validation"
--   `checkbox` & `radio` do have a color change if you use the `required` attribute. If you use [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation) they will be highlighted directly
+-   `radio` do have a color change if you use the `required` attribute. If you use [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation) they will be highlighted directly
 -   If you use `required` on `input`, `textarea` or `select` you will see invalid/valid states only on submitting or `onchange`
 -   There are some other attributes for `input` (`type`,`minlength`,`maxlength`,`pattern`) and `textarea`(`minlength`,`maxlength`) which can be used for [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).
 

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -69,6 +69,16 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
+		},
+		getValidMessage: () => {
+			return props.validMessage || DEFAULT_VALID_MESSAGE;
+		},
+		getInvalidMessage: () => {
+			return (
+				props.invalidMessage ||
+				ref?.validationMessage ||
+				DEFAULT_INVALID_MESSAGE
+			);
 		}
 	});
 
@@ -161,16 +171,14 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{props.validMessage || DEFAULT_VALID_MESSAGE}
+				{state.getValidMessage()}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage ||
-					ref?.validationMessage ||
-					DEFAULT_INVALID_MESSAGE}
+				{state.getInvalidMessage()}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts
@@ -9,7 +9,8 @@ import {
 	FormState,
 	FormCheckProps,
 	InitializedState,
-	FormMessageProps
+	FormMessageProps,
+	FormMessageState
 } from '../../shared/model';
 
 export interface DBCheckboxDefaultProps {
@@ -39,4 +40,5 @@ export type DBCheckboxState = DBCheckboxDefaultState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
 	FormState &
-	InitializedState;
+	InitializedState &
+	FormMessageState;
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -78,6 +78,16 @@ export default function DBInput(props: DBInputProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
+		},
+		getValidMessage: () => {
+			return props.validMessage || DEFAULT_VALID_MESSAGE;
+		},
+		getInvalidMessage: () => {
+			return (
+				props.invalidMessage ||
+				ref?.validationMessage ||
+				DEFAULT_INVALID_MESSAGE
+			);
 		}
 	});
 
@@ -173,16 +183,14 @@ export default function DBInput(props: DBInputProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{props.validMessage || DEFAULT_VALID_MESSAGE}
+				{state.getValidMessage()}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage ||
-					ref?.validationMessage ||
-					DEFAULT_INVALID_MESSAGE}
+				{state.getInvalidMessage()}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
@@ -4,6 +4,7 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
+	FormMessageState,
 	FormProps,
 	FormState,
 	FormTextProps,
@@ -72,4 +73,5 @@ export type DBInputState = DBInputDefaultState &
 	GlobalState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
-	FormState;
+	FormState &
+	FormMessageState;
diff --git a/packages/components/src/components/select/model.ts b/packages/components/src/components/select/model.ts
@@ -6,6 +6,7 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
+	FormMessageState,
 	FormProps,
 	FormState,
 	GlobalProps,
@@ -72,4 +73,5 @@ export type DBSelectState = DBSelectDefaultState &
 	ClickEventState<HTMLSelectElement> &
 	ChangeEventState<HTMLSelectElement> &
 	FocusEventState<HTMLSelectElement> &
-	FormState;
+	FormState &
+	FormMessageState;
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
@@ -78,6 +78,16 @@ export default function DBSelect(props: DBSelectProps) {
 		},
 		getOptionLabel: (option: DBSelectOptionType) => {
 			return option.label ?? option.value.toString();
+		},
+		getValidMessage: () => {
+			return props.validMessage || DEFAULT_VALID_MESSAGE;
+		},
+		getInvalidMessage: () => {
+			return (
+				props.invalidMessage ||
+				ref?.validationMessage ||
+				DEFAULT_INVALID_MESSAGE
+			);
 		}
 	});
 
@@ -188,16 +198,14 @@ export default function DBSelect(props: DBSelectProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{props.validMessage || DEFAULT_VALID_MESSAGE}
+				{state.getValidMessage()}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage ||
-					ref?.validationMessage ||
-					DEFAULT_INVALID_MESSAGE}
+				{state.getInvalidMessage()}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
@@ -4,6 +4,7 @@ import {
 	FocusEventProps,
 	FocusEventState,
 	FormMessageProps,
+	FormMessageState,
 	FormProps,
 	FormState,
 	FormTextProps,
@@ -49,4 +50,5 @@ export type DBTextareaState = DBTextareaDefaultState &
 	ChangeEventState<HTMLTextAreaElement> &
 	FocusEventState<HTMLTextAreaElement> &
 	FormState &
-	GlobalState;
+	GlobalState &
+	FormMessageState;
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -72,6 +72,16 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (props.focus) {
 				props.focus(event);
 			}
+		},
+		getValidMessage: () => {
+			return props.validMessage || DEFAULT_VALID_MESSAGE;
+		},
+		getInvalidMessage: () => {
+			return (
+				props.invalidMessage ||
+				ref?.validationMessage ||
+				DEFAULT_INVALID_MESSAGE
+			);
 		}
 	});
 
@@ -149,16 +159,14 @@ export default function DBTextarea(props: DBTextareaProps) {
 				id={state._validMessageId}
 				size="small"
 				semantic="successful">
-				{props.validMessage || DEFAULT_VALID_MESSAGE}
+				{state.getValidMessage()}
 			</DBInfotext>
 
 			<DBInfotext
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage ||
-					ref?.validationMessage ||
-					DEFAULT_INVALID_MESSAGE}
+				{state.getInvalidMessage()}
 			</DBInfotext>
 		</div>
 	);

diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -212,6 +212,11 @@ export type FormCheckProps = {
 	variant?: 'hidden';
 };
 
+export type FormMessageState = {
+	getValidMessage: () => string;
+	getInvalidMessage: () => string;
+};
+
 export type FormMessageProps = {
 	/**
 	 * Change the variant of the label to float or hidden