refactor: size and sizing prop, hostClasses cleanup

Author: xidedix

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

@@ -143,6 +143,7 @@ export class AlertComponent {
   readonly hostClasses = computed(() => {
     const color = this.color();
     const variant = this.variant();
+
     return {
       alert: true,
       'alert-dismissible': this.dismissible,

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

@@ -34,7 +34,7 @@ export class AvatarComponent {
    * Size the component small, large, or extra large.
    * @default 'md'
    */
-  readonly size: InputSignal<Omit<Sizes, 'xxl'>> = input<Omit<Sizes, 'xxl'>>('');
+  readonly size = input<Omit<Sizes, 'xxl'>>('');
 
   /**
    * The alt attribute for the img element alternate text.
@@ -69,11 +69,15 @@ export class AvatarComponent {
   });
 
   readonly hostClasses = computed(() => {
+    const size = this.size();
+    const color = this.color();
+    const shape = this.shape();
+
     return {
       avatar: true,
-      [`avatar-${this.size()}`]: !!this.size(),
-      [`bg-${this.color()}`]: !!this.color(),
-      [`${this.shape()}`]: !!this.shape()
+      [`avatar-${size}`]: !!size,
+      [`bg-${color}`]: !!color,
+      [`${shape}`]: !!shape
     } as Record<string, boolean>;
   });
 }

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

@@ -35,7 +35,7 @@ export class BadgeComponent {
   /**
    * Size the component small.
    */
-  readonly size: InputSignal<'sm' | undefined> = input();
+  readonly size = input<'sm'>();
 
   /**
    * Sets the text color of the component to one of CoreUI’s themed colors.
@@ -63,12 +63,16 @@ export class BadgeComponent {
       'start-0': position?.includes('start')
     };
 
+    const color = this.color();
+    const size = this.size();
+    const shape = this.shape();
+
     return Object.assign(
       {
         badge: true,
-        [`bg-${this.color()}`]: !!this.color(),
-        [`badge-${this.size()}`]: !!this.size(),
-        [`${this.shape()}`]: !!this.shape()
+        [`bg-${color}`]: !!color,
+        [`badge-${size}`]: !!size,
+        [`${shape}`]: !!shape
       },
       !!position ? positionClasses : {}
     ) as Record<string, boolean>;

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

@@ -1,4 +1,4 @@
-import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
+import { booleanAttribute, Component, computed, input, InputSignalWithTransform } from '@angular/core';
 
 @Component({
   selector: 'c-button-group',
@@ -8,9 +8,9 @@ import { booleanAttribute, Component, computed, input, InputSignal, InputSignalW
 export class ButtonGroupComponent {
   /**
    * Size the component small or large.
-   * @type { 'sm' | 'lg' }
+   * @return { 'sm' | 'lg' }
    */
-  readonly size: InputSignal<'sm' | 'lg' | undefined> = input();
+  readonly size = input<'' | 'sm' | 'lg' | string>();
 
   /**
    * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
@@ -20,16 +20,18 @@ export class ButtonGroupComponent {
 
   /**
    * Default role attr for ButtonGroup. [docs]
-   * @type InputSignal<string>
+   * @return string
    * @default 'group'
    */
-  readonly role: InputSignal<string> = input('group');
+  readonly role = input<string>('group');
 
   readonly hostClasses = computed(() => {
+    const size = this.size();
+    const vertical = this.vertical();
     return {
-      'btn-group': !this.vertical(),
-      'btn-group-vertical': this.vertical(),
-      [`btn-group-${this.size()}`]: !!this.size()
+      'btn-group': !vertical,
+      'btn-group-vertical': vertical,
+      [`btn-group-${size}`]: !!size
     } as Record<string, boolean>;
   });
 }

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

@@ -24,11 +24,13 @@ export class ButtonCloseDirective extends ButtonDirective {
   readonly white: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   override readonly hostClasses = computed(() => {
+    const size = this.size();
+
     return {
       btn: true,
       'btn-close': true,
       'btn-close-white': this.white(),
-      [`btn-${this.size()}`]: !!this.size(),
+      [`btn-${size}`]: !!size,
       active: this.active(),
       disabled: this._disabled()
     } as Record<string, boolean>;

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

@@ -47,15 +47,15 @@ export class ButtonDirective {
 
   /**
    * Select the shape of the component.
-   * @type InputSignal<Shapes>
+   * @return Shapes
    */
-  readonly shape: InputSignal<Shapes | undefined> = input<Shapes>();
+  readonly shape = input<Shapes>();
 
   /**
    * Size the component small or large.
-   * @type InputSignal<'sm' | 'lg' | ''>
+   * @return  sm' | 'lg' | ''
    */
-  readonly size: InputSignal<'' | 'sm' | 'lg'> = input<'' | 'sm' | 'lg'>('');
+  readonly size = input<'' | 'sm' | 'lg' | string>('');
 
   /**
    * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
@@ -77,13 +77,18 @@ export class ButtonDirective {
   readonly variant: InputSignal<'ghost' | 'outline' | undefined> = input<'ghost' | 'outline'>();
 
   readonly hostClasses = computed(() => {
+    const color = this.color();
+    const variant = this.variant();
+    const size = this.size();
+    const shape = this.shape();
+
     return {
       btn: true,
-      [`btn-${this.color()}`]: !!this.color() && !this.variant(),
-      [`btn-${this.variant()}`]: !!this.variant() && !this.color(),
-      [`btn-${this.variant()}-${this.color()}`]: !!this.variant() && !!this.color(),
-      [`btn-${this.size()}`]: !!this.size(),
-      [`${this.shape()}`]: !!this.shape(),
+      [`btn-${color}`]: !!color && !variant,
+      [`btn-${variant}`]: !!variant && !color,
+      [`btn-${variant}-${color}`]: !!variant && !!color,
+      [`btn-${size}`]: !!size,
+      [`${shape}`]: !!shape,
       active: this.active(),
       disabled: this._disabled()
     } as Record<string, boolean>;

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

@@ -16,6 +16,7 @@ export class CalloutComponent {
 
   readonly hostClasses = computed(() => {
     const color = this.color();
+
     return {
       callout: true,
       [`callout-${color}`]: !!color

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

@@ -35,6 +35,7 @@ export class CardComponent {
 
   readonly hostClasses = computed(() => {
     const color = this.color();
+
     return {
       card: true,
       [`bg-${color}`]: !!color

projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts

@@ -58,6 +58,7 @@ export class DropdownMenuDirective implements OnInit, AfterContentInit {
   readonly hostClasses = computed(() => {
     const alignment = this.alignment();
     const visible = this.visible();
+
     return {
       'dropdown-menu': true,
       [`dropdown-menu-${alignment}`]: !!alignment,

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

@@ -20,15 +20,16 @@ export class FooterComponent {
 
   /**
    * Default role for footer. [docs]
-   * @type string
+   * @return string
    * @default 'contentinfo'
    */
-  readonly role: InputSignal<string> = input('contentinfo');
+  readonly role = input<string>('contentinfo');
 
   readonly hostClasses = computed(() => {
+    const position = this.position();
     return {
       footer: true,
-      [`footer-${this.position()}`]: !!this.position()
+      [`footer-${position}`]: !!position
     } as Record<string, boolean>;
   });
 }