refactor: type hostClasses() as Record<string, boolean>

Author: xidedix

projects/coreui-angular/src/lib/accordion/accordion-button/accordion-button.directive.ts

@@ -22,7 +22,7 @@ export class AccordionButtonDirective {
     return {
       'accordion-button': true,
       collapsed: this.collapsed()
-    };
+    } as Record<string, boolean>;
   });
 
   readonly ariaExpanded = computed(() => !this.collapsed());

projects/coreui-angular/src/lib/accordion/accordion/accordion.component.ts

@@ -29,8 +29,8 @@ export class AccordionComponent {
     this.#accordionService.alwaysOpen = this.alwaysOpen();
   });
 
-  readonly hostClasses = computed<Record<string, boolean>>(() => ({
+  readonly hostClasses = computed(() => ({
     accordion: true,
     'accordion-flush': this.flush()
-  }));
+  }) as Record<string, boolean>);
 }

projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts

@@ -30,6 +30,6 @@ export class ButtonGroupComponent {
       'btn-group': !this.vertical(),
       'btn-group-vertical': this.vertical(),
       [`btn-group-${this.size()}`]: !!this.size()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/form/form-check/form-check.component.ts

@@ -49,6 +49,6 @@ export class FormCheckComponent {
       [`form-switch-${sizing}`]: isSwitch && !!sizing,
       'form-check-inline': this.inline(),
       'form-check-reverse': this.reverse()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/form/form-feedback/form-feedback.component.ts

@@ -27,6 +27,6 @@ export class FormFeedbackComponent {
       // 'valid-tooltip': valid === true && tooltip,
       // 'invalid-feedback': valid !== true && !tooltip,
       // 'invalid-tooltip': valid !== true && tooltip
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts

@@ -14,6 +14,6 @@ export class FormFloatingDirective {
   readonly hostClasses = computed(() => {
     return {
       'form-floating': this.floating()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/form/form-select/form-select.directive.ts

@@ -25,6 +25,6 @@ export class FormSelectDirective {
       [`form-select-${sizing}`]: !!sizing,
       'is-valid': valid === true,
       'is-invalid': valid === false
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/form/form/form.directive.ts

@@ -15,6 +15,6 @@ export class FormDirective {
   readonly hostClasses = computed(() => {
     return {
       'was-validated': this.validated()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts

@@ -50,7 +50,7 @@ export class ListGroupItemDirective {
       active: !!this.active(),
       disabled: this._disabled(),
       [`list-group-item-${this.color()}`]: !!this.color()
-    };
+    } as Record<string, boolean>;
   });
 
   readonly _disabled = computed(() => this.disabled());

projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.ts

@@ -43,6 +43,6 @@ export class ModalDialogComponent {
       [`modal-fullscreen-${fullscreen}-down`]: typeof fullscreen === 'string',
       'modal-dialog-scrollable': this.scrollable(),
       [`modal-${size}`]: !!size
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/nav/nav.component.ts

@@ -26,6 +26,6 @@ export class NavComponent {
       nav: true,
       [`nav-${layout}`]: !!layout,
       [`nav-${variant}`]: !!variant
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.ts

@@ -22,6 +22,6 @@ export class PlaceholderAnimationDirective {
   readonly hostClasses = computed(() => {
     return {
       [`placeholder-${this.animation()}`]: this.placeholder()?.visible() && !!this.animation()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts

@@ -32,6 +32,6 @@ export class PlaceholderDirective {
     return {
       placeholder: this.visible(),
       [`placeholder-${this.size()}`]: !!this.size()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/popover/popover/popover.component.ts

@@ -48,13 +48,13 @@ export class PopoverComponent implements OnDestroy {
   readonly viewContainerRef = viewChild('popoverTemplate', { read: ViewContainerRef });
   private textNode!: Text;
 
-  readonly hostClasses = computed<Record<string, boolean>>(() => {
+  readonly hostClasses = computed(() => {
     return {
       popover: true,
       fade: true,
       show: this.visible(),
       'bs-popover-auto': true
-    };
+    } as Record<string, boolean>;
   });
 
   ngOnDestroy(): void {

projects/coreui-angular/src/lib/spinner/spinner.component.ts

@@ -49,6 +49,6 @@ export class SpinnerComponent {
       [`spinner-${this.variant()}`]: true,
       [`text-${this.color()}`]: !!this.color(),
       [`spinner-${this.variant()}-${this.size()}`]: !!this.size()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/table/table-color.directive.ts

@@ -13,11 +13,11 @@ export class TableColorDirective {
    * Use contextual color for tables, table rows or individual cells.
    * @return Colors
    */
-  readonly color = input<Colors>(undefined, { alias: "cTableColor" });
+  readonly color = input<Colors>(undefined, { alias: 'cTableColor' });
 
-  readonly hostClasses = computed((): Record<string,boolean> =>  {
+  readonly hostClasses = computed(() => {
     return {
       [`table-${this.color()}`]: !!this.color()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/table/table.directive.ts

@@ -106,7 +106,7 @@ export class TableDirective {
       'table-sm': small,
       'table-striped': striped,
       'table-striped-columns': stripedColumns
-    };
+    } as Record<string, boolean>;
   });
 
   readonly #responsiveWrapperEffect = effect(() => {

projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts

@@ -104,7 +104,7 @@ export class TabPanelComponent {
     fade: this.transition(),
     show: this.show(),
     invisible: this.tabsService.activeItem()?.disabled
-  }));
+  }) as Record<string, boolean>);
 
   @HostBinding('@.disabled')
   get animationDisabled(): boolean {

projects/coreui-angular/src/lib/tabs-2/tab/tab.directive.ts

@@ -94,7 +94,7 @@ export class TabDirective implements FocusableOption, OnInit {
     'nav-link': true,
     active: this.isActive(),
     disabled: this.#disabled()
-  }));
+  }) as Record<string, boolean>);
 
   readonly propId = computed(() => this.id() ?? `${this.#tabsService.id()}-tab-${this.itemKey()}`);
 

projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts

@@ -54,7 +54,7 @@ export class TabsListComponent {
     nav: true,
     [`nav-${this.layout()}`]: this.layout(),
     [`nav-${this.variant()}`]: this.variant()
-  }));
+  }) as Record<string, boolean>);
 
   readonly tabs = contentChildren(TabDirective);
   #focusKeyManager!: FocusKeyManager<TabDirective>;

projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts

@@ -96,7 +96,7 @@ export class ToasterComponent implements OnInit {
       'translate-middle-x': placement.includes('center') && !placement.includes('middle'),
       'translate-middle-y': placement.includes('middle') && !placement.includes('center'),
       'translate-middle': placement.includes('middle') && placement.includes('center')
-    };
+    } as Record<string, boolean>;
   });
 
   ngOnInit(): void {

projects/coreui-angular/src/lib/tooltip/tooltip/tooltip.component.ts

@@ -46,13 +46,13 @@ export class TooltipComponent implements OnDestroy {
   readonly viewContainerRef = viewChild('tooltipTemplate', { read: ViewContainerRef });
   private textNode!: Text;
 
-  readonly hostClasses = computed<Record<string, boolean>>(() => {
+  readonly hostClasses = computed(() => {
     return {
       tooltip: true,
       fade: true,
       show: this.visible(),
       'bs-tooltip-auto': true
-    };
+    } as Record<string, boolean>;
   });
 
   ngOnDestroy(): void {

projects/coreui-angular/src/lib/utilities/align.directive.ts

@@ -17,6 +17,6 @@ export class AlignDirective {
     const align = this.align();
     return {
       [`align-${align}`]: !!align
-    };
+    } as Record<string, boolean>;
   });
 }

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

@@ -23,6 +23,6 @@ export class BgColorDirective {
     return {
       [`bg-${color}`]: !!color,
       'bg-gradient': this.gradient()
-    };
+    } as Record<string, boolean>;
   });
 }

projects/coreui-angular/src/lib/utilities/border.directive.ts

@@ -13,7 +13,7 @@ export class BorderDirective {
    */
   readonly cBorder = input<Border>(true);
 
-  readonly hostClasses = computed(() =>  {
+  readonly hostClasses = computed<Record<string, boolean>>(() => {
     const border = this.cBorder();
     if (typeof border === 'boolean') {
       return { border: true };

projects/coreui-angular/src/lib/utilities/rounded.directive.ts

@@ -13,7 +13,7 @@ export class RoundedDirective {
    */
   readonly cRounded = input<Rounded>(true);
 
-  readonly hostClasses = computed(() => {
+  readonly hostClasses = computed<Record<string, boolean>>(() => {
     const rounded = this.cRounded();
     if (typeof rounded === 'boolean') {
       return { rounded: true };