Feat/ng standalone component update (#2154)

* feat(angular): converting modules to use standalone apis * feat: first bunch of standalone components --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jose Fernando Gomez Flores <jose.gomezflores@teradata.com>
Teradata · May 1, 2024 · 9c5f1e4 · 9c5f1e4
1 parent 36c547d
commit 9c5f1e4
Show file tree

Hide file tree

Showing 28 changed files with 198 additions and 126 deletions.
diff --git a/apps/docs-app/src/app/app.module.ts b/apps/docs-app/src/app/app.module.ts
@@ -35,7 +35,6 @@ import { TdHighlightComponent } from '@covalent/highlight';
 import { TdMarkdownComponent } from '@covalent/markdown';
 import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
 import { CovalentLayoutModule } from '@covalent/core/layout';
-import { CovalentFileModule } from '@covalent/core/file';
 
 import { SidenavContentModule } from './components/shared/sidenav-content/sidenav-content.module';
 
@@ -51,6 +50,10 @@ import {
 import { ContentContainerModule } from './components/content-container/content-container.module';
 import { HomeComponent } from './components/home/home.component';
 import { ToolbarModule } from './components/toolbar/toolbar.module';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 
 @NgModule({
   declarations: [DocsAppComponent, HomeComponent], // directives, components, and pipes owned by this NgModule
@@ -76,6 +79,8 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
     CovalentLayoutModule,
     TdHighlightComponent,
     TdMarkdownComponent,
+    TdFileInputComponent,
+    TdFileUploadComponent,
     CovalentDynamicFormsModule,
     ToolbarModule,
     TranslateModule.forRoot({
@@ -88,7 +93,6 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
     SidenavContentModule,
     ContentContainerModule,
     appRoutes,
-    CovalentFileModule,
   ], // modules needed to run this module
   providers: [
     appRoutingProviders,

diff --git a/apps/docs-app/src/app/components/shared/component-overview/component-overview.module.ts b/apps/docs-app/src/app/components/shared/component-overview/component-overview.module.ts
@@ -10,7 +10,10 @@ import { ComponentOverviewComponent } from './component-overview.component';
 import { RouterModule } from '@angular/router';
 import { DocumentationToolsModule } from '../../../documentation-tools';
 import { CovalentCommonModule } from '@covalent/core/common';
-import { CovalentFileModule } from '@covalent/core/file';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 @NgModule({
   declarations: [ComponentOverviewComponent],
   exports: [ComponentOverviewComponent],
@@ -25,7 +28,8 @@ import { CovalentFileModule } from '@covalent/core/file';
     /** Covalent Modules */
     CovalentCommonModule,
     DocumentationToolsModule,
-    CovalentFileModule,
+    TdFileInputComponent,
+    TdFileUploadComponent,
   ],
 })
 export class ComponentOverviewModule {}
diff --git a/...ts/component-demos/dynamic-menu/demos/dynamic-menu-demo-basic/dynamic-menu-hero.shared.ts b/...ts/component-demos/dynamic-menu/demos/dynamic-menu-demo-basic/dynamic-menu-hero.shared.ts
@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { DynamicMenuDemoBasicComponent } from './dynamic-menu-demo-basic.component';
-import { CovalentDynamicMenuModule } from '@covalent/core/dynamic-menu';
+import { TdDynamicMenuComponent } from '@covalent/core/dynamic-menu';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [DynamicMenuDemoBasicComponent],
   imports: [
     CommonModule,
-    CovalentDynamicMenuModule,
+    TdDynamicMenuComponent,
     MatButtonModule,
     MatIconModule,
   ],

diff --git a/...app/src/app/content/components/component-demos/file-input/demos/file-input-demo.module.ts b/...app/src/app/content/components/component-demos/file-input/demos/file-input-demo.module.ts
@@ -1,21 +1,25 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FileInputDemoBasicComponent } from './file-input-demo-basic/file-input-demo-basic.component';
-import { CovalentFileModule } from '@covalent/core/file';
 import { FileInputDemoComponent } from './file-input-demo.component';
 import { FileInputDemoRoutingModule } from './file-input-demo-routing.module';
 import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 
 @NgModule({
   declarations: [FileInputDemoComponent, FileInputDemoBasicComponent],
   imports: [
     DemoModule,
     FileInputDemoRoutingModule,
     /** Covalent Modules */
-    CovalentFileModule,
+    TdFileInputComponent,
+    TdFileUploadComponent,
     /** Angular Modules */
     CommonModule,
     FormsModule,

diff --git a/apps/docs-app/src/app/content/components/component-demos/file-input/file-input.module.ts b/apps/docs-app/src/app/content/components/component-demos/file-input/file-input.module.ts
@@ -12,10 +12,14 @@ import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
 
 import { ComponentDetailsModule } from '../../../../components/shared/component-details/component-details.module';
-import { CovalentFileModule } from '@covalent/core/file';
+
 import { TdHighlightComponent } from '@covalent/highlight';
 import { setComponentRoutes } from '../../../../content/components/components';
 import { FileInputDemoComponent } from './file-input.component';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 
 const routes: Routes = setComponentRoutes({
   overviewDemoComponent: FileInputDemoComponent,
@@ -38,7 +42,8 @@ const routes: Routes = setComponentRoutes({
     MatTabsModule,
     ComponentDetailsModule,
     // Covalent
-    CovalentFileModule,
+    TdFileInputComponent,
+    TdFileUploadComponent,
     TdHighlightComponent,
     // Docs
     // Routes

diff --git a/...-app/src/app/content/components/component-demos/side-sheet/demos/sidesheet-demo.module.ts b/...-app/src/app/content/components/component-demos/side-sheet/demos/sidesheet-demo.module.ts
@@ -14,6 +14,7 @@ import {
 import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module';
 import { SidesheetDemoComponent } from './sidesheet-demo.component';
 import { SidesheetDemoRoutingModule } from './sidesheet-demo-routing.module';
+import { CovalentSideSheetContainerComponent } from 'libs/angular/side-sheet/src/side-sheet-container';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,7 @@ import { SidesheetDemoRoutingModule } from './sidesheet-demo-routing.module';
     DemoModule,
     SidesheetDemoRoutingModule,
     /** Covalent Modules */
-    CovalentSideSheetModule,
+    CovalentSideSheetContainerComponent,
     /** Angular Modules */
     CommonModule,
     MatIconModule,

diff --git a/apps/docs-app/src/app/content/components/component-demos/side-sheet/sidesheet.module.ts b/apps/docs-app/src/app/content/components/component-demos/side-sheet/sidesheet.module.ts
@@ -15,6 +15,7 @@ import { CovalentSideSheetModule } from '@covalent/core/side-sheet';
 import { setComponentRoutes } from '../../../../content/components/components';
 import { SidesheetDemoComponent } from './sidesheet.component';
 import { MatButtonModule } from '@angular/material/button';
+import { CovalentSideSheetContainerComponent } from 'libs/angular/side-sheet/src/side-sheet-container';
 
 const routes: Routes = setComponentRoutes({
   overviewDemoComponent: SidesheetDemoComponent,
@@ -38,7 +39,7 @@ const routes: Routes = setComponentRoutes({
     ComponentDetailsModule,
     // Covalent
     TdHighlightComponent,
-    CovalentSideSheetModule,
+    CovalentSideSheetContainerComponent,
     // Docs
     // Routes
     RouterModule.forChild(routes),

diff --git a/...namic-forms/src/lib/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html b/...namic-forms/src/lib/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
@@ -2,7 +2,7 @@
   <mat-form-field
     tdFileDrop
     class="td-dynamic-file-input-field"
-    [disabled]="control.disabled"
+    [attr.disabled]="control.disabled"
     (fileDrop)="_handlefileDrop($event)"
     (click)="!control.disabled && fileInput.inputElement.click()"
     (keyup.enter)="!control.disabled && fileInput.inputElement.click()"

diff --git a/libs/angular-dynamic-forms/src/lib/dynamic-forms.module.ts b/libs/angular-dynamic-forms/src/lib/dynamic-forms.module.ts
@@ -12,7 +12,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 
-import { CovalentFileModule } from '@covalent/core/file';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 
 import { TdDynamicFormsComponent } from './dynamic-forms.component';
 import {
@@ -76,7 +79,8 @@ const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS: Type<any>[] = [
     MatIconModule,
     MatButtonModule,
     MatDatepickerModule,
-    CovalentFileModule,
+    TdFileInputComponent,
+    TdFileUploadComponent,
   ],
   exports: [...TD_DYNAMIC_FORMS, ...TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
   providers: [DYNAMIC_FORMS_PROVIDER],

diff --git a/libs/angular/dynamic-forms/src/lib/dynamic-forms.module.ts b/libs/angular/dynamic-forms/src/lib/dynamic-forms.module.ts
@@ -12,8 +12,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 
-import { CovalentFileModule } from '@covalent/core/file';
-
 import { TdDynamicFormsComponent } from './dynamic-forms.component';
 import {
   TdDynamicElementComponent,
@@ -30,6 +28,10 @@ import { TdDynamicCheckboxComponent } from './dynamic-elements/dynamic-checkbox/
 import { TdDynamicSliderComponent } from './dynamic-elements/dynamic-slider/dynamic-slider.component';
 import { TdDynamicSelectComponent } from './dynamic-elements/dynamic-select/dynamic-select.component';
 import { TdDynamicDatepickerComponent } from './dynamic-elements/dynamic-datepicker/dynamic-datepicker.component';
+import {
+  TdFileInputComponent,
+  TdFileUploadComponent,
+} from '@covalent/core/file';
 
 const TD_DYNAMIC_FORMS: Type<any>[] = [
   TdDynamicFormsComponent,
@@ -76,7 +78,8 @@ const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS: Type<any>[] = [
     MatIconModule,
     MatButtonModule,
     MatDatepickerModule,
-    CovalentFileModule,
+    TdFileInputComponent,
+    TdFileUploadComponent,
   ],
   exports: [...TD_DYNAMIC_FORMS, ...TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
   providers: [DYNAMIC_FORMS_PROVIDER],

diff --git a/libs/angular/dynamic-menu/README.md b/libs/angular/dynamic-menu/README.md
@@ -60,18 +60,31 @@ export interface ITdDynamicMenuLinkClickEvent {
 
 ## Setup
 
-Import the **[CovalentDynamicMenuModule]** in your NgModule:
+Import the **[TdDynamicMenuComponent]** in your NgModule or your standalone component:
 
 ```typescript
-import { CovalentDynamicMenuModule } from '@covalent/core/dynamic-menu';
+import { TdDynamicMenuComponent } from '@covalent/core/dynamic-menu';
+
 @NgModule({
   imports: [
-    CovalentDynamicMenuModule,
+    TdDynamicMenuComponent,
     ...
   ],
   ...
 })
 export class MyModule {}
+
+OR
+
+@Component({
+  ...
+  standalone: true,
+  imports: [
+    ...
+    TdDynamicMenuComponent
+  ]
+})
+export class MyComponent {}
 ```
 
 ## Usage

diff --git a/libs/angular/dynamic-menu/dynamic-menu.module.ts b/libs/angular/dynamic-menu/dynamic-menu.module.ts
@@ -1,30 +1,18 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { TdDynamicMenuComponent } from './src/dynamic-menu.component';
 import { TdDynamicMenuItemComponent } from './src/dynamic-menu-item/dynamic-menu-item.component';
 import { TdDynamicMenuLinkComponent } from './src/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component';
 
+/**
+ * @deprecated since version 8.x, modules are no longer needed use standalone components instead
+ */
 @NgModule({
-  declarations: [
+  imports: [
     TdDynamicMenuComponent,
     TdDynamicMenuItemComponent,
     TdDynamicMenuLinkComponent,
   ],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatListModule,
-    MatMenuModule,
-    MatTooltipModule,
-  ],
-  providers: [],
   exports: [
     TdDynamicMenuComponent,
     TdDynamicMenuItemComponent,

diff --git a/libs/angular/dynamic-menu/src/dynamic-menu-item/dynamic-menu-item.component.ts b/libs/angular/dynamic-menu/src/dynamic-menu-item/dynamic-menu-item.component.ts
@@ -5,13 +5,27 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { MatMenu } from '@angular/material/menu';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
 import { IMenuItem, ITdDynamicMenuLinkClickEvent } from '../dynamic-menu.menu';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { TdDynamicMenuLinkComponent } from './dynamic-menu-link/dynamic-menu-link.component';
+import { CommonModule } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'td-dynamic-menu-item',
   templateUrl: './dynamic-menu-item.component.html',
   styleUrls: ['./dynamic-menu-item.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDividerModule,
+    MatIconModule,
+    MatMenuModule,
+    MatTooltipModule,
+    TdDynamicMenuLinkComponent,
+  ],
 })
 export class TdDynamicMenuItemComponent {
   @Input() items!: IMenuItem[];

diff --git a/...gular/dynamic-menu/src/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.ts b/...gular/dynamic-menu/src/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.ts
@@ -1,4 +1,9 @@
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import {
   IMenuItem,
   ITdDynamicMenuLinkClickEvent,
@@ -8,6 +13,8 @@ import {
   selector: 'td-dynamic-menu-link',
   templateUrl: './dynamic-menu-link.component.html',
   styleUrls: ['./dynamic-menu-link.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatDividerModule, MatMenuModule],
 })
 export class TdDynamicMenuLinkComponent {
   @Input() item!: IMenuItem;

diff --git a/libs/angular/dynamic-menu/src/dynamic-menu.component.ts b/libs/angular/dynamic-menu/src/dynamic-menu.component.ts
@@ -1,14 +1,27 @@
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TdDynamicMenuItemComponent } from './dynamic-menu-item/dynamic-menu-item.component';
 import {
   IMenuItem,
   IMenuTrigger,
   ITdDynamicMenuLinkClickEvent,
 } from './dynamic-menu.menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'td-dynamic-menu',
   styleUrls: ['dynamic-menu.component.scss'],
   templateUrl: './dynamic-menu.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+    TdDynamicMenuItemComponent,
+  ],
 })
 export class TdDynamicMenuComponent {
   @Input() trigger!: IMenuTrigger;