Commit edcb94a1a3892b8ec5a5428fd999cde4b645cccc
1 parent
626f06442a
Exists in
master
and in
1 other branch
teclado
Showing
7 changed files
with
77 additions
and
7 deletions
Show diff stats
package-lock.json
... | ... | @@ -140,6 +140,23 @@ |
140 | 140 | "tslib": "^1.9.0" |
141 | 141 | } |
142 | 142 | }, |
143 | + "@angular/cdk": { | |
144 | + "version": "8.1.3", | |
145 | + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.3.tgz", | |
146 | + "integrity": "sha512-+DOS6x05/nNdnoRmEi3bgQxKym34PeCRGD6dimdw0l7ZgM57qhlaBWo0dXB7QSyR9E44uVT91e4h8ye+/ne1DQ==", | |
147 | + "requires": { | |
148 | + "parse5": "^5.0.0", | |
149 | + "tslib": "^1.7.1" | |
150 | + }, | |
151 | + "dependencies": { | |
152 | + "parse5": { | |
153 | + "version": "5.1.0", | |
154 | + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", | |
155 | + "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==", | |
156 | + "optional": true | |
157 | + } | |
158 | + } | |
159 | + }, | |
143 | 160 | "@angular/cli": { |
144 | 161 | "version": "8.0.6", |
145 | 162 | "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-8.0.6.tgz", |
... | ... | @@ -314,6 +331,14 @@ |
314 | 331 | "integrity": "sha512-04XojOo9FJgEQE/rZafnaJQxPEU+//TSzTgpGoIVzCSMx+joCY/ZSSwJZPWxiHlOE57W/zX02ZY+TwcM81oTdw==", |
315 | 332 | "dev": true |
316 | 333 | }, |
334 | + "@angular/material": { | |
335 | + "version": "8.1.3", | |
336 | + "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.3.tgz", | |
337 | + "integrity": "sha512-qZVWrJ/EO1y0lJCy7pe536RlYiih3p3fQzj7tgus7JdOpspyF+zBLzn8gNrdAFACXpVWwq2kLorieoR3BB47ZQ==", | |
338 | + "requires": { | |
339 | + "tslib": "^1.7.1" | |
340 | + } | |
341 | + }, | |
317 | 342 | "@angular/platform-browser": { |
318 | 343 | "version": "8.0.3", |
319 | 344 | "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.0.3.tgz", |
... | ... | @@ -511,6 +536,14 @@ |
511 | 536 | "webpack-sources": "1.3.0" |
512 | 537 | } |
513 | 538 | }, |
539 | + "@ngx-material-keyboard/core": { | |
540 | + "version": "0.1.1", | |
541 | + "resolved": "https://registry.npmjs.org/@ngx-material-keyboard/core/-/core-0.1.1.tgz", | |
542 | + "integrity": "sha512-HbxAxtLCf4Q9N8cTZ6Dq1q6X9CmGxT+NubBQ4DX77S03nwmq+wQjbucopfVPwosEPB3DQqKa9wqCbJaM07AEYw==", | |
543 | + "requires": { | |
544 | + "tslib": "^1.7.1" | |
545 | + } | |
546 | + }, | |
514 | 547 | "@schematics/angular": { |
515 | 548 | "version": "8.0.6", |
516 | 549 | "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-8.0.6.tgz", |
... | ... | @@ -5660,6 +5693,11 @@ |
5660 | 5693 | "object-visit": "^1.0.0" |
5661 | 5694 | } |
5662 | 5695 | }, |
5696 | + "material-design-icons": { | |
5697 | + "version": "3.0.1", | |
5698 | + "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", | |
5699 | + "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=" | |
5700 | + }, | |
5663 | 5701 | "md5.js": { |
5664 | 5702 | "version": "1.3.5", |
5665 | 5703 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", |
... | ... | @@ -7485,6 +7523,11 @@ |
7485 | 7523 | "tslib": "^1.9.0" |
7486 | 7524 | } |
7487 | 7525 | }, |
7526 | + "rxjs-compat": { | |
7527 | + "version": "6.5.2", | |
7528 | + "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.2.tgz", | |
7529 | + "integrity": "sha512-TRMkTp4FgSxE2HtGvxmgRukh3JqdFM7ejAj1Ti/VdodbPGfWvZR5+KdLKRV9jVDFyu2SknM8RD+PR54KGnoLjg==" | |
7530 | + }, | |
7488 | 7531 | "safe-buffer": { |
7489 | 7532 | "version": "5.1.2", |
7490 | 7533 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", |
... | ... | @@ -7844,9 +7887,9 @@ |
7844 | 7887 | "dev": true |
7845 | 7888 | }, |
7846 | 7889 | "simple-keyboard": { |
7847 | - "version": "2.25.3", | |
7848 | - "resolved": "https://registry.npmjs.org/simple-keyboard/-/simple-keyboard-2.25.3.tgz", | |
7849 | - "integrity": "sha512-wEEPPbVUH8C4pzION3ROyJWuf079FtEpYi6VciDgKB77BzKsQsH9sBimCn4b+1Qsk7krYTzNOYUshbWLzSb+6A==" | |
7890 | + "version": "2.26.2", | |
7891 | + "resolved": "https://registry.npmjs.org/simple-keyboard/-/simple-keyboard-2.26.2.tgz", | |
7892 | + "integrity": "sha512-UOPS60KzUmDPw+V12Qs+ZVQoYe7p4bOE+aYBBxIHhDRwFgQAtz0OsbxMfDTG6hdd7wSEBVLfc7nkKu1n6A3GCA==" | |
7850 | 7893 | }, |
7851 | 7894 | "slash": { |
7852 | 7895 | "version": "1.0.0", |
package.json
... | ... | @@ -11,21 +11,26 @@ |
11 | 11 | }, |
12 | 12 | "private": true, |
13 | 13 | "dependencies": { |
14 | - "@angular/animations": "~8.0.0", | |
14 | + "@angular/animations": "^8.0.3", | |
15 | + "@angular/cdk": "^8.1.3", | |
15 | 16 | "@angular/common": "~8.0.0", |
16 | 17 | "@angular/compiler": "~8.0.0", |
17 | 18 | "@angular/core": "~8.0.0", |
18 | 19 | "@angular/forms": "~8.0.0", |
20 | + "@angular/material": "^8.1.3", | |
19 | 21 | "@angular/platform-browser": "~8.0.0", |
20 | 22 | "@angular/platform-browser-dynamic": "~8.0.0", |
21 | 23 | "@angular/router": "~8.0.0", |
24 | + "@ngx-material-keyboard/core": "^0.1.1", | |
22 | 25 | "bootstrap": "^4.3.1", |
23 | 26 | "font-awesome": "^4.7.0", |
24 | 27 | "jquery": "^1.12.4", |
28 | + "material-design-icons": "^3.0.1", | |
25 | 29 | "ngx-bootstrap": "^5.1.1", |
26 | 30 | "popper.js": "^1.15.0", |
27 | 31 | "rxjs": "~6.4.0", |
28 | - "simple-keyboard": "^2.25.3", | |
32 | + "rxjs-compat": "^6.5.2", | |
33 | + "simple-keyboard": "^2.26.2", | |
29 | 34 | "tslib": "^1.9.0", |
30 | 35 | "zone.js": "~0.9.1" |
31 | 36 | }, |
src/app/app.module.ts
... | ... | @@ -8,6 +8,12 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; |
8 | 8 | import { PopoverModule } from 'ngx-bootstrap/popover'; |
9 | 9 | //#endregion |
10 | 10 | |
11 | +//#region Keyboard | |
12 | +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
13 | +import { MatButtonModule } from '@angular/material/button'; | |
14 | +import { MatKeyboardModule } from '@ngx-material-keyboard/core'; | |
15 | +//#endregion | |
16 | + | |
11 | 17 | //#region COMPONENTS |
12 | 18 | import { AppComponent } from './app.component'; |
13 | 19 | import { HeaderComponent } from './components/header/header.component'; |
... | ... | @@ -48,7 +54,10 @@ import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-c |
48 | 54 | ReactiveFormsModule, |
49 | 55 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), |
50 | 56 | TooltipModule.forRoot(), |
51 | - PopoverModule.forRoot() | |
57 | + PopoverModule.forRoot(), | |
58 | + BrowserAnimationsModule, | |
59 | + MatKeyboardModule, | |
60 | + MatButtonModule | |
52 | 61 | ], |
53 | 62 | providers: [], |
54 | 63 | bootstrap: [AppComponent] |
src/app/components/busqueda-productos/busqueda-productos.component.html
... | ... | @@ -36,6 +36,7 @@ |
36 | 36 | <div class="col-sm-10"> |
37 | 37 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> |
38 | 38 | <input |
39 | + [matKeyboard]="'spanish'" | |
39 | 40 | type="text" |
40 | 41 | class="form-control form-control-lg shadow-sm rounded-pill px-5" |
41 | 42 | placeholder="Búsqueda productos" |
src/app/components/busqueda-productos/busqueda-productos.component.ts
1 | -import { Component, OnInit } from '@angular/core'; | |
1 | +import { Component, OnInit, EventEmitter } from '@angular/core'; | |
2 | 2 | import { ProductoService } from 'src/app/services/producto.service'; |
3 | 3 | import { Producto } from 'src/app/wrappers/producto'; |
4 | 4 | import { Categoria } from 'src/app/wrappers/categoria'; |
... | ... | @@ -20,6 +20,7 @@ export class BusquedaProductosComponent implements OnInit { |
20 | 20 | private verCategorias: boolean = true; |
21 | 21 | private apiUrl: string = appSettings.apiUrl; |
22 | 22 | private categorias: Categoria[] = []; |
23 | + private blurFocus = new EventEmitter(); | |
23 | 24 | |
24 | 25 | constructor( |
25 | 26 | private productoService: ProductoService, |
... | ... | @@ -61,6 +62,10 @@ export class BusquedaProductosComponent implements OnInit { |
61 | 62 | this.productoService.productos.push(producto); |
62 | 63 | } |
63 | 64 | |
65 | + lostBlur() { | |
66 | + this.blurFocus.emit(); | |
67 | + } | |
68 | + | |
64 | 69 | private elegirProducto(producto: Producto) { |
65 | 70 | |
66 | 71 | if (producto.PRO) { |
src/index.html
... | ... | @@ -5,6 +5,7 @@ |
5 | 5 | <title>Autoservicio</title> |
6 | 6 | <base href="/"> |
7 | 7 | |
8 | + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
8 | 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
9 | 10 | <link rel="icon" type="image/x-icon" href="favicon.ico"> |
10 | 11 | </head> |