diff --git a/package-lock.json b/package-lock.json index f8d0a54c..50c822d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@andes/plex", - "version": "9.0.0-beta.1", + "version": "9.0.0-beta.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@andes/plex", - "version": "9.0.0-beta.1", + "version": "9.0.0-beta.2", "license": "GPL-3.0", "dependencies": { "tslib": "^2.0.0" diff --git a/package.json b/package.json index 00ab55e4..747d84ea 100644 --- a/package.json +++ b/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" diff --git a/projects/plex-demo/src/app/app.module.ts b/projects/plex-demo/src/app/app.module.ts index 2597cef6..b1d923d8 100644 --- a/projects/plex-demo/src/app/app.module.ts +++ b/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, diff --git a/projects/plex-demo/src/app/home/home.component.ts b/projects/plex-demo/src/app/home/home.component.ts index 4200de0f..f3f0dbef 100644 --- a/projects/plex-demo/src/app/home/home.component.ts +++ b/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
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; diff --git a/projects/plex-demo/src/app/home/home.html b/projects/plex-demo/src/app/home/home.html index 85510d8f..ab4f0b98 100644 --- a/projects/plex-demo/src/app/home/home.html +++ b/projects/plex-demo/src/app/home/home.html @@ -224,16 +224,21 @@

El siguiente ejemplo muestra el uso de la propiedad validateForm

+ + + + required [hint]="hint"> + +
-
- - HOLA - +
+
diff --git a/src/lib/css/plex-tabs.scss b/src/lib/css/plex-tabs.scss index a0742fc9..4cd1ea79 100644 --- a/src/lib/css/plex-tabs.scss +++ b/src/lib/css/plex-tabs.scss @@ -29,7 +29,7 @@ plex-tabs { text-align: center; a { - display: inline-block; + display: block; width: 100%; } } diff --git a/src/lib/css/tooltip.scss b/src/lib/css/tooltip.scss index 38054e21..ac3c96a9 100644 --- a/src/lib/css/tooltip.scss +++ b/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; diff --git a/src/lib/datetime/datetime.component.ts b/src/lib/datetime/datetime.component.ts index b3c2ea67..122a2acf 100644 --- a/src/lib/datetime/datetime.component.ts +++ b/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)"> - + - + + @@ -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; - @ViewChild(NgxMatTimepickerComponent) dateTimePicker?: NgxMatTimepickerComponent; - @ViewChild(NgxMatTimepickerComponent) timePicker?: NgxMatTimepickerComponent; + @ViewChild('datePicker') datePicker?: MatDatepicker; + @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, @@ -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);