feat: datepicker angular15

DSI-HUG · Jul 31, 2024 · fc101f9 · fc101f9
1 parent 11a9b75
commit fc101f9
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index">
+<mat-tab-group mat-stretch-tabs="false" [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index">
     <mat-tab label="API REFERENCE"></mat-tab>
     <mat-tab label="EXAMPLES"></mat-tab>
 </mat-tab-group>
@@ -7,15 +7,17 @@
     <!-- <deja-markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/src/app/date-picker-material/date-picker-material-demo.md'"></deja-markdown> -->
 </mat-card>
 
-<div *ngIf="tabIndex === 1">
+<div *ngIf="tabIndex === 1" class="demo-card-container">
     <mat-card class="demo-card">
-        <mat-toolbar color="primary">Datepicker Material</mat-toolbar>
+        <mat-card-header>
+            <mat-toolbar color="primary">Datepicker Material</mat-toolbar>
+        </mat-card-header>
         <mat-card-content>
             <div class="flex-layout">
                 <div>
                     <form [formGroup]="dateForm">
                         <h3>Datepicker :</h3>
-                        <mat-form-field appearance="standard" date-format>
+                        <mat-form-field appearance="outline" date-format>
                             <mat-label>Choose a date</mat-label>
                             <input type="text" matInput #datePickerInput="matInput" [matDatepicker]="datePicker" formControlName="date" dateFormat />
                             <ngx-datepicker-buttons matSuffix [forPicker]="datePicker" [forInput]="datePickerInput"></ngx-datepicker-buttons>
@@ -45,13 +47,15 @@ <h3>Date range picker :</h3>
     </mat-card>
 
     <mat-card class="demo-card">
-        <mat-toolbar color="primary">Date Picker Material with TimePicker</mat-toolbar>
+        <mat-card-header>
+            <mat-toolbar color="primary">Date Picker Material with TimePicker</mat-toolbar>
+        </mat-card-header>
         <mat-card-content>
             <div class="flex-layout">
                 <div>
                     <form [formGroup]="dateTimeForm">
                         <h3>Date time picker :</h3>
-                        <mat-form-field appearance="legacy">
+                        <mat-form-field appearance="fill">
                             <mat-label>Choose a date and time</mat-label>
                             <mat-hint>Format : dd.MM.yyyy HH:mm</mat-hint>
                             <input matInput type="text" #dateTimePickerInput="matInput" required [matDatepicker]="dateTimePicker" formControlName="date" dateTimeFormat />

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
@@ -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
@@ -12,18 +12,18 @@ 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';
 import { NgxDatepickerButtonsComponent, NgxDatepickerMaskDirective, NgxDatepickerWithTimeComponent } from '@hug/ngx-date-picker';
 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
@@ -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
@@ -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
@@ -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],