From 7a80ded144e09b4e9255bbf56ad3befd227c81e2 Mon Sep 17 00:00:00 2001 From: "Maxime F." Date: Wed, 25 Sep 2024 11:48:12 +0200 Subject: [PATCH 1/3] docs(ngx-date-picker): add stories for NgxDatepickerWithTimeComponent --- .../date-time-picker/date-time-picker.scss | 15 ++++ .../date-time-picker.stories.ts | 79 +++++++++++++++++++ 2 files changed, 94 insertions(+) create mode 100644 projects/story-book/src/date-time-picker/date-time-picker.scss create mode 100644 projects/story-book/src/date-time-picker/date-time-picker.stories.ts diff --git a/projects/story-book/src/date-time-picker/date-time-picker.scss b/projects/story-book/src/date-time-picker/date-time-picker.scss new file mode 100644 index 0000000..a23ee65 --- /dev/null +++ b/projects/story-book/src/date-time-picker/date-time-picker.scss @@ -0,0 +1,15 @@ +@use '@angular/material' as mat; +@use '../../../core/src/styles/theme'; +@use '../../../core/src/styles/mixins/icon-theme' as iconTheme; +@use '../../../core/src/styles/mixins/menu-theme' as menuTheme; +@use '../../../core/src/styles/themeVariables' as themeVariables; +@use '../../../numeric-stepper/src/numeric-stepper-theme' as numericStepperTheme; + +@include numericStepperTheme.theme(themeVariables.$theme); +@include iconTheme.theme(themeVariables.$theme); +@include menuTheme.theme(themeVariables.$theme); + +.matButtonContainer { + display: flex; + justify-content: center; +} diff --git a/projects/story-book/src/date-time-picker/date-time-picker.stories.ts b/projects/story-book/src/date-time-picker/date-time-picker.stories.ts new file mode 100644 index 0000000..6fd8ba4 --- /dev/null +++ b/projects/story-book/src/date-time-picker/date-time-picker.stories.ts @@ -0,0 +1,79 @@ +import { registerLocaleData } from '@angular/common'; +import localeFrExtra from '@angular/common/locales/extra/fr-CH'; +import localeFr from '@angular/common/locales/fr-CH'; +import { FormsModule } from '@angular/forms'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from '@angular/material/core'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular'; + +import { NgxDatepickerWithTimeComponent } from '../../../date-picker/src/datepicker-with-time/datepicker-with-time.component'; +import { NgxNumericStepperComponent } from '../../../numeric-stepper/src/numeric-stepper.component'; + +registerLocaleData(localeFr, 'fr-CH', localeFrExtra); + +export class CustomDateAdapter extends NativeDateAdapter { + public override format(date: Date, _displayFormat: string): string { + return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`; + } +} + +const meta: Meta = { + title: 'Components/DateTimePicker', + component: NgxDatepickerWithTimeComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [ + FormsModule, + NoopAnimationsModule, + MatDatepickerModule, + MatIconModule, + MatInputModule, + MatFormFieldModule, + NgxNumericStepperComponent + ], + providers: [ + { provide: DateAdapter, useClass: CustomDateAdapter }, + { + provide: MAT_DATE_FORMATS, + useValue: MAT_NATIVE_DATE_FORMATS + } + ] + }) + ], + parameters: { + layout: 'centered', + docs: { + description: { + component: 'The `NgxDatepickerWithTimeComponent` utilizes `MatDatepicker` and `NgxNumericStepper` to extend the classic DatePicker with TimePicker functionality.
Note: The Angular `NativeDateAdapter` does not support time format. You must use Moment, DateFns, or a custom date adapter to enable this feature.' + } + } + } +}; + +export default meta; +type Story = StoryObj; + +export const standard: Story = { + render: args => ({ + props: { + ...args, + value: new Date(), + appearance: 'outline' + }, + template: ` + + DatetimePicker + + + + + + + ` + }) +}; From 330d1652db0afe9a4e5fd7add0a7d0736c20b719 Mon Sep 17 00:00:00 2001 From: "Maxime F." Date: Wed, 25 Sep 2024 11:49:05 +0200 Subject: [PATCH 2/3] fix(ngx-numeric-stepper): fix numeric stepper style when displayed without wrapper --- .../src/numeric-stepper.component.scss | 322 +++++++++--------- 1 file changed, 161 insertions(+), 161 deletions(-) diff --git a/projects/numeric-stepper/src/numeric-stepper.component.scss b/projects/numeric-stepper/src/numeric-stepper.component.scss index ac437f4..55ec608 100644 --- a/projects/numeric-stepper/src/numeric-stepper.component.scss +++ b/projects/numeric-stepper/src/numeric-stepper.component.scss @@ -1,220 +1,220 @@ [ngx-numeric-stepper-container] { width: max-content; +} - & .mat-mdc-form-field, - [ngx-numeric-stepper-form-field] { - &:hover { - .mdc-text-field--filled { - overflow: visible; - background-color: transparent; - - .mat-mdcform-field-focus-overlay, - .mat-mdc-form-field-focus-overlay, - .mdc-line-ripple { - transition: opacity ease-out; - opacity: 0; - } - - .mat-mdc-form-field-flex { - background-color: transparent; - } +[ngx-numeric-stepper-container] .mat-mdc-form-field, +[ngx-numeric-stepper-form-field] { + &:hover { + .mdc-text-field--filled { + overflow: visible; + background-color: transparent; + + .mat-mdcform-field-focus-overlay, + .mat-mdc-form-field-focus-overlay, + .mdc-line-ripple { + transition: opacity ease-out; + opacity: 0; + } - .shadow { - background-color: rgba(245, 245, 245); - } + .mat-mdc-form-field-flex { + background-color: transparent; } - .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align { - visibility: hidden; + + .shadow { + background-color: rgba(245, 245, 245); } } - &[ngx-numeric-stepper-form-field='vertical'] { - &:not(.disabled) { - &:hover { - .mdc-floating-label { - opacity: 0 !important; - } + .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align { + visibility: hidden; + } + } + &[ngx-numeric-stepper-form-field='vertical'] { + &:not(.disabled) { + &:hover { + .mdc-floating-label { + opacity: 0 !important; + } - &.mat-mdc-form-field-invalid { - .mat-mdc-form-field-subscript-wrapper { - visibility: hidden; - } + &.mat-mdc-form-field-invalid { + .mat-mdc-form-field-subscript-wrapper { + visibility: hidden; } } } } + } - &[ngx-numeric-stepper-form-field='horizontal-inlay'] { - &:not(.disabled) { - input:not([ngx-input-autosize]) { - width: calc(100% - 64px); + &[ngx-numeric-stepper-form-field='horizontal-inlay'] { + &:not(.disabled) { + input:not([ngx-input-autosize]) { + width: calc(100% - 64px); + } + + &:hover { + &:not([float-label='always']) { + .mdc-floating-label.mat-mdc-empty { + padding-left: 23px; + } } - &:hover { - &:not([float-label='always']) { - .mdc-floating-label.mat-mdc-empty { - padding-left: 23px; - } + &[ngx-input-autosize-form-field] { + .mat-mdc-form-field-infix { + padding: 1em 23px; } - &[ngx-input-autosize-form-field] { + &.mat-mdc-form-field-appearance-outline { .mat-mdc-form-field-infix { - padding: 1em 23px; - } - - &.mat-mdc-form-field-appearance-outline { - .mat-mdc-form-field-infix { - padding: 1em 18px; - } + padding: 1em 18px; } } + } - &:not([ngx-input-autosize-form-field]) { - &.mat-mdc-form-field-appearance-fill { - input { - margin: 0 18px; - } + &:not([ngx-input-autosize-form-field]) { + &.mat-mdc-form-field-appearance-fill { + input { + margin: 0 18px; } } } } } + } - .noselect { - -webkit-touch-callout: none; - /* iOS Safari */ - -webkit-user-select: none; - /* Chrome/Safari/Opera */ - -khtml-user-select: none; - /* Konqueror */ - -moz-user-select: none; - /* Firefox */ - -ms-user-select: none; - /* Internet Explorer/Edge */ - user-select: none; - /* Non-prefixed version, currently - not supported by any browser */ - } + .noselect { + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Chrome/Safari/Opera */ + -khtml-user-select: none; + /* Konqueror */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently + not supported by any browser */ + } - * { - transition: opacity 250ms ease-out; - } + * { + transition: opacity 250ms ease-out; + } - input::-webkit-inner-spin-button, - input::-webkit-outer-spin-button { - -webkit-appearance: none !important; - margin: 0 !important; - -moz-appearance: textfield !important; - } + input::-webkit-inner-spin-button, + input::-webkit-outer-spin-button { + -webkit-appearance: none !important; + margin: 0 !important; + -moz-appearance: textfield !important; + } - .mat-mdc-input-element { - text-align: center; - } + .mat-mdc-input-element { + text-align: center; + } - &[ngx-numeric-stepper-form-field='horizontal-inlay'] { - &:not(.disabled) { - &:hover { - .mat-mdc-floating-label, - input { - z-index: 10001; - } - } - } - } + &[ngx-numeric-stepper-form-field='horizontal-inlay'] { &:not(.disabled) { &:hover { - .arrow, - .shadow { - opacity: 1; - } - - .mdc-notched-outline__trailing, - .mdc-notched-outline__leading, - .mdc-notched-outline__notch { - border: 0 !important; - } - - .mat-mdc-form-field-text-suffix, - .mat-mdc-form-field-text-prefix { - opacity: 0; - } - .mat-mdc-floating-label, input { - z-index: 10003; - } - - input { - position: relative; - } - } - - &:hover, - &[hover] { - .arrow, - .shadow { - visibility: visible; + z-index: 10001; } } } - - ngx-numeric-stepper { - z-index: 10002; - position: relative; - + } + &:not(.disabled) { + &:hover { .arrow, .shadow { - position: absolute; - visibility: hidden; + opacity: 1; + } + + .mdc-notched-outline__trailing, + .mdc-notched-outline__leading, + .mdc-notched-outline__notch { + border: 0 !important; + } + + .mat-mdc-form-field-text-suffix, + .mat-mdc-form-field-text-prefix { opacity: 0; } - .arrow { - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - z-index: 10004; - height: 32px; - width: 32px; + .mat-mdc-floating-label, + input { + z-index: 10003; + } - &[disabled='true'] { - cursor: default; - } + input { + position: relative; } + } + &:hover, + &[hover] { + .arrow, .shadow { - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(#000, 0.3); + visibility: visible; } + } + } - .increment { - border-radius: 4px 4px 0 0; - } + ngx-numeric-stepper { + z-index: 10002; + position: relative; - .decrement { - border-radius: 0 0 4px 4px; + .arrow, + .shadow { + position: absolute; + visibility: hidden; + opacity: 0; + } + + .arrow { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + z-index: 10004; + height: 32px; + width: 32px; + + &[disabled='true'] { + cursor: default; } + } - &[ngx-layout='horizontal'], - &[ngx-layout='horizontal-inlay'] { - .increment { - border-radius: 0 4px 4px 0; - } + .shadow { + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(#000, 0.3); + } - .decrement { - border-radius: 4px 0 0 4px; - } + .increment { + border-radius: 4px 4px 0 0; + } + + .decrement { + border-radius: 0 0 4px 4px; + } + + &[ngx-layout='horizontal'], + &[ngx-layout='horizontal-inlay'] { + .increment { + border-radius: 0 4px 4px 0; } - .shadow::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + .decrement { + border-radius: 4px 0 0 4px; } } + + .shadow::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } } From cf86f3f960cc143340328e0641253f5d0f1ceb82 Mon Sep 17 00:00:00 2001 From: "Maxime F." Date: Wed, 25 Sep 2024 11:49:31 +0200 Subject: [PATCH 3/3] fix(ngx-date-picker): add missing imports --- .../datepicker-with-time/datepicker-with-time.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 29c2765..c3016e1 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 @@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementR import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { MatButton } from '@angular/material/button'; import { DateAdapter } from '@angular/material/core'; -import { MatDatepicker, MatDatepickerInput, MatDateSelectionModel } from '@angular/material/datepicker'; +import { MatDatepicker, MatDatepickerApply, MatDatepickerInput, MatDateSelectionModel } from '@angular/material/datepicker'; import { NgxDateOrDuration, NgxTimePickerComponent } from '@hug/ngx-time-picker'; import { cloneDeep } from 'lodash-es'; import { delay, filter, map, tap } from 'rxjs'; @@ -21,7 +21,8 @@ import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-ad imports: [ MatButton, NgxTimePickerComponent, - MatDatepicker + MatDatepicker, + MatDatepickerApply ] }) export class NgxDatepickerWithTimeComponent implements AfterViewInit, OnDestroy {