ngx-ntk-icon-picker 20.25.2 → 20.25.4

package/fesm2022/ngx-ntk-icon-picker.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, HostListener, Output, Input, Directive, Pipe, ViewChild, Component, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { Injectable, EventEmitter, HostListener, Input, Output, Directive, Pipe, ViewChild, Component, NgModule } from '@angular/core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 class Icon {
 }
@@ -44626,141 +44626,13 @@ class IconPickerService {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerService, deps: [{ token: i1.FaIconLibrary }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerService, deps: [{ token: i1.FaIconLibrary }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.FaIconLibrary }] });
 
-class IconPickerDirective {
-    handleFocus() {
-        this.elementFocus();
-    }
-    constructor(vcRef, el) {
-        this.vcRef = vcRef;
-        this.el = el;
-        this.ipPlaceHolder = 'Search icon...';
-        this.ipPosition = 'right';
-        this.ipFallbackIcon = 'fas fa-user';
-        this.ipHeight = 'auto';
-        this.ipMaxHeight = '200px';
-        this.ipWidth = '230px';
-        this.ipIconSize = '16px';
-        this.ipIconVerticalPadding = '6px'; // Top / Bottom
-        this.ipIconHorizontalPadding = '10px'; // Left / Right
-        this.ipIconPack = ['fa5'];
-        this.ipKeepSearchFilter = 'false';
-        this.ipUseRootViewContainer = false;
-        // Default design with bootstrap
-        this.ipButtonStyleClass = 'btn btn-default';
-        this.ipDivSearchStyleClass = '';
-        this.ipInputSearchStyleClass = 'form-control input-sm';
-        this.iconPickerSelect = new EventEmitter(true);
-        this.iconPickerOpen = new EventEmitter(true);
-        this.iconPickerClose = new EventEmitter(true);
-        this.iconPickerFocus = new EventEmitter(true);
-        this.ignoreChanges = false;
-        this.created = false;
-    }
-    onClick() {
-        this.openDialog();
-    }
-    ngOnChanges(changes) {
-        if (changes.iconPicker) {
-            this.ignoreChanges = false;
-        }
-    }
-    ngOnInit() {
-        this.iconPicker = this.iconPicker || this.ipFallbackIcon || 'fa fa-user-plus';
-        this.iconPickerSelect.emit(this.iconPicker);
-    }
-    openDialog() {
-        if (!this.created) {
-            this.created = true;
-            const vcRef = this.vcRef;
-            const cmpRef = vcRef.createComponent(IconPickerComponent);
-            cmpRef.instance.setDialog(this, this.el, this.iconPicker, this.ipPosition, this.ipHeight, this.ipMaxHeight, this.ipWidth, this.ipPlaceHolder, this.ipFallbackIcon, this.ipIconPack, this.ipIconSize, this.ipIconVerticalPadding, this.ipIconHorizontalPadding, this.ipButtonStyleClass, this.ipDivSearchStyleClass, this.ipInputSearchStyleClass, this.ipKeepSearchFilter, this.ipUseRootViewContainer);
-            this.dialog = cmpRef.instance;
-            if (this.vcRef !== vcRef) {
-                cmpRef.changeDetectorRef.detectChanges();
-            }
-        }
-        else if (this.dialog) {
-            this.dialog.openDialog(this.iconPicker);
-        }
-    }
-    iconSelected(icon) {
-        this.iconPickerSelect.emit(icon);
-    }
-    stateChanged(state) {
-        if (state) {
-            this.iconPickerOpen.emit();
-        }
-        else {
-            this.iconPickerClose.emit();
-        }
-    }
-    elementFocus() {
-        this.iconPickerFocus.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: IconPickerDirective, isStandalone: true, selector: "[iconPicker]", inputs: { iconPicker: "iconPicker", ipPlaceHolder: "ipPlaceHolder", ipPosition: "ipPosition", ipFallbackIcon: "ipFallbackIcon", ipHeight: "ipHeight", ipMaxHeight: "ipMaxHeight", ipWidth: "ipWidth", ipIconSize: "ipIconSize", ipIconVerticalPadding: "ipIconVerticalPadding", ipIconHorizontalPadding: "ipIconHorizontalPadding", ipIconPack: "ipIconPack", ipKeepSearchFilter: "ipKeepSearchFilter", ipUseRootViewContainer: "ipUseRootViewContainer", ipButtonStyleClass: "ipButtonStyleClass", ipDivSearchStyleClass: "ipDivSearchStyleClass", ipInputSearchStyleClass: "ipInputSearchStyleClass" }, outputs: { iconPickerSelect: "iconPickerSelect", iconPickerOpen: "iconPickerOpen", iconPickerClose: "iconPickerClose", iconPickerFocus: "iconPickerFocus" }, host: { listeners: { "focus": "handleFocus()", "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[iconPicker]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { iconPicker: [{
-                type: Input
-            }], ipPlaceHolder: [{
-                type: Input
-            }], ipPosition: [{
-                type: Input
-            }], ipFallbackIcon: [{
-                type: Input
-            }], ipHeight: [{
-                type: Input
-            }], ipMaxHeight: [{
-                type: Input
-            }], ipWidth: [{
-                type: Input
-            }], ipIconSize: [{
-                type: Input
-            }], ipIconVerticalPadding: [{
-                type: Input
-            }], ipIconHorizontalPadding: [{
-                type: Input
-            }], ipIconPack: [{
-                type: Input
-            }], ipKeepSearchFilter: [{
-                type: Input
-            }], ipUseRootViewContainer: [{
-                type: Input
-            }], ipButtonStyleClass: [{
-                type: Input
-            }], ipDivSearchStyleClass: [{
-                type: Input
-            }], ipInputSearchStyleClass: [{
-                type: Input
-            }], iconPickerSelect: [{
-                type: Output
-            }], iconPickerOpen: [{
-                type: Output
-            }], iconPickerClose: [{
-                type: Output
-            }], iconPickerFocus: [{
-                type: Output
-            }], handleFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class TextDirective {
     constructor() {
         this.newValue = new EventEmitter();
@@ -44768,10 +44640,10 @@ class TextDirective {
     changeInput(value) {
         this.newValue.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: TextDirective, isStandalone: true, selector: "[text]", inputs: { text: "text" }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "changeInput($event.target.value)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: TextDirective, isStandalone: true, selector: "[text]", inputs: { text: "text" }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "changeInput($event.target.value)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -44812,10 +44684,10 @@ class SearchIconPipe {
     clean(value) {
         return value.trim().toLowerCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, isStandalone: true, name: "searchIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: SearchIconPipe, isStandalone: true, name: "searchIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'searchIcon'
@@ -45028,38 +44900,166 @@ class IconPickerComponent {
         // This can be enhanced later with a proper icon existence check
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IconPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: IconPickerComponent, isStandalone: true, selector: "icon-picker", providers: [IconPickerService], viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogPopup"], descendants: true }], ngImport: i0, template: "<div class=\"icon-picker\" #dialogPopup [hidden]=\"!show\" [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n  [style.height.px]=\"ipHeight\" [style.width.px]=\"ipWidth\" [style.top.px]=\"top\" [style.left.px]=\"left\"\r\n  [style.position]=\"position\">\r\n\r\n  <div class=\"arrow arrow-{{ipPosition}}\" [style.top.px]=\"arrowTop\"></div>\r\n\r\n  <div class=\"icon-search {{ipDivSearchStyleClass}}\">\r\n    <input type=\"text\" class=\"{{ipInputSearchStyleClass}}\" [text] [value]=\"search\" (newValue)=\"setSearch($event)\"\r\n      [placeholder]=\"ipPlaceHolder\">\r\n  </div>\r\n  <div class=\"icon-grid\" [ngStyle]=\"{'max-height.px': ipMaxHeight}\">\r\n    <div *ngFor=\"let icon of icons | searchIcon:search\">\r\n      <button *ngIf=\"icon\" class=\"ip-button-icon {{ipButtonStyleClass}}\" type=\"button\" title=\"{{ icon.name }}\"\r\n        [ngClass]=\"{active : icon === selectedIcon}\" [style.width.px]=\"buttonWidth\" [style.height.px]=\"buttonHeight\"\r\n        [style.padding-top.px]=\"ipIconVerticalPadding\" [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n        [style.padding-left.px]=\"ipIconHorizontalPadding\" [style.padding-right.px]=\"ipIconHorizontalPadding\"\r\n        (click)=\"selectIcon(icon)\">\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome\" class=\"fa fa-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome5\" class=\"{{icon.id}}\" [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome6\" [style.font-size.px]=\"ipIconSize\">\r\n          <fa-icon [icon]=\"['fas', icon.iconName]\" (error)=\"onIconError($event)\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"icon.type === iconType.Material\" class=\"material-icons\"\r\n          [style.font-size.px]=\"ipIconSize\">{{icon.id}}</span>\r\n        <span *ngIf=\"icon.type === iconType.PrimeIcons\" class=\"pi pi-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".icon-picker{box-sizing:border-box;margin:0;position:absolute;z-index:100000;top:250px;left:30px;width:230px;height:auto;border:#777 solid 1px;cursor:default;background-color:#fff;-webkit-user-select:none;user-select:none}.icon-picker i{position:relative;cursor:default}.icon-picker .arrow{position:absolute;z-index:999999;width:0;height:0;border-style:solid}.icon-picker .arrow-right{top:10px;left:-20px;border-width:5px 10px;border-color:rgba(0,0,0,0) #777 rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker .arrow-left{top:10px;left:100%;border-width:5px 10px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #777}.icon-picker .arrow-bottom{top:-20px;left:10px;border-width:10px 5px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #777 rgba(0,0,0,0)}.icon-picker .arrow-top{left:10px;border-width:10px 5px;border-color:#777 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker div.icon-search{padding:5px}.icon-picker div.icon-grid{display:flex;overflow-y:auto;flex-direction:row;flex-wrap:wrap;padding:5px}.icon-picker div.icon-grid div{margin:2px}.icon-picker div.cursor-sv{position:relative;width:15px;height:15px;border-radius:50%;border:#ddd solid 1px;cursor:default}.icon-picker div.cursor{position:relative;width:16px;height:16px;border-radius:50%;border:#222 solid 2px;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: TextDirective, selector: "[text]", inputs: ["text"], outputs: ["newValue"] }, { kind: "pipe", type: SearchIconPipe, name: "searchIcon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IconPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: IconPickerComponent, isStandalone: false, selector: "icon-picker", providers: [IconPickerService], viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogPopup"], descendants: true }], ngImport: i0, template: "<div class=\"icon-picker\" #dialogPopup [hidden]=\"!show\" [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n  [style.height.px]=\"ipHeight\" [style.width.px]=\"ipWidth\" [style.top.px]=\"top\" [style.left.px]=\"left\"\r\n  [style.position]=\"position\">\r\n\r\n  <div class=\"arrow arrow-{{ipPosition}}\" [style.top.px]=\"arrowTop\"></div>\r\n\r\n  <div class=\"icon-search {{ipDivSearchStyleClass}}\">\r\n    <input type=\"text\" class=\"{{ipInputSearchStyleClass}}\" [text] [value]=\"search\" (newValue)=\"setSearch($event)\"\r\n      [placeholder]=\"ipPlaceHolder\">\r\n  </div>\r\n  <div class=\"icon-grid\" [ngStyle]=\"{'max-height.px': ipMaxHeight}\">\r\n    <div *ngFor=\"let icon of icons | searchIcon:search\">\r\n      <button *ngIf=\"icon\" class=\"ip-button-icon {{ipButtonStyleClass}}\" type=\"button\" title=\"{{ icon.name }}\"\r\n        [ngClass]=\"{active : icon === selectedIcon}\" [style.width.px]=\"buttonWidth\" [style.height.px]=\"buttonHeight\"\r\n        [style.padding-top.px]=\"ipIconVerticalPadding\" [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n        [style.padding-left.px]=\"ipIconHorizontalPadding\" [style.padding-right.px]=\"ipIconHorizontalPadding\"\r\n        (click)=\"selectIcon(icon)\">\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome\" class=\"fa fa-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome5\" class=\"{{icon.id}}\" [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome6\" [style.font-size.px]=\"ipIconSize\">\r\n          <fa-icon [icon]=\"['fas', icon.iconName]\" (error)=\"onIconError($event)\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"icon.type === iconType.Material\" class=\"material-icons\"\r\n          [style.font-size.px]=\"ipIconSize\">{{icon.id}}</span>\r\n        <span *ngIf=\"icon.type === iconType.PrimeIcons\" class=\"pi pi-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".icon-picker{box-sizing:border-box;margin:0;position:absolute;z-index:100000;top:250px;left:30px;width:230px;height:auto;border:#777 solid 1px;cursor:default;background-color:#fff;-webkit-user-select:none;user-select:none}.icon-picker i{position:relative;cursor:default}.icon-picker .arrow{position:absolute;z-index:999999;width:0;height:0;border-style:solid}.icon-picker .arrow-right{top:10px;left:-20px;border-width:5px 10px;border-color:rgba(0,0,0,0) #777 rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker .arrow-left{top:10px;left:100%;border-width:5px 10px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #777}.icon-picker .arrow-bottom{top:-20px;left:10px;border-width:10px 5px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #777 rgba(0,0,0,0)}.icon-picker .arrow-top{left:10px;border-width:10px 5px;border-color:#777 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker div.icon-search{padding:5px}.icon-picker div.icon-grid{display:flex;overflow-y:auto;flex-direction:row;flex-wrap:wrap;padding:5px}.icon-picker div.icon-grid div{margin:2px}.icon-picker div.cursor-sv{position:relative;width:15px;height:15px;border-radius:50%;border:#ddd solid 1px;cursor:default}.icon-picker div.cursor{position:relative;width:16px;height:16px;border-radius:50%;border:#222 solid 2px;cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: TextDirective, selector: "[text]", inputs: ["text"], outputs: ["newValue"] }, { kind: "pipe", type: SearchIconPipe, name: "searchIcon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'icon-picker', standalone: true, imports: [CommonModule, FontAwesomeModule, IconPickerDirective, TextDirective, SearchIconPipe], providers: [IconPickerService], template: "<div class=\"icon-picker\" #dialogPopup [hidden]=\"!show\" [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n  [style.height.px]=\"ipHeight\" [style.width.px]=\"ipWidth\" [style.top.px]=\"top\" [style.left.px]=\"left\"\r\n  [style.position]=\"position\">\r\n\r\n  <div class=\"arrow arrow-{{ipPosition}}\" [style.top.px]=\"arrowTop\"></div>\r\n\r\n  <div class=\"icon-search {{ipDivSearchStyleClass}}\">\r\n    <input type=\"text\" class=\"{{ipInputSearchStyleClass}}\" [text] [value]=\"search\" (newValue)=\"setSearch($event)\"\r\n      [placeholder]=\"ipPlaceHolder\">\r\n  </div>\r\n  <div class=\"icon-grid\" [ngStyle]=\"{'max-height.px': ipMaxHeight}\">\r\n    <div *ngFor=\"let icon of icons | searchIcon:search\">\r\n      <button *ngIf=\"icon\" class=\"ip-button-icon {{ipButtonStyleClass}}\" type=\"button\" title=\"{{ icon.name }}\"\r\n        [ngClass]=\"{active : icon === selectedIcon}\" [style.width.px]=\"buttonWidth\" [style.height.px]=\"buttonHeight\"\r\n        [style.padding-top.px]=\"ipIconVerticalPadding\" [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n        [style.padding-left.px]=\"ipIconHorizontalPadding\" [style.padding-right.px]=\"ipIconHorizontalPadding\"\r\n        (click)=\"selectIcon(icon)\">\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome\" class=\"fa fa-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome5\" class=\"{{icon.id}}\" [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome6\" [style.font-size.px]=\"ipIconSize\">\r\n          <fa-icon [icon]=\"['fas', icon.iconName]\" (error)=\"onIconError($event)\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"icon.type === iconType.Material\" class=\"material-icons\"\r\n          [style.font-size.px]=\"ipIconSize\">{{icon.id}}</span>\r\n        <span *ngIf=\"icon.type === iconType.PrimeIcons\" class=\"pi pi-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".icon-picker{box-sizing:border-box;margin:0;position:absolute;z-index:100000;top:250px;left:30px;width:230px;height:auto;border:#777 solid 1px;cursor:default;background-color:#fff;-webkit-user-select:none;user-select:none}.icon-picker i{position:relative;cursor:default}.icon-picker .arrow{position:absolute;z-index:999999;width:0;height:0;border-style:solid}.icon-picker .arrow-right{top:10px;left:-20px;border-width:5px 10px;border-color:rgba(0,0,0,0) #777 rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker .arrow-left{top:10px;left:100%;border-width:5px 10px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #777}.icon-picker .arrow-bottom{top:-20px;left:10px;border-width:10px 5px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #777 rgba(0,0,0,0)}.icon-picker .arrow-top{left:10px;border-width:10px 5px;border-color:#777 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker div.icon-search{padding:5px}.icon-picker div.icon-grid{display:flex;overflow-y:auto;flex-direction:row;flex-wrap:wrap;padding:5px}.icon-picker div.icon-grid div{margin:2px}.icon-picker div.cursor-sv{position:relative;width:15px;height:15px;border-radius:50%;border:#ddd solid 1px;cursor:default}.icon-picker div.cursor{position:relative;width:16px;height:16px;border-radius:50%;border:#222 solid 2px;cursor:default}\n"] }]
+            args: [{ selector: 'icon-picker', standalone: false, providers: [IconPickerService], template: "<div class=\"icon-picker\" #dialogPopup [hidden]=\"!show\" [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n  [style.height.px]=\"ipHeight\" [style.width.px]=\"ipWidth\" [style.top.px]=\"top\" [style.left.px]=\"left\"\r\n  [style.position]=\"position\">\r\n\r\n  <div class=\"arrow arrow-{{ipPosition}}\" [style.top.px]=\"arrowTop\"></div>\r\n\r\n  <div class=\"icon-search {{ipDivSearchStyleClass}}\">\r\n    <input type=\"text\" class=\"{{ipInputSearchStyleClass}}\" [text] [value]=\"search\" (newValue)=\"setSearch($event)\"\r\n      [placeholder]=\"ipPlaceHolder\">\r\n  </div>\r\n  <div class=\"icon-grid\" [ngStyle]=\"{'max-height.px': ipMaxHeight}\">\r\n    <div *ngFor=\"let icon of icons | searchIcon:search\">\r\n      <button *ngIf=\"icon\" class=\"ip-button-icon {{ipButtonStyleClass}}\" type=\"button\" title=\"{{ icon.name }}\"\r\n        [ngClass]=\"{active : icon === selectedIcon}\" [style.width.px]=\"buttonWidth\" [style.height.px]=\"buttonHeight\"\r\n        [style.padding-top.px]=\"ipIconVerticalPadding\" [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n        [style.padding-left.px]=\"ipIconHorizontalPadding\" [style.padding-right.px]=\"ipIconHorizontalPadding\"\r\n        (click)=\"selectIcon(icon)\">\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome\" class=\"fa fa-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome5\" class=\"{{icon.id}}\" [style.font-size.px]=\"ipIconSize\"></span>\r\n        <span *ngIf=\"icon.type === iconType.FontAwesome6\" [style.font-size.px]=\"ipIconSize\">\r\n          <fa-icon [icon]=\"['fas', icon.iconName]\" (error)=\"onIconError($event)\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"icon.type === iconType.Material\" class=\"material-icons\"\r\n          [style.font-size.px]=\"ipIconSize\">{{icon.id}}</span>\r\n        <span *ngIf=\"icon.type === iconType.PrimeIcons\" class=\"pi pi-{{icon.id}}\"\r\n          [style.font-size.px]=\"ipIconSize\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".icon-picker{box-sizing:border-box;margin:0;position:absolute;z-index:100000;top:250px;left:30px;width:230px;height:auto;border:#777 solid 1px;cursor:default;background-color:#fff;-webkit-user-select:none;user-select:none}.icon-picker i{position:relative;cursor:default}.icon-picker .arrow{position:absolute;z-index:999999;width:0;height:0;border-style:solid}.icon-picker .arrow-right{top:10px;left:-20px;border-width:5px 10px;border-color:rgba(0,0,0,0) #777 rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker .arrow-left{top:10px;left:100%;border-width:5px 10px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #777}.icon-picker .arrow-bottom{top:-20px;left:10px;border-width:10px 5px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #777 rgba(0,0,0,0)}.icon-picker .arrow-top{left:10px;border-width:10px 5px;border-color:#777 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.icon-picker div.icon-search{padding:5px}.icon-picker div.icon-grid{display:flex;overflow-y:auto;flex-direction:row;flex-wrap:wrap;padding:5px}.icon-picker div.icon-grid div{margin:2px}.icon-picker div.cursor-sv{position:relative;width:15px;height:15px;border-radius:50%;border:#ddd solid 1px;cursor:default}.icon-picker div.cursor{position:relative;width:16px;height:16px;border-radius:50%;border:#222 solid 2px;cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IconPickerService }], propDecorators: { dialogElement: [{
                 type: ViewChild,
                 args: ['dialogPopup']
             }] } });
 
+class IconPickerDirective {
+    handleFocus() {
+        this.elementFocus();
+    }
+    constructor(vcRef, el) {
+        this.vcRef = vcRef;
+        this.el = el;
+        this.ipPlaceHolder = 'Search icon...';
+        this.ipPosition = 'right';
+        this.ipFallbackIcon = 'fas fa-user';
+        this.ipHeight = 'auto';
+        this.ipMaxHeight = '200px';
+        this.ipWidth = '230px';
+        this.ipIconSize = '16px';
+        this.ipIconVerticalPadding = '6px'; // Top / Bottom
+        this.ipIconHorizontalPadding = '10px'; // Left / Right
+        this.ipIconPack = ['fa5'];
+        this.ipKeepSearchFilter = 'false';
+        this.ipUseRootViewContainer = false;
+        // Default design with bootstrap
+        this.ipButtonStyleClass = 'btn btn-default';
+        this.ipDivSearchStyleClass = '';
+        this.ipInputSearchStyleClass = 'form-control input-sm';
+        this.iconPickerSelect = new EventEmitter(true);
+        this.iconPickerOpen = new EventEmitter(true);
+        this.iconPickerClose = new EventEmitter(true);
+        this.iconPickerFocus = new EventEmitter(true);
+        this.ignoreChanges = false;
+        this.created = false;
+    }
+    onClick() {
+        this.openDialog();
+    }
+    ngOnChanges(changes) {
+        if (changes.iconPicker) {
+            this.ignoreChanges = false;
+        }
+    }
+    ngOnInit() {
+        this.iconPicker = this.iconPicker || this.ipFallbackIcon || 'fa fa-user-plus';
+        this.iconPickerSelect.emit(this.iconPicker);
+    }
+    openDialog() {
+        if (!this.created) {
+            this.created = true;
+            const vcRef = this.vcRef;
+            const cmpRef = vcRef.createComponent(IconPickerComponent);
+            cmpRef.instance.setDialog(this, this.el, this.iconPicker, this.ipPosition, this.ipHeight, this.ipMaxHeight, this.ipWidth, this.ipPlaceHolder, this.ipFallbackIcon, this.ipIconPack, this.ipIconSize, this.ipIconVerticalPadding, this.ipIconHorizontalPadding, this.ipButtonStyleClass, this.ipDivSearchStyleClass, this.ipInputSearchStyleClass, this.ipKeepSearchFilter, this.ipUseRootViewContainer);
+            this.dialog = cmpRef.instance;
+            if (this.vcRef !== vcRef) {
+                cmpRef.changeDetectorRef.detectChanges();
+            }
+        }
+        else if (this.dialog) {
+            this.dialog.openDialog(this.iconPicker);
+        }
+    }
+    iconSelected(icon) {
+        this.iconPickerSelect.emit(icon);
+    }
+    stateChanged(state) {
+        if (state) {
+            this.iconPickerOpen.emit();
+        }
+        else {
+            this.iconPickerClose.emit();
+        }
+    }
+    elementFocus() {
+        this.iconPickerFocus.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IconPickerDirective, isStandalone: true, selector: "[iconPicker]", inputs: { iconPicker: "iconPicker", ipPlaceHolder: "ipPlaceHolder", ipPosition: "ipPosition", ipFallbackIcon: "ipFallbackIcon", ipHeight: "ipHeight", ipMaxHeight: "ipMaxHeight", ipWidth: "ipWidth", ipIconSize: "ipIconSize", ipIconVerticalPadding: "ipIconVerticalPadding", ipIconHorizontalPadding: "ipIconHorizontalPadding", ipIconPack: "ipIconPack", ipKeepSearchFilter: "ipKeepSearchFilter", ipUseRootViewContainer: "ipUseRootViewContainer", ipButtonStyleClass: "ipButtonStyleClass", ipDivSearchStyleClass: "ipDivSearchStyleClass", ipInputSearchStyleClass: "ipInputSearchStyleClass" }, outputs: { iconPickerSelect: "iconPickerSelect", iconPickerOpen: "iconPickerOpen", iconPickerClose: "iconPickerClose", iconPickerFocus: "iconPickerFocus" }, host: { listeners: { "focus": "handleFocus()", "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[iconPicker]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { iconPicker: [{
+                type: Input
+            }], ipPlaceHolder: [{
+                type: Input
+            }], ipPosition: [{
+                type: Input
+            }], ipFallbackIcon: [{
+                type: Input
+            }], ipHeight: [{
+                type: Input
+            }], ipMaxHeight: [{
+                type: Input
+            }], ipWidth: [{
+                type: Input
+            }], ipIconSize: [{
+                type: Input
+            }], ipIconVerticalPadding: [{
+                type: Input
+            }], ipIconHorizontalPadding: [{
+                type: Input
+            }], ipIconPack: [{
+                type: Input
+            }], ipKeepSearchFilter: [{
+                type: Input
+            }], ipUseRootViewContainer: [{
+                type: Input
+            }], ipButtonStyleClass: [{
+                type: Input
+            }], ipDivSearchStyleClass: [{
+                type: Input
+            }], ipInputSearchStyleClass: [{
+                type: Input
+            }], iconPickerSelect: [{
+                type: Output
+            }], iconPickerOpen: [{
+                type: Output
+            }], iconPickerClose: [{
+                type: Output
+            }], iconPickerFocus: [{
+                type: Output
+            }], handleFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class IconPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: IconPickerModule, declarations: [IconPickerComponent], imports: [CommonModule,
             FontAwesomeModule,
-            IconPickerComponent,
+            IconPickerDirective,
+            TextDirective,
+            SearchIconPipe], exports: [IconPickerComponent,
             IconPickerDirective,
             TextDirective,
             SearchIconPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerModule, providers: [
             IconPickerService
         ], imports: [CommonModule,
-            FontAwesomeModule,
-            IconPickerComponent] }); }
+            FontAwesomeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IconPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         FontAwesomeModule,
-                        IconPickerComponent,
                         IconPickerDirective,
                         TextDirective,
                         SearchIconPipe,
@@ -45067,8 +45067,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     providers: [
                         IconPickerService
                     ],
-                    declarations: [],
-                    exports: []
+                    declarations: [
+                        IconPickerComponent,
+                    ],
+                    exports: [
+                        IconPickerComponent,
+                        IconPickerDirective,
+                        TextDirective,
+                        SearchIconPipe,
+                    ]
                 }]
         }] });
 
@@ -45080,5 +45087,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType };
+export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType, SearchIconPipe, TextDirective };
 //# sourceMappingURL=ngx-ntk-icon-picker.mjs.map