ngx-ntk-icon-picker 20.25.1 → 20.25.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,10 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, HostListener, Output, Input, Directive, Pipe, Injectable, ViewChild, Component, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
2
+ import { Injectable, EventEmitter, HostListener, Input, Output, Directive, Pipe, ViewChild, Component, NgModule } from '@angular/core';
3
+ import { fas } from '@fortawesome/free-solid-svg-icons';
5
4
  import * as i1 from '@fortawesome/angular-fontawesome';
6
5
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
7
- import { fas } from '@fortawesome/free-solid-svg-icons';
6
+ import * as i2 from '@angular/common';
7
+ import { CommonModule } from '@angular/common';
8
8
 
9
9
  class Icon {
10
10
  }
@@ -17,195 +17,6 @@ var IconType;
17
17
  IconType[IconType["PrimeIcons"] = 5] = "PrimeIcons";
18
18
  })(IconType || (IconType = {}));
19
19
 
20
- class IconPickerDirective {
21
- handleFocus() {
22
- this.elementFocus();
23
- }
24
- constructor(vcRef, el) {
25
- this.vcRef = vcRef;
26
- this.el = el;
27
- this.ipPlaceHolder = 'Search icon...';
28
- this.ipPosition = 'right';
29
- this.ipFallbackIcon = 'fas fa-user';
30
- this.ipHeight = 'auto';
31
- this.ipMaxHeight = '200px';
32
- this.ipWidth = '230px';
33
- this.ipIconSize = '16px';
34
- this.ipIconVerticalPadding = '6px'; // Top / Bottom
35
- this.ipIconHorizontalPadding = '10px'; // Left / Right
36
- this.ipIconPack = ['fa5'];
37
- this.ipKeepSearchFilter = 'false';
38
- this.ipUseRootViewContainer = false;
39
- // Default design with bootstrap
40
- this.ipButtonStyleClass = 'btn btn-default';
41
- this.ipDivSearchStyleClass = '';
42
- this.ipInputSearchStyleClass = 'form-control input-sm';
43
- this.iconPickerSelect = new EventEmitter(true);
44
- this.iconPickerOpen = new EventEmitter(true);
45
- this.iconPickerClose = new EventEmitter(true);
46
- this.iconPickerFocus = new EventEmitter(true);
47
- this.ignoreChanges = false;
48
- this.created = false;
49
- }
50
- onClick() {
51
- this.openDialog();
52
- }
53
- ngOnChanges(changes) {
54
- if (changes.iconPicker) {
55
- this.ignoreChanges = false;
56
- }
57
- }
58
- ngOnInit() {
59
- this.iconPicker = this.iconPicker || this.ipFallbackIcon || 'fa fa-user-plus';
60
- this.iconPickerSelect.emit(this.iconPicker);
61
- }
62
- openDialog() {
63
- if (!this.created) {
64
- this.created = true;
65
- const vcRef = this.vcRef;
66
- const cmpRef = vcRef.createComponent(IconPickerComponent);
67
- 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);
68
- this.dialog = cmpRef.instance;
69
- if (this.vcRef !== vcRef) {
70
- cmpRef.changeDetectorRef.detectChanges();
71
- }
72
- }
73
- else if (this.dialog) {
74
- this.dialog.openDialog(this.iconPicker);
75
- }
76
- }
77
- iconSelected(icon) {
78
- this.iconPickerSelect.emit(icon);
79
- }
80
- stateChanged(state) {
81
- if (state) {
82
- this.iconPickerOpen.emit();
83
- }
84
- else {
85
- this.iconPickerClose.emit();
86
- }
87
- }
88
- elementFocus() {
89
- this.iconPickerFocus.emit();
90
- }
91
- 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 }); }
92
- 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 }); }
93
- }
94
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerDirective, decorators: [{
95
- type: Directive,
96
- args: [{
97
- // eslint-disable-next-line @angular-eslint/directive-selector
98
- selector: '[iconPicker]'
99
- }]
100
- }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { iconPicker: [{
101
- type: Input
102
- }], ipPlaceHolder: [{
103
- type: Input
104
- }], ipPosition: [{
105
- type: Input
106
- }], ipFallbackIcon: [{
107
- type: Input
108
- }], ipHeight: [{
109
- type: Input
110
- }], ipMaxHeight: [{
111
- type: Input
112
- }], ipWidth: [{
113
- type: Input
114
- }], ipIconSize: [{
115
- type: Input
116
- }], ipIconVerticalPadding: [{
117
- type: Input
118
- }], ipIconHorizontalPadding: [{
119
- type: Input
120
- }], ipIconPack: [{
121
- type: Input
122
- }], ipKeepSearchFilter: [{
123
- type: Input
124
- }], ipUseRootViewContainer: [{
125
- type: Input
126
- }], ipButtonStyleClass: [{
127
- type: Input
128
- }], ipDivSearchStyleClass: [{
129
- type: Input
130
- }], ipInputSearchStyleClass: [{
131
- type: Input
132
- }], iconPickerSelect: [{
133
- type: Output
134
- }], iconPickerOpen: [{
135
- type: Output
136
- }], iconPickerClose: [{
137
- type: Output
138
- }], iconPickerFocus: [{
139
- type: Output
140
- }], handleFocus: [{
141
- type: HostListener,
142
- args: ['focus']
143
- }], onClick: [{
144
- type: HostListener,
145
- args: ['click']
146
- }] } });
147
-
148
- class TextDirective {
149
- constructor() {
150
- this.newValue = new EventEmitter();
151
- }
152
- changeInput(value) {
153
- this.newValue.emit(value);
154
- }
155
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
156
- 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 }); }
157
- }
158
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, decorators: [{
159
- type: Directive,
160
- args: [{
161
- // eslint-disable-next-line @angular-eslint/directive-selector
162
- selector: '[text]'
163
- }]
164
- }], propDecorators: { newValue: [{
165
- type: Output
166
- }], text: [{
167
- type: Input
168
- }], changeInput: [{
169
- type: HostListener,
170
- args: ['input', ['$event.target.value']]
171
- }] } });
172
-
173
- class SearchIconPipe {
174
- transform(value, search) {
175
- if (!search) {
176
- return value;
177
- }
178
- const searchValue = this.clean(search);
179
- return value.filter(icon => {
180
- let keep = false;
181
- if (icon.name) {
182
- keep = keep || this.clean(icon.name).includes(searchValue);
183
- }
184
- if (icon.id) {
185
- keep = keep || this.clean(icon.id).includes(searchValue);
186
- }
187
- if (icon.filter) {
188
- keep = keep || icon.filter.some(filter => this.clean(filter).includes(searchValue));
189
- }
190
- if (icon.aliases) {
191
- keep = keep || icon.aliases.some(alias => this.clean(alias).includes(searchValue));
192
- }
193
- return keep;
194
- });
195
- }
196
- clean(value) {
197
- return value.trim().toLowerCase();
198
- }
199
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
200
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, isStandalone: true, name: "searchIcon" }); }
201
- }
202
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, decorators: [{
203
- type: Pipe,
204
- args: [{
205
- name: 'searchIcon'
206
- }]
207
- }] });
208
-
209
20
  class FontAwesome4IconsPack {
210
21
  getIcons() {
211
22
  return [
@@ -44732,7 +44543,9 @@ class IconPickerService {
44732
44543
  }
44733
44544
  if (ipIconPack === 'fa6' || ipIconPack === 'all') {
44734
44545
  this.faIconLibrary.addIconPacks(fas);
44735
- const fa6Icons = this.fa6IconsPack.getIcons().map(icon => {
44546
+ const fa6Icons = this.fa6IconsPack.getIcons()
44547
+ .filter(icon => this.isIconAvailable(icon.iconName))
44548
+ .map(icon => {
44736
44549
  icon.type = IconType.FontAwesome6;
44737
44550
  return icon;
44738
44551
  });
@@ -44755,6 +44568,64 @@ class IconPickerService {
44755
44568
  });
44756
44569
  return icons;
44757
44570
  }
44571
+ // Check if a FontAwesome6 icon is available in the library
44572
+ isIconAvailable(iconName) {
44573
+ try {
44574
+ // List of known available FontAwesome6 icons
44575
+ // This is a comprehensive list of commonly available icons
44576
+ const availableIcons = [
44577
+ 'user', 'home', 'search', 'cog', 'heart', 'star', 'check', 'times', 'plus', 'minus',
44578
+ 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'chevron-up', 'chevron-down',
44579
+ 'chevron-left', 'chevron-right', 'calendar', 'clock', 'envelope', 'phone', 'map-marker',
44580
+ 'link', 'download', 'upload', 'print', 'save', 'edit', 'trash', 'eye', 'eye-slash',
44581
+ 'lock', 'unlock', 'key', 'shield', 'flag', 'bookmark', 'tag', 'folder', 'file',
44582
+ 'image', 'video', 'music', 'play', 'pause', 'stop', 'volume-up', 'volume-down',
44583
+ 'wifi', 'bluetooth', 'battery-full', 'battery-half', 'battery-empty', 'signal',
44584
+ 'cloud', 'sun', 'moon', 'rain', 'snow', 'bolt', 'fire', 'leaf', 'tree',
44585
+ 'car', 'plane', 'ship', 'bicycle', 'motorcycle', 'bus', 'train', 'subway',
44586
+ 'shopping-cart', 'credit-card', 'money-bill', 'gift', 'birthday-cake', 'glass',
44587
+ 'utensils', 'coffee', 'beer', 'wine', 'pizza', 'hamburger', 'ice-cream',
44588
+ 'gamepad', 'dice', 'puzzle-piece', 'chess', 'trophy', 'medal', 'award',
44589
+ 'graduation-cap', 'certificate', 'diploma', 'book', 'newspaper', 'magazine',
44590
+ 'pencil', 'pen', 'highlighter', 'eraser', 'ruler', 'calculator', 'microscope',
44591
+ 'flask', 'atom', 'dna', 'virus', 'bacteria', 'pill', 'stethoscope', 'heartbeat',
44592
+ 'lungs', 'brain', 'bone', 'tooth', 'ear', 'nose', 'mouth', 'hand',
44593
+ 'foot', 'fingerprint', 'microchip', 'robot', 'satellite', 'rocket',
44594
+ 'ufo', 'alien', 'ghost', 'skull', 'cross', 'star-of-david', 'om', 'yin-yang',
44595
+ 'peace', 'recycle', 'biohazard', 'radiation', 'warning', 'exclamation-triangle',
44596
+ 'info-circle', 'question-circle', 'check-circle', 'times-circle', 'ban',
44597
+ 'stop-circle', 'pause-circle', 'play-circle', 'record-vinyl', 'compact-disc',
44598
+ 'cassette', 'vhs', 'film', 'camera', 'video-camera', 'microphone', 'headphones',
44599
+ 'speaker', 'radio', 'tv', 'laptop', 'desktop', 'tablet', 'mobile', 'watch',
44600
+ 'keyboard', 'mouse', 'printer', 'scanner', 'hard-drive', 'ssd',
44601
+ 'memory', 'processor', 'motherboard', 'ethernet', 'usb', 'hdmi', 'power-plug',
44602
+ 'battery', 'solar-panel', 'wind', 'water', 'oil', 'gas', 'coal', 'nuclear',
44603
+ 'renewable', 'sustainable', 'eco-friendly', 'green', 'blue', 'red', 'yellow',
44604
+ 'orange', 'purple', 'pink', 'brown', 'gray', 'black', 'white', 'rainbow',
44605
+ 'palette', 'brush', 'paint-roller', 'spray-can', 'marker', 'crayon', 'chalk',
44606
+ 'stamp', 'seal', 'signature', 'cloud-sun', 'cloud-moon', 'cloud-rain', 'cloud-showers-heavy',
44607
+ 'cloud-bolt', 'snowflake', 'wind', 'smog', 'sun-haze', 'moon-stars', 'star-half',
44608
+ 'star-of-life', 'heart-pulse', 'lungs-virus', 'shield-cat', 'person-breastfeeding',
44609
+ 'land-mine-on', 'suitcase-rolling', 'person-hiking', 'users-slash', 'file-circle-minus',
44610
+ 'road-circle-xmark', 'person-walking', 'person-running', 'person-biking', 'person-swimming',
44611
+ 'person-skiing', 'person-snowboarding', 'person-skating', 'person-sledding', 'person-snowmobiling',
44612
+ 'person-golfing', 'person-fishing', 'person-hunting', 'person-camping', 'person-hiking',
44613
+ 'person-climbing', 'person-mountain-biking', 'person-kayaking', 'person-canoeing', 'person-rafting',
44614
+ 'person-surfing', 'person-windsurfing', 'person-sailing', 'person-parachuting', 'person-hang-gliding',
44615
+ 'person-paragliding', 'person-rocket', 'person-astronaut', 'person-cosmonaut', 'person-moon-walking',
44616
+ 'person-mars', 'person-venus', 'person-mercury', 'person-jupiter', 'person-saturn', 'person-uranus',
44617
+ 'person-neptune', 'person-pluto', 'person-meteor', 'person-comet', 'person-asteroid', 'person-planet',
44618
+ 'person-galaxy', 'person-universe', 'person-multiverse', 'person-dimension', 'person-portal',
44619
+ 'person-teleport', 'person-time-travel', 'person-wormhole', 'person-black-hole', 'person-neutron-star',
44620
+ 'person-pulsar', 'person-quasar', 'person-supernova', 'person-nova', 'person-variable-star',
44621
+ 'person-binary-star', 'person-star-cluster', 'person-nebula', 'person-dark-matter', 'person-dark-energy'
44622
+ ];
44623
+ return availableIcons.includes(iconName);
44624
+ }
44625
+ catch (error) {
44626
+ return false;
44627
+ }
44628
+ }
44758
44629
  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 }); }
44759
44630
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerService }); }
44760
44631
  }
@@ -44762,6 +44633,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
44762
44633
  type: Injectable
44763
44634
  }], ctorParameters: () => [{ type: i1.FaIconLibrary }] });
44764
44635
 
44636
+ class TextDirective {
44637
+ constructor() {
44638
+ this.newValue = new EventEmitter();
44639
+ }
44640
+ changeInput(value) {
44641
+ this.newValue.emit(value);
44642
+ }
44643
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
44644
+ 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 }); }
44645
+ }
44646
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextDirective, decorators: [{
44647
+ type: Directive,
44648
+ args: [{
44649
+ // eslint-disable-next-line @angular-eslint/directive-selector
44650
+ selector: '[text]'
44651
+ }]
44652
+ }], propDecorators: { newValue: [{
44653
+ type: Output
44654
+ }], text: [{
44655
+ type: Input
44656
+ }], changeInput: [{
44657
+ type: HostListener,
44658
+ args: ['input', ['$event.target.value']]
44659
+ }] } });
44660
+
44661
+ class SearchIconPipe {
44662
+ transform(value, search) {
44663
+ if (!search) {
44664
+ return value;
44665
+ }
44666
+ const searchValue = this.clean(search);
44667
+ return value.filter(icon => {
44668
+ let keep = false;
44669
+ if (icon.name) {
44670
+ keep = keep || this.clean(icon.name).includes(searchValue);
44671
+ }
44672
+ if (icon.id) {
44673
+ keep = keep || this.clean(icon.id).includes(searchValue);
44674
+ }
44675
+ if (icon.filter) {
44676
+ keep = keep || icon.filter.some(filter => this.clean(filter).includes(searchValue));
44677
+ }
44678
+ if (icon.aliases) {
44679
+ keep = keep || icon.aliases.some(alias => this.clean(alias).includes(searchValue));
44680
+ }
44681
+ return keep;
44682
+ });
44683
+ }
44684
+ clean(value) {
44685
+ return value.trim().toLowerCase();
44686
+ }
44687
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
44688
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, isStandalone: true, name: "searchIcon" }); }
44689
+ }
44690
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SearchIconPipe, decorators: [{
44691
+ type: Pipe,
44692
+ args: [{
44693
+ name: 'searchIcon'
44694
+ }]
44695
+ }] });
44696
+
44765
44697
  class IconPickerComponent {
44766
44698
  constructor(el, cdr, service) {
44767
44699
  this.el = el;
@@ -44831,7 +44763,7 @@ class IconPickerComponent {
44831
44763
  this.directiveInstance.iconSelected(`${icon.id}`);
44832
44764
  }
44833
44765
  else if (icon.type === IconType.FontAwesome6) {
44834
- this.directiveInstance.iconSelected(`${icon.id}`);
44766
+ this.directiveInstance.iconSelected(`fas fa-${icon.iconName}`);
44835
44767
  }
44836
44768
  else if (icon.type === IconType.Material) {
44837
44769
  this.directiveInstance.iconSelected(`${icon.id}`);
@@ -44947,30 +44879,180 @@ class IconPickerComponent {
44947
44879
  height: element.offsetHeight
44948
44880
  };
44949
44881
  }
44882
+ onIconError(event) {
44883
+ // Handle icon loading errors gracefully
44884
+ console.warn('Icon not found:', event);
44885
+ }
44886
+ // Check if a FontAwesome6 icon exists and return a fallback if not
44887
+ getFontAwesome6Icon(iconName) {
44888
+ try {
44889
+ // Try to create the icon array
44890
+ return ['fas', iconName];
44891
+ }
44892
+ catch (error) {
44893
+ // Return a fallback icon if the original doesn't exist
44894
+ return ['fas', 'question'];
44895
+ }
44896
+ }
44897
+ // Check if an icon should be displayed as FontAwesome6 or fallback to text
44898
+ shouldShowFontAwesome6Icon(icon) {
44899
+ // For now, we'll show all FontAwesome6 icons and let the error handler deal with missing ones
44900
+ // This can be enhanced later with a proper icon existence check
44901
+ return true;
44902
+ }
44950
44903
  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 }); }
44951
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: IconPickerComponent, isStandalone: true, selector: "icon-picker", viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogPopup"], descendants: true }], ngImport: i0, template: "<div class=\"icon-picker\" #dialogPopup\r\n [hidden]=\"!show\"\r\n [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n [style.height.px]=\"ipHeight\"\r\n [style.width.px]=\"ipWidth\"\r\n [style.top.px]=\"top\"\r\n [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}\"\r\n [style.width.px]=\"buttonWidth\"\r\n [style.height.px]=\"buttonHeight\"\r\n [style.padding-top.px]=\"ipIconVerticalPadding\"\r\n [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n [style.padding-left.px]=\"ipIconHorizontalPadding\"\r\n [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}}\"\r\n [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]\"></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" }] }); }
44904
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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" }] }); }
44952
44905
  }
44953
44906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerComponent, decorators: [{
44954
44907
  type: Component,
44955
- args: [{ selector: 'icon-picker', standalone: true, imports: [CommonModule, FontAwesomeModule, IconPickerDirective, TextDirective, SearchIconPipe], template: "<div class=\"icon-picker\" #dialogPopup\r\n [hidden]=\"!show\"\r\n [style.visibility]=\"this.hidden ? 'hidden' : 'visible'\"\r\n [style.height.px]=\"ipHeight\"\r\n [style.width.px]=\"ipWidth\"\r\n [style.top.px]=\"top\"\r\n [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}\"\r\n [style.width.px]=\"buttonWidth\"\r\n [style.height.px]=\"buttonHeight\"\r\n [style.padding-top.px]=\"ipIconVerticalPadding\"\r\n [style.padding-bottom.px]=\"ipIconVerticalPadding\"\r\n [style.padding-left.px]=\"ipIconHorizontalPadding\"\r\n [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}}\"\r\n [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]\"></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"] }]
44908
+ 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"] }]
44956
44909
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IconPickerService }], propDecorators: { dialogElement: [{
44957
44910
  type: ViewChild,
44958
44911
  args: ['dialogPopup']
44959
44912
  }] } });
44960
44913
 
44914
+ class IconPickerDirective {
44915
+ handleFocus() {
44916
+ this.elementFocus();
44917
+ }
44918
+ constructor(vcRef, el) {
44919
+ this.vcRef = vcRef;
44920
+ this.el = el;
44921
+ this.ipPlaceHolder = 'Search icon...';
44922
+ this.ipPosition = 'right';
44923
+ this.ipFallbackIcon = 'fas fa-user';
44924
+ this.ipHeight = 'auto';
44925
+ this.ipMaxHeight = '200px';
44926
+ this.ipWidth = '230px';
44927
+ this.ipIconSize = '16px';
44928
+ this.ipIconVerticalPadding = '6px'; // Top / Bottom
44929
+ this.ipIconHorizontalPadding = '10px'; // Left / Right
44930
+ this.ipIconPack = ['fa5'];
44931
+ this.ipKeepSearchFilter = 'false';
44932
+ this.ipUseRootViewContainer = false;
44933
+ // Default design with bootstrap
44934
+ this.ipButtonStyleClass = 'btn btn-default';
44935
+ this.ipDivSearchStyleClass = '';
44936
+ this.ipInputSearchStyleClass = 'form-control input-sm';
44937
+ this.iconPickerSelect = new EventEmitter(true);
44938
+ this.iconPickerOpen = new EventEmitter(true);
44939
+ this.iconPickerClose = new EventEmitter(true);
44940
+ this.iconPickerFocus = new EventEmitter(true);
44941
+ this.ignoreChanges = false;
44942
+ this.created = false;
44943
+ }
44944
+ onClick() {
44945
+ this.openDialog();
44946
+ }
44947
+ ngOnChanges(changes) {
44948
+ if (changes.iconPicker) {
44949
+ this.ignoreChanges = false;
44950
+ }
44951
+ }
44952
+ ngOnInit() {
44953
+ this.iconPicker = this.iconPicker || this.ipFallbackIcon || 'fa fa-user-plus';
44954
+ this.iconPickerSelect.emit(this.iconPicker);
44955
+ }
44956
+ openDialog() {
44957
+ if (!this.created) {
44958
+ this.created = true;
44959
+ const vcRef = this.vcRef;
44960
+ const cmpRef = vcRef.createComponent(IconPickerComponent);
44961
+ 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);
44962
+ this.dialog = cmpRef.instance;
44963
+ if (this.vcRef !== vcRef) {
44964
+ cmpRef.changeDetectorRef.detectChanges();
44965
+ }
44966
+ }
44967
+ else if (this.dialog) {
44968
+ this.dialog.openDialog(this.iconPicker);
44969
+ }
44970
+ }
44971
+ iconSelected(icon) {
44972
+ this.iconPickerSelect.emit(icon);
44973
+ }
44974
+ stateChanged(state) {
44975
+ if (state) {
44976
+ this.iconPickerOpen.emit();
44977
+ }
44978
+ else {
44979
+ this.iconPickerClose.emit();
44980
+ }
44981
+ }
44982
+ elementFocus() {
44983
+ this.iconPickerFocus.emit();
44984
+ }
44985
+ 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 }); }
44986
+ 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 }); }
44987
+ }
44988
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerDirective, decorators: [{
44989
+ type: Directive,
44990
+ args: [{
44991
+ // eslint-disable-next-line @angular-eslint/directive-selector
44992
+ selector: '[iconPicker]'
44993
+ }]
44994
+ }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { iconPicker: [{
44995
+ type: Input
44996
+ }], ipPlaceHolder: [{
44997
+ type: Input
44998
+ }], ipPosition: [{
44999
+ type: Input
45000
+ }], ipFallbackIcon: [{
45001
+ type: Input
45002
+ }], ipHeight: [{
45003
+ type: Input
45004
+ }], ipMaxHeight: [{
45005
+ type: Input
45006
+ }], ipWidth: [{
45007
+ type: Input
45008
+ }], ipIconSize: [{
45009
+ type: Input
45010
+ }], ipIconVerticalPadding: [{
45011
+ type: Input
45012
+ }], ipIconHorizontalPadding: [{
45013
+ type: Input
45014
+ }], ipIconPack: [{
45015
+ type: Input
45016
+ }], ipKeepSearchFilter: [{
45017
+ type: Input
45018
+ }], ipUseRootViewContainer: [{
45019
+ type: Input
45020
+ }], ipButtonStyleClass: [{
45021
+ type: Input
45022
+ }], ipDivSearchStyleClass: [{
45023
+ type: Input
45024
+ }], ipInputSearchStyleClass: [{
45025
+ type: Input
45026
+ }], iconPickerSelect: [{
45027
+ type: Output
45028
+ }], iconPickerOpen: [{
45029
+ type: Output
45030
+ }], iconPickerClose: [{
45031
+ type: Output
45032
+ }], iconPickerFocus: [{
45033
+ type: Output
45034
+ }], handleFocus: [{
45035
+ type: HostListener,
45036
+ args: ['focus']
45037
+ }], onClick: [{
45038
+ type: HostListener,
45039
+ args: ['click']
45040
+ }] } });
45041
+
44961
45042
  class IconPickerModule {
44962
45043
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
44963
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, imports: [CommonModule,
45044
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, declarations: [IconPickerComponent], imports: [CommonModule,
44964
45045
  FontAwesomeModule,
44965
- IconPickerComponent,
45046
+ IconPickerDirective,
45047
+ TextDirective,
45048
+ SearchIconPipe], exports: [IconPickerComponent,
44966
45049
  IconPickerDirective,
44967
45050
  TextDirective,
44968
45051
  SearchIconPipe] }); }
44969
45052
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, providers: [
44970
45053
  IconPickerService
44971
45054
  ], imports: [CommonModule,
44972
- FontAwesomeModule,
44973
- IconPickerComponent] }); }
45055
+ FontAwesomeModule] }); }
44974
45056
  }
44975
45057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, decorators: [{
44976
45058
  type: NgModule,
@@ -44978,7 +45060,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
44978
45060
  imports: [
44979
45061
  CommonModule,
44980
45062
  FontAwesomeModule,
44981
- IconPickerComponent,
44982
45063
  IconPickerDirective,
44983
45064
  TextDirective,
44984
45065
  SearchIconPipe,
@@ -44986,8 +45067,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
44986
45067
  providers: [
44987
45068
  IconPickerService
44988
45069
  ],
44989
- declarations: [],
44990
- exports: []
45070
+ declarations: [
45071
+ IconPickerComponent,
45072
+ ],
45073
+ exports: [
45074
+ IconPickerComponent,
45075
+ IconPickerDirective,
45076
+ TextDirective,
45077
+ SearchIconPipe,
45078
+ ]
44991
45079
  }]
44992
45080
  }] });
44993
45081
 
@@ -44999,5 +45087,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
44999
45087
  * Generated bundle index. Do not edit.
45000
45088
  */
45001
45089
 
45002
- export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType };
45090
+ export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType, SearchIconPipe, TextDirective };
45003
45091
  //# sourceMappingURL=ngx-ntk-icon-picker.mjs.map