Merge pull request #9414 from IgniteUI/dpetev/pickers-toggle

Pickers toggle refactor

Author: Lipata

package-lock.json

@@ -83,7 +83,7 @@
     "@angular/compiler-cli": "^11.2.5",
     "@angular/language-service": "^11.2.5",
     "@angularclass/hmr": "^2.1.3",
-    "@types/jasmine": "^3.3.16",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.20.0",
     "@types/webpack-env": "^1.15.2",
@@ -109,8 +109,8 @@
     "hammer-simulator": "0.0.1",
     "igniteui-sassdoc-theme": "^1.1.4",
     "igniteui-typedoc-theme": "^2.0.9",
-    "jasmine": "~3.5.0",
-    "jasmine-core": "~3.5.0",
+    "jasmine": "~3.6.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.2",
     "karma": "^5.2.3",
     "karma-chrome-launcher": "~3.1.0",

package.json

@@ -1,16 +1,22 @@
-import { ElementRef, EventEmitter, Inject, LOCALE_ID, Optional, Input, Directive, Output } from '@angular/core';
+import {
+    AfterViewInit, ContentChildren, Directive, ElementRef, EventEmitter,
+    Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList
+} from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { EditorProvider } from '../core/edit-provider';
-import { PickerInteractionMode } from './types';
 import { IToggleView } from '../core/navigation';
 import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { DateRange } from '../date-range-picker/public_api';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
 import { OverlaySettings } from '../services/overlay/utilities';
+import { IgxPickerToggleComponent } from './picker-icons.common';
+import { PickerInteractionMode } from './types';
 
 @Directive()
-export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider {
+export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider, AfterViewInit, OnDestroy {
     /**
      * The editor's input mask.
      *
@@ -193,6 +199,10 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
     @Output()
     public closed = new EventEmitter<IBaseEventArgs>();
 
+    /** @hidden @internal */
+    @ContentChildren(IgxPickerToggleComponent, { descendants: true })
+    public toggleComponents: QueryList<IgxPickerToggleComponent>;
+
     protected _collapsed = true;
     protected _type: IgxInputGroupType;
     protected _minValue: Date | string;
@@ -215,6 +225,8 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
         return this.mode === PickerInteractionMode.DropDown;
     }
 
+    protected _destroy$ = new Subject();
+
     public abstract valueChange: EventEmitter<string | Date | DateRange | null>;
 
     constructor(public element: ElementRef,
@@ -225,6 +237,28 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
         this.locale = this.locale || this._localeId;
     }
 
+    /** @hidden @internal */
+    public ngAfterViewInit(): void {
+        this.subToIconsClicked(this.toggleComponents, () => this.open());
+        this.toggleComponents.changes.pipe(takeUntil(this._destroy$))
+            .subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));
+    }
+
+    /** @hidden @internal */
+    public ngOnDestroy(): void {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+
+    /** Subscribes to the click events of toggle/clear icons in a query */
+    protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any) {
+        components.forEach(toggle => {
+            toggle.clicked
+                .pipe(takeUntil(merge(components.changes, this._destroy$)))
+                .subscribe(next);
+        });
+    };
+
     public abstract select(value: Date | DateRange | string): void;
     public abstract open(settings?: OverlaySettings): void;
     public abstract toggle(settings?: OverlaySettings): void;