From 827a1b21b10e4a0ff439408d25ca48068b3f39a1 Mon Sep 17 00:00:00 2001 From: GREMY Miguel Date: Sat, 6 Dec 2025 22:18:05 +0100 Subject: [PATCH 1/2] fix(form_field): add color input on helper and label --- libs/flowbite-angular/form/src/helper/helper.directive.ts | 7 ++++++- libs/flowbite-angular/form/src/label/label.directive.ts | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/libs/flowbite-angular/form/src/helper/helper.directive.ts b/libs/flowbite-angular/form/src/helper/helper.directive.ts index 36049bf2..47dd9c64 100644 --- a/libs/flowbite-angular/form/src/helper/helper.directive.ts +++ b/libs/flowbite-angular/form/src/helper/helper.directive.ts @@ -28,6 +28,11 @@ export class Helper { readonly config = injectFlowbiteHelperConfig(); readonly formFieldState = injectFlowbiteFormFieldState(); + /** + * @see {@link injectFlowbiteHelperConfig} + */ + readonly color = input(this.formFieldState().color()); + /** * @see {@link injectFlowbiteHelperConfig} */ @@ -41,7 +46,7 @@ export class Helper { root: twMerge( mergedTheme.host.base, mergedTheme.host.transition, - colorToTheme(mergedTheme.host.color, this.formFieldState().color()) + colorToTheme(mergedTheme.host.color, this.state.color()) ), }, }; diff --git a/libs/flowbite-angular/form/src/label/label.directive.ts b/libs/flowbite-angular/form/src/label/label.directive.ts index 694e6049..447d1a39 100644 --- a/libs/flowbite-angular/form/src/label/label.directive.ts +++ b/libs/flowbite-angular/form/src/label/label.directive.ts @@ -28,6 +28,11 @@ export class Label { readonly config = injectFlowbiteLabelConfig(); readonly formFieldState = injectFlowbiteFormFieldState(); + /** + * @see {@link injectFlowbiteLabelConfig} + */ + readonly color = input(this.formFieldState().color()); + /** * @see {@link injectFlowbiteLabelConfig} */ @@ -41,7 +46,7 @@ export class Label { root: twMerge( mergedTheme.host.base, mergedTheme.host.transition, - colorToTheme(mergedTheme.host.color, this.formFieldState().color()), + colorToTheme(mergedTheme.host.color, this.state.color()), mergedTheme.host.mode[this.formFieldState().mode()] ), }, From 5aecf672adfc252db5d542af96f64a51fcb07372 Mon Sep 17 00:00:00 2001 From: GREMY Miguel Date: Sat, 6 Dec 2025 22:25:52 +0100 Subject: [PATCH 2/2] fix(form_field): add color input on helper and label --- libs/flowbite-angular/form/src/helper/helper.directive.ts | 7 ++++--- libs/flowbite-angular/form/src/label/label.directive.ts | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/libs/flowbite-angular/form/src/helper/helper.directive.ts b/libs/flowbite-angular/form/src/helper/helper.directive.ts index 47dd9c64..3cdd915b 100644 --- a/libs/flowbite-angular/form/src/helper/helper.directive.ts +++ b/libs/flowbite-angular/form/src/helper/helper.directive.ts @@ -1,5 +1,6 @@ import { injectFlowbiteHelperConfig } from '../config/helper-config'; import { injectFlowbiteFormFieldState } from '../form-field/form-field-state'; +import type { FlowbiteFormFieldColors } from '../form-field/theme'; import { flowbiteHelperState, provideFlowbiteHelperState } from './helper-state'; import { colorToTheme, mergeDeep } from 'flowbite-angular'; @@ -29,9 +30,9 @@ export class Helper { readonly formFieldState = injectFlowbiteFormFieldState(); /** - * @see {@link injectFlowbiteHelperConfig} + * @see {@link injectFlowbiteFormFieldState} */ - readonly color = input(this.formFieldState().color()); + readonly color = input(); /** * @see {@link injectFlowbiteHelperConfig} @@ -46,7 +47,7 @@ export class Helper { root: twMerge( mergedTheme.host.base, mergedTheme.host.transition, - colorToTheme(mergedTheme.host.color, this.state.color()) + colorToTheme(mergedTheme.host.color, this.state.color() ?? this.formFieldState().color()) ), }, }; diff --git a/libs/flowbite-angular/form/src/label/label.directive.ts b/libs/flowbite-angular/form/src/label/label.directive.ts index 447d1a39..41f773f6 100644 --- a/libs/flowbite-angular/form/src/label/label.directive.ts +++ b/libs/flowbite-angular/form/src/label/label.directive.ts @@ -1,5 +1,6 @@ import { injectFlowbiteLabelConfig } from '../config/label-config'; import { injectFlowbiteFormFieldState } from '../form-field/form-field-state'; +import type { FlowbiteFormFieldColors } from '../form-field/theme'; import { flowbiteLabelState, provideFlowbiteLabelState } from './label-state'; import { colorToTheme, mergeDeep } from 'flowbite-angular'; @@ -29,9 +30,9 @@ export class Label { readonly formFieldState = injectFlowbiteFormFieldState(); /** - * @see {@link injectFlowbiteLabelConfig} + * @see {@link injectFlowbiteFormFieldState} */ - readonly color = input(this.formFieldState().color()); + readonly color = input(); /** * @see {@link injectFlowbiteLabelConfig} @@ -46,7 +47,7 @@ export class Label { root: twMerge( mergedTheme.host.base, mergedTheme.host.transition, - colorToTheme(mergedTheme.host.color, this.state.color()), + colorToTheme(mergedTheme.host.color, this.state.color() ?? this.formFieldState().color()), mergedTheme.host.mode[this.formFieldState().mode()] ), },