3 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ReusableAngularComponents
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | # DIO-reusable-angular-components-
29 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'reusable-angular-components'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('reusable-angular-components');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('reusable-angular-components app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reusable-angular-components",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test",
10 | "db": "json-server --watch src/mocks/db.json"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "^14.0.2",
15 | "@angular/common": "^14.0.2",
16 | "@angular/compiler": "^14.0.2",
17 | "@angular/core": "^14.0.2",
18 | "@angular/forms": "^14.0.2",
19 | "@angular/platform-browser": "^14.0.2",
20 | "@angular/platform-browser-dynamic": "^14.0.2",
21 | "@angular/router": "^14.0.2",
22 | "rxjs": "~7.5.5",
23 | "tslib": "^2.4.0",
24 | "zone.js": "~0.11.6"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "^14.0.2",
28 | "@angular/cli": "~14.0.2",
29 | "@angular/compiler-cli": "^14.0.2",
30 | "@types/jasmine": "~4.0.3",
31 | "npm-check-updates": "^14.0.1",
32 | "jasmine-core": "~4.2.0",
33 | "json-server": "^0.17.0",
34 | "karma": "~6.4.0",
35 | "karma-chrome-launcher": "~3.1.1",
36 | "karma-coverage": "~2.2.0",
37 | "karma-jasmine": "~5.1.0",
38 | "karma-jasmine-html-reporter": "~2.0.0",
39 | "typescript": "~4.7.4"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/shared/components/navigation/menu/menu.component.html:
--------------------------------------------------------------------------------
1 |
2 |
27 |
--------------------------------------------------------------------------------
/src/app/components/product-list/product-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { ProductsService } from '../../services/products.service';
4 | import { Product } from '../../interfaces/product.interface';
5 | import { Announcement } from '../../interfaces/announcement.interface';
6 |
7 | @Component({
8 | selector: 'app-product-list',
9 | templateUrl: './product-list.component.html',
10 | styleUrls: ['./product-list.component.scss'],
11 | })
12 | export class ProductListComponent implements OnInit {
13 | public announcementInfos: Announcement;
14 | public products: Product[] = [];
15 |
16 | constructor(private productsService: ProductsService) {}
17 |
18 | ngOnInit(): void {
19 | this.setAnnouncement();
20 | this.getProducts();
21 | }
22 |
23 | private setAnnouncement(): void {
24 | this.announcementInfos = {
25 | typeAlert: 'alert-secondary',
26 | titleText: 'Quer GANHAR 20% de desconto?',
27 | bodyText: 'Aproveite essa promoção super especial pro resto da semana',
28 | infoText: 'Oferta válida para compras acima de R$1.000',
29 | };
30 | }
31 |
32 | private getProducts(): void {
33 | this.productsService.getProducts().subscribe({
34 | next: (products) => {
35 | this.products = products;
36 | },
37 | error: (err) => console.error(err),
38 | complete: () => console.info('complete:', this.products),
39 | });
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/reusable-angular-components'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { registerLocaleData } from '@angular/common';
5 | import localePt from '@angular/common/locales/pt';
6 |
7 | import { AppRoutingModule } from './app-routing.module';
8 | import { AppComponent } from './app.component';
9 | import { DeliveryComponent } from './components/delivery/delivery.component';
10 | import { MenuComponent } from './shared/components/navigation/menu/menu.component';
11 | import { FooterComponent } from './shared/components/navigation/footer/footer.component';
12 | import { ContactComponent } from './components/contact/contact.component';
13 | import { AboutComponent } from './components/about/about.component';
14 | import { ProductsService } from './services/products.service';
15 | import { ProductListComponent } from './components/product-list/product-list.component';
16 | import { HttpClientModule } from '@angular/common/http';
17 | import { AnnouncementsComponent } from './shared/components/announcements/announcements.component';
18 | import { WorkTeamComponent } from './shared/components/work-team/work-team.component';
19 |
20 | registerLocaleData(localePt);
21 |
22 | @NgModule({
23 | declarations: [
24 | AppComponent,
25 | DeliveryComponent,
26 | MenuComponent,
27 | FooterComponent,
28 | ContactComponent,
29 | AboutComponent,
30 | ProductListComponent,
31 | AnnouncementsComponent,
32 | WorkTeamComponent,
33 | ],
34 | imports: [BrowserModule, AppRoutingModule, HttpClientModule],
35 | providers: [ProductsService],
36 | bootstrap: [AppComponent],
37 | })
38 | export class AppModule {}
39 |
--------------------------------------------------------------------------------
/src/app/components/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ![]()
6 |
17 |
18 | {{employee.name}}
{{employee.position}} 7 | 16 |
4 |
--------------------------------------------------------------------------------
/src/app/components/contact/contact.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
47 |
6 |
46 |
7 |
8 |
45 |
9 | 
10 |
11 |
12 |
13 | {{ product.nome | titlecase }}
14 |
15 |
18 |
19 | Promoção!
16 |Por apenas:
17 |
20 |
32 |
33 |
21 | De:
22 |
23 |
30 |
31 | De:
22 |
23 | {{ product.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}
24 |
25 |
26 |
27 |
28 | Por: {{ product.valorPromo | currency:'BRL':'symbol':'1.2-2':'pt' }}
29 |
30 |
34 |
38 |
39 |
44 |
35 |
37 | {{ product.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}
36 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
43 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 |
51 | /***************************************************************************************************
52 | * APPLICATION IMPORTS
53 | */
54 |
--------------------------------------------------------------------------------
/src/app/components/about/about.component.html:
--------------------------------------------------------------------------------
1 | Formulário De Contato
8 |
2 |
14 |
15 |
3 |
13 |
4 | 
11 |
12 |
5 |
8 | Quem somos
6 |Utilize a criatividade aqui!
7 |
16 |
41 |
42 |
17 |
40 |
18 | 
27 |
28 |
19 |
24 | Lorem ipsum dolor sit amet
20 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 21 | eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn More 23 |
29 | 
32 |
39 |
33 |
38 | Lorem ipsum dolor sit amet
34 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 35 | eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn More 37 |
43 |
--------------------------------------------------------------------------------
/src/app/components/delivery/delivery.component.html:
--------------------------------------------------------------------------------
1 |
2 |
44 |
52 |
45 |
50 |
46 |
49 | Our team
47 |Lorem ipsum dolor sit amet, consectetur adipisicing elit.
48 |
4 |
14 |
5 |
13 |
6 | 
7 |
8 |
7 |
9 |
12 | Serviço de entrega do jeito que você precisa
10 |O jeito mais prático do seu pacote chegar em todo o Brasil
11 |
17 |
18 |
19 |
77 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "reusable-angular-components": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | },
12 | "@schematics/angular:application": {
13 | "strict": true
14 | }
15 | },
16 | "root": "",
17 | "sourceRoot": "src",
18 | "prefix": "app",
19 | "architect": {
20 | "build": {
21 | "builder": "@angular-devkit/build-angular:browser",
22 | "options": {
23 | "outputPath": "dist/reusable-angular-components",
24 | "index": "src/index.html",
25 | "main": "src/main.ts",
26 | "polyfills": "src/polyfills.ts",
27 | "tsConfig": "tsconfig.app.json",
28 | "inlineStyleLanguage": "scss",
29 | "assets": [
30 | "src/favicon.ico",
31 | "src/assets"
32 | ],
33 | "styles": [
34 | "src/styles.scss"
35 | ],
36 | "scripts": []
37 | },
38 | "configurations": {
39 | "production": {
40 | "budgets": [
41 | {
42 | "type": "initial",
43 | "maximumWarning": "500kb",
44 | "maximumError": "1mb"
45 | },
46 | {
47 | "type": "anyComponentStyle",
48 | "maximumWarning": "2kb",
49 | "maximumError": "4kb"
50 | }
51 | ],
52 | "fileReplacements": [
53 | {
54 | "replace": "src/environments/environment.ts",
55 | "with": "src/environments/environment.prod.ts"
56 | }
57 | ],
58 | "outputHashing": "all"
59 | },
60 | "development": {
61 | "buildOptimizer": false,
62 | "optimization": false,
63 | "vendorChunk": true,
64 | "extractLicenses": false,
65 | "sourceMap": true,
66 | "namedChunks": true
67 | }
68 | },
69 | "defaultConfiguration": "production"
70 | },
71 | "serve": {
72 | "builder": "@angular-devkit/build-angular:dev-server",
73 | "configurations": {
74 | "production": {
75 | "browserTarget": "reusable-angular-components:build:production"
76 | },
77 | "development": {
78 | "browserTarget": "reusable-angular-components:build:development"
79 | }
80 | },
81 | "defaultConfiguration": "development"
82 | },
83 | "extract-i18n": {
84 | "builder": "@angular-devkit/build-angular:extract-i18n",
85 | "options": {
86 | "browserTarget": "reusable-angular-components:build"
87 | }
88 | },
89 | "test": {
90 | "builder": "@angular-devkit/build-angular:karma",
91 | "options": {
92 | "main": "src/test.ts",
93 | "polyfills": "src/polyfills.ts",
94 | "tsConfig": "tsconfig.spec.json",
95 | "karmaConfig": "karma.conf.js",
96 | "inlineStyleLanguage": "scss",
97 | "assets": [
98 | "src/favicon.ico",
99 | "src/assets"
100 | ],
101 | "styles": [
102 | "src/styles.scss"
103 | ],
104 | "scripts": []
105 | }
106 | }
107 | }
108 | }
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/src/mocks/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "products": [
3 | {
4 | "id": 1,
5 | "nome": "mouse Microsoft",
6 | "valor": 15.90,
7 | "promocao": false,
8 | "valorPromo": 0,
9 | "imagem": "mouse.jpg"
10 | },
11 | {
12 | "id": 2,
13 | "nome": "Teclado Microsoft",
14 | "valor": 30.00,
15 | "promocao": false,
16 | "valorPromo": 0,
17 | "imagem": "teclado.jpg"
18 | },
19 | {
20 | "id": 3,
21 | "nome": "Monitor Samsung",
22 | "valor": 250.00,
23 | "promocao": false,
24 | "valorPromo": 0,
25 | "imagem": "monitor.jpg"
26 | },
27 | {
28 | "id": 4,
29 | "nome": "Laptop Asus",
30 | "valor": 3000.00,
31 | "promocao": true,
32 | "valorPromo": 999.90,
33 | "imagem": "laptop.jpg"
34 | },
35 | {
36 | "id": 5,
37 | "nome": "Headset Microsoft",
38 | "valor": 10.50,
39 | "promocao": false,
40 | "valorPromo": 0,
41 | "imagem": "headset.jpg"
42 | },
43 | {
44 | "id": 6,
45 | "nome": "Webcam Logitech",
46 | "valor": 90.00,
47 | "promocao": true,
48 | "valorPromo": 49.99,
49 | "imagem": "webcam.jpg"
50 | },
51 | {
52 | "id": 7,
53 | "nome": "Galaxy S10+",
54 | "valor": 3000.00,
55 | "promocao": false,
56 | "valorPromo": 0,
57 | "imagem": "celular.jpg"
58 | },
59 | {
60 | "id": 8,
61 | "nome": "Mousepad Microsoft",
62 | "valor": 5.50,
63 | "promocao": false,
64 | "valorPromo": 0,
65 | "imagem": "mousepad.jpg"
66 | },
67 | {
68 | "id": 9,
69 | "nome": "Go Pro 8",
70 | "valor": 300.00,
71 | "promocao": false,
72 | "valorPromo": 0,
73 | "imagem": "gopro.jpg"
74 | }
75 | ],
76 | "employes": [
77 | {
78 | "picture": "https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png",
79 | "name": "Mara Tristão Abasto",
80 | "position": "Diretor"
81 | },
82 | {
83 | "picture": "https://user-images.githubusercontent.com/5709133/50445980-88299a80-0912-11e9-962a-6fd92fd18027.png",
84 | "name": "Mateo Lemes Ximenes",
85 | "position": "Diretor"
86 | },
87 | {
88 | "picture": "https://res.cloudinary.com/mhmd/image/upload/v1556834130/avatar-3_hzlize.png",
89 | "name": "Rafael Gravato Pegado",
90 | "position": "Analista de Mídia"
91 | },
92 | {
93 | "picture": "https://res.cloudinary.com/mhmd/image/upload/v1556834133/avatar-2_f8dowd.png",
94 | "name": "Éric Cortês Faustino",
95 | "position": "Analista de logística"
96 | },
97 | {
98 | "picture": "https://res.cloudinary.com/mhmd/image/upload/v1556834133/avatar-1_s02nlg.png",
99 | "name": "Fausto Ornelas Setúbal",
100 | "position": "Analista de logística"
101 | },
102 | {
103 | "picture": "https://freeiconshop.com/wp-content/uploads/edd/person-girl-flat.png",
104 | "name": "Riana Paulos Faleiro",
105 | "position": "Customer Service"
106 | },
107 | {
108 | "picture": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfZDabpYnE3St-xoZZgVSGgRMIn3km-RjzE4YooiGV5R4kklAzNzb8GVZwLGCHzPW4puQ&usqp=CAU",
109 | "name": "Mellyssa Granja Patrício",
110 | "position": "Customer Service"
111 | },
112 | {
113 | "picture": "https://freeiconshop.com/wp-content/uploads/edd/person-girl-flat.png",
114 | "name": "Bruna Canhão Gabeira",
115 | "position": "Promotor de vendas"
116 | },
117 | {
118 | "picture": "https://cdn.iconscout.com/icon/free/png-256/avatar-1659503-1410025.png",
119 | "name": "Lyah Doutel Varanda",
120 | "position": "Promotor de vendas"
121 | },
122 | {
123 | "picture": "https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/21760012/original/d4c0c142f91f012c9a8a9c9aeef3bac28036f15b/create-your-cartoon-style-flat-avatar-or-icon.jpg",
124 | "name": "Silvestre Boto Franca ",
125 | "position": "Promotor de vendas"
126 | },
127 | {
128 | "picture": "https://freeiconshop.com/wp-content/uploads/edd/person-girl-flat.png",
129 | "name": "Rossana Frois Ribeiro",
130 | "position": "Promotor de vendas"
131 | },
132 | {
133 | "picture": "https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png",
134 | "name": "Yasmim Malheiro Morgado",
135 | "position": "Promotor de vendas"
136 | }
137 | ]
138 | }
--------------------------------------------------------------------------------
20 |
76 |
21 |
33 |
34 |
22 | 
23 |
32 |
23 |
24 |
28 |
31 | Ponta a ponta
25 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse 26 | necessitatibus neque.
27 |
35 |
47 |
48 |
36 | 
37 |
46 |
37 |
38 |
42 |
45 | Menor custo
39 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni 40 | sapiente, tempore debitis beatae culpa natus architecto.
41 |
49 |
61 |
62 |
50 | 
51 |
60 |
51 |
52 |
56 |
59 | 3 vezes mais rápido
53 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse 54 | necessitatibus neque.
55 |
63 |
75 |
64 | 
65 |
74 |
65 |
66 |
70 |
73 | Alta tecnologia
67 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni 68 | sapiente, tempore debitis beatae culpa natus architecto.
69 |