refactor: remove empty constructors, wrapper components host class, cleanups

Author: xidedix

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

@@ -3,7 +3,6 @@ import {
   booleanAttribute,
   Component,
   ContentChildren,
-  HostBinding,
   Input,
   OnDestroy,
   OnInit,
@@ -47,13 +46,6 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
     return <boolean>this.visible;
   }
 
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'accordion-item': true
-    };
-  }
-
   contentId = `accordion-item-${nextId++}`;
   itemContext = { $implicit: <boolean>this.visible };
   templates: any = {};

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

@@ -3,12 +3,9 @@ import { AccordionItemComponent } from './accordion-item/accordion-item.componen
 
 @Injectable()
 export class AccordionService {
-
   items: AccordionItemComponent[] = [];
   alwaysOpen = false;
 
-  constructor() { }
-
   addItem(item: AccordionItemComponent): void {
     this.items.push(item);
   }

projects/coreui-angular/src/lib/alert/alert-heading.directive.ts

@@ -1,19 +1,8 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cAlertHeading]',
-  standalone: true
+  standalone: true,
+  host: { class: 'alert-heading' }
 })
-export class AlertHeadingDirective {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-
-    return {
-      'alert-heading': true,
-    };
-  }
-
-  constructor() { }
-
-}
+export class AlertHeadingDirective {}

projects/coreui-angular/src/lib/alert/alert-link.directive.ts

@@ -1,19 +1,8 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cAlertLink]',
-  standalone: true
+  standalone: true,
+  host: { class: 'alert-link' }
 })
-export class AlertLinkDirective {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-
-    return {
-      'alert-link': true,
-    };
-  }
-
-  constructor() { }
-
-}
+export class AlertLinkDirective {}

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

@@ -3,7 +3,8 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
   selector: 'c-breadcrumb',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'breadcrumb' }
 })
 export class BreadcrumbComponent {
   /**
@@ -12,20 +13,15 @@ export class BreadcrumbComponent {
    * @default 'breadcrumb'
    */
   @HostBinding('attr.aria-label')
-  @Input() ariaLabel = 'breadcrumb';
+  @Input()
+  ariaLabel = 'breadcrumb';
 
   /**
    * Default role for breadcrumb. [docs]
    * @type string
    * @default 'navigation'
    */
   @HostBinding('attr.role')
-  @Input() role = 'navigation';
-
-  @HostBinding('class')
-  get hostClasses() {
-    return {
-      breadcrumb: true
-    };
-  }
+  @Input()
+  role = 'navigation';
 }

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

@@ -3,7 +3,8 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
   selector: 'c-button-toolbar',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'btn-toolbar' }
 })
 export class ButtonToolbarComponent {
   /**
@@ -12,12 +13,6 @@ export class ButtonToolbarComponent {
    * @default 'toolbar'
    */
   @HostBinding('attr.role')
-  @Input() role = 'toolbar';
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'btn-toolbar': true
-    };
-  }
+  @Input()
+  role = 'toolbar';
 }

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

@@ -5,12 +5,10 @@ import { ButtonDirective } from './button.directive';
 @Directive({
   selector: '[cButtonClose]',
   standalone: true,
-  hostDirectives: [
-    { directive: ThemeDirective, inputs: ['dark'] }
-  ]
+  hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
+  host: { class: 'btn btn-close' }
 })
 export class ButtonCloseDirective extends ButtonDirective {
-
   /**
    * Change the default color to white.
    * @type boolean

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

@@ -5,10 +5,10 @@ import { ButtonType, Colors, Shapes } from '../coreui.types';
 @Directive({
   selector: '[cButton]',
   exportAs: 'cButton',
-  standalone: true
+  standalone: true,
+  host: { class: 'btn' }
 })
 export class ButtonDirective {
-
   /**
    * Toggle the active state for the component. [docs]
    * @type boolean
@@ -43,7 +43,8 @@ export class ButtonDirective {
    * Different browsers may use different default types for the `<button>` element.
    */
   @HostBinding('attr.type')
-  @Input() type: ButtonType = 'button';
+  @Input()
+  type: ButtonType = 'button';
 
   /**
    * Set the button variant to an outlined button or a ghost button.
@@ -68,7 +69,7 @@ export class ButtonDirective {
   @HostBinding('attr.aria-disabled')
   get ariaDisabled() {
     return this.disabled || null;
-  };
+  }
 
   @HostBinding('attr.aria-pressed')
   get isActive(): boolean | null {
@@ -78,7 +79,7 @@ export class ButtonDirective {
   @HostBinding('attr.disabled')
   get attrDisabled() {
     return this.disabled ? '' : null;
-  };
+  }
 
   @HostBinding('attr.tabindex')
   get tabIndex(): string | null {

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

@@ -5,10 +5,10 @@ import { Colors } from '../coreui.types';
   selector: 'c-callout, [cCallout]',
   template: '<ng-content />',
   styleUrls: ['./callout.component.scss'],
-  standalone: true
+  standalone: true,
+  host: { class: 'callout' }
 })
 export class CalloutComponent {
-
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
@@ -22,5 +22,4 @@ export class CalloutComponent {
       [`callout-${this.color}`]: !!this.color
     };
   }
-
 }

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

@@ -1,16 +1,9 @@
-import {Component, HostBinding} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-card-body, [c-card-body]',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-body' }
 })
-export class CardBodyComponent {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-body': true,
-    };
-  }
-}
+export class CardBodyComponent {}

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

@@ -1,16 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-card-footer, [c-card-footer]',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-footer' }
 })
-export class CardFooterComponent {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-footer': true
-    };
-  }
-}
+export class CardFooterComponent {}

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

@@ -1,16 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-card-group, [c-card-group]',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-group' }
 })
-export class CardGroupComponent {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-group': true
-    };
-  }
-}
+export class CardGroupComponent {}

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

@@ -1,16 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-card-header, [c-card-header]',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-header' }
 })
-export class CardHeaderComponent {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-header': true
-    };
-  }
-}
+export class CardHeaderComponent {}

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

@@ -1,17 +1,10 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-card-img-overlay',
   template: '<ng-content />',
   styleUrls: ['./card-img-overlay.component.scss'],
-  standalone: true
+  standalone: true,
+  host: { class: 'card-img-overlay' }
 })
-export class CardImgOverlayComponent {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-img-overlay': true
-    };
-  }
-}
+export class CardImgOverlayComponent {}

projects/coreui-angular/src/lib/card/card-link.directive.ts

@@ -1,15 +1,8 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardLink]',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-link' }
 })
-export class CardLinkDirective {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-link': true
-    };
-  }
-}
+export class CardLinkDirective {}

projects/coreui-angular/src/lib/card/card-subtitle.directive.ts

@@ -1,15 +1,8 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardSubtitle]',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-subtitle' }
 })
-export class CardSubtitleDirective {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-subtitle': true
-    };
-  }
-}
+export class CardSubtitleDirective {}

projects/coreui-angular/src/lib/card/card-text.directive.ts

@@ -1,15 +1,8 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardText]',
-  standalone: true
+  standalone: true,
+  host: { class: 'card-text' }
 })
-export class CardTextDirective {
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'card-text': true
-    };
-  }
-}
+export class CardTextDirective {}