Move to module

package.json

@@ -34,7 +34,6 @@
     "@tailwindcss/typography": "^0.5.6",
     "ngx-pagination": "^6.0.2",
     "ngx-permissions": "^13.0.1",
-    "ngx-skeleton-loader": "^6.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts

@@ -1,10 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Meta, Title } from '@angular/platform-browser';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
-import { environment } from 'environments/environment';
 import { forgotPasswordAction } from '../../store/auth.actions';
 import {
   selectError,
@@ -15,7 +13,7 @@ import {
 @Component({
   templateUrl: './forgot-password.component.html',
 })
-export class ForgotPasswordComponent implements OnInit {
+export class ForgotPasswordComponent {
   public form: FormGroup = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
   });
@@ -26,28 +24,7 @@ export class ForgotPasswordComponent implements OnInit {
 
   public loading$: Observable<boolean> = this.store.select(selectLoading);
 
-  constructor(
-    private fb: FormBuilder,
-    private store: Store,
-    private meta: Meta,
-    private title: Title
-  ) {}
-
-  ngOnInit(): void {
-    this.title.setTitle($localize`Mot de passe oublié | Admin CPanel`);
-    this.meta.updateTag({
-      property: 'og:url',
-      content: environment.baseUrl + '/forgot-password',
-    });
-    this.meta.updateTag({
-      property: 'og:title',
-      content: $localize`Mot de passe oublié | Admin CPanel`,
-    });
-    this.meta.updateTag({
-      property: 'og:description',
-      content: $localize`Réinitialisez votre mot de passe`,
-    });
-  }
+  constructor(private fb: FormBuilder, private store: Store) {}
 
   public submit() {
     if (this.form.valid) {

src/app/shared/components/alert/alert.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ErrorComponent } from './error.component';
+import { SuccessComponent } from './success.component';
+
+const COMPONENTS = [ErrorComponent, SuccessComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS,
+})
+export class AlertModule {}

src/app/shared/components/alert/error.component.ts

@@ -34,8 +34,6 @@ import { Component, Input } from '@angular/core';
 })
 export class ErrorComponent {
   @Input() class!: string;
-
   @Input() message!: string;
-
   @Input() errors: string[] = [];
 }

src/app/shared/components/alert/success.component.ts

@@ -27,6 +27,5 @@ import { Component, Input } from '@angular/core';
 })
 export class SuccessComponent {
   @Input() class!: string;
-
   @Input() message!: string;
 }

src/app/shared/components/buttons/button.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ButtonPrimaryComponent } from './primary.component';
+import { ButtonLinkComponent } from './link.component';
+import { ButtonDefaultComponent } from './default.component';
+import { RouterModule } from '@angular/router';
+
+const COMPONENTS = [
+  ButtonPrimaryComponent,
+  ButtonLinkComponent,
+  ButtonDefaultComponent,
+];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule, RouterModule],
+  exports: COMPONENTS,
+})
+export class ButtonModule {}

src/app/shared/components/buttons/default.component.ts

@@ -33,8 +33,6 @@ import { Observable } from 'rxjs';
 })
 export class ButtonDefaultComponent {
   @Input() type: string = 'button';
-
   @Input() loading$!: Observable<boolean>;
-
   @Input() class!: string;
 }

src/app/shared/components/buttons/link.component.ts

@@ -6,13 +6,12 @@ import { Component, Input } from '@angular/core';
     <a
       [routerLink]="link"
       [ngClass]="class"
-      class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-slate-300 dark:hover:text-white dark:focus:ring-offset-gray-800">
+      class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
       <ng-content></ng-content>
     </a>
   `,
 })
 export class ButtonLinkComponent {
   @Input() link!: any;
-
   @Input() class!: string;
 }

src/app/shared/components/buttons/primary.component.ts

@@ -35,8 +35,6 @@ import { Observable } from 'rxjs';
 })
 export class ButtonPrimaryComponent {
   @Input() type: string = 'button';
-
   @Input() loading$!: Observable<boolean>;
-
   @Input() class!: string;
 }

src/app/shared/components/headings/heading.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PageHeadingWithActionComponent } from './page-heading-with-action.component';
+import { PageHeadingComponent } from './page-heading.component';
+
+const COMPONENTS = [PageHeadingWithActionComponent, PageHeadingComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS,
+})
+export class HeadingModule {}

src/app/shared/components/headings/page-heading.component.ts

@@ -22,6 +22,5 @@ import { Component, Input } from '@angular/core';
 })
 export class PageHeadingComponent {
   @Input() title!: string;
-
   @Input() description!: string;
 }

src/app/shared/components/inputs/inputs.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { OverlapingLabelComponent } from './overlaping-label/overlaping-label.component';
+
+const COMPONENTS = [OverlapingLabelComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  exports: COMPONENTS,
+})
+export class InputsModule {}

src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts

@@ -16,21 +16,13 @@ export class OverlapingLabelComponent implements ControlValueAccessor {
   value: string = '';
 
   @Input() label!: string | null;
-
   @Input() placeholder!: string | null;
-
   @Input() name!: string;
-
   @Input() type: string = 'text';
-
   @Input() required: boolean = false;
-
   @Input() disabled!: boolean;
-
   @Input() containerClass!: string;
-
   @Input() inputClass!: string;
-
   @Input() helpText!: string | null;
 
   writeValue(value: string): void {

src/app/shared/components/skeletons/skeleton.component.ts

@@ -0,0 +1,20 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'skeleton',
+  template: `
+    <div class="animate-pulse" [ngClass]="styleClass">
+      <ng-content></ng-content>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SkeletonComponent {
+  @Input() styleClass!: string;
+}

src/app/shared/components/skeletons/skeleton.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BackdropLoaderComponent } from './backdrop-loader.component';
+import { SkeletonComponent } from './skeleton.component';
+
+const COMPONENTS = [BackdropLoaderComponent, SkeletonComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS,
+})
+export class SkeletonModule {}