fix(form_field): add color input on helper and label (#147)

* fix(form_field): add color input on helper and label

Author: MGREMY

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';
@@ -28,6 +29,11 @@ export class Helper {
   readonly config = injectFlowbiteHelperConfig();
   readonly formFieldState = injectFlowbiteFormFieldState();
 
+  /**
+   * @see {@link injectFlowbiteFormFieldState}
+   */
+  readonly color = input<keyof FlowbiteFormFieldColors>();
+
   /**
    * @see {@link injectFlowbiteHelperConfig}
    */
@@ -41,7 +47,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() ?? this.formFieldState().color())
         ),
       },
     };

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';
@@ -28,6 +29,11 @@ export class Label {
   readonly config = injectFlowbiteLabelConfig();
   readonly formFieldState = injectFlowbiteFormFieldState();
 
+  /**
+   * @see {@link injectFlowbiteFormFieldState}
+   */
+  readonly color = input<keyof FlowbiteFormFieldColors>();
+
   /**
    * @see {@link injectFlowbiteLabelConfig}
    */
@@ -41,7 +47,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() ?? this.formFieldState().color()),
           mergedTheme.host.mode[this.formFieldState().mode()]
         ),
       },