Commit edcb94a1a3892b8ec5a5428fd999cde4b645cccc

Authored by Eric Fernandez
1 parent 626f06442a
Exists in master

teclado

... ... @@ -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",
... ... @@ -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) {
... ... @@ -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>
... ... @@ -139,3 +139,9 @@ body {
139 139 .bg-gray {
140 140 background-color: #cccccc;
141 141 }
  142 +
  143 +.cdk-overlay-container {
  144 + position: absolute;
  145 + top: 65%;
  146 + width: 100%;
  147 +}