2 |
5 |
19 | No results found
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/app/features/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { combineLatest } from 'rxjs';
3 | import {
4 | delay,
5 | distinctUntilChanged,
6 | map,
7 | takeUntil,
8 | tap,
9 | } from 'rxjs/operators';
10 | import { BaseComponent, DataService, ProductType, UIService } from '../../core';
11 | import { ScaleFadeStagger, ScaleFade } from '../../shared';
12 |
13 | @Component({
14 | selector: 'app-home',
15 | templateUrl: './home.component.html',
16 | animations: [ScaleFadeStagger, ScaleFade],
17 | })
18 | export class HomeComponent extends BaseComponent {
19 | products = null;
20 | selectedProductType$ = this.uiService.selectProductType$();
21 | productItems$ = combineLatest([
22 | this.dataService.getProducts$(),
23 | this.uiService.selectSearchQuery$(),
24 | this.selectedProductType$,
25 | ]).pipe(
26 | takeUntil(this.destroy$),
27 | map(([products, keyword, productType]) => {
28 | if (productType && productType !== ProductType.explore) {
29 | products = products.filter((product) => product.type === productType);
30 | }
31 | if (keyword) {
32 | products = products.filter((product) =>
33 | product.title.toLowerCase().includes(keyword.toLowerCase())
34 | );
35 | }
36 | return products;
37 | }),
38 | distinctUntilChanged((prev, curr) => prev.length === curr.length),
39 | tap(() => (this.products = null)),
40 | delay(500),
41 | tap((products) => (this.products = products))
42 | );
43 |
44 | constructor(private dataService: DataService, private uiService: UIService) {
45 | super();
46 | this.productItems$.subscribe();
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/features/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { SharedModule } from '../../shared';
6 | import { HomeRoutingModule } from './home-routing.module';
7 | import { HomeComponent } from './home.component';
8 |
9 | @NgModule({
10 | imports: [CommonModule, FormsModule, SharedModule, HomeRoutingModule],
11 | declarations: [HomeComponent],
12 | })
13 | export class HomeModule {}
14 |
--------------------------------------------------------------------------------
/src/app/shared/animations/bounce.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate, keyframes } from '@angular/animations';
2 |
3 | export const DEFAULT_TIMING = '0.5';
4 |
5 | export const bounceIn = animation(
6 | animate(
7 | '{{ timing }}s {{ delay }}s cubic-bezier(0.17, 0.89, 0.24, 1.11)',
8 | keyframes([
9 | style({
10 | opacity: 0,
11 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
12 | offset: 0,
13 | }),
14 | style({
15 | opacity: 1,
16 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
17 | offset: 0.6,
18 | }),
19 | style({
20 | opacity: 1,
21 | transform: 'scale3d(1, 1, 1) translate3d(0,0,0)',
22 | offset: 1,
23 | }),
24 | ])
25 | ),
26 | { params: { timing: DEFAULT_TIMING, delay: 0 } }
27 | );
28 |
29 | export const bounceOut = animation(
30 | animate(
31 | '{{ timing }}s {{ delay }}s cubic-bezier(0.6, 0.72, 0, 1)',
32 | keyframes([
33 | style({
34 | opacity: 1,
35 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
36 | offset: 0.3,
37 | }),
38 | style({
39 | opacity: 0,
40 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 500px, 0)',
41 | offset: 1,
42 | }),
43 | ])
44 | ),
45 | { params: { timing: DEFAULT_TIMING, delay: 0 } }
46 | );
47 |
--------------------------------------------------------------------------------
/src/app/shared/animations/fade.animation.ts:
--------------------------------------------------------------------------------
1 | import {
2 | transition,
3 | style,
4 | animate,
5 | trigger,
6 | animation,
7 | } from '@angular/animations';
8 |
9 | export const Fade = trigger('fade', [
10 | transition(
11 | ':enter',
12 | animation([
13 | style({ opacity: 0 }),
14 | animate(
15 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
16 | style({ opacity: 1 })
17 | ),
18 | ])
19 | ),
20 | transition(
21 | ':leave',
22 | animation([
23 | style({ opacity: 1 }),
24 | animate(
25 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
26 | style({ opacity: 0 })
27 | ),
28 | ])
29 | ),
30 | ]);
31 |
--------------------------------------------------------------------------------
/src/app/shared/animations/index.ts:
--------------------------------------------------------------------------------
1 | export * from './slide.animation';
2 | export * from './scale.animation';
3 | export * from './bounce.animation';
4 | export * from './fade.animation';
5 |
--------------------------------------------------------------------------------
/src/app/shared/animations/scale.animation.ts:
--------------------------------------------------------------------------------
1 | import {
2 | transition,
3 | style,
4 | animate,
5 | trigger,
6 | stagger,
7 | query,
8 | animation,
9 | } from '@angular/animations';
10 |
11 | export const ScaleFade = trigger('scaleFade', [
12 | transition(
13 | ':enter',
14 | animation([
15 | style({ opacity: 0, transform: 'scale(0.8, 0.8)' }),
16 | animate(
17 | '0.3s ease-in-out',
18 | style({ opacity: 1, transform: 'scale(1, 1)' })
19 | ),
20 | ])
21 | ),
22 | transition(
23 | ':leave',
24 | animation([
25 | animate(
26 | '0.3s ease-in-out',
27 | style({
28 | opacity: 0,
29 | transform: 'scale(0.8, 0.8)',
30 | })
31 | ),
32 | ])
33 | ),
34 | ]);
35 |
36 | export const ScaleFadeStagger = trigger('scaleFadeStagger', [
37 | transition(':enter', [
38 | query(
39 | ':enter',
40 | [
41 | style({ opacity: 0, transform: 'scale(0.8, 0.8)' }),
42 | stagger('50ms', [
43 | animate(
44 | '300ms 300ms',
45 | style({ opacity: 1, transform: 'scale(1, 1)' })
46 | ),
47 | ]),
48 | ],
49 | { optional: true }
50 | ),
51 | ]),
52 | transition(':leave', [
53 | query(
54 | ':leave',
55 | [
56 | stagger('50ms', [
57 | animate('300ms', style({ opacity: 0, transform: 'scale(0.8, 0.8)' })),
58 | ]),
59 | ],
60 | { optional: true }
61 | ),
62 | ]),
63 | ]);
64 |
--------------------------------------------------------------------------------
/src/app/shared/animations/slide.animation.ts:
--------------------------------------------------------------------------------
1 | import {
2 | transition,
3 | style,
4 | animate,
5 | trigger,
6 | useAnimation,
7 | animation,
8 | } from '@angular/animations';
9 |
10 | export const SlideEnterAnimation = animation([
11 | style({ transform: 'translate({{ x }}, {{ y }})' }),
12 | animate(
13 | '{{ duration }} cubic-bezier(0.59, 0.32, 0.38, 1.13)',
14 | style({ transform: 'translate(0)' })
15 | ),
16 | ]);
17 |
18 | export const SlideExitAnimation = animation([
19 | style({ transform: 'translate(0)' }),
20 | animate(
21 | '{{ duration }} cubic-bezier(0.59, 0.32, 0.38, 1.13)',
22 | style({ transform: 'translate({{ x }}, {{ y }})' })
23 | ),
24 | ]);
25 |
26 | // export const SlideToCart = trigger('slideToCart', [
27 | // transition(
28 | // ':enter',
29 | // animate('300ms', style({
30 | // transform: 'translate('
31 | // }))
32 | // ),
33 | // // transition(
34 | // // ':leave',
35 | // // useAnimation(SlideExitAnimation, {
36 | // // params: { x: `-${window.innerWidth}px`, y: 0, duration: '0.5s' },
37 | // // })
38 | // // ),
39 | // ]);
40 |
41 | export const SlideLeft = trigger('slideLeft', [
42 | transition(
43 | ':enter',
44 | useAnimation(SlideEnterAnimation, {
45 | params: { x: `-${window.innerWidth}px`, y: 0, duration: '0.5s' },
46 | })
47 | ),
48 | transition(
49 | ':leave',
50 | useAnimation(SlideExitAnimation, {
51 | params: { x: `-${window.innerWidth}px`, y: 0, duration: '0.5s' },
52 | })
53 | ),
54 | ]);
55 |
56 | export const SlideRight = trigger('slideRight', [
57 | transition(
58 | ':enter',
59 | useAnimation(SlideEnterAnimation, {
60 | params: { x: `${window.innerWidth}px`, y: 0, duration: '0.5s' },
61 | })
62 | ),
63 | transition(
64 | ':leave',
65 | useAnimation(SlideExitAnimation, {
66 | params: { x: `${window.innerWidth}px`, y: 0, duration: '0.5s' },
67 | })
68 | ),
69 | ]);
70 |
71 | export const SlideFadeLeft = trigger('slideFadeLeft', [
72 | transition(
73 | ':enter',
74 | animation([
75 | style({ opacity: 0, height: 0, transform: 'translate(100px, 0)' }),
76 | animate(
77 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
78 | style({ opacity: 1, height: '*', transform: 'translate(0, 0)' })
79 | ),
80 | ])
81 | ),
82 | transition(
83 | ':leave',
84 | animation([
85 | animate(
86 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
87 | style({ opacity: 0, height: 0, transform: 'translate(100px, 0)' })
88 | ),
89 | ])
90 | ),
91 | ]);
92 |
--------------------------------------------------------------------------------
/src/app/shared/components/cards/cart-product-card/cart-product-card.component.html:
--------------------------------------------------------------------------------
1 | {{ selectedProductType$ | async | titlecase }}
3 | 4 |
6 |
7 |
16 |
17 |
18 |
13 |
15 |
2 | ![]()
3 |
--------------------------------------------------------------------------------
/src/app/shared/components/cards/cart-product-card/cart-product-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { CartService, ICartProduct } from '../../../../core';
3 |
4 | @Component({
5 | selector: 'app-cart-product-card',
6 | templateUrl: './cart-product-card.component.html',
7 | })
8 | export class CartProductCardComponent {
9 | @Input() product: ICartProduct;
10 |
11 | constructor(private cartService: CartService) {}
12 |
13 | removeFromCart(productId: number): void {
14 | this.cartService.removeFromCart(productId);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/shared/components/cards/index.ts:
--------------------------------------------------------------------------------
1 | import { ProductCardComponent } from './product-card/product-card.component';
2 | import { CartProductCardComponent } from './cart-product-card/cart-product-card.component';
3 | export const CARD_COMPONENTS = [ProductCardComponent, CartProductCardComponent];
4 |
5 | export * from './product-card/product-card.component';
6 | export * from './cart-product-card/cart-product-card.component';
7 |
--------------------------------------------------------------------------------
/src/app/shared/components/cards/product-card/product-card.component.html:
--------------------------------------------------------------------------------
1 |
4 | {{ product?.title }}
5 | Quantity: {{ product?.count }}
6 |
9 |
10 | ${{ product?.price }}
11 |
3 |
10 |
11 |
4 |
6 |
7 |
9 |
14 |
32 |
15 | ![]()
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 |
31 |
26 | {{ product?.title }}
27 | {{ product?.description }}
28 | ${{ product?.price }}
29 |
30 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/components/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, ViewChild } from '@angular/core';
2 | import { delay, map, tap, withLatestFrom } from 'rxjs/operators';
3 | import { BaseComponent, CartService, UIService } from '../../../core';
4 |
5 | @Component({
6 | selector: 'app-header',
7 | templateUrl: './header.component.html',
8 | })
9 | export class HeaderComponent extends BaseComponent {
10 | @ViewChild('cartButton') cartButton: ElementRef;
11 | searchQuery = '';
12 | cartCount$ = this.cartService.selectTotalProductQuantity$().pipe(
13 | delay(600),
14 | withLatestFrom(this.uiService.selectAnimated$()),
15 | tap(([count, isAnimated]) => {
16 | if (isAnimated && count > 0 && this.cartButton?.nativeElement) {
17 | this.cartButton.nativeElement.animate(
18 | [
19 | // keyframes
20 | { transform: 'translate3d(0, -5px, 0) scaleY(1.1)' },
21 | { transform: 'translate3d(0, -10px, 0) scaleY(1.05)' },
22 | { transform: 'translate3d(0, 5px, 0) scaleY(0.95)' },
23 | { transform: 'translate3d(0, 0, 0) scaleY(1)' },
24 | ],
25 | {
26 | // timing options
27 | duration: 200,
28 | }
29 | );
30 | }
31 | }),
32 | map(([count, isAnimated]) => count)
33 | );
34 |
35 | constructor(private uiService: UIService, private cartService: CartService) {
36 | super();
37 | }
38 |
39 | openCart(): void {
40 | this.uiService.toggleCart(true);
41 | }
42 |
43 | onSearch(keyword: string): void {
44 | this.uiService.search(keyword);
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/shared/components/index.ts:
--------------------------------------------------------------------------------
1 | import { from } from 'rxjs';
2 | import { CARD_COMPONENTS } from './cards';
3 | import { HeaderComponent } from './header/header.component';
4 | import { LAYERS } from './layers';
5 | import { MenuComponent } from './menu/menu.component';
6 |
7 | export const COMPONENTS = [
8 | HeaderComponent,
9 | MenuComponent,
10 | ...LAYERS,
11 | ...CARD_COMPONENTS,
12 | ];
13 |
14 | export * from './header/header.component';
15 | export * from './menu/menu.component';
16 | export * from './cards';
17 | export * from './layers';
18 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/cart/cart.component.html:
--------------------------------------------------------------------------------
1 |
3 |
9 |
10 |
11 |
12 |
23 |
24 |
2 |
11 |
20 |
25 |
26 |
34 |
35 |
36 |
45 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/cart/cart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { BaseComponent, CartService, UIService } from '../../../../core';
3 | import { SlideFadeLeft } from '../../../animations';
4 |
5 | @Component({
6 | selector: 'app-cart',
7 | templateUrl: './cart.component.html',
8 | animations: [SlideFadeLeft],
9 | })
10 | export class CartComponent extends BaseComponent {
11 | products$ = this.cartService.selectProducts$();
12 | totalPrice$ = this.cartService.selectTotalPrice$();
13 | constructor(private uiService: UIService, private cartService: CartService) {
14 | super();
15 | }
16 |
17 | closeCart(): void {
18 | this.uiService.toggleCart(false);
19 | }
20 |
21 | checkout(): void {
22 | this.uiService.toggleOrderConfirmation(true);
23 | this.cartService.clearCart();
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/index.ts:
--------------------------------------------------------------------------------
1 | import { CartComponent } from './cart/cart.component';
2 | import { OrderConfirmationComponent } from './order-confirmation/order-confirmation.component';
3 | import { CartButtonComponent } from './product-details/cart-button/cart-button.component';
4 | import { ProductDetailsComponent } from './product-details/product-details.component';
5 |
6 | export const LAYERS = [
7 | CartComponent,
8 | OrderConfirmationComponent,
9 | ProductDetailsComponent,
10 | CartButtonComponent,
11 | ];
12 |
13 | export * from './cart/cart.component';
14 | export * from './order-confirmation/order-confirmation.component';
15 | export * from './product-details/product-details.component';
16 | export * from './product-details/cart-button/cart-button.component';
17 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/order-confirmation/order-confirmation.component.html:
--------------------------------------------------------------------------------
1 |
3 |
9 |
10 | YOUR SHOPPING CART
4 | 5 | 8 |
12 |
13 |
17 |
18 |
19 |
14 |
16 |
21 |
24 | TOTAL
22 |${{ totalPrice }}
23 |
27 |
32 |
33 |
37 |
44 |
38 |
39 | 
40 |
43 |
40 | Your cart is Empty
41 |Looks like you haven't added anything to your cart yet
42 |
2 | 
9 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/order-confirmation/order-confirmation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { BaseComponent, UIService } from '../../../../core';
3 |
4 | @Component({
5 | selector: 'app-order-confirmation',
6 | templateUrl: './order-confirmation.component.html',
7 | })
8 | export class OrderConfirmationComponent extends BaseComponent {
9 | constructor(private uiService: UIService) {
10 | super();
11 | }
12 |
13 | closeOrderConfirmation(): void {
14 | this.uiService.toggleOrderConfirmation(false);
15 | }
16 |
17 | noop(event) {
18 | event.stopPropagation();
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/product-details/cart-button/cart-button.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/product-details/cart-button/cart-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import {
3 | animate,
4 | animation,
5 | style,
6 | transition,
7 | trigger,
8 | } from '@angular/animations';
9 | import {
10 | BaseComponent,
11 | CartService,
12 | IProduct,
13 | UIService,
14 | } from '../../../../../core';
15 |
16 | @Component({
17 | selector: 'app-cart-button',
18 | templateUrl: './cart-button.component.html',
19 | animations: [
20 | trigger('addToCartText', [
21 | transition(
22 | ':enter',
23 | animation([
24 | style({
25 | transform: 'translate(200px,0)',
26 | }),
27 | animate(
28 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
29 | style({
30 | transform: 'translate(0)',
31 | })
32 | ),
33 | ])
34 | ),
35 | transition(
36 | ':leave',
37 | animation([
38 | style({ transform: 'translate(0)' }),
39 | animate(
40 | '0.3s cubic-bezier(0.59, 0.32, 0.38, 1.13)',
41 | style({
42 | transform: 'translate(-200px,0)',
43 | })
44 | ),
45 | ])
46 | ),
47 | ]),
48 | ],
49 | })
50 | export class CartButtonComponent extends BaseComponent {
51 | @Input() product: IProduct;
52 | addState: 'DEFAULT' | 'ADDED' = 'DEFAULT';
53 | animated$ = this.uiService.selectAnimated$();
54 |
55 | constructor(private uiService: UIService, private cartService: CartService) {
56 | super();
57 | }
58 |
59 | addToCart(): void {
60 | if (this.addState === 'ADDED') {
61 | return;
62 | }
63 | this.addState = 'ADDED';
64 | this.cartService.addToCart(this.product);
65 |
66 | // reset to default state
67 | // some delay here to simulate some processing time
68 | // when user clicks on add to cart
69 | setTimeout(() => {
70 | this.addState = 'DEFAULT';
71 | }, 2000);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/product-details/product-details.component.html:
--------------------------------------------------------------------------------
1 |
3 |
6 |
7 |
8 |
9 | Thank you for your Order!
10 | 11 |12 | Your random objects order has been placed successfully. You should get a confirmation email with a random tracking information. 13 |
14 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/product-details/product-details.component.scss:
--------------------------------------------------------------------------------
1 | .product-details-container {
2 | max-height: 80vh;
3 | overflow-y: hidden;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/shared/components/layers/product-details/product-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { BaseComponent, IProduct, UIService } from '../../../../core';
3 |
4 | @Component({
5 | selector: 'app-product-details',
6 | templateUrl: './product-details.component.html',
7 | styleUrls: ['./product-details.component.scss'],
8 | })
9 | export class ProductDetailsComponent extends BaseComponent {
10 | @Input() product: IProduct;
11 |
12 | constructor(private uiService: UIService) {
13 | super();
14 | }
15 |
16 | closeProductDetails(): void {
17 | this.uiService.closeProductDetails();
18 | }
19 |
20 | noop(event) {
21 | event.stopPropagation();
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/shared/components/menu/menu.component.html:
--------------------------------------------------------------------------------
1 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
40 |
41 |
12 | ![]()
13 |
14 |
15 |
16 |
27 |
34 |
38 |
39 | {{ product.title }}
17 | ${{ product?.price }} 18 |19 | {{ product.description }} 20 |
21 | 22 |23 | {{ product.longDescription }} 24 |
25 | 26 |Categories
28 |
29 |
33 |
30 | {{ category }}
31 |
32 |
35 |
37 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/components/menu/menu.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | animate,
4 | animation,
5 | style,
6 | state,
7 | transition,
8 | trigger,
9 | } from '@angular/animations';
10 | import {
11 | BaseComponent,
12 | DataService,
13 | ProductType,
14 | UIService,
15 | } from '../../../core';
16 |
17 | @Component({
18 | selector: 'app-menu',
19 | templateUrl: './menu.component.html',
20 | animations: [
21 | trigger('menuOptionsBackground', [
22 | state('DEFAULT', style({ backgroundColor: 'transparent' })),
23 | state('ACTIVE', style({ backgroundColor: '#93C5FE' })),
24 | transition('* => *', animate('0.3s ease-in-out')),
25 | ]),
26 | ],
27 | })
28 | export class MenuComponent extends BaseComponent {
29 | productTypes$ = this.dataService.getProductTypes$();
30 | selectedProductType$ = this.uiService.selectProductType$();
31 | animated$ = this.uiService.selectAnimated$();
32 | constructor(private dataService: DataService, private uiService: UIService) {
33 | super();
34 | }
35 |
36 | selectMenuItem(productType: ProductType): void {
37 | this.uiService.selectProductType(productType);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export * from './animations';
3 | export * from './shared.module';
4 |
--------------------------------------------------------------------------------
/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
5 | import { COMPONENTS } from './components';
6 |
7 | @NgModule({
8 | imports: [CommonModule, FormsModule, FontAwesomeModule],
9 | declarations: [...COMPONENTS],
10 | exports: [...COMPONENTS],
11 | })
12 | export class SharedModule {}
13 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/auth0-blog/angular-animations-storefront/99cfee0e09752edfea068718ac44a245674f6cb6/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/images/order-confirmation.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/images/potted-plant.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/assets/local-data/product-types.json:
--------------------------------------------------------------------------------
1 | {
2 | "productTypes": [
3 | {
4 | "displayName": "Explore",
5 | "typeKey": "explore"
6 | },
7 | {
8 | "displayName": "New",
9 | "typeKey": "new"
10 | },
11 | {
12 | "displayName": "Trending",
13 | "typeKey": "trending"
14 | },
15 | {
16 | "displayName": "For you",
17 | "typeKey": "recommended"
18 | },
19 | {
20 | "displayName": "Random",
21 | "typeKey": "random"
22 | }
23 | ]
24 | }
--------------------------------------------------------------------------------
/src/assets/local-data/products.json:
--------------------------------------------------------------------------------
1 | {
2 | "products": [
3 | {
4 | "productId": 1,
5 | "title": "Sunshine Telephone",
6 | "description": "Take a call from the sun",
7 | "longDescription": "This phone lets you get a tan whenever you want! Just pick up the phone and feel the sun rays warm your skin.",
8 | "catagories": ["objects"],
9 | "type": "new",
10 | "price": 15,
11 | "imageUrl": "https://source.unsplash.com/-haAxbjiHds/700x700"
12 | },
13 | {
14 | "productId": 2,
15 | "title": "Just the Cone",
16 | "description": "Sugar-free ice-cream",
17 | "catagories": ["objects"],
18 | "type": "recommended",
19 | "price": 5,
20 | "imageUrl": "https://source.unsplash.com/Rz5o0osnN6Q/700x700"
21 | },
22 | {
23 | "productId": 3,
24 | "title": "Pink Grapes",
25 | "description": "Tastes like strawberry",
26 | "catagories": ["objects"],
27 | "type": "new",
28 | "price": 7,
29 | "imageUrl": "https://source.unsplash.com/pz_hAv6ER7c/700x700"
30 | },
31 | {
32 | "productId": 4,
33 | "title": "Lobster",
34 | "description": "Yum, seafood",
35 | "catagories": ["objects"],
36 | "type": "trending",
37 | "price": 30,
38 | "imageUrl": "https://source.unsplash.com/YeOMRwgvPv4/700x700"
39 | },
40 | {
41 | "productId": 5,
42 | "title": "Cherries",
43 | "description": "Cherrific!!",
44 | "catagories": ["objects"],
45 | "type": "trending",
46 | "price": 15,
47 | "imageUrl": "https://source.unsplash.com/vbAEHCrvXZ0/700x700"
48 | },
49 | {
50 | "productId": 6,
51 | "title": "Playstation Controller",
52 | "description": "Break time",
53 | "catagories": ["objects"],
54 | "type": "trending",
55 | "price": 20,
56 | "imageUrl": "https://source.unsplash.com/IJyXoyGmiZY/700x700"
57 | },
58 | {
59 | "productId": 7,
60 | "title": "Brussel Sprouts",
61 | "description": "Baby cabbage",
62 | "catagories": ["objects"],
63 | "type": "trending",
64 | "price": 2,
65 | "imageUrl": "https://source.unsplash.com/g733A40xl3Q/700x700"
66 | },
67 | {
68 | "productId": 8,
69 | "title": "Pink Pineapple",
70 | "description": "Is this even edible?",
71 | "catagories": ["objects"],
72 | "type": "new",
73 | "price": 20,
74 | "imageUrl": "https://source.unsplash.com/9f55wJpnCwY/700x700"
75 | },
76 | {
77 | "productId": 9,
78 | "title": "Donuts",
79 | "description": "Coffee's best friend",
80 | "catagories": ["objects"],
81 | "type": "trending",
82 | "price": 10,
83 | "imageUrl": "https://source.unsplash.com/PFzy4N0_R3M/700x700"
84 | },
85 | {
86 | "productId": 10,
87 | "title": "Retro Gaming System",
88 | "description": "Before gaming was cool",
89 | "catagories": ["objects"],
90 | "type": "new",
91 | "price": 25,
92 | "imageUrl": "https://source.unsplash.com/v8XaVfyo41Q/700x700"
93 | },
94 | {
95 | "productId": 11,
96 | "title": "Stool",
97 | "description": "People gotta sit",
98 | "catagories": ["objects"],
99 | "type": "new",
100 | "price": "20",
101 | "imageUrl": "https://source.unsplash.com/4kTbAMRAHtQ/700x700"
102 | },
103 | {
104 | "productId": 12,
105 | "title": "Icecream",
106 | "description": "Always room for dessert",
107 | "catagories": ["objects"],
108 | "type": "new",
109 | "price": 10,
110 | "imageUrl": "https://source.unsplash.com/TLD6iCOlyb0/700x700"
111 | },
112 | {
113 | "productId": 13,
114 | "title": "Tennis Court",
115 | "description": "Nothing too big that we can't sell",
116 | "catagories": ["objects"],
117 | "type": "recommended",
118 | "price": 50,
119 | "imageUrl": "https://source.unsplash.com/aG6ByqGXiXg/700x700"
120 | },
121 | {
122 | "productId": 14,
123 | "title": "Cake",
124 | "description": "Everything is cake",
125 | "catagories": ["objects"],
126 | "type": "trending",
127 | "price": 5,
128 | "imageUrl": "https://source.unsplash.com/1Hh57OhkdCc/700x700"
129 | },
130 | {
131 | "productId": 15,
132 | "title": "Avocado",
133 | "description": "What's up Guac?",
134 | "catagories": ["objects"],
135 | "type": "trending",
136 | "price": 10,
137 | "imageUrl": "https://source.unsplash.com/9aOswReDKPo/700x700"
138 | }
139 | ]
140 | }
141 |
142 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | baseUrl: '/angular-animations-storefront',
4 | };
5 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | baseUrl: './',
8 | };
9 |
10 | /*
11 | * For easier debugging in development mode, you can import the following file
12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
13 | *
14 | * This import should be commented out in production mode because it will have a negative impact
15 | * on performance if an error is thrown.
16 | */
17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
18 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/auth0-blog/angular-animations-storefront/99cfee0e09752edfea068718ac44a245674f6cb6/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
3 |
- 7 | 15 | 16 |