feat(utilities): TextBgColor directive

Author: xidedix

projects/coreui-angular/src/lib/utilities/public_api.ts

@@ -4,4 +4,5 @@ export { BorderDirective } from './border.directive';
 export { RoundedDirective } from './rounded.directive';
 export { ShadowOnScrollDirective } from './shadow-on-scroll.directive';
 export { TextColorDirective } from './text-color.directive';
+export { TextBgColorDirective } from './text-bg-color.directive';
 export { UtilitiesModule } from './utilities.module';

projects/coreui-angular/src/lib/utilities/text-bg-color.directive.spec.ts

@@ -0,0 +1,8 @@
+import { TextBgColorDirective } from './text-bg-color.directive';
+
+describe('TextBgColorDirective', () => {
+  it('should create an instance', () => {
+    const directive = new TextBgColorDirective();
+    expect(directive).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/utilities/text-bg-color.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+import { Colors } from '../coreui.types';
+
+@Directive({
+  selector: '[cTextBgColor]',
+  standalone: true
+})
+export class TextBgColorDirective {
+
+  /**
+   * Set text-bg-color of element
+   * @type Colors
+   */
+  @Input('cTextBgColor') textBgColor: Colors = '';
+
+  @HostBinding('class')
+  get hostClasses(): any {
+    const color = this.textBgColor;
+    return {
+      [`text-bg-${color}`]: !!color
+    };
+  }
+}

projects/coreui-angular/src/lib/utilities/text-color.directive.ts

@@ -21,5 +21,4 @@ export class TextColorDirective {
     };
   }
 
-  constructor() {}
 }

projects/coreui-angular/src/lib/utilities/utilities.module.ts

@@ -6,10 +6,11 @@ import {
   BorderDirective,
   RoundedDirective,
   ShadowOnScrollDirective,
-  TextColorDirective
+  TextColorDirective,
+  TextBgColorDirective,
 } from './public_api';
 
-const UTILITY_DIRECTIVES = [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective];
+const UTILITY_DIRECTIVES = [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective, TextBgColorDirective];
 
 @NgModule({
   imports: [...UTILITY_DIRECTIVES], exports: [...UTILITY_DIRECTIVES]