fix: Add proper messages for pickers (#3216)

* fix: Add proper messages for pickers * remove leftovers * remove leftovers * remove example changes * change form message property name
SAP · Sep 10, 2020 · 50b23b7 · 50b23b7
1 parent 6281d1a
commit 50b23b7
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 4 deletions.
diff --git a/libs/core/src/lib/date-picker/date-picker.component.html b/libs/core/src/lib/date-picker/date-picker.component.html
@@ -1,5 +1,6 @@
 <fd-popover
     [(isOpen)]="isOpen"
+    (isOpenChange)="isOpenChange.emit($event)"
     [triggers]="[]"
     [placement]="placement"
     [closeOnEscapeKey]="true"
@@ -37,6 +38,7 @@
         </fd-input-group>
     </fd-popover-control>
     <fd-popover-body [style.display]="'block'" [attr.aria-expanded]="isOpen" [attr.aria-hidden]="!isOpen">
+        <ng-content></ng-content>
         <fd-calendar
             (closeCalendar)="closeFromCalendar()"
             [activeView]="activeView"

diff --git a/libs/core/src/lib/date-picker/date-picker.component.ts b/libs/core/src/lib/date-picker/date-picker.component.ts
@@ -62,9 +62,6 @@ export class DatePickerComponent implements ControlValueAccessor, Validator {
     /** @hidden Whether the date input is invalid */
     isInvalidDateInput = false;
 
-    /** @hidden Whether the date picker is open */
-    isOpen = false;
-
     /** @hidden */
     @ViewChild(CalendarComponent)
     calendarComponent: CalendarComponent;
@@ -204,6 +201,14 @@ export class DatePickerComponent implements ControlValueAccessor, Validator {
     @Input()
     showWeekNumbers = true;
 
+    /** Whether the date picker is open. Can be used through two-way binding. */
+    @Input()
+    isOpen = false;
+
+    /** Event emitted when the state of the isOpen property changes. */
+    @Output()
+    isOpenChange = new EventEmitter<boolean>();
+
     /** Fired when a new date is selected. */
     @Output()
     public readonly selectedDateChange: EventEmitter<FdDate> = new EventEmitter<FdDate>();
@@ -268,19 +273,22 @@ export class DatePickerComponent implements ControlValueAccessor, Validator {
         if (!this.disabled) {
             this.onTouched();
             this.isOpen = true;
+            this.isOpenChange.emit(this.isOpen);
         }
     }
 
     /** Toggles the calendar open or closed */
     public toggleCalendar(): void {
         this.onTouched();
         this.isOpen = !this.isOpen;
+        this.isOpenChange.emit(this.isOpen);
     }
 
     /** Closes the calendar if it is open */
     public closeCalendar(): void {
         if (this.isOpen) {
             this.isOpen = false;
+            this.isOpenChange.emit(this.isOpen);
         }
     }
 

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.html b/libs/core/src/lib/datetime-picker/datetime-picker.component.html
@@ -37,6 +37,7 @@
             </fd-input-group>
         </fd-popover-control>
         <fd-popover-body [attr.aria-expanded]="isOpen" [attr.aria-hidden]="!isOpen" [style.display]="'block'">
+            <ng-content></ng-content>
             <div class="fd-datetime__container">
                 <fd-calendar
                     calType="single"

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.ts b/libs/core/src/lib/datetime-picker/datetime-picker.component.ts
@@ -225,6 +225,10 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
     @Input()
     showFooter = true;
 
+    /** Event emitted when the state of the isOpen property changes. */
+    @Output()
+    isOpenChange = new EventEmitter<boolean>();
+
     /** Event thrown every time calendar active view is changed */
     @Output()
     public readonly activeViewChange: EventEmitter<FdCalendarView> = new EventEmitter<FdCalendarView>();
@@ -363,6 +367,7 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
         if (!this.isOpen && !this.disabled) {
             this.onTouched();
             this.isOpen = true;
+            this.isOpenChange.emit(this.isOpen);
             this._activateTimeComponent();
         }
     }
@@ -373,6 +378,7 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
             this.handleInputChange(this.inputFieldDate);
             this.onClose.emit();
             this.isOpen = false;
+            this.isOpenChange.emit(this.isOpen);
         }
     }
 

diff --git a/libs/core/src/lib/form/form-message/form-message.component.html b/libs/core/src/lib/form/form-message/form-message.component.html
@@ -3,7 +3,8 @@
     [ngClass]="[
         type ? ' fd-form-message--' + type : '',
         compact ? ' fd-form-message--' + compact : '',
-        static ? ' fd-form-message--static' : ''
+        static ? ' fd-form-message--static' : '',
+        embedded? ' fd-form-message--embedded' : ''
     ]"
 >
     <ng-content></ng-content>

diff --git a/libs/core/src/lib/form/form-message/form-message.component.scss b/libs/core/src/lib/form/form-message/form-message.component.scss
@@ -3,3 +3,8 @@
 .fd-form-message {
     display: block;
 }
+
+.fd-form-message--embedded {
+    box-shadow: none;
+    max-width: 100%;
+}
diff --git a/libs/core/src/lib/form/form-message/form-message.component.ts b/libs/core/src/lib/form/form-message/form-message.component.ts
@@ -24,4 +24,11 @@ export class FormMessageComponent {
     /** Whether message should be in static mode, without popover. It's mostly used for forms component, that contain dropdown */
     @Input()
     static = false;
+
+    /**
+     * Whether message is used inside popovers or dialogs.
+     * When it is enabled box shadow is removed and message is expanded to whole container width
+     */
+    @Input()
+    embedded = false;
 }
diff --git a/libs/core/src/lib/time-picker/time-picker.component.html b/libs/core/src/lib/time-picker/time-picker.component.html
@@ -1,4 +1,5 @@
 <fd-popover [(isOpen)]="isOpen"
+            (isOpenChange)="isOpenChange.emit($event)"
             [triggers]="[]"
             [disabled]="disabled"
             [placement]="placement"

diff --git a/libs/core/src/lib/time-picker/time-picker.component.ts b/libs/core/src/lib/time-picker/time-picker.component.ts
@@ -3,10 +3,12 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    EventEmitter,
     forwardRef,
     HostBinding,
     Input,
     OnDestroy,
+    Output,
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
@@ -131,6 +133,10 @@ export class TimePickerComponent implements ControlValueAccessor, OnDestroy, Aft
     @Input()
     keepTwoDigitsTime = false;
 
+    /** Event emitted when the state of the isOpen property changes. */
+    @Output()
+    isOpenChange = new EventEmitter<boolean>();
+
     /** @hidden */
     @HostBinding('class.fd-time-picker')
     timePickerClass = true;
@@ -212,6 +218,7 @@ export class TimePickerComponent implements ControlValueAccessor, OnDestroy, Aft
      */
     handleIsOpenChange(isOpen: boolean): void {
         this.isOpen = isOpen;
+        this.isOpenChange.emit(this.isOpen);
         if (isOpen) {
             this.popover.directiveRef.loaded
                 .pipe(