From fc101f9f9e286f3e1d1500cff56eb9770485f3f0 Mon Sep 17 00:00:00 2001 From: rfrt Date: Wed, 31 Jul 2024 13:10:27 +0200 Subject: [PATCH] feat: datepicker angular15 --- .../directives/input-autosize.directive.ts | 2 +- projects/date-picker/CHANGELOG.md | 24 +++++++++++++++++++ projects/date-picker/package.json | 6 +++-- .../datepicker-buttons.component.scss | 18 +++++++++----- .../datepicker-buttons.component.ts | 6 ++--- .../datepicker-with-time.component.ts | 2 +- .../date-picker-demo.component.html | 16 ++++++++----- .../date-picker-demo.component.scss | 3 --- .../date-picker/date-picker-demo.component.ts | 10 ++++---- .../src/search-container.component.ts | 2 +- .../src/status-detail/status-detail.module.ts | 2 +- projects/status/src/status.module.ts | 2 +- 12 files changed, 63 insertions(+), 30 deletions(-) diff --git a/projects/core/src/directives/input-autosize.directive.ts b/projects/core/src/directives/input-autosize.directive.ts index 5de83785..80fe8b96 100644 --- a/projects/core/src/directives/input-autosize.directive.ts +++ b/projects/core/src/directives/input-autosize.directive.ts @@ -1,8 +1,8 @@ import { Directive, ElementRef, inject, NgZone, OnInit } from '@angular/core'; -import { MatLegacyInput as MatInput } from '@angular/material/legacy-input'; import { debounceTime, fromEvent, mergeWith, of, startWith, takeUntil } from 'rxjs'; import { NgxDestroy } from './destroy'; +import { MatInput } from '@angular/material/input'; @Directive({ selector: '[ngx-input-autosize][matInput], [ngx-input-autosize] [matInput]', diff --git a/projects/date-picker/CHANGELOG.md b/projects/date-picker/CHANGELOG.md index fbd6542e..4cf39347 100644 --- a/projects/date-picker/CHANGELOG.md +++ b/projects/date-picker/CHANGELOG.md @@ -1,3 +1,27 @@ +## 1.0.10 (2024-07-30) + + +### 🐛 Fixes + +- **ngx-date-picker:** update patch version ([e4ae931](https://github.com/DSI-HUG/ngx-components/commit/e4ae931)) + + +### ❤️ Thank You + +- Serge + +## 1.0.9 (2024-07-29) + + +### 🐛 Fixes + +- **ngx-date-picker:** fix peer dep ([d120912](https://github.com/DSI-HUG/ngx-components/commit/d120912)) + + +### ❤️ Thank You + +- Serge + ## 1.0.8 (2024-07-26) diff --git a/projects/date-picker/package.json b/projects/date-picker/package.json index 0eb626c9..6e617b55 100644 --- a/projects/date-picker/package.json +++ b/projects/date-picker/package.json @@ -1,6 +1,6 @@ { "name": "@hug/ngx-date-picker", - "version": "1.0.8", + "version": "1.0.10", "description": "HUG Angular - date-picker component", "homepage": "https://github.com/dsi-hug/ngx-components", "license": "GPL-3.0-only", @@ -33,7 +33,9 @@ "@angular/common": ">= 14", "@angular/core": ">= 14", "@hug/ngx-core": "^1.1.14", - "@hug/ngx-time-picker": "^1.1.10" + "@hug/ngx-time-picker": "^1.1.10", + "date-fns": "^2.30.0", + "lodash-es": "^4.17.21" }, "dependencies": { "tslib": "^2.6.3" diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss index 3df18c42..2ab17cf1 100644 --- a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss +++ b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss @@ -1,13 +1,18 @@ ngx-datepicker-buttons { font-size: 80%; + white-space: nowrap; - .ngx-date-picker-button { - max-width: 20px; - max-height: 20px; + .mat-mdc-icon-button .mat-mdc-button-touch-target { + width: 100%; + height: 100%; + } + .ngx-date-picker-button { + max-width: 24px; + max-height: 24px; .mat-icon { display: flex; - align-items: baseline; + align-items: center; justify-content: center; font-size: 20px; } @@ -18,12 +23,13 @@ ngx-datepicker-buttons { } } -.mat-form-field.mat-form-field-appearance-legacy { +.mat-mdc-form-field { font-size: inherit; ngx-datepicker-buttons { - .mat-icon-button { + .mat-mdc-icon-button { font-size: 130%; + padding: 0; } } } diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts index 87a099c8..48d16518 100644 --- a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts +++ b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts @@ -2,12 +2,12 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { AbstractControl } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; import { DateAdapter } from '@angular/material/core'; import { MatDatepicker, MatDateRangeInput, MatDateRangePicker } from '@angular/material/datepicker'; +import { MatFormFieldControl } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { NgxDestroy } from '@hug/ngx-core'; import { set } from 'date-fns'; import { filter, ReplaySubject, switchMap, takeUntil, tap } from 'rxjs'; diff --git a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts index bdc013f0..16a248ff 100644 --- a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts +++ b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts @@ -2,13 +2,13 @@ import { TemplatePortal } from '@angular/cdk/portal'; import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, OnDestroy, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { DateAdapter } from '@angular/material/core'; import { MatDatepicker, MatDatepickerInput, MatDatepickerModule, MatDateSelectionModel } from '@angular/material/datepicker'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { NgxDestroy } from '@hug/ngx-core'; import { NgxDateOrDuration, NgxTimePickerComponent } from '@hug/ngx-time-picker'; import { cloneDeep } from 'lodash-es'; import { delay, filter, map, takeUntil, tap } from 'rxjs'; import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-adapter'; +import { MatButtonModule } from '@angular/material/button'; @Component({ diff --git a/projects/demo-app/src/app/date-picker/date-picker-demo.component.html b/projects/demo-app/src/app/date-picker/date-picker-demo.component.html index 24b42736..cd52929e 100644 --- a/projects/demo-app/src/app/date-picker/date-picker-demo.component.html +++ b/projects/demo-app/src/app/date-picker/date-picker-demo.component.html @@ -1,4 +1,4 @@ - + @@ -7,15 +7,17 @@ -
+
- Datepicker Material + + Datepicker Material +

Datepicker :

- + Choose a date @@ -45,13 +47,15 @@

Date range picker :

- Date Picker Material with TimePicker + + Date Picker Material with TimePicker +

Date time picker :

- + Choose a date and time Format : dd.MM.yyyy HH:mm diff --git a/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss b/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss index 38c3b157..2fce7477 100644 --- a/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss +++ b/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss @@ -1,7 +1,4 @@ app-date-picker-demo { - flex: 1 1 100%; - padding: 1rem; - .flex-layout { display: flex; flex-direction: row; diff --git a/projects/demo-app/src/app/date-picker/date-picker-demo.component.ts b/projects/demo-app/src/app/date-picker/date-picker-demo.component.ts index 1b32a7e3..eb8d1038 100644 --- a/projects/demo-app/src/app/date-picker/date-picker-demo.component.ts +++ b/projects/demo-app/src/app/date-picker/date-picker-demo.component.ts @@ -12,11 +12,6 @@ import { ChangeDetectionStrategy, Component, Injectable, LOCALE_ID, ViewEncapsul import { FormControl, FormGroup, ReactiveFormsModule, ValidationErrors } from '@angular/forms'; import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core'; import { DateRange, MatCalendarCellClassFunction, MatDatepickerModule } from '@angular/material/datepicker'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; -import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; -import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { DateFnsAdapter } from '@angular/material-date-fns-adapter'; import { NgxDestroy, setLocale } from '@hug/ngx-core'; @@ -24,6 +19,11 @@ import { NgxDatepickerButtonsComponent, NgxDatepickerMaskDirective, NgxDatepicke import { addDays, addMonths, endOfMonth, startOfDay, startOfMonth } from 'date-fns'; import { frCH } from 'date-fns/locale'; import { debounceTime, ReplaySubject, takeUntil } from 'rxjs'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatTabsModule } from '@angular/material/tabs'; registerLocaleData(localeFrCh); setLocale(frCH); diff --git a/projects/search-container/src/search-container.component.ts b/projects/search-container/src/search-container.component.ts index 200e1353..c2a306db 100644 --- a/projects/search-container/src/search-container.component.ts +++ b/projects/search-container/src/search-container.component.ts @@ -2,7 +2,7 @@ import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; import { NgControl } from '@angular/forms'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { NgxDestroy, NgxMediaService } from '@hug/ngx-core'; import { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, takeUntil, tap } from 'rxjs'; diff --git a/projects/status/src/status-detail/status-detail.module.ts b/projects/status/src/status-detail/status-detail.module.ts index 52f55ae7..3e02b9ab 100644 --- a/projects/status/src/status-detail/status-detail.module.ts +++ b/projects/status/src/status-detail/status-detail.module.ts @@ -1,11 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { NgxAbstractLazyModule } from '@hug/ngx-core'; import { NgxMessageBoxComponent } from '@hug/ngx-message-box'; import { NgxStatusDetailComponent } from './status-detail.component'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [NgxStatusDetailComponent], diff --git a/projects/status/src/status.module.ts b/projects/status/src/status.module.ts index e5190c2c..4c8debc5 100644 --- a/projects/status/src/status.module.ts +++ b/projects/status/src/status.module.ts @@ -1,11 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { NgxAbstractLazyModule } from '@hug/ngx-core'; import { NgxSnackbarComponent } from '@hug/ngx-snackbar'; import { NgxStatusComponent } from './status.component'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [NgxStatusComponent],