From 887dbbef589c02330bb04af819bc4ef744dcb1af Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Thu, 11 Jan 2024 14:04:48 +0100
Subject: [PATCH] Refactor code

---
 src/app/app.module.ts                         |  9 +-
 .../products-old/products.component.html      | 18 ----
 .../products-old/products.component.scss      | 13 ---
 .../products-old/products.component.ts        | 83 -------------------
 .../footer-top/footer-top.component.ts        |  2 +-
 .../components/header/header.component.ts     |  2 +-
 .../components/top-bar/top-bar.component.ts   |  2 +-
 .../services/notification.service.ts          |  0
 src/app/{ => core}/services/screen.service.ts |  0
 .../hover-color-picker-directive.service.ts   | 25 ------
 .../product-description.component.ts          |  2 +-
 .../product-gallery.component.ts              |  2 +-
 .../product-info/product-info.component.ts    |  2 +-
 .../product-main/product-main.component.ts    |  4 +-
 .../product-navigation.component.ts           |  2 +-
 .../product-recommend.service.ts              | 10 +--
 .../product-zoom/product-zoom.component.ts    |  2 +-
 .../components/product/product.component.ts   |  2 +-
 .../products}/data/blackSneakers.json         |  0
 .../products}/data/brownSneakers.json         |  0
 .../products}/data/product-samples.ts         |  0
 .../products}/data/products-shoes.ts          |  0
 .../products}/data/whiteShirt.json            |  0
 .../products}/data/whiteSneakers.json         |  0
 src/app/features/products/models/product.ts   | 27 ++++++
 src/app/features/products/products.module.ts  |  2 +-
 .../products/services/product.service.ts      | 52 +-----------
 .../{ => features/products}/templates/.keep   |  0
 .../products-template.component.html          |  0
 .../products-template.component.scss          |  0
 .../products-template.component.ts            |  0
 src/app/models/product.ts                     | 27 ------
 .../click-stop-propagation.directive.ts       |  6 +-
 src/app/shared/shared.module.ts               |  7 +-
 34 files changed, 57 insertions(+), 244 deletions(-)
 delete mode 100644 src/app/components/products-old/products.component.html
 delete mode 100644 src/app/components/products-old/products.component.scss
 delete mode 100644 src/app/components/products-old/products.component.ts
 rename src/app/{ => core}/services/notification.service.ts (100%)
 rename src/app/{ => core}/services/screen.service.ts (100%)
 delete mode 100644 src/app/directives/hover-color-picker-directive.service.ts
 rename src/app/{ => features/products}/data/blackSneakers.json (100%)
 rename src/app/{ => features/products}/data/brownSneakers.json (100%)
 rename src/app/{ => features/products}/data/product-samples.ts (100%)
 rename src/app/{ => features/products}/data/products-shoes.ts (100%)
 rename src/app/{ => features/products}/data/whiteShirt.json (100%)
 rename src/app/{ => features/products}/data/whiteSneakers.json (100%)
 create mode 100644 src/app/features/products/models/product.ts
 rename src/app/{ => features/products}/templates/.keep (100%)
 rename src/app/{ => features/products}/templates/products-template/products-template.component.html (100%)
 rename src/app/{ => features/products}/templates/products-template/products-template.component.scss (100%)
 rename src/app/{ => features/products}/templates/products-template/products-template.component.ts (100%)
 delete mode 100644 src/app/models/product.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 22a3fc1..99a5467 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { VCLDrawerModule, IconResolverService } from '@vcl/ng-vcl';
+import { IconResolverService } from '@vcl/ng-vcl';
 import {
   TranslateModule,
   TranslateLoader,
@@ -22,8 +22,6 @@ import {
   LazyLoadImageModule,
   ScrollHooks,
 } from 'ng-lazyload-image';
-import { ClickStopPropagation } from './shared/click-stop-propagation.directive';
-import { HoverColorPickerDirective } from './directives/hover-color-picker-directive.service';
 import { GraphQLModule } from './graphql.module';
 import { ProductsModule } from './features/products/products.module';
 import { SharedModule } from './shared/shared.module';
@@ -35,10 +33,8 @@ export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
-const vclModules = [];
-
 @NgModule({
-  declarations: [AppComponent, ClickStopPropagation, HoverColorPickerDirective],
+  declarations: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     BrowserAnimationsModule,
@@ -60,7 +56,6 @@ const vclModules = [];
     GraphQLModule,
     OverlayModule,
     ScrollingModule,
-    ...vclModules,
     SharedModule,
   ],
   exports: [TranslateModule],
diff --git a/src/app/components/products-old/products.component.html b/src/app/components/products-old/products.component.html
deleted file mode 100644
index c193c15..0000000
--- a/src/app/components/products-old/products.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<section class="content-area page-products" role="main">
-  <header>
-    <h2 class="page-products__title">Men's Shoes</h2>
-  </header>
-  <main>
-    <div class="page-products__panel grid-row">
-      <app-product-card
-        [ngClass]="{
-          'grid-span-25p': mediaBreakPoint === 'xl',
-          'grid-span-5': mediaBreakPoint === 'l',
-          'grid-span-50p': mediaBreakPoint === 'm'
-        }"
-        *ngFor="let product of products"
-        [product]="product"
-      ></app-product-card>
-    </div>
-  </main>
-</section>
diff --git a/src/app/components/products-old/products.component.scss b/src/app/components/products-old/products.component.scss
deleted file mode 100644
index 80f3393..0000000
--- a/src/app/components/products-old/products.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.page-products {
-  background-color: #f2f2f2;
-
-  &__title {
-    margin: 0;
-    text-align: center;
-    padding: 1em 0;
-  }
-
-  &__panel {
-    box-sizing: border-box;
-  }
-}
diff --git a/src/app/components/products-old/products.component.ts b/src/app/components/products-old/products.component.ts
deleted file mode 100644
index cda091d..0000000
--- a/src/app/components/products-old/products.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
-
-@Component({
-  selector: 'products',
-  templateUrl: './products.component.html',
-  styleUrls: ['./products.component.scss'],
-})
-export class ProductsComponent implements AfterViewInit, OnDestroy {
-  mediaBreakPoint: string;
-
-  groups: { title: string; productCount: number }[] = [
-    { title: 'all', productCount: 244 },
-    { title: 'brand 1', productCount: 170 },
-    { title: 'brand 2', productCount: 74 },
-  ];
-
-  selectedGroup = this.groups[0].title;
-
-  selectedGridSize = '2x2';
-
-  sortOptions: string[] = [
-    'most popular',
-    'newest',
-    'price (low-high)',
-    'price (high-low)',
-  ];
-  sortDropdownExpanded = false;
-  sortBy = this.sortOptions[0];
-
-  filterOptions: string[] = [
-    'size',
-    'color',
-    'brand',
-    'wearing occasion',
-    'season',
-    'capsule',
-  ];
-
-  @Input() currency: string;
-  @Input() products: Product[] = [];
-  @Input() pageTitle: string;
-
-  constructor(public screenService: ScreenService) {}
-
-  ngAfterViewInit(): void {
-    this.screenService.mediaBreakpoint$.subscribe((value) => {
-      this.mediaBreakPoint = value;
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.screenService.ngOnDestroy();
-  }
-
-  sortOptionClicked(option: string, event) {
-    this.sortBy = option;
-    this.sortDropdownExpanded = false;
-    event.stopPropagation();
-  }
-}
-
-export function timeout(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export class Product {
-  id: string | number;
-  title: string;
-  price: number;
-  like: boolean;
-  additionalLabel: string;
-  colors: string[];
-  selectedColor: string;
-  images: {};
-  urls: {};
-}
diff --git a/src/app/core/components/footer-top/footer-top.component.ts b/src/app/core/components/footer-top/footer-top.component.ts
index c733b3e..9e7ce49 100644
--- a/src/app/core/components/footer-top/footer-top.component.ts
+++ b/src/app/core/components/footer-top/footer-top.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-footer-top',
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index fdc2f73..b0f400e 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-header',
diff --git a/src/app/core/components/top-bar/top-bar.component.ts b/src/app/core/components/top-bar/top-bar.component.ts
index a3cc87f..ec38ea0 100644
--- a/src/app/core/components/top-bar/top-bar.component.ts
+++ b/src/app/core/components/top-bar/top-bar.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CartService } from 'src/app/features/cart/services/cart.service';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-top-bar',
diff --git a/src/app/services/notification.service.ts b/src/app/core/services/notification.service.ts
similarity index 100%
rename from src/app/services/notification.service.ts
rename to src/app/core/services/notification.service.ts
diff --git a/src/app/services/screen.service.ts b/src/app/core/services/screen.service.ts
similarity index 100%
rename from src/app/services/screen.service.ts
rename to src/app/core/services/screen.service.ts
diff --git a/src/app/directives/hover-color-picker-directive.service.ts b/src/app/directives/hover-color-picker-directive.service.ts
deleted file mode 100644
index 7da99ed..0000000
--- a/src/app/directives/hover-color-picker-directive.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { ProductService } from '../features/products/services/product.service';
-
-@Directive({
-  selector: '[appHoverColorPicker]',
-})
-export class HoverColorPickerDirective {
-  @Input() appHoverColorPicker = '';
-
-  @HostListener('mouseenter')
-  onMouseEnter() {
-    this.highlight(this.appHoverColorPicker);
-  }
-
-  @HostListener('mouseleave')
-  onMouseLeave() {
-    this.highlight('');
-  }
-
-  private highlight(value: string) {
-    this.productService.productImageColorHover.next(value);
-  }
-
-  constructor(private el: ElementRef, private productService: ProductService) {}
-}
diff --git a/src/app/features/products/components/product-description/product-description.component.ts b/src/app/features/products/components/product-description/product-description.component.ts
index e15eb92..acd9e7a 100644
--- a/src/app/features/products/components/product-description/product-description.component.ts
+++ b/src/app/features/products/components/product-description/product-description.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 import { CartService } from 'src/app/features/cart/services/cart.service';
 
 @Component({
diff --git a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts b/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
index bd160ec..30b0704 100644
--- a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
+++ b/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
@@ -5,7 +5,7 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from 'src/app/core/services/screen.service';
 import { IoRestorecommerceImageImage, IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
 
 @Component({
diff --git a/src/app/features/products/components/product-main/product-info/product-info.component.ts b/src/app/features/products/components/product-main/product-info/product-info.component.ts
index e493766..1d41451 100644
--- a/src/app/features/products/components/product-main/product-info/product-info.component.ts
+++ b/src/app/features/products/components/product-main/product-info/product-info.component.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { Decimal } from '@restorecommerce/cart/lib/model/primitives';
 import { CartService } from 'src/app/features/cart/services/cart.service';
-import { NotificationService } from 'src/app/services/notification.service';
+import { NotificationService } from 'src/app/core/services/notification.service';
 import { IItem } from '@restorecommerce/cart/lib/model/IItem';
 import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
 
diff --git a/src/app/features/products/components/product-main/product-main.component.ts b/src/app/features/products/components/product-main/product-main.component.ts
index 02debf6..478043b 100644
--- a/src/app/features/products/components/product-main/product-main.component.ts
+++ b/src/app/features/products/components/product-main/product-main.component.ts
@@ -1,7 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
-import { Product } from 'src/app/models/product';
-
 @Component({
   selector: 'app-product-main',
   templateUrl: './product-main.component.html',
diff --git a/src/app/features/products/components/product-navigation/product-navigation.component.ts b/src/app/features/products/components/product-navigation/product-navigation.component.ts
index 20b743a..11e2e60 100644
--- a/src/app/features/products/components/product-navigation/product-navigation.component.ts
+++ b/src/app/features/products/components/product-navigation/product-navigation.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-product-navigation',
diff --git a/src/app/features/products/components/product-recommend/product-recommend.service.ts b/src/app/features/products/components/product-recommend/product-recommend.service.ts
index cb3b1df..c2743db 100644
--- a/src/app/features/products/components/product-recommend/product-recommend.service.ts
+++ b/src/app/features/products/components/product-recommend/product-recommend.service.ts
@@ -1,9 +1,9 @@
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 
-import * as blackSneakers from 'src/app/data/blackSneakers.json';
-import * as brownSneakers from 'src/app/data/brownSneakers.json';
-import * as whiteSneakers from 'src/app/data/whiteSneakers.json';
-import * as whiteShirt from 'src/app/data/whiteShirt.json';
+import * as blackSneakers from '../../data/blackSneakers.json';
+import * as brownSneakers from '../../data/brownSneakers.json';
+import * as whiteSneakers from '../../data/whiteSneakers.json';
+import * as whiteShirt from '../../data/whiteShirt.json';
 
 export class ProductRecommendationService {
   private color: string = 'brown';
diff --git a/src/app/features/products/components/product-zoom/product-zoom.component.ts b/src/app/features/products/components/product-zoom/product-zoom.component.ts
index d6d8d21..dd020d2 100644
--- a/src/app/features/products/components/product-zoom/product-zoom.component.ts
+++ b/src/app/features/products/components/product-zoom/product-zoom.component.ts
@@ -9,7 +9,7 @@ import {
   HostListener,
   AfterViewChecked,
 } from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 
 @Component({
   selector: 'app-product-zoom',
diff --git a/src/app/features/products/components/product/product.component.ts b/src/app/features/products/components/product/product.component.ts
index 3956e4a..fec260a 100644
--- a/src/app/features/products/components/product/product.component.ts
+++ b/src/app/features/products/components/product/product.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { ScreenService } from 'src/app/services/screen.service';
 import { ProductService } from 'src/app/features/products/services/product.service';
 import { combineLatest, map, switchMap } from 'rxjs';
+import { ScreenService } from 'src/app/core/services/screen.service';
 
 @Component({
   selector: 'app-product',
diff --git a/src/app/data/blackSneakers.json b/src/app/features/products/data/blackSneakers.json
similarity index 100%
rename from src/app/data/blackSneakers.json
rename to src/app/features/products/data/blackSneakers.json
diff --git a/src/app/data/brownSneakers.json b/src/app/features/products/data/brownSneakers.json
similarity index 100%
rename from src/app/data/brownSneakers.json
rename to src/app/features/products/data/brownSneakers.json
diff --git a/src/app/data/product-samples.ts b/src/app/features/products/data/product-samples.ts
similarity index 100%
rename from src/app/data/product-samples.ts
rename to src/app/features/products/data/product-samples.ts
diff --git a/src/app/data/products-shoes.ts b/src/app/features/products/data/products-shoes.ts
similarity index 100%
rename from src/app/data/products-shoes.ts
rename to src/app/features/products/data/products-shoes.ts
diff --git a/src/app/data/whiteShirt.json b/src/app/features/products/data/whiteShirt.json
similarity index 100%
rename from src/app/data/whiteShirt.json
rename to src/app/features/products/data/whiteShirt.json
diff --git a/src/app/data/whiteSneakers.json b/src/app/features/products/data/whiteSneakers.json
similarity index 100%
rename from src/app/data/whiteSneakers.json
rename to src/app/features/products/data/whiteSneakers.json
diff --git a/src/app/features/products/models/product.ts b/src/app/features/products/models/product.ts
new file mode 100644
index 0000000..983cf82
--- /dev/null
+++ b/src/app/features/products/models/product.ts
@@ -0,0 +1,27 @@
+export interface ProductImage {
+  src: string;
+  srcThumb: string;
+  alt: string;
+}
+
+// TODO Map BackendTypes to a More useful Frontend type.
+
+// export interface MultiColorsProductImage {
+//   [key: string]: ProductImage[];
+// }
+
+// export interface Product {
+//   id: string;
+//   title: string;
+//   description: string;
+//   price: number;
+//   isBestSeller: boolean;
+//   liked: boolean;
+//   productImageSources: MultiColorsProductImage;
+//   materialInfo: string;
+//   additionalLabel: string;
+//   selectedColor: string;
+//   colors: string[];
+//   selectedSize: number;
+//   sizes: number[];
+// }
diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts
index aa44091..b64091f 100644
--- a/src/app/features/products/products.module.ts
+++ b/src/app/features/products/products.module.ts
@@ -5,7 +5,7 @@ import { ShoesComponent } from './components/shoes/shoes.component';
 import { ShoesProductsComponent } from './components/shoes-products/shoes-products.component';
 import { ProductComponent } from './components/product/product.component';
 import { ProductVariantsComponent } from './components/product-variants/product-variants.component';
-import { ProductsTemplateComponent } from '../../templates/products-template/products-template.component';
+import { ProductsTemplateComponent } from './templates/products-template/products-template.component';
 import { ProductCardComponent } from './components/product-card/product-card.component';
 import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
 import { ProductInterestComponent } from './components/product-interest/product-interest.component';
diff --git a/src/app/features/products/services/product.service.ts b/src/app/features/products/services/product.service.ts
index a72dbfe..5f650e8 100644
--- a/src/app/features/products/services/product.service.ts
+++ b/src/app/features/products/services/product.service.ts
@@ -1,9 +1,6 @@
-import { Injectable, EventEmitter, OnDestroy } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable, EventEmitter } from '@angular/core';
 
-import { Product } from '../../../models/product';
-import { Product as ProductCard } from '../components/products/products.component';
-import { Subject, Subscription, map, catchError, of, tap } from 'rxjs';
+import { map, catchError, of, tap } from 'rxjs';
 import {
   IoRestorecommerceProductProduct,
   IoRestorecommerceResourcebaseFilterOperation,
@@ -13,19 +10,10 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class ProductService implements OnDestroy {
-  productImageColorHover = new Subject<string>();
-
-  sub: Subscription;
-
+export class ProductService {
   productColorChanged = new EventEmitter<string>();
 
-  constructor(private http: HttpClient, private productGQL: ProductsQueryGQL) {}
-
-  getShoe(shoeId: number | string) {
-    const url = `/assets/shoes/${shoeId}.json`;
-    return this.http.get<Product>(url);
-  }
+  constructor(private productGQL: ProductsQueryGQL) {}
 
   products$ = this.productGQL
     .fetch({
@@ -58,36 +46,4 @@ export class ProductService implements OnDestroy {
         return of([] as IoRestorecommerceProductProduct[]);
       })
     );
-
-  getShoes() {
-    this.sub = this.productGQL
-      .fetch({
-        input: {
-          offset: 0,
-          limit: 10,
-          filters: [
-            {
-              // TODO This refactor this code as In-house boilerplate code.
-              filters: [
-                {
-                  field: 'meta.owners[*].attributes[0].value',
-                  operation: IoRestorecommerceResourcebaseFilterOperation.In,
-                  value: 'r-ug',
-                },
-              ],
-            },
-          ],
-        },
-      })
-      .subscribe((response) => console.log('Products', response));
-    return this.http.get<ProductCard[]>('/assets/shoes/shoes.json');
-  }
-
-  ngOnDestroy(): void {
-    if (this.sub) {
-      this.sub.unsubscribe();
-    }
-  }
-
-  onProductColorChanged(color: string) {}
 }
diff --git a/src/app/templates/.keep b/src/app/features/products/templates/.keep
similarity index 100%
rename from src/app/templates/.keep
rename to src/app/features/products/templates/.keep
diff --git a/src/app/templates/products-template/products-template.component.html b/src/app/features/products/templates/products-template/products-template.component.html
similarity index 100%
rename from src/app/templates/products-template/products-template.component.html
rename to src/app/features/products/templates/products-template/products-template.component.html
diff --git a/src/app/templates/products-template/products-template.component.scss b/src/app/features/products/templates/products-template/products-template.component.scss
similarity index 100%
rename from src/app/templates/products-template/products-template.component.scss
rename to src/app/features/products/templates/products-template/products-template.component.scss
diff --git a/src/app/templates/products-template/products-template.component.ts b/src/app/features/products/templates/products-template/products-template.component.ts
similarity index 100%
rename from src/app/templates/products-template/products-template.component.ts
rename to src/app/features/products/templates/products-template/products-template.component.ts
diff --git a/src/app/models/product.ts b/src/app/models/product.ts
deleted file mode 100644
index 4d58de4..0000000
--- a/src/app/models/product.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { IItem } from '@restorecommerce/cart/lib/model/IItem';
-
-export interface ProductImage {
-  src: string;
-  srcThumb: string;
-  alt: string;
-}
-
-export interface MultiColorsProductImage {
-  [key: string]: ProductImage[];
-}
-
-export interface Product {
-  id: string;
-  title: string;
-  description: string;
-  price: number;
-  isBestSeller: boolean;
-  liked: boolean;
-  productImageSources: MultiColorsProductImage;
-  materialInfo: string;
-  additionalLabel: string;
-  selectedColor: string;
-  colors: string[];
-  selectedSize: number;
-  sizes: number[];
-}
diff --git a/src/app/shared/click-stop-propagation.directive.ts b/src/app/shared/click-stop-propagation.directive.ts
index d7da3f9..b8ac587 100644
--- a/src/app/shared/click-stop-propagation.directive.ts
+++ b/src/app/shared/click-stop-propagation.directive.ts
@@ -1,11 +1,11 @@
 import { Directive, HostListener } from '@angular/core';
 
 @Directive({
-  selector: '[click-stop-propagation]',
+  selector: '[appStopClickPropagation]',
 })
-export class ClickStopPropagation {
+export class StopClickPropagationDirective {
   @HostListener('click', ['$event'])
-  public onClick(event: any): void {
+  public onClick(event: Event): void {
     event.stopPropagation();
   }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 5a64cb9..269aaa3 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,6 +14,7 @@ import {
 } from '@vcl/ng-vcl';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
+import { StopClickPropagationDirective } from './click-stop-propagation.directive';
 
 const vclModules = [
   VCLBadgeModule,
@@ -28,9 +29,11 @@ const vclModules = [
   VCLPanelModule,
 ];
 
+const directives = [StopClickPropagationDirective];
+
 @NgModule({
-  declarations: [],
+  declarations: [...directives],
   imports: [CommonModule],
-  exports: [...vclModules, TranslateModule, FormsModule],
+  exports: [TranslateModule, FormsModule, ...vclModules, ...directives],
 })
 export class SharedModule {}