feat: standalone components (wip)

Author: xidedix

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "coreui-angular-dev",
-  "version": "4.3.10",
+  "version": "4.4.0-next.0",
   "description": "CoreUI Components Library for Angular",
   "copyright": "Copyright 2022 creativeLabs Łukasz Holeczek",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.1.2",
-    "@angular/cdk": "^15.1.2",
+    "@angular/cdk": "^15.1.3",
     "@angular/common": "^15.1.2",
     "@angular/compiler": "^15.1.2",
     "@angular/core": "^15.1.2",
@@ -55,21 +55,21 @@
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.3",
+    "@angular-devkit/build-angular": "^15.1.4",
     "@angular-eslint/builder": "^15.2.0",
     "@angular-eslint/eslint-plugin": "^15.2.0",
     "@angular-eslint/eslint-plugin-template": "^15.2.0",
     "@angular-eslint/schematics": "^15.2.0",
     "@angular-eslint/template-parser": "^15.2.0",
-    "@angular/cli": "^15.1.3",
+    "@angular/cli": "^15.1.4",
     "@angular/compiler-cli": "^15.1.2",
     "@angular/language-service": "^15.1.2",
     "@coreui/icons": "^3.0.0",
     "@types/jasmine": "~4.3.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "eslint": "~8.33.0",
     "jasmine-core": "^4.5.0",
     "karma": "^6.4.1",

package.json

@@ -29,7 +29,7 @@ describe('ChartjsComponent', () => {
     Chart.register(...registerables);
 
     await TestBed.configureTestingModule({
-      declarations: [ChartjsComponent]
+      imports: [ChartjsComponent]
     })
       .compileComponents();
   });

projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts

@@ -28,6 +28,7 @@ let nextId = 0;
   selector: 'c-chart',
   templateUrl: './chartjs.component.html',
   styleUrls: ['./chartjs.component.scss'],
+  standalone: true,
   exportAs: 'cChart'
 })
 export class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { ChartjsComponent } from './chartjs.component';
 
 @NgModule({
-  declarations: [
+  imports: [
     ChartjsComponent
   ],
   exports: [

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

@@ -1,7 +1,8 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[cAccordionButton]'
+  selector: '[cAccordionButton]',
+  standalone: true
 })
 export class AccordionButtonDirective {
 

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

@@ -1,22 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccordionItemComponent } from './accordion-item.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
 import { CollapseModule } from '../../collapse';
-import { AccordionService } from '../accordion.service';
 import { AccordionButtonDirective } from '../accordion-button/accordion-button.directive';
+import { AccordionService } from '../accordion.service';
+import { AccordionItemComponent } from './accordion-item.component';
 
 describe('AccordionItemComponent', () => {
   let component: AccordionItemComponent;
   let fixture: ComponentFixture<AccordionItemComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AccordionItemComponent, AccordionButtonDirective ],
+      declarations: [],
       providers: [AccordionService],
-      imports: [NoopAnimationsModule, CollapseModule]
+      imports: [NoopAnimationsModule, AccordionButtonDirective, AccordionItemComponent, CollapseModule]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

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

@@ -5,12 +5,16 @@ import {
   HostBinding,
   Input,
   OnDestroy,
-  OnInit, QueryList,
+  OnInit,
+  QueryList
 } from '@angular/core';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
-import { AccordionService } from '../accordion.service';
+import { CollapseModule } from '../../collapse';
 import { TemplateIdDirective } from '../../shared';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { AccordionButtonDirective } from '../accordion-button/accordion-button.directive';
+import { AccordionService } from '../accordion.service';
+import { CommonModule } from '@angular/common';
 
 let nextId = 0;
 
@@ -19,49 +23,53 @@ let nextId = 0;
   templateUrl: './accordion-item.component.html',
   styleUrls: ['./accordion-item.component.scss'],
   exportAs: 'cAccordionItem',
+  standalone: true,
+  imports: [AccordionButtonDirective, CollapseModule, CommonModule]
 })
 export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentInit {
 
+  constructor(
+    private accordionService: AccordionService
+  ) { }
+
   static ngAcceptInputType_visible: BooleanInput;
+  contentId = `accordion-item-${nextId++}`;
+  itemContext = { $implicit: this.visible };
+  templates: any = {};
+  @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
+
+  private _visible: boolean = false;
+
+  get visible() {
+    return this._visible;
+  }
 
   /**
    * Toggle an accordion item programmatically
    * @type boolean
    * @default false
    */
   @Input()
-  set visible(value: boolean){
+  set visible(value: boolean) {
     this._visible = coerceBooleanProperty(value);
   }
-  get visible() {
-    return this._visible;
+
+  get open() {
+    return this.visible;
   }
-  private _visible: boolean = false;
 
   @Input()
   set open(value: boolean) {
-    console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.')
+    console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.');
     this.visible = value || this.visible;
   }
-  get open() {
-    return this.visible;
-  }
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'accordion-item': true,
+      'accordion-item': true
     };
   }
-  contentId = `accordion-item-${nextId++}`;
-  itemContext = { $implicit: this.visible };
-  templates: any = {};
-
-  @ContentChildren(TemplateIdDirective, {descendants: true}) contentTemplates!: QueryList<TemplateIdDirective>;
-
-  constructor(
-    private accordionService: AccordionService,
-  ) { }
 
   ngOnInit(): void {
     this.accordionService.addItem(this);

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

@@ -8,20 +8,19 @@ import { CollapseModule } from '../collapse';
 import { SharedModule } from '../shared';
 
 @NgModule({
-  declarations: [
-    AccordionComponent,
-    AccordionButtonDirective,
-    AccordionItemComponent,
-  ],
+  declarations: [],
   imports: [
     CommonModule,
+    AccordionButtonDirective,
+    AccordionComponent,
+    AccordionItemComponent,
     CollapseModule,
     SharedModule
   ],
   exports: [
     AccordionComponent,
     AccordionButtonDirective,
-    AccordionItemComponent,
+    AccordionItemComponent
   ],
   providers: [
     AccordionService

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

@@ -8,7 +8,7 @@ describe('AccordionComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AccordionComponent ]
+      imports: [ AccordionComponent ]
     })
     .compileComponents();
   });

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

@@ -1,14 +1,15 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 import { AccordionService } from '../accordion.service';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'c-accordion',
   template: `<ng-content></ng-content>`,
   styleUrls: ['./accordion.component.scss'],
   exportAs: 'cAccordionItem',
-  providers: [AccordionService]
+  providers: [AccordionService],
+  standalone: true
 })
 export class AccordionComponent {
 

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

@@ -1,7 +1,8 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[cAlertHeading]'
+  selector: '[cAlertHeading]',
+  standalone: true
 })
 export class AlertHeadingDirective {
 

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

@@ -1,7 +1,8 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[cAlertLink]'
+  selector: '[cAlertLink]',
+  standalone: true
 })
 export class AlertLinkDirective {
 

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

@@ -9,10 +9,10 @@ describe('AlertComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AlertComponent ],
-      imports: [BrowserAnimationsModule]
+      declarations: [],
+      imports: [BrowserAnimationsModule, AlertComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {