ngx-ntk-icon-picker 20.25.2 → 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.
- package/fesm2022/ngx-ntk-icon-picker.mjs +149 -142
- package/fesm2022/ngx-ntk-icon-picker.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, HostListener,
|
|
3
|
-
import
|
|
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
|
|
6
|
+
import * as i2 from '@angular/common';
|
|
7
|
+
import { CommonModule } from '@angular/common';
|
|
8
8
|
|
|
9
9
|
class Icon {
|
|
10
10
|
}
|
|
@@ -44633,134 +44633,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
44633
44633
|
type: Injectable
|
|
44634
44634
|
}], ctorParameters: () => [{ type: i1.FaIconLibrary }] });
|
|
44635
44635
|
|
|
44636
|
-
class IconPickerDirective {
|
|
44637
|
-
handleFocus() {
|
|
44638
|
-
this.elementFocus();
|
|
44639
|
-
}
|
|
44640
|
-
constructor(vcRef, el) {
|
|
44641
|
-
this.vcRef = vcRef;
|
|
44642
|
-
this.el = el;
|
|
44643
|
-
this.ipPlaceHolder = 'Search icon...';
|
|
44644
|
-
this.ipPosition = 'right';
|
|
44645
|
-
this.ipFallbackIcon = 'fas fa-user';
|
|
44646
|
-
this.ipHeight = 'auto';
|
|
44647
|
-
this.ipMaxHeight = '200px';
|
|
44648
|
-
this.ipWidth = '230px';
|
|
44649
|
-
this.ipIconSize = '16px';
|
|
44650
|
-
this.ipIconVerticalPadding = '6px'; // Top / Bottom
|
|
44651
|
-
this.ipIconHorizontalPadding = '10px'; // Left / Right
|
|
44652
|
-
this.ipIconPack = ['fa5'];
|
|
44653
|
-
this.ipKeepSearchFilter = 'false';
|
|
44654
|
-
this.ipUseRootViewContainer = false;
|
|
44655
|
-
// Default design with bootstrap
|
|
44656
|
-
this.ipButtonStyleClass = 'btn btn-default';
|
|
44657
|
-
this.ipDivSearchStyleClass = '';
|
|
44658
|
-
this.ipInputSearchStyleClass = 'form-control input-sm';
|
|
44659
|
-
this.iconPickerSelect = new EventEmitter(true);
|
|
44660
|
-
this.iconPickerOpen = new EventEmitter(true);
|
|
44661
|
-
this.iconPickerClose = new EventEmitter(true);
|
|
44662
|
-
this.iconPickerFocus = new EventEmitter(true);
|
|
44663
|
-
this.ignoreChanges = false;
|
|
44664
|
-
this.created = false;
|
|
44665
|
-
}
|
|
44666
|
-
onClick() {
|
|
44667
|
-
this.openDialog();
|
|
44668
|
-
}
|
|
44669
|
-
ngOnChanges(changes) {
|
|
44670
|
-
if (changes.iconPicker) {
|
|
44671
|
-
this.ignoreChanges = false;
|
|
44672
|
-
}
|
|
44673
|
-
}
|
|
44674
|
-
ngOnInit() {
|
|
44675
|
-
this.iconPicker = this.iconPicker || this.ipFallbackIcon || 'fa fa-user-plus';
|
|
44676
|
-
this.iconPickerSelect.emit(this.iconPicker);
|
|
44677
|
-
}
|
|
44678
|
-
openDialog() {
|
|
44679
|
-
if (!this.created) {
|
|
44680
|
-
this.created = true;
|
|
44681
|
-
const vcRef = this.vcRef;
|
|
44682
|
-
const cmpRef = vcRef.createComponent(IconPickerComponent);
|
|
44683
|
-
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);
|
|
44684
|
-
this.dialog = cmpRef.instance;
|
|
44685
|
-
if (this.vcRef !== vcRef) {
|
|
44686
|
-
cmpRef.changeDetectorRef.detectChanges();
|
|
44687
|
-
}
|
|
44688
|
-
}
|
|
44689
|
-
else if (this.dialog) {
|
|
44690
|
-
this.dialog.openDialog(this.iconPicker);
|
|
44691
|
-
}
|
|
44692
|
-
}
|
|
44693
|
-
iconSelected(icon) {
|
|
44694
|
-
this.iconPickerSelect.emit(icon);
|
|
44695
|
-
}
|
|
44696
|
-
stateChanged(state) {
|
|
44697
|
-
if (state) {
|
|
44698
|
-
this.iconPickerOpen.emit();
|
|
44699
|
-
}
|
|
44700
|
-
else {
|
|
44701
|
-
this.iconPickerClose.emit();
|
|
44702
|
-
}
|
|
44703
|
-
}
|
|
44704
|
-
elementFocus() {
|
|
44705
|
-
this.iconPickerFocus.emit();
|
|
44706
|
-
}
|
|
44707
|
-
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 }); }
|
|
44708
|
-
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 }); }
|
|
44709
|
-
}
|
|
44710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerDirective, decorators: [{
|
|
44711
|
-
type: Directive,
|
|
44712
|
-
args: [{
|
|
44713
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
44714
|
-
selector: '[iconPicker]'
|
|
44715
|
-
}]
|
|
44716
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { iconPicker: [{
|
|
44717
|
-
type: Input
|
|
44718
|
-
}], ipPlaceHolder: [{
|
|
44719
|
-
type: Input
|
|
44720
|
-
}], ipPosition: [{
|
|
44721
|
-
type: Input
|
|
44722
|
-
}], ipFallbackIcon: [{
|
|
44723
|
-
type: Input
|
|
44724
|
-
}], ipHeight: [{
|
|
44725
|
-
type: Input
|
|
44726
|
-
}], ipMaxHeight: [{
|
|
44727
|
-
type: Input
|
|
44728
|
-
}], ipWidth: [{
|
|
44729
|
-
type: Input
|
|
44730
|
-
}], ipIconSize: [{
|
|
44731
|
-
type: Input
|
|
44732
|
-
}], ipIconVerticalPadding: [{
|
|
44733
|
-
type: Input
|
|
44734
|
-
}], ipIconHorizontalPadding: [{
|
|
44735
|
-
type: Input
|
|
44736
|
-
}], ipIconPack: [{
|
|
44737
|
-
type: Input
|
|
44738
|
-
}], ipKeepSearchFilter: [{
|
|
44739
|
-
type: Input
|
|
44740
|
-
}], ipUseRootViewContainer: [{
|
|
44741
|
-
type: Input
|
|
44742
|
-
}], ipButtonStyleClass: [{
|
|
44743
|
-
type: Input
|
|
44744
|
-
}], ipDivSearchStyleClass: [{
|
|
44745
|
-
type: Input
|
|
44746
|
-
}], ipInputSearchStyleClass: [{
|
|
44747
|
-
type: Input
|
|
44748
|
-
}], iconPickerSelect: [{
|
|
44749
|
-
type: Output
|
|
44750
|
-
}], iconPickerOpen: [{
|
|
44751
|
-
type: Output
|
|
44752
|
-
}], iconPickerClose: [{
|
|
44753
|
-
type: Output
|
|
44754
|
-
}], iconPickerFocus: [{
|
|
44755
|
-
type: Output
|
|
44756
|
-
}], handleFocus: [{
|
|
44757
|
-
type: HostListener,
|
|
44758
|
-
args: ['focus']
|
|
44759
|
-
}], onClick: [{
|
|
44760
|
-
type: HostListener,
|
|
44761
|
-
args: ['click']
|
|
44762
|
-
}] } });
|
|
44763
|
-
|
|
44764
44636
|
class TextDirective {
|
|
44765
44637
|
constructor() {
|
|
44766
44638
|
this.newValue = new EventEmitter();
|
|
@@ -45029,29 +44901,158 @@ class IconPickerComponent {
|
|
|
45029
44901
|
return true;
|
|
45030
44902
|
}
|
|
45031
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 }); }
|
|
45032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: IconPickerComponent, isStandalone:
|
|
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" }] }); }
|
|
45033
44905
|
}
|
|
45034
44906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerComponent, decorators: [{
|
|
45035
44907
|
type: Component,
|
|
45036
|
-
args: [{ selector: 'icon-picker', standalone:
|
|
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"] }]
|
|
45037
44909
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IconPickerService }], propDecorators: { dialogElement: [{
|
|
45038
44910
|
type: ViewChild,
|
|
45039
44911
|
args: ['dialogPopup']
|
|
45040
44912
|
}] } });
|
|
45041
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
|
+
|
|
45042
45042
|
class IconPickerModule {
|
|
45043
45043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
45044
|
-
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,
|
|
45045
45045
|
FontAwesomeModule,
|
|
45046
|
-
|
|
45046
|
+
IconPickerDirective,
|
|
45047
|
+
TextDirective,
|
|
45048
|
+
SearchIconPipe], exports: [IconPickerComponent,
|
|
45047
45049
|
IconPickerDirective,
|
|
45048
45050
|
TextDirective,
|
|
45049
45051
|
SearchIconPipe] }); }
|
|
45050
45052
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, providers: [
|
|
45051
45053
|
IconPickerService
|
|
45052
45054
|
], imports: [CommonModule,
|
|
45053
|
-
FontAwesomeModule
|
|
45054
|
-
IconPickerComponent] }); }
|
|
45055
|
+
FontAwesomeModule] }); }
|
|
45055
45056
|
}
|
|
45056
45057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: IconPickerModule, decorators: [{
|
|
45057
45058
|
type: NgModule,
|
|
@@ -45059,7 +45060,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
45059
45060
|
imports: [
|
|
45060
45061
|
CommonModule,
|
|
45061
45062
|
FontAwesomeModule,
|
|
45062
|
-
IconPickerComponent,
|
|
45063
45063
|
IconPickerDirective,
|
|
45064
45064
|
TextDirective,
|
|
45065
45065
|
SearchIconPipe,
|
|
@@ -45067,8 +45067,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
45067
45067
|
providers: [
|
|
45068
45068
|
IconPickerService
|
|
45069
45069
|
],
|
|
45070
|
-
declarations: [
|
|
45071
|
-
|
|
45070
|
+
declarations: [
|
|
45071
|
+
IconPickerComponent,
|
|
45072
|
+
],
|
|
45073
|
+
exports: [
|
|
45074
|
+
IconPickerComponent,
|
|
45075
|
+
IconPickerDirective,
|
|
45076
|
+
TextDirective,
|
|
45077
|
+
SearchIconPipe,
|
|
45078
|
+
]
|
|
45072
45079
|
}]
|
|
45073
45080
|
}] });
|
|
45074
45081
|
|
|
@@ -45080,5 +45087,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
45080
45087
|
* Generated bundle index. Do not edit.
|
|
45081
45088
|
*/
|
|
45082
45089
|
|
|
45083
|
-
export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType };
|
|
45090
|
+
export { Icon, IconPickerComponent, IconPickerDirective, IconPickerModule, IconPickerService, IconType, SearchIconPipe, TextDirective };
|
|
45084
45091
|
//# sourceMappingURL=ngx-ntk-icon-picker.mjs.map
|