fix: remove isComponent (#937)

* Add popover-dropdown component, remove isDateTimePicker from time/calendar component

* Add dropdown isOpen control from popover parent component

* Rename selector to fd-dropdown-control

docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover style="margin-right: 12px;"
-            [isDropdown]="true">
-    Dropdown
+<fd-popover style="margin-right: 12px;">
+    <fd-dropdown-control>Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>
@@ -22,9 +21,8 @@ <h1 fd-menu-title>
     </fd-popover-body>
 </fd-popover>
 
-<fd-popover [isDropdown]="true"
-            [compact]="true">
-    Compact Dropdown
+<fd-popover>
+    <fd-dropdown-control [compact]="true">Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-icons-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover [isDropdown]="true"
-            [glyph]="'filter'">
-    Dropdown
+<fd-popover>
+    <fd-dropdown-control [glyph]="'filter'">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-infinite-scroll-example.component.html

@@ -1,5 +1,5 @@
-<fd-popover [isDropdown]="true">
-    Dropdown
+<fd-popover>
+    <fd-dropdown-control>Dropdown</fd-dropdown-control>
     <fd-popover-body>
         <fd-menu>
             <ul fd-menu-list fdInfiniteScroll (onScrollAction)="loadMoreElements()" [scrollPercent]="scrollPercent"

docs/app/documentation/component-docs/dropdown/examples/dropdown-state-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover [isDropdown]="true"
-            [disabled]="true">
-    Dropdown
+<fd-popover [disabled]="true">
+    <fd-dropdown-control [disabled]="true">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-toolbar-example.component.html

@@ -1,7 +1,5 @@
-<fd-popover style="margin-right: 12px"
-            [isDropdown]="true"
-            [toolbar]="true">
-    Dropdown
+<fd-popover style="margin-right: 12px">
+    <fd-dropdown-control [toolbar]="true">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>
@@ -23,10 +21,8 @@ <h1 fd-menu-title>
     </fd-popover-body>
 </fd-popover>
 
-<fd-popover [isDropdown]="true"
-            [compact]="true"
-            [toolbar]="true">
-    Compact Dropdown
+<fd-popover>
+    <fd-dropdown-control [toolbar]="true" [compact]="true">Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/core-helpers/api/api.component.html

@@ -1,10 +1,8 @@
 <div class="api-main-container">
     <h2 class="api-main-header">{{activeFile}}</h2>
     <span style="display: flex; flex-grow: 1;"></span>
-    <fd-popover [(isOpen)]="openMenu"
-                [isDropdown]="true"
-                *ngIf="files.length > 1">
-        Select a file ({{files.length}})
+    <fd-popover [(isOpen)]="openMenu" *ngIf="files.length > 1">
+        <fd-dropdown-control [compact]="true" [isOpen]="openMenu">Select a file ({{files.length}})</fd-dropdown-control>
         <fd-popover-body>
             <fd-menu>
                 <ul fd-menu-list>

library/src/lib/calendar/calendar.component.ts

@@ -100,9 +100,9 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
     @Output()
     isInvalidDateInput: EventEmitter<any> = new EventEmitter();
 
-    /** @hidden Used when this calendar is for a date time picker component. For internal use. */
+    /** Whether wants to allow escape focus, otherwise it resets on beginning. */
     @Input()
-    isDateTimePicker: boolean = false;
+    allowFocusEscape: boolean = false;
 
     /** @hidden Whether the date is invalid. Internal use. */
     invalidDate: boolean = false;
@@ -899,7 +899,7 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
             }
             newFocusedYearId = '#' + this.id + '-fd-year-' + (year + 1);
         } else if (event.code === 'Tab' && !event.shiftKey) {
-            if (!this.isDateTimePicker) {
+            if (!this.allowFocusEscape) {
                 event.preventDefault();
                 this.focusElement('#arrowLeft');
             }
@@ -936,7 +936,7 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
                 newFocusedMonthId = '#' + this.id + '-fd-month-' + (month + 1);
             }
         } else if (event.code === 'Tab' && !event.shiftKey) {
-            if (!this.isDateTimePicker) {
+            if (!this.allowFocusEscape) {
                 event.preventDefault();
                 this.focusElement('#arrowLeft');
             }
@@ -949,7 +949,7 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
     /** @hidden */
     onKeydownDayHandler(event, cell) {
         if (event.code === 'Tab' && !event.shiftKey) {
-            if (!this.isDateTimePicker) {
+            if (!this.allowFocusEscape) {
                 event.preventDefault();
                 this.focusElement('#arrowLeft');
             }

library/src/lib/datetime-picker/datetime-picker.component.html

@@ -38,7 +38,7 @@
                              [(selectedDay)]="selectedDay"
                              (isInvalidDateInput)="isInvalidDateInputHandler($event)"
                              [dateFromDatePicker]="dateFromInput"
-                             [isDateTimePicker]="true"
+                             [allowFocusEscape]="true"
                              [startingDayOfWeek]="startingDayOfWeek"></fd-calendar>
                 <div class="fd-datetime__separator"></div>
                 <fd-time [disabled]="disabled"
@@ -47,7 +47,6 @@
                          (ngModelChange)="setTime(true)"
                          [spinners]="spinners"
                          [displaySeconds]="displaySeconds"
-                         [isDateTimePicker]="true"
                          (focusArrowLeft)="focusArrowLeft()"></fd-time>
             </div>
         </fd-popover-body>

library/src/lib/popover/popover-dropdown/popover-dropdown.component.html

@@ -0,0 +1,19 @@
+<div class="fd-dropdown">
+    <button
+        fd-button
+        class="fd-dropdown__control fd-button"
+        [ngClass]="
+                    (btnType ? ' fd-button--' + btnType : '') +
+                    (glyph ? ' sap-icon--' + glyph : '') +
+                    (compact ? ' fd-button--compact' : '') +
+                    (this.disabled ? ' is-disabled' : '') +
+                    (toolbar ? ' fd-button--standard': '')
+                "
+        [attr.aria-expanded]="this.disabled ? false : isOpen"
+        [attr.aria-disabled]="this.disabled"
+        aria-haspopup="true"
+        [disabled]="disabled"
+    >
+        <ng-content></ng-content>
+    </button>
+</div>

library/src/lib/popover/popover-dropdown/popover-dropdown.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopoverDropdownComponent } from './popover-dropdown.component';
+
+
+describe('PopoverControlComponent', () => {
+    let component: PopoverDropdownComponent;
+    let fixture: ComponentFixture<PopoverDropdownComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [PopoverDropdownComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PopoverDropdownComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

library/src/lib/popover/popover-dropdown/popover-dropdown.component.ts

@@ -0,0 +1,50 @@
+import { Component, Host, Inject, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { PopoverComponent } from '../popover.component';
+/**
+ * A component used to enforce a certain layout for the popover. With additional styling
+ * ```html
+ * <fd-popover>
+ *     <fd-dropdown>Dropdown</fd-dropdown>
+ *     <fd-popover-body>Popover Body</fd-popover-body>
+ * </fd-popover>
+ * ```
+ */
+@Component({
+    selector: 'fd-dropdown-control',
+    host: {
+        class: 'fd-dropdown',
+    },
+    templateUrl: 'popover-dropdown.component.html',
+    encapsulation: ViewEncapsulation.None,
+})
+export class PopoverDropdownComponent {
+    /** Whether the popover should have an arrow. */
+    @Input()
+    noArrow: boolean = true;
+
+    /** Whether the popover is disabled. */
+    @Input()
+    disabled: boolean = false;
+
+    /** The glyph to display. */
+    @Input()
+    glyph: string;
+
+    /** The btnType to display. */
+    @Input()
+    btnType: string = '';
+
+    /** Whether the dropdown is in compact format. */
+    @Input()
+    compact: boolean = false;
+
+    /** Whether the dropdown is in a toolbar. */
+    @Input()
+    toolbar: boolean = false;
+
+    /** Whether the dropdown is opened. */
+    @Input()
+    isOpen: boolean = false;
+
+}

library/src/lib/popover/popover.component.html

@@ -1,49 +1,11 @@
-<div *ngIf="isDropdown" class="fd-dropdown"
-     [ngClass]="{ 'fd-dropdown--compact': compact, 'fd-dropdown--toolbar': toolbar }">
-    <div #popoverDropdownContainer>
-        <div class="fd-popover__control">
-            <button
-                fd-button
-                class="fd-dropdown__control fd-button"
-                [ngClass]="
-                    (btnType ? ' fd-button--' + btnType : '') +
-                    (glyph ? ' sap-icon--' + glyph : '') +
-                    (compact ? ' fd-button--compact' : '') +
-                    (this.disabled ? ' is-disabled' : '') +
-                    (toolbar ? ' fd-button--standard': '')
-                "
-                [attr.aria-expanded]="this.disabled ? false : isOpen"
-                [attr.aria-disabled]="this.disabled"
-                aria-haspopup="true"
-                [fdPopover]="popoverDropdownBody"
-                [(isOpen)]="isOpen"
-                [noArrow]="noArrow"
-                [disabled]="disabled"
-                [triggers]="triggers"
-                [placement]="placement"
-                [focusTrapped]="focusTrapped"
-                (isOpenChange)="isOpenChange.emit($event)"
-                [options]="options"
-                [fillControl]="fillControl"
-                [closeOnOutsideClick]="closeOnOutsideClick"
-                [closeOnEscapeKey]="closeOnEscapeKey"
-                [appendTo]="(appendTo ? appendTo : popoverDropdownContainer)">
-                <ng-content></ng-content>
-            </button>
-        </div>
-        <ng-template #popoverDropdownBody>
-            <ng-container *ngTemplateOutlet="popoverBodyTpl"></ng-container>
-        </ng-template>
-    </div>
-</div>
-<div *ngIf="!isDropdown" #popoverContainer>
+<div #popoverContainer>
     <div class="fd-popover__control"
          [attr.aria-expanded]="this.disabled ? false : isOpen"
          [attr.aria-disabled]="this.disabled"
          aria-haspopup="true"
          [fdPopover]="popoverBody"
          [(isOpen)]="isOpen"
-         (isOpenChange)="isOpenChange.emit($event)"
+         (isOpenChange)="openChanged($event)"
          [noArrow]="noArrow"
          [disabled]="disabled"
          [triggers]="triggers"
@@ -55,6 +17,7 @@
          [closeOnEscapeKey]="closeOnEscapeKey"
          [appendTo]="(appendTo ? appendTo : popoverContainer)">
         <ng-content select="fd-popover-control"></ng-content>
+        <ng-content select="fd-dropdown-control"></ng-content>
     </div>
     <ng-template #popoverBody>
         <ng-container *ngTemplateOutlet="popoverBodyTpl"></ng-container>

library/src/lib/popover/popover.component.ts

@@ -3,10 +3,11 @@ import {
     Input,
     Output,
     EventEmitter,
-    ViewChild, ViewEncapsulation
+    ViewChild, ViewEncapsulation, ContentChild
 } from '@angular/core';
 import { Placement, PopperOptions } from 'popper.js';
 import { PopoverDirective } from './popover-directive/popover.directive';
+import { PopoverDropdownComponent } from './popover-dropdown/popover-dropdown.component';
 
 let popoverUniqueId: number = 0;
 
@@ -31,6 +32,8 @@ export class PopoverComponent {
     /** @hidden */
     @ViewChild(PopoverDirective)
     directiveRef: PopoverDirective;
+    /** @hidden */
+    @ContentChild(PopoverDropdownComponent) dropdownComponent: PopoverDropdownComponent;
 
     /** Whether the popover should have an arrow. */
     @Input()
@@ -58,26 +61,10 @@ export class PopoverComponent {
     @Input()
     placement: Placement;
 
-    /** Only to be used when the popover is used as a dropdown. The glyph to display. */
-    @Input()
-    glyph: string;
-
-    /** Only to be used when the popover is used as a dropdown. The btnType to display. */
-    @Input()
-    btnType: string = '';
-
     /** Whether the popover is open. Can be used through two-way binding. */
     @Input()
     isOpen: boolean = false;
 
-    /** Only to be used when the popover is used as a dropdown. Whether the dropdown is in compact format. */
-    @Input()
-    compact: boolean = false;
-
-    /** Only to be used when the popover is used as a dropdown. Whether the dropdown is in a toolbar. */
-    @Input()
-    toolbar: boolean = false;
-
     /** The Popper.js options to attach to this popover.
      * See the [Popper.js Documentation](https://popper.js.org/popper-documentation.html) for details. */
     @Input()
@@ -154,4 +141,22 @@ export class PopoverComponent {
         this.directiveRef.updatePopper();
     }
 
+    /**
+     * Function is called every time popover changes open attribute
+     */
+    public openChanged(isOpen: boolean) {
+        this.isOpenChange.emit(isOpen);
+        this.updateDropdownIsOpen(isOpen);
+    }
+
+
+    /** @hidden
+     *  Function that allows us to control aria-expanded on dropdown child
+     * */
+    private updateDropdownIsOpen(isOpen: boolean) {
+        if (this.dropdownComponent) {
+            this.dropdownComponent.isOpen = isOpen;
+        }
+    }
+
 }

library/src/lib/popover/popover.module.ts

@@ -6,11 +6,19 @@ import { PopoverControlComponent } from './popover-control/popover-control.compo
 import { PopoverBodyComponent } from './popover-body/popover-body.component';
 import { PopoverDirective } from './popover-directive/popover.directive';
 import { PopoverContainer } from './popover-directive/popover-container';
+import { PopoverDropdownComponent } from './popover-dropdown/popover-dropdown.component';
 
 @NgModule({
-    declarations: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, PopoverDirective, PopoverContainer],
+    declarations: [
+        PopoverComponent,
+        PopoverControlComponent,
+        PopoverBodyComponent,
+        PopoverDirective,
+        PopoverContainer,
+        PopoverDropdownComponent,
+    ],
     imports: [CommonModule],
-    exports: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, PopoverDirective],
+    exports: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, PopoverDirective, PopoverDropdownComponent],
     entryComponents: [PopoverContainer]
 })
 export class PopoverModule {}

library/src/lib/time/time.component.ts

@@ -51,10 +51,6 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
     @Input()
     time: TimeObject = { hour: 0, minute: 0, second: 0 };
 
-    /** @hidden */
-    @Input()
-    isDateTimePicker: boolean = false;
-
     /** @hidden */
     @Output()
     focusArrowLeft: EventEmitter<any> = new EventEmitter<any>();