PLEX - Release v9.0.0-beta.2

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@andes/plex",
-    "version": "9.0.0-beta.1",
+    "version": "9.0.0-beta.2",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/andes/plex.git"

projects/plex-demo/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
+import { MatNativeDateModule } from '@angular/material/core';
 
 import { AppComponent } from './app.component';
 import { appRoutingProviders, routing } from './app.routes';
@@ -162,7 +163,7 @@ import { DemoTitleComponent } from './title/title.component';
         SimpleNotificationsModule,
         PushNotificationsModule,
         routing,
-        // PlexIconsModule
+        MatNativeDateModule
     ],
     providers: [
         appRoutingProviders,

projects/plex-demo/src/app/home/home.component.ts

@@ -7,9 +7,11 @@ import { Plex } from '@andes/plex';
 })
 export class HomeDemoComponent implements OnInit {
     public field = '';
-    public tooltip = 'Este es un tooltip<br>multilinea que ocupa mucho espacio';
+    public tooltip = 'Este es un tooltip de una sola linea pero con gran tantidad de texto';
+    hint = 'Este es un hint ubicado en el sidebar. Debería poder contener varias líneas de texto.';
     public data = [];
     documento = '45979360';
+    fecha;
 
     public modelSelector;
 

projects/plex-demo/src/app/home/home.html

@@ -224,16 +224,21 @@
 
         <form #form="ngForm">
             <p>El siguiente ejemplo muestra el uso de la propiedad <strong>validateForm</strong></p>
+            <plex-badge size="sm" type="info" tooltip="{{tooltip}}" tooltipPosition="right">
+                <plex-icon name="message"></plex-icon>
+            </plex-badge>
             <plex-text label="Este es un campo de texto requerido" name="campo1" [(ngModel)]="field" [disabled]="false"
-                       required>
+                       required [hint]="hint">
             </plex-text>
             <plex-button label="Guardar formulario" validateForm="true" (click)="guardar($event)">
             </plex-button>
+            <plex-datetime type="date" label="Seleccione fecha" name="componenteFecha" [(ngModel)]="fecha"
+                           placeholder="dd/mm/aaaa" size="sm" [required]="true">
+            </plex-datetime>
         </form>
-        <div class="grow">
-            <plex-text [(ngModel)]="field" prefix="barcode" ariaLabel="Ingrese un código"></plex-text>
-            <plex-button type="success">HOLA</plex-button>
-
+        <div class="grow mt-2">
+            <plex-text label="Búsqueda por texto o scanner" [(ngModel)]="field" prefix="barcode"
+                       ariaLabel="Ingrese un código"></plex-text>
         </div>
     </plex-layout-sidebar>
     <plex-layout-footer>

src/lib/css/plex-tabs.scss

@@ -29,7 +29,7 @@ plex-tabs {
                 text-align: center;
 
                 a {
-                    display: inline-block;
+                    display: block;
                     width: 100%;
                 }
             }

src/lib/css/tooltip.scss

@@ -1,9 +1,9 @@
-$tooltip-padding-y: 0.35rem;
-$tooltip-padding-x: 0.55rem;
+$tooltip-padding-y: 0.25rem;
+$tooltip-padding-x: 0.25rem;
 $border-radius: 4px;
-// $tooltip-bg: #616161;
+$tooltip-bg: #505050;
 $tooltip-opacity: 0.85;
-$tooltip-arrow-color: #616161;
+$tooltip-arrow-color: #505050;
 
 .tooltip {
     display: flex;
@@ -14,8 +14,8 @@ $tooltip-arrow-color: #616161;
 
     // Wrapper for the tooltip content
     .tooltip-inner {
-        font-size: 11px;
-        max-width: $tooltip-max-width;
+        font-size: 12px;
+        max-width: none !important;
         padding: $tooltip-padding-y $tooltip-padding-x;
         color: $tooltip-color;
         text-align: center;

src/lib/datetime/datetime.component.ts

@@ -9,7 +9,8 @@ import {
     ChangeDetectionStrategy,
     forwardRef,
     Injector,
-    ViewChild
+    ViewChild,
+    OnDestroy
 } from '@angular/core';
 import { NgControl, UntypedFormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { dateValidator, hasRequiredValidator } from '../core/validator.functions';
@@ -58,9 +59,11 @@ export type Moment = _moment.Moment;
                                 [(ngModel)]="_value" [min]="min" [max]="max"
                                 [placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly"
                                 (dateChange)="onDateChange($event)">
-                        <mat-datepicker #datePicker [touchUi]="true" type="datetime">
+                        <mat-datepicker #datePicker [touchUi]="true" type="datetime" >
                             <mat-datepicker-actions>
-                                <plex-button class="btn-ok-fecha" matDatepickerApply type="info" size="sm" label="Aceptar"></plex-button>
+                                <plex-button class="btn-ok-fecha" matDatepickerApply type="info" size="sm" label="Aceptar"
+                                            [disabled]="!hasDaySelected">
+                                </plex-button>
                             </mat-datepicker-actions>
                         </mat-datepicker>
                     </ng-container>
@@ -134,11 +137,11 @@ export type Moment = _moment.Moment;
     `,
 })
 
-export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlValueAccessor {
+export class PlexDateTimeComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
 
-    @ViewChild(MatDatepicker) datePicker?: MatDatepicker<Date>;
-    @ViewChild(NgxMatTimepickerComponent) dateTimePicker?: NgxMatTimepickerComponent;
-    @ViewChild(NgxMatTimepickerComponent) timePicker?: NgxMatTimepickerComponent;
+    @ViewChild('datePicker') datePicker?: MatDatepicker<Date>;
+    @ViewChild('dateTimePicker') dateTimePicker?: NgxMatTimepickerComponent;
+    @ViewChild('timePicker') timePicker?: NgxMatTimepickerComponent;
 
     private _min: Date | null = null;
     private _max: Date | null = null;
@@ -223,6 +226,7 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
     private onTouched: () => void = () => { };
     private propagateChange: (val: Date | null) => void = () => { };
     control?: NgControl;
+    hasDaySelected = false;
 
     constructor(
         private element: ElementRef<HTMLElement>,
@@ -238,6 +242,41 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
             const input: HTMLInputElement | null = this.element.nativeElement?.querySelector('input[data-main]');
             input?.focus();
         }
+
+        this.datePicker?.openedStream.subscribe(() => {
+            // este bloque se usa para habilitar/deshabilitar el botón Aceptar del datepicker
+            this.hasDaySelected = false;
+
+            setTimeout(() => {
+                const dpAny = this.datePicker as any;
+                const overlayEl: HTMLElement | null = dpAny?._overlayRef?.overlayElement ?? null;
+                if (!overlayEl) { return; }
+
+                const handler = (ev: MouseEvent) => {
+                    const t = ev.target as HTMLElement | null;
+                    if (!t) { return; }
+
+                    // Si el click ocurrió en una celda de día del calendario => ya hay selección (o intento de selección)
+                    if (t.closest('.mat-calendar-content .mat-calendar-body-cell')) {
+                        this.hasDaySelected = true;
+                    }
+                };
+
+                overlayEl.addEventListener('click', handler, true);
+                this.removeClickListener = () => overlayEl.removeEventListener('click', handler, true);
+            }, 0);
+        });
+
+        this.datePicker?.closedStream.subscribe(() => this.cleanup());
+    }
+
+    ngOnDestroy() {
+        this.cleanup();
+    }
+
+    private cleanup() {
+        this.removeClickListener?.();
+        this.removeClickListener = undefined;
     }
 
     ngOnChanges(changes: any) {
@@ -247,6 +286,9 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
         }
     }
 
+    private removeClickListener?: () => void;
+
+
     writeValue(value: any) {
         this._value = value ? moment(value).toDate() : null;
         this.timeString = this._value ? moment(this._value).format('HH:mm') : '';
@@ -318,12 +360,10 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
     registerOnTouched(fn: () => void) { this.onTouched = fn; }
     setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; }
 
+
     // type === 'date'
     onDateChange(ev: any) {
         const input = ev.targetElement?.value || ev.target?.value;
-        if (!input) {
-            return;
-        }
         const m = moment(input, this._format);
         this._value = m.isValid() ? m.toDate() : null;
         this.emitChange(true);