refactor(widget): update to v5

Author: xidedix

projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts

@@ -38,7 +38,7 @@ export class WidgetStatAComponent implements AfterContentInit {
     return {
       'card': true,
       [`bg-${this.color}`]: !!this.color,
-      'text-high-emphasis-inverse': !!this.color
+      'text-white': !!this.color
     };
   }
 

projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html

@@ -7,7 +7,7 @@
   }
   <ng-content />
   @if (text) {
-    <small [ngClass]="inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'">
+    <small [ngClass]="inverse ? 'text-white text-opacity-75' : 'text-body-secondary'">
       {{ text }}
     </small>
   }

projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts

@@ -1,7 +1,7 @@
 import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
 import { NgClass } from '@angular/common';
 
-import { Colors } from '../../coreui.types';
+import { Colors, TextColors } from '../../coreui.types';
 import { CardBodyComponent, CardComponent } from '../../card';
 
 @Component({
@@ -26,7 +26,7 @@ export class WidgetStatBComponent extends CardComponent {
    * Sets the text-color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() override textColor?: Colors | 'white' | 'muted';
+  @Input() override textColor?: TextColors;
   /**
    * Title of the widget to display
    * @type string
@@ -55,7 +55,7 @@ export class WidgetStatBComponent extends CardComponent {
       'card': true,
       [`bg-${this.color}`]: !!this.color,
       [`text-${this.textColor}`]: !!this.textColor,
-      'text-high-emphasis-inverse': !!this.color
+      'text-white': !!this.inverse
     };
   }
 

projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts

@@ -45,32 +45,23 @@ export class WidgetStatCComponent extends CardComponent implements AfterContentI
    * Invert colors from their default dark shade.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) inverse: string | boolean = false;
+  @Input({ transform: booleanAttribute }) inverse: boolean = false;
 
   templates: any = {};
   @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
 
   @HostBinding('class')
   get hostExtendedClass() {
     return {
-      'high-emphasis-inverse': this.inverse
-    };
-  }
-
-  get iconClasses() {
-    return {
-      'mb-4': !this.textColor,
-      'text-end': true,
-      'text-medium-emphasis': !this.inverse,
-      'text-medium-emphasis-inverse': this.inverse,
-      [`text-${this.textColor}`]: !!this.textColor
+      'text-white': this.inverse
     };
   }
 
   get titleClasses() {
     return {
-      'text-medium-emphasis': !this.inverse,
-      'text-medium-emphasis-inverse': this.inverse,
+      'text-body-secondary': !this.inverse,
+      'text-white': this.inverse,
+      'text-opacity-75': this.inverse,
       [`text-${this.textColor}`]: !!this.textColor
     };
   }
@@ -79,9 +70,16 @@ export class WidgetStatCComponent extends CardComponent implements AfterContentI
     return {
       'fs-4': !this.textColor,
       'fw-semibold': true,
-      'text-high-emphasis': !this.inverse,
-      'text-high-emphasis-inverse': this.inverse,
-      [`text-${this.textColor}`]: !!this.textColor
+      ...this.titleClasses,
+      'text-opacity-75': false
+    };
+  }
+
+  get iconClasses() {
+    return {
+      'mb-4': !this.textColor,
+      'text-end': true,
+      ...this.titleClasses
     };
   }
 

projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html

@@ -8,7 +8,7 @@
     }
     <c-col>
       <div class="fs-5 fw-semibold">{{ item.value }}</div>
-      <div class="text-uppercase text-medium-emphasis small">{{ item.title }}</div>
+      <div class="text-uppercase text-body-secondary small">{{ item.title }}</div>
     </c-col>
   }
 </c-card-body>

projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts

@@ -20,6 +20,7 @@ export class WidgetStatEComponent extends CardComponent {
    * @type string
    */
   @Input() title?: string;
+
   /**
    * Value for your widget to display
    * @type string | number
@@ -28,7 +29,7 @@ export class WidgetStatEComponent extends CardComponent {
 
   get titleClasses() {
     return {
-      'text-medium-emphasis': !this.textColor,
+      'text-body-secondary': !this.textColor,
       'small': true,
       'text-uppercase': true,
       'fw-semibold': true,

projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts

@@ -94,7 +94,7 @@ export class WidgetStatFComponent implements AfterContentInit {
 
   get titleClasses() {
     return {
-      'text-medium-emphasis': !this.textColor,
+      'text-body-secondary': !this.textColor,
       'small': true,
       'text-uppercase': true,
       'fw-semibold': true,