feat(Dropdown): add DropdownCloseDirective

Author: xidedix

Diff for: projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts

@@ -0,0 +1,10 @@
+import { DropdownService } from '../dropdown.service';
+import { DropdownCloseDirective } from './dropdown-close.directive';
+
+describe('DropdownCloseDirective', () => {
+  it('should create an instance', () => {
+    const dropdownService = new DropdownService();
+    const directive = new DropdownCloseDirective(dropdownService);
+    expect(directive).toBeTruthy();
+  });
+});

Diff for: projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.ts

@@ -0,0 +1,56 @@
+import { Directive, HostBinding, HostListener, Input, Optional } from '@angular/core';
+import { DropdownService } from '../dropdown.service';
+import { DropdownComponent } from '../dropdown/dropdown.component';
+
+@Directive({
+  selector: '[cDropdownClose]',
+  exportAs: 'cDropdownClose'
+})
+export class DropdownCloseDirective {
+
+  /**
+   * Disables a dropdown-close directive.
+   * @type boolean
+   * @default undefined
+   */
+  @Input() disabled?: boolean;
+
+  constructor(
+    private dropdownService: DropdownService,
+    @Optional() public dropdown?: DropdownComponent
+  ) { }
+
+  @HostBinding('class')
+  get hostClasses(): any {
+    return {
+      disabled: this.disabled
+    };
+  }
+
+  @HostBinding('attr.tabindex')
+  @Input()
+  set tabIndex(value: string | number | null) {
+    this._tabIndex = value;
+  }
+  get tabIndex() {
+    return this.disabled ? '-1' : this._tabIndex;
+  }
+  private _tabIndex: string | number | null = null;
+
+  @HostBinding('attr.aria-disabled')
+  get isDisabled(): boolean | null {
+    return this.disabled || null;
+  }
+
+  @HostListener('click', ['$event'])
+  private onClick($event: MouseEvent): void {
+    this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+  }
+
+  @HostListener('keyup', ['$event'])
+  private onKeyUp($event: KeyboardEvent): void {
+    if ($event.key === 'Enter') {
+      this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+    }
+  }
+}

Diff for: projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts

@@ -33,7 +33,6 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
   get dark(): boolean {
     return this._dark;
   }
-
   set dark(value: boolean) {
     this._dark = coerceBooleanProperty(value);
   }

Diff for: projects/coreui-angular/src/lib/dropdown/dropdown.module.ts

@@ -7,6 +7,7 @@ import { DropdownItemDirective } from './dropdown-item/dropdown-item.directive';
 import { DropdownItemPlainDirective } from './dropdown-item/dropdown-item-plain.directive';
 import { DropdownMenuDirective } from './dropdown-menu/dropdown-menu.directive';
 import { DropdownService } from './dropdown.service';
+import { DropdownCloseDirective } from './dropdown-close/dropdown-close.directive';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { DropdownService } from './dropdown.service';
     DropdownItemDirective,
     DropdownItemPlainDirective,
     DropdownToggleDirective,
-    DropdownMenuDirective
+    DropdownMenuDirective,
+    DropdownCloseDirective
   ],
   imports: [
     CommonModule,
@@ -28,7 +30,8 @@ import { DropdownService } from './dropdown.service';
     DropdownItemDirective,
     DropdownItemPlainDirective,
     DropdownToggleDirective,
-    DropdownMenuDirective
+    DropdownMenuDirective,
+    DropdownCloseDirective
   ],
   providers: [
     DropdownService,

Diff for: projects/coreui-angular/src/lib/dropdown/public_api.ts

@@ -3,6 +3,7 @@ export { DropdownHeaderDirective } from './dropdown-header/dropdown-header.direc
 export { DropdownItemDirective } from './dropdown-item/dropdown-item.directive';
 export { DropdownItemPlainDirective } from './dropdown-item/dropdown-item-plain.directive';
 export { DropdownMenuDirective } from './dropdown-menu/dropdown-menu.directive';
+export { DropdownCloseDirective } from './dropdown-close/dropdown-close.directive';
 export { DropdownComponent, DropdownToggleDirective } from './dropdown/dropdown.component';
 export { DropdownService } from './dropdown.service';
 export { DropdownModule } from './dropdown.module';