Add events : open close popup and focus element (#83)

* Add event for opening and closing popup * Add event for focus and an example to display a pending icon. --------- Co-authored-by: Gregory COCHIN <[email protected]>
tech-advantage · Aug 21, 2023 · 77ecc9b · 77ecc9b
1 parent 64bd4e2
commit 77ecc9b
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -50,23 +50,26 @@ import { IconPickerModule } from 'ngx-icon-picker';
 Available inputs and output :
 
 ```typescript
-[iconPicker]                // The icon to select in the grid.
-
-[ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
-[ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
-[ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').
-
-[ipIconPack]                // Icon pack (Font Awesome / Font Awesome5 / Font Awesome6 / Material / Prime): 'fa', 'fa5', 'fa6', 'mat', 'pi', 'all' (default: ['bs', 'fa5']).
-[ipIconSize]                // Set the icon size in the selector (default: '16px')
-[ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
-[ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
-[ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    
-
-[ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
-[ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
-[ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').
-
-(iconPickerSelect)          // On selected icon value.
+  [iconPicker]                // The icon to select in the grid.
+
+  [ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
+  [ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
+  [ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').
+
+  [ipIconPack]                // Icon pack (Font Awesome / Font Awesome5 / Font Awesome6 / Material / Prime): 'fa', 'fa5', 'fa6', 'mat', 'pi', 'all' (default: ['bs', 'fa5']).
+  [ipIconSize]                // Set the icon size in the selector (default: '16px')
+  [ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
+  [ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
+  [ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    
+
+  [ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
+  [ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
+  [ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').
+
+  (iconPickerSelect)          // On selected icon value.
+  (iconPickerOpen)            // On open popup
+  (iconPickerClose)           // On close popup
+  (iconPickerClose)           // On focus element
 ```
 
 To integrate the icon picker with an another framework, you have to use the extra inputs:

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Icon picker widget for Angular (version 16 and newer)",
   "bugs": "https://github.com/tech-advantage/ngx-icon-picker/issues",
   "license": "MIT",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "scripts": {
     "ng": "ng",
     "lint": "ng lint",

diff --git a/projects/app/src/app/app.component.html b/projects/app/src/app/app.component.html
@@ -4,7 +4,7 @@ <h4>Angular IconPicker Directive/Component with no dependencies required</h4>
   <a class="btn btn-primary" href="https://github.com/tech-advantage/ngx-icon-picker" target="blank">View on Github</a>
   <hr>
   <h2>Icons with default Icon Pack</h2>
-  <div>Bootstrap Glyphicons and Font Awesome 5</div>
+  <div>Font Awesome 5</div>
   <div class="row">
     <div class="col-lg-5">
       <div [formGroup]="myFormGroup">
@@ -19,14 +19,23 @@ <h2>Icons with default Icon Pack</h2>
                  [iconPicker]="iconCssDefault.value" [ipPosition]="'bottom'"
                  [ipWidth]="'250px'" [ipPlaceHolder]="'Choose an icon'" [ipFallbackIcon]="fallbackIconDefault"
                  (iconPickerSelect)="onIconPickerDefaultSelect($event)"
+                 (iconPickerOpen)="onIconPickerOpen()" (iconPickerClose)="onIconPickerClose()"
+                 (iconPickerFocus)="onIconPickerFocus()"
           />
+          <div class="input-group-append">
+            <span *ngIf="awaitingOpening" class="input-group-text"><i class="fas fa-spinner fa-pulse"></i></span>
+          </div>
+        </div>
+        <div>
+          <span>State : {{stateIconPicker}} / Focus : {{awaitingOpening}}</span>
         </div>
       </div>
     </div>
     <div class="col-lg-7">
       <p>Usage:</p>
       <pre>
-         Example to integrate the Icon Picker in an application.
+        Example to integrate the Icon Picker in an application.
+        Use the emit events and display a awaiting pending icon.
       </pre>
     </div>
   </div>
@@ -41,7 +50,8 @@ <h2>Font Awesome 6 icons and panel size defined to 500px</h2>
               <fa-icon [icon]="iconCssFa6.value"></fa-icon>
             </div>
           </span>
-          <input type="text" name="iconCssFa6" class="form-control" formControlName="iconCssFa6" [iconPicker]="iconCssFa6.value"
+          <input type="text" name="iconCssFa6" class="form-control" formControlName="iconCssFa6"
+                 [iconPicker]="iconCssFa6.value"
                  [ipPosition]="'bottom'" [ipIconPack]="['fa6']"
                  [ipWidth]="'500px'" [ipPlaceHolder]="'Choose an icon'" [ipFallbackIcon]="fallbackIconFa6"
                  (iconPickerSelect)="onIconPickerFa6Select($event)"
@@ -119,7 +129,8 @@ <h2>Change size</h2>
               <i [ngClass]="iconCssAll.value"></i>
             </div>
           </span>
-          <input type="text" name="iconCssAll" class="form-control" formControlName="iconCssAll" [iconPicker]="iconCssAll.value"
+          <input type="text" name="iconCssAll" class="form-control" formControlName="iconCssAll"
+                 [iconPicker]="iconCssAll.value"
                  [ipPosition]="'bottom'" [ipIconPack]="['all']" [ipInputSearchStyleClass]="'my-icon-input-search'"
                  [ipWidth]="'500px'" [ipPlaceHolder]="'Choose an icon'" [ipIconSize]="'64px'"
                  [ipFallbackIcon]="fallbackIconAll" (iconPickerSelect)="onIconPickerAllSelect($event)"

diff --git a/projects/app/src/app/app.component.ts b/projects/app/src/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -28,6 +28,8 @@ export class AppComponent implements OnInit {
   fallbackIconButton = 'fas fa-igloo';
   fallbackIconSpan = 'fas fa-igloo';
   fallbackIcons: string[] = ['fas fa-question-circle', 'fas fa-igloo'];
+  stateIconPicker = "Closed";
+  awaitingOpening = false;
 
   ngOnInit(): void {
     const size = this.fallbackIcons.length;
@@ -86,4 +88,17 @@ export class AppComponent implements OnInit {
   onIconPickerMultiSelect(icon: string, i: number): void {
     this.iconCssMulti[i].setValue(icon);
   }
+
+  onIconPickerOpen(): void {
+    this.stateIconPicker = 'Opened';
+    this.awaitingOpening = false;
+  }
+
+  onIconPickerClose(): void {
+    this.stateIconPicker = 'Closed';
+  }
+
+  onIconPickerFocus(): void {
+    this.awaitingOpening = true;
+  }
 }
diff --git a/projects/lib/README.md b/projects/lib/README.md
@@ -50,23 +50,26 @@ import { IconPickerModule } from 'ngx-icon-picker';
 Available inputs and output :
 
 ```typescript
-[iconPicker]                // The icon to select in the grid.
-
-[ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
-[ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
-[ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').
-
-[ipIconPack]                // Icon pack (Font Awesome / Font Awesome5 / Font Awesome6 / Material / Prime): 'fa', 'fa5', 'fa6', 'mat', 'pi', 'all' (default: ['bs', 'fa5']).
-[ipIconSize]                // Set the icon size in the selector (default: '16px')
-[ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
-[ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
-[ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    
-
-[ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
-[ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
-[ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').
-
-(iconPickerSelect)          // On selected icon value.
+  [iconPicker]                // The icon to select in the grid.
+
+  [ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
+  [ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
+  [ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').
+
+  [ipIconPack]                // Icon pack (Font Awesome / Font Awesome5 / Font Awesome6 / Material / Prime): 'fa', 'fa5', 'fa6', 'mat', 'pi', 'all' (default: ['bs', 'fa5']).
+  [ipIconSize]                // Set the icon size in the selector (default: '16px')
+  [ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
+  [ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
+  [ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    
+
+  [ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
+  [ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
+  [ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').
+
+  (iconPickerSelect)          // On selected icon value.
+  (iconPickerOpen)            // On open popup
+  (iconPickerClose)           // On close popup
+  (iconPickerClose)           // On focus element
 ```
 
 To integrate the icon picker with an another framework, you have to use the extra inputs:

diff --git a/projects/lib/package.json b/projects/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-icon-picker",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "dependencies": {
     "tslib": "^2.0.0"
   },

diff --git a/projects/lib/src/lib/icon-picker.component.ts b/projects/lib/src/lib/icon-picker.component.ts
@@ -152,6 +152,7 @@ export class IconPickerComponent implements OnInit {
         this.hidden = false;
         this.cdr.detectChanges();
       }, 0);
+      this.directiveInstance.stateChanged(true);
       document.addEventListener('mousedown', this.listenerMouseDown);
       window.addEventListener('resize', this.listenerResize);
     }
@@ -160,6 +161,7 @@ export class IconPickerComponent implements OnInit {
   closeIconPicker() {
     if (this.show) {
       this.show = false;
+      this.directiveInstance.stateChanged(false);
       document.removeEventListener('mousedown', this.listenerMouseDown);
       window.removeEventListener('resize', this.listenerResize);
       this.cdr.detectChanges();

diff --git a/projects/lib/src/lib/icon-picker.directive.ts b/projects/lib/src/lib/icon-picker.directive.ts
@@ -10,7 +10,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 
-import {IconPickerComponent} from './icon-picker.component';
+import { IconPickerComponent } from './icon-picker.component';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -27,15 +27,22 @@ export class IconPickerDirective implements OnInit, OnChanges {
   @Input() ipIconSize = '16px';
   @Input() ipIconVerticalPadding = '6px'; // Top / Bottom
   @Input() ipIconHorizontalPadding = '10px'; // Left / Right
-  @Input() ipIconPack = ['bs', 'fa5'];
+  @Input() ipIconPack = ['fa5'];
   @Input() ipKeepSearchFilter = 'false';
-  @Input() ipUseRootViewContainer=false;
+  @Input() ipUseRootViewContainer = false;
   // Default design with bootstrap
   @Input() ipButtonStyleClass = 'btn btn-default';
   @Input() ipDivSearchStyleClass = '';
   @Input() ipInputSearchStyleClass = 'form-control input-sm';
 
   @Output() iconPickerSelect = new EventEmitter<string>(true);
+  @Output() iconPickerOpen = new EventEmitter<void>(true);
+  @Output() iconPickerClose = new EventEmitter<void>(true);
+  @Output() iconPickerFocus = new EventEmitter<void>(true);
+
+  @HostListener('focus') handleFocus(): void {
+    this.elementFocus();
+  }
 
   private dialog: any;
   private created: boolean;
@@ -86,4 +93,15 @@ export class IconPickerDirective implements OnInit, OnChanges {
     this.iconPickerSelect.emit(icon);
   }
 
+  public stateChanged(state: boolean): void {
+    if (state) {
+      this.iconPickerOpen.emit();
+    } else {
+      this.iconPickerClose.emit();
+    }
+  }
+
+  public elementFocus(): void {
+    this.iconPickerFocus.emit();
+  }
 }